feat(admin-ui): Store last used order list filters in localStorage

Relates to #561
vendure-ecommerce · Nov 19, 2020 · 7a9ba23 · 7a9ba23
1 parent 8eb6246
commit 7a9ba23
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 20 deletions.
diff --git a/packages/admin-ui/src/lib/core/src/common/base-list.component.ts b/packages/admin-ui/src/lib/core/src/common/base-list.component.ts
@@ -1,7 +1,7 @@
 import { Directive, OnDestroy, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, QueryParamsHandling, Router } from '@angular/router';
 import { BehaviorSubject, combineLatest, Observable, Subject } from 'rxjs';
-import { map, shareReplay, takeUntil } from 'rxjs/operators';
+import { distinctUntilChanged, map, shareReplay, takeUntil } from 'rxjs/operators';
 
 import { QueryResult } from '../data/query-result';
 
@@ -66,10 +66,12 @@ export class BaseListComponent<ResultType, ItemType, VariableType = any> impleme
         this.currentPage$ = this.route.queryParamMap.pipe(
             map(qpm => qpm.get('page')),
             map(page => (!page ? 1 : +page)),
+            distinctUntilChanged(),
         );
         this.itemsPerPage$ = this.route.queryParamMap.pipe(
             map(qpm => qpm.get('perPage')),
             map(perPage => (!perPage ? 10 : +perPage)),
+            distinctUntilChanged(),
         );
 
         combineLatest(this.currentPage$, this.itemsPerPage$, this.refresh$)
