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 651865fa9a..e856e840cc 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 @@ -41,7 +41,9 @@ export class OrderListComponent label: _('order.filter-preset-open'), config: { active: false, - states: this.orderStates.filter(s => s !== 'Delivered' && s !== 'Cancelled' && s !== 'Shipped'), + states: this.orderStates.filter( + s => s !== 'Delivered' && s !== 'Cancelled' && s !== 'Shipped', + ), }, }, { @@ -100,10 +102,11 @@ export class OrderListComponent merge(this.searchTerm.valueChanges, this.activePreset$.pipe(skip(1))) .pipe(debounceTime(250), takeUntil(this.destroy$)) .subscribe(() => this.refresh()); + const queryParamMap = this.route.snapshot.queryParamMap; this.customFilterForm = new FormGroup({ - states: new FormControl([]), - placedAtStart: new FormControl(), - placedAtEnd: new FormControl(), + states: new FormControl(queryParamMap.getAll('states') ?? []), + placedAtStart: new FormControl(queryParamMap.get('placedAtStart')), + placedAtEnd: new FormControl(queryParamMap.get('placedAtEnd')), }); } @@ -118,8 +121,14 @@ export class OrderListComponent } applyCustomFilters() { + const formValue = this.customFilterForm.value; + this.setQueryParam({ + filter: 'custom', + states: formValue.states, + placedAtStart: formValue.placedAtStart, + placedAtEnd: formValue.placedAtEnd, + }); this.customFilterForm.markAsPristine(); - this.refresh(); } // tslint:disable-next-line:no-shadowed-variable @@ -138,26 +147,29 @@ export class OrderListComponent }; } } else if (activeFilterPreset === 'custom') { - const formValue = this.customFilterForm?.value ?? {}; - if (formValue.states?.length) { + const queryParams = this.route.snapshot.queryParamMap; + const states = queryParams.getAll('states') ?? []; + const placedAtStart = queryParams.get('placedAtStart'); + const placedAtEnd = queryParams.get('placedAtEnd'); + if (states.length) { filter.state = { - in: formValue.states, + in: states, }; } - if (formValue.placedAtStart && formValue.placedAtEnd) { + if (placedAtStart && placedAtEnd) { filter.orderPlacedAt = { between: { - start: formValue.placedAtStart, - end: formValue.placedAtEnd, + start: placedAtStart, + end: placedAtEnd, }, }; - } else if (formValue.placedAtStart) { + } else if (placedAtStart) { filter.orderPlacedAt = { - after: formValue.placedAtStart, + after: placedAtStart, }; - } else if (formValue.placedAtEnd) { + } else if (placedAtEnd) { filter.orderPlacedAt = { - before: formValue.placedAtEnd, + before: placedAtEnd, }; } }