Merge branch 'master' of gitlab.eudat.eu:dmp/OpenAIRE-EUDAT-DMP-service-pilot

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

@@ -10,12 +10,11 @@ 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] },
   { path: 'dynamic-form', component: DynamicFormComponent, canActivate: [AuthGuard] },
-  //{ path: 'dataset', component: DatasetsComponent },
+  { path: 'dataset', component: DatasetsComponent },
   { path: 'login', component: MainSignInComponent},
   { path: 'projects', component: ProjectsComponent},
   { path: 'dmps', component: DmpComponent},
@@ -46,7 +45,6 @@ const appRoutes: Routes = [
     RouterModule
   ],
   providers: [
-    BreadcrumbService
   ]
 })
 export class AppRoutingModule { }

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

@@ -61,8 +61,8 @@
 </div>
 
 <!-- breadcrumb bar -->
-<div *ngIf="breadcrumbData.length!=0" class="col-md-12">
+<div class="col-md-12">
-    <p-breadcrumb [model]="breadcrumbData" [home]="breadcrumbHome"></p-breadcrumb>
+  <breadcrumb></breadcrumb>
 </div>
 
 

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

@@ -3,11 +3,11 @@ import { ServerService } from './services/server.service';
 import { FieldBase } from '../app/form/fields/field-base';
 import { JsonObjest } from '../app/entities/JsonObject.class';
 import { TokenService, TokenProvider } from './services/login/token.service';
-import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+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';
 
 import { AutocompleteRemoteComponent } from './form/fields/autocomplete-remote/autocomplete-remote.component';
 
