LP1908743 Org select now supports disabled org unit

Org units specified as disabled in <eg-org-select /> are now visible,
but disabled when the typeahead displays.

Signed-off-by: Bill Erickson <berickxx@gmail.com>
Signed-off-by: Terran McCanna <tmccanna@georgialibraries.org>
Signed-off-by: Chris Sharp <csharp@georgialibraries.org>

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 32bc94e..cf120ec 100644 (file)
--- 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 id="{{domId}}-{{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 3436045..dab8e37 100644 (file)
--- 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
@@ -39,6 +39,7 @@ interface OrgDisplay {
   templateUrl: './org-select.component.html'
 })
 export class OrgSelectComponent implements OnInit {
+    static domId = 0;
 
     selected: OrgDisplay;
     click$ = new Subject<string>();
@@ -54,7 +55,7 @@ export class OrgSelectComponent implements OnInit {
     @Input() placeholder = '';
 
     // ID to display in the DOM for this selector
-    @Input() domId = '';
+    @Input() domId = 'eg-org-select-' + OrgSelectComponent.domId++;
 
     // Org unit field displayed in the selector
     @Input() displayField = 'shortname';
@@ -79,6 +80,10 @@ export class OrgSelectComponent implements OnInit {
         if (ids) { this._disabledOrgs = ids; }
     }
 
+    get disableOrgs(): number[] {
+        return this._disabledOrgs;
+    }
+
     // Apply an org unit value at load time.
     // These will NOT result in an onChange event.
     @Input() initialOrg: IdlObject;
@@ -241,7 +246,7 @@ export class OrgSelectComponent implements OnInit {
         return {
             id : org.id(),
             label : label,
-            disabled : false
+            disabled : this.disableOrgs.includes(org.id())
         };
     }
 
@@ -269,7 +274,20 @@ export class OrgSelectComponent implements OnInit {
         this.selected = null;
     }
 
+    // NgbTypeahead doesn't offer a way to style the dropdown
+    // button directly, so we have to reach up and style it ourselves.
+    applyDisableStyle() {
+        this.disableOrgs.forEach(id => {
+            const node = document.getElementById(`${this.domId}-${id}`);
+            if (node) {
+                const button = node.parentNode as HTMLElement;
+                button.classList.add('disabled');
+            }
+        });
+    }
+
     filter = (text$: Observable<string>): Observable<OrgDisplay[]> => {
+
         return text$.pipe(
             debounceTime(200),
             distinctUntilChanged(),
@@ -303,6 +321,10 @@ export class OrgSelectComponent implements OnInit {
                     });
                 }
 
+                // Give the typeahead a chance to open before applying
+                // the disabled org unit styling.
+                setTimeout(() => this.applyDisableStyle());
+
                 return orgs.map(org => this.formatForDisplay(org));
             })
         );