refractor(breadcrumb): enhance breadcrumb (#129)

Enhance breadcrumb design and generation

Fixes #106

src/app/core/shell/breadcrumb/breadcrumb.component.html

@@ -1,12 +1,14 @@
-<nav>
-  <div class="breadcrumb-wrapper">
-    <ul>
-      <li *ngFor="let breadcrumb of breadcrumbs; let last = last">
-        <span *ngIf="!last">
-            <a *ngIf="!last" [routerLink]="breadcrumb.url">{{breadcrumb.label}}</a>&nbsp;&nbsp;>&nbsp;&nbsp;
+<nav class="breadcrumb-wrapper">
+  <ul class="breadcrumb">
+    <span class="breadcrumb-title">{{ breadcrumbs[breadcrumbs.length-1].label }}</span>
+    <span *ngIf="breadcrumbs.length-1 !== 0" class="separator">
+      <li *ngFor="let breadcrumb of breadcrumbs; let last = last" class="breadcrumb-label">
+        <span *ngIf="!last" class="breadcrumb-link">
+          <a *ngIf="breadcrumb.url" [routerLink]="breadcrumb.url">{{ breadcrumb.label }}</a>
+          <span *ngIf="!breadcrumb.url">{{ breadcrumb.label }}</span>
         </span>
         <span *ngIf="last">{{ breadcrumb.label }}</span>
       </li>
-    </ul>
-  </div>
+    </span>
+  </ul>
 </nav>

src/app/core/shell/breadcrumb/breadcrumb.component.scss

@@ -1,4 +1,48 @@
-li {
-  display: inline;
-  list-style-type: none;
+.breadcrumb-wrapper {
+  margin: 0 auto;
+  max-width: 74rem;
+  width: 90%;
+
+  .breadcrumb {
+    list-style: none;
+    padding: 0;
+    margin: 1.5rem 0;
+    line-height: 40px;
+
+    .breadcrumb-title {
+      font-size: 1.25rem;
+      font-weight: 400;
+    }
+
+    .separator:before {
+      content: "";
+      border: 1.5px solid #000;
+      margin: 0 0.6rem;
+      font-size: 1.25rem;
+      font-weight: 400;
+    }
+
+    .breadcrumb-label {
+      display: inline;
+      font-size: 1rem;
+
+      .breadcrumb-link {
+        a {
+          text-decoration: none;
+          color: #0275d8;
+        }
+        a:hover {
+          text-decoration: underline;
+        }
+      }
+
+      .breadcrumb-link:after {
+        content: "/";
+        margin: 0 0.4rem;
+      }
+
+    }
+
+  }
+
 }

src/app/core/shell/breadcrumb/breadcrumb.component.ts

@@ -22,40 +22,63 @@ export class BreadcrumbComponent implements OnInit {
   generateBreadcrumbs() {
     const routeDataBreadcrumb = 'breadcrumb';
     const routeParamBreadcrumb = 'routeParamBreadcrumb';
+    const routeResolveBreadcrumb = 'routeResolveBreadcrumb';
+    const routeAddBreadcrumbLink = 'addBreadcrumbLink';
+
     const onNavigationEnd = this.router.events.pipe(filter(event => event instanceof NavigationEnd));
 
     onNavigationEnd.subscribe(() => {
       this.breadcrumbs = [];
       let currentRoute = this.activatedRoute.root;
-      let url = '';
+      let currentUrl = '';
 
       while (currentRoute.children.length > 0) {
         const childrenRoutes = currentRoute.children;
-        let breadcrumbLabel = 'Home';
+        let breadcrumbLabel: any;
+        let url: any;
 
         childrenRoutes.forEach(route => {
           currentRoute = route;
+          breadcrumbLabel = false;
+
           if (route.outlet !== 'primary') {
             return;
           }
+
+          const routeURL = route.snapshot.url.map(segment => segment.path).join('/');
+          currentUrl += `/${routeURL}`;
+
+          if (currentUrl === '/') {
+            breadcrumbLabel = 'Home';
+          }
+
           const hasData = (route.routeConfig && route.routeConfig.data);
+
           if (hasData) {
-            if (route.snapshot.data.hasOwnProperty(routeParamBreadcrumb)) {
-              breadcrumbLabel = route.snapshot.params[route.snapshot.data[routeParamBreadcrumb]];
+            if (route.snapshot.data.hasOwnProperty(routeResolveBreadcrumb) && route.snapshot.data[routeResolveBreadcrumb]) {
+              breadcrumbLabel = route.snapshot.data;
+              route.snapshot.data[routeResolveBreadcrumb].forEach((property: any) => {
+                breadcrumbLabel = breadcrumbLabel[property];
+              });
+            } else if (route.snapshot.data.hasOwnProperty(routeParamBreadcrumb) && route.snapshot.paramMap.get(route.snapshot.data[routeParamBreadcrumb])) {
+              breadcrumbLabel = route.snapshot.paramMap.get(route.snapshot.data[routeParamBreadcrumb]);
             } else if (route.snapshot.data.hasOwnProperty(routeDataBreadcrumb)) {
               breadcrumbLabel = route.snapshot.data[routeDataBreadcrumb];
             }
-          }
 
-          const routeURL = route.snapshot.url.map(segment => segment.path).join('/');
-          url += `/${routeURL}`;
+            if (route.snapshot.data.hasOwnProperty(routeAddBreadcrumbLink)) {
+              url = route.snapshot.data[routeAddBreadcrumbLink];
+            } else {
+              url = currentUrl;
+            }
+          }
 
           const breadcrumb: Breadcrumb = {
             label: breadcrumbLabel,
             url: url
           };
 
-          if (breadcrumb.url !== '//home') {
+          if (breadcrumbLabel) {
             this.breadcrumbs.push(breadcrumb);
           }
         });