@@ -31,31 +31,12 @@ export class AppComponent implements OnInit {
   
 
 
-  constructor(private tokenService : TokenService, private router: Router, private breadcrumbService  : BreadcrumbService) {
+  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;
   }
 
 
@@ -80,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';
@@ -70,6 +69,7 @@ import { UserWorkspaceComponent } from './user-workspace/user-workspace.componen
 import { AutocompleteRemoteComponent } from './form/fields/autocomplete-remote/autocomplete-remote.component';
 
 import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';
+import { BreadcrumbComponent } from './widgets/breadcrumb/breadcrumb.component';
 
 
 
@@ -100,7 +100,8 @@ import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';
     DmpTableFilterPipe,
     DatasetTableFilterPipe, 
     DatasetStatusFilterPipe, 
-    StatusToString
+    StatusToString, 
+    BreadcrumbComponent
   ],
   imports: [
     BrowserModule,
@@ -125,7 +126,7 @@ import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';
                   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.css

@@ -36,4 +36,8 @@ tr.hover:hover > * {
     background-color:#337ab7;
     color:white;
     margin-top:15px;
+}
+
+.cursor-hand{
+    cursor: pointer;
 }

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

@@ -41,6 +41,8 @@ export class DatasetsComponent implements OnInit {
   public sortBy = "label";
   public sortOrder = "asc";
 
+  dmpIdforDatasets: string;
+
 
   // for tableIds
   showIDs : boolean = false;
@@ -50,25 +52,14 @@ export class DatasetsComponent implements OnInit {
   @Input() datasets: Dataset[];
   @Input() datasetProfileDropDown: DropdownField;
   @Input() datasetCount = 0;
-  @Input() dmpIdforDatasets: string;
+  
   @Input() dmpLabelforDatasets: string;
   @Input() statusDropDown: DropdownField;
   dataset: any;
   saveAndDescribe:boolean;
   
-
+  dataSetValue: boolean = true;
-  dataSetValue: boolean
+  
-  @Input()
-  get dataSetVisibe() {
-    return this.dataSetValue;
-  }
-  @Output()
-  public dataSetValueChange = new EventEmitter();
-
-  set dataSetVisibe(value: any) {
-    this.dataSetValue = value
-    this.dataSetValueChange.emit(this.dataSetValue)
-  }
 
   constructor(
     
@@ -77,21 +68,27 @@ export class DatasetsComponent implements OnInit {
     private router: Router,
     private ngZone: NgZone,
     private spinnerService: Ng4LoadingSpinnerService) {
+
     this.dataset = this.createEmptyDataset();
 
     this.datasetProfileDropDown = new DropdownField();
     this.datasetProfileDropDown.options = [];
     this.saveAndDescribe = false;
     this.statusDropDown = new DropdownField();
-    this.statusDropDown.options= [{key:'', value:null},{key:'0', value:"Active"},{key:'1', value:"Inactive"}, {key:'2', value:"Submitted"}, {key:'3', value:"Cancel"}]
+    this.statusDropDown.options= [{key:'', value:null},{key:'0', value:"Active"},{key:'1', value:"Inactive"}]
 
   }
 
   ngOnInit() {    
-    //this.projects = this.serverService.getDummyProjects();
+    
-    this.datasets = [];
+    
-    console.log(this.dmpIdforDatasets);
+    this.route
-    this.getDatasets();
+      .queryParams
+      .subscribe(params => {
+        this.dmpIdforDatasets = params['dmpid'];
+        this.getDatasets();
+      });
+
 
     this.serverService.getAllDatsetsProfile().subscribe(
       response => {
@@ -117,6 +114,7 @@ export class DatasetsComponent implements OnInit {
       label: '',
       reference: '',
       uri: '',
+      status: 0,
       properties: '',
       profile: { "id": '' },
       dmp: { "id": '' }
@@ -192,9 +190,12 @@ export class DatasetsComponent implements OnInit {
 
   editRow(item, event) { 
     if (event.toElement.id == "editDataset"){
-      this.dataset = item;
+      //this.dataset = item;
       this.dataset.label = item.label;
       this.dataset.uri = item.uri;
+      this.dataset.created = item.created;
+      this.dataset.status = item.status;
+      this.dataset.description = item.description;
       //this.dataset.dmp = item.dmp;
       this.dataset.profile = item.profile==null ? null : item.profile.id;
       this.dataset.id = item.id;
@@ -203,7 +204,6 @@ export class DatasetsComponent implements OnInit {
     else if(event.toElement.id == "describeDataset"){
       this.describeDataset(item);
     }
-    return false;
     
   }
 
@@ -220,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/datasets/dataset.html

@@ -61,11 +61,12 @@
             <td>{{dataset?.description}}</td>
             <td>{{dataset?.created | date:'yyyy-MM-dd HH:mm:ss Z'}}</td>
             <td>{{dataset?.status | statusToString }}</td>
-            <td><a  href="#" class="editGridColumn" (click)="editRow(dataset, $event)">
+            <td>
+                <a class="editGridColumn cursor-hand disabled" (click)="editRow(dataset, $event)">
                     <i class="fa fa-pencil fa-fw" data-toggle="tooltip" title="edit Properties" id="editDataset"></i></a>
-                <a  href="#" class="editGridColumn" (click)="editRow(dataset, $event)">
+                <a class="editGridColumn cursor-hand" (click)="editRow(dataset, $event)">
                         <i class="fa fa-eraser fa-fw" data-toggle="modal" data-target="#delete-dataset-confirm" (click)="markDatasetForDelete(dataset)" title="delete Dataset"></i></a> 
-                <a  href="#" class="editGridColumn" (click)="editRow(dataset, $event)">
+                <a class="editGridColumn cursor-hand" (click)="editRow(dataset, $event)">
                         <i class="fa fa-list-alt fa-fw" data-toggle="tooltip" title="describe dataset" id="describeDataset"></i></a></td>
 
         </tr>

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( 
@@ -217,24 +184,6 @@ export class DmpComponent implements OnInit{
   }
 
 
-  showDatasetsOfDmp(item){ 
-    this.stateConfig.dmps.selectedID = item.id;
-    this.stateConfig.dmps.selectedLabel = item.label;
-    if(this.stateConfig.datasets.tableVisible == false){
-      this.stateConfig.datasets.tableVisible = true;
-      this.stateConfig.dmps.tableVisible = false;
-      
-      this.breadcrumbData.push({label:"Datasets of '"+this.stateConfig.dmps.selectedLabel+"'"  /* , command:""*/})
-      this.breadcrumbService.breadcrumbDataEmitter.emit(this.breadcrumbData);
-    }
-    else{
-      this.datasetsComponent.getDatasetForDmpMethod(item.id);
-
-    } 
-  }
-
-
-
   editDmp(item){
     this.dmp = item;
     this.dmp.project = item.project.id;
@@ -311,5 +260,10 @@ export class DmpComponent implements OnInit{
     
   }
 
+  showDatasetsOfDmp(item){ 
+    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">
@@ -227,10 +227,6 @@
 </div>
 
 
-<!--DATASET TABLE-->
-<datasets-table *ngIf="stateConfig.datasets.tableVisible" [dmpIdforDatasets]="stateConfig.dmps.selectedID" [dmpLabelforDatasets]="stateConfig.dmps.selectedLabel" [(dataSetVisibe)]="stateConfig.datasets.tableVisible"></datasets-table>
-
-
 <!-- Confirmation module- do not delete -->
 <confirmation [confirmationID]="'delete-dmp-confirm'" [confirmationTitle]="'Caution'" [confirmationDescr]="'This action will delete this DMP. Are you sure ? This is not revertable !'" (responseSender)="deleteDMP($event)"></confirmation>
 

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

@@ -51,7 +51,7 @@
 				</div>
 
 			<div>
-				<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid || finalizeStatus" (click)="SaveFinalize();">Save</button>
+				<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid || finalizeStatus" (click)="SaveForm();">Save</button>
 				<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid || finalizeStatus" data-toggle="modal" data-target="#confirmModal">Finalize</button>
 			</div>
 	
@@ -121,7 +121,7 @@
 			</div>
 			<div class="modal-footer">
 				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-				<button type="button" class="btn btn-primary" (click)="SaveFinalize();">Save and Finalize</button>
+				<button type="button" class="btn btn-primary" (click)="SaveFinalizeForm();">Save and Finalize</button>
 			</div>
 		</div>
 	</div>

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

@@ -17,6 +17,8 @@ import { AutocompleteRemoteComponent } from './fields/autocomplete-remote/autoco
 
 import { AngularDraggableModule } from 'angular2-draggable';
 
+import {MenuItem} from 'primeng/primeng';
+
 import './../../assets/xml2json.min.js';
 declare var X2JS: any;
 
@@ -77,8 +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
@@ -194,6 +199,10 @@ export class DynamicFormComponent implements OnInit {
       var formScroller = new PerfectScrollbar("#form-container");
       var tocScroller = new PerfectScrollbar("#toc-container");
       
+
+      
+      //this.breadcrumbService.breadcrumbDataEmitter
+
   }
 
   scrollToElemID(elemID) {
@@ -225,8 +234,8 @@ export class DynamicFormComponent implements OnInit {
     this.serverService.getDatasetByID(this.datasetId).subscribe(
       (data) => {
         if (final) data.status = 2;
-        //is xml, so transform them to xml (it's json)
+        
-        //data.properties = this.xml2jsonOBJ.json2xml_str(JSON.stringify(this.form.value));
+        //data.properties = "<root><formValues><![CDATA["+JSON.stringify(this.form.value)+"]]></formValues><dataModel><![CDATA["+JSON.stringify(this.dataModel)+"]]></dataModel></root>";
         data.properties = JSON.stringify(this.form.value);
 
         this.serverService.setDataset(data).subscribe(
@@ -244,14 +253,14 @@ export class DynamicFormComponent implements OnInit {
       });
   }
 
-  onSubmit() {
+  SaveForm() {
     let final = false;
     this.submitForm(false);
 
     this.payLoad = JSON.stringify(this.form.value);
   }
 
-  SaveFinalize(){
+  SaveFinalizeForm(){
     $("#confirmModal").modal("hide");
     let final = true;
     this.submitForm(final);

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/project.html

@@ -124,8 +124,3 @@
     </div>
 </div>
 
-<!--Modal for DMPs-->
-<modal *ngIf="item && show" [(show)]="show" [item]="item" [(dataSetVisibe)]="dataSetVisibe"></modal>
-
-<!--DATASET TABLE-->
-<datasets-table *ngIf="dataSetVisibe"  [(dataSetVisibe)]="dataSetVisibe"></datasets-table> <!--*ngIf="dataSetVisibe == true"-->

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';
 
@@ -52,29 +51,13 @@ export class ProjectsComponent implements OnInit{
   public sortBy = "label";
   public sortOrder = "asc";
 
-  //visibility rules for containers
-  tableVisible: boolean = true;
-  editorVisible: boolean = false;
-
 
   // for tableIds
   showIDs : boolean = false;
-// END ALTERNATIVE
 
-  returnUrl: string;
+  statusDropDown: DropdownField;
-  @Input() projectCount = 0;
+
-  @Input() datasetDropDown:DropdownField;
-  @Input() statusDropDown: DropdownField;
-  //@Input() dataSetVisibe:boolean;
-  @Input() datasets: Dataset[];  
   project: any;
-  modalEditedRow: ModalComponent;
-  public item:any;
-  public show:boolean = false;
-  public dataSetVisibe:boolean = false;
-  @ViewChild(DataTable) projectsTable;
-  @ViewChild(DataTable) datasetsTable;
-  @ViewChild('isignOutBtn') isignOutBtn;
 
 
   options: DatepickerOptions = {
@@ -91,14 +74,9 @@ export class ProjectsComponent implements OnInit{
   constructor( 
     private serverService: ServerService,
     private route: ActivatedRoute,
-    private breadcrumbService : BreadcrumbService,
     private router: Router) {
-      this.datasetDropDown = new DropdownField();
-      this.datasetDropDown.options = [];
-      this.datasets = [];
       this.statusDropDown = new DropdownField();
       this.statusDropDown.options= [{key:'0', value:"Active"},{key:'1', value:"Inactive"}]
-      //this.projects = [];
       this.project = this.getEmptyProject();
   }
 
@@ -123,10 +101,6 @@ getEmptyProject(){
 
     this.getProjects();
 
-    this.breadcrumbService.clearAll();
-    this.breadcrumbData.push({label:'My Projects', routerLink:"/projects"});
-    this.breadcrumbService.setData(this.breadcrumbData);
-
   }
 
     
@@ -143,7 +117,7 @@ getProjects(muted? : boolean){
 );
 }
  
-
+/*
 getDMPs(){
   this.serverService.listDmpsLabelID().subscribe(
     response =>{
@@ -164,6 +138,7 @@ getDMPs(){
     }
   )
 }
+*/
 
 showDatasets(){ //dmpId, event
   //this.dataSetVisibe = true;
@@ -192,7 +167,7 @@ SaveProject(){
   $("#newEditProjectModal").modal("hide");
 }
 
-  newProject(item){
+  newProject(){
     this.project = this.getEmptyProject();
     $("#newEditProjectModal").modal("show");
 

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

@@ -1,28 +0,0 @@
-import { OnInit, Injectable, EventEmitter } 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>>();
-    
-    ngOnInit() {
-    }
-    
-    setData(breadcrumbData : Array<MenuItem>){
-        this.breadcrumbDataEmitter.emit(breadcrumbData);
-    }
-
-    setHome(breadcrumbHome: MenuItem) {
-        this.breadcrumbHomeEmitter.emit(breadcrumbHome);
-    }
-
-    clearAll(){
-        this.breadcrumbDataEmitter.emit(new Array<MenuItem>());
-    }
-
-}

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

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

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

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

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

@@ -0,0 +1,100 @@
+import { Component, OnInit } from '@angular/core';
+import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, ActivatedRoute, NavigationEnd } from '@angular/router';
+import {BreadcrumbModule,MenuItem} from 'primeng/primeng';
+
+@Component({
+  selector: 'breadcrumb',
+  templateUrl: './breadcrumb.component.html',
+  styleUrls: ['./breadcrumb.component.css']
+})
+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(
+      event =>{
+        console.log("Router event captured")
+        console.log(event)
+        
+
+        if(event instanceof NavigationEnd){
+          //this.breadcrumbData.push("")
+          console.log(event.urlAfterRedirects);
+          console.log(this.route);
+
+          
+          //this.breadcrumbData.length = 0;
+          this.route.children.forEach( child => {
+            let menuItem : MenuItem = this.guessMenuItemFromActivatedRoute(child, event);
+            if(menuItem != null) {
+              this.adaptBreadcrumbByMenuItem(menuItem);
+              //this.breadcrumbData.push(menuItem);
+            }
+          })
+
+        }
+      });
+
+  }
+
+
+  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)
+      menuItem = {"label": label, "routerLink": url, "queryParams" : params };
+
+    console.log("COMPONENT NAME="+componentName);
+
+    return menuItem;
+  }
+
+
+  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);
+
+  }
+
+
+
+
+}