fix(platform): table showing info bar with selected filters

closes [#11783](#11783) - Implemented an info bar beneath the table toolbar to display active filters, following SAP Fiori design recommendations. - Used <fd-toolbar fdType="info" [active]="true"> from Fundamental NGX. - Displayed filter information with the correct format - Included a "decline" icon in the info bar. - Info bar appears only when a filter is applied and hides once the filter is reset.
SAP · Oct 21, 2024 · bfd86ee · bfd86ee
1 parent cf94fe7
commit bfd86ee
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 6 deletions.
diff --git a/libs/docs/platform/table/platform-table-docs.component.html b/libs/docs/platform/table/platform-table-docs.component.html
@@ -398,10 +398,30 @@ <h3>Tree initialization</h3>
         >
         </fdp-column>
 
-        <fdp-column name="description" key="description" label="Description" width="200px"></fdp-column>
+        <fdp-column
+            [filterable]="true"
+            name="description"
+            key="description"
+            label="Description"
+            width="200px"
+        ></fdp-column>
 
-        <fdp-column name="price" key="price.value" label="Price" align="end" width="100px"></fdp-column>
+        <fdp-column
+            [filterable]="true"
+            name="price"
+            key="price.value"
+            label="Price"
+            align="end"
+            width="100px"
+        ></fdp-column>
 
-        <fdp-column name="status" key="status" label="Status" align="center" width="150px"></fdp-column>
+        <fdp-column
+            [filterable]="true"
+            name="status"
+            key="status"
+            label="Status"
+            align="center"
+            width="150px"
+        ></fdp-column>
     </fdp-table>
 </playground>
diff --git a/libs/platform/table/components/table-toolbar/table-toolbar.component.html b/libs/platform/table/components/table-toolbar/table-toolbar.component.html
@@ -6,6 +6,7 @@
     let-groupable="groupable"
     let-columns="columns"
     let-hasAnyActions="hasAnyActions"
+    let-appliedFilters="appliedFilters"
 >
     <fd-toolbar
         fdType="transparent"
@@ -157,4 +158,31 @@
             }
         }
     </fd-toolbar>
+    @if (appliedFilters().length) {
+        <fd-toolbar
+            fdType="info"
+            [active]="true"
+            [titleId]="tableToolbarTitleId"
+            [shouldOverflow]="shouldOverflow"
+            [headingLevel]="headingLevel"
+        >
+            <label fd-toolbar-label>
+                Filtered by:
+                @for (filter of appliedFilters(); track filter.columnName; let i = $index) {
+                    {{ filter.columnName }} ({{ filter.params }})
+                    @if (i < appliedFilters().length - 1) {
+                        ,
+                    }
+                }
+            </label>
+            <fd-toolbar-spacer></fd-toolbar-spacer>
+            <button
+                fd-button
+                fdType="transparent"
+                glyph="decline"
+                ariaLabel="Close Toolbar Button"
+                title="Close Toolbar Button"
+            ></button>
+        </fd-toolbar>
+    }
 </ng-template>
diff --git a/libs/platform/table/components/table-toolbar/table-toolbar.component.ts b/libs/platform/table/components/table-toolbar/table-toolbar.component.ts
@@ -21,6 +21,7 @@ import { HeadingLevel } from '@fundamental-ngx/core/shared';
 import {
     ToolbarComponent,
     ToolbarItemDirective,
+    ToolbarLabelDirective,
     ToolbarSeparatorComponent,
     ToolbarSpacerDirective
 } from '@fundamental-ngx/core/toolbar';
@@ -31,13 +32,19 @@ import { TABLE_TOOLBAR, TableToolbarInterface } from './table-toolbar';
 import { TableToolbarActionsComponent } from './table-toolbar-actions.component';
 import { TableToolbarLeftActionsComponent } from './table-toolbar-left-actions.component';
 
+export interface TableAppliedFilter {
+    columnName: string;
+    params: string;
+}
+
 export interface ToolbarContext {
     counter: Signal<number>;
     sortable: Signal<boolean>;
     filterable: Signal<boolean>;
     groupable: Signal<boolean>;
     columns: Signal<boolean>;
     hasAnyActions: Signal<boolean>;
+    appliedFilters: Signal<TableAppliedFilter[]>;
 }
 
 export type EditMode = 'none' | 'inline';
@@ -89,7 +96,8 @@ export class TableToolbarTemplateDirective {
         ButtonComponent,
         AsyncPipe,
         FdTranslatePipe,
-        TableToolbarTemplateDirective
+        TableToolbarTemplateDirective,
+        ToolbarLabelDirective
     ]
 })
 export class TableToolbarComponent implements TableToolbarInterface {

diff --git a/libs/platform/table/table.component.ts b/libs/platform/table/table.component.ts
@@ -147,6 +147,7 @@ import {
     NoDataWrapperComponent,
     PlatformTableColumnResizerComponent,
     TABLE_TOOLBAR,
+    TableAppliedFilter,
     TableToolbarInterface,
     ToolbarContext
 } from './components';
@@ -460,6 +461,7 @@ export class TableComponent<T = any>
         this._semanticHighlightingKey = value;
         this._setSemanticHighlighting();
     }
+
     get semanticHighlighting(): string {
         if (!this._semanticHighlightingKey && this._forceSemanticHighlighting) {
             return DEFAULT_HIGHLIGHTING_KEY;
@@ -810,6 +812,8 @@ export class TableComponent<T = any>
     /** @hidden */
     private readonly _isShownGroupSettingsInToolbar$ = signal(false);
     /** @hidden */
+    private _appliedFilterNames = signal<TableAppliedFilter[]>([]);
+    /** @hidden */
     private readonly _isShownColumnSettingsInToolbar$ = signal(false);
     /**
      * @hidden
@@ -887,7 +891,8 @@ export class TableComponent<T = any>
                     this._isShownFilterSettingsInToolbar$() ||
                     this._isShownGroupSettingsInToolbar$() ||
                     this._isShownColumnSettingsInToolbar$()
-            )
+            ),
+            appliedFilters: this._appliedFilterNames
         };
 
         this.tableColumnsStream = this._tableService.tableColumns$.asObservable();
@@ -1812,7 +1817,6 @@ export class TableComponent<T = any>
                     this._dataSourceDirective._tableDataSource.fetch(state);
                 })
         );
-
         this._subscriptions.add(
             this._tableService.stateChange$.subscribe(({ type, state }) => {
                 switch (type) {
@@ -1824,6 +1828,7 @@ export class TableComponent<T = any>
                         break;
                     case 'filter':
                         this.filterChange.emit(new TableFilterChangeEvent(this, state.current, state.previous));
+                        this._setAppliedFilterNames(state.current);
                         break;
                     case 'freeze':
                         if (!this._lastFreezableColumnCalculation) {
@@ -1852,6 +1857,21 @@ export class TableComponent<T = any>
         this._listenToTableRowStateChange();
     }
 
+    /** @hidden */
+    private _setAppliedFilterNames(filters: CollectionFilter[]): void {
+        this._appliedFilterNames.set(
+            filters.map((f) => ({
+                columnName: this._formatColumnName(f.field),
+                params: f.value
+            }))
+        );
+    }
+
+    /** @hidden */
+    private _formatColumnName(columnName: string): string {
+        return columnName.charAt(0).toUpperCase() + columnName.slice(1);
+    }
+
     /** @hidden */
     private _listenToTableRowStateChange(): void {
         this._subscriptions.add(