Merged PR 669: #1797 Filter Suche ohne Treffer

#1797 Filter Suche ohne Treffer

Related work items: #1797

apps/page/catalog/src/lib/article-search/article-search.component.html

@@ -3,7 +3,7 @@
   <span class="label">Filter</span>
 </button>
 
-<ng-container *ngIf="showMainContent$ | async">
+<ng-container>
   <router-outlet></router-outlet>
 </ng-container>
 

apps/page/catalog/src/lib/article-search/article-search.store.ts

@@ -188,6 +188,7 @@ export class ArticleSearchStore extends ComponentStore<ArticleSearchState> {
                 if (empty) {
                   if (items.length === 0) {
                     this.setSearchState({ searchState: 'empty' });
+                    this.router.navigate(['/product/search']);
                   } else {
                     this.setSearchState({ searchState: '' });
                     this.searchHistory();

apps/page/catalog/src/lib/article-search/containers/article-searchbox/article-searchbox.component.ts

@@ -43,7 +43,7 @@ export class ArticleSearchboxComponent implements OnInit, OnDestroy {
   readonly autocomplete$ = this.articleSearchStore.selectAutocomplete$;
 
   isMobile: boolean;
-  scanSubscription: Subscription;
+  subscriptions = new Subscription();
 
   @Output() closeFilterOverlay = new EventEmitter<void>();
 
@@ -94,9 +94,7 @@ export class ArticleSearchboxComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    if (!!this.scanSubscription) {
-      this.scanSubscription.unsubscribe();
-    }
+    this.subscriptions.unsubscribe();
   }
 
   async startSearch() {
@@ -104,16 +102,25 @@ export class ArticleSearchboxComponent implements OnInit, OnDestroy {
       return this.scan();
     }
     this.articleSearchStore.search({ empty: true });
-    this.closeFilterOverlay.emit();
+
+    this.subscriptions.add(
+      this.articleSearchStore.selectSearchState$.subscribe((state) => {
+        if (state !== 'fetching' && state !== 'empty') {
+          this.closeFilterOverlay.emit();
+        }
+      })
+    );
   }
 
   scan() {
-    this.scanSubscription = this.nativeContainer
-      .openScanner('scanBook')
-      .pipe(filter((message) => message.status !== 'IN_PROGRESS'))
-      .subscribe((result) => {
-        this.articleSearchStore.setQuery({ query: result?.data });
-      });
+    this.subscriptions.add(
+      this.nativeContainer
+        .openScanner('scanBook')
+        .pipe(filter((message) => message.status !== 'IN_PROGRESS'))
+        .subscribe((result) => {
+          this.articleSearchStore.setQuery({ query: result?.data });
+        })
+    );
   }
 
   reset() {

apps/page/catalog/src/lib/article-search/search-filter/search-filter.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
 import { Filter } from '@ui/filter';
-import { BehaviorSubject } from 'rxjs';
-import { first, map, shareReplay } from 'rxjs/operators';
+import { BehaviorSubject, Subscription } from 'rxjs';
+import { first, map } from 'rxjs/operators';
 import { ArticleSearchStore } from '../article-search.store';
 
 @Component({
@@ -16,10 +16,13 @@ export class ArticleSearchFilterComponent implements OnInit, OnDestroy {
 
   readonly filters$ = this.articleSearchStore.selectFilter$;
   readonly initialFilters$ = this.articleSearchStore.selectInitialFilter$;
+  readonly searchState$ = this.articleSearchStore.selectSearchState$;
 
   /* @internal */
   updateFilterCategory$ = new BehaviorSubject<Filter>(undefined);
 
+  isDefaultState$ = this.searchState$.pipe(map((searchState) => searchState !== 'fetching' && searchState !== 'empty'));
+
   @Input()
   get updateFilterCategory(): Filter {
     return this.updateFilterCategory$.value;
@@ -31,6 +34,8 @@ export class ArticleSearchFilterComponent implements OnInit, OnDestroy {
 
   filterChanges: Filter[];
 
+  searchStateSubscription: Subscription;
+
   constructor(private cdr: ChangeDetectorRef, private articleSearchStore: ArticleSearchStore) {}
 
   async ngOnInit() {
@@ -40,6 +45,10 @@ export class ArticleSearchFilterComponent implements OnInit, OnDestroy {
   ngOnDestroy() {
     const filter = this.filterChanges;
     this.articleSearchStore.setFilter({ filter });
+
+    if (!!this.searchStateSubscription) {
+      this.searchStateSubscription.unsubscribe();
+    }
   }
 
   closeOverlay() {
@@ -49,7 +58,12 @@ export class ArticleSearchFilterComponent implements OnInit, OnDestroy {
   async applyFilters() {
     this.filterChanges = await this.filters$.pipe(first()).toPromise();
     this.articleSearchStore.search({ empty: true });
-    this.closeOverlay();
+
+    this.searchStateSubscription = this.articleSearchStore.selectSearchState$.subscribe((state) => {
+      if (state !== 'fetching' && state !== 'empty') {
+        this.closeOverlay();
+      }
+    });
   }
 
   updateCategory(filter: Filter) {

apps/page/catalog/src/lib/article-search/search-results/search-results.component.ts

@@ -69,17 +69,36 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy, AfterVi
     );
 
     this.subscriptions.add(
-      combineLatest([this.store.selectQuery$, this.store.hits$]).subscribe(([query, hits]) => {
-        this.breadcrumb.addBreadcrumbIfNotExists({
-          key: this.application.activatedProcessId,
-          name: `${query.query} (${hits} Ergebnisse)`,
-          path: this.router.url.split('?')[0],
-          params: {
-            ...this.route.snapshot.queryParams,
-            scrollPos: this.scrollPositionService.scrollPosition,
-          },
-          tags: ['catalog', 'results'],
-        });
+      combineLatest([this.store.selectQuery$, this.store.hits$]).subscribe(async ([query, hits]) => {
+        const breadcrumbs = await this.breadcrumb
+          .getBreadcrumbsByKeyAndTags$(this.application.activatedProcessId, ['catalog', 'results'])
+          .pipe(first())
+          .toPromise();
+
+        if (breadcrumbs?.length > 0) {
+          breadcrumbs?.forEach((breadcrumb) =>
+            this.breadcrumb.patchBreadcrumb(breadcrumb.id, {
+              name: `${query.query} (${hits} Ergebnisse)`,
+              path: this.router.url.split('?')[0],
+              params: {
+                ...this.route.snapshot.queryParams,
+                scrollPos: this.scrollPositionService.scrollPosition,
+              },
+              tags: ['catalog', 'results'],
+            })
+          );
+        } else {
+          this.breadcrumb.addBreadcrumbIfNotExists({
+            key: this.application.activatedProcessId,
+            name: `${query.query} (${hits} Ergebnisse)`,
+            path: this.router.url.split('?')[0],
+            params: {
+              ...this.route.snapshot.queryParams,
+              scrollPos: this.scrollPositionService.scrollPosition,
+            },
+            tags: ['catalog', 'results'],
+          });
+        }
       })
     );
   }