From: Bill Erickson Date: Wed, 3 Mar 2021 15:52:36 +0000 (-0500) Subject: LP1888723 Support disabling select entries in combobox X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=60c7689beb44c23642318fd5465a2702e7d6c70d;p=working%2FEvergreen.git LP1888723 Support disabling select entries in combobox Adds a new @Input() disableEntries: any[] for tracking identifier values in the combobox that should be marked as disabled / unselectable. Signed-off-by: Bill Erickson --- diff --git a/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.html b/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.html index a26b6fd09b..24c403360e 100644 --- a/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.html +++ b/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.html @@ -1,7 +1,6 @@ - -{{r.label || r.id}} + {{r.label}} diff --git a/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.ts b/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.ts index e6acfeefd3..8f32207fd2 100644 --- a/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.ts +++ b/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.ts @@ -23,6 +23,7 @@ export interface ComboboxEntry { freetext?: boolean; userdata?: any; // opaque external value; ignored by this component. fm?: IdlObject; + disabled?: boolean; } @Directive({ @@ -81,6 +82,9 @@ export class ComboboxComponent implements ControlValueAccessor, OnInit, AfterVie this.isRequired = r; } + // Array of entry identifiers to disable in the selector + @Input() disableEntries: any[] = []; + // Disable the input isDisabled: boolean; @Input() set disabled(d: boolean) { @@ -476,6 +480,18 @@ export class ComboboxComponent implements ControlValueAccessor, OnInit, AfterVie }); } + // NgbTypeahead doesn't offer a way to style the dropdown + // button directly, so we have to reach up and style it ourselves. + applyDisableStyle() { + this.disableEntries.forEach(id => { + const node = document.getElementById(`${this.domId}-${id}`); + if (node) { + const button = node.parentNode as HTMLElement; + button.classList.add('disabled'); + } + }); + } + filter = (text$: Observable): Observable => { return text$.pipe( debounceTime(200), @@ -499,6 +515,10 @@ export class ComboboxComponent implements ControlValueAccessor, OnInit, AfterVie // click action occurred. if (term === '') { return []; } + // Give the typeahead a chance to open before applying + // the disabled entry styling. + setTimeout(() => this.applyDisableStyle()); + // In sync-data mode, a click displays the full list. if (term === '_CLICK_' && !this.asyncDataSource) { return this.entrylist;