Merge [HIMA-86] into development

src/app/components/breadcrumbs/breadcrumbs.component.html

@@ -1,20 +1,29 @@
-<div class="align-center breadcrumb-container">
+<div class="breadacrumb-grid" [ngClass]="{'grid-with-arrow': !backArrow}">
+    <app-back-arrow *ngIf="backArrow" (back)="goBack(breadcrumbs[breadcrumbs.length - 2])" class="align-right back-arrow"></app-back-arrow>
+    <div class="align-center breadcrumb-container" [ngClass]="{'with-arrow': backArrow}">
         <ng-container *ngIf="bredcrumbDots">
             <span class="breadcrumb" (click)="selectBreadcrumb(breadcrumbs[breadcrumbs.length - 4])">...
                 <img class="next" src="../../../assets/images/Arrow_Next.svg" alt="next">
             </span>
-        <span class="breadcrumb" (click)="selectBreadcrumb(breadcrumbs[breadcrumbs.length - 3])">{{ breadcrumbs[breadcrumbs.length - 3].name }} 
+            <span class="breadcrumb"
+                (click)="selectBreadcrumb(breadcrumbs[breadcrumbs.length - 3])">{{ breadcrumbs[breadcrumbs.length - 3].name }}
                 <img class="next" src="../../../assets/images/Arrow_Next.svg" alt="next">
             </span>
-        <span class="breadcrumb" (click)="selectBreadcrumb(breadcrumbs[breadcrumbs.length - 2])">{{ breadcrumbs[breadcrumbs.length - 2].name }} 
+            <span class="breadcrumb"
+                (click)="selectBreadcrumb(breadcrumbs[breadcrumbs.length - 2])">{{ breadcrumbs[breadcrumbs.length - 2].name }}
                 <img class="next" src="../../../assets/images/Arrow_Next.svg" alt="next">
             </span>
-        <span class="breadcrumb selected" (click)="selectBreadcrumb(breadcrumbs[breadcrumbs.length - 1])">{{ breadcrumbs[breadcrumbs.length - 1].name }}</span>
+            <span class="breadcrumb selected"
+                (click)="selectBreadcrumb(breadcrumbs[breadcrumbs.length - 1])">{{ breadcrumbs[breadcrumbs.length - 1].name }}</span>
         </ng-container>
 
         <ng-container *ngIf="!bredcrumbDots">
-        <span *ngFor="let breadcrumb of breadcrumbs; let i = index" class="breadcrumb" (click)="selectBreadcrumb(breadcrumb)" [ngClass]="{ 'selected': breadcrumb.path.indexOf(currentRoute) >= 0 }">{{ breadcrumb.name }} 
-          <img class="next" src="../../../assets/images/Arrow_Next.svg" alt="next" *ngIf="breadcrumbs.length > 1 && breadcrumbs.length !== (i + 1)">
+            <span *ngFor="let breadcrumb of breadcrumbs; let i = index" class="breadcrumb"
+                (click)="selectBreadcrumb(breadcrumb)"
+                [ngClass]="{ 'selected': breadcrumb.path.indexOf(currentRoute) >= 0 }">{{ breadcrumb.name }}
+                <img class="next" src="../../../assets/images/Arrow_Next.svg" alt="next"
+                    *ngIf="breadcrumbs.length > 1 && breadcrumbs.length !== (i + 1)">
             </span>
         </ng-container>
     </div>
+</div>

src/app/components/breadcrumbs/breadcrumbs.component.scss

@@ -2,13 +2,21 @@
 
 .breadacrumb-grid {
     display: grid;
+    grid-template-columns: min-content auto;
+}
+
+.grid-with-arrow {
     grid-template-columns: auto;
 }
 
 .breadcrumb-container {
     display: flex;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
+}
+
+.with-arrow {
+    width: 86.5%;
 }
 
 .breadcrumb {
@@ -20,6 +28,10 @@
     display: block;
 }
 
+.back-arrow {
+    padding: 10px 0;
+}
+
 .next {
     padding: 0 7px;
 }

src/app/components/breadcrumbs/breadcrumbs.component.ts

@@ -19,6 +19,10 @@ export class BreadcrumbsComponent implements OnInit {
   bredcrumbDots = false;
   currentRoute = '';
 
+  get backArrow() {
+    return this.router.url.substring(0, 16) === '/product-details';
+  }
+
   constructor(
     private store: Store,
     private router: Router
@@ -42,6 +46,11 @@ export class BreadcrumbsComponent implements OnInit {
     this.router.navigate([breadcrumb.path]);
   }
 
+  goBack(breadcrumb: Breadcrumb) {
+    this.store.dispatch(new PopBreadcrumbsAfterCurrent(breadcrumb));
+    this.router.navigate(['/search-results#start']);
+  }
+
   ngOnInit() {
   }
 }

src/app/shared/components/back-arrow/back-arrow.component.html

@@ -0,0 +1,4 @@
+<div class="back-arrow-container" (click)="emitClick()">
+  <img class="icon" src="../../../../assets/images/back-arrow.svg">
+  <span>Zurück</span>
+</div>

src/app/shared/components/back-arrow/back-arrow.component.scss

@@ -0,0 +1,18 @@
+.back-arrow-container {
+    display: grid;
+    grid-template-columns: min-content auto;
+    grid-gap: 1vh;
+    z-index: 900;
+    span {
+        outline: none;
+        font-size: 16px;
+        font-weight: bold;
+        color: #5B7289;
+        line-height: 21px;
+    }
+}
+
+.icon {
+    width: 18px;
+    margin-top: 1px;
+}

src/app/shared/components/back-arrow/back-arrow.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BackArrowComponent } from './back-arrow.component';
+
+describe('BackArrowComponent', () => {
+  let component: BackArrowComponent;
+  let fixture: ComponentFixture<BackArrowComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BackArrowComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BackArrowComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/back-arrow/back-arrow.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'app-back-arrow',
+  templateUrl: './back-arrow.component.html',
+  styleUrls: ['./back-arrow.component.scss']
+})
+export class BackArrowComponent implements OnInit {
+  @Output() back = new EventEmitter();
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  emitClick() {
+    console.log('back emited');
+    this.back.emit();
+  }
+
+}

src/app/shared/shared.module.ts

@@ -5,12 +5,14 @@ import { NgModule } from '@angular/core';
 import { LoadingComponent } from './components/loading/loading.component';
 import { ModalComponent } from './components/modal/modal.component';
 import { SearchComponent } from './components/search-input/search-input.component';
+import { BackArrowComponent } from './components/back-arrow/back-arrow.component';
 
 const components = [
   CardComponent,
   LoadingComponent,
   ModalComponent,
-  SearchComponent
+  SearchComponent,
+  BackArrowComponent
 ];
 @NgModule({
   imports: [CommonModule, FormsModule],

src/assets/images/back-arrow.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="512px" height="512px" viewBox="0 0 16 16" class=""><g><path fill="#5B7289" d="M7.4 12.5l-3.6-3.5h12.2v-2h-12.2l3.6-3.5-1.5-1.4-5.9 5.9 5.9 5.9z" data-original="#444444" class="active-path" data-old_color="##5B728"/></g> </svg>