feat(legi-shared): adding option to show select dropdown icon for aut…

…ocomplete single and multi (cherry picked from commit 76b8247) (cherry picked from commit 0eb1728)
cognizone · Dec 27, 2024 · 4c073c0 · 4c073c0
1 parent f6ad193
commit 4c073c0
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 6 deletions.
diff --git a/libs/legi-shared/autocomplete/autocomplete-multi/autocomplete-multi.component.html b/libs/legi-shared/autocomplete/autocomplete-multi/autocomplete-multi.component.html
@@ -2,7 +2,7 @@
   <span *ngIf="label" class="czls-title">{{ label }}</span>
   <div class="d-flex flex-column">
     <mat-form-field [class.mat-form-field-disabled]="disabled" class="cz-classic-appearance">
-      <mat-icon matPrefix>search</mat-icon>
+      <mat-icon *ngIf="profile === 'search'" matPrefix>search</mat-icon>
       <mat-chip-list #chipList [formControl]="errorControl">
         <mat-chip
           *ngFor="let value of modelAsOptions | selectOptionsSort: 'label'"
@@ -17,6 +17,7 @@
         </mat-chip>
         <input
           #multiInput
+          #trigger="matAutocompleteTrigger"
           matInput
           autocomplete="off"
           type="text"
@@ -32,6 +33,14 @@
       <mat-error>
         <cz-error></cz-error>
       </mat-error>
+      <button
+        *ngIf="profile === 'select'"
+        matSuffix
+        mat-icon-button
+        (click)="queryChanges.next(''); trigger.writeValue(''); trigger.openPanel()"
+      >
+        <mat-icon>arrow_drop_down</mat-icon>
+      </button>
     </mat-form-field>
   </div>
 </ng-container>

diff --git a/libs/legi-shared/autocomplete/autocomplete-multi/autocomplete-multi.component.ts b/libs/legi-shared/autocomplete/autocomplete-multi/autocomplete-multi.component.ts
@@ -86,6 +86,10 @@ export class AutocompleteMultiComponent<T> extends ControlComponent<T[]> impleme
   hint?: string;
   @Input()
   removeDisabledOptions = true;
+  @Input()
+  profile: 'search' | 'select' = 'search';
+  @Input()
+  cachedOptions: boolean = true;
 
   @ViewChild('multiInput')
   multiInput!: ElementRef<HTMLInputElement>;
@@ -270,7 +274,7 @@ export class AutocompleteMultiComponent<T> extends ControlComponent<T[]> impleme
     const hasOption = await firstValueFrom(this.optionsProvider.hasOptionFor(value));
     if (!hasOption) return undefined;
     const option = await firstValueFrom(this._optionsProvider.getValueOption(value));
-    this.storedValueOptions.push(option);
+    if (this.cachedOptions) this.storedValueOptions.push(option);
     return option;
   }
 
@@ -280,8 +284,11 @@ export class AutocompleteMultiComponent<T> extends ControlComponent<T[]> impleme
    */
   private async getSelectOption(value: T): Promise<SelectOption<T> | undefined> {
     if (value == null) return undefined;
-    const allOptions = [...this.storedValueOptions, ...this.options];
-    const option = allOptions.find(o => o.value === value);
+    let option: SelectOption<T> | undefined;
+    if (this.cachedOptions) {
+      const allOptions = [...this.storedValueOptions, ...this.options];
+      option = allOptions.find(o => o.value === value);
+    }
     return option ?? this.storeValueOption(value);
   }
 

diff --git a/libs/legi-shared/autocomplete/autocomplete-single/autocomplete-single.component.html b/libs/legi-shared/autocomplete/autocomplete-single/autocomplete-single.component.html
@@ -2,7 +2,7 @@
   <span *ngIf="label && classicMode" class="czls-title">{{ label }}</span>
   <mat-form-field [class.cz-classic-appearance]="classicMode">
     <mat-label *ngIf="label && !classicMode">{{ label }} </mat-label>
-    <mat-icon matPrefix>search</mat-icon>
+    <mat-icon *ngIf="profile === 'search'" matPrefix>search</mat-icon>
     <textarea
       #singleInput
       matInput
@@ -13,10 +13,12 @@
       [matAutocomplete]="auto"
       [formControl]="singleInputControl"
       [cdkTextareaAutosize]="true"
-      type="text"
       (input)="queryChanges.next(singleInput.value)"
       (blur)="onSingleBlur()"
     ></textarea>
+    <button *ngIf="profile === 'select'" matSuffix mat-icon-button (click)="queryChanges.next('')">
+      <mat-icon>arrow_drop_down</mat-icon>
+    </button>
     <button matSuffix mat-icon-button *ngIf="canBeDiscarded && model" (click)="discard()">
       <mat-icon>close</mat-icon>
     </button>

diff --git a/libs/legi-shared/autocomplete/autocomplete-single/autocomplete-single.component.ts b/libs/legi-shared/autocomplete/autocomplete-single/autocomplete-single.component.ts
@@ -99,6 +99,8 @@ export class AutocompleteSingleComponent<T> extends ControlComponent<T> implemen
   hint?: string;
   @Input()
   labelHandling: 'translate' | 'raw' = 'translate';
+  @Input()
+  profile: 'search' | 'select' = 'search';
   @Output()
   optionSelection: EventEmitter<string | undefined> = new EventEmitter();