Merged PR 1585: #4169 #4170 #4140 #4182 Artikelsuche - Routing Navigation and Scrolling Bugfixes

#4169 #4170 #4140 #4182 Artikelsuche - Routing Navigation and Scrolling Bugfixes

apps/core/breadcrumb/src/lib/breadcrumb.service.ts

@@ -138,6 +138,6 @@ export class BreadcrumbService {
   getLatestBreadcrumbForSection(section: 'customer' | 'branch', predicate: (crumb: Breadcrumb) => boolean = (_) => true) {
     return this.store
       .select(selectors.selectBreadcrumbsBySection, { section })
-      .pipe(map((crumbs) => crumbs.sort((a, b) => b.changed - a.changed).find((f) => predicate(f))));
+      .pipe(map((crumbs) => crumbs.sort((a, b) => b.timestamp - a.timestamp).find((f) => predicate(f))));
   }
 }

apps/isa-app/src/app/guards/can-activate-customer-orders.guard.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from '@angular/router';
 import { ApplicationProcess, ApplicationService } from '@core/application';
 import { DomainCheckoutService } from '@domain/checkout';
 import { CustomerOrdersNavigationService } from '@shared/services';
@@ -10,8 +10,7 @@ export class CanActivateCustomerOrdersGuard implements CanActivate {
   constructor(
     private readonly _applicationService: ApplicationService,
     private readonly _checkoutService: DomainCheckoutService,
-    private readonly _navigationService: CustomerOrdersNavigationService,
-    private readonly _router: Router
+    private readonly _navigationService: CustomerOrdersNavigationService
   ) {}
 
   async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
@@ -37,7 +36,7 @@ export class CanActivateCustomerOrdersGuard implements CanActivate {
       await this.fromGoodsOutProcess(processes, route);
       return false;
     } else {
-      await this._router.navigate(this.getUrlFromSnapshot(route, ['/kunde', String(lastActivatedProcessId)]));
+      await this._navigationService.navigateToCustomerOrdersSearch({ processId: lastActivatedProcessId });
     }
 
     return false;
@@ -71,7 +70,7 @@ export class CanActivateCustomerOrdersGuard implements CanActivate {
     });
 
     // Navigation
-    await this._router.navigate(this.getUrlFromSnapshot(route, ['/kunde', String(processId)]));
+    await this._navigationService.navigateToCustomerOrdersSearch({ processId });
   }
 
   getUrlFromSnapshot(route: ActivatedRouteSnapshot, url: string[] = []): string[] {

apps/isa-app/src/app/guards/can-activate-product.guard.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from '@angular/router';
 import { ApplicationProcess, ApplicationService } from '@core/application';
 import { DomainCheckoutService } from '@domain/checkout';
 import { ProductCatalogNavigationService } from '@shared/services';
@@ -10,8 +10,7 @@ export class CanActivateProductGuard implements CanActivate {
   constructor(
     private readonly _applicationService: ApplicationService,
     private readonly _checkoutService: DomainCheckoutService,
-    private readonly _navigationService: ProductCatalogNavigationService,
-    private readonly _router: Router
+    private readonly _navigationService: ProductCatalogNavigationService
   ) {}
 
   async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
@@ -43,7 +42,7 @@ export class CanActivateProductGuard implements CanActivate {
       await this.fromCartProcess(processes);
       return false;
     } else {
-      await this._router.navigate(this.getUrlFromSnapshot(route, ['/kunde', String(lastActivatedProcessId)]));
+      await this._navigationService.navigateToProductSearch({ processId: lastActivatedProcessId });
     }
 
     return false;

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

@@ -51,9 +51,9 @@
   <cdk-virtual-scroll-viewport
     #scrollContainer
     class="product-list h-full"
-    [itemSize]="(mainOutletActive$ | async) ? 98 : 187"
-    minBufferPx="935"
-    maxBufferPx="1200"
+    [itemSize]="(mainOutletActive$ | async) ? 98 : 181"
+    minBufferPx="1200"
+    [maxBufferPx]="maxBufferCdkScrollContainer$ | async"
     (scrolledIndexChange)="scrolledIndexChange($event)"
   >
     <search-result-item

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

@@ -95,6 +95,20 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy, AfterVi
     return this._navigationService.getOutletLocations(this.route).right;
   }
 
+  // Ticket #4169 Splitscreen
+  // Render genug Artikel um bei Navigation auf Trefferliste | PDP zum angewählten Artikel zu Scrollen
+  maxBufferCdkScrollContainer$ = this.results$.pipe(
+    withLatestFrom(this.mainOutletActive$),
+    map(([results, mainOutlet]) => {
+      if (!mainOutlet && results?.length > 0) {
+        // Splitscreen mode: Items Length * Item Pixel Height
+        return results.length * 181;
+      } else {
+        return 1200;
+      }
+    })
+  );
+
   constructor(
     public searchService: ArticleSearchService,
     private route: ActivatedRoute,

apps/shared/shell/src/lib/top-bar/top-bar.component.ts

@@ -1,13 +1,11 @@
 import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';
-import { first, map, retry, take } from 'rxjs/operators';
+import { first, map, retry } from 'rxjs/operators';
 import { ShellService } from '../shell.service';
 import { BehaviorSubject } from 'rxjs';
 import { NotificationsHub } from '@hub/notifications';
 import { UiModalService } from '@ui/modal';
 import { ModalNotificationsComponent } from '@modal/notifications';
 import { ApplicationService } from '@core/application';
-import { BreadcrumbService } from '@core/breadcrumb';
-import { Router } from '@angular/router';
 import { StockService } from '@swagger/wws';
 import { AuthService } from '@core/auth';
 
@@ -39,39 +37,16 @@ export class ShellTopBarComponent implements OnInit {
     private _authService: AuthService,
     private readonly _notificationsHub: NotificationsHub,
     private _modal: UiModalService,
-    private _app: ApplicationService,
-    private _breadcrumb: BreadcrumbService,
-    private _router: Router
+    private _app: ApplicationService
   ) {}
 
   ngOnInit() {
     this._app.getSection$().subscribe(this.sectionSubject);
   }
 
-  getLatestActiveBreadcrumbForSection(section: 'customer' | 'branch') {
-    return this._breadcrumb.getLatestBreadcrumbForSection(section).pipe(take(1)).toPromise();
-  }
-
   toggleSideMenu() {
     this._shellService.toggleSideMenu();
   }
-
-  async toggleSection() {
-    const section = this.sectionSubject.value === 'customer' ? 'branch' : 'customer';
-    const breadcrumb = await this.getLatestActiveBreadcrumbForSection(section);
-    this._app.setSection(section);
-
-    if (breadcrumb) {
-      this._router.navigate([breadcrumb.path], { queryParams: breadcrumb.params });
-    } else {
-      if (section === 'customer') {
-        this._router.navigate(['/kunde']);
-      } else if (section === 'branch') {
-        this._router.navigate(['/filiale']);
-      }
-    }
-  }
-
   async openNotifications() {
     const notifications = await this.notifications$.pipe(first()).toPromise();
     this._modal.open({