fix(admin-ui): Lazy-load only selected custom fields in list views

Relates to #3097
vendure-ecommerce · Oct 4, 2024 · 690dd0f · 690dd0f
1 parent 7128a33
commit 690dd0f
Show file tree

Hide file tree

Showing 39 changed files with 109 additions and 66 deletions.
diff --git a/...es/admin-ui/src/lib/catalog/src/components/collection-list/collection-list.component.html b/...es/admin-ui/src/lib/catalog/src/components/collection-list/collection-list.component.html
@@ -25,7 +25,7 @@
     <ng-template vdrSplitViewLeft>
         <vdr-collection-data-table
             class="mt-2"
-            id="collection-list"
+            [id]="dataTableListId"
             [items]="items$ | async"
             [subCollections]="subCollections$ | async"
             [itemsPerPage]="itemsPerPage$ | async"
@@ -36,6 +36,7 @@
             (pageChange)="setPageNumber($event)"
             (itemsPerPageChange)="setItemsPerPage($event)"
             (changeOrder)="onRearrange($event)"
+            (visibleColumnsChange)="setVisibleColumns($event)"
         >
             <vdr-bulk-action-menu
                 locationId="collection-list"

diff --git a/...ages/admin-ui/src/lib/catalog/src/components/collection-list/collection-list.component.ts b/...ages/admin-ui/src/lib/catalog/src/components/collection-list/collection-list.component.ts
@@ -28,6 +28,7 @@ export class CollectionListComponent
     activeCollectionTitle$: Observable<string>;
     subCollections$: Observable<Array<ItemOf<GetCollectionListQuery, 'collections'>>>;
     expandedIds: string[] = [];
+    dataTableListId = 'collection-list';
     readonly customFields = this.getCustomFieldConfig('Collection');
     readonly filters = this.createFilterCollection()
         .addIdFilter()
@@ -58,7 +59,10 @@ export class CollectionListComponent
         .addCustomFieldSorts(this.customFields)
         .connectToRoute(this.route);
 
