Set correct Breadcrumb for PDP when originating from dashboard

apps/sales/src/app/modules/dashboard/components/book-card/book-card.component.ts

@@ -1,8 +1,23 @@
-import { Component, OnInit, Input, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, ElementRef, HostListener } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  Input,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ViewChild,
+  ElementRef,
+  HostListener,
+} from '@angular/core';
 import { FeedCard } from '../../../../core/models/feed-card.model';
 import { Breadcrumb } from '../../../../core/models/breadcrumb.model';
-import { AddBreadcrumb } from '../../../../core/store/actions/breadcrumb.actions';
-import { ChangeCurrentRoute, AddProcess } from '../../../../core/store/actions/process.actions';
+import {
+  AddBreadcrumb,
+  PopBreadcrumbsBeforeCurrent,
+} from '../../../../core/store/actions/breadcrumb.actions';
+import {
+  ChangeCurrentRoute,
+  AddProcess,
+} from '../../../../core/store/actions/process.actions';
 import { Store, Select } from '@ngxs/store';
 import { Router } from '@angular/router';
 import { Process } from '../../../../core/models/process.model';
@@ -14,7 +29,7 @@ import { WindowRef } from 'apps/sales/src/app/core/services/window-ref.service';
   selector: 'app-book-card',
   templateUrl: './book-card.component.html',
   styleUrls: ['./book-card.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BookCardComponent implements OnInit {
   @ViewChild('books', { read: ElementRef }) public books: ElementRef<any>;
@@ -29,7 +44,12 @@ export class BookCardComponent implements OnInit {
   showBackContainer = false;
   offset: number;
 
-  constructor(private store: Store, private router: Router, private cdrf: ChangeDetectorRef, private windowRef: WindowRef) {}
+  constructor(
+    private store: Store,
+    private router: Router,
+    private cdrf: ChangeDetectorRef,
+    private windowRef: WindowRef
+  ) {}
 
   ngOnInit() {
     this.isIPad = this.isIPadEnv();
@@ -45,26 +65,38 @@ export class BookCardComponent implements OnInit {
   }
 
   details(ean: string, name: string) {
-    const processExist = this.store.selectSnapshot(ProcessSelectors.getProcesses).length > 0;
+    const processExist =
+      this.store.selectSnapshot(ProcessSelectors.getProcesses).length > 0;
     if (!processExist) {
       this.createProcess();
     }
 
-    const newBread: Breadcrumb = {
-      name: name.substring(0, 12) + (name.length > 12 ? '...' : ''),
-      path: '/product/details/' + ean,
-      queryParams: { type: 'ean' }
+    const dashboardBread = {
+      name: 'Dashboard',
+      path: '/dashboard',
     };
 
+    const path = '/product/details/' + ean;
+    const queryParams = { type: 'ean' };
+    const newBread: Breadcrumb = {
+      name: name.substring(0, 12) + (name.length > 12 ? '...' : ''),
+      path,
+      queryParams,
+    };
+
+    this.store.dispatch(new PopBreadcrumbsBeforeCurrent('product'));
+    this.store.dispatch(new AddBreadcrumb(dashboardBread, 'product'));
     this.store.dispatch(new AddBreadcrumb(newBread, 'product'));
-    this.store.dispatch(new ChangeCurrentRoute('/product/details/' + ean, false, { type: 'ean' }));
-    this.router.navigate(['/product/details/' + ean], { queryParams: { type: 'ean' } });
+    this.store.dispatch(new ChangeCurrentRoute(path, false, queryParams));
+    this.router.navigate([path], {
+      queryParams,
+    });
   }
 
   createProcess() {
     const newProcess = <Process>{
       id: 1,
-      name: 'Vorgang 1'
+      name: 'Vorgang 1',
     };
     this.store.dispatch(new AddProcess(newProcess));
   }
@@ -79,7 +111,11 @@ export class BookCardComponent implements OnInit {
 
   hideFowardIcon(event) {
     const e = event.toElement || event.relatedTarget;
-    if (e && e.classList && (e.classList[0] === 'icon' || e.classList[0] === 'ng-star-inserted')) {
+    if (
+      e &&
+      e.classList &&
+      (e.classList[0] === 'icon' || e.classList[0] === 'ng-star-inserted')
+    ) {
       return;
     }
     this.showForward = false;
@@ -91,7 +127,11 @@ export class BookCardComponent implements OnInit {
 
   hideBackIcon(event) {
     const e = event.toElement || event.relatedTarget;
-    if (e && e.classList && (e.classList[0] === 'icon' || e.classList[0] === 'ng-star-inserted')) {
+    if (
+      e &&
+      e.classList &&
+      (e.classList[0] === 'icon' || e.classList[0] === 'ng-star-inserted')
+    ) {
       return;
     }
     this.showBack = false;
@@ -100,13 +140,19 @@ export class BookCardComponent implements OnInit {
   scrollForward(event) {
     if (event) {
       event.stopPropagation();
-      const newScrollLeftPosition = this.books.nativeElement.scrollLeft + 102 * 3;
+      const newScrollLeftPosition =
+        this.books.nativeElement.scrollLeft + 102 * 3;
       const scrollLeft =
-        newScrollLeftPosition + this.offset * 2 > this.books.nativeElement.scrollWidth
+        newScrollLeftPosition + this.offset * 2 >
+        this.books.nativeElement.scrollWidth
           ? this.books.nativeElement.scrollWidth
           : newScrollLeftPosition;
-      this.books.nativeElement.scrollTo({ left: scrollLeft, behavior: 'smooth' });
-      this.showForwarContainer = scrollLeft + this.offset * 2 < this.books.nativeElement.scrollWidth;
+      this.books.nativeElement.scrollTo({
+        left: scrollLeft,
+        behavior: 'smooth',
+      });
+      this.showForwarContainer =
+        scrollLeft + this.offset * 2 < this.books.nativeElement.scrollWidth;
       this.showBackContainer = true;
       this.showBack = false;
     }
@@ -115,10 +161,18 @@ export class BookCardComponent implements OnInit {
   scrollBack(event) {
     if (event) {
       event.stopPropagation();
-      const newScrollLeftPosition = this.books.nativeElement.scrollLeft - 102 * 3;
-      const scrollLeft = newScrollLeftPosition + this.offset * 2 < 0 ? this.books.nativeElement.scrollWidth : newScrollLeftPosition;
-      this.books.nativeElement.scrollTo({ left: scrollLeft, behavior: 'smooth' });
-      this.showBackContainer = this.books.nativeElement.scrollLeft - this.offset > 0;
+      const newScrollLeftPosition =
+        this.books.nativeElement.scrollLeft - 102 * 3;
+      const scrollLeft =
+        newScrollLeftPosition + this.offset * 2 < 0
+          ? this.books.nativeElement.scrollWidth
+          : newScrollLeftPosition;
+      this.books.nativeElement.scrollTo({
+        left: scrollLeft,
+        behavior: 'smooth',
+      });
+      this.showBackContainer =
+        this.books.nativeElement.scrollLeft - this.offset > 0;
       this.showForwarContainer = true;
       this.showForward = false;
     }
@@ -136,7 +190,9 @@ export class BookCardComponent implements OnInit {
       this.showBackContainer = false;
     }
     this.showBack = false;
-    this.showForwarContainer = this.books.nativeElement.scrollLeft + this.offset * 2 < this.books.nativeElement.scrollWidth;
+    this.showForwarContainer =
+      this.books.nativeElement.scrollLeft + this.offset * 2 <
+      this.books.nativeElement.scrollWidth;
     this.showForward = false;
   }