feat(filter-field): Adds a default search option for increased filter…

…ing speed.

NOTE: The debounce for the inputChange event was removed. This leads to the inputChange event being fired more often. Please cancel requests that are inflight or debounce the event yourself.

apps/components-e2e/src/components/consumption/consumption.html

@@ -7,20 +7,14 @@
   <dt-consumption-icon aria-label="Host">
     <dt-icon name="host"></dt-icon>
   </dt-consumption-icon>
-  <dt-consumption-title>
-    Host units
-  </dt-consumption-title>
+  <dt-consumption-title> Host units </dt-consumption-title>
 
   <dt-consumption-count> {{ value }}/{{ max }} </dt-consumption-count>
 
-  <dt-consumption-label>
-    Restricted host unit hours
-  </dt-consumption-label>
+  <dt-consumption-label> Restricted host unit hours </dt-consumption-label>
 
   <dt-consumption-overlay>
-    <div id="dummy-content">
-      Dummy content.
-    </div>
+    <div id="dummy-content">Dummy content.</div>
   </dt-consumption-overlay>
 </dt-consumption>
 

apps/components-e2e/src/components/drawer/drawer.html

@@ -6,12 +6,12 @@
       mode="side"
       (opened)="open()"
       (closed)="close()"
-      style="width: 80%; height: 3000px;"
+      style="width: 80%; height: 3000px"
     >
       <dt-chart id="chart" [series]="series$ | async" [options]="options">
         <dt-chart-tooltip>
           <ng-template let-tooltip>
-            <div style="min-width: 100px;">
+            <div style="min-width: 100px">
               <ul *ngFor="let data of tooltip.points">
                 <li>
                   {{ data.series.name }}
@@ -54,18 +54,14 @@
         ></dt-chart-timestamp>
       </dt-chart>
       <br />
-      <span id="trigger" [dtOverlay]="overlay">
-        Hover me
-      </span>
+      <span id="trigger" [dtOverlay]="overlay"> Hover me </span>
       <ng-template #overlay>
         <p>Overlay content</p>
       </ng-template>
     </dt-drawer>
     <span id="open-count">{{ openCount }}</span>
     <span id="close-count">{{ closeCount }}</span>
-    <button id="content-trigger" [dtOverlay]="overlay">
-      Hover me
-    </button>
+    <button id="content-trigger" [dtOverlay]="overlay">Hover me</button>
   </dt-drawer-container>
   <br />
   <button (click)="drawer.open()" id="open" #openButton>open</button>

apps/components-e2e/src/components/event-chart/event-chart.ts