-    constructor(protected dataService: DataService, private notificationService: NotificationService) {
+    constructor(
+        protected dataService: DataService,
+        private notificationService: NotificationService,
+    ) {
         super();
         super.configure({
             document: GetCollectionListDocument,

diff --git a/packages/admin-ui/src/lib/catalog/src/components/facet-list/facet-list.component.html b/packages/admin-ui/src/lib/catalog/src/components/facet-list/facet-list.component.html
@@ -23,14 +23,15 @@
 </vdr-page-block>
 <vdr-data-table-2
     class="mt-2"
-    id="facet-list"
+    [id]="dataTableListId"
     [items]="items$ | async"
     [itemsPerPage]="itemsPerPage$ | async"
     [totalItems]="totalItems$ | async"
     [currentPage]="currentPage$ | async"
     [filters]="filters"
     (pageChange)="setPageNumber($event)"
     (itemsPerPageChange)="setItemsPerPage($event)"
+    (visibleColumnsChange)="setVisibleColumns($event)"
 >
     <vdr-bulk-action-menu
         locationId="facet-list"

diff --git a/packages/admin-ui/src/lib/catalog/src/components/facet-list/facet-list.component.ts b/packages/admin-ui/src/lib/catalog/src/components/facet-list/facet-list.component.ts
@@ -35,6 +35,7 @@ export class FacetListComponent
     readonly initialLimit = 3;
     displayLimit: { [id: string]: number } = {};
 
+    dataTableListId = 'facet-list';
     readonly customFields = this.getCustomFieldConfig('Facet');
     readonly filters = this.createFilterCollection()
         .addIdFilter()

diff --git a/packages/admin-ui/src/lib/catalog/src/components/product-list/product-list.component.html b/packages/admin-ui/src/lib/catalog/src/components/product-list/product-list.component.html
@@ -8,7 +8,7 @@
             ></vdr-language-selector>
         </vdr-ab-left>
         <vdr-ab-right>
-            <vdr-action-bar-items locationId="product-list"></vdr-action-bar-items>
+            <vdr-action-bar-items [locationId]="pageLocationId"></vdr-action-bar-items>
             <a
                 class="button primary mr-1"
                 [routerLink]="['./create']"
@@ -17,7 +17,7 @@
                 <clr-icon shape="plus"></clr-icon>
                 {{ 'catalog.create-new-product' | translate }}
             </a>
-            <vdr-action-bar-dropdown-menu [alwaysShow]="true" locationId="product-list">
+            <vdr-action-bar-dropdown-menu [alwaysShow]="true" [locationId]="pageLocationId">
                 <button type="button" vdrDropdownItem (click)="rebuildSearchIndex()">
                     <clr-icon shape="refresh" class=""></clr-icon>
                     {{ 'catalog.rebuild-search-index' | translate }}
@@ -28,17 +28,18 @@
 </vdr-page-block>
 <vdr-data-table-2
     class="mt-2"
-    id="product-list"
+    [id]="dataTableListId"
     [items]="items$ | async"
     [itemsPerPage]="itemsPerPage$ | async"
     [totalItems]="totalItems$ | async"
     [currentPage]="currentPage$ | async"
     [filters]="filters"
     (pageChange)="setPageNumber($event)"
     (itemsPerPageChange)="setItemsPerPage($event)"
+    (visibleColumnsChange)="setVisibleColumns($event)"
 >
     <vdr-bulk-action-menu
-        locationId="product-list"
+        [locationId]="dataTableListId"
         [hostComponent]="this"
         [selectionManager]="selectionManager"
     ></vdr-bulk-action-menu>

diff --git a/packages/admin-ui/src/lib/catalog/src/components/product-list/product-list.component.ts b/packages/admin-ui/src/lib/catalog/src/components/product-list/product-list.component.ts
@@ -24,6 +24,8 @@ export class ProductListComponent
     implements OnInit
 {
     pendingSearchIndexUpdates = 0;
+    dataTableListId = 'product-list';
+    pageLocationId = 'product-list';
     readonly customFields = this.getCustomFieldConfig('Product');
     readonly filters = this.createFilterCollection()
         .addIdFilter()

diff --git a/packages/admin-ui/src/lib/core/src/data/providers/collection-data.service.ts b/packages/admin-ui/src/lib/core/src/data/providers/collection-data.service.ts
@@ -17,7 +17,7 @@ import {
     UPDATE_COLLECTION,
 } from '../definitions/collection-definitions';
 
-import { BaseDataService } from './base-data.service';
+import { BaseDataService, ExtendedQueryOptions } from './base-data.service';
 
 export class CollectionDataService {
     constructor(private baseDataService: BaseDataService) {}
@@ -110,21 +110,32 @@ export class CollectionDataService {
         >(PREVIEW_COLLECTION_CONTENTS, { input, options });
     }
 
-    getCollectionContents(id: string, take = 10, skip = 0, filterTerm?: string) {
+    getCollectionContents(
+        id: string,
+        take = 10,
+        skip = 0,
+        filterTerm?: string,
+        options: ExtendedQueryOptions = {},
+    ) {
         const filter = filterTerm
             ? ({ name: { contains: filterTerm } } as Codegen.CollectionFilterParameter)
             : undefined;
         return this.baseDataService.query<
             Codegen.GetCollectionContentsQuery,
             Codegen.GetCollectionContentsQueryVariables
-        >(GET_COLLECTION_CONTENTS, {
-            id,
-            options: {
-                skip,
-                take,
-                filter,
+        >(
+            GET_COLLECTION_CONTENTS,
+            {
+                id,
+                options: {
+                    skip,
+                    take,
+                    filter,
+                },
             },
-        });
+            'cache-and-network',
+            options,
+        );
     }
 
     assignCollectionsToChannel(input: Codegen.AssignCollectionsToChannelInput) {

diff --git a/packages/admin-ui/src/lib/core/src/data/providers/product-data.service.ts b/packages/admin-ui/src/lib/core/src/data/providers/product-data.service.ts
@@ -355,6 +355,9 @@ export class ProductDataService {
                     },
                 },
             },
+            undefined,
+            // By default do not load custom fields in the list view
+            { includeCustomFields: [] },
         );
     }
 

diff --git a/packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table2.component.ts b/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';
@@ -130,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>;
@@ -145,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
@@ -167,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) {
@@ -212,21 +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);
@@ -250,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();
         });
@@ -273,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) {
@@ -311,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;
-    }
 }
diff --git a/...ui/src/lib/customer/src/components/customer-group-list/customer-group-list.component.html b/...ui/src/lib/customer/src/components/customer-group-list/customer-group-list.component.html
@@ -15,7 +15,7 @@
     <ng-template vdrSplitViewLeft>
         <vdr-data-table-2
             class="mt-2"
-            id="customer-group-list"
+            [id]="dataTableListId"
             [items]="items$ | async"
             [itemsPerPage]="itemsPerPage$ | async"
             [totalItems]="totalItems$ | async"
@@ -24,6 +24,7 @@
             [activeIndex]="activeIndex$ | async"
             (pageChange)="setPageNumber($event)"
             (itemsPerPageChange)="setItemsPerPage($event)"
+            (visibleColumnsChange)="setVisibleColumns($event)"
         >
             <vdr-bulk-action-menu
                 locationId="customer-group-list"

