portalicious: store selected columns

global-121 · Jan 18, 2025 · 80ad37c · 80ad37c
1 parent 58940be
commit 80ad37c
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 4 deletions.
diff --git a/...table/components/query-table-column-management/query-table-column-management.component.ts b/...table/components/query-table-column-management/query-table-column-management.component.ts
@@ -37,6 +37,7 @@ export class QueryTableColumnManagementComponent<
 > {
   columns = input.required<QueryTableColumn<TData>[]>();
   visibleColumns = model.required<QueryTableColumn<TData>[]>();
+  selectedColumnsStateKey = input.required<string>();
   readonly resetColumnVisibility = output();
 
   formVisible = model<boolean>(false);
@@ -60,6 +61,10 @@ export class QueryTableColumnManagementComponent<
     mutationFn: () =>
       Promise.resolve(this.formGroup.getRawValue().selectedColumns),
     onSuccess: (selectedColumns) => {
+      localStorage.setItem(
+        this.selectedColumnsStateKey(),
+        JSON.stringify(selectedColumns),
+      );
       this.visibleColumns.set(selectedColumns);
       this.formVisible.set(false);
     },

diff --git a/interfaces/Portalicious/src/app/components/query-table/query-table.component.html b/interfaces/Portalicious/src/app/components/query-table/query-table.component.html
@@ -60,7 +60,8 @@
         <app-query-table-column-management
           [columns]="columns()"
           [(visibleColumns)]="visibleColumns"
-          (resetColumnVisibility)="resetColumnVisibility()"
+          (resetColumnVisibility)="resetColumnVisibility(true)"
+          [selectedColumnsStateKey]="selectedColumnsStateKey()"
         />
       }
     </div>

diff --git a/interfaces/Portalicious/src/app/components/query-table/query-table.component.ts b/interfaces/Portalicious/src/app/components/query-table/query-table.component.ts
@@ -146,6 +146,11 @@ export class QueryTableComponent<TData extends { id: PropertyKey }, TContext> {
   readonly contextMenu = viewChild<Menu>('contextMenu');
   readonly extraOptionsMenu = viewChild<Menu>('extraOptionsMenu');
 
+  selectedColumnsStateKey = computed(() => {
+    const key = this.localStorageKey();
+    return key ? `${key}-selected-columns` : 'selected-columns';
+  });
+
   /**
    * DISPLAY
    */
@@ -484,10 +489,31 @@ export class QueryTableComponent<TData extends { id: PropertyKey }, TContext> {
    */
   visibleColumns = model<QueryTableColumn<TData>[]>([]);
 
-  resetColumnVisibility() {
-    this.visibleColumns.set(
-      this.columns().filter((column) => !column.defaultHidden),
+  resetColumnVisibility(removeFromLocalStorage = false) {
+    if (removeFromLocalStorage) {
+      localStorage.removeItem(this.selectedColumnsStateKey());
+    }
+
+    const storedSelectedColumns = localStorage.getItem(
+      this.selectedColumnsStateKey(),
     );
+    if (storedSelectedColumns) {
+      const interpretedColumns = JSON.parse(
+        storedSelectedColumns,
+      ) as QueryTableColumn<TData>[];
+      console.log(
+        '🚀 ~ QueryTableComponent<TData ~ resetColumnVisibility ~ interpretedColumns:',
+        interpretedColumns,
+      );
+      const matchedColumns = interpretedColumns
+        .map((column) => this.columns().find((c) => c.field === column.field))
+        .filter(Boolean) as QueryTableColumn<TData>[];
+      this.visibleColumns.set(matchedColumns);
+    } else {
+      this.visibleColumns.set(
+        this.columns().filter((column) => !column.defaultHidden),
+      );
+    }
   }
 
   columnVisibilityEffect = effect(() => {