feat(filter-field): Add partial option.

Fixes dynatrace-oss#868
christian-fischer · May 25, 2020 · 89e9941 · 89e9941
1 parent 1bd35b0
commit 89e9941
Show file tree

Hide file tree

Showing 18 changed files with 306 additions and 10 deletions.
diff --git a/apps/demos/src/barista-examples.a11y.ts b/apps/demos/src/barista-examples.a11y.ts
@@ -44,6 +44,7 @@ const BLACKLIST: string[] = [
   'filter-field-default-example',
   'filter-field-disabled-example',
   'filter-field-distinct-example',
+  'filter-field-partial-example',
   'filter-field-programmatic-filters-example',
   'filter-field-readonly-non-editable-tags-example',
   'filter-field-unique-example',

diff --git a/apps/dev/src/filter-field/filter-field-demo.component.html b/apps/dev/src/filter-field/filter-field-demo.component.html
@@ -4,6 +4,7 @@
   [disabled]="_disabled"
   label="Filter by"
   clearAllLabel="Clear all"
+  (inputChange)="inputChange($event)"
   (filterChanges)="filterChanges($event)"
   (currentFilterChanges)="currentFilterChanges($event)"
 ></dt-filter-field>

diff --git a/apps/dev/src/filter-field/filter-field-demo.component.ts b/apps/dev/src/filter-field/filter-field-demo.component.ts
@@ -27,7 +27,13 @@ import {
 import { COMPLEX_DATA } from './data';
 import { KUBERNETES_DATA } from './kubernetes-data';
 import { MULTIDIMENSIONAL_ANALYSIS } from './multidimensional-analysis';
-import { TEST_DATA, TEST_DATA_ASYNC, TEST_DATA_ASYNC_2 } from './testdata';
+import {
+  TEST_DATA,
+  TEST_DATA_ASYNC,
+  TEST_DATA_ASYNC_2,
+  TEST_DATA_PARTIAL,
+  TEST_DATA_PARTIAL_2,
+} from './testdata';
 
 // tslint:disable:no-any
 
@@ -130,6 +136,7 @@ export class FilterFieldDemo implements AfterViewInit, OnDestroy {
   private _activeDataSourceName = 'TEST_DATA';
   private _tagChangesSub = Subscription.EMPTY;
   private _timerHandle: number;
+  private _partialFilter: boolean;
   _firstTag: DtFilterFieldTag;
 
   _dataSource = new DtFilterFieldDefaultDataSource(TEST_DATA);
@@ -168,6 +175,26 @@ export class FilterFieldDemo implements AfterViewInit, OnDestroy {
       this._timerHandle = setTimeout(() => {
         this._dataSource.data = TEST_DATA_ASYNC_2;
       }, 2000);
+    } else if (event.currentFilter[0] === TEST_DATA.autocomplete[4]) {
+      this._partialFilter = true;
+      // Simulate async data loading
+      this._timerHandle = setTimeout(() => {
+        this._dataSource.data = TEST_DATA_PARTIAL;
+      }, 2000);
+    }
+  }
+
+  inputChange(inputText: string): void {
+    // Cancel current timer if running
+    clearTimeout(this._timerHandle);
+
+    if (this._partialFilter && inputText.length > 0) {
+      // Explicitly set loading state, as the automatic loading state only works with async, not partial
+      this.filterField.loading = true;
+      // Simulate partial data loading where we would pass inputText along
+      this._timerHandle = setTimeout(() => {
+        this._dataSource.data = TEST_DATA_PARTIAL_2;
+      }, 1000);
     }
   }
 

diff --git a/apps/dev/src/filter-field/testdata.ts b/apps/dev/src/filter-field/testdata.ts
@@ -55,6 +55,11 @@ export const TEST_DATA = {
       distinct: true,
       autocomplete: [],
     },
+    {
+      name: 'CH (async, partial)',
+      async: true,
+      autocomplete: [],
+    },
     {
       name: 'Different Country',
       suggestions: [{ name: 'IT' }, { name: 'ES' }, { name: 'UK' }],
@@ -105,3 +110,25 @@ export const TEST_DATA_ASYNC_2 = {
     },
   ],
 };
+
+export const TEST_DATA_PARTIAL = {
+  name: 'CH (async, partial)',
+  autocomplete: [
+    { name: 'Zürich' },
+    { name: 'Genf' },
+    { name: 'Basel' },
+    { name: 'Bern' },
+  ],
+  partial: true,
+};
+
+export const TEST_DATA_PARTIAL_2 = {
+  name: 'CH (async, partial)',
+  autocomplete: [
+    { name: 'Zug' },
+    { name: 'Schaffhausen' },
+    { name: 'Luzern' },
+    { name: 'St. Gallen' },
+  ],
+  partial: true,
+};
diff --git a/libs/barista-components/experimental/quick-filter/src/quick-filter-default-data-source.ts b/libs/barista-components/experimental/quick-filter/src/quick-filter-default-data-source.ts
@@ -142,6 +142,7 @@ export class DtQuickFilterDefaultDataSource<
       [],
       !!data.distinct,
       !!data.async,
+      !!data.partial,
     );
     def.autocomplete!.optionsOrGroups = this.transformList(
       data.autocomplete,

diff --git a/libs/barista-components/experimental/quick-filter/src/state/reducer.spec.ts b/libs/barista-components/experimental/quick-filter/src/state/reducer.spec.ts
@@ -18,13 +18,13 @@ import { buildData } from './reducer';
 
 test('should build the data with an object', () => {
   const data = { name: 'Linz' };
-  const autocomplete = dtAutocompleteDef(data, null, [], false, false);
+  const autocomplete = dtAutocompleteDef(data, null, [], false, false, false);
   expect(buildData(autocomplete)).toMatchObject([data]);
 });
 
 test('should build the data with undefined', () => {
   const data = undefined;
-  const autocomplete = dtAutocompleteDef(data, null, [], false, false);
+  const autocomplete = dtAutocompleteDef(data, null, [], false, false, false);
 
   expect(buildData(autocomplete)).toMatchObject([data]);
 });
diff --git a/libs/barista-components/filter-field/README.md b/libs/barista-components/filter-field/README.md
@@ -68,6 +68,16 @@ data and apply it to the data source.
 
 <ba-live-example name="DtExampleFilterFieldAsync"></ba-live-example>
 
+## Server side filtered partial options
+
+When loading data asynchronously, there might be the need to filter the options
+on the server side, as there simply are too many options to return at once. You
+can do this by initially setting the `async: true` property. For every response
+you get with the server side filtered data, you need to set the `partial: true`
+property, when replacing the datasource with the partially loaded data.
+
+<ba-live-example name="DtExampleFilterFieldPartial"></ba-live-example>
+
 ## Unique free-text or range options
 
 It is possible to set a free-text or range option to be unique. So it can only

diff --git a/libs/barista-components/filter-field/src/filter-field-default-data-source.ts b/libs/barista-components/filter-field/src/filter-field-default-data-source.ts
@@ -63,6 +63,7 @@ export interface DtFilterFieldDefaultDataSourceAutocomplete {
   >;
   distinct?: boolean;
   async?: boolean;
+  partial?: boolean;
 }
 
 /** Shape of an object to be usable as a free text variant */
@@ -238,6 +239,7 @@ export class DtFilterFieldDefaultDataSource
       [],
       !!data.distinct,
       !!data.async,
+      !!data.partial,
     );
     def.autocomplete!.optionsOrGroups = this.transformList(
       data.autocomplete,

diff --git a/libs/barista-components/filter-field/src/filter-field-util.spec.ts b/libs/barista-components/filter-field/src/filter-field-util.spec.ts
@@ -86,6 +86,7 @@ describe('DtFilterField Util', () => {
         [optionDef],
         false,
         false,
+        false,
       );
       optionDef.option!.parentAutocomplete = autocompleteDef;
       expect(
@@ -99,6 +100,7 @@ describe('DtFilterField Util', () => {
         [optionDefInGroup],
         false,
         false,
+        false,
       );
       optionDefInGroup.option!.parentAutocomplete = autocompleteDef;
       groupDef.group!.parentAutocomplete = autocompleteDef;
@@ -113,6 +115,7 @@ describe('DtFilterField Util', () => {
         [optionDef, optionDefInGroup],
         false,
         false,
+        false,
       );
       optionDef.option!.parentAutocomplete = autocompleteDef;
       optionDefInGroup.option!.parentAutocomplete = autocompleteDef;
@@ -128,6 +131,7 @@ describe('DtFilterField Util', () => {
         [optionDef, optionDefInGroup],
         false,
         false,
+        false,
       );
       optionDef.option!.parentAutocomplete = autocompleteDef;
       optionDefInGroup.option!.parentAutocomplete = autocompleteDef;
@@ -143,6 +147,7 @@ describe('DtFilterField Util', () => {
         [optionDef],
         false,
         false,
+        false,
       );
       optionDef.option!.parentAutocomplete = autocompleteDef;
       expect(
@@ -156,6 +161,7 @@ describe('DtFilterField Util', () => {
         [optionDefInGroup],
         false,
         false,
+        false,
       );
       optionDefInGroup.option!.parentAutocomplete = autocompleteDef;
       groupDef.group!.parentAutocomplete = autocompleteDef;
@@ -170,6 +176,7 @@ describe('DtFilterField Util', () => {
         [optionDef, optionDefInGroup],
         false,
         false,
+        false,
       );
       optionDef.option!.parentAutocomplete = autocompleteDef;
       optionDefInGroup.option!.parentAutocomplete = autocompleteDef;
@@ -382,6 +389,7 @@ describe('DtFilterField Util', () => {
         [optionDef],
         false,
         false,
+        false,
       );
       optionDef.option!.parentAutocomplete = autocompleteDef;
       expect(findDefForSource(optionSource, autocompleteDef)).toBe(optionDef);
@@ -416,6 +424,7 @@ describe('DtFilterField Util', () => {
           [groupDef],
           false,
           false,
+          false,
         );
         optionDef.option!.parentAutocomplete = autocompleteDef;
         optionDef.option!.parentGroup = groupDef;
@@ -441,6 +450,7 @@ describe('DtFilterField Util', () => {
         [optionDef],
         false,
         false,
+        false,
       );
       optionDef.option!.parentAutocomplete = autocompleteDef;
       expect(findDefForSource(optionSource, autocompleteDef)).toBe(optionDef);
@@ -463,6 +473,7 @@ describe('DtFilterField Util', () => {
         [optionDef],
         false,
         false,
+        false,
       );
       optionDef.option!.parentAutocomplete = autocompleteDef;
       expect(findDefForSource({}, autocompleteDef)).toBe(null);
@@ -488,6 +499,7 @@ describe('DtFilterField Util', () => {
         [optionDef],
         false,
         false,
+        false,
       );
       optionDef.option!.parentAutocomplete = autocompleteDef;
 
@@ -528,6 +540,7 @@ describe('DtFilterField Util', () => {
         [groupDef],
         false,
         false,
+        false,
       );
       optionDef.option!.parentAutocomplete = autocompleteDef;
       optionDef.option!.parentGroup = groupDef;
@@ -574,6 +587,7 @@ describe('DtFilterField Util', () => {
         [innerOptionDef],
         false,
         false,
+        false,
       );
       innerOptionDef.option!.parentAutocomplete = outerOptionAutocompleteDef;
       const rootAutocompleteDef = dtAutocompleteDef(
@@ -582,6 +596,7 @@ describe('DtFilterField Util', () => {
         [outerOptionAutocompleteDef],
         false,
         false,
+        false,
       );
       outerOptionAutocompleteDef.option!.parentAutocomplete = rootAutocompleteDef;
 
@@ -627,6 +642,7 @@ describe('DtFilterField Util', () => {
         [freeTextDef],
         false,
         false,
+        false,
       );
       freeTextDef.option!.parentAutocomplete = autocompleteDef;
 
@@ -668,6 +684,7 @@ describe('DtFilterField Util', () => {
         [groupDef],
         false,
         false,
+        false,
       );
       freeTextDef.option!.parentGroup = groupDef;
       freeTextDef.option!.parentAutocomplete = autocompleteDef;
@@ -779,6 +796,7 @@ describe('DtFilterField Util', () => {
           [],
           false,
           false,
+          false,
         ) as any;
         expect(optionSelectedPredicate(optionDef, selectedIds, false)).toBe(
           true,
@@ -806,6 +824,7 @@ describe('DtFilterField Util', () => {
           [],
           false,
           false,
+          false,
         ) as any;
         expect(optionSelectedPredicate(optionDef, selectedIds, true)).toBe(
           false,
@@ -945,21 +964,21 @@ describe('DtFilterField Util', () => {
 
   describe('defDistinctPredicate', () => {
     it('should return true if an autocomplete is async and also an option; it is not selected and not distinct', () => {
-      let def = dtAutocompleteDef({}, null, [], false, true);
+      let def = dtAutocompleteDef({}, null, [], false, true, false);
       def = dtOptionDef({}, null, 'foo', 'id0', def, null) as any;
       const ids = new Set(['id1']);
       expect(defDistinctPredicate(def, ids, false)).toBe(true);
     });
 
     it('should return true if an autocomplete is async and also an option; it is selected but not distinct', () => {
-      let def = dtAutocompleteDef({}, null, [], false, true);
+      let def = dtAutocompleteDef({}, null, [], false, true, false);
       def = dtOptionDef({}, def, 'foo', 'id0', def, null) as any;
       const ids = new Set(['id0', 'id1']);
       expect(defDistinctPredicate(def, ids, false)).toBe(true);
     });
 
     it('should return false if an autocomplete is async and also an option; it is selected and distinct', () => {
-      let def = dtAutocompleteDef({}, null, [], true, true);
+      let def = dtAutocompleteDef({}, null, [], true, true, false);
       def = dtOptionDef({}, null, 'foo', 'id0', def, null) as any;
       const ids = new Set(['id0', 'id1']);
       expect(defDistinctPredicate(def, ids, false)).toBe(false);

diff --git a/libs/barista-components/filter-field/src/filter-field-util.ts b/libs/barista-components/filter-field/src/filter-field-util.ts
@@ -37,6 +37,7 @@ import {
   isDtRangeDef,
   _isDtRangeValue,
   isDtRenderType,
+  isPartialDtAutocompleteDef,
   DtOptionDef,
 } from './types';
 
@@ -63,6 +64,7 @@ export function filterAutocompleteDef(
         optionsOrGroups,
         def.autocomplete!.distinct,
         def.autocomplete!.async,
+        def.autocomplete!.partial,
       )
     : null;
 }
@@ -359,7 +361,7 @@ export function findFilterValuesForSources<T>(
         if (isLastSource) {
           return null;
         }
-        if (isAsyncDtAutocompleteDef(def)) {
+        if (isAsyncDtAutocompleteDef(def) || isPartialDtAutocompleteDef(def)) {
           const asyncDef = asyncDefs.get(def);
           if (asyncDef) {
             parentDef = asyncDef;