refactor(admin-ui): Create service to house data table config get/set

packages/admin-ui/src/lib/catalog/src/components/collection-data-table/collection-data-table.component.ts

@@ -1,4 +1,4 @@
-import { CdkDrag, CdkDragDrop, CdkDropList, DragDrop, DragRef } from '@angular/cdk/drag-drop';
+import { CdkDrag, CdkDragDrop, CdkDropList, DragRef } from '@angular/cdk/drag-drop';
 import {
     AfterViewInit,
     ChangeDetectionStrategy,
@@ -7,20 +7,13 @@ import {
     EventEmitter,
     Input,
     OnChanges,
-    OnInit,
     Output,
     QueryList,
     SimpleChanges,
     ViewChild,
     ViewChildren,
 } from '@angular/core';
-import {
-    DataService,
-    DataTable2Component,
-    GetCollectionListQuery,
-    ItemOf,
-    LocalStorageService,
-} from '@vendure/admin-ui/core';
+import { DataService, DataTable2Component, GetCollectionListQuery, ItemOf } from '@vendure/admin-ui/core';
 
 export type CollectionTableItem = ItemOf<GetCollectionListQuery, 'collections'>;
 export type CollectionOrderEvent = {
@@ -52,11 +45,9 @@ export class CollectionDataTableComponent
     absoluteIndex: { [id: string]: number } = {};
     constructor(
         protected changeDetectorRef: ChangeDetectorRef,
-        protected localStorageService: LocalStorageService,
         protected dataService: DataService,
-        private dragDrop: DragDrop,
     ) {
-        super(changeDetectorRef, localStorageService, dataService);
+        super(changeDetectorRef, dataService);
     }
 
     ngOnChanges(changes: SimpleChanges) {

packages/admin-ui/src/lib/core/src/providers/data-table/data-table-config.service.ts

@@ -0,0 +1,42 @@
+import { Injectable } from '@angular/core';
+import { DataTableConfig, LocalStorageService } from '../local-storage/local-storage.service';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class DataTableConfigService {
+    constructor(private localStorageService: LocalStorageService) {}
+
+    getConfig(): DataTableConfig;
+    getConfig(dataTableId: string): DataTableConfig[string];
+    getConfig(dataTableId?: string): DataTableConfig[string] | DataTableConfig {
+        const dataTableConfig = this.localStorageService.get('dataTableConfig') ?? {};
+        if (dataTableId) {
+            return (
+                dataTableConfig[dataTableId] ?? {
+                    visibility: [],
+                    order: {},
+                    showSearchFilterRow: false,
+                    filterPresets: [],
+                }
+            );
+        }
+        return dataTableConfig;
+    }
+
+    setConfig(dataTableId: string, config: DataTableConfig[string]): void;
+    setConfig(dataTableConfig: DataTableConfig): void;
+    setConfig(idOrConfig: string | DataTableConfig, maybeConfig?: DataTableConfig[string]): void {
+        const currentConfig = this.getConfig();
+        if (typeof idOrConfig === 'string') {
+            if (maybeConfig) {
+                this.localStorageService.set('dataTableConfig', {
+                    ...currentConfig,
+                    [idOrConfig]: maybeConfig,
+                });
+            }
+        } else {
+            this.localStorageService.set('dataTableConfig', { ...currentConfig, ...idOrConfig });
+        }
+    }
+}

packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table2.component.ts

@@ -22,8 +22,8 @@ import { Observable, Subject } from 'rxjs';
 import { distinctUntilChanged, map, takeUntil } from 'rxjs/operators';
 import { LanguageCode } from '../../../common/generated-types';
 import { DataService } from '../../../data/providers/data.service';
+import { DataTableConfigService } from '../../../providers/data-table/data-table-config.service';
 import { DataTableFilterCollection } from '../../../providers/data-table/data-table-filter-collection';
-import { DataTableConfig, LocalStorageService } from '../../../providers/local-storage/local-storage.service';
 import { BulkActionMenuComponent } from '../bulk-action-menu/bulk-action-menu.component';
 
 import { FilterPresetService } from '../data-table-filter-presets/filter-preset.service';
@@ -116,6 +116,7 @@ export class DataTable2Component<T> implements AfterContentInit, OnChanges, OnDe
     @Input() activeIndex = -1;
     @Output() pageChange = new EventEmitter<number>();
     @Output() itemsPerPageChange = new EventEmitter<number>();
+    @Output() visibleColumnsChange = new EventEmitter<Array<DataTable2ColumnComponent<T>>>();
 
     @ContentChildren(DataTable2ColumnComponent) columns: QueryList<DataTable2ColumnComponent<T>>;
     @ContentChildren(DataTableCustomFieldColumnComponent)
@@ -129,6 +130,7 @@ export class DataTable2Component<T> implements AfterContentInit, OnChanges, OnDe
     route = inject(ActivatedRoute);
     filterPresetService = inject(FilterPresetService);
     dataTableCustomComponentService = inject(DataTableCustomComponentService);
+    dataTableConfigService = inject(DataTableConfigService);
     protected customComponents = new Map<string, { config: DataTableComponentConfig; injector: Injector }>();
 
     rowTemplate: TemplateRef<any>;
@@ -144,7 +146,6 @@ export class DataTable2Component<T> implements AfterContentInit, OnChanges, OnDe
 
     constructor(
         protected changeDetectorRef: ChangeDetectorRef,
-        protected localStorageService: LocalStorageService,
         protected dataService: DataService,
     ) {
         this.uiLanguage$ = this.dataService.client
@@ -166,8 +167,8 @@ export class DataTable2Component<T> implements AfterContentInit, OnChanges, OnDe
 
     get sortedColumns() {
         const columns = this.allColumns;
-        const dataTableConfig = this.getDataTableConfig();
-        for (const [id, index] of Object.entries(dataTableConfig[this.id].order)) {
+        const dataTableConfig = this.dataTableConfigService.getConfig(this.id);
+        for (const [id, index] of Object.entries(dataTableConfig.order)) {
             const column = columns.find(c => c.id === id);
             const currentIndex = columns.findIndex(c => c.id === id);
             if (currentIndex !== -1 && column) {
@@ -211,20 +212,21 @@ export class DataTable2Component<T> implements AfterContentInit, OnChanges, OnDe
 
     ngAfterContentInit(): void {
         this.rowTemplate = this.templateRefs.last;
-        const dataTableConfig = this.getDataTableConfig();
+        const dataTableConfig = this.dataTableConfigService.getConfig(this.id);
 
         if (!this.id) {
             console.warn(`No id was assigned to the data table component`);
         }
         const updateColumnVisibility = () => {
-            dataTableConfig[this.id].visibility = this.allColumns
+            dataTableConfig.visibility = this.allColumns
                 .filter(c => (c.visible && c.hiddenByDefault) || (!c.visible && !c.hiddenByDefault))
                 .map(c => c.id);
-            this.localStorageService.set('dataTableConfig', dataTableConfig);
+            this.dataTableConfigService.setConfig(this.id, dataTableConfig);
+            this.visibleColumnsChange.emit(this.visibleSortedColumns);
         };
 
         this.allColumns.forEach(column => {
-            if (dataTableConfig?.[this.id]?.visibility.includes(column.id)) {
+            if (dataTableConfig?.visibility.includes(column.id)) {
                 column.setVisibility(column.hiddenByDefault);
             }
             column.onColumnChange(updateColumnVisibility);
@@ -237,6 +239,7 @@ export class DataTable2Component<T> implements AfterContentInit, OnChanges, OnDe
                 this.customComponents.set(column.id, { config, injector });
             }
         });
+        this.visibleColumnsChange.emit(this.visibleSortedColumns);
 
         if (this.selectionManager) {
             document.addEventListener('keydown', this.shiftDownHandler, { passive: true });
@@ -247,8 +250,7 @@ export class DataTable2Component<T> implements AfterContentInit, OnChanges, OnDe
             this.selectionManager.setCurrentItems(this.items);
         }
         this.showSearchFilterRow =
-            !!this.filters?.activeFilters.length ||
-            (dataTableConfig?.[this.id]?.showSearchFilterRow ?? false);
+            !!this.filters?.activeFilters.length || (dataTableConfig?.showSearchFilterRow ?? false);
         this.columns.changes.subscribe(() => {
             this.changeDetectorRef.markForCheck();
         });
@@ -270,27 +272,27 @@ export class DataTable2Component<T> implements AfterContentInit, OnChanges, OnDe
 
     onColumnReorder(event: { column: DataTable2ColumnComponent<any>; newIndex: number }) {
         const naturalIndex = this.allColumns.findIndex(c => c.id === event.column.id);
-        const dataTableConfig = this.getDataTableConfig();
+        const dataTableConfig = this.dataTableConfigService.getConfig(this.id);
         if (naturalIndex === event.newIndex) {
-            delete dataTableConfig[this.id].order[event.column.id];
+            delete dataTableConfig.order[event.column.id];
         } else {
-            dataTableConfig[this.id].order[event.column.id] = event.newIndex;
+            dataTableConfig.order[event.column.id] = event.newIndex;
         }
-        this.localStorageService.set('dataTableConfig', dataTableConfig);
+        this.dataTableConfigService.setConfig(this.id, dataTableConfig);
     }
 
     onColumnsReset() {
-        const dataTableConfig = this.getDataTableConfig();
-        dataTableConfig[this.id].order = {};
-        dataTableConfig[this.id].visibility = [];
-        this.localStorageService.set('dataTableConfig', dataTableConfig);
+        const dataTableConfig = this.dataTableConfigService.getConfig(this.id);
+        dataTableConfig.order = {};
+        dataTableConfig.visibility = [];
+        this.dataTableConfigService.setConfig(this.id, dataTableConfig);
     }
 
     toggleSearchFilterRow() {
         this.showSearchFilterRow = !this.showSearchFilterRow;
-        const dataTableConfig = this.getDataTableConfig();
-        dataTableConfig[this.id].showSearchFilterRow = this.showSearchFilterRow;
-        this.localStorageService.set('dataTableConfig', dataTableConfig);
+        const dataTableConfig = this.dataTableConfigService.getConfig(this.id);
+        dataTableConfig.showSearchFilterRow = this.showSearchFilterRow;
+        this.dataTableConfigService.setConfig(this.id, dataTableConfig);
     }
 
     trackByFn(index: number, item: any) {
@@ -308,17 +310,4 @@ export class DataTable2Component<T> implements AfterContentInit, OnChanges, OnDe
     onRowClick(item: T, event: MouseEvent) {
         this.selectionManager?.toggleSelection(item, event);
     }
-
-    protected getDataTableConfig(): DataTableConfig {
-        const dataTableConfig = this.localStorageService.get('dataTableConfig') ?? {};
-        if (!dataTableConfig[this.id]) {
-            dataTableConfig[this.id] = {
-                visibility: [],
-                order: {},
-                showSearchFilterRow: false,
-                filterPresets: [],
-            };
-        }
-        return dataTableConfig;
-    }
 }

packages/admin-ui/src/lib/core/src/shared/components/data-table-filter-presets/filter-preset.service.ts

@@ -1,7 +1,7 @@
 import { moveItemInArray } from '@angular/cdk/drag-drop';
 import { Injectable } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
-import { DataTableConfig, LocalStorageService } from '../../../providers/local-storage/local-storage.service';
+import { DataTableConfigService } from '../../../providers/data-table/data-table-config.service';
 
 @Injectable({
     providedIn: 'root',
@@ -10,31 +10,18 @@ export class FilterPresetService {
     presetChanges$: Observable<Array<{ name: string; value: string }>>;
     private _presetChanges = new Subject<Array<{ name: string; value: string }>>();
 
-    constructor(private localStorageService: LocalStorageService) {
+    constructor(private dataTableConfigService: DataTableConfigService) {
         this.presetChanges$ = this._presetChanges.asObservable();
     }
 
-    protected getDataTableConfig(dataTableId: string): DataTableConfig {
-        const dataTableConfig = this.localStorageService.get('dataTableConfig') ?? {};
-        if (!dataTableConfig[dataTableId]) {
-            dataTableConfig[dataTableId] = {
-                visibility: [],
-                order: {},
-                showSearchFilterRow: false,
-                filterPresets: [],
-            };
-        }
-        return dataTableConfig;
-    }
-
     getFilterPresets(dataTableId: string): Array<{ name: string; value: string }> {
-        const dataTableConfig = this.getDataTableConfig(dataTableId);
-        return dataTableConfig[dataTableId].filterPresets ?? [];
+        const dataTableConfig = this.dataTableConfigService.getConfig(dataTableId);
+        return dataTableConfig.filterPresets ?? [];
     }
 
     saveFilterPreset(config: { dataTableId: string; name: string; value: string }) {
-        const dataTableConfig = this.getDataTableConfig(config.dataTableId);
-        const filterPresets = dataTableConfig[config.dataTableId].filterPresets ?? [];
+        const dataTableConfig = this.dataTableConfigService.getConfig(config.dataTableId);
+        const filterPresets = dataTableConfig.filterPresets ?? [];
         const existingName = filterPresets.find(p => p.name === config.name);
         if (existingName) {
             existingName.value = config.value;
@@ -44,37 +31,35 @@ export class FilterPresetService {
                 value: config.value,
             });
         }
-        dataTableConfig[config.dataTableId].filterPresets = filterPresets;
-        this.localStorageService.set('dataTableConfig', dataTableConfig);
+        dataTableConfig.filterPresets = filterPresets;
+        this.dataTableConfigService.setConfig(config.dataTableId, dataTableConfig);
         this._presetChanges.next(filterPresets);
     }
 
     deleteFilterPreset(config: { dataTableId: string; name: string }) {
-        const dataTableConfig = this.getDataTableConfig(config.dataTableId);
-        dataTableConfig[config.dataTableId].filterPresets = dataTableConfig[
-            config.dataTableId
-        ].filterPresets.filter(p => p.name !== config.name);
-        this.localStorageService.set('dataTableConfig', dataTableConfig);
-        this._presetChanges.next(dataTableConfig[config.dataTableId].filterPresets);
+        const dataTableConfig = this.dataTableConfigService.getConfig(config.dataTableId);
+        dataTableConfig.filterPresets = dataTableConfig.filterPresets.filter(p => p.name !== config.name);
+        this.dataTableConfigService.setConfig(config.dataTableId, dataTableConfig);
+        this._presetChanges.next(dataTableConfig.filterPresets);
     }
 
     reorderPresets(dataTableId: string, fromIndex: number, toIndex: number) {
         const presets = this.getFilterPresets(dataTableId);
         moveItemInArray(presets, fromIndex, toIndex);
-        const dataTableConfig = this.getDataTableConfig(dataTableId);
-        dataTableConfig[dataTableId].filterPresets = presets;
-        this.localStorageService.set('dataTableConfig', dataTableConfig);
+        const dataTableConfig = this.dataTableConfigService.getConfig(dataTableId);
+        dataTableConfig.filterPresets = presets;
+        this.dataTableConfigService.setConfig(dataTableId, dataTableConfig);
         this._presetChanges.next(presets);
     }
 
     renameFilterPreset(config: { dataTableId: string; oldName: string; newName: string }) {
-        const dataTableConfig = this.getDataTableConfig(config.dataTableId);
-        const filterPresets = dataTableConfig[config.dataTableId].filterPresets ?? [];
+        const dataTableConfig = this.dataTableConfigService.getConfig(config.dataTableId);
+        const filterPresets = dataTableConfig.filterPresets ?? [];
         const existingName = filterPresets.find(p => p.name === config.oldName);
         if (existingName) {
             existingName.name = config.newName;
-            dataTableConfig[config.dataTableId].filterPresets = filterPresets;
-            this.localStorageService.set('dataTableConfig', dataTableConfig);
+            dataTableConfig.filterPresets = filterPresets;
+            this.dataTableConfigService.setConfig(config.dataTableId, dataTableConfig);
             this._presetChanges.next(filterPresets);
         }
     }

packages/admin-ui/src/lib/order/src/components/order-data-table/order-data-table.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, ContentChildren, Input, QueryList } from '@angular/core';
-import { DataTable2ColumnComponent, DataTable2Component, OrderDetailFragment } from '@vendure/admin-ui/core';
+import { DataTable2Component, OrderDetailFragment } from '@vendure/admin-ui/core';
 import { OrderTotalColumnComponent } from './order-total-column.component';
 
 @Component({
@@ -19,20 +19,6 @@ export class OrderDataTableComponent extends DataTable2Component<OrderDetailFrag
         return [...(this.columns ?? []), ...(this.customFieldColumns ?? []), ...(this.totalColumns ?? [])];
     }
 
-    get sortedColumns() {
-        const columns = this.allColumns;
-        const dataTableConfig = this.getDataTableConfig();
-        for (const [id, index] of Object.entries(dataTableConfig[this.id].order)) {
-            const column = columns.find(c => c.id === id);
-            const currentIndex = columns.findIndex(c => c.id === id);
-            if (currentIndex !== -1 && column) {
-                columns.splice(currentIndex, 1);
-                columns.splice(index, 0, column);
-            }
-        }
-        return columns;
-    }
-
     getPromotionLink(promotion: OrderDetailFragment['discounts'][number]): any[] {
         const id = promotion.adjustmentSource.split(':')[1];
         return ['/marketing', 'promotions', id];