Finished breadcrumb

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

@@ -10,7 +10,6 @@ import { DmpComponent } from './dmps/dmp.component';
 import { AppComponent } from './app.component';
 import { UserWorkspaceComponent } from './user-workspace/user-workspace.component';
 import { MainSignInComponent } from './login/main-sign-in/main-sign-in.component';
-import { BreadcrumbService } from './services/breadcrumb.service';
 
 const appRoutes: Routes = [
   //{ path: 'dynamic-form/:id', component: DynamicFormComponent, canActivate: [AuthGuard] },
@@ -46,7 +45,6 @@ const appRoutes: Routes = [
     RouterModule
   ],
   providers: [
-    BreadcrumbService
   ]
 })
 export class AppRoutingModule { }

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

@@ -6,7 +6,6 @@ import { TokenService, TokenProvider } from './services/login/token.service';
 import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, ActivatedRoute, NavigationExtras } from '@angular/router';
 import { MainSignInComponent } from './login/main-sign-in/main-sign-in.component';
 import {BreadcrumbModule,MenuItem} from 'primeng/primeng';
-import { BreadcrumbService } from './services/breadcrumb.service';
 
 import { BreadcrumbComponent } from './widgets/breadcrumb/breadcrumb.component';
 
@@ -32,32 +31,12 @@ export class AppComponent implements OnInit {
   
 
 
-  constructor(private tokenService : TokenService, private router: Router, private breadcrumbService  : BreadcrumbService, private route: ActivatedRoute) {
+  constructor(private tokenService : TokenService, private router: Router, private route: ActivatedRoute) {
 
   }
 
   ngOnInit() {
 
-    this.clearbreadCrumb();
-
-    this.breadcrumbService.breadcrumbDataEmitter.subscribe(
-      (data) => {
-        this.breadcrumbData = data;
-      }
-    );
-
-    this.breadcrumbService.breadcrumbHomeEmitter.subscribe(
-      (data) => {
-        this.breadcrumbHome = data;
-      }
-    );
-
-  }
-  
-
-
-  clearbreadCrumb(){
-    this.breadcrumbData.length = 0;
   }
 
 
@@ -82,7 +61,6 @@ export class AppComponent implements OnInit {
   }
   
   logout(){
-    this.breadcrumbService.clearAll();
     this.tokenService.logout();
     location.reload();
   }

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

@@ -35,7 +35,6 @@ import { GlobalInterceptor } from './services/interceptor';
 import { TabModule } from './tabs/tab.module';
 import { AngularDraggableModule } from 'angular2-draggable';
 
-import { BreadcrumbService } from './services/breadcrumb.service';
 import { NativeLoginService } from './services/login/native-login.service';
 import { GooggleSignInComponent } from './login/googgle-sign-in/googgle-sign-in.component';
 import { MainSignInComponent } from './login/main-sign-in/main-sign-in.component';
@@ -127,7 +126,7 @@ import { BreadcrumbComponent } from './widgets/breadcrumb/breadcrumb.component';
                   useClass: GlobalInterceptor,
                   multi: true,
               },
-              ServerService, BreadcrumbService, dataModelBuilder, GlobalVariables, AuthGuard, PaginationService, TokenService, LocalStorageService, RestBase, EestoreService,NativeLoginService
+              ServerService, dataModelBuilder, GlobalVariables, AuthGuard, PaginationService, TokenService, LocalStorageService, RestBase, EestoreService,NativeLoginService
             ],
   bootstrap: [AppComponent]
 })

dmp-frontend/src/app/datasets/dataset.component.ts

