feat(admin-ui): Persist column config to local storage

packages/admin-ui/src/lib/core/src/app.component.ts

@@ -45,10 +45,14 @@ export class AppComponent implements OnInit {
             .mapStream(({ userStatus }) => userStatus.isLoggedIn)
             .pipe(
                 filter(loggedIn => loggedIn === true),
-                switchMap(() => this.dataService.client.uiState().mapStream(data => data.uiState.contentLanguage)),
-                switchMap(contentLang => this.serverConfigService
+                switchMap(() =>
+                    this.dataService.client.uiState().mapStream(data => data.uiState.contentLanguage),
+                ),
+                switchMap(contentLang =>
+                    this.serverConfigService
                         .getAvailableLanguages()
-                        .pipe(map(available => [contentLang, available] as const))),
+                        .pipe(map(available => [contentLang, available] as const)),
+                ),
             )
             .subscribe({
                 next: ([contentLanguage, availableLanguages]) => {
@@ -59,6 +63,13 @@ export class AppComponent implements OnInit {
                 },
             });
 
+        this.dataService.client
+            .userStatus()
+            .mapStream(({ userStatus }) => userStatus.administratorId)
+            .subscribe(administratorId => {
+                this.localStorageService.setAdminId(administratorId);
+            });
+
         if (isDevMode()) {
             // eslint-disable-next-line no-console
             console.log(

packages/admin-ui/src/lib/core/src/common/generated-types.ts

@@ -6129,6 +6129,7 @@ export type User = Node & {
 export type UserStatus = {
   __typename?: 'UserStatus';
   activeChannelId?: Maybe<Scalars['ID']>;
+  administratorId?: Maybe<Scalars['ID']>;
   channels: Array<CurrentUserChannel>;
   isLoggedIn: Scalars['Boolean'];
   loginTime: Scalars['String'];
@@ -6138,6 +6139,7 @@ export type UserStatus = {
 
 export type UserStatusInput = {
   activeChannelId: Scalars['ID'];
+  administratorId: Scalars['ID'];
   channels: Array<CurrentUserChannelInput>;
   loginTime: Scalars['String'];
   username: Scalars['String'];
@@ -6306,19 +6308,19 @@ export type RequestCompletedMutationVariables = Exact<{ [key: string]: never; }>
 
 export type RequestCompletedMutation = { requestCompleted: number };
 
-export type UserStatusFragment = { __typename?: 'UserStatus', username: string, isLoggedIn: boolean, loginTime: string, activeChannelId?: string | null, permissions: Array<Permission>, channels: Array<{ __typename?: 'CurrentUserChannel', id: string, code: string, token: string, permissions: Array<Permission> }> };
+export type UserStatusFragment = { __typename?: 'UserStatus', administratorId?: string | null, username: string, isLoggedIn: boolean, loginTime: string, activeChannelId?: string | null, permissions: Array<Permission>, channels: Array<{ __typename?: 'CurrentUserChannel', id: string, code: string, token: string, permissions: Array<Permission> }> };
 
 export type SetAsLoggedInMutationVariables = Exact<{
   input: UserStatusInput;
 }>;
 
 
-export type SetAsLoggedInMutation = { setAsLoggedIn: { __typename?: 'UserStatus', username: string, isLoggedIn: boolean, loginTime: string, activeChannelId?: string | null, permissions: Array<Permission>, channels: Array<{ __typename?: 'CurrentUserChannel', id: string, code: string, token: string, permissions: Array<Permission> }> } };
+export type SetAsLoggedInMutation = { setAsLoggedIn: { __typename?: 'UserStatus', administratorId?: string | null, username: string, isLoggedIn: boolean, loginTime: string, activeChannelId?: string | null, permissions: Array<Permission>, channels: Array<{ __typename?: 'CurrentUserChannel', id: string, code: string, token: string, permissions: Array<Permission> }> } };
 
 export type SetAsLoggedOutMutationVariables = Exact<{ [key: string]: never; }>;
 
 
-export type SetAsLoggedOutMutation = { setAsLoggedOut: { __typename?: 'UserStatus', username: string, isLoggedIn: boolean, loginTime: string, activeChannelId?: string | null, permissions: Array<Permission>, channels: Array<{ __typename?: 'CurrentUserChannel', id: string, code: string, token: string, permissions: Array<Permission> }> } };
+export type SetAsLoggedOutMutation = { setAsLoggedOut: { __typename?: 'UserStatus', administratorId?: string | null, username: string, isLoggedIn: boolean, loginTime: string, activeChannelId?: string | null, permissions: Array<Permission>, channels: Array<{ __typename?: 'CurrentUserChannel', id: string, code: string, token: string, permissions: Array<Permission> }> } };
 
 export type SetUiLanguageMutationVariables = Exact<{
   languageCode: LanguageCode;
@@ -6364,7 +6366,7 @@ export type GetNetworkStatusQuery = { networkStatus: { __typename?: 'NetworkStat
 export type GetUserStatusQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type GetUserStatusQuery = { userStatus: { __typename?: 'UserStatus', username: string, isLoggedIn: boolean, loginTime: string, activeChannelId?: string | null, permissions: Array<Permission>, channels: Array<{ __typename?: 'CurrentUserChannel', id: string, code: string, token: string, permissions: Array<Permission> }> } };
+export type GetUserStatusQuery = { userStatus: { __typename?: 'UserStatus', administratorId?: string | null, username: string, isLoggedIn: boolean, loginTime: string, activeChannelId?: string | null, permissions: Array<Permission>, channels: Array<{ __typename?: 'CurrentUserChannel', id: string, code: string, token: string, permissions: Array<Permission> }> } };
 
 export type GetUiStateQueryVariables = Exact<{ [key: string]: never; }>;
 
@@ -6374,21 +6376,21 @@ export type GetUiStateQuery = { uiState: { __typename?: 'UiState', language: Lan
 export type GetClientStateQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type GetClientStateQuery = { networkStatus: { __typename?: 'NetworkStatus', inFlightRequests: number }, userStatus: { __typename?: 'UserStatus', username: string, isLoggedIn: boolean, loginTime: string, activeChannelId?: string | null, permissions: Array<Permission>, channels: Array<{ __typename?: 'CurrentUserChannel', id: string, code: string, token: string, permissions: Array<Permission> }> }, uiState: { __typename?: 'UiState', language: LanguageCode, locale?: string | null, contentLanguage: LanguageCode, theme: string, displayUiExtensionPoints: boolean } };
+export type GetClientStateQuery = { networkStatus: { __typename?: 'NetworkStatus', inFlightRequests: number }, userStatus: { __typename?: 'UserStatus', administratorId?: string | null, username: string, isLoggedIn: boolean, loginTime: string, activeChannelId?: string | null, permissions: Array<Permission>, channels: Array<{ __typename?: 'CurrentUserChannel', id: string, code: string, token: string, permissions: Array<Permission> }> }, uiState: { __typename?: 'UiState', language: LanguageCode, locale?: string | null, contentLanguage: LanguageCode, theme: string, displayUiExtensionPoints: boolean } };
 
 export type SetActiveChannelMutationVariables = Exact<{
   channelId: Scalars['ID'];
 }>;
 
 
-export type SetActiveChannelMutation = { setActiveChannel: { __typename?: 'UserStatus', username: string, isLoggedIn: boolean, loginTime: string, activeChannelId?: string | null, permissions: Array<Permission>, channels: Array<{ __typename?: 'CurrentUserChannel', id: string, code: string, token: string, permissions: Array<Permission> }> } };
+export type SetActiveChannelMutation = { setActiveChannel: { __typename?: 'UserStatus', administratorId?: string | null, username: string, isLoggedIn: boolean, loginTime: string, activeChannelId?: string | null, permissions: Array<Permission>, channels: Array<{ __typename?: 'CurrentUserChannel', id: string, code: string, token: string, permissions: Array<Permission> }> } };
 
 export type UpdateUserChannelsMutationVariables = Exact<{
   channels: Array<CurrentUserChannelInput> | CurrentUserChannelInput;
 }>;
 
 
-export type UpdateUserChannelsMutation = { updateUserChannels: { __typename?: 'UserStatus', username: string, isLoggedIn: boolean, loginTime: string, activeChannelId?: string | null, permissions: Array<Permission>, channels: Array<{ __typename?: 'CurrentUserChannel', id: string, code: string, token: string, permissions: Array<Permission> }> } };
+export type UpdateUserChannelsMutation = { updateUserChannels: { __typename?: 'UserStatus', administratorId?: string | null, username: string, isLoggedIn: boolean, loginTime: string, activeChannelId?: string | null, permissions: Array<Permission>, channels: Array<{ __typename?: 'CurrentUserChannel', id: string, code: string, token: string, permissions: Array<Permission> }> } };
 
 export type GetCollectionFiltersQueryVariables = Exact<{ [key: string]: never; }>;
 

packages/admin-ui/src/lib/core/src/data/client-state/client-defaults.ts

@@ -14,6 +14,7 @@ export function getClientDefaults(localStorageService: LocalStorageService) {
             __typename: 'NetworkStatus',
         } as GetNetworkStatusQuery['networkStatus'],
         userStatus: {
+            administratorId: null,
             username: '',
             isLoggedIn: false,
             loginTime: '',

packages/admin-ui/src/lib/core/src/data/client-state/client-resolvers.ts

@@ -22,13 +22,14 @@ export const clientResolvers: ResolverDefinition = {
         requestCompleted: (_, args, { cache }): number => updateRequestsInFlight(cache, -1),
         setAsLoggedIn: (_, args: Codegen.SetAsLoggedInMutationVariables, { cache }): UserStatus => {
             const {
-                input: { username, loginTime, channels, activeChannelId },
+                input: { username, loginTime, channels, activeChannelId, administratorId },
             } = args;
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             const permissions = channels.find(c => c.id === activeChannelId)!.permissions;
             const data: { userStatus: UserStatus } = {
                 userStatus: {
                     __typename: 'UserStatus',
+                    administratorId,
                     username,
                     loginTime,
                     isLoggedIn: true,
@@ -44,6 +45,7 @@ export const clientResolvers: ResolverDefinition = {
             const data: GetUserStatusQuery = {
                 userStatus: {
                     __typename: 'UserStatus',
+                    administratorId: null,
                     username: '',
                     loginTime: '',
                     isLoggedIn: false,

packages/admin-ui/src/lib/core/src/data/client-state/client-types.graphql

@@ -23,6 +23,7 @@ type NetworkStatus {
 }
 
 type UserStatus {
+    administratorId: ID
     username: String!
     isLoggedIn: Boolean!
     loginTime: String!
@@ -47,6 +48,7 @@ input CurrentUserChannelInput {
 }
 
 input UserStatusInput {
+    administratorId: ID!
     username: String!
     loginTime: String!
     activeChannelId: ID!

packages/admin-ui/src/lib/core/src/data/definitions/client-definitions.ts

@@ -14,6 +14,7 @@ export const REQUEST_COMPLETED = gql`
 
 export const USER_STATUS_FRAGMENT = gql`
     fragment UserStatus on UserStatus {
+        administratorId
         username
         isLoggedIn
         loginTime

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

@@ -1,11 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import {
-    DataProxy,
-    MutationUpdaterFn,
-    SingleExecutionResult,
-    WatchQueryFetchPolicy,
-} from '@apollo/client/core';
+import { MutationUpdaterFn, SingleExecutionResult, WatchQueryFetchPolicy } from '@apollo/client/core';
 import { simpleDeepClone } from '@vendure/common/lib/simple-deep-clone';
 import { Apollo } from 'apollo-angular';
 import { DocumentNode } from 'graphql/language/ast';
@@ -13,7 +8,6 @@ import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 import { CustomFields } from '../../common/generated-types';
-import { LocalStorageService } from '../../providers/local-storage/local-storage.service';
 import { QueryResult } from '../query-result';
 import { ServerConfigService } from '../server-config';
 import { addCustomFields } from '../utils/add-custom-fields';
@@ -28,7 +22,6 @@ export class BaseDataService {
     constructor(
         private apollo: Apollo,
         private httpClient: HttpClient,
-        private localStorageService: LocalStorageService,
         private serverConfigService: ServerConfigService,
     ) {}
 

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

@@ -42,12 +42,18 @@ export class ClientDataService {
         );
     }
 
-    loginSuccess(username: string, activeChannelId: string, channels: CurrentUserChannel[]) {
+    loginSuccess(
+        administratorId: string,
+        username: string,
+        activeChannelId: string,
+        channels: CurrentUserChannel[],
+    ) {
         return this.baseDataService.mutate<
             Codegen.SetAsLoggedInMutation,
             Codegen.SetAsLoggedInMutationVariables
         >(SET_AS_LOGGED_IN, {
             input: {
+                administratorId,
                 username,
                 loginTime: Date.now().toString(),
                 activeChannelId,

packages/admin-ui/src/lib/core/src/providers/auth/auth.service.ts

@@ -45,6 +45,7 @@ export class AuthService {
                             if (activeAdministrator) {
                                 return this.dataService.client
                                     .loginSuccess(
+                                        activeAdministrator.id,
                                         `${activeAdministrator.firstName} ${activeAdministrator.lastName}`,
                                         id,
                                         login.channels,
@@ -113,6 +114,7 @@ export class AuthService {
                         if (activeAdministrator) {
                             return this.dataService.client
                                 .loginSuccess(
+                                    activeAdministrator.id,
                                     `${activeAdministrator.firstName} ${activeAdministrator.lastName}`,
                                     id,
                                     me.channels,

packages/admin-ui/src/lib/core/src/providers/local-storage/local-storage.service.ts

@@ -1,9 +1,16 @@
 import { Location } from '@angular/common';
-import { Injectable } from '@angular/core';
+import { Injectable, Injector } from '@angular/core';
 
 import { LanguageCode } from '../../common/generated-types';
+import { DataService } from '../../data/providers/data.service';
 import { WidgetLayoutDefinition } from '../dashboard-widget/dashboard-widget-types';
 
+export type DataTableConfig = {
+    [id: string]: {
+        visibility: string[];
+    };
+};
+
 export type LocalStorageTypeMap = {
     activeChannelToken: string;
     authToken: string;
@@ -14,6 +21,7 @@ export type LocalStorageTypeMap = {
     dashboardWidgetLayout: WidgetLayoutDefinition;
     activeTheme: string;
     livePreviewCollectionContents: boolean;
+    dataTableConfig: DataTableConfig;
 };
 
 export type LocalStorageLocationBasedTypeMap = {
@@ -30,7 +38,13 @@ const PREFIX = 'vnd_';
     providedIn: 'root',
 })
 export class LocalStorageService {
+    private adminId = '__global__';
     constructor(private location: Location) {}
+
+    public setAdminId(adminId?: string | null) {
+        this.adminId = adminId ?? '__global__';
+    }
+
     /**
      * Set a key-value pair in the browser's LocalStorage
      */
@@ -96,6 +110,6 @@ export class LocalStorageService {
     }
 
     private keyName(key: keyof LocalStorageTypeMap): string {
-        return PREFIX + key;
+        return `${PREFIX}_${this.adminId}_${key}`;
     }
 }

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

@@ -13,11 +13,24 @@ export class DataTable2ColumnComponent<T> implements OnInit {
     @Input() heading: string;
     @Input() align: 'left' | 'right' | 'center' = 'left';
     @Input() optional = false;
-    visible = true;
+    #visible = true;
+    #onColumnChangeFns: Array<() => void> = [];
+    get visible() {
+        return this.#visible;
+    }
     @ContentChild(TemplateRef, { static: false }) template: TemplateRef<any>;
     item: T;
 
     ngOnInit() {
-        this.visible = this.optional ? false : true;
+        this.#visible = this.optional ? false : true;
+    }
+
+    setVisibility(isVisible: boolean) {
+        this.#visible = isVisible;
+        this.#onColumnChangeFns.forEach(fn => fn());
+    }
+
+    onColumnChange(callback: () => void) {
+        this.#onColumnChangeFns.push(callback);
     }
 }

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

@@ -12,7 +12,11 @@
                     (change)="onToggleAllClick()"
                 />
             </th>
-            <th *ngFor="let column of visibleColumns; last as isLast" class="align-middle" [class.expand]="column.expand">
+            <th
+                *ngFor="let column of visibleColumns; last as isLast"
+                class="align-middle"
+                [class.expand]="column.expand"
+            >
                 <div class="cell-content" [ngClass]="column.align">
                     {{ column.heading }}
                 </div>
@@ -23,7 +27,10 @@
         </tr>
         <tr *ngIf="searchTermControl || filters?.length">
             <th [attr.colspan]="visibleColumns.length + (selectionManager ? 1 : 0)" class="filter-row">
-                <input [formControl]="searchTermControl" [placeholder]="searchTermPlaceholder" />
+                <div class="search-wrapper">
+                    <clr-icon shape="search" class="search-icon"></clr-icon>
+                    <input [formControl]="searchTermControl" [placeholder]="searchTermPlaceholder" />
+                </div>
                 <div class="filters">
                     <vdr-data-table-filters
                         *ngFor="let activeFilter of filters.getActiveFilters()"

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

@@ -22,16 +22,6 @@ table.no-select {
     user-select: none;
 }
 
-//thead th {
-//    position: sticky;
-//    top: 24px;
-//    z-index: 1;
-//
-//    &.expand {
-//        width: 100%;
-//    }
-//}
-
 th {
     font-size: var(--font-size-xs);
     font-weight: 600;
@@ -45,6 +35,20 @@ th {
     top: 7px;
 }
 
+.search-wrapper {
+    position: relative;
+    .search-icon {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        left: 8px;
+        color: var(--color-weight-600);
+    }
+    > input {
+        padding-left: 32px !important;
+    }
+}
+
 .filter-row {
     font-size: var(--font-size-base);
     font-weight: 400;

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

@@ -15,6 +15,7 @@ import {
     TemplateRef,
 } from '@angular/core';
 import { FormControl } from '@angular/forms';
+import { LocalStorageService } from '@vendure/admin-ui/core';
 import { PaginationService } from 'ngx-pagination';
 import { Subscription } from 'rxjs';
 import { SelectionManager } from '../../../common/utilities/selection-manager';
@@ -90,6 +91,7 @@ import { DataTable2ColumnComponent } from './data-table-column.component';
     providers: [PaginationService],
 })
 export class DataTable2Component<T> implements AfterContentInit, OnChanges, OnInit, OnDestroy {
+    @Input() id: string;
     @Input() items: T[];
     @Input() itemsPerPage: number;
     @Input() currentPage: number;
@@ -113,7 +115,10 @@ export class DataTable2Component<T> implements AfterContentInit, OnChanges, OnIn
     disableSelect = false;
     private subscription: Subscription | undefined;
 
-    constructor(private changeDetectorRef: ChangeDetectorRef) {}
+    constructor(
+        private changeDetectorRef: ChangeDetectorRef,
+        private localStorageService: LocalStorageService,
+    ) {}
 
     get visibleColumns() {
         return this.columns?.filter(c => c.visible) ?? [];
@@ -162,6 +167,27 @@ export class DataTable2Component<T> implements AfterContentInit, OnChanges, OnIn
 
     ngAfterContentInit(): void {
         this.rowTemplate = this.templateRefs.last;
+        const dataTableConfig = this.localStorageService.get('dataTableConfig') ?? {};
+
+        if (!this.id) {
+            console.warn(`No id was assigned to the data table component`);
+        }
+        const updateColumnVisibility = () => {
+            if (!dataTableConfig[this.id]) {
+                dataTableConfig[this.id] = { visibility: [] };
+            }
+            dataTableConfig[this.id].visibility = this.columns
+                .filter(c => (c.visible && c.optional) || (!c.visible && !c.optional))
+                .map(c => c.heading);
+            this.localStorageService.set('dataTableConfig', dataTableConfig);
+        };
+
+        this.columns.forEach(column => {
+            if (dataTableConfig?.[this.id]?.visibility.includes(column.heading)) {
+                column.setVisibility(column.optional);
+            }
+            column.onColumnChange(updateColumnVisibility);
+        });
     }
 
     trackByFn(index: number, item: any) {

packages/admin-ui/src/lib/core/src/shared/components/data-table-column-picker/data-table-column-picker.component.ts

@@ -11,6 +11,6 @@ export class DataTableColumnPickerComponent {
     @Input() columns: Array<DataTable2ColumnComponent<any>>;
 
     toggleColumn(column: DataTable2ColumnComponent<any>) {
-        column.visible = !column.visible;
+        column.setVisibility(!column.visible);
     }
 }

packages/admin-ui/src/lib/order/src/components/order-list/order-list.component.html

@@ -96,6 +96,7 @@
 <vdr-page-body>
     <vdr-data-table-2
         class="mt-2"
+        id="order-list"
         [items]="items$ | async"
         [itemsPerPage]="itemsPerPage$ | async"
         [totalItems]="totalItems$ | async"
@@ -116,7 +117,7 @@
                 <vdr-customer-label [customer]="order.customer"></vdr-customer-label>
             </ng-template>
         </vdr-dt2-column>
-        <vdr-dt2-column [heading]="'order.order-type' | translate">
+        <vdr-dt2-column [heading]="'order.order-type' | translate" [optional]="true">
             <ng-template let-order="item">
                 <vdr-chip>{{ order.type }}</vdr-chip>
             </ng-template>

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

@@ -83,6 +83,7 @@ export class OrderListComponent
             }),
         })
         .connectToRoute(this.route);
+
     canCreateDraftOrder = false;
     private activeChannelIsDefaultChannel = false;