fix(platform): table filter toolbar

closes [#11783](#11783) Fixed formatting
SAP · Dec 11, 2024 · 4a08c25 · 4a08c25
1 parent 1db00cb
commit 4a08c25
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
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,
@@ -17,7 +18,6 @@ import {
     SortChange
 } from '../models';
 import { TableColumn } from '../table-column';
-import { Nullable } from '@fundamental-ngx/cdk/utils';
 
 export type TableStateChange =
     | TableStateProperty<'sort', SortChange>
@@ -485,7 +485,8 @@ export class TableService {
     /** @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; }
+        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
@@ -169,9 +169,7 @@
         >
             <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
@@ -225,6 +225,16 @@ export class TableToolbarComponent implements TableToolbarInterface {
         this._table.cancelEditing();
     }
 
+    /** @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 */
     _expandAll(): void {
         this._table.expandAll();