Article Search and Customer Order Filter Navigation Update Based on previous Routes, Updated Routing on Tablet

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

@@ -1,24 +1,14 @@
 <ng-container *ngIf="filter$ | async; let filter">
   <div class="catalog-search-filter-content">
-    <button *ngIf="isTablet; else desktop" class="btn-close" type="button" (click)="close.emit()">
+    <!-- <button *ngIf="isTablet; else desktop" class="btn-close" type="button" (click)="close.emit()">
       <ui-icon icon="close" size="20px"></ui-icon>
-    </button>
+    </button> -->
 
-    <ng-template #desktop>
-      <a
-        class="btn-close"
-        type="button"
-        [routerLink]="[
-          '/kunde',
-          application.activatedProcessId,
-          'product',
-          { outlets: { main: null, left: 'results', right: ['details', item?.id] } }
-        ]"
-        queryParamsHandling="preserve"
-      >
-        <ui-icon icon="close" size="20px"></ui-icon>
-      </a>
-    </ng-template>
+    <!-- <ng-template #desktop> -->
+    <a class="btn-close" type="button" [routerLink]="closeFilterRouterPath" queryParamsHandling="preserve">
+      <ui-icon icon="close" size="20px"></ui-icon>
+    </a>
+    <!-- </ng-template> -->
 
     <div class="catalog-search-filter-content-main">
       <h1 class="text-3xl font-bold text-center py-4">Filter</h1>

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

@@ -5,6 +5,7 @@ import { UiFilter, UiFilterComponent } from '@ui/filter';
 import { Observable } from 'rxjs';
 import { map, take } from 'rxjs/operators';
 import { ArticleSearchService } from '../article-search.store';
