From 9070c263efaa35dce197eca1abd967711cfae140 Mon Sep 17 00:00:00 2001 From: Mohammad Nmeri Date: Wed, 18 Dec 2024 10:38:56 +0100 Subject: [PATCH] add dropdown filter in table --- .../advanced-scrolling-example.component.html | 4 ++- .../advanced-scrolling-example.component.ts | 1 + .../enums/collection-filter.enum.ts | 1 + .../table-helpers/enums/filter-type.enum.ts | 3 ++- libs/platform/table-helpers/table-column.ts | 3 +++ .../table-column/table-column.component.ts | 4 +++ .../filtering/filter-rule.component.html | 12 +++++++++ .../filtering/filtering.model.ts | 25 ++++++++++++++++++- .../table-p13-dialog.component.ts | 3 ++- 9 files changed, 52 insertions(+), 4 deletions(-) diff --git a/libs/docs/platform/table/examples/advanced-scrolling/advanced-scrolling-example.component.html b/libs/docs/platform/table/examples/advanced-scrolling/advanced-scrolling-example.component.html index 64735a2ffb4..437d513116d 100644 --- a/libs/docs/platform/table/examples/advanced-scrolling/advanced-scrolling-example.component.html +++ b/libs/docs/platform/table/examples/advanced-scrolling/advanced-scrolling-example.component.html @@ -17,14 +17,16 @@ > + diff --git a/libs/docs/platform/table/examples/advanced-scrolling/advanced-scrolling-example.component.ts b/libs/docs/platform/table/examples/advanced-scrolling/advanced-scrolling-example.component.ts index cad157cd3f8..27809e9fa6e 100644 --- a/libs/docs/platform/table/examples/advanced-scrolling/advanced-scrolling-example.component.ts +++ b/libs/docs/platform/table/examples/advanced-scrolling/advanced-scrolling-example.component.ts @@ -43,6 +43,7 @@ import { delay } from 'rxjs/operators'; ] }) export class AdvancedScrollingExampleComponent { + options_demo=['Laptops 1 (Level 1)','Laptops 12 (Level 1)']; source: TableDataSource; childSource: ChildTableDataSource; readonly filterTypeEnum = FilterType; diff --git a/libs/platform/table-helpers/enums/collection-filter.enum.ts b/libs/platform/table-helpers/enums/collection-filter.enum.ts index 746ebe0bce7..8a518c5c349 100644 --- a/libs/platform/table-helpers/enums/collection-filter.enum.ts +++ b/libs/platform/table-helpers/enums/collection-filter.enum.ts @@ -114,6 +114,7 @@ export const getFilterStrategiesBasedOnDataType = ( dataType: FilterableColumnDataType ): readonly FilterStringStrategy[] | readonly FilterDateStrategy[] => { switch (dataType) { + case FilterableColumnDataType.ARRAY: case FilterableColumnDataType.STRING: return FILTER_STRING_STRATEGIES; case FilterableColumnDataType.NUMBER: diff --git a/libs/platform/table-helpers/enums/filter-type.enum.ts b/libs/platform/table-helpers/enums/filter-type.enum.ts index 6033dc4083e..22dc3757935 100644 --- a/libs/platform/table-helpers/enums/filter-type.enum.ts +++ b/libs/platform/table-helpers/enums/filter-type.enum.ts @@ -10,5 +10,6 @@ export enum FilterableColumnDataType { STRING = 'string', NUMBER = 'number', BOOLEAN = 'boolean', - DATE = 'date' + DATE = 'date', + ARRAY = 'array', } diff --git a/libs/platform/table-helpers/table-column.ts b/libs/platform/table-helpers/table-column.ts index 5384560e59a..b8b6db3b06a 100644 --- a/libs/platform/table-helpers/table-column.ts +++ b/libs/platform/table-helpers/table-column.ts @@ -30,6 +30,9 @@ export abstract class TableColumn { /** Data type the column represents. */ abstract dataType: FilterableColumnDataType; + /** Optional Array of available filter values. */ + abstract filterValuesOptions: string[]; + /** Width of the column cells. */ abstract width: string; diff --git a/libs/platform/table/components/table-column/table-column.component.ts b/libs/platform/table/components/table-column/table-column.component.ts index 136f65ac069..4eaebac996c 100644 --- a/libs/platform/table/components/table-column/table-column.component.ts +++ b/libs/platform/table/components/table-column/table-column.component.ts @@ -95,6 +95,10 @@ export class TableColumnComponent extends TableColumn implements OnInit, OnChang @Input() dataType: FilterableColumnDataType = FilterableColumnDataType.STRING; + /** Array of available filter options */ + @Input() + filterValuesOptions: string[] = []; + /** Toggles grouping feature for the column. */ @Input() groupable = false; diff --git a/libs/platform/table/components/table-p13-dialog/filtering/filter-rule.component.html b/libs/platform/table/components/table-p13-dialog/filtering/filter-rule.component.html index 8a18013a78a..c9cd9f65bd9 100644 --- a/libs/platform/table/components/table-p13-dialog/filtering/filter-rule.component.html +++ b/libs/platform/table/components/table-p13-dialog/filtering/filter-rule.component.html @@ -85,6 +85,18 @@ {{ 'platformTable.P13FilterBooleanOptionFalse' | fdTranslate }} + } @else if (rule.dataType === DATA_TYPE.ARRAY && rule.filterValuesOptions?.length) { + + + @for (option of rule.filterValuesOptions; track $index) { +
  • {{ option }}
    • + } +     } @else { { /** Data type */ dataType?: FilterableColumnDataType; + /** Available filter Options */ + filterValuesOptions: string[] = []; + /** returns whether filter rule has value */ get hasValue(): boolean { return this.valueExists(this.value) || this.valueExists(this.value2); @@ -65,6 +69,9 @@ export class FilterRule { if (this.strategies.length === 0) { this.setStrategiesByColumnKey(this.columnKey); } + if (this.filterValuesOptions.length === 0) { + this.setFilterValuesOptionsByColumnKey(this.columnKey); + } } /** @hidden */ @@ -121,6 +128,9 @@ export class FilterRule { // update data type this.setDataTypeByColumnKey(columnKey); + // update available Filter options + this.setFilterValuesOptionsByColumnKey(columnKey); + // update available strategies list this.setStrategiesByColumnKey(columnKey); } @@ -132,12 +142,25 @@ export class FilterRule { if (dataType === this.dataType) { return; } - this.dataType = dataType; } + /** @hidden */ + setFilterValuesOptionsByColumnKey(columnKey?: string): void { + const filterValuesOptions = this.columns.find((column) => column.key === columnKey)?.filterValuesOptions; + if (this.areArraysEqual(filterValuesOptions,this.filterValuesOptions)) { + return; + } + this.filterValuesOptions = filterValuesOptions ? filterValuesOptions : []; + } + /** @hidden */ private valueExists(value: any): boolean { return !!value || value === 0 || typeof value === 'boolean'; } + + /** @hidden */ + private areArraysEqual(arr1: undefined|string[], arr2: undefined|string[]): boolean { + return JSON.stringify(arr1) === JSON.stringify(arr2); + } } diff --git a/libs/platform/table/components/table-p13-dialog/table-p13-dialog.component.ts b/libs/platform/table/components/table-p13-dialog/table-p13-dialog.component.ts index 900073d539c..192bf6981f1 100644 --- a/libs/platform/table/components/table-p13-dialog/table-p13-dialog.component.ts +++ b/libs/platform/table/components/table-p13-dialog/table-p13-dialog.component.ts @@ -166,7 +166,8 @@ export class TableP13DialogComponent implements OnDestroy { const columns = this._getTableColumns(); const filterBy = state?.filterBy; const dialogData: FilterDialogData = { - columns: columns.map(({ label, key, dataType, filterable }) => ({ label, key, dataType, filterable })), + // add filterValuesOptions to be sent with the data + columns: columns.map(({ label, key, dataType, filterable,filterValuesOptions }) => ({ label, key, dataType, filterable,filterValuesOptions })), collectionFilter: filterBy };