fix(admin-ui): Reinstate serialized filter state in url

vendure-ecommerce · Oct 2, 2023 · a5bc0c1 · a5bc0c1
1 parent e2cb74b
commit a5bc0c1
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/packages/admin-ui/src/lib/core/src/providers/data-table/data-table-filter-collection.ts b/packages/admin-ui/src/lib/core/src/providers/data-table/data-table-filter-collection.ts
@@ -218,6 +218,13 @@ export class DataTableFilterCollection<FilterInput extends Record<string, any> =
     }
 
     connectToRoute(route: ActivatedRoute) {
+        this.valueChanges.subscribe(() => {
+            this.router.navigate(['./'], {
+                queryParams: { [this.#filtersQueryParamName]: this.serialize(), page: 1 },
+                relativeTo: route,
+                queryParamsHandling: 'merge',
+            });
+        });
         route.queryParamMap
             .pipe(
                 map(params => params.get(this.#filtersQueryParamName)),

diff --git a/...i/src/lib/core/src/shared/components/data-table-filters/data-table-filters.component.html b/...i/src/lib/core/src/shared/components/data-table-filters/data-table-filters.component.html
@@ -138,7 +138,7 @@
                 </div>
             </ng-container>
             <div class="apply-wrapper mt-2">
-                <button class="button" (click)="activate()" [disabled]="!formControl?.valid">
+                <button class="button" (click)="activate($event)" [disabled]="!formControl?.valid">
                     <span>{{ 'common.apply' | translate }}</span>
                     <clr-icon shape="check"></clr-icon>
                 </button>

diff --git a/...-ui/src/lib/core/src/shared/components/data-table-filters/data-table-filters.component.ts b/...-ui/src/lib/core/src/shared/components/data-table-filters/data-table-filters.component.ts
@@ -155,7 +155,8 @@ export class DataTableFiltersComponent implements AfterViewInit {
         }
     }
 
-    activate() {
+    activate(event: Event) {
+        event.preventDefault();
         if (!this.selectedFilter) {
             return;
         }