From 58d563429ebfd772763161b6014b36559bbfdb98 Mon Sep 17 00:00:00 2001 From: Michael Bromley Date: Tue, 14 Sep 2021 10:19:02 +0200 Subject: [PATCH] fix(admin-ui): Keep product search bar in sync with url params Fixes #1053 --- packages/admin-ui/package.json | 2 +- .../product-list/product-list.component.ts | 55 ++++++++++++------- .../product-search-input.component.ts | 2 +- .../asset-search-input.component.ts | 6 +- yarn.lock | 8 +-- 5 files changed, 43 insertions(+), 30 deletions(-) diff --git a/packages/admin-ui/package.json b/packages/admin-ui/package.json index a25a399ddd..d8dfe89293 100644 --- 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 index bfae7e5cc6..640bfe0b2b 100644 --- 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 - implements OnInit { + implements OnInit, AfterViewInit +{ searchTerm = ''; facetValueIds: string[] = []; groupByProduct = true; + selectedFacetValueIds$: Observable; facetValues$: Observable; availableLanguages$: Observable; contentLanguage$: Observable; @@ -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,26 +96,14 @@ 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() @@ -102,6 +111,12 @@ export class ProductListComponent .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/packages/admin-ui/src/lib/catalog/src/components/product-search-input/product-search-input.component.ts b/packages/admin-ui/src/lib/catalog/src/components/product-search-input/product-search-input.component.ts index fb22d60b91..23f64ec428 100644 --- a/packages/admin-ui/src/lib/catalog/src/components/product-search-input/product-search-input.component.ts +++ b/packages/admin-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/packages/admin-ui/src/lib/core/src/shared/components/asset-search-input/asset-search-input.component.ts b/packages/admin-ui/src/lib/core/src/shared/components/asset-search-input/asset-search-input.component.ts index 08f3388f90..0c77619af6 100644 --- a/packages/admin-ui/src/lib/core/src/shared/components/asset-search-input/asset-search-input.component.ts +++ b/packages/admin-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 index 70b4fa7ba2..96bbe2f442 100644 --- 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"