Przeglądaj źródła

feat(admin-ui): Persist Collection list filter term to the url

Relates to #1532
Michael Bromley 3 lat temu
rodzic
commit
dcdd05b8cf

+ 20 - 2
packages/admin-ui/src/lib/catalog/src/components/collection-list/collection-list.component.ts

@@ -79,7 +79,24 @@ export class CollectionListComponent implements OnInit, OnDestroy {
 
 
         this.filterTermControl.valueChanges
         this.filterTermControl.valueChanges
             .pipe(debounceTime(250), takeUntil(this.destroy$))
             .pipe(debounceTime(250), takeUntil(this.destroy$))
+            .subscribe(term => {
+                this.router.navigate(['./'], {
+                    queryParams: {
+                        q: term || undefined,
+                    },
+                    queryParamsHandling: 'merge',
+                    relativeTo: this.route,
+                });
+            });
+
+        this.route.queryParamMap
+            .pipe(
+                map(qpm => qpm.get('q')),
+                distinctUntilChanged(),
+                takeUntil(this.destroy$),
+            )
             .subscribe(() => this.refresh());
             .subscribe(() => this.refresh());
+        this.filterTermControl.patchValue(this.route.snapshot.queryParamMap.get('q'));
     }
     }
 
 
     ngOnDestroy() {
     ngOnDestroy() {
@@ -155,15 +172,16 @@ export class CollectionListComponent implements OnInit, OnDestroy {
     }
     }
 
 
     private refresh() {
     private refresh() {
+        const filterTerm = this.route.snapshot.queryParamMap.get('q');
         this.queryResult.ref.refetch({
         this.queryResult.ref.refetch({
             options: {
             options: {
                 skip: 0,
                 skip: 0,
                 take: 1000,
                 take: 1000,
-                ...(this.filterTermControl.value
+                ...(filterTerm
                     ? {
                     ? {
                           filter: {
                           filter: {
                               name: {
                               name: {
-                                  contains: this.filterTermControl.value,
+                                  contains: filterTerm,
                               },
                               },
                           },
                           },
                       }
                       }