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 index 576c4dfe8e..796d034d84 100644 --- 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 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 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 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 index 89744beb24..4516af1218 100644 --- 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 index e856e840cc..06c6057853 100644 --- 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