fix(platform): table filter enhancement (#12864)

* feat(platform): closes [#11783](#11783) - Add support for formatting array values in table component - Fix format field name ## Before <img width="666" alt="Screenshot 2024-11-25 at 17 49 05" src="https://github.com/user-attachments/assets/dd9fe3fd-2e4f-4c03-b4fd-462d0a9b8429"> ## After <img width="854" alt="Screenshot 2024-11-25 at 17 49 53" src="https://github.com/user-attachments/assets/c76fcdd5-44f6-4b59-b3ac-7576f43f1989"> * feat(platform): table filter closes [#11783](#11783) - Fixed formatting ## Before <img width="666" alt="Screenshot 2024-11-25 at 17 49 05" src="https://github.com/user-attachments/assets/dd9fe3fd-2e4f-4c03-b4fd-462d0a9b8429"> ## After <img width="854" alt="Screenshot 2024-11-25 at 17 49 53" src="https://github.com/user-attachments/assets/c76fcdd5-44f6-4b59-b3ac-7576f43f1989"> * fix(platform): no input for this css * fix: remove unused class --------- Co-authored-by: Mike O'Donnell <[email protected]> Co-authored-by: [email protected] <[email protected]>
SAP · Jan 13, 2025 · e4cf354 · e4cf354
1 parent 6d19912
commit e4cf354
Show file tree

Hide file tree

Showing 10 changed files with 58 additions and 13 deletions.
diff --git a/libs/platform/table-helpers/interfaces/collection-filter.interface.ts b/libs/platform/table-helpers/interfaces/collection-filter.interface.ts
@@ -16,6 +16,7 @@ export interface BaseCollectionFilter<T> {
     value2?: Nullable<T>;
     exclude?: boolean;
     strategy?: FilterStrategy;
+    fieldName?: string;
 }
 export interface CollectionStringFilter extends BaseCollectionFilter<string> {
     strategy: FilterStringStrategy;

diff --git a/libs/platform/table-helpers/services/table.service.spec.ts b/libs/platform/table-helpers/services/table.service.spec.ts
@@ -72,7 +72,7 @@ describe('TableServiceService', () => {
         const setTableStateSpy = jest.spyOn(service, 'setTableState');
         const filterChangeSpy = jest.spyOn(service.filterChange$, 'next');
         const newFilterBy: CollectionStringFilter[] = [
-            { field: 'name', value: 'Product name', strategy: FILTER_STRING_STRATEGY.CONTAINS }
+            { field: 'name', value: 'Product name', fieldName: 'name', strategy: FILTER_STRING_STRATEGY.CONTAINS }
         ];
         const newState: TableState = { ...DEFAULT_TABLE_STATE, filterBy: newFilterBy };
         const event: FilterChange = { current: newFilterBy, previous: DEFAULT_TABLE_STATE.filterBy };

diff --git a/libs/platform/table-helpers/services/table.service.ts b/libs/platform/table-helpers/services/table.service.ts
@@ -6,6 +6,7 @@ import { skip } from 'rxjs/operators';
 import { DEFAULT_TABLE_STATE } from '../constants';
 
 import { toSignal } from '@angular/core/rxjs-interop';
+import { Nullable } from '@fundamental-ngx/cdk/utils';
 import { CollectionFilter, CollectionGroup, CollectionPage, CollectionSort, TableState } from '../interfaces';
 import {
     ColumnsChange,
@@ -188,7 +189,12 @@ export class TableService {
         const prevState = this.getTableState();
         const prevFilterRules = (prevState && prevState.filterBy) || [];
 
-        const newFilterRules: CollectionFilter[] = filterRules ? [...filterRules] : [];
+        const newFilterRules: CollectionFilter[] = filterRules
+            ? filterRules.map((rule) => ({
+                  ...rule,
+                  fieldName: this._getFieldName(rule.field, rule.fieldName)
+              }))
+            : [];
         const state: TableState = { ...prevState, filterBy: newFilterRules };
 
         if (!equal(prevFilterRules, state.filterBy)) {
@@ -209,7 +215,10 @@ export class TableService {
 
         const newFilterRules: CollectionFilter[] = [
             ...prevFilterRules.filter((existing) => !rulesToAdd.find(({ field }) => field === existing.field)),
-            ...rulesToAdd
+            ...rulesToAdd.map((rule) => ({
+                ...rule,
+                fieldName: this._getFieldName(rule.field, rule.fieldName)
+            }))
         ];
 
         const state: TableState = { ...prevState, filterBy: newFilterRules };
@@ -427,9 +436,12 @@ export class TableService {
      */
     buildFilterRulesMap(state = this.getTableState()): void {
         const prevState = this.getTableState();
-        const evt = { current: state.filterBy, previous: prevState.filterBy };
+        const filterRulesWithFieldNames = state.filterBy.map((rule) => ({
+            ...rule,
+            fieldName: this._getFieldName(rule.field, rule.fieldName)
+        }));
         this.filterRules$.set(
-            state.filterBy.reduce((hash, rule) => {
+            filterRulesWithFieldNames.reduce((hash, rule) => {
                 const key = rule.field;
                 if (!hash.has(key)) {
                     hash.set(key, []);
@@ -438,6 +450,8 @@ export class TableService {
                 return hash;
             }, new Map<string, CollectionFilter[]>())
         );
+        const evt = { current: filterRulesWithFieldNames, previous: state.filterBy };
+
         this.stateChange$.next({ type: 'filter', state: evt });
     }
 
@@ -468,6 +482,12 @@ export class TableService {
         this.buildSortRulesMap();
         this.buildFilterRulesMap();
     }
+
+    /** @hidden */
+    private _getFieldName(field: string, fieldName: Nullable<string>): string {
+        const column = this.tableColumns$.getValue().find((col) => col.key === field);
+        return column ? column.name : fieldName ?? field;
+    }
 }
 
 /** @hidden */

diff --git a/libs/platform/table/components/table-toolbar/table-toolbar.component.html b/libs/platform/table/components/table-toolbar/table-toolbar.component.html
@@ -161,19 +161,15 @@
     @if (appliedFilters().length) {
         <fd-toolbar
             fdType="info"
+            class="fdp-table__applied-filters-toolbar"
             [active]="true"
             [titleId]="tableToolbarTitleId"
             [shouldOverflow]="shouldOverflow"
             [headingLevel]="headingLevel"
         >
             <label fd-toolbar-label>
                 {{ 'platformTable.filteredBy' | fdTranslate }}:
-                @for (filter of appliedFilters(); track filter.columnName; let i = $index) {
-                    {{ filter.columnName }} ({{ filter.params }})
-                    @if (i < appliedFilters().length - 1) {
-                        ,
-                    }
-                }
+                {{ _formatAppliedFilters(appliedFilters()) }}
             </label>
             <fd-toolbar-spacer></fd-toolbar-spacer>
             <button

diff --git a/libs/platform/table/components/table-toolbar/table-toolbar.component.ts b/libs/platform/table/components/table-toolbar/table-toolbar.component.ts
@@ -230,6 +230,16 @@ export class TableToolbarComponent implements TableToolbarInterface {
         this._table.expandAll();
     }
 
+    /** @hidden */
+    _formatAppliedFilters(appliedFilters: { columnName: string; params: string }[]): string {
+        return appliedFilters
+            .map((filter, index) => {
+                const separator = index < appliedFilters.length - 1 ? ', ' : '';
+                return `${filter.columnName} (${filter.params})${separator}`;
+            })
+            .join('');
+    }
+
     /** @hidden */
     _closeFilterToolbar(): void {
         this._tableService.resetFilters();

diff --git a/libs/platform/table/components/table-view-settings-dialog/filtering/filter-step.component.ts b/libs/platform/table/components/table-view-settings-dialog/filtering/filter-step.component.ts
@@ -65,6 +65,10 @@ export class FilterStepComponent implements FiltersViewStep {
         this._filterBy = filterByList.find(({ field }) => field === this.columnKey);
     }
 
+    /** Column name to display in the filter */
+    @Input()
+    columnName: string;
+
     /** Go back event */
     @Output()
     back: EventEmitter<void> = new EventEmitter<void>();
@@ -92,6 +96,7 @@ export class FilterStepComponent implements FiltersViewStep {
         const filterBy: CollectionFilter = this._filterBy || {
             field: this.columnKey,
             value: null,
+            fieldName: this.columnName,
             strategy: FILTER_STRATEGY.EQ,
             exclude: false
         };

diff --git a/libs/platform/table/components/table-view-settings-dialog/filtering/filters.component.html b/libs/platform/table/components/table-view-settings-dialog/filtering/filters.component.html
@@ -45,6 +45,7 @@
     <fdp-filter-step
         [columnKey]="activeFilterColumnKey!"
         [filter]="activeFilter!"
+        [columnName]="activeFilter!.label"
         [filterBy]="filterBy"
         (back)="goToFilters()"
         (valueChange)="applyFilter($event, activeFilter!)"

diff --git a/libs/platform/table/table.component.scss b/libs/platform/table/table.component.scss
@@ -135,6 +135,12 @@ fdk-dynamic-portal {
         }
     }
 
+    .fdp-table__applied-filters-toolbar {
+        label {
+            flex-shrink: 1;
+        }
+    }
+
     .#{$block}__body-table,
     .#{$block}__header-table,
     .#{$block}__body-hs-table {

diff --git a/libs/platform/table/table.component.ts b/libs/platform/table/table.component.ts
@@ -1875,7 +1875,8 @@ export class TableComponent<T = any>
     /** @hidden */
     private _setAppliedFilterNames(filters: CollectionFilter[]): void {
         const formattedFilters = filters.map((f) => ({
-            columnName: this._formatColumnName(f.field),
+            columnName: this._formatColumnName(f.fieldName || ''),
+
             params: this._formatParams(f.value)
         }));
 
@@ -1888,6 +1889,11 @@ export class TableComponent<T = any>
             return String(value); // Handle non-object values
         }
 
+        // handle array
+        if (Array.isArray(value)) {
+            return value.map((val) => this._formatParams(val)).join(', ');
+        }
+
         return Object.entries(value)
             .map(([key, val]) => `${key}: ${this._formatParams(val)}`) // Recursive call for nested objects
             .join(', ');

diff --git a/libs/platform/table/tests/table.component-host.spec.ts b/libs/platform/table/tests/table.component-host.spec.ts
@@ -488,7 +488,7 @@ describe('TableComponent Host', () => {
         describe('data source', () => {
             it('fetch should be triggered when call table.filter()', () => {
                 const filterBy: CollectionFilter[] = [
-                    { field: 'status', value: 'valid', strategy: 'equalTo', exclude: false }
+                    { field: 'status', value: 'valid', strategy: 'equalTo', fieldName: 'status', exclude: false }
                 ];
 
                 tableComponent.filter(filterBy);