From cd8a16b1faaaad1791bfcbe4f450c832fb1b9dc5 Mon Sep 17 00:00:00 2001
From: markuczy <martin.kuczynski@capgemini.com>
Date: Wed, 13 Nov 2024 12:49:44 +0100
Subject: [PATCH 1/2] fix: filter options computed correctly

---
 .../data-table/data-table.component.html      | 68 ++++++++++---------
 .../data-table/data-table.component.ts        | 10 ++-
 2 files changed, 43 insertions(+), 35 deletions(-)

diff --git a/libs/angular-accelerator/src/lib/components/data-table/data-table.component.html b/libs/angular-accelerator/src/lib/components/data-table/data-table.component.html
index 21b584e0..a0d1cc7f 100644
--- a/libs/angular-accelerator/src/lib/components/data-table/data-table.component.html
+++ b/libs/angular-accelerator/src/lib/components/data-table/data-table.component.html
@@ -149,42 +149,44 @@
                   [title]="(sortIconTitle(column.id) | translate)"
                   [attr.aria-label]="('OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL' | translate: { column: (column.nameKey | translate), direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)})"
                 ></button>
-                <p-multiSelect
-                  class="filterMultiSelect"
-                  *ngIf="column.filterable && (!column.filterType || column.filterType === FilterType.EQUAL)"
-                  [options]="(currentEqualFilterOptions$ | async) || []"
-                  [ngModel]="(currentEqualSelectedFilters$ | async) || []"
-                  [showToggleAll]="true"
-                  emptyFilterMessage="{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}"
-                  [displaySelectedLabel]="false"
-                  [resetFilterOnHide]="true"
-                  (onChange)="onMultiselectFilterChange(column, $event)"
-                  placeholder="Icon"
-                  appendTo="body"
-                  (onFocus)="onFilterChosen(column)"
-                  [title]="'OCX_DATA_TABLE.FILTER_TITLE' | translate"
-                  [ariaLabel]="'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate"
-                  [ariaFilterLabel]="('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})"
-                >
-                  <ng-template pTemplate="selectedItems" let-value>
-                    <div
-                      class="pi"
-                      [class.pi-filter]="!((filterAmounts$ | async) || {})[column.id]"
-                      [class.pi-filter-fill]="((filterAmounts$ | async) || {})[column.id] > 0"
-                    ></div>
-                  </ng-template>
-                  <ng-template pTemplate="item" let-value>
-                    <ng-container
-                      *ngIf="columnTemplates[column.id] as template"
-                      [ngTemplateOutlet]="template"
-                      [ngTemplateOutletContext]="{
+                <ng-container *ngIf="currentEqualFilterOptions$ | async as equalFilterOptions">
+                  <p-multiSelect
+                    class="filterMultiSelect"
+                    *ngIf="column.filterable && (!column.filterType || column.filterType === FilterType.EQUAL)"
+                    [options]="equalFilterOptions.column?.id === column.id ? equalFilterOptions.options : []"
+                    [ngModel]="(currentEqualSelectedFilters$ | async) || []"
+                    [showToggleAll]="true"
+                    emptyFilterMessage="{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}"
+                    [displaySelectedLabel]="false"
+                    [resetFilterOnHide]="true"
+                    (onChange)="onMultiselectFilterChange(column, $event)"
+                    placeholder="Icon"
+                    appendTo="body"
+                    (onFocus)="onFilterChosen(column)"
+                    [title]="'OCX_DATA_TABLE.FILTER_TITLE' | translate"
+                    [ariaLabel]="'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate"
+                    [ariaFilterLabel]="('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})"
+                  >
+                    <ng-template pTemplate="selectedItems" let-value>
+                      <div
+                        class="pi"
+                        [class.pi-filter]="!((filterAmounts$ | async) || {})[column.id]"
+                        [class.pi-filter-fill]="((filterAmounts$ | async) || {})[column.id] > 0"
+                      ></div>
+                    </ng-template>
+                    <ng-template pTemplate="item" let-value>
+                      <ng-container
+                        *ngIf="columnTemplates[column.id] as template"
+                        [ngTemplateOutlet]="template"
+                        [ngTemplateOutletContext]="{
                       rowObject: getRowObjectFromMultiselectItem(value, column),
                       column: column
                   }"
-                    >
-                    </ng-container>
-                  </ng-template>
-                </p-multiSelect>
+                      >
+                      </ng-container>
+                    </ng-template>
+                  </p-multiSelect>
+                </ng-container>
                 <p-multiSelect
                   class="filterMultiSelect"
                   *ngIf="column.filterable && column.filterType === FilterType.TRUTHY"
diff --git a/libs/angular-accelerator/src/lib/components/data-table/data-table.component.ts b/libs/angular-accelerator/src/lib/components/data-table/data-table.component.ts
index 7678950b..3b5ff884 100644
--- a/libs/angular-accelerator/src/lib/components/data-table/data-table.component.ts
+++ b/libs/angular-accelerator/src/lib/components/data-table/data-table.component.ts
@@ -316,7 +316,7 @@ export class DataTableComponent extends DataSortBase implements OnInit, AfterCon
   selectedRows$: Observable<unknown[]> | undefined
 
   currentFilterColumn$ = new BehaviorSubject<DataTableColumn | null>(null)