@@ -83,11 +85,11 @@ export class BaseListComponent<ResultType, ItemType, VariableType = any> impleme
     }
 
     setPageNumber(page: number) {
-        this.setQueryParam('page', page, true);
+        this.setQueryParam('page', page, { replaceUrl: true });
     }
 
     setItemsPerPage(perPage: number) {
-        this.setQueryParam('perPage', perPage, true);
+        this.setQueryParam('perPage', perPage, { replaceUrl: true });
     }
 
     /**
@@ -97,20 +99,27 @@ export class BaseListComponent<ResultType, ItemType, VariableType = any> impleme
         this.refresh$.next(undefined);
     }
 
-    protected setQueryParam(hash: { [key: string]: any }, replaceUrl?: boolean);
-    protected setQueryParam(key: string, value: any, replaceUrl?: boolean);
+    protected setQueryParam(
+        hash: { [key: string]: any },
+        options?: { replaceUrl?: boolean; queryParamsHandling?: QueryParamsHandling },
+    );
+    protected setQueryParam(
+        key: string,
+        value: any,
+        options?: { replaceUrl?: boolean; queryParamsHandling?: QueryParamsHandling },
+    );
     protected setQueryParam(
         keyOrHash: string | { [key: string]: any },
-        valueOrReplaceUrl?: any,
-        maybeReplaceUrl?: boolean,
+        valueOrOptions?: any,
+        maybeOptions?: { replaceUrl?: boolean; queryParamsHandling?: QueryParamsHandling },
     ) {
-        const paramsObject = typeof keyOrHash === 'string' ? { [keyOrHash]: valueOrReplaceUrl } : keyOrHash;
-        const replaceUrl = (typeof keyOrHash === 'string' ? maybeReplaceUrl : valueOrReplaceUrl) ?? false;
+        const paramsObject = typeof keyOrHash === 'string' ? { [keyOrHash]: valueOrOptions } : keyOrHash;
+        const options = (typeof keyOrHash === 'string' ? maybeOptions : valueOrOptions) ?? {};
         this.router.navigate(['./'], {
-            queryParams: typeof keyOrHash === 'string' ? { [keyOrHash]: valueOrReplaceUrl } : keyOrHash,
+            queryParams: typeof keyOrHash === 'string' ? { [keyOrHash]: valueOrOptions } : keyOrHash,
             relativeTo: this.route,
             queryParamsHandling: 'merge',
-            replaceUrl,
+            ...options,
         });
     }
 }
diff --git a/packages/admin-ui/src/lib/core/src/providers/local-storage/local-storage.service.ts b/packages/admin-ui/src/lib/core/src/providers/local-storage/local-storage.service.ts
@@ -1,7 +1,11 @@
 import { Location } from '@angular/common';
 import { Injectable } from '@angular/core';
 
-export type LocalStorageKey = 'activeChannelToken' | 'authToken' | 'uiLanguageCode';
+export type LocalStorageKey =
+    | 'activeChannelToken'
+    | 'authToken'
+    | 'uiLanguageCode'
+    | 'orderListLastCustomFilters';
 export type LocalStorageLocationBasedKey = 'shippingTestOrder' | 'shippingTestAddress';
 const PREFIX = 'vnd_';
 

diff --git a/packages/admin-ui/src/lib/order/src/components/order-list/order-list.component.ts b/packages/admin-ui/src/lib/order/src/components/order-list/order-list.component.ts
@@ -6,11 +6,12 @@ import {
     BaseListComponent,
     DataService,
     GetOrderList,
+    LocalStorageService,
     ServerConfigService,
     SortOrder,
 } from '@vendure/admin-ui/core';
 import { merge, Observable } from 'rxjs';
-import { debounceTime, distinctUntilChanged, map, skip, takeUntil } from 'rxjs/operators';
+import { debounceTime, distinctUntilChanged, map, skip, takeUntil, tap } from 'rxjs/operators';
 
 interface OrderFilterConfig {
     active?: boolean;
@@ -75,6 +76,7 @@ export class OrderListComponent
     constructor(
         private serverConfigService: ServerConfigService,
         private dataService: DataService,
+        private localStorageService: LocalStorageService,
         router: Router,
         route: ActivatedRoute,
     ) {
@@ -91,6 +93,10 @@ export class OrderListComponent
                     this.route.snapshot.queryParamMap.get('filter') || 'open',
                 ),
         );
+        const lastFilters = this.localStorageService.get('orderListLastCustomFilters');
+        if (lastFilters) {
+            this.setQueryParam(lastFilters, { replaceUrl: true });
+        }
     }
 
     ngOnInit() {
@@ -99,9 +105,12 @@ export class OrderListComponent
             map(qpm => qpm.get('filter') || 'open'),
             distinctUntilChanged(),
         );
-        merge(this.searchTerm.valueChanges, this.activePreset$.pipe(skip(1)))
-            .pipe(debounceTime(250), takeUntil(this.destroy$))
-            .subscribe(() => this.refresh());
+        merge(this.searchTerm.valueChanges.pipe(debounceTime(250)), this.route.queryParamMap)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(val => {
+                this.refresh();
+            });
+
         const queryParamMap = this.route.snapshot.queryParamMap;
         this.customFilterForm = new FormGroup({
             states: new FormControl(queryParamMap.getAll('states') ?? []),
@@ -111,24 +120,32 @@ export class OrderListComponent
     }
 
     selectFilterPreset(presetName: string) {
+        const lastCustomFilters = this.localStorageService.get('orderListLastCustomFilters') ?? {};
+        const emptyCustomFilters = { states: undefined, placedAtStart: undefined, placedAtEnd: undefined };
+        const filters = presetName === 'custom' ? lastCustomFilters : emptyCustomFilters;
         this.setQueryParam(
             {
                 filter: presetName,
                 page: 1,
+                ...filters,
             },
-            true,
+            { replaceUrl: true },
         );
     }
 
     applyCustomFilters() {
         const formValue = this.customFilterForm.value;
-        this.setQueryParam({
-            filter: 'custom',
+        const customFilters = {
             states: formValue.states,
             placedAtStart: formValue.placedAtStart,
             placedAtEnd: formValue.placedAtEnd,
+        };
+        this.setQueryParam({
+            filter: 'custom',
+            ...customFilters,
         });
         this.customFilterForm.markAsPristine();
+        this.localStorageService.set('orderListLastCustomFilters', customFilters);
     }
 
     // tslint:disable-next-line:no-shadowed-variable