Improved Routing and QueryParams handling

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

@@ -8,6 +8,8 @@ import { FocusSearchboxEvent } from './focus-searchbox.event';
 import { ArticleSearchMainAutocompleteProvider } from './providers';
 import { ProductCatalogNavigationService } from '@shared/services';
 import { FilterAutocompleteProvider } from 'apps/shared/components/filter/src/lib';
+import { isEqual } from 'lodash';
+import { EnvironmentService } from '@core/environment';
 
 @Component({
   selector: 'page-article-search',
@@ -27,11 +29,16 @@ export class ArticleSearchComponent implements OnInit, OnDestroy {
   private _onDestroy$ = new Subject();
   private _processId$: Observable<number>;
 
+  get isTablet() {
+    return this._environmentService.isTablet();
+  }
+
   constructor(
     private _breadcrumb: BreadcrumbService,
     private _articleSearch: ArticleSearchService,
     private _activatedRoute: ActivatedRoute,
-    private _navigationService: ProductCatalogNavigationService
+    private _navigationService: ProductCatalogNavigationService,
+    private _environmentService: EnvironmentService
   ) {}
 
   ngOnInit() {
@@ -48,14 +55,15 @@ export class ArticleSearchComponent implements OnInit, OnDestroy {
       .pipe(takeUntil(this._onDestroy$), withLatestFrom(this._processId$))
       .subscribe(([state, processId]) => {
         if (state.searchState === '') {
+          const params = state.filter.getQueryParams();
           if (state.hits === 1) {
             const item = state.items.find((f) => f);
             this._navigationService.navigateToDetails({
               processId,
               itemId: item.id,
+              queryParams: this.isTablet ? undefined : params,
             });
           } else {
-            const params = state.filter.getQueryParams();
             this._navigationService.navigateToResults({
               processId,
               queryParams: params,
@@ -65,6 +73,20 @@ export class ArticleSearchComponent implements OnInit, OnDestroy {
       });
   }
 
+  cleanupQueryParams(params: Record<string, string> = {}) {
+    const clean = { ...params };
+
+    for (const key in clean) {
+      if (Object.prototype.hasOwnProperty.call(clean, key)) {
+        if (clean[key] == undefined) {
+          delete clean[key];
+        }
+      }
+    }
+
+    return clean;
+  }
+
   initProcessId() {
     this._processId$ = this._activatedRoute.parent.data.pipe(map((data) => Number(data.processId)));
   }

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

@@ -90,14 +90,15 @@ export class ArticleSearchFilterComponent implements OnInit, OnDestroy {
       .pipe(takeUntil(this._onDestroy$), withLatestFrom(this._processId$))
       .subscribe(([state, processId]) => {
         if (state.searchState === '') {
-          if (state.hits === 1) {
+          const params = state.filter.getQueryParams();
+          if (state.hits === 1 && this.isTablet) {
             const item = state.items.find((f) => f);
             this._navigationService.navigateToDetails({
               processId,
               itemId: item.id,
+              queryParams: this.isTablet ? undefined : params,
             });
-          } else {
-            const params = state.filter.getQueryParams();
+          } else if (this.isTablet) {
             this._navigationService.navigateToResults({
               processId,
               queryParams: params,

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

@@ -11,7 +11,7 @@ import { UiErrorModalComponent, UiModalService } from '@ui/modal';
 import { CacheService } from 'apps/core/cache/src/public-api';
 import { isEqual } from 'lodash';
 import { BehaviorSubject, combineLatest, Subscription } from 'rxjs';
-import { debounceTime, first, map, switchMap } from 'rxjs/operators';
+import { debounceTime, first, map, switchMap, withLatestFrom } from 'rxjs/operators';
 import { ArticleSearchService } from '../article-search.store';
 import { AddedToCartModalComponent } from './added-to-cart-modal/added-to-cart-modal.component';
 import { SearchResultItemComponent } from './search-result-item.component';
@@ -152,6 +152,28 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy {
           await this.removeDetailsBreadcrumb(processId);
         })
     );
+
+    this.subscriptions.add(
+      this.searchService.searchCompleted.pipe(withLatestFrom(this.application.activatedProcessId$)).subscribe(([state, processId]) => {
+        if (state.searchState === '') {
+          console.log('WHAT');
+          const params = state.filter.getQueryParams();
+          if ((state.hits === 1 && this.isTablet) || !this.isOutletMain) {
+            const item = state.items.find((f) => f);
+            this._navigationService.navigateToDetails({
+              processId,
+              itemId: item.id,
+              queryParams: this.isTablet ? undefined : params,
+            });
+          } else if (this.isTablet || this.isOutletMain) {
+            this._navigationService.navigateToResults({
+              processId,
+              queryParams: params,
+            });
+          }
+        }
+      })
+    );
   }
 
   ngOnDestroy() {

apps/page/catalog/src/lib/page-catalog-routing.module.ts

@@ -74,12 +74,12 @@ const routes: Routes = [
             path: '',
             component: ArticleSearchMainComponent,
           },
-          {
-            path: 'results',
-            component: ArticleSearchResultsComponent,
-          },
         ],
       },
+      {
+        path: 'results',
+        component: ArticleSearchResultsComponent,
+      },
       {
         path: 'filter',
         component: ArticleSearchFilterComponent,

apps/shared/services/src/lib/product-catalog-navigation.service.ts

@@ -12,16 +12,18 @@ export class ProductCatalogNavigationService extends NavigationService {
   getArticleSearchBasePath(processId?: number): any[] {
     if (!!processId) {
       return this.isTablet
-        ? ['/kunde', processId, 'product']
+        ? ['/kunde', processId, 'product', 'search']
         : ['/kunde', processId, 'product', { outlets: { main: null, left: 'search', right: 'filter' } }];
     } else {
-      return this.isTablet ? ['/kunde', 'product'] : ['/kunde', 'product', { outlets: { main: null, left: 'search', right: 'filter' } }];
+      return this.isTablet
+        ? ['/kunde', 'product', 'search']
+        : ['/kunde', 'product', { outlets: { main: null, left: 'search', right: 'filter' } }];
     }
   }
 
   getArticleSearchResultsPath(processId: number): any[] {
     return this.isTablet
-      ? ['/kunde', processId, 'product', 'search', 'results']
+      ? ['/kunde', processId, 'product', 'results']
       : ['/kunde', processId, 'product', { outlets: { main: 'results', left: null, right: null } }];
   }
 

apps/shared/shell/src/lib/side-menu/side-menu.component.ts

@@ -88,7 +88,9 @@ export class ShellSideMenuComponent {
 
   async resetBranch() {
     const process = await this.activeProcess$.pipe(first()).toPromise();
-    this._app.patchProcessData(process.id, { selectedBranch: undefined });
+    if (!!process?.id) {
+      this._app.patchProcessData(process.id, { selectedBranch: undefined });
+    }
   }
 
   async createProcess() {