@@ -30,9 +30,8 @@ export class DtE2EEventChart<T> {
 
   i = 0;
 
-  @ViewChild(DtEventChart, { static: true }) private _eventChart: DtEventChart<
-    T
-  >;
+  @ViewChild(DtEventChart, { static: true })
+  private _eventChart: DtEventChart<T>;
 
   constructor(private _changeDetectorRef: ChangeDetectorRef) {
     (window as any).e2eTestInstance = this;

apps/components-e2e/src/components/filter-field/filter-field.ts

@@ -46,9 +46,8 @@ export class DtE2EFilterField implements OnDestroy {
 
   _dataSource = new DtFilterFieldDefaultDataSource(DATA[0]);
 
-  @ViewChild(DtFilterField, { static: true }) _filterfield: DtFilterField<
-    DtFilterFieldDefaultDataSourceType
-  >;
+  @ViewChild(DtFilterField, { static: true })
+  _filterfield: DtFilterField<DtFilterFieldDefaultDataSourceType>;
 
   switchToDatasource(targetIndex: number): void {
     this._dataSource = new DtFilterFieldDefaultDataSource(DATA[targetIndex]);

apps/components-e2e/src/components/quick-filter/quick-filter-async/quick-filter-async.ts

@@ -59,14 +59,13 @@ export class DtE2EQuickFilterAsync {
       isObject(node) && node.name && node.name !== 'AUT (async)',
   };
 
-  _dataSource = new DtQuickFilterDefaultDataSource<
-    DtQuickFilterDefaultDataSourceType
-  >(filterFieldData, this._config);
+  _dataSource = new DtQuickFilterDefaultDataSource<DtQuickFilterDefaultDataSourceType>(
+    filterFieldData,
+    this._config,
+  );
 
   currentFilterChanges(
-    event: DtQuickFilterCurrentFilterChangeEvent<
-      DtQuickFilterDefaultDataSourceType
-    >,
+    event: DtQuickFilterCurrentFilterChangeEvent<DtQuickFilterDefaultDataSourceType>,
   ): void {
     if (event.added[0] === filterFieldData.autocomplete[0]) {
       setTimeout(() => {

apps/components-e2e/src/components/quick-filter/quick-filter.e2e.ts

@@ -329,7 +329,6 @@ test('should work with async data and handle distincts correctly', async (testCo
   await clickOption(2);
   // Click option Los Angeles
   await clickOption(2);
-
   // Expect the filter to be set
   await testController
     .expect(getFilterfieldTags())

apps/components-e2e/src/components/quick-filter/quick-filter/quick-filter.ts

@@ -38,9 +38,10 @@ const config: DtQuickFilterDefaultDataSourceConfig = {
   templateUrl: 'quick-filter.html',
 })
 export class DtE2EQuickFilter {
-  _dataSource: DtQuickFilterDefaultDataSource<
-    any
-  > = new DtQuickFilterDefaultDataSource(DATA[1], config);
+  _dataSource: DtQuickFilterDefaultDataSource<any> = new DtQuickFilterDefaultDataSource(
+    DATA[1],
+    config,
+  );
 
   filterChanges(filterEvent: DtQuickFilterChangeEvent<any>): void {
     console.log(filterEvent);

apps/components-e2e/src/components/radial-chart/radial-chart.html

@@ -29,9 +29,7 @@
 <button (click)="selectable = false" id="chart-non-selectable">
   Non selectable
 </button>
-<button (click)="selectable = true" id="chart-selectable">
-  Selectable
-</button>
+<button (click)="selectable = true" id="chart-selectable">Selectable</button>
 <button (click)="chartSeries[0].selected = true" id="chart-set-select">
   Set select
 </button>

apps/components-e2e/src/components/select/select.html

@@ -1,7 +1,5 @@
 <dt-select id="select" placeholder="Aggregation" dt-ui-test-id="select">
-  <dt-option value="90th percentile">
-    90th percentile
-  </dt-option>
+  <dt-option value="90th percentile"> 90th percentile </dt-option>
   <dt-option value="95th percentile">95th percentile</dt-option>
   <dt-option value="Sum">Sum</dt-option>
   <dt-option value="Average">Average</dt-option>

apps/components-e2e/src/components/sunburst-chart/sunburst-chart.html

@@ -4,7 +4,7 @@
   [series]="series"
   (selectedChange)="selected = $event"
   [valueDisplayMode]="valueDisplayMode"
-  style="max-width: 600px;"
+  style="max-width: 600px"
 >
   <ng-template dtSunburstChartOverlay let-tooltip>
     {{ tooltip.label }}: {{ tooltip.value }}

apps/components-e2e/src/components/tree-table/tree-table.html

@@ -56,9 +56,7 @@
       <dt-tree-table-header-cell *dtHeaderCellDef>
         Actions
       </dt-tree-table-header-cell>
-      <dt-cell *dtCellDef="let row">
-        buttons...
-      </dt-cell>
+      <dt-cell *dtCellDef="let row"> buttons... </dt-cell>
     </ng-container>
 
     <dt-header-row

apps/demos/src/app-routing.module.ts

@@ -136,8 +136,10 @@ import {
   DtExampleFilterFieldAsync,
   DtExampleFilterFieldClearall,
   DtExampleFilterFieldDefault,
+  DtExampleFilterFieldDefaultSearch,
   DtExampleFilterFieldDisabled,
   DtExampleFilterFieldDistinct,
+  DtExampleFilterFieldInfiniteDataDepth,
   DtExampleFilterFieldPartial,
   DtExampleFilterFieldProgrammaticFilters,
   DtExampleFilterFieldReadOnlyTags,
@@ -322,7 +324,6 @@ import {
   DtExampleTreeTableProblemIndicator,
   DtExampleTreeTableSimple,
   DtExampleComboboxCustomOptionHeight,
-  DtExampleFilterFieldInfiniteDataDepth,
   DtExampleSelectCustomValueTemplate,
   DtExampleCalendarMinMax,
   DtExampleTimepickerMinMax,
@@ -692,6 +693,10 @@ const ROUTES: Routes = [
     path: 'filter-field-default-example',
     component: DtExampleFilterFieldDefault,
   },
+  {
+    path: 'filter-field-default-search-example',
+    component: DtExampleFilterFieldDefaultSearch,
+  },
   {
     path: 'filter-field-disabled-example',
     component: DtExampleFilterFieldDisabled,

apps/demos/src/barista-examples.a11y.ts

@@ -43,6 +43,7 @@ const BLOCKLIST: string[] = [
   'filter-field-async-example',
   'filter-field-clearall-example',
   'filter-field-default-example',
+  'filter-field-default-search-example',
   'filter-field-disabled-example',
   'filter-field-distinct-example',
   'filter-field-partial-example',

apps/demos/src/nav-items.ts

@@ -625,6 +625,10 @@ export const DT_DEMOS_EXAMPLE_NAV_ITEMS = [
         name: 'filter-field-default-example',
         route: '/filter-field-default-example',
       },
+      {
+        name: 'filter-field-default-search-example',
+        route: '/filter-field-default-search-example',
+      },
       {
         name: 'filter-field-disabled-example',
         route: '/filter-field-disabled-example',

apps/dev/src/filter-field/testdata.ts

@@ -20,6 +20,17 @@ import { Validators } from '@angular/forms';
 
 export const TEST_DATA = {
   autocomplete: [
+    {
+      name: 'DE',
+      defaultSearch: true,
+      suggestions: [{ name: 'Berlin' }, { name: 'Bremen' }, { name: 'Munich' }],
+      validators: [
+        {
+          validatorFn: Validators.minLength(2),
+          error: 'Country code needs at least 2 characters',
+        },
+      ],
+    },
     {
       name: 'AUT',
       distinct: true,

libs/barista-components/filter-field/README.md

@@ -93,6 +93,20 @@ Multiselection is unique by default.
 
 <ba-live-example name="DtExampleFilterFieldUnique"></ba-live-example>
 
+## Default search
+
+To optimize frequently used labels e.g. `Name`, set a default search option
+(defaultSearch) in your dataSource like shown in the example below. The
+defaultSearch option can then be used similar to a free-text but not quite.
+Instead of selecting a label and then typing, just type the preferred tag e.g
+`Errors` and the filter field will be combine the defaultSearch option name
+(`name: 'Name'`) attribute and the typed text automatically resulting in
+`Name: Errors`.
+
+Type anything while no label is selected to see the Default Search in action.
+
+<ba-live-example name="DtExampleFilterFieldDefaultSearch"></ba-live-example>
+
 ## Filters
 
 Every filter is an array of:

libs/barista-components/filter-field/src/filter-field-default-data-source.ts

@@ -86,6 +86,7 @@ export interface DtFilterFieldDefaultDataSourceFreeText {
   >;
   validators: DtFilterFieldValidator[];
   unique?: boolean;
+  defaultSearch?: boolean;
 }
 
 export interface DtFilterFieldDefaultDataSourceRange {
@@ -333,6 +334,7 @@ export class DtFilterFieldDefaultDataSource
       [],
       data.validators,
       isDefined(data.unique) ? data.unique! : false,
+      !!data.defaultSearch,
     );
     def.freeText!.suggestions = this.transformList(data.suggestions, def);
     return def;

libs/barista-components/filter-field/src/filter-field-util.ts

@@ -41,6 +41,8 @@ import {
   isDtRenderType,
   isPartialDtAutocompleteDef,
   isDtMultiSelectValue,
+  DtAutocompleteDef,
+  DtFreeTextDef,
 } from './types';
 
 /**
@@ -550,3 +552,32 @@ export function isDtRangeValueEqual(a: DtRangeValue, b: DtRangeValue): boolean {
   }
   return false;
 }
+
+export function findDefaultSearch(
+  def: DtNodeDef & { autocomplete: DtAutocompleteDef },
+):
+  | (DtNodeDef<unknown> & {
+      freeText: DtFreeTextDef<unknown>;
+      option: DtOptionDef;
+    })
+  | null {
+  for (const optionOrGroup of def.autocomplete.optionsOrGroups) {
+    if (
+      isDtOptionDef(optionOrGroup) &&
+      isDtFreeTextDef(optionOrGroup) &&
+      optionOrGroup.freeText.defaultSearch
+    ) {
+      return optionOrGroup;
+    } else if (isDtGroupDef(optionOrGroup)) {
+      for (const option of optionOrGroup.group.options) {
+        if (isDtFreeTextDef(option) && option.freeText.defaultSearch) {
+          return option as DtNodeDef<unknown> & {
+            freeText: DtFreeTextDef<unknown>;
+            option: DtOptionDef;
+          };
+        }
+      }
+    }
+  }
+  return null;
+}

libs/barista-components/filter-field/src/filter-field.html

@@ -61,6 +61,29 @@
       panelWidth="400px"
       class="dt-filter-field-panel"
     >
+      <ng-container *ngIf="_defaultSearchDef && _inputValue">
+        <dt-option
+          [value]="{
+            defaultSearchDef: _defaultSearchDef,
+            inputValue: _inputValue
+          }"
+        >
+          {{ _defaultSearchDef.option!.viewValue }}: {{ _inputValue }}
+        </dt-option>
+        <dt-option
+          *ngFor="let suggestionsDef of _defaultSearchDef.freeText.suggestions"
+          [value]="{
+            defaultSearchDef: _defaultSearchDef,
+            inputValue: suggestionsDef.option!.viewValue
+          }"
+          [attr.title]="_getTitle(_defaultSearchDef.option)"
+        >
+          <dt-highlight [term]="_inputValue">
+            {{ _defaultSearchDef.option!.viewValue }}:
+            {{ suggestionsDef.option!.viewValue }}</dt-highlight
+          >
+        </dt-option>
+      </ng-container>
       <ng-container
         *ngFor="let optionOrGroupDef of _autocompleteOptionsOrGroups"
       >