From 5bfb377f8f7fbee94a7ac5feda4592fb14757ae7 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>
---
 .../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    | 8 ++++++++
 Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts      | 7 +++++++
 4 files changed, 24 insertions(+), 2 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 cf7b93d80f..4d8c418d3a 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">
-{{r.label}}
+<span class="{{orgClassCallback(r.id)}}">{{r.label}}</span>
 </ng-template>
 
 <ng-container *ngIf="readOnly">
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 f455c36bf3..6ae6d02658 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
@@ -96,6 +96,11 @@ export class OrgSelectComponent implements OnInit {
         }
     }
 
+    // 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>();
@@ -105,7 +110,9 @@ export class OrgSelectComponent implements OnInit {
       private store: StoreService,
       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 4ff0950751..3f0cd273ae 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
@@ -249,3 +249,11 @@
 <ng-template #confirmMsg>
   <span i18n>Are you sure you want to confirm {numThings, plural, =1 {this thing} other {these {{numThings}} things}}?</span>
 </ng-template>
+
+<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 d2d4ead1d9..4e88fecebd 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
@@ -79,6 +79,8 @@ export class SandboxComponent implements OnInit {
     private sbChannel: any;
     sbChannelText: string;
 
+    orgClassCallback: (orgId: number) => string;
+
     constructor(
         private idl: IdlService,
         private org: OrgService,
@@ -92,6 +94,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