fix(admin-ui): Keep product search bar in sync with url params

Fixes #1053
vendure-ecommerce · Sep 14, 2021 · 58d5634 · 58d5634
1 parent ffeeaf6
commit 58d5634
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 30 deletions.
diff --git a/packages/admin-ui/package.json b/packages/admin-ui/package.json
@@ -34,7 +34,7 @@
     "@clr/core": "^4.0.15",
     "@clr/icons": "^12.0.2",
     "@clr/ui": "^12.0.2",
-    "@ng-select/ng-select": "^6.1.0",
+    "@ng-select/ng-select": "^7.2.0",
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
     "@vendure/common": "^1.2.0",

diff --git a/packages/admin-ui/src/lib/catalog/src/components/product-list/product-list.component.ts b/packages/admin-ui/src/lib/catalog/src/components/product-list/product-list.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import {
@@ -36,10 +36,12 @@ import { ProductSearchInputComponent } from '../product-search-input/product-sea
 })
 export class ProductListComponent
     extends BaseListComponent<SearchProducts.Query, SearchProducts.Items, SearchProducts.Variables>
-    implements OnInit {
+    implements OnInit, AfterViewInit
+{
     searchTerm = '';
     facetValueIds: string[] = [];
     groupByProduct = true;
+    selectedFacetValueIds$: Observable<string[]>;
     facetValues$: Observable<SearchProducts.FacetValues[]>;
     availableLanguages$: Observable<LanguageCode[]>;
     contentLanguage$: Observable<LanguageCode>;
@@ -55,6 +57,25 @@ export class ProductListComponent
         route: ActivatedRoute,
     ) {
         super(router, route);
+        this.route.queryParamMap
+            .pipe(
+                map(qpm => qpm.get('q')),
+                takeUntil(this.destroy$),
+            )
+            .subscribe(term => {
+                this.searchTerm = term || '';
+                if (this.productSearchInput) {
+                    this.productSearchInput.setSearchTerm(term);
+                }
+            });
+        this.selectedFacetValueIds$ = this.route.queryParamMap.pipe(map(qpm => qpm.getAll('fvids')));
+
+        this.selectedFacetValueIds$.pipe(takeUntil(this.destroy$)).subscribe(ids => {
+            this.facetValueIds = ids;
+            if (this.productSearchInput) {
+                this.productSearchInput.setFacetValues(ids);
+            }
+        });
         super.setQueryFn(
             (...args: any[]) =>
                 this.dataService.product.searchProducts(this.searchTerm, ...args).refetchOnChannelChange(),
@@ -75,33 +96,27 @@ export class ProductListComponent
 
     ngOnInit() {
         super.ngOnInit();
-        this.facetValues$ = this.result$.pipe(map(data => data.search.facetValues));
-        // this.facetValues$ = of([]);
-        this.route.queryParamMap
-            .pipe(
-                map(qpm => qpm.get('q')),
-                takeUntil(this.destroy$),
-            )
-            .subscribe(term => {
-                this.productSearchInput.setSearchTerm(term);
-            });
-
-        const fvids$ = this.route.queryParamMap.pipe(map(qpm => qpm.getAll('fvids')));
 
-        fvids$.pipe(takeUntil(this.destroy$)).subscribe(ids => {
-            this.productSearchInput.setFacetValues(ids);
-        });
+        this.facetValues$ = this.result$.pipe(map(data => data.search.facetValues));
 
-        this.facetValues$.pipe(take(1), delay(100), withLatestFrom(fvids$)).subscribe(([__, ids]) => {
-            this.productSearchInput.setFacetValues(ids);
-        });
+        this.facetValues$
+            .pipe(take(1), delay(100), withLatestFrom(this.selectedFacetValueIds$))
+            .subscribe(([__, ids]) => {
+                this.productSearchInput.setFacetValues(ids);
+            });
         this.availableLanguages$ = this.serverConfigService.getAvailableLanguages();
         this.contentLanguage$ = this.dataService.client
             .uiState()
             .mapStream(({ uiState }) => uiState.contentLanguage)
             .pipe(tap(() => this.refresh()));
     }
 
+    ngAfterViewInit() {
+        if (this.productSearchInput && this.searchTerm) {
+            setTimeout(() => this.productSearchInput.setSearchTerm(this.searchTerm));
+        }
+    }
+
     setSearchTerm(term: string) {
         this.searchTerm = term;
         this.setQueryParam({ q: term || null, page: 1 });

diff --git a/...-ui/src/lib/catalog/src/components/product-search-input/product-search-input.component.ts b/...-ui/src/lib/catalog/src/components/product-search-input/product-search-input.component.ts
@@ -39,7 +39,7 @@ export class ProductSearchInputComponent {
         });
 
         ids.map(id => {
-            return items.find(item => this.isFacetValueItem(item) && item.facetValue.id === id);
+            return items?.find(item => this.isFacetValueItem(item) && item.facetValue.id === id);
         })
             .filter(notNullOrUndefined)
             .forEach(item => {

diff --git a/...-ui/src/lib/core/src/shared/components/asset-search-input/asset-search-input.component.ts b/...-ui/src/lib/core/src/shared/components/asset-search-input/asset-search-input.component.ts
@@ -41,7 +41,7 @@ export class AssetSearchInputComponent {
         });
 
         tags.map(tag => {
-            return items.find(item => this.isTag(item) && item.id === tag.id);
+            return items?.find(item => this.isTag(item) && item.id === tag.id);
         })
             .filter(notNullOrUndefined)
             .forEach(item => {
@@ -77,9 +77,7 @@ export class AssetSearchInputComponent {
             }
         }
 
-        const searchTermItem = searchTermItems[searchTermItems.length - 1] as
-            | { label: string }
-            | undefined;
+        const searchTermItem = searchTermItems[searchTermItems.length - 1] as { label: string } | undefined;
 
         const searchTerm = searchTermItem ? searchTermItem.label : '';
 

diff --git a/yarn.lock b/yarn.lock
@@ -3256,10 +3256,10 @@
   dependencies:
     uuid "8.3.1"
 
-"@ng-select/ng-select@^6.1.0":
-  version "6.1.0"
-  resolved "https://registry.npmjs.org/@ng-select/ng-select/-/ng-select-6.1.0.tgz#c0575d963a1871dcf72d38186598c7c71d26dd49"
-  integrity sha512-uro/zIjL+TRWzbrzNN9IjIusOeLfhCn9cIr5Bq3AsJyxyU7Gdj9kOD5wVrrQ0NVkaQ1BJMcWmUvmYGBXLI6cnA==
+"@ng-select/ng-select@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.npmjs.org/@ng-select/ng-select/-/ng-select-7.2.0.tgz#5f496fdbe1de238f49c79ff714350113c09419d7"
+  integrity sha512-o4A8DAIV36lOy3xzIE0cYH5psACcIYDOfU3XzQQ+/WCKO1ChNH0cXUWtOAI1B/AF1yW/NpADxPPbFcrknAuYaA==
   dependencies:
     tslib "^2.0.0"