feat(admin-ui): Persist custom order filter params in url

Relates to #561
vendure-ecommerce · Nov 19, 2020 · 8eb6246 · 8eb6246
1 parent 70e14f2
commit 8eb6246
Showing 1 changed file with 27 additions and 15 deletions.
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
@@ -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,
                 };
             }
         }