[ACS-7363] Search - Advanced Filters - visual bugs in Logic and Prope…

…rties filters
Alfresco · Jul 30, 2024 · d1ff570 · d1ff570
1 parent 9cb01e2
commit d1ff570
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 17 deletions.
diff --git a/...h/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html b/...h/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html
@@ -26,7 +26,7 @@
             [attr.aria-label]="placeholder | translate"
             class="adf-search-properties-file-input"
             (matChipInputTokenEnd)="add($event)"
-            (blur)="activeAnyOption = false"
+            (blur)="activeAnyOption = false; autocomplete.closePanel()"
             data-automation-id="adf-search-chip-autocomplete-input">
     </mat-chip-grid>
     <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)" id="adf-search-chip-autocomplete"

diff --git a/...rch/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.ts b/...rch/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.ts
@@ -30,7 +30,7 @@ import {
 } from '@angular/core';
 import { ENTER } from '@angular/cdk/keycodes';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { MatAutocompleteModule, MatAutocompleteSelectedEvent, MatAutocompleteTrigger } from '@angular/material/autocomplete';
 import { MatChipInputEvent, MatChipsModule } from '@angular/material/chips';
 import { EMPTY, Observable, Subject, timer } from 'rxjs';
 import { debounce, startWith, takeUntil, tap } from 'rxjs/operators';
@@ -52,6 +52,9 @@ export class SearchChipAutocompleteInputComponent implements OnInit, OnDestroy,
     @ViewChild('optionInput')
     optionInput: ElementRef<HTMLInputElement>;
 
+    @ViewChild(MatAutocompleteTrigger)
+    autocomplete: MatAutocompleteTrigger;
+
     @Input()
     autocompleteOptions: AutocompleteOption[] = [];
 

diff --git a/...ices/src/lib/search/components/search-logical-filter/search-logical-filter.component.html b/...ices/src/lib/search/components/search-logical-filter/search-logical-filter.component.html
@@ -4,7 +4,6 @@
         <input type="text"
             [(ngModel)]="searchCondition[LogicalSearchFields[field]]"
             placeholder="{{ ('SEARCH.LOGICAL_SEARCH.' + field + '_HINT') | translate }}"
-            [attr.aria-label]="('SEARCH.LOGICAL_SEARCH.' + field + '_HINT') | translate"
-            (change)="onInputChange()"/>
+            [attr.aria-label]="('SEARCH.LOGICAL_SEARCH.' + field + '_HINT') | translate"/>
     </div>
 </div>
diff --git a/...rvices/src/lib/search/components/search-logical-filter/search-logical-filter.component.ts b/...rvices/src/lib/search/components/search-logical-filter/search-logical-filter.component.ts
@@ -29,7 +29,7 @@ export enum LogicalSearchFields {
     MATCH_EXACT = 'matchExact'
 }
 
-export type LogicalSearchConditionEnumValuedKeys = { [T in LogicalSearchFields]: string; };
+export type LogicalSearchConditionEnumValuedKeys = { [T in LogicalSearchFields]: string };
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface LogicalSearchCondition extends LogicalSearchConditionEnumValuedKeys {}
 
@@ -55,20 +55,16 @@ export class SearchLogicalFilterComponent implements SearchWidget, OnInit {
         this.clearSearchInputs();
     }
 
-    onInputChange() {
-        this.updateDisplayValue();
-    }
-
     submitValues() {
         if (this.hasValidValue() && this.id && this.context && this.settings && this.settings.field) {
             this.updateDisplayValue();
-            const fields = this.settings.field.split(',').map((field) => field += ':');
+            const fields = this.settings.field.split(',').map((field) => (field += ':'));
             let query = '';
             Object.keys(this.searchCondition).forEach((key) => {
                 if (this.searchCondition[key] !== '') {
                     let connector = '';
                     let subQuery = '';
-                    switch(key) {
+                    switch (key) {
                         case LogicalSearchFields.MATCH_ALL:
                         case LogicalSearchFields.MATCH_EXACT:
                             connector = 'AND';
@@ -88,12 +84,16 @@ export class SearchLogicalFilterComponent implements SearchWidget, OnInit {
                         if (key === LogicalSearchFields.MATCH_EXACT) {
                             fieldQuery += field + '"' + this.searchCondition[key].trim() + '"';
                         } else {
-                            this.searchCondition[key].split(' ').filter((condition: string) => condition !== '').forEach((phrase: string) => {
-                                const refinedPhrase = '"' + phrase + '"';
-                                fieldQuery += fieldQuery === '(' ?
-                                    `${key === LogicalSearchFields.EXCLUDE ? 'NOT ' : ''}${field}${refinedPhrase}` :
-                                    ` ${connector} ${field}${refinedPhrase}`;
-                            });
+                            this.searchCondition[key]
+                                .split(' ')
+                                .filter((condition: string) => condition !== '')
+                                .forEach((phrase: string) => {
+                                    const refinedPhrase = '"' + phrase + '"';
+                                    fieldQuery +=
+                                        fieldQuery === '('
+                                            ? `${key === LogicalSearchFields.EXCLUDE ? 'NOT ' : ''}${field}${refinedPhrase}`
+                                            : ` ${connector} ${field}${refinedPhrase}`;
+                                });
                         }
                         subQuery += `${fieldQuery})`;
                     });
@@ -103,6 +103,8 @@ export class SearchLogicalFilterComponent implements SearchWidget, OnInit {
             });
             this.context.queryFragments[this.id] = query;
             this.context.update();
+        } else {
+            this.reset();
         }
     }