From 0c90cd629e4d0a77213942b5d32e7355bacccc55 Mon Sep 17 00:00:00 2001
From: Eraldo Hasanaj <e.hasanaj1989@gmail.com>
Date: Mon, 21 Jan 2019 17:51:19 +0100
Subject: [PATCH] Added styles & design for breadcrumb component

---
 .../breadcrumbs/breadcrumbs.component.html          |  8 +++++---
 .../breadcrumbs/breadcrumbs.component.scss          | 11 +++++++++++
 .../components/breadcrumbs/breadcrumbs.component.ts | 13 ++++++++++++-
 src/app/core/reducers/breadcrumb.reducer.ts         |  9 ++++++++-
 4 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/src/app/components/breadcrumbs/breadcrumbs.component.html b/src/app/components/breadcrumbs/breadcrumbs.component.html
index 6a596e250..6a6c8f623 100644
--- a/src/app/components/breadcrumbs/breadcrumbs.component.html
+++ b/src/app/components/breadcrumbs/breadcrumbs.component.html
@@ -1,3 +1,5 @@
-<p>
-  breadcrumbs works!
-</p>
+<div class="breadacrumb-grid pt-5">
+  <div class="align-center" *ngFor="let breadcrumb of breadcrumbs">
+    <span class="breadcrumb" routerLink="{{breadcrumb.path}}">{{breadcrumb.name}}</span>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/components/breadcrumbs/breadcrumbs.component.scss b/src/app/components/breadcrumbs/breadcrumbs.component.scss
index e69de29bb..d0b050d4b 100644
--- a/src/app/components/breadcrumbs/breadcrumbs.component.scss
+++ b/src/app/components/breadcrumbs/breadcrumbs.component.scss
@@ -0,0 +1,11 @@
+@import "../../../assets/scss/variables";
+
+.breadacrumb-grid {
+    display: grid;
+    grid-template-columns: auto;
+}
+
+.breadcrumb {
+    color: $color-active;
+    outline: none;
+}
\ No newline at end of file
diff --git a/src/app/components/breadcrumbs/breadcrumbs.component.ts b/src/app/components/breadcrumbs/breadcrumbs.component.ts
index a599a8f0b..ce78dbc8a 100644
--- a/src/app/components/breadcrumbs/breadcrumbs.component.ts
+++ b/src/app/components/breadcrumbs/breadcrumbs.component.ts
@@ -1,4 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import { AppState } from 'src/app/app.state';
+import { Store } from '@ngrx/store';
+import { Observable } from 'rxjs';
+import { Breadcrumb } from 'src/app/core/models/breadcrumb.model';
 
 @Component({
   selector: 'app-breadcrumbs',
@@ -7,7 +11,14 @@ import { Component, OnInit } from '@angular/core';
 })
 export class BreadcrumbsComponent implements OnInit {
 
-  constructor() { }
+  breadcrumbsObs: Observable<Breadcrumb[]>;
+  breadcrumbs: Breadcrumb[];
+  constructor(private store: Store<AppState>) {
+    this.breadcrumbsObs = store.select('breadcrumbs');
+    this.breadcrumbsObs.subscribe(
+      (data: Breadcrumb[]) => this.breadcrumbs = data
+    );
+  }
 
   ngOnInit() {
   }
diff --git a/src/app/core/reducers/breadcrumb.reducer.ts b/src/app/core/reducers/breadcrumb.reducer.ts
index 8a25d76f3..c7553907a 100644
--- a/src/app/core/reducers/breadcrumb.reducer.ts
+++ b/src/app/core/reducers/breadcrumb.reducer.ts
@@ -1,7 +1,14 @@
 import { Breadcrumb } from '../models/breadcrumb.model';
 import { ADD_BREADCRUMB } from '../actions/breadcrumb.actions';
 
-export function breadcrumbReducer(breadcrumbs: Breadcrumb[] = [], action: any) {
+const initialBreadcrumbs = [
+    <Breadcrumb>{
+        name: 'Artikelsuche',
+        path: 'article-search'
+    }
+];
+
+export function breadcrumbReducer(breadcrumbs: Breadcrumb[] = initialBreadcrumbs, action: any) {
     switch (action.type) {
         case ADD_BREADCRUMB:
             return [...breadcrumbs, action.payload];