-  currentEqualFilterOptions$: Observable<SelectItem[]> | undefined
+  currentEqualFilterOptions$: Observable<{ options: SelectItem[]; column: DataTableColumn | undefined }> | undefined
   currentEqualSelectedFilters$: Observable<unknown[]> | undefined
   truthyFilterOptions = [
     {
@@ -459,7 +459,7 @@ export class DataTableComponent extends DataSortBase implements OnInit, AfterCon
       ),
       mergeMap(([rows, currentFilterColumn, filters]) => {
         if (!currentFilterColumn?.id) {
-          return of([])
+          return of({ options: [], column: undefined })
         }
 
         const currentFilters = filters
@@ -487,6 +487,12 @@ export class DataTableComponent extends DataSortBase implements OnInit, AfterCon
                     value: filterOption,
                   }) as SelectItem
               )
+          }),
+          map((options) => {
+            return {
+              options: options,
+              column: currentFilterColumn,
+            }
           })
         )
       })

From ca2bd240b9290f2b332d1d341ba36c9dc24709b2 Mon Sep 17 00:00:00 2001
From: markuczy <martin.kuczynski@capgemini.com>
Date: Wed, 13 Nov 2024 16:01:28 +0100
Subject: [PATCH 2/2] fix: data table uses filter templates

---
 .../data-table/data-table.component.html      | 68 ++++++++++---------
 .../data-table/data-table.component.ts        | 43 ++++++++++--
 2 files changed, 72 insertions(+), 39 deletions(-)

diff --git a/libs/angular-accelerator/src/lib/components/data-table/data-table.component.html b/libs/angular-accelerator/src/lib/components/data-table/data-table.component.html
index a0d1cc7f..1878ed42 100644
--- a/libs/angular-accelerator/src/lib/components/data-table/data-table.component.html
+++ b/libs/angular-accelerator/src/lib/components/data-table/data-table.component.html
@@ -150,42 +150,44 @@
                   [attr.aria-label]="('OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL' | translate: { column: (column.nameKey | translate), direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)})"
                 ></button>
                 <ng-container *ngIf="currentEqualFilterOptions$ | async as equalFilterOptions">
-                  <p-multiSelect
-                    class="filterMultiSelect"
-                    *ngIf="column.filterable && (!column.filterType || column.filterType === FilterType.EQUAL)"
-                    [options]="equalFilterOptions.column?.id === column.id ? equalFilterOptions.options : []"
-                    [ngModel]="(currentEqualSelectedFilters$ | async) || []"
-                    [showToggleAll]="true"
-                    emptyFilterMessage="{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}"
-                    [displaySelectedLabel]="false"
-                    [resetFilterOnHide]="true"
-                    (onChange)="onMultiselectFilterChange(column, $event)"
-                    placeholder="Icon"
-                    appendTo="body"
-                    (onFocus)="onFilterChosen(column)"
-                    [title]="'OCX_DATA_TABLE.FILTER_TITLE' | translate"
-                    [ariaLabel]="'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate"
-                    [ariaFilterLabel]="('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})"
-                  >
-                    <ng-template pTemplate="selectedItems" let-value>
-                      <div
-                        class="pi"
-                        [class.pi-filter]="!((filterAmounts$ | async) || {})[column.id]"
-                        [class.pi-filter-fill]="((filterAmounts$ | async) || {})[column.id] > 0"
-                      ></div>
-                    </ng-template>
-                    <ng-template pTemplate="item" let-value>
-                      <ng-container
-                        *ngIf="columnTemplates[column.id] as template"
-                        [ngTemplateOutlet]="template"
-                        [ngTemplateOutletContext]="{
+                  <ng-container *ngIf="columnFilterTemplates$ | async as columnFilterTemplates">
+                    <p-multiSelect
+                      class="filterMultiSelect"
+                      *ngIf="column.filterable && (!column.filterType || column.filterType === FilterType.EQUAL)"
+                      [options]="equalFilterOptions.column?.id === column.id ? equalFilterOptions.options : []"
+                      [ngModel]="(currentEqualSelectedFilters$ | async) || []"
+                      [showToggleAll]="true"
+                      emptyFilterMessage="{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}"
+                      [displaySelectedLabel]="false"
+                      [resetFilterOnHide]="true"
+                      (onChange)="onMultiselectFilterChange(column, $event)"
+                      placeholder="Icon"
+                      appendTo="body"
+                      (onFocus)="onFilterChosen(column)"
+                      [title]="'OCX_DATA_TABLE.FILTER_TITLE' | translate"
+                      [ariaLabel]="'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate"
+                      [ariaFilterLabel]="('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})"
+                    >
+                      <ng-template pTemplate="selectedItems" let-value>
+                        <div
+                          class="pi"
+                          [class.pi-filter]="!((filterAmounts$ | async) || {})[column.id]"
+                          [class.pi-filter-fill]="((filterAmounts$ | async) || {})[column.id] > 0"
+                        ></div>
+                      </ng-template>
+                      <ng-template pTemplate="item" let-value>
+                        <ng-container
+                          *ngIf="columnFilterTemplates[column.id] as template"
+                          [ngTemplateOutlet]="template"
+                          [ngTemplateOutletContext]="{
                       rowObject: getRowObjectFromMultiselectItem(value, column),
                       column: column
                   }"
