From bfd86eecec9e2483e988f348c957d750faa4d508 Mon Sep 17 00:00:00 2001
From: khotcholava <31448057+khotcholava@users.noreply.github.com>
Date: Mon, 21 Oct 2024 17:44:07 +0400
Subject: [PATCH] fix(platform): table showing info bar with selected filters

closes [#11783](https://github.com/SAP/fundamental-ngx/issues/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.
---
 .../table/platform-table-docs.component.html  | 26 +++++++++++++++--
 .../table-toolbar.component.html              | 28 +++++++++++++++++++
 .../table-toolbar/table-toolbar.component.ts  | 10 ++++++-
 libs/platform/table/table.component.ts        | 24 ++++++++++++++--
 4 files changed, 82 insertions(+), 6 deletions(-)

diff --git a/libs/docs/platform/table/platform-table-docs.component.html b/libs/docs/platform/table/platform-table-docs.component.html
index 9fb0b1dfb68..49a8e81c487 100644
--- 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
index 0e2af8f2062..9158d4d4c7f 100644
--- 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
index 7d3556f1c48..a6190bc9d6e 100644
--- 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,6 +32,11 @@ 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>;
@@ -38,6 +44,7 @@ export interface ToolbarContext {
     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
index eeafc351f14..7e04e4e72f3 100644
--- 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(