@@ -189,7 +189,6 @@ export class DatasetsComponent implements OnInit {
   }
 
   editRow(item, event) { 
-    debugger;
     if (event.toElement.id == "editDataset"){
       //this.dataset = item;
       this.dataset.label = item.label;
@@ -221,7 +220,8 @@ export class DatasetsComponent implements OnInit {
   }
 
   describeDataset(item) {
-    this.ngZone.run(() => this.router.navigate(['dynamic-form', {id: item.profile.id, datasetId:item.id}]));
+    this.router.navigate(['/dynamic-form'], { queryParams: {id: item.profile.id, datasetId:item.id, label: item.label}});
+    //this.ngZone.run(() => this.router.navigate(['dynamic-form', {id: item.profile.id, datasetId:item.id, label: item.label}]));
   }
 
   markDatasetForDelete(dataset){

dmp-frontend/src/app/dmps/dmp.component.ts

@@ -17,7 +17,6 @@ import { NgForm } from '@angular/forms';
 import { DatasetsComponent } from '../datasets/dataset.component';
 import { StatusToString } from '../pipes/various/status-to-string';
 import {MenuItem} from 'primeng/primeng';
-import { BreadcrumbService } from '../services/breadcrumb.service';
 
 declare var $ :any;
 
@@ -45,24 +44,6 @@ export class DmpComponent implements OnInit{
   // for tableIds
   showIDs : boolean = false;
 
-  public stateConfig : any = {
-    "dmps" : {
-      "tableVisible" : true,
-      "dmpDescriptionVisible" : false,
-      "selectedID" : null,
-      "selectedLabel" : null
-    },
-    "datasets" : {
-      "tableVisible" : false,
-      "selectedID" : null,
-      "selectedLabel" : null
-    }
-  }
-
-
-  //breadcrumbHome: MenuItem = {icon: 'fa fa-home'};
-  breadcrumbData: MenuItem[] = new Array<MenuItem>();
-
 
   dmp : any = null;
 
@@ -75,7 +56,6 @@ export class DmpComponent implements OnInit{
   constructor( 
     private serverService: ServerService,
     private route: ActivatedRoute,
-    private breadcrumbService : BreadcrumbService,
     private router: Router){
       this.projectsDropDown = new DropdownField();      
       this.projectsDropDown.options = [];
@@ -121,8 +101,6 @@ export class DmpComponent implements OnInit{
       }
     )
 
-    this.showDmps();
-
   }
 
   showDMPDetails(dmp) {
@@ -133,17 +111,6 @@ export class DmpComponent implements OnInit{
   }
 
 
-  showDmps(){
-    this.stateConfig.dmps.tableVisible = true;
-    this.stateConfig.datasets.tableVisible = false;
-
-    this.breadcrumbService.clearAll();
-    this.breadcrumbData.length = 0;
-    this.breadcrumbData.push({label:'My Data Management Plans ', command: (onclick)=> { this.showDmps() }});
-    this.breadcrumbService.setData(this.breadcrumbData);
-  }
-
-
 
   getDmps(muted? : boolean){
     this.serverService.getDmpOfUser().subscribe( 
@@ -294,7 +261,7 @@ export class DmpComponent implements OnInit{
   }
 
   showDatasetsOfDmp(item){ 
-    this.router.navigate(['/dataset'], { queryParams: { "dmpid":item.id }});
+    this.router.navigate(['/dataset'], { queryParams: { "dmpid":item.id , "label":item.label}});
   }
 
 

dmp-frontend/src/app/dmps/dmps.html

@@ -1,5 +1,5 @@
 
-<table *ngIf="stateConfig.dmps.tableVisible" class="table table-striped customTable" [mfData]="tableData | dmpTableFilter : filterQuery | dmpVersionFilter : versionFilter |dmpstatusFilter: statusFilter"
+<table class="table table-striped customTable" [mfData]="tableData | dmpTableFilter : filterQuery | dmpVersionFilter : versionFilter |dmpstatusFilter: statusFilter"
     #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
     <thead>
         <tr class="rowFilter">

dmp-frontend/src/app/form/dynamic-form.component.ts

@@ -18,7 +18,6 @@ import { AutocompleteRemoteComponent } from './fields/autocomplete-remote/autoco
 import { AngularDraggableModule } from 'angular2-draggable';
 
 import {MenuItem} from 'primeng/primeng';
-import { BreadcrumbService } from '../services/breadcrumb.service';
 
 import './../../assets/xml2json.min.js';
 declare var X2JS: any;
@@ -67,7 +66,7 @@ export class DynamicFormComponent implements OnInit {
   expandedToc : boolean = true;
 
 
-  constructor(private qcs: FieldControlService, private breadcrumbService : BreadcrumbService, private serverService: ServerService, private dataModelService: dataModelBuilder, private router: Router,
+  constructor(private qcs: FieldControlService, private serverService: ServerService, private dataModelService: dataModelBuilder, private router: Router,
     private route: ActivatedRoute, private pagerService: PaginationService, private tokenService: TokenService) {
     this.form = this.qcs.toFormGroup(new Array(), new Array());
     this.xml2jsonOBJ = new X2JS();
@@ -80,9 +79,11 @@ export class DynamicFormComponent implements OnInit {
 
   ngOnInit() {
 
+    
+
 
     //this.route.fragment.subscribe(fragment => { this.fragment = fragment; }); //navigate to certain section of the page, it doesn't use anymore
-    let sub = this.route.params.subscribe(params => {
+    let sub = this.route.queryParams.subscribe(params => {
       this.id = params.id;
       this.datasetId = params.datasetId;
       //this.datasetProperties = params.datasetProperties

dmp-frontend/src/app/login/main-sign-in/main-sign-in.component.ts

@@ -4,7 +4,6 @@ import { NativeLoginService } from '../../services/login/native-login.service';
 import { TokenService, TokenProvider } from '../../services/login/token.service';
 import {Router} from '@angular/router';
 import {MenuItem} from 'primeng/primeng';
-import { BreadcrumbService } from '../../services/breadcrumb.service';
 
 import '../../../assets/custom.js';
 declare function simple_notifier(type: string, title: string, message:string): any;
@@ -22,7 +21,7 @@ export class MainSignInComponent implements OnInit {
   creds : any = {"username":"","password":""};
 
 
-  constructor( private fb: FormBuilder, private nativeLogin : NativeLoginService, private tokenService : TokenService, private router : Router, private breadcrumbService: BreadcrumbService) {
+  constructor( private fb: FormBuilder, private nativeLogin : NativeLoginService, private tokenService : TokenService, private router : Router) {
     
   }
 
@@ -38,7 +37,6 @@ export class MainSignInComponent implements OnInit {
 
 
   ngOnInit() {
-    this.breadcrumbService.clearAll();
     this.createForm();
     if(this.tokenService.isLoggedIn()){
       this.router.navigate(['/welcome'], { queryParams: { /*returnUrl: this.state.url*/ }});

dmp-frontend/src/app/projects/projects.component.ts

@@ -18,7 +18,6 @@ import { DatepickerOptions } from 'ng2-datepicker';
 import { StatusToString} from '../pipes/various/status-to-string';
 import { ConfirmationComponent } from '../widgets/confirmation/confirmation.component';
 import {MenuItem} from 'primeng/primeng';
-import { BreadcrumbService } from '../services/breadcrumb.service';
 
 import { ProjectTableFilterPipe } from '../pipes/project-table-filter.pipe';
 
@@ -75,7 +74,6 @@ export class ProjectsComponent implements OnInit{
   constructor( 
     private serverService: ServerService,
     private route: ActivatedRoute,
-    private breadcrumbService : BreadcrumbService,
     private router: Router) {
       this.statusDropDown = new DropdownField();
       this.statusDropDown.options= [{key:'0', value:"Active"},{key:'1', value:"Inactive"}]
@@ -103,10 +101,6 @@ getEmptyProject(){
 
     this.getProjects();
 
-    this.breadcrumbService.clearAll();
-    this.breadcrumbData.push({label:'My Projects', routerLink:"/projects"});
-    this.breadcrumbService.setData(this.breadcrumbData);
-
   }
 
     

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

@@ -1,38 +0,0 @@
-import { OnInit, Injectable, EventEmitter, Input } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
-import { MenuItem } from 'primeng/primeng';
-
-
-@Injectable()
-export class BreadcrumbService implements OnInit {
-
-
-    breadcrumbHomeEmitter: EventEmitter<MenuItem> = new EventEmitter<MenuItem>();
-    breadcrumbDataEmitter: EventEmitter<Array<MenuItem>> = new EventEmitter<Array<MenuItem>>();
-
-    @Input() currentHome: MenuItem;
-    @Input() currentData: Array<MenuItem>;
-
-
-
-    ngOnInit() {
-        console.log("Intiated the service")
-    }
-
-    setData(breadcrumbData: Array<MenuItem>) {
-        this.breadcrumbDataEmitter.emit(breadcrumbData);
-    }
-
-    setHome(breadcrumbHome: MenuItem) {
-        this.breadcrumbHomeEmitter.emit(breadcrumbHome);
-    }
-
-    appendMenuItem(menuItem: MenuItem) {
-        //
-    }
-
-    clearAll() {
-        this.breadcrumbDataEmitter.emit(new Array<MenuItem>());
-    }
-
-}

dmp-frontend/src/app/widgets/breadcrumb/breadcrumb.component.html

@@ -1,2 +1,2 @@
 <!-- breadcrumb bar -->
-<p-breadcrumb *ngIf="breadcrumbData?.length != 0" [model]="getPaths()" [home]="breadcrumbHome"></p-breadcrumb>
+<p-breadcrumb *ngIf="breadcrumbData?.length != 0" [model]="breadcrumbData" [home]="breadcrumbHome"></p-breadcrumb>

dmp-frontend/src/app/widgets/breadcrumb/breadcrumb.component.ts

@@ -13,6 +13,9 @@ export class BreadcrumbComponent implements OnInit {
   breadcrumbHome: MenuItem = {icon: 'fa fa-home', routerLink: "/welcome"};
   breadcrumbData: MenuItem[] = new Array<MenuItem>();
 
+  ngOnInit() {
+    
+  }
 
   constructor(private router: Router, private route: ActivatedRoute) {
     router.events.subscribe(
@@ -30,8 +33,10 @@ export class BreadcrumbComponent implements OnInit {
           //this.breadcrumbData.length = 0;
           this.route.children.forEach( child => {
             let menuItem : MenuItem = this.guessMenuItemFromActivatedRoute(child, event);
-            if(menuItem != null)
+            if(menuItem != null) {
-              this.breadcrumbData.push(menuItem);
+              this.adaptBreadcrumbByMenuItem(menuItem);
+              //this.breadcrumbData.push(menuItem);
+            }
           })
 
         }
@@ -39,34 +44,56 @@ export class BreadcrumbComponent implements OnInit {
 
   }
 
+
   guessMenuItemFromActivatedRoute(activatedRoute : any, event : NavigationEnd) { //it's important to leave it as "any"
+
+    let menuItem : MenuItem = null;
     let componentName = activatedRoute.component.name; 
+    
     let params = activatedRoute.queryParams.getValue();
     let url = event.urlAfterRedirects.split("?")[0]; 
-
     let label = null;
+
     if(componentName == "ProjectsComponent") {
       label = "My Projects";
     }
     if(componentName == "DmpComponent"){
       label = "My Data Management Plans";
     }
+
+    if(componentName == "DatasetsComponent"){
+      label = "Datasets of DMP '"+params["label"]+"'";
+    }
+
+    if(componentName == "DynamicFormComponent"){
+      label = "Form of dataset '"+params["label"]+"'";
+    }
+
     
     if(label != null)
-      return {"label": label, "routerLink": url, "queryParams" : params };
+      menuItem = {"label": label, "routerLink": url, "queryParams" : params };
 
-    return null;
+    console.log("COMPONENT NAME="+componentName);
+
+    return menuItem;
   }
 
 
-  ngOnInit() {
+  adaptBreadcrumbByMenuItem(menuItem : MenuItem){
+
+    let breadcrumbDataNew: MenuItem[] = new Array<MenuItem>();
+    for(var i=0; i<this.breadcrumbData.length;i++){
+      if(this.breadcrumbData[i].label == menuItem.label)
+        break;  
+      else
+        breadcrumbDataNew.push(this.breadcrumbData[i]);
+    }
+    this.breadcrumbData = breadcrumbDataNew;
+
+    this.breadcrumbData.push(menuItem);
 
   }
 
-  getPaths(){
-
-    return this.breadcrumbData;
-  }