-                      >
-                      </ng-container>
-                    </ng-template>
-                  </p-multiSelect>
+                        >
+                        </ng-container>
+                      </ng-template>
+                    </p-multiSelect>
+                  </ng-container>
                 </ng-container>
                 <p-multiSelect
                   class="filterMultiSelect"
diff --git a/libs/angular-accelerator/src/lib/components/data-table/data-table.component.ts b/libs/angular-accelerator/src/lib/components/data-table/data-table.component.ts
index 3b5ff884..99ab0821 100644
--- a/libs/angular-accelerator/src/lib/components/data-table/data-table.component.ts
+++ b/libs/angular-accelerator/src/lib/components/data-table/data-table.component.ts
@@ -126,6 +126,7 @@ export class DataTableComponent extends DataSortBase implements OnInit, AfterCon
     this?._sortColumn$.next(value)
   }
   columnTemplates$: Observable<Record<string, TemplateRef<any> | null>> | undefined
+  columnFilterTemplates$: Observable<Record<string, TemplateRef<any> | null>> | undefined
   _columns$ = new BehaviorSubject<DataTableColumn[]>([])
   @Input()
   get columns(): DataTableColumn[] {
@@ -134,9 +135,13 @@ export class DataTableComponent extends DataSortBase implements OnInit, AfterCon
   set columns(value: DataTableColumn[]) {
     this._columns$.next(value)
     const obs = value.map((c) => this.getTemplate(c, TemplateType.CELL))
+    const filterObs = value.map((c) => this.getTemplate(c, TemplateType.FILTERCELL))
     this.columnTemplates$ = combineLatest(obs).pipe(
       map((values) => Object.fromEntries(value.map((c, i) => [c.id, values[i]])))
     )
+    this.columnFilterTemplates$ = combineLatest(filterObs).pipe(
+      map((values) => Object.fromEntries(value.map((c, i) => [c.id, values[i]])))
+    )
   }
   @Input() clientSideFiltering = true
   @Input() clientSideSorting = true
@@ -774,18 +779,44 @@ export class DataTableComponent extends DataSortBase implements OnInit, AfterCon
 
   filterTemplatesData: TemplatesData = {
     templatesObservables: {},
-    idSuffix: ['IdTableFilterCell', 'IdFilterCell'],
+    idSuffix: ['IdTableFilterCell', 'IdFilterCell', 'IdTableCell', 'IdCell'],
     templateNames: {
-      [ColumnType.DATE]: ['dateFilterCell', 'dateTableFilterCell', 'defaultDateCell'],
-      [ColumnType.NUMBER]: ['numberFilterCell', 'numberTableFilterCell', 'defaultNumberCell'],
-      [ColumnType.RELATIVE_DATE]: ['relativeDateFilterCell', 'relativeDateTableFilterCell', 'defaultRelativeDateCell'],
+      [ColumnType.DATE]: ['dateFilterCell', 'dateTableFilterCell', 'dateCell', 'dateTableCell', 'defaultDateCell'],
+      [ColumnType.NUMBER]: [
+        'numberFilterCell',
+        'numberTableFilterCell',
+        'numberCell',
+        'numberTableCell',
+        'defaultNumberCell',
+      ],
+      [ColumnType.RELATIVE_DATE]: [
+        'relativeDateFilterCell',
+        'relativeDateTableFilterCell',
+        'relativeDateCell',
+        'relativeDateTableCell',
+        'defaultRelativeDateCell',
+      ],
       [ColumnType.TRANSLATION_KEY]: [
         'translationKeyFilterCell',
         'translationKeyTableFilterCell',
         'defaultTranslationKeyCell',
+        'translationKeyCell',
+        'translationKeyTableCell',
+      ],
+      [ColumnType.CUSTOM]: [
+        'customFilterCell',
+        'customTableFilterCell',
+        'customCell',
+        'customTableCell',
+        'defaultCustomCell',
+      ],
+      [ColumnType.STRING]: [
+        'stringFilterCell',
+        'stringTableFilterCell',
+        'stringCell',
+        'stringTableCell',
+        'defaultStringCell',
       ],
-      [ColumnType.CUSTOM]: ['customFilterCell', 'customTableFilterCell', 'defaultCustomCell'],
-      [ColumnType.STRING]: ['stringFilterCell', 'stringTableFilterCell', 'defaultStringCell'],
     },
   }