fix: UI state custom group column selector (#544)

* fix: displayed column component state * fix: correct custom column selection and fixed issue with translations when opening data table filter * fix: lint issue * fix: persist displayed columns after page reload for column groups * fix: remove customkey input in html interactive data view * fix: customgroupkey remove the correct one --------- Co-authored-by: kim.tran <[email protected]>
onecx · Oct 18, 2024 · e2cecf3 · e2cecf3
1 parent 3cb9069
commit e2cecf3
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 14 deletions.
diff --git a/...accelerator/src/lib/components/column-group-selection/column-group-selection.component.ts b/...accelerator/src/lib/components/column-group-selection/column-group-selection.component.ts
@@ -51,9 +51,12 @@ export class ColumnGroupSelectionComponent implements OnInit {
           .filter((value, index, self) => self.indexOf(value) === index && value != null)
       )
     )
+    const activeColumns = this.columns.filter((c) =>
+      c.predefinedGroupKeys?.includes(this.selectedGroupKey$.getValue() ?? this.defaultGroupKey)
+    )
     this.componentStateChanged.emit({
       activeColumnGroupKey: this.selectedGroupKey,
-      displayedColumns: this.columns,
+      displayedColumns: activeColumns,
     })
   }
 
@@ -65,7 +68,7 @@ export class ColumnGroupSelectionComponent implements OnInit {
     this.groupSelectionChanged.emit({ activeColumns, groupKey: event.value })
     this.componentStateChanged.emit({
       activeColumnGroupKey: event.value,
-      displayedColumns: activeColumns
+      displayedColumns: activeColumns,
     })
   }
 
@@ -77,7 +80,7 @@ export class ColumnGroupSelectionComponent implements OnInit {
     this.groupSelectionChanged.emit({ activeColumns, groupKey: this.defaultGroupKey })
     this.componentStateChanged.emit({
       activeColumnGroupKey: this.defaultGroupKey,
-      displayedColumns: activeColumns
+      displayedColumns: activeColumns,
     })
   }
 }
diff --git a/...src/lib/components/custom-group-column-selector/custom-group-column-selector.component.ts b/...src/lib/components/custom-group-column-selector/custom-group-column-selector.component.ts
@@ -24,7 +24,21 @@ export interface CustomGroupColumnSelectorComponentState {
 })
 export class CustomGroupColumnSelectorComponent implements OnInit {
   @Input() columns: DataTableColumn[] = []
-  @Input() displayedColumns: DataTableColumn[] = []
+  private _displayedColumns: DataTableColumn[] = []
+  @Input()
+  get displayedColumns() {
+    return this._displayedColumns
+  }
+  set displayedColumns(value: DataTableColumn[]) {
+    this._displayedColumns = value
+    this.componentStateChanged.emit({
+      actionColumnConfig: {
+        frozen: this.frozenActionColumn,
+        position: this.actionColumnPosition,
+      },
+      displayedColumns: this._displayedColumns,
+    })
+  }
   @Input() dialogTitle = ''
   @Input() dialogTitleKey = ''
   @Input() openButtonTitle = ''
@@ -108,11 +122,6 @@ export class CustomGroupColumnSelectorComponent implements OnInit {
       this.columnSelectionChanged.emit({ activeColumns: [...this.displayedColumnsModel] })
       this.componentStateChanged.emit({
         displayedColumns: [...this.displayedColumnsModel],
-        actionColumnConfig: {
-          frozen: this.frozenActionColumnModel,
-          position: this.actionColumnPositionModel,
-        },
-        activeColumnGroupKey: undefined,
       })
     }
 

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
@@ -471,7 +471,7 @@ export class DataTableComponent extends DataSortBase implements OnInit, AfterCon
         const columnValues = rows.map((row) => row[currentFilterColumn?.id])
         const translateObservable =
           this.columns.find((c) => c.id === currentFilterColumn?.id)?.columnType === ColumnType.TRANSLATION_KEY
-            ? this.translateService.get(columnValues as string[])
+            ? this.translateColumnValues(columnValues as string[])
             : of(Object.fromEntries(columnValues.map((cv) => [cv, cv])))
         return translateObservable.pipe(
           map((translatedValues) => {
@@ -501,6 +501,10 @@ export class DataTableComponent extends DataSortBase implements OnInit, AfterCon
     this.emitComponentStateChanged()
   }
 
+  translateColumnValues(columnValues: string[]): Observable<any> {
+    return columnValues.length ? this.translateService.get(columnValues as string[]) : of({})
+  }
+
   emitComponentStateChanged(state: DataTableComponentState = {}) {
     this.displayedPageSize$
       .pipe(withLatestFrom(this._selectionIds$, this._rows$), first())

diff --git a/...accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.html b/...accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.html
@@ -138,7 +138,7 @@
     *ngIf="layout === 'table'"
     [selectedGroupKey]="selectedGroupKey ?? defaultGroupKey"
     [columns]="columns"
-    [defaultGroupKey]="defaultGroupKey"
+    [defaultGroupKey]="defaultGroupKey !== customGroupKey ? defaultGroupKey : ''"
     [customGroupKey]="customGroupKey"
     [placeholderKey]="groupSelectionNoGroupSelectedKey"
     (groupSelectionChanged)="onColumnGroupSelectionChange($event)"

diff --git a/...r-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.ts b/...r-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.ts
@@ -386,7 +386,7 @@ export class InteractiveDataViewComponent implements OnInit, AfterContentInit {
     if (!this.displayedColumns || this.displayedColumns.length === 0) {
       this.displayedColumnKeys = this.columns.map((column) => column.id)
     }
-    if (this.defaultGroupKey) {
+    if (this.defaultGroupKey && this.defaultGroupKey !== this.customGroupKey) {
       this.displayedColumnKeys = this.columns
         .filter((column) => column.predefinedGroupKeys?.includes(this.defaultGroupKey))
         .map((column) => column.id)
@@ -417,8 +417,22 @@ export class InteractiveDataViewComponent implements OnInit, AfterContentInit {
     if (this.layout === 'table') {
       dataListGridSortingComponentState$ = dataListGridSortingComponentState$.pipe(startWith({}))
     } else {
-      columnGroupSelectionComponentState$ = columnGroupSelectionComponentState$.pipe(startWith({}))
-      customGroupColumnSelectorComponentState$ = customGroupColumnSelectorComponentState$.pipe(startWith({}))
+      columnGroupSelectionComponentState$ = columnGroupSelectionComponentState$.pipe(
+        startWith({
+          activeColumnGroupKey: this.selectedGroupKey,
+          displayedColumns: this.displayedColumns,
+        })
+      )
+      customGroupColumnSelectorComponentState$ = customGroupColumnSelectorComponentState$.pipe(
+        startWith({
+          actionColumnConfig: {
+            frozen: this.frozenActionColumn,
+            position: this.actionColumnPosition,
+          },
+          displayedColumns: this.displayedColumns,
+          activeColumnGroupKey: this.selectedGroupKey,
+        })
+      )
     }
 
     combineLatest([