fix: filter options computed correctly

markuczy · Nov 13, 2024 · cd8a16b · cd8a16b
1 parent 07a9f63
commit cd8a16b
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 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
@@ -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
@@ -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,
+            }
           })
         )
       })