Breakpoints Handling Improved

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

@@ -9,14 +9,15 @@
   </shared-branch-selector>
 </shared-breadcrumb>
 
-<ng-container *ngIf="!isDesktop; else desktop">
+<ng-container *ngIf="!(isDesktop$ | async); else desktop">
   <router-outlet></router-outlet>
 </ng-container>
 
 <ng-template #desktop>
   <router-outlet name="main"></router-outlet>
-  <div class="grid desktop:grid-cols-[31rem_auto] desktop:gap-6">
-    <div class="hidden desktop:block">
+
+  <div class="grid grid-cols-[31rem_auto] gap-6">
+    <div class="block">
       <router-outlet name="left"></router-outlet>
     </div>
 

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

@@ -1,13 +1,15 @@
 import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 import { ApplicationService } from '@core/application';
 import { AuthService } from '@core/auth';
 import { EnvironmentService } from '@core/environment';
 import { BranchSelectorComponent } from '@shared/components/branch-selector';
 import { BreadcrumbComponent } from '@shared/components/breadcrumb';
+import { ProductCatalogNavigationService } from '@shared/services';
 import { BranchDTO } from '@swagger/checkout';
 import { UiErrorModalComponent, UiModalService } from '@ui/modal';
 import { fromEvent, Observable, Subject } from 'rxjs';