+import { ActivatedRoute, Params } from '@angular/router';
 
 @Component({
   selector: 'page-article-search-filter',
@@ -29,13 +30,35 @@ export class ArticleSearchFilterComponent implements OnInit {
     return this._environment.isTablet();
   }
 
-  get item() {
-    return this.articleSearch.items.find((_) => true);
+  get leftOutletLocation(): string {
+    return this._activatedRoute?.parent?.children?.find((childRoute) => childRoute?.outlet === 'left')?.snapshot?.routeConfig?.path ?? '';
+  }
+
+  get rightOutletParams(): Params {
+    return this._activatedRoute?.parent?.children?.find((childRoute) => childRoute?.outlet === 'right')?.snapshot?.params;
+  }
+
+  get closeFilterRouterPath() {
+    if (!this.isTablet) {
+      if (this.leftOutletLocation.includes('results')) {
+        const id = this.rightOutletParams?.id;
+        return [
+          '/kunde',
+          this.application.activatedProcessId,
+          'product',
+          { outlets: { main: null, left: 'results', right: ['details', id] } },
+        ];
+      }
+      return ['/kunde', this.application.activatedProcessId, 'product', { outlets: { main: null, left: 'search', right: 'filter' } }];
+    } else {
+      return ['/kunde', this.application.activatedProcessId, 'product', 'search', 'results'];
+    }
   }
 
   constructor(
     private articleSearch: ArticleSearchService,
     private _environment: EnvironmentService,
+    private _activatedRoute: ActivatedRoute,
     public application: ApplicationService
   ) {}
 

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

@@ -2,7 +2,7 @@
   <a
     [class.active]="hasFilter$ | async"
     class="page-search-results__filter h-14 rounded-card font-bold px-5 mb-4 text-lg bg-cadet-blue flex flex-row flex-nowrap items-center justify-center"
-    [routerLink]="['/kunde', application.activatedProcessId, 'product', { outlets: { main: null, left: 'results', right: 'filter' } }]"
+    [routerLink]="filterRoute"
     queryParamsHandling="preserve"
   >
     <ui-svg-icon class="mr-2" icon="filter-variant"></ui-svg-icon>

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

@@ -1,6 +1,6 @@
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { Component, ChangeDetectionStrategy, OnInit, OnDestroy, ViewChild, ViewChildren, QueryList, TrackByFunction } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Params } from '@angular/router';
 import { ApplicationService } from '@core/application';
 import { BreadcrumbService } from '@core/breadcrumb';
 import { EnvironmentService } from '@core/environment';
@@ -62,6 +62,24 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy {
     map(([filter, initialFilter]) => !isEqual(filter?.getQueryParams(), initialFilter?.getQueryParams()))
   );
 
+  get rightOutletParams(): Params {
+    return this.route?.parent?.children?.find((childRoute) => childRoute?.outlet === 'right')?.snapshot?.params;
+  }
+
+  get filterRoute() {
+    if (!this.isTablet) {
+      const id = this.rightOutletParams?.id;
+      return [
+        '/kunde',
+        this.application.activatedProcessId,
+        'product',
+        { outlets: { main: null, left: 'results', right: ['filter', id] } },
+      ];
+    } else {
+      return ['/kunde', this.application.activatedProcessId, 'product', 'filter'];
+    }
+  }
+
   constructor(
     public searchService: ArticleSearchService,
     private route: ActivatedRoute,

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

@@ -24,6 +24,11 @@ const auxiliaryRoutes = [
     component: ArticleSearchFilterComponent,
     outlet: 'right',
   },
+  {
+    path: 'filter/:id',
+    component: ArticleSearchFilterComponent,
+    outlet: 'right',
+  },
   {
     path: 'results',
     component: ArticleSearchResultsComponent,
@@ -70,6 +75,10 @@ const routes: Routes = [
           },
         ],
       },
+      {
+        path: 'filter',
+        component: ArticleSearchFilterComponent,
+      },
       {
         path: 'details/ean/:ean',
         component: ArticleDetailsComponent,

apps/page/customer-order/src/lib/customer-order-routing.module.ts

@@ -24,6 +24,16 @@ const auxiliaryRoutes = [
     component: CustomerOrderSearchFilterComponent,
     outlet: 'right',
   },
+  {
+    path: 'filter/:compartmentCode/:processingStatus',
+    component: CustomerOrderSearchFilterComponent,
+    outlet: 'right',
+  },
+  {
+    path: 'filter/:orderNumber/:processingStatus',
+    component: CustomerOrderSearchFilterComponent,
+    outlet: 'right',
+  },
   {
     path: 'results',
     component: CustomerOrderSearchResultsComponent,
@@ -69,6 +79,10 @@ const routes: Routes = [
           { path: 'results', component: CustomerOrderSearchResultsComponent },
         ],
       },
+      {
+        path: 'filter',
+        component: CustomerOrderSearchFilterComponent,
+      },
       {
         path: 'details/compartment/:compartmentCode/:processingStatus',
         component: CustomerOrderDetailsComponent,

apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/customer-order-search-filter.component.html

@@ -1,19 +1,14 @@
 <ng-container *ngIf="filter$ | async; let filter">
   <div class="goods-out-search-filter-content">
-    <button *ngIf="isTablet; else desktop" class="btn-close" type="button" (click)="close.emit()">
+    <!-- <button *ngIf="isTablet; else desktop" class="btn-close" type="button" (click)="close.emit()">
       <ui-icon icon="close" size="20px"></ui-icon>
-    </button>
+    </button> -->
 
-    <ng-template #desktop>
-      <a
-        class="btn-close"
-        type="button"
-        [routerLink]="['/kunde', application.activatedProcessId, 'order', { outlets: { main: null, left: 'search', right: 'filter' } }]"
-        queryParamsHandling="preserve"
-      >
-        <ui-icon icon="close" size="20px"></ui-icon>
-      </a>
-    </ng-template>
+    <!-- <ng-template #desktop> -->
+    <a class="btn-close" type="button" [routerLink]="closeFilterRouterPath" queryParamsHandling="preserve">
+      <ui-icon icon="close" size="20px"></ui-icon>
+    </a>
+    <!-- </ng-template> -->
 
     <div class="goods-out-search-filter-content-main">
       <h1 class="title">Filter</h1>

apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/customer-order-search-filter.component.ts

@@ -9,7 +9,7 @@ import {
   Input,
   ViewChild,
 } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Params, Router } from '@angular/router';
 import { BreadcrumbService } from '@core/breadcrumb';
 import { OrderItemListItemDTO } from '@swagger/oms';
 import { UiFilter, UiFilterComponent } from '@ui/filter';
@@ -47,19 +47,58 @@ export class CustomerOrderSearchFilterComponent implements OnInit, OnDestroy {
 
   filter$: Observable<UiFilter>;
 
+  get leftOutletLocation(): string {
+    return this._activatedRoute?.parent?.children?.find((childRoute) => childRoute?.outlet === 'left')?.snapshot?.routeConfig?.path ?? '';
+  }
+
+  get rightOutletParams(): Params {
+    return this._activatedRoute?.parent?.children?.find((childRoute) => childRoute?.outlet === 'right')?.snapshot?.params;
+  }
+
+  get closeFilterRouterPath() {
+    if (!this.isTablet) {
+      if (this.leftOutletLocation.includes('results')) {
+        const params = this.rightOutletParams;
+        const orderNumber = params?.orderNumber;
+        const compartmentCode = params?.compartmentCode;
+        const processingStatus = params?.processingStatus;
+        return orderNumber
+          ? [
+              '/kunde',
+              this.application.activatedProcessId,
+              'order',
+              { outlets: { main: null, left: 'results', right: ['details', 'order', orderNumber, processingStatus] } },
+            ]
+          : [
+              '/kunde',
+              this.application.activatedProcessId,
+              'order',
+              {
+                outlets: {
+                  main: null,
+                  left: 'results',
+                  right: ['details', 'compartment', compartmentCode, processingStatus],
+                },
+              },
+            ];
+      }
+      return ['/kunde', this.application.activatedProcessId, 'order', { outlets: { main: null, left: 'search', right: 'filter' } }];
+    } else {
+      return ['/kunde', this.application.activatedProcessId, 'order', 'results'];
+    }
+  }
+
   constructor(
     private _goodsOutSearchStore: CustomerOrderSearchStore,
     private _breadcrumb: BreadcrumbService,
     private _cdr: ChangeDetectorRef,
     private _router: Router,
-    private _activatedRoute: ActivatedRoute,
     private _environment: EnvironmentService,
+    private _activatedRoute: ActivatedRoute,
     public application: ApplicationService
   ) {}
 
   ngOnInit() {
-    // console.log(this._router, this._router.routerState.snapshot.url);
-
     this._initSettings();
     this._initLoading$();
   }

apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.component.html

@@ -1,6 +1,27 @@
-<div class="hits">{{ hits$ | async }} Titel</div>
+<div class="page-customer-order-search-results__header bg-background-liste flex flex-col items-end pb-4">
+  <a
+    [class.active]="hasFilter$ | async"
+    class="page-customer-order-search-results__filter h-14 rounded-card font-bold px-5 mb-4 text-lg bg-cadet-blue flex flex-row flex-nowrap items-center justify-center"
+    [routerLink]="filterRoute"
+    queryParamsHandling="preserve"
+  >
+    <ui-svg-icon class="mr-2" icon="filter-variant"></ui-svg-icon>
+    Filter
+  </a>
+
+  <div
+    *ngIf="hits$ | async; let hits"
+    class="page-customer-order-search-results__items-count inline-flex flex-row items-center pr-5 text-sm"
+  >
+    {{ hits ??
+      0 }}
+    Titel
+  </div>
+</div>
+
 <ui-scroll-container
   *ngIf="!(listEmpty$ | async); else emptyMessage"
+  [showScrollbar]="false"
   [loading]="loading$ | async"
   (reachEnd)="loadMore()"
   [deltaEnd]="150"

apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.component.scss

@@ -2,10 +2,6 @@
   @apply block relative;
 }
 
-.hits {
-  @apply text-active-customer text-right mb-3 font-semibold text-base;
-}
-
 .empty-message {
   @apply bg-white text-center font-semibold text-inactive-customer py-10 rounded-card;
 }

apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.component.ts

@@ -1,7 +1,7 @@
 import { Component, ChangeDetectionStrategy, OnInit, OnDestroy, ViewChild, TrackByFunction } from '@angular/core';
-import { debounceTime, first, map, shareReplay, takeUntil, withLatestFrom } from 'rxjs/operators';
+import { debounceTime, filter, first, map, shareReplay, takeUntil, withLatestFrom } from 'rxjs/operators';
 import { KeyValueDTOOfStringAndString, OrderItemListItemDTO } from '@swagger/oms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, ChildrenOutletContexts, Params, Router } from '@angular/router';
 import { CustomerOrderSearchStore } from '../customer-order-search.store';
 import { BehaviorSubject, combineLatest, Observable, Subject, Subscription } from 'rxjs';
 import { BreadcrumbService } from '@core/breadcrumb';
@@ -12,6 +12,7 @@ import { UiErrorModalComponent, UiModalService } from '@ui/modal';
 import { UiScrollContainerComponent } from '@ui/scroll-container';
 import { UiFilter } from '@ui/filter';
 import { EnvironmentService } from '@core/environment';
+import { isEqual } from 'lodash';
 
 export interface CustomerOrderSearchResultsState {
   selectedOrderItemSubsetIds: number[];
@@ -81,10 +82,43 @@ export class CustomerOrderSearchResultsComponent extends ComponentStore<Customer
 
   scrollTo: number;
 
+  filter$ = this._goodsOutSearchStore.filter$;
+
+  initialFilter$ = this.filter$.pipe(
+    filter((filter) => !!filter),
+    first()
+  );
+
+  hasFilter$ = this.filter$.pipe(
+    withLatestFrom(this.initialFilter$),
+    map(([filter, initialFilter]) => !isEqual(filter?.getQueryParams(), initialFilter?.getQueryParams()))
+  );
+
   get isTablet() {
     return this._environment.isTablet();
   }
 
+  get rightOutletParams(): Params {
+    return this._activatedRoute?.parent?.children?.find((childRoute) => childRoute?.outlet === 'right')?.snapshot?.params;
+  }
+
+  get filterRoute() {
+    const processId = this._activatedRoute?.parent?.snapshot?.data?.processId;
+    if (!this.isTablet) {
+      const orderNumber = this.rightOutletParams?.orderNumber;
+      const compartmentCode = this.rightOutletParams?.compartmentCode;
+      const processingStatus = this.rightOutletParams?.processingStatus;
+      return [
+        '/kunde',
+        processId,
+        'order',
+        { outlets: { main: null, left: 'results', right: ['filter', orderNumber ?? compartmentCode, processingStatus] } },
+      ];
+    } else {
+      return ['/kunde', processId, 'order', 'filter'];
+    }
+  }
+
   constructor(
     private _goodsOutSearchStore: CustomerOrderSearchStore,
     private _router: Router,

apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.module.ts

@@ -8,9 +8,11 @@ import { CustomerOrderItemSelectablePipe } from './customer-order-item-selectabl
 import { CustomerOrderItemSelectedPipe } from './customer-order-item-selectede.pipe';
 import { UiSpinnerModule } from 'apps/ui/spinner/src/lib/ui-spinner.module';
 import { UiScrollContainerModule } from '@ui/scroll-container';
+import { UiIconModule } from '@ui/icon';
+import { RouterModule } from '@angular/router';
 
 @NgModule({
-  imports: [CommonModule, GoodsInOutOrderGroupModule, UiCommonModule, UiSpinnerModule, UiScrollContainerModule],
+  imports: [CommonModule, RouterModule, GoodsInOutOrderGroupModule, UiCommonModule, UiIconModule, UiSpinnerModule, UiScrollContainerModule],
   exports: [CustomerOrderSearchResultsComponent],
   declarations: [CustomerOrderSearchResultsComponent, CustomerOrderItemSelectablePipe, CustomerOrderItemSelectedPipe],
 })