no message

dmp-frontend/package.json

@@ -31,7 +31,6 @@
     "@types/file-saver": "1.3.0",
     "core-js": "^2.4.1",
     "file-saver": "1.3.3",
-    "ngx-breadcrumbs": "0.0.3",
     "rxjs": "^5.6.0-forward-compat.4",
     "zone.js": "^0.8.19"
   },

dmp-frontend/src/app/app.module.ts

@@ -41,7 +41,6 @@ import { UsersModule } from './users/users.module';
 import { HelpContentComponent } from './shared/help-content/help-content.component';
 import { AuthGuard } from './shared/guards/auth.guard';
 import { UrlUtilities } from './utilities/UrlUtilities';
-import { BreadcrumbComponent } from './shared/components/breadcrumb/breadcrumb.component';
 import { BreadCrumbResolverService } from './services/breadcrumb/breadcrumb-resolver.service';
 import { McBreadcrumbsModule } from 'ngx-breadcrumbs';
 
@@ -54,7 +53,6 @@ import { McBreadcrumbsModule } from 'ngx-breadcrumbs';
     WelcomepageComponent,
     HelpContentComponent,
     B2AccessLoginComponent,
-    BreadcrumbComponent
   ],
   imports: [
     BrowserModule,

dmp-frontend/src/app/services/breadcrumb/breadcrumb-resolver.service.ts

@@ -55,7 +55,6 @@ export class BreadCrumbResolverService {
         let parentComponent = item.parentComponentName ? this.findComponent(item.parentComponentName) : null
         if (parentComponent && parentComponent.hasOwnProperty('breadCrumbs')) {
           components = this.pushToStart(components, this.resolveDependentComponents((<IBreadCrumbComponent>parentComponent).breadCrumbs, components))
-          console.log({ componentName: item.parentComponentName, components: components })
         } else if (item.notFoundResolver) {
           components = this.pushToStart(components, item.notFoundResolver)
           //components = this.pushToStart(components, [unresolvedComponentItems])
@@ -74,10 +73,10 @@ export class BreadCrumbResolverService {
   }
 
   pushToStart(first: any[], second: any[]) {
-    return [].concat(second.filter(x => first.map(firstX => firstX.parentComponentName).indexOf(x.parentComponentName) == -1), first);
+    return [].concat(second.filter(x => first.map(firstX => firstX.label).indexOf(x.label) == -1), first);
   }
 
   pushToEnd(first: any[], second: any[]) {
-    return [].concat(first, second.filter(x => first.map(firstX => firstX.parentComponentName).indexOf(x.parentComponentName) == -1));
+    return [].concat(first, second.filter(x => first.map(firstX => firstX.label).indexOf(x.label) == -1));
   }
 }

dmp-frontend/src/app/shared/components/breadcrumb/breadcrumb.component.html

@@ -1,7 +1,16 @@
-<ol class="breadcrumb">
-  <li *ngFor="let breadcrumb of buildBreadCrumb(this.activatedRoute) | async" class="breadcrumb-item">
-    <a [routerLink]="[breadcrumb.url]" [queryParams]="breadcrumb.params">
-      {{ breadcrumb.label }}
-    </a>
-  </li>
-</ol>
+<mat-card>
+  <mat-card-content aria-label="breadcrumb">
+    <ol class="no-style" fxLayout="row">
+      <div fxFlex="nogrow" *ngFor="let breadcrumb of buildBreadCrumb(this.activatedRoute) | async ; let i = index; let length = count ">
+        <div fxLayout="row" fxLayoutAlign="start center">
+          <li fxFlex>
+            <a fxFlex [routerLink]="[breadcrumb.url]" [queryParams]="breadcrumb.params">
+              {{ breadcrumb.label }}
+            </a>
+          </li>
+          <mat-icon fxFlex *ngIf="length > 1 && i != ( length - 1 )">chevron_right</mat-icon>
+        </div>
+      </div>
+    </ol>
+  </mat-card-content>
+</mat-card>

dmp-frontend/src/app/shared/components/breadcrumb/breadcrumb.component.scss

@@ -1,16 +1,5 @@
-.breadcrumb li {
-	display: inline;
-}
-
-.breadcrumb li+li:before {
-	content: " > ";
-	color: white;
-}
-
-.breadcrumb {
-	background-color: #8d0000;
-	padding: 20px;
-	a {
-		color: white;
-	}
+ol.no-style {
+  li {
+    list-style-type: none;
+  }
 }

dmp-frontend/src/app/shared/components/breadcrumb/definition/breadcrumb-chain-item.ts

@@ -1,7 +0,0 @@
-import { BreadcrumbItem } from "./breadcrumb-item";
-
-export class BreadCrumbChainItem {
-  public chainedItemId: string;
-  public itemId: string;
-  public items: BreadcrumbItem[]
-}

dmp-frontend/src/app/shared/shared.module.ts

@@ -22,6 +22,7 @@ import { DataManagementPlanProfileCriteriaComponent } from './components/criteri
 import { AutoCompleteComponent } from './components/auto-complete/auto-complete.component';
 import { ExternalItemListingComponent } from './components/external-items/external-item-listing/external-item-listing.component';
 import { ExternalItemComponent } from './components/external-items/external-item/external-item.component';
+import { BreadcrumbComponent } from './components/breadcrumb/breadcrumb.component';
 
 @NgModule({
   imports: [
@@ -29,7 +30,6 @@ import { ExternalItemComponent } from './components/external-items/external-item
     RouterModule,
     MaterialModule,
     FlexLayoutModule,
-
     TranslateModule,
     FormsModule,
     ReactiveFormsModule
@@ -51,7 +51,9 @@ import { ExternalItemComponent } from './components/external-items/external-item
     NgForLimitPipe,
     AutoCompleteComponent,
     ExternalItemListingComponent,
-    ExternalItemComponent
+    ExternalItemComponent,
+    BreadcrumbComponent
+
   ],
 
   exports: [
@@ -73,7 +75,8 @@ import { ExternalItemComponent } from './components/external-items/external-item
     NgForLimitPipe,
     AutoCompleteComponent,
     ExternalItemListingComponent,
-    ExternalItemComponent
+    ExternalItemComponent,
+    BreadcrumbComponent
   ],
   entryComponents: [
   ]

dmp-frontend/src/styles.scss

@@ -1,30 +1,26 @@
 /* @import "~@angular/material/prebuilt-themes/indigo-pink.css"; */
+
 @import '~@angular/material/theming';
 @import '~@covalent/core/theming/all-theme';
-
 @include mat-core();
-
 // Define a theme.
 $primary: mat-palette($mat-indigo);
-$accent:  mat-palette($mat-pink, A200, A100, A400);
-
+$accent : mat-palette($mat-pink, A200, A100, A400);
 $theme: mat-light-theme($primary, $accent);
-
 // Include all theme styles for the components.
 @include angular-material-theme($theme);
 @include covalent-theme($theme);
-
-.snackbar-warning{
-    background-color: #F39010;
-    color: #F3EFEF;
+.snackbar-warning {
+  background-color: #F39010;
+  color: #F3EFEF;
 }
 
-.snackbar-success{
-    background-color: #109204;
-    color: #F3EFEF;
+.snackbar-success {
+  background-color: #109204;
+  color: #F3EFEF;
 }
 
-.snackbar-error{
-    background-color: #CF1407;
-    color: #111010;
-}
+.snackbar-error {
+  background-color: #CF1407;
+  color: #111010;
+}