Merge branch 'feature/responsive-customer-orders' into feature/responsive-customer-orders-breakpoints

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

@@ -3,9 +3,9 @@ import { Platform } from '@angular/cdk/platform';
 import { NativeContainerService } from 'native-container';
 import { BreakpointObserver } from '@angular/cdk/layout';
 
-const MATCH_TABLET = '(max-width: 1023px)';
+const MATCH_TABLET = '(max-width: 1024px)';
 
-const MATCH_DESKTOP_SMALL = '(min-width: 1024px)';
+const MATCH_DESKTOP_SMALL = '(min-width: 1025px) and (max-width: 1439px)';
 
 const MATCH_DESKTOP = '(min-width: 1280px)';
 

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

@@ -3,10 +3,11 @@
   [class.pb-4]="!(mainOutletActive$ | async)"
   [class.flex-col]="!(mainOutletActive$ | async)"
 >
-  <div class="flex flex-row w-full desktop-small:w-min">
+  <div class="flex flex-row w-full desktop-small:w-min" [class.desktop:w-full]="!(mainOutletActive$ | async)">
     <shared-filter-input-group-main
       *ngIf="filter$ | async; let filter"
       class="block mr-3 w-full desktop-small:w-[23.5rem]"
+      [class.desktop:w-full]="!(mainOutletActive$ | async)"
       [hint]="searchboxHint$ | async"
       [loading]="fetching$ | async"
       [inputGroup]="filter?.input | group: 'main'"

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

@@ -9,19 +9,24 @@
   </shared-branch-selector>
 </shared-breadcrumb>
 
-<ng-container *ngIf="!isDesktop; else desktop">
-  <router-outlet></router-outlet>
+<ng-container *ngIf="routerEvents$ | async">
+  <ng-container *ngIf="!(isDesktop$ | async); else desktop">
+    <router-outlet></router-outlet>
+  </ng-container>
+
+  <ng-template #desktop>
+    <ng-container *ngIf="showMainOutlet$ | async">
+      <router-outlet name="main"></router-outlet>
+    </ng-container>
+
+    <div class="grid grid-cols-[minmax(31rem,.5fr)_1fr] gap-6">
+      <div *ngIf="showLeftOutlet$ | async" class="block">
+        <router-outlet name="left"></router-outlet>
+      </div>
+
+      <div *ngIf="showRightOutlet$ | async">
+        <router-outlet name="right"></router-outlet>
+      </div>
+    </div>
+  </ng-template>
 </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">
-      <router-outlet name="left"></router-outlet>
-    </div>
-
-    <div>
-      <router-outlet name="right"></router-outlet>
-    </div>
-  </div>
-</ng-template>

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

@@ -1,4 +1,5 @@
 import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 import { ApplicationService } from '@core/application';
 import { AuthService } from '@core/auth';
 import { EnvironmentService } from '@core/environment';
@@ -7,7 +8,7 @@ import { BreadcrumbComponent } from '@shared/components/breadcrumb';
 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,24 +29,41 @@ 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()
+    );
   }
 
+  routerEvents$ = this._router.events.pipe(shareReplay());
+
+  showMainOutlet$ = this.routerEvents$.pipe(map((_) => !!this._activatedRoute?.children?.find((child) => child?.outlet === 'main')));
+
+  showLeftOutlet$ = this.routerEvents$.pipe(map((_) => !!this._activatedRoute?.children?.find((child) => child?.outlet === 'left')));
+
+  showRightOutlet$ = this.routerEvents$.pipe(map((_) => !!this._activatedRoute?.children?.find((child) => child?.outlet === 'right')));
+
   constructor(
     public application: ApplicationService,
     private _uiModal: UiModalService,
     public auth: AuthService,
     private _environmentService: EnvironmentService,
-    private _renderer: Renderer2
+    private _renderer: Renderer2,
+    private _activatedRoute: ActivatedRoute,
+    private _router: Router
   ) {}
 
   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 +72,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,

apps/shared/shell/src/lib/shell.component.css

@@ -7,3 +7,9 @@
     @apply max-w-[2448px];
   }
 }
+
+@media (min-width: 1956px) {
+  .remove-padding {
+    @apply pr-0;
+  }
+}

tailwind.config.js

@@ -32,6 +32,12 @@ module.exports = {
         'card-sub': '20px',
         'page-heading': '26px',
       },
+      width: {
+        content: '120rem',
+      },
+      maxWidth: {
+        content: '120rem',
+      },
       spacing: {
         'cta-x-l': '25px',
         'cta-y-l': '20px',