Merge branch 'main' into fix/custom-group-selector-reorder

onecx · Nov 13, 2024 · 68cdcd8 · 68cdcd8
2 parents 23af698 + cef84ce
commit 68cdcd8
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 37 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
@@ -122,6 +122,7 @@
     scrollHeight="flex"
     [style]="tableStyle"
     paginatorDropdownAppendTo="body"
+    [rowSelectable]="rowSelectable"
     tableStyleClass="h-full"
   >
     <ng-template pTemplate="header">
@@ -153,42 +154,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"
@@ -231,7 +234,7 @@
       <tr>
         <td *ngIf="selectionChangedObserved">
           <p-checkbox
-            *ngIf="(!!selectionEnabledField && !fieldIsTruthy(rowObject, selectionEnabledField)) && isSelected(rowObject); else defaultCheckbox"
+            *ngIf="isRowSelectionDisabled(rowObject) && isSelected(rowObject); else defaultCheckbox"
             [(ngModel)]="checked"
             [binary]="true"
             [disabled]="true"
@@ -240,7 +243,7 @@
           <ng-template #defaultCheckbox>
             <p-tableCheckbox
               [value]="rowObject"
-              [disabled]="!!selectionEnabledField && !fieldIsTruthy(rowObject, selectionEnabledField)"
+              [disabled]="isRowSelectionDisabled(rowObject)"
               [ariaLabel]="'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate: { key: rowObject.id}"
             ></p-tableCheckbox>
           </ng-template>

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 = [
     {
@@ -422,6 +422,7 @@ export class DataTableComponent extends DataSortBase implements OnInit, AfterCon
         )
       )
     )
+    this.rowSelectable = this.rowSelectable.bind(this)
   }
 
   ngOnInit(): void {
@@ -459,7 +460,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 +488,12 @@ export class DataTableComponent extends DataSortBase implements OnInit, AfterCon
                     value: filterOption,
                   }) as SelectItem
               )
+          }),
+          map((options) => {
+            return {
+              options: options,
+              column: currentFilterColumn,
+            }
           })
         )
       })
@@ -664,6 +671,14 @@ export class DataTableComponent extends DataSortBase implements OnInit, AfterCon
     )
   }
 
+  isRowSelectionDisabled(rowObject: Row) {
+    return !!this.selectionEnabledField && !this.fieldIsTruthy(rowObject, this.selectionEnabledField)
+  }
+
+  rowSelectable(event: any) {
+    return !this.isRowSelectionDisabled(event.data)
+  }
+
   onSelectionChange(selection: Row[]) {
     let newSelectionIds = selection.map((row) => row.id)
     const rows = this._rows$.getValue()