From 979ded6c8f2f9b4ed4cebad12691302d6fac3f95 Mon Sep 17 00:00:00 2001 From: jacekpluta <73617938+jacekpluta@users.noreply.github.com> Date: Mon, 5 Aug 2024 08:59:08 +0200 Subject: [PATCH] [ACS-7363] Search - Advanced Filters - visual bugs in Logic and Properties filters (#9914) --- ...rch-chip-autocomplete-input.component.html | 3 +- .../search-logical-filter.component.html | 3 +- .../search-logical-filter.component.spec.ts | 6 ++-- .../search-logical-filter.component.ts | 28 ++++++++++--------- 4 files changed, 22 insertions(+), 18 deletions(-) diff --git a/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html b/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html index 08d17d8f5ae..5c015d94dc4 100644 --- a/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html +++ b/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html @@ -19,6 +19,7 @@ placeholder="{{ placeholder | translate }}" aria-controls="adf-search-chip-autocomplete" #optionInput + #autocompleteTrigger="matAutocompleteTrigger" [formControl]="formCtrl" [matAutocomplete]="auto" [matChipInputFor]="chipList" @@ -26,7 +27,7 @@ [attr.aria-label]="placeholder | translate" class="adf-search-properties-file-input" (matChipInputTokenEnd)="add($event)" - (blur)="activeAnyOption = false" + (blur)="activeAnyOption = false; autocompleteTrigger.closePanel()" data-automation-id="adf-search-chip-autocomplete-input"> + [attr.aria-label]="('SEARCH.LOGICAL_SEARCH.' + field + '_HINT') | translate"/> diff --git a/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.spec.ts b/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.spec.ts index ab9fd4b24d3..3fedd0c9b8b 100644 --- a/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.spec.ts +++ b/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.spec.ts @@ -99,13 +99,14 @@ describe('SearchLogicalFilterComponent', () => { expect(component.hasValidValue()).toBeTrue(); }); - it('should update display value after phrases changes', () => { + it('should update display value after phrases changes and user user clicks submit', () => { spyOn(component.displayValue$, 'next'); enterNewPhrase('test2', 0); + component.submitValues(); expect(component.displayValue$.next).toHaveBeenCalledOnceWith(` SEARCH.LOGICAL_SEARCH.${Object.keys(LogicalSearchFields)[0]}: test2`); }); - it('should have correct display value after each field has at least one phrase', () => { + it('should have correct display value after each field has at least one phrase and user clicks submit', () => { spyOn(component.displayValue$, 'next'); enterNewPhrase('test1', 0); enterNewPhrase('test2', 1); @@ -115,6 +116,7 @@ describe('SearchLogicalFilterComponent', () => { const displayVal2 = ` SEARCH.LOGICAL_SEARCH.${Object.keys(LogicalSearchFields)[1]}: test2`; const displayVal3 = ` SEARCH.LOGICAL_SEARCH.${Object.keys(LogicalSearchFields)[2]}: test3`; const displayVal4 = ` SEARCH.LOGICAL_SEARCH.${Object.keys(LogicalSearchFields)[3]}: test4`; + component.submitValues(); expect(component.displayValue$.next).toHaveBeenCalledWith(displayVal1 + displayVal2 + displayVal4 + displayVal3); }); diff --git a/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.ts b/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.ts index 9ed3b01efa7..581e5353540 100644 --- a/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.ts +++ b/lib/content-services/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(); } }