diff --git a/...n-ui/src/lib/customer/src/components/customer-group-list/customer-group-list.component.ts b/...n-ui/src/lib/customer/src/components/customer-group-list/customer-group-list.component.ts
@@ -41,6 +41,7 @@ export class CustomerGroupListComponent
     extends TypedBaseListComponent<typeof GetCustomerGroupListDocument, 'customerGroups'>
     implements OnInit
 {
+    dataTableListId = 'customer-group-list';
     readonly customFields = this.getCustomFieldConfig('CustomerGroup');
     activeGroup$: Observable<ItemOf<GetCustomerGroupsQuery, 'customerGroups'> | undefined>;
     activeIndex$: Observable<number>;

diff --git a/packages/admin-ui/src/lib/customer/src/components/customer-list/customer-list.component.html b/packages/admin-ui/src/lib/customer/src/components/customer-list/customer-list.component.html
@@ -14,14 +14,15 @@
 
 <vdr-data-table-2
     class="mt-2"
-    id="customer-list"
+    [id]="dataTableListId"
     [items]="items$ | async"
     [itemsPerPage]="itemsPerPage$ | async"
     [totalItems]="totalItems$ | async"
     [currentPage]="currentPage$ | async"
     [filters]="filters"
     (pageChange)="setPageNumber($event)"
     (itemsPerPageChange)="setItemsPerPage($event)"
+    (visibleColumnsChange)="setVisibleColumns($event)"
 >
     <vdr-bulk-action-menu
         locationId="customer-list"

diff --git a/packages/admin-ui/src/lib/customer/src/components/customer-list/customer-list.component.ts b/packages/admin-ui/src/lib/customer/src/components/customer-list/customer-list.component.ts
@@ -37,6 +37,7 @@ export class CustomerListComponent
     extends TypedBaseListComponent<typeof CustomerListQueryDocument, 'customers'>
     implements OnInit
 {
+    dataTableListId = 'customer-list';
     readonly customFields = this.getCustomFieldConfig('Customer');
     readonly filters = this.createFilterCollection()
         .addIdFilter()

diff --git a/...es/admin-ui/src/lib/marketing/src/components/promotion-list/promotion-list.component.html b/...es/admin-ui/src/lib/marketing/src/components/promotion-list/promotion-list.component.html
@@ -19,14 +19,15 @@
 </vdr-page-block>
 
 <vdr-data-table-2
-    id="promotion-list"
+    [id]="dataTableListId"
     [items]="items$ | async"
     [itemsPerPage]="itemsPerPage$ | async"
     [totalItems]="totalItems$ | async"
     [currentPage]="currentPage$ | async"
     [filters]="filters"
     (pageChange)="setPageNumber($event)"
     (itemsPerPageChange)="setItemsPerPage($event)"
+    (visibleColumnsChange)="setVisibleColumns($event)"
 >
     <vdr-bulk-action-menu
         locationId="promotion-list"

diff --git a/...ages/admin-ui/src/lib/marketing/src/components/promotion-list/promotion-list.component.ts b/...ages/admin-ui/src/lib/marketing/src/components/promotion-list/promotion-list.component.ts
@@ -32,6 +32,7 @@ export class PromotionListComponent
     extends TypedBaseListComponent<typeof GetPromotionListDocument, 'promotions'>
     implements OnInit
 {
+    dataTableListId = 'promotion-list';
     readonly customFields = this.getCustomFieldConfig('Promotion');
     readonly filters = this.createFilterCollection()
         .addIdFilter()

diff --git a/packages/admin-ui/src/lib/order/src/components/order-list/order-list.component.html b/packages/admin-ui/src/lib/order/src/components/order-list/order-list.component.html
@@ -14,14 +14,15 @@
 </vdr-page-block>
 <vdr-data-table-2
     class="mt-2"
-    id="order-list"
+    [id]="dataTableListId"
     [items]="items$ | async"
     [itemsPerPage]="itemsPerPage$ | async"
     [totalItems]="totalItems$ | async"
     [currentPage]="currentPage$ | async"
     [filters]="filters"
     (pageChange)="setPageNumber($event)"
     (itemsPerPageChange)="setItemsPerPage($event)"
+    (visibleColumnsChange)="setVisibleColumns($event)"
 >
     <vdr-bulk-action-menu
         locationId="order-list"
-Original file line number
+Diff line change
@@ Expand Up / @@ -355,6 +355,9 @@ export class ProductDataService { @@
                         },
                     },
                 },
+                undefined,
+                // By default do not load custom fields in the list view
+                { includeCustomFields: [] },
             );
         }
@@ Expand Down @@