From d51454b497e1d7ea01ebeac533259820f4a6786e Mon Sep 17 00:00:00 2001
From: Bill Erickson <berickxx@gmail.com>
Date: Tue, 30 Jul 2019 12:12:12 -0400
Subject: [PATCH] LP1739277 Angular org selector style callback

Allow the caller of an <eg-org-select> to pass a function which is
called against each org unit in the list to determine what CSS class(es)
should be applied to the org unit label in the list.

Includes sandbox example.

Signed-off-by: Bill Erickson <berickxx@gmail.com>
Signed-off-by: Jennifer Bruch <jbruch@sparkpa.org>
Signed-off-by: Jane Sandberg <sandbej@linnbenton.edu>
---
 .../src/eg2/src/app/share/org-select/org-select.component.html   | 2 +-
 .../src/eg2/src/app/share/org-select/org-select.component.ts     | 9 ++++++++-
 Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html    | 6 ++++++
 Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts      | 7 ++++++-
 4 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/Open-ILS/src/eg2/src/app/share/org-select/org-select.component.html b/Open-ILS/src/eg2/src/app/share/org-select/org-select.component.html
index cf120ecc41..0a662c0eba 100644
--- a/Open-ILS/src/eg2/src/app/share/org-select/org-select.component.html
+++ b/Open-ILS/src/eg2/src/app/share/org-select/org-select.component.html
@@ -1,7 +1,7 @@
 
 <!-- todo disabled -->
 <ng-template #displayTemplate let-r="result">
-  <span id="{{domId}}-{{r.id}}">{{r.label}}</span>
+  <span id="{{domId}}-{{r.id}}" class="{{orgClassCallback(r.id)}}">{{r.label}}</span>
 </ng-template>
 
 <ng-container *ngIf="readOnly && selected">
diff --git a/Open-ILS/src/eg2/src/app/share/org-select/org-select.component.ts b/Open-ILS/src/eg2/src/app/share/org-select/org-select.component.ts
index dab8e37fa2..005c07625c 100644
--- a/Open-ILS/src/eg2/src/app/share/org-select/org-select.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/org-select/org-select.component.ts
@@ -118,6 +118,11 @@ export class OrgSelectComponent implements OnInit {
         this.applyPermLimitOrgs(perms);
     }
 
+    // Function which should return a string value representing
+    // a CSS class name to use for styling each org unit label
+    // in the selector.
+    @Input() orgClassCallback: (orgId: number) => string;
+
     // Emitted when the org unit value is changed via the selector.
     // Does not fire on initialOrg
     @Output() onChange = new EventEmitter<IdlObject>();
@@ -145,7 +150,9 @@ export class OrgSelectComponent implements OnInit {
       private serverStore: ServerStoreService,
       private org: OrgService,
       private perm: PermService
-    ) { }
+    ) {
+        this.orgClassCallback = (orgId: number): string => '';
+    }
 
     ngOnInit() {
 
diff --git a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
index a693944ed2..2fdc7bc65c 100644
--- a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
@@ -411,6 +411,12 @@
         idlClass="cbt" mode="update" recordId="1" orgDefaultAllowed="owner">
       </eg-fm-record-editor>
     </div>
+
+<div class="m-4">
+  <div class="col-lg-4">
+    <h4>Org Unit Selector With Styled Orgs</h4>
+    <eg-org-select [orgClassCallback]="orgClassCallback">
+    </eg-org-select>
   </div>
 </div>
 
diff --git a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
index 396b431805..93d4a10aac 100644
--- a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
@@ -111,11 +111,11 @@ export class SandboxComponent implements OnInit {
     // cross-tab communications example
     private sbChannel: any;
     sbChannelText: string;
-
     myTimeForm: FormGroup;
 
     locId = 1; // Stacks
     aLocation: IdlObject; // acpl
+    orgClassCallback: (orgId: number) => string;
 
     constructor(
         private idl: IdlService,
@@ -132,6 +132,11 @@ export class SandboxComponent implements OnInit {
         this.sbChannel = (typeof BroadcastChannel === 'undefined') ?
             {} : new BroadcastChannel('eg.sbChannel');
         this.sbChannel.onmessage = (e) => this.sbChannelHandler(e);
+
+        this.orgClassCallback = (orgId: number): string => {
+            if (orgId === 1) { return 'font-weight-bold'; }
+            return orgId <= 3 ? 'text-info' : 'text-danger';
+        };
     }
 
     ngOnInit() {
-- 
2.11.0