add dropdown filter in table

SAP · Dec 18, 2024 · 9070c26 · 9070c26
1 parent 3ac060c
commit 9070c26
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 4 deletions.
diff --git a/...docs/platform/table/examples/advanced-scrolling/advanced-scrolling-example.component.html b/...docs/platform/table/examples/advanced-scrolling/advanced-scrolling-example.component.html
@@ -17,14 +17,16 @@
 >
     <fdp-table-toolbar title="Order Line Items" [hideItemCount]="false" [hideSearchInput]="true"> </fdp-table-toolbar>
 
+<!--    Example of Array Filter-->
     <fdp-column
         name="name"
         key="name"
         label="Name"
         align="start"
+        [filterValuesOptions]="options_demo"
         [sortable]="true"
         [filterable]="true"
-        [dataType]="dataTypeEnum.STRING"
+        [dataType]="dataTypeEnum.ARRAY"
     >
     </fdp-column>
 

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
@@ -43,6 +43,7 @@ import { delay } from 'rxjs/operators';
     ]
 })
 export class AdvancedScrollingExampleComponent {
+    options_demo=['Laptops 1 (Level 1)','Laptops 12 (Level 1)'];
     source: TableDataSource<ExampleItem>;
     childSource: ChildTableDataSource<ExampleItem>;
     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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -85,6 +85,18 @@
                             {{ 'platformTable.P13FilterBooleanOptionFalse' | fdTranslate }}
                         </li>
                     </fd-select>
+                } @else if (rule.dataType === DATA_TYPE.ARRAY && rule.filterValuesOptions?.length) {
+                    <!-- Filter options dropdown menu -->
+                    <fd-select
+                        [ngModel]="rule[valueKey]"
+                        (ngModelChange)="rule.setValue($event);_onModelChange()"
+                        [required]="true"
+                        [name]="valueKey"
+                        class="filter-row__select">
+                        @for (option of rule.filterValuesOptions; track $index) {
+                            <li fd-option [value]="option">{{ option }}</li>
+                        }
+                    </fd-select>
                 } @else {
                     <input
                         type="text"

diff --git a/libs/platform/table/components/table-p13-dialog/filtering/filtering.model.ts b/libs/platform/table/components/table-p13-dialog/filtering/filtering.model.ts
@@ -11,6 +11,7 @@ export interface FilterableColumn {
     key: string;
     dataType: FilterableColumnDataType;
     filterable?: boolean;
+    filterValuesOptions?: string[]; // add optional filterValuesOptions
 }
 
 export interface FilterDialogData extends TableDialogCommonData {
@@ -39,6 +40,9 @@ export class FilterRule<T = any> {
     /** 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<T = any> {
         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<T = any> {
         // 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<T = any> {
         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
@@ -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
         };