-import { first, map, switchMap, takeUntil } from 'rxjs/operators';
+import { first, map, shareReplay, switchMap, takeUntil, withLatestFrom } from 'rxjs/operators';
 
 @Component({
   selector: 'page-catalog',
@@ -28,12 +30,20 @@ export class PageCatalogComponent implements OnInit, AfterViewInit, OnDestroy {
 
   _onDestroy$ = new Subject<boolean>();
 
-  get isTablet() {
-    return this._environmentService.matchTablet();
+  get isTablet$() {
+    return this._environmentService.matchTablet$.pipe(
+      map((state) => state.matches),
+      shareReplay()
+    );
   }
 
-  get isDesktop() {
-    return this._environmentService.matchDesktop();
+  get isDesktop$() {
+    return this._environmentService.matchDesktop$.pipe(
+      map((state) => {
+        return state.matches;
+      }),
+      shareReplay()
+    );
   }
 
   constructor(
@@ -41,11 +51,12 @@ export class PageCatalogComponent implements OnInit, AfterViewInit, OnDestroy {
     private _uiModal: UiModalService,
     public auth: AuthService,
     private _environmentService: EnvironmentService,
-    private _renderer: Renderer2
+    private _renderer: Renderer2,
+    private _navigation: ProductCatalogNavigationService,
+    private _activatedRoute: ActivatedRoute
   ) {}
 
   ngOnInit() {
-    // this.auth.getClaims();
     this.activatedProcessId$ = this.application.activatedProcessId$.pipe(map((processId) => String(processId)));
 
     this.selectedBranch$ = this.activatedProcessId$.pipe(switchMap((processId) => this.application.getSelectedBranch$(Number(processId))));
@@ -54,19 +65,19 @@ export class PageCatalogComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   ngAfterViewInit(): void {
-    if (this.isTablet) {
-      fromEvent(this.branchSelectorRef.nativeElement, 'focusin')
-        .pipe(takeUntil(this._onDestroy$))
-        .subscribe((_) => {
+    fromEvent(this.branchSelectorRef.nativeElement, 'focusin')
+      .pipe(takeUntil(this._onDestroy$), withLatestFrom(this.isTablet$))
+      .subscribe(([_, isTablet]) => {
+        if (isTablet) {
           this._renderer.setStyle(this.branchSelectorRef?.nativeElement, 'width', this.branchSelectorWidth);
-        });
+        }
+      });
 
-      fromEvent(this.branchSelectorRef.nativeElement, 'focusout')
-        .pipe(takeUntil(this._onDestroy$))
-        .subscribe((_) => {
-          this._renderer.removeStyle(this.branchSelectorRef?.nativeElement, 'width');
-        });
-    }
+    fromEvent(this.branchSelectorRef.nativeElement, 'focusout')
+      .pipe(takeUntil(this._onDestroy$))
+      .subscribe((_) => {
+        this._renderer.removeStyle(this.branchSelectorRef?.nativeElement, 'width');
+      });
   }
 
   ngOnDestroy(): void {

apps/shared/services/src/lib/navigation.service.ts

@@ -3,15 +3,11 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { EnvironmentService } from '@core/environment';
 import { NavigationDetails, OutletLocations, OutletParams } from './defs';
 import { BaseNavigationService } from './base-navigation.service';
-import { Observable } from 'rxjs';
-import { first, map } from 'rxjs/operators';
+import { Observable, combineLatest } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 @Injectable({ providedIn: 'root' })
 export class NavigationService extends BaseNavigationService {
-  get isDesktop() {
-    return this._environment.matchDesktop();
-  }
-
   constructor(private _router: Router, private _environment: EnvironmentService) {
     super();
   }
@@ -33,11 +29,16 @@ export class NavigationService extends BaseNavigationService {
   }
 
   mainOutletActive$(activatedRoute: ActivatedRoute): Observable<boolean> {
-    return this._environment.matchDesktopSmall$.pipe(map((state) => !!this.getOutletLocations(activatedRoute)?.main || state?.matches));
+    return combineLatest([this._environment.matchDesktopSmall$, this._environment.matchDesktop$]).pipe(
+      map(
+        ([desktopSmallState, desktopState]) =>
+          !!this.getOutletLocations(activatedRoute)?.main && (desktopSmallState.matches || desktopState.matches)
+      )
+    );
   }
 
   mainOutletActive(activatedRoute: ActivatedRoute): boolean {
-    return !!this.getOutletLocations(activatedRoute)?.main || this._environment.matchDesktopSmall();
+    return !!this.getOutletLocations(activatedRoute)?.main && (this._environment.matchDesktopSmall() || this._environment.matchDesktop());
   }
 
   protected async _navigateTo(navigation: NavigationDetails): Promise<boolean> {

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

@@ -11,44 +11,43 @@ export class ProductCatalogNavigationService extends NavigationService {
 
   getArticleSearchBasePath(processId?: number): any[] {
     if (!!processId) {
-      return this.isDesktop
-        ? ['/kunde', processId, 'product', { outlets: { main: null, left: 'search', right: 'filter' } }]
-        : ['/kunde', processId, 'product', 'search'];
+      return ['/kunde', processId, 'product', { outlets: { primary: 'search', main: null, left: 'search', right: 'filter' } }];
     } else {
-      return this.isDesktop
-        ? ['/kunde', 'product', { outlets: { main: null, left: 'search', right: 'filter' } }]
-        : ['/kunde', 'product', 'search'];
+      return ['/kunde', 'product', { outlets: { primary: 'search', main: null, left: 'search', right: 'filter' } }];
     }
   }
 
   getArticleSearchResultsPath(processId: number): any[] {
-    return this.isDesktop
-      ? ['/kunde', processId, 'product', { outlets: { main: 'results', left: null, right: null } }]
-      : ['/kunde', processId, 'product', 'results'];
+    return ['/kunde', processId, 'product', { outlets: { primary: 'results', main: 'results', left: null, right: null } }];
   }
 
   getArticleSearchResultsAndFilterPath({ processId, itemId }: { processId: number; itemId?: number }): any[] {
-    return this.isDesktop
-      ? ['/kunde', processId, 'product', { outlets: { main: null, left: 'results', right: itemId ? ['filter', itemId] : 'filter' } }]
-      : ['/kunde', processId, 'product', 'filter'];
+    return [
+      '/kunde',
+      processId,
+      'product',
+      { outlets: { primary: 'filter', main: null, left: 'results', right: itemId ? ['filter', itemId] : 'filter' } },
+    ];
   }
 
   getArticleDetailsPath({ processId, itemId, ean }: { processId: number; itemId?: number; ean?: string }): any[] {
     if (!!ean) {
-      return this.getArticleDetailsEanPath({ processId, ean });
+      return [
+        '/kunde',
+        processId,
+        'product',
+        { outlets: { primary: ['details', 'ean', ean], main: null, left: ['results', 'ean', ean], right: ['details', 'ean', ean] } },
+      ];
     } else {
-      return this.isDesktop
-        ? ['/kunde', processId, 'product', { outlets: { main: null, left: ['results', itemId], right: ['details', itemId] } }]
-        : ['/kunde', processId, 'product', 'details', itemId];
+      return [
+        '/kunde',
+        processId,
+        'product',
+        { outlets: { primary: ['details', itemId], main: null, left: ['results', itemId], right: ['details', itemId] } },
+      ];
     }
   }
 
-  getArticleDetailsEanPath({ processId, ean }: { processId: number; ean: string }): any[] {
-    return this.isDesktop
-      ? ['/kunde', processId, 'product', { outlets: { main: null, left: ['results', 'ean', ean], right: ['details', 'ean', ean] } }]
-      : ['/kunde', processId, 'product', 'details', 'ean', ean];
-  }
-
   async navigateToProductSearch({
     processId,
     queryParams,