From 17933ef9a9f4073ebb7f05bd18dc461f9ffb321f Mon Sep 17 00:00:00 2001 From: Anatolie Darii Date: Wed, 27 Jul 2022 17:22:18 +0300 Subject: [PATCH 1/4] feat(suggest): add compact summary support --- .../ui-suggest/src/ui-suggest.component.html | 22 ++++++++++-------- .../ui-suggest/src/ui-suggest.component.scss | 4 ++++ .../ui-suggest/src/ui-suggest.component.ts | 21 +++++++++++++++++ .../src/app/pages/suggest/suggest.page.html | 23 +++++++++++++++++++ 4 files changed, 61 insertions(+), 9 deletions(-) diff --git a/projects/angular/components/ui-suggest/src/ui-suggest.component.html b/projects/angular/components/ui-suggest/src/ui-suggest.component.html index 2e382281d..6a8e617a3 100644 --- a/projects/angular/components/ui-suggest/src/ui-suggest.component.html +++ b/projects/angular/components/ui-suggest/src/ui-suggest.component.html @@ -9,7 +9,7 @@ Tested in NVDA. --> - +
- + @@ -50,10 +49,16 @@ aria-hidden="true"> {{ placeholder }}: - {{ - value[0] - ? intl.translateLabel(value[0].text) - : defaultValue }} + + + + + + + {{ computeDisplayValue() }} + +
@@ -153,7 +158,7 @@ - - ; + /** * Emits `once` when `data` is retrieved for the `first time`. * @@ -1105,6 +1119,13 @@ export class UiSuggestComponent extends UiSuggestMatFormFieldDirective } } + computeDisplayValue() { + return this.value.length > 0 + ? this.value.map(v => this.intl.translateLabel(v.text)) + .join(',') + : this.defaultValue; + } + private _selectActiveItem(closeAfterSelect: boolean) { const item = this.headerItems![this.activeIndex] ?? this.items[this.activeIndex - this.headerItems!.length]; if (!item) { return; } diff --git a/projects/playground/src/app/pages/suggest/suggest.page.html b/projects/playground/src/app/pages/suggest/suggest.page.html index f0869f5ce..20e9b2407 100644 --- a/projects/playground/src/app/pages/suggest/suggest.page.html +++ b/projects/playground/src/app/pages/suggest/suggest.page.html @@ -24,3 +24,26 @@

Multiple select suggest

[searchSourceFactory]="searchSourceFactory"> + +

Multiple select with compact summary instead of chips

+ + + + + +
+ {{value?.[0]?.text}} + + (+{{(value?.length || 0) - 1}} {{value?.length === 2 ? 'other' : 'others'}}) + +
+ + From 19a3793318d9830b11b976bd3e8fab6ed7ac0308 Mon Sep 17 00:00:00 2001 From: Anatolie Darii Date: Thu, 28 Jul 2022 09:31:20 +0300 Subject: [PATCH 2/4] chore: add unit tests --- .../src/ui-suggest.component.spec.ts | 107 ++++++++++++++---- .../src/app/pages/suggest/suggest.page.html | 11 ++ 2 files changed, 94 insertions(+), 24 deletions(-) diff --git a/projects/angular/components/ui-suggest/src/ui-suggest.component.spec.ts b/projects/angular/components/ui-suggest/src/ui-suggest.component.spec.ts index c71d1a5a7..2ed868a7b 100644 --- a/projects/angular/components/ui-suggest/src/ui-suggest.component.spec.ts +++ b/projects/angular/components/ui-suggest/src/ui-suggest.component.spec.ts @@ -74,6 +74,7 @@ class UiSuggestFixtureDirective { clearable?: boolean; searchable?: boolean; + compact?: boolean; searchableCountInfo?: { count: number; message: string }; alwaysExpanded?: boolean; disabled?: boolean; @@ -1655,6 +1656,30 @@ const sharedSpecifications = ( .forEach(valueText => expect(selectedChipsInnerText.includes(valueText)).toBeTrue()); }); + it('should display all selected values in compact mode', () => { + const selectedValues = faker.helpers.shuffle(component.items!).slice(0, 3); + component.value = selectedValues; + component.compact = true; + component.searchable = true; + + fixture.detectChanges(); + + const displayContainer = fixture.debugElement.query(By.css('.display-container')); + const displayValue = displayContainer.query(By.css('.display-value')); + + if (!uiSuggest.isFormControl) { + const displayTitle = displayContainer.query(By.css('.display-title')); + expect(displayTitle.nativeElement.innerText.trim()).toBe(`${component.placeholder}:`); + } else { + const displayTitle = fixture.debugElement.query(By.css('.mat-form-field-label')); + expect(displayTitle.nativeElement.innerText.trim()).toEqual(component.placeholder); + } + + selectedValues + .map(value => value.text) + .forEach(valueText => expect(displayValue.nativeElement.innerText.trim()).toContain(valueText)); + }); + it('should have a checkbox next to each item entry', waitForAsync(async () => { fixture.detectChanges(); @@ -2428,7 +2453,8 @@ describe('Component: UiSuggest', () => { [fetchStrategy]="fetchStrategy" [minChars]="minChars" [drillDown]="drillDown" - [readonly]="readonly"> + [readonly]="readonly" + [compact]="compact"> `, }) @@ -2509,6 +2535,7 @@ describe('Component: UiSuggest', () => { [fetchStrategy]="fetchStrategy" [minChars]="minChars" [drillDown]="drillDown" + [compact]="compact" formControlName="test"> @@ -2682,32 +2709,45 @@ describe('Component: UiSuggest', () => { @Component({ template: ` - - -
{{ item.text }}
- + + +
{{ item.text }}
+ + +
+ {{value?.[0]?.text}} + + (+{{ (value?.length || 0) - 1 }} + {{ value?.length === 2 ? "other" : "others" }}) + +
+ `, }) - class UiSuggestCustomTemplateFixtureComponent extends UiSuggestFixtureDirective { } + class UiSuggestCustomTemplateFixtureComponent extends UiSuggestFixtureDirective {} describe('Type: custom template', () => { let fixture: ComponentFixture; @@ -2762,6 +2802,25 @@ describe('Component: UiSuggest', () => { }); })); + it('should render the compact summary using the provided custom template', () => { + component.items = generateSuggetionItemList('random'); + + const selectedValues = faker.helpers.shuffle(component.items!).slice(0, 3); + component.value = selectedValues; + + component.multiple = true; + component.compact = true; + component.searchable = true; + + fixture.detectChanges(); + + const displayContainer = fixture.debugElement.query(By.css('.display-container')); + const displayValue = displayContainer.query(By.css('.custom-display-value')); + const summaryText = displayValue.nativeElement.innerText.trim(); + + expect(summaryText).toBe(`${selectedValues[0].text} (+2 others)`); + }); + [false, true].forEach((multiple) => { [false, true].forEach((displayTemplateValue) => { it(`should ${!multiple && displayTemplateValue ? '' : 'NOT'} render the displayed value with custom` + diff --git a/projects/playground/src/app/pages/suggest/suggest.page.html b/projects/playground/src/app/pages/suggest/suggest.page.html index 20e9b2407..a4aba13a9 100644 --- a/projects/playground/src/app/pages/suggest/suggest.page.html +++ b/projects/playground/src/app/pages/suggest/suggest.page.html @@ -26,6 +26,17 @@

Multiple select suggest

Multiple select with compact summary instead of chips

+

With the default template

+ + + + +

With custom template

Date: Thu, 28 Jul 2022 12:00:42 +0300 Subject: [PATCH 3/4] refactor: extract valueSummary func --- .../components/ui-suggest/src/ui-suggest.component.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/projects/angular/components/ui-suggest/src/ui-suggest.component.ts b/projects/angular/components/ui-suggest/src/ui-suggest.component.ts index c160455b4..7cb00399c 100644 --- a/projects/angular/components/ui-suggest/src/ui-suggest.component.ts +++ b/projects/angular/components/ui-suggest/src/ui-suggest.component.ts @@ -309,7 +309,7 @@ export class UiSuggestComponent extends UiSuggestMatFormFieldDirective !this.isOpen && this._hasValue ) { - return this.value.map(v => this.intl.translateLabel(v.text)).join(', '); + return this._getValueSummary(); } return null; @@ -1121,8 +1121,7 @@ export class UiSuggestComponent extends UiSuggestMatFormFieldDirective computeDisplayValue() { return this.value.length > 0 - ? this.value.map(v => this.intl.translateLabel(v.text)) - .join(',') + ? this._getValueSummary() : this.defaultValue; } @@ -1406,4 +1405,8 @@ export class UiSuggestComponent extends UiSuggestMatFormFieldDirective if (scenario) { throw new Error(errorText); } }); } + + private _getValueSummary() { + this.value.map(v => this.intl.translateLabel(v.text)).join(', '); + } } From 22f98e5825b332bbae2ec1557e5fcf9d12e104e9 Mon Sep 17 00:00:00 2001 From: Anatolie Darii Date: Thu, 28 Jul 2022 12:07:18 +0300 Subject: [PATCH 4/4] fix: fix the return value of valueSummary func --- .../angular/components/ui-suggest/src/ui-suggest.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/angular/components/ui-suggest/src/ui-suggest.component.ts b/projects/angular/components/ui-suggest/src/ui-suggest.component.ts index 7cb00399c..8164a0bd4 100644 --- a/projects/angular/components/ui-suggest/src/ui-suggest.component.ts +++ b/projects/angular/components/ui-suggest/src/ui-suggest.component.ts @@ -1407,6 +1407,6 @@ export class UiSuggestComponent extends UiSuggestMatFormFieldDirective } private _getValueSummary() { - this.value.map(v => this.intl.translateLabel(v.text)).join(', '); + return this.value.map(v => this.intl.translateLabel(v.text)).join(', '); } }