From f08b4a914008fd2f96a06c9b3e28bb3790f04bfb Mon Sep 17 00:00:00 2001 From: Giordano Battilana Date: Thu, 20 May 2021 11:30:49 +0200 Subject: [PATCH] feat(filter-field): Display a hint when partial options are loaded. Fixes #APM-277597 --- .../filter-field/src/filter-field-config.ts | 15 +++++ .../filter-field/src/filter-field.html | 60 +++++++++++-------- .../filter-field/src/filter-field.scss | 12 ++++ .../filter-field/src/filter-field.spec.ts | 7 +++ .../filter-field/src/filter-field.ts | 9 +++ .../src/testing/filter-field-test-helpers.ts | 6 ++ 6 files changed, 83 insertions(+), 26 deletions(-) diff --git a/libs/barista-components/filter-field/src/filter-field-config.ts b/libs/barista-components/filter-field/src/filter-field-config.ts index fd42073a1f..08deb9982b 100644 --- a/libs/barista-components/filter-field/src/filter-field-config.ts +++ b/libs/barista-components/filter-field/src/filter-field-config.ts @@ -21,6 +21,21 @@ import { } from './filter-field-util'; import { DtFilterValue, DtFilterFieldTagData } from './types'; +/** InjectionToken of the Filter Field options. */ +export const DT_FILTER_FIELD_CONFIG = new InjectionToken( + 'DT_FILTER_FIELD_CONFIG', +); + +/** The config that can be passed to the dt-filter-field component for customization */ +export interface DtFilterFieldConfig { + /** Message displayed in the options panel when partial results are listed */ + partialHintMessage: string; +} + +export const DT_FILTER_FIELD_DEFAULT_CONFIG: DtFilterFieldConfig = { + partialHintMessage: 'Pick or provide free text', +}; + /** User defined parser function for tag key:values, overrides default parser function */ export type TagParserFunction = ( filterValues: DtFilterValue[], diff --git a/libs/barista-components/filter-field/src/filter-field.html b/libs/barista-components/filter-field/src/filter-field.html index 0f1c40830e..4d2f195d58 100644 --- a/libs/barista-components/filter-field/src/filter-field.html +++ b/libs/barista-components/filter-field/src/filter-field.html @@ -87,34 +87,42 @@ > - - +
- - {{ - optionDef.option!.viewValue - }} - - - - + + - {{ - optionOrGroupDef.option!.viewValue - }} - - + + {{ + optionDef.option!.viewValue + }} + + + + + {{ + optionOrGroupDef.option!.viewValue + }} + + + diff --git a/libs/barista-components/filter-field/src/filter-field.scss b/libs/barista-components/filter-field/src/filter-field.scss index 020b715b90..cd6345684c 100644 --- a/libs/barista-components/filter-field/src/filter-field.scss +++ b/libs/barista-components/filter-field/src/filter-field.scss @@ -67,6 +67,7 @@ $dt-filter-field-inner-height: 30px; height: $dt-filter-field-inner-height; align-items: center; margin-right: 8px; + ::ng-deep svg { width: 16px; height: 16px; @@ -179,6 +180,17 @@ button.dt-filter-field-clear-all-button-hidden { margin: 0; } +::ng-deep .dt-filter-field-panel .dt-filter-field-hint-partial { + @include dt-text-ellipsis(); + @include dt-custom-font-styles( + $custom-color: $gray-500, + $custom-font-size: 12px + ); + text-align: center; + border-bottom: solid 1px $gray-200; + padding: 0 2px; +} + ::ng-deep .dt-filter-field-panel .dt-option { max-width: 100%; overflow: hidden; diff --git a/libs/barista-components/filter-field/src/filter-field.spec.ts b/libs/barista-components/filter-field/src/filter-field.spec.ts index 1efb2f3982..02077de543 100644 --- a/libs/barista-components/filter-field/src/filter-field.spec.ts +++ b/libs/barista-components/filter-field/src/filter-field.spec.ts @@ -72,6 +72,7 @@ import { getInput, getTagButtons, isClearAllVisible, + getPartialResultsHintPanel, } from './testing/filter-field-test-helpers'; import { DtAutocompleteValue, DtFilterValue } from './types'; @@ -1146,11 +1147,17 @@ describe('DtFilterField', () => { let options = getOptions(overlayContainerElement); expect(options).toHaveLength(0); + let hintPanel = getPartialResultsHintPanel(overlayContainerElement); + expect(hintPanel).toBeNull(); + fixture.componentInstance.dataSource.data = DATA_PARTIAL; fixture.detectChanges(); advanceFilterfieldCycle(true, true); tick(); + hintPanel = getPartialResultsHintPanel(overlayContainerElement); + expect(hintPanel).not.toBeNull(); + options = getOptions(overlayContainerElement); expect(options).toHaveLength(4); expect(options[0].textContent).toContain('Zürich'); diff --git a/libs/barista-components/filter-field/src/filter-field.ts b/libs/barista-components/filter-field/src/filter-field.ts index 7b514414b0..0c43128049 100644 --- a/libs/barista-components/filter-field/src/filter-field.ts +++ b/libs/barista-components/filter-field/src/filter-field.ts @@ -89,8 +89,11 @@ import { import { DT_FILTER_EDITION_VALUES_DEFAULT_PARSER_CONFIG, DT_FILTER_EDITION_VALUES_PARSER_CONFIG, + DT_FILTER_FIELD_CONFIG, + DT_FILTER_FIELD_DEFAULT_CONFIG, DT_FILTER_VALUES_DEFAULT_PARSER_CONFIG, DT_FILTER_VALUES_PARSER_CONFIG, + DtFilterFieldConfig, EditionParserFunction, TagParserFunction, } from './filter-field-config'; @@ -557,7 +560,13 @@ export class DtFilterField @Optional() @Inject(DT_FILTER_EDITION_VALUES_PARSER_CONFIG) private editionValuesParser: EditionParserFunction, + @Optional() + @Inject(DT_FILTER_FIELD_CONFIG) + readonly _filterFieldConfig: DtFilterFieldConfig, ) { + this._filterFieldConfig = + this._filterFieldConfig || DT_FILTER_FIELD_DEFAULT_CONFIG; + this.tagValuesParser = this.tagValuesParser || DT_FILTER_VALUES_DEFAULT_PARSER_CONFIG; diff --git a/libs/barista-components/filter-field/src/testing/filter-field-test-helpers.ts b/libs/barista-components/filter-field/src/testing/filter-field-test-helpers.ts index 9195b2ebb9..dfa28b36fd 100644 --- a/libs/barista-components/filter-field/src/testing/filter-field-test-helpers.ts +++ b/libs/barista-components/filter-field/src/testing/filter-field-test-helpers.ts @@ -239,6 +239,12 @@ export function customParser( return tagData; } +export function getPartialResultsHintPanel( + overlayContainerElement: HTMLElement, +): HTMLElement | null { + return overlayContainerElement.querySelector('.dt-filter-field-hint-partial'); +} + export function getOptions( overlayContainerElement: HTMLElement, ): HTMLElement[] {