[AAE-6572] Search capability for dropdowns (#7387)

lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.html

@@ -17,10 +17,13 @@
                     [compareWith]="compareDropdownValues"
                     (ngModelChange)="selectionChangedForField(field)"
                     [matTooltip]="field.tooltip"
+                    panelClass="adf-select-filter"
                     matTooltipPosition="above"
                     matTooltipShowDelay="1000"
                     [multiple]="field.hasMultipleValues">
-            <mat-option *ngFor="let opt of field.options"
+            <adf-select-filter-input *ngIf="showInputFilter" (change)="filter$.next($event)"></adf-select-filter-input>
+
+            <mat-option *ngFor="let opt of list$ | async"
                         [value]="getOptionValue(opt, field.value)"
                         [id]="opt.id">{{opt.name}}
             </mat-option>

lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.spec.ts

@@ -19,39 +19,35 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { of } from 'rxjs';
 import { DropdownCloudWidgetComponent } from './dropdown-cloud.widget';
-import {
+import { FormFieldModel, FormModel, FormService, setupTestBed } from '@alfresco/adf-core';
-    FormService,
-    WidgetVisibilityService,
-    FormFieldOption,
-    setupTestBed,
-    FormFieldModel,
-    FormModel
-} from '@alfresco/adf-core';
 import { FormCloudService } from '../../../services/form-cloud.service';
 import { ProcessServiceCloudTestingModule } from '../../../../testing/process-service-cloud.testing.module';
 import { TranslateModule } from '@ngx-translate/core';
-import { mockConditionalEntries, mockRestDropdownOptions } from '../../../mocks/linked-dropdown.mock';
+import {
+    fakeOptionList,
+    filterOptionList,
+    mockConditionalEntries,
+    mockRestDropdownOptions
+} from '../../../mocks/dropdown.mock';
+import { OverlayContainer } from '@angular/cdk/overlay';
 
 describe('DropdownCloudWidgetComponent', () => {
 
     let formService: FormService;
     let widget: DropdownCloudWidgetComponent;
-    let visibilityService: WidgetVisibilityService;
     let formCloudService: FormCloudService;
+    let overlayContainer: OverlayContainer;
     let fixture: ComponentFixture<DropdownCloudWidgetComponent>;
     let element: HTMLElement;
 
-    function openSelect(_selector?: string) {
+    async function openSelect(_selector?: string) {
-        const dropdown: any = element.querySelector('.mat-select-trigger');
+        const dropdown: HTMLElement = element.querySelector('.mat-select-trigger');
         dropdown.click();
         fixture.detectChanges();
+        await fixture.whenStable();
+        fixture.detectChanges();
     }
 
-    const fakeOptionList: FormFieldOption[] = [
-        { id: 'opt_1', name: 'option_1' },
-        { id: 'opt_2', name: 'option_2' },
-        { id: 'opt_3', name: 'option_3' }];
-
     setupTestBed({
         imports: [
             TranslateModule.forRoot(),
@@ -65,32 +61,15 @@ describe('DropdownCloudWidgetComponent', () => {
         element = fixture.nativeElement;
 
         formService = TestBed.inject(FormService);
-        visibilityService = TestBed.inject(WidgetVisibilityService);
         formCloudService = TestBed.inject(FormCloudService);
-
+        overlayContainer = TestBed.inject(OverlayContainer);
-        widget.field = new FormFieldModel(new FormModel());
     });
 
     afterEach(() => fixture.destroy());
 
-    it('should require field with restUrl', () => {
+    describe('Simple Dropdown', () => {
-        spyOn(formService, 'getRestFieldValues').and.stub();
-
-        widget.field = null;
-        widget.ngOnInit();
-        expect(formService.getRestFieldValues).not.toHaveBeenCalled();
-
-        widget.field = new FormFieldModel(null, { restUrl: null });
-        widget.ngOnInit();
-        expect(formService.getRestFieldValues).not.toHaveBeenCalled();
-    });
-
-    describe('when template is ready', () => {
-
-        describe('and dropdown is populated', () => {
 
         beforeEach(() => {
-                spyOn(visibilityService, 'refreshVisibility').and.stub();
             spyOn(formService, 'getRestFieldValues').and.callFake(() => {
                 return of(fakeOptionList);
             });
@@ -98,7 +77,7 @@ describe('DropdownCloudWidgetComponent', () => {
                 id: 'dropdown-id',
                 name: 'date-name',
                 type: 'dropdown',
-                    readOnly: 'false',
+                readOnly: false,
                 restUrl: 'fake-rest-url'
             });
             widget.field.emptyOption = { id: 'empty', name: 'Choose one...' };
@@ -106,6 +85,16 @@ describe('DropdownCloudWidgetComponent', () => {
             fixture.detectChanges();
         });
 
+        it('should require field with restUrl', () => {
+            widget.field = new FormFieldModel(new FormModel());
+            widget.ngOnInit();
+            expect(formService.getRestFieldValues).not.toHaveBeenCalled();
+
+            widget.field = new FormFieldModel(null, { restUrl: null });
+            widget.ngOnInit();
+            expect(formService.getRestFieldValues).not.toHaveBeenCalled();
+        });
+
         it('should select the default value when an option is chosen as default', async () => {
             widget.field.value = 'option_2';
             widget.ngOnInit();
@@ -123,10 +112,7 @@ describe('DropdownCloudWidgetComponent', () => {
             widget.ngOnInit();
             fixture.detectChanges();
 
-                openSelect('#dropdown-id');
+            await openSelect('#dropdown-id');
-
-                fixture.detectChanges();
-                await fixture.whenStable();
 
             const dropDownElement = element.querySelector('#dropdown-id');
             expect(dropDownElement.attributes['ng-reflect-model'].value).toBe('empty');
@@ -148,15 +134,9 @@ describe('DropdownCloudWidgetComponent', () => {
 
         it('should load data from restUrl and populate options', async () => {
             const jsonDataSpy = spyOn(formCloudService, 'getRestWidgetData').and.returnValue(of(fakeOptionList));
-                widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
+            widget.field.restUrl = 'fake-rest-url';
-                    id: 'dropdown-id',
+            widget.field.optionType = 'rest';
-                    name: 'date-name',
+            widget.field.restIdProperty = 'name';
-                    type: 'dropdown',
-                    readOnly: 'false',
-                    restUrl: 'fake-rest-url',
-                    optionType: 'rest',
-                    restIdProperty: 'name'
-                });
 
             widget.ngOnInit();
             fixture.detectChanges();
@@ -167,34 +147,25 @@ describe('DropdownCloudWidgetComponent', () => {
             fixture.detectChanges();
             await fixture.whenStable();
 
-                const optOne = fixture.debugElement.queryAll(By.css('[id="opt_1"]'));
+            const optOne = fixture.debugElement.query(By.css('[id="opt_1"]'));
-                const optTwo = fixture.debugElement.queryAll(By.css('[id="opt_2"]'));
+            const optTwo = fixture.debugElement.query(By.css('[id="opt_2"]'));
-                const optThree = fixture.debugElement.queryAll(By.css('[id="opt_3"]'));
+            const optThree = fixture.debugElement.query(By.css('[id="opt_3"]'));
             const allOptions = fixture.debugElement.queryAll(By.css('mat-option'));
 
             expect(jsonDataSpy).toHaveBeenCalled();
             expect(allOptions.length).toEqual(3);
-                expect(optOne.length).toBe(1);
+            expect(optOne.nativeElement.innerText).toEqual('option_1');
-                expect(optTwo.length).toBe(1);
+            expect(optTwo.nativeElement.innerText).toEqual('option_2');
-                expect(optThree.length).toBe(1);
+            expect(optThree.nativeElement.innerText).toEqual('option_3');
-                expect(optOne[0].nativeElement.innerText).toEqual('option_1');
-                expect(optTwo[0].nativeElement.innerText).toEqual('option_2');
-                expect(optThree[0].nativeElement.innerText).toEqual('option_3');
         });
 
-            it('should preselect dropdown widget value when Json (rest call) passed', (done) => {
+        it('should preselect dropdown widget value when Json (rest call) passed',  async () => {
-                widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
+            widget.field.restUrl = 'fake-rest-url';
-                    id: 'dropdown-id',
+            widget.field.optionType = 'rest';
-                    name: 'date-name',
+            widget.field.value = {
-                    type: 'dropdown',
-                    readOnly: 'false',
-                    restUrl: 'fake-rest-url',
-                    optionType: 'rest',
-                    value: {
                 id: 'opt1',
-                        name: 'defaul_value'
+                name: 'default1_value'
-                    }
+            };
-                });
 
             spyOn(formCloudService, 'getRestWidgetData').and.returnValue(of([
                 {
@@ -210,26 +181,16 @@ describe('DropdownCloudWidgetComponent', () => {
             widget.ngOnInit();
             fixture.detectChanges();
 
-                openSelect();
+            await openSelect();
-                fixture.detectChanges();
 
-                fixture.whenStable().then(() => {
+            const option = fixture.debugElement.query(By.css('.mat-option-text'));
-                    const options = fixture.debugElement.queryAll(By.css('.mat-option-text'));
+            expect(option.nativeElement.innerText).toBe('default1_value');
-                    expect(options[0].nativeElement.innerText).toBe('default1_value');
-                    done();
-                });
         });
 
-            it('should preselect dropdown widget value when String (defined value) passed ', (done) => {
+        it('should preselect dropdown widget value when String (defined value) passed ', async () => {
-                widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
+            widget.field.restUrl = 'fake-rest-url';
-                    id: 'dropdown-id',
+            widget.field.optionType = 'rest';
-                    name: 'date-name',
+            widget.field.value = 'opt1';
-                    type: 'dropdown',
-                    readOnly: 'false',
-                    restUrl: 'fake-rest-url',
-                    optionType: 'rest',
-                    value: 'opt1'
-                });
 
             spyOn(formCloudService, 'getRestWidgetData').and.returnValue(of([
                 {
@@ -245,51 +206,57 @@ describe('DropdownCloudWidgetComponent', () => {
             widget.ngOnInit();
             fixture.detectChanges();
 
-                openSelect();
+            await openSelect();
-                fixture.detectChanges();
-
-                fixture.whenStable().then(() => {
-                    const options = fixture.debugElement.queryAll(By.css('.mat-option-text'));
-                    expect(options[0].nativeElement.innerText).toBe('default1_value');
-                    done();
-                });
-            });
-
-            it('should update the form values when a preselected value is loaded', (done) => {
-                widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
-                    id: 'dropdown-id',
-                    name: 'date-name',
-                    type: 'dropdown',
-                    readOnly: 'false',
-                    restUrl: 'fake-rest-url',
-                    optionType: 'rest',
-                    value: 'opt1'
-                });
-
-                spyOn(formCloudService, 'getRestWidgetData').and.returnValue(of([
-                    {
-                        id: 'opt1',
-                        name: 'default1_value'
-                    },
-                    {
-                        id: 2,
-                        name: 'default2_value'
-                    }
-                ]));
-
-                widget.ngOnInit();
-                fixture.detectChanges();
-
-                openSelect();
-                fixture.detectChanges();
-
-                fixture.whenStable().then(() => {
             const options = fixture.debugElement.queryAll(By.css('.mat-option-text'));
             expect(options[0].nativeElement.innerText).toBe('default1_value');
             expect(widget.field.form.values['dropdown-id']).toEqual({id: 'opt1', name: 'default1_value'});
-                    done();
         });
     });
+
+    describe('filter', () => {
+
+        beforeEach(() => {
+            widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
+                id: 'dropdown-id',
+                name: 'option list',
+                type: 'dropdown',
+                readOnly: false,
+                options: filterOptionList
+            });
+            widget.ngOnInit();
+            fixture.detectChanges();
+        });
+
+        it('should show filter if more than 5 options found', async () => {
+            await openSelect();
+            const filter = fixture.debugElement.query(By.css('.adf-select-filter-input input'));
+            expect(filter.nativeElement).toBeDefined('Filter is not visible');
+        });
+
+        it('should be able to filter the options by search', async () => {
+            await openSelect();
+
+            let options: HTMLElement[] = Array.from(overlayContainer.getContainerElement().querySelectorAll('mat-option'));
+            expect(options.length).toBe(6);
+
+            const filter = fixture.debugElement.query(By.css('.adf-select-filter-input input'));
+            filter.nativeElement.value = '1';
+            filter.nativeElement.dispatchEvent(new Event('input'));
+
+            fixture.detectChanges();
+            options = Array.from(overlayContainer.getContainerElement().querySelectorAll('mat-option'));
+            expect(options.length).toBe(1);
+            expect(options[0].innerText).toEqual('option_1');
+        });
+
+        it('should be able to select the options if filter present', async () => {
+            await openSelect();
+
+            const options: HTMLElement[] = Array.from(overlayContainer.getContainerElement().querySelectorAll('mat-option'));
+            expect(options.length).toBe(6);
+            options[0].click();
+            expect(widget.field.value).toEqual('opt_1');
+            expect(widget.field.form.values['dropdown-id']).toEqual(filterOptionList[0]);
         });
     });
 
@@ -315,9 +282,7 @@ describe('DropdownCloudWidgetComponent', () => {
             const selectedPlaceHolder = fixture.debugElement.query(By.css('.mat-select-value-text span'));
             expect(selectedPlaceHolder.nativeElement.getInnerHTML()).toEqual('option_1, option_2');
 
-            openSelect('#dropdown-id');
+            await openSelect('#dropdown-id');
-            await fixture.whenStable();
-            fixture.detectChanges();
 
             const options = fixture.debugElement.queryAll(By.css('.mat-selected span'));
             expect(Array.from(options).map(({ nativeElement }) => nativeElement.getInnerHTML().trim()))
@@ -334,9 +299,7 @@ describe('DropdownCloudWidgetComponent', () => {
                 options: fakeOptionList
             });
             fixture.detectChanges();
-            openSelect('#dropdown-id');
+            await openSelect('#dropdown-id');
-            await fixture.whenStable();
-            fixture.detectChanges();
 
             const optionOne = fixture.debugElement.query(By.css('[id="opt_1"]'));
             const optionTwo = fixture.debugElement.query(By.css('[id="opt_2"]'));
@@ -377,12 +340,9 @@ describe('DropdownCloudWidgetComponent', () => {
                 widget.selectionChangedForField(parentDropdown);
 
                 fixture.detectChanges();
-                openSelect('child-dropdown-id');
+                await openSelect('child-dropdown-id');
-                fixture.detectChanges();
-                await fixture.whenStable();
 
                 const defaultOption: any = fixture.debugElement.query(By.css('[id="empty"]'));
-
                 expect(widget.field.options).toEqual([{ 'id': 'empty', 'name': 'Choose one...' }]);
                 expect(defaultOption.context.value).toBe('empty');
                 expect(defaultOption.context.viewValue).toBe('Choose one...');
@@ -396,9 +356,7 @@ describe('DropdownCloudWidgetComponent', () => {
                 widget.selectionChangedForField(parentDropdown);
 
                 fixture.detectChanges();
-                openSelect('child-dropdown-id');
+                await openSelect('child-dropdown-id');
-                fixture.detectChanges();
-                await fixture.whenStable();
 
                 const optOne: any = fixture.debugElement.query(By.css('[id="LO"]'));
                 const optTwo: any = fixture.debugElement.query(By.css('[id="MA"]'));
@@ -433,10 +391,7 @@ describe('DropdownCloudWidgetComponent', () => {
                 parentDropdown.value = 'GR';
                 widget.selectionChangedForField(parentDropdown);
                 fixture.detectChanges();
-                openSelect('child-dropdown-id');
+                await openSelect('child-dropdown-id');
-
-                fixture.detectChanges();
-                await fixture.whenStable();
 
                 const optOne: any = fixture.debugElement.query(By.css('[id="empty"]'));
                 const optTwo: any = fixture.debugElement.query(By.css('[id="ATH"]'));
@@ -457,13 +412,9 @@ describe('DropdownCloudWidgetComponent', () => {
                 widget.selectionChangedForField(parentDropdown);
 
                 fixture.detectChanges();
-                openSelect('child-dropdown-id');
+                await openSelect('child-dropdown-id');
-                await fixture.whenStable();
-                fixture.detectChanges();
-                await fixture.whenStable();
 
                 const defaultOption: any = fixture.debugElement.query(By.css('[id="empty"]'));
-
                 expect(widget.field.options).toEqual([{ 'id': 'empty', 'name': 'Choose one...' }]);
                 expect(defaultOption.context.value).toBe('empty');
                 expect(defaultOption.context.viewValue).toBe('Choose one...');

lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts

@@ -15,20 +15,21 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, ViewEncapsulation, OnDestroy } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import {
-    WidgetComponent,
+    AppConfigService,
-    FormService,
-    LogService,
-    FormFieldOption,
     FormFieldEvent,
     FormFieldModel,
+    FormFieldOption,
     FormFieldTypes,
-    RuleEntry
+    FormService,
+    LogService,
+    RuleEntry,
+    WidgetComponent
 } from '@alfresco/adf-core';
 import { FormCloudService } from '../../../services/form-cloud.service';
-import { Subject } from 'rxjs';
+import { BehaviorSubject, combineLatest, Observable, of, Subject } from 'rxjs';
-import { filter, takeUntil } from 'rxjs/operators';
+import { filter, map, takeUntil } from 'rxjs/operators';
 
 /* tslint:disable:component-selector  */
 
@@ -56,16 +57,22 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI
     };
 
     typeId = 'DropdownCloudWidgetComponent';
+    HIDE_FILTER_LIMIT = 5;
+    showInputFilter = false;
+    list$: Observable<FormFieldOption[]>;
+    filter$ = new BehaviorSubject<string>('');
+
     protected onDestroy$ = new Subject<boolean>();
 
     constructor(public formService: FormService,
                 private formCloudService: FormCloudService,
-                private logService: LogService) {
+                private logService: LogService,
+                private appConfig: AppConfigService) {
         super(formService);
     }
 
     ngOnInit() {
-        if (this.hasRestUrl() && !this.isLinkedWidget()) {
+        if (this.field.restUrl && !this.isLinkedWidget()) {
             this.persistFieldOptionsFromRestApi();
         }
 
@@ -81,6 +88,7 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI
                     this.parentValueChanged(valueOfParentWidget);
                 });
         }
+        this.updateOptions();
     }
 
     private persistFieldOptionsFromRestApi() {
@@ -90,6 +98,7 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI
                 .pipe(takeUntil(this.onDestroy$))
                 .subscribe((result: FormFieldOption[]) => {
                     this.field.options = result;
+                    this.updateOptions();
                     this.field.updateForm();
                 }, (err) => this.handleError(err));
         }
@@ -138,26 +147,24 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI
 
     private persistFieldOptionsFromManualList(value: string) {
         if (this.hasRuleEntries()) {
-            const rulesEntries = this.getRuleEntries();
+            const rulesEntries = this.field.rule.entries;
             rulesEntries.forEach((ruleEntry: RuleEntry) => {
                 if (ruleEntry.key === value) {
                     this.field.options = ruleEntry.options;
+                    this.updateOptions();
                     this.field.updateForm();
                 }
             });
         }
     }
 
-    private getRuleEntries(): RuleEntry[] {
-        return this.field.rule.entries;
-    }
-
     private hasRuleEntries(): boolean {
-        return !!this.getRuleEntries().length;
+        return !!this.field.rule.entries.length;
     }
 
     private addDefaultOption() {
         this.field.options = [DropdownCloudWidgetComponent.DEFAULT_OPTION];
+        this.updateOptions();
     }
 
     selectionChangedForField(field: FormFieldModel) {
@@ -174,10 +181,6 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI
         return event.field.type === FormFieldTypes.DROPDOWN;
     }
 
-    private hasRestUrl(): boolean {
-        return !!this.field?.restUrl;
-    }
-
     isLinkedWidget(): boolean {
         return !!this.getLinkedWidgetId();
     }
@@ -236,4 +239,18 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI
         this.onDestroy$.next(true);
         this.onDestroy$.complete();
     }
+
+    updateOptions(): void {
+        this.showInputFilter = this.field.options.length > this.appConfig.get<number>('form.dropDownFilterLimit', this.HIDE_FILTER_LIMIT);
+        this.list$ = combineLatest([of(this.field.options), this.filter$])
+            .pipe(
+                map(([items, search]) => {
+                    if (!search) {
+                        return items;
+                    }
+                    return items.filter(({ name }) => name.toLowerCase().includes(search.toLowerCase()));
+                }),
+                takeUntil(this.onDestroy$)
+            );
+    }
 }

lib/process-services-cloud/src/lib/form/mocks/dropdown.mock.ts

@@ -83,3 +83,18 @@ export const mockRestDropdownOptions: FormFieldOption[] = [
     { id: 'LO', name: 'LONDON' },
     { id: 'MA', name: 'MANCHESTER' }
 ];
+
+export const fakeOptionList: FormFieldOption[] = [
+    { id: 'opt_1', name: 'option_1' },
+    { id: 'opt_2', name: 'option_2' },
+    { id: 'opt_3', name: 'option_3' }
+];
+
+export const filterOptionList = [
+    { id: 'opt_1', name: 'option_1' },
+    { id: 'opt_2', name: 'option_2' },
+    { id: 'opt_3', name: 'option_3' },
+    { id: 'opt_4', name: 'option_4' },
+    { id: 'opt_5', name: 'option_5' },
+    { id: 'opt_6', name: 'option_6' }
+];