From 4aa63d0c614bd34ed828395f5d942110f8d0b552 Mon Sep 17 00:00:00 2001
From: Nikolaos Laskaris <laskarisn@di.uoa.gr>
Date: Wed, 15 Nov 2017 00:51:39 +0200
Subject: [PATCH] breadcrumb

---
 dmp-frontend/src/app/app.component.html       |   2 +-
 dmp-frontend/src/app/app.component.ts         |  20 +-
 .../src/app/datasets/dataset.component.ts     |   1 +
 dmp-frontend/src/app/datasets/dataset.html    | 254 ++++++------
 dmp-frontend/src/app/dmps/dmp.component.css   |   5 +
 dmp-frontend/src/app/dmps/dmp.component.ts    | 378 +++++++++---------
 dmp-frontend/src/app/dmps/dmps.html           |  25 +-
 .../src/app/form/dynamic-form.component.css   |   4 +-
 .../main-sign-in/main-sign-in.component.ts    |  10 +-
 .../src/app/projects/projects.component.ts    |  11 +-
 .../src/app/services/breadcrumb.service.ts    |  13 +-
 .../src/app/services/login/token.service.ts   |   1 -
 12 files changed, 364 insertions(+), 360 deletions(-)

diff --git a/dmp-frontend/src/app/app.component.html b/dmp-frontend/src/app/app.component.html
index c0605e7cc..c765eeeb1 100644
--- a/dmp-frontend/src/app/app.component.html
+++ b/dmp-frontend/src/app/app.component.html
@@ -9,7 +9,7 @@
     -->
       <div class="nav navbar-nav navbar-left">
         <div class="dropdown" [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]">
-            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Quick Navigate <span class="caret"></span> </button>
+            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Go To <span class="caret"></span> </button>
             <ul class="dropdown-menu">
               <li><a class="cursor" (click)="goToDMPs()">My DMPs</a></li>
               <li><a class="cursor" (click)="goToProjects()">My Projects</a></li>
diff --git a/dmp-frontend/src/app/app.component.ts b/dmp-frontend/src/app/app.component.ts
index b800a4376..e6e2273b3 100644
--- a/dmp-frontend/src/app/app.component.ts
+++ b/dmp-frontend/src/app/app.component.ts
@@ -26,31 +26,19 @@ export class AppComponent implements OnInit {
   sliderExpanded : boolean = false;
 
   
-  breadcrumbHome: MenuItem = {icon: 'fa fa-home'};
+  breadcrumbHome: MenuItem = {icon: 'fa fa-home', routerLink: "/welcome"};
   breadcrumbData: MenuItem[] = new Array<MenuItem>();
   
 
 
-  /*
-  breadcrumbData: MenuItem[] = [
-    {label:'Categories'},
-    {label:'Sports'},
-    {label:'Football'},
-    {label:'Countries'},
-    {label:'Spain'},
-    {label:'F.C. Barcelona'},
-    {label:'Squad'},
-    {label:'Lionel Messi', url: '/login'}
-  ];
-  */
-
-
   constructor(private tokenService : TokenService, private router: Router, private breadcrumbService  : BreadcrumbService) {
 
   }
 
   ngOnInit() {
 
+    this.clearbreadCrumb();
+
     this.breadcrumbService.breadcrumbDataEmitter.subscribe(
       (data) => {
         this.breadcrumbData = data;
@@ -92,7 +80,9 @@ export class AppComponent implements OnInit {
   }
   
   logout(){
+    this.breadcrumbService.clearAll();
     this.tokenService.logout();
+    location.reload();
   }
 
 
diff --git a/dmp-frontend/src/app/datasets/dataset.component.ts b/dmp-frontend/src/app/datasets/dataset.component.ts
index 2868e63bd..57c66c9ae 100644
--- a/dmp-frontend/src/app/datasets/dataset.component.ts
+++ b/dmp-frontend/src/app/datasets/dataset.component.ts
@@ -71,6 +71,7 @@ export class DatasetsComponent implements OnInit {
   }
 
   constructor(
+    
     private serverService: ServerService,
     private route: ActivatedRoute,
     private router: Router,
diff --git a/dmp-frontend/src/app/datasets/dataset.html b/dmp-frontend/src/app/datasets/dataset.html
index f803d3d69..572db357f 100644
--- a/dmp-frontend/src/app/datasets/dataset.html
+++ b/dmp-frontend/src/app/datasets/dataset.html
@@ -1,145 +1,145 @@
 
 <app-spinner> </app-spinner>
-    <table class="table table-striped" [mfData]="tableData | datasetTableFilter : filterQuery | datasetstatusFilter: statusFilter" #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage"
-        [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
+<table class="table table-striped" [mfData]="tableData | datasetTableFilter : filterQuery | datasetstatusFilter: statusFilter" #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage"
+    [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
 
-        <thead>
-            <tr>
-                <th colspan="1">
-                    <input class="form-control" [(ngModel)]="filterQuery" placeholder='Search in Labels' />
-                </th>
-                <th colspan="1">
-                    <!-- <input class="form-control" [(ngModel)]="versionFilter" placeholder='Filter' /> -->                    
-                    <select class="form-control" [id]="statusid" [(ngModel)]="statusFilter" [name]="statusDropDown" #datasetfield >
-                        <option *ngFor="let opt of statusDropDown.options" [value]="opt.key">{{opt.value}}</option>
-                    </select>
-                </th>
-                <th>
-                    <button class="btn btn-default" (click)="getDatasets('false')">
-                        <span class="glyphicon glyphicon-refresh"></span>
-                      </button>
-                </th>
-            </tr>
-            <tr>
-                <th [ngClass]="{true:'visible', false:'invisible'}[showIDs]">
-                    <mfDefaultSorter by="id">ID</mfDefaultSorter>
-                </th>
-                <th>
-                    <mfDefaultSorter by="label">Label</mfDefaultSorter>
-                </th>                
-                <th>
-                    <mfDefaultSorter by="uri">Uri</mfDefaultSorter>
-                </th>
-                <th>
-                    <mfDefaultSorter by="profile">Profile</mfDefaultSorter>
-                </th>
-                <th>
-                    <mfDefaultSorter by="description">Description</mfDefaultSorter>
-                </th>
-                <th>
-                    <mfDefaultSorter by="created">Created at</mfDefaultSorter>
-                </th>
-                <th>
-                    <mfDefaultSorter by="status">Status</mfDefaultSorter>
-                </th>
-                <th>
-                    Actions
-                </th>
+    <thead>
+        <tr>
+            <th colspan="1">
+                <input class="form-control" [(ngModel)]="filterQuery" placeholder='Search in Labels' />
+            </th>
+            <th colspan="1">
+                <!-- <input class="form-control" [(ngModel)]="versionFilter" placeholder='Filter' /> -->                    
+                <select class="form-control" [id]="statusid" [(ngModel)]="statusFilter" [name]="statusDropDown" #datasetfield >
+                    <option *ngFor="let opt of statusDropDown.options" [value]="opt.key">{{opt.value}}</option>
+                </select>
+            </th>
+            <th>
+                <button class="btn btn-default" (click)="getDatasets('false')">
+                    <span class="glyphicon glyphicon-refresh"></span>
+                    </button>
+            </th>
+        </tr>
+        <tr>
+            <th [ngClass]="{true:'visible', false:'invisible'}[showIDs]">
+                <mfDefaultSorter by="id">ID</mfDefaultSorter>
+            </th>
+            <th>
+                <mfDefaultSorter by="label">Label</mfDefaultSorter>
+            </th>                
+            <th>
+                <mfDefaultSorter by="uri">Uri</mfDefaultSorter>
+            </th>
+            <th>
+                <mfDefaultSorter by="profile">Profile</mfDefaultSorter>
+            </th>
+            <th>
+                <mfDefaultSorter by="description">Description</mfDefaultSorter>
+            </th>
+            <th>
+                <mfDefaultSorter by="created">Created at</mfDefaultSorter>
+            </th>
+            <th>
+                <mfDefaultSorter by="status">Status</mfDefaultSorter>
+            </th>
+            <th>
+                Actions
+            </th>
 
-            </tr>
-        </thead>
-        <tbody>
-            <tr class="grayout-empty-table" *ngIf="!mf.data[0]">
-                <td colspan="7">No elements</td>
-            </tr>
+        </tr>
+    </thead>
+    <tbody>
+        <tr class="grayout-empty-table" *ngIf="!mf.data[0]">
+            <td colspan="7">No elements</td>
+        </tr>
 
-            <tr *ngFor="let dataset of mf.data" class="hover">
-                <td [ngClass]="{true:'visible', false:'invisible'}[showIDs]">{{dataset.id}}</td>
-                <td>{{dataset?.label}}</td>
-                <td>{{dataset?.uri}}</td>
-                <td>{{dataset?.profile?.label}}</td>
-                <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)">
-                        <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)">
-                         <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)">
-                         <i class="fa fa-list-alt fa-fw" data-toggle="tooltip" title="describe dataset" id="describeDataset"></i></a></td>
+        <tr *ngFor="let dataset of mf.data" class="hover">
+            <td [ngClass]="{true:'visible', false:'invisible'}[showIDs]">{{dataset.id}}</td>
+            <td>{{dataset?.label}}</td>
+            <td>{{dataset?.uri}}</td>
+            <td>{{dataset?.profile?.label}}</td>
+            <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)">
+                    <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)">
+                        <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)">
+                        <i class="fa fa-list-alt fa-fw" data-toggle="tooltip" title="describe dataset" id="describeDataset"></i></a></td>
 
-            </tr>
-        </tbody>
-        <tfoot>
-            <tr>
-                <td colspan="5">
-                    <button type="button" class="btn btn-info btncustom" (click)="newDataset(item)">New Dataset</button>
-                    <mfBootstrapPaginator [rowsOnPageSet]="[5,20,40]"></mfBootstrapPaginator>
-                </td>
-            </tr>
-        </tfoot>
-    </table>
+        </tr>
+    </tbody>
+    <tfoot>
+        <tr>
+            <td colspan="5">
+                <button type="button" class="btn btn-info btncustom" (click)="newDataset(item)">New Dataset</button>
+                <mfBootstrapPaginator [rowsOnPageSet]="[5,20,40]"></mfBootstrapPaginator>
+            </td>
+        </tr>
+    </tfoot>
+</table>
 
 
 
-    <div class="modal fade" id="newDatasetModal" tabindex="-1" role="dialog" aria-labelledby="newDatasetModalLabel" aria-hidden="true">
-        <div class="modal-dialog" role="document">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" >Dataset</h5>
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                  </button>
-                </div>
-                <div class="modal-body">
-                    <form #newProjectForm="ngForm" (ngSubmit)="SaveDataset()">
-                        <div class="form-group">
-                            <label for="recipient-name" class="col-form-label">Dataset Profile:</label>
-                            <select class="form-control" id="datasetProfileDropDownKey" [(ngModel)]="dataset.profile" name="datasetProfileDropDown"
-                                #datasetfield>
-                                      <option *ngFor="let opt of datasetProfileDropDown.options" [value]="opt.key">{{opt.value}}</option>
-                                      </select>
+<div class="modal fade" id="newDatasetModal" tabindex="-1" role="dialog" aria-labelledby="newDatasetModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" >Dataset</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <form #newProjectForm="ngForm" (ngSubmit)="SaveDataset()">
+                    <div class="form-group">
+                        <label for="recipient-name" class="col-form-label">Dataset Profile:</label>
+                        <select class="form-control" id="datasetProfileDropDownKey" [(ngModel)]="dataset.profile" name="datasetProfileDropDown"
+                            #datasetfield>
+                                    <option *ngFor="let opt of datasetProfileDropDown.options" [value]="opt.key">{{opt.value}}</option>
+                                    </select>
+                    </div>
+                    <div class="form-group">
+                        <label for="label-name" class="form-control-label">Label:</label>
+                        <input type="text" class="form-control" id="label-name" [(ngModel)]="dataset.label" name="label">
+                    </div>
+                    <div class="form-group">
+                        <label for="abbreviation-text" class="form-control-label">DMP:</label>
+                        <input class="form-control" id="abbreviation-text" [(ngModel)]="dataset.dmp" name="dmp" disabled>
+                    </div>
+                    <div class="form-group">
+                        <label for="uri-text" class="form-control-label">Uri:</label>
+                        <input class="form-control" id="uri-text" [(ngModel)]="dataset.uri" name="uri">
+                    </div>
+                    <div class="form-group">
+                            <label for="status-name" class="col-form-label">Status:</label>
+                            <select class="form-control" id="statusid" [(ngModel)]="dataset.status" name="statusDropDown" #datasetfield>
+                            <option *ngFor="let opt of statusDropDown.options" [value]="opt.key">{{opt.value}}</option>
+                            </select>
                         </div>
                         <div class="form-group">
-                            <label for="label-name" class="form-control-label">Label:</label>
-                            <input type="text" class="form-control" id="label-name" [(ngModel)]="dataset.label" name="label">
-                        </div>
-                        <div class="form-group">
-                            <label for="abbreviation-text" class="form-control-label">DMP:</label>
-                            <input class="form-control" id="abbreviation-text" [(ngModel)]="dataset.dmp" name="dmp" disabled>
-                        </div>
-                        <div class="form-group">
-                            <label for="uri-text" class="form-control-label">Uri:</label>
-                            <input class="form-control" id="uri-text" [(ngModel)]="dataset.uri" name="uri">
-                        </div>
-                        <div class="form-group">
-                                <label for="status-name" class="col-form-label">Status:</label>
-                                <select class="form-control" id="statusid" [(ngModel)]="dataset.status" name="statusDropDown" #datasetfield>
-                                <option *ngFor="let opt of statusDropDown.options" [value]="opt.key">{{opt.value}}</option>
-                                </select>
+                                <label for="abbreviation-text" class="form-control-label">Description:</label>
+                                <textarea rows="3" class="form-control" id="abbreviation-text" [(ngModel)]="dataset.description" name="description"></textarea>
                             </div>
-                            <div class="form-group">
-                                    <label for="abbreviation-text" class="form-control-label">Description:</label>
-                                    <textarea rows="3" class="form-control" id="abbreviation-text" [(ngModel)]="dataset.description" name="description"></textarea>
-                                </div>
-                        <!-- <div class="form-group">
-                            <label for="start-date" class="form-control-label">Properties:</label>
-                            <input class="form-control" id="startDate-date" [(ngModel)]= "dataset.properties" name = "properties">
-                        </div> -->
-                        <!-- <div class="form-group">
-                            <label for="end-date" class="form-control-label">End Date:</label>
-                            <input class="form-control" id="endDate-date" [(ngModel)]= "dataset.endDate" name = "endDate">
-                        </div> -->
-                    </form>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                    <button type="submit" class="btn btn-primary" (click)="SaveDataset();">Save</button>
-                    <button type="submit" class="btn btn-primary" (click)="SaveDescribeDataset();">Save and describe</button>
-                </div>
+                    <!-- <div class="form-group">
+                        <label for="start-date" class="form-control-label">Properties:</label>
+                        <input class="form-control" id="startDate-date" [(ngModel)]= "dataset.properties" name = "properties">
+                    </div> -->
+                    <!-- <div class="form-group">
+                        <label for="end-date" class="form-control-label">End Date:</label>
+                        <input class="form-control" id="endDate-date" [(ngModel)]= "dataset.endDate" name = "endDate">
+                    </div> -->
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                <button type="submit" class="btn btn-primary" (click)="SaveDataset();">Save</button>
+                <button type="submit" class="btn btn-primary" (click)="SaveDescribeDataset();">Save and describe</button>
             </div>
         </div>
     </div>
+</div>
 
 <!-- Confirmation module- do not delete --> 
 <confirmation [confirmationID]="'delete-dataset-confirm'" [confirmationTitle]="'Caution'" [confirmationDescr]="'This action will delete this dataset. Are you sure you want to delete this dataset ? This is not revertable !'" (responseSender)="deleteDataset($event)"></confirmation>
diff --git a/dmp-frontend/src/app/dmps/dmp.component.css b/dmp-frontend/src/app/dmps/dmp.component.css
index bfcb05393..0bcb42a63 100644
--- a/dmp-frontend/src/app/dmps/dmp.component.css
+++ b/dmp-frontend/src/app/dmps/dmp.component.css
@@ -51,4 +51,9 @@ tr.hover:hover > * {
 
 .table>thead>tr>th.rowFilterTopBorder{
     border-top: 0px solid white;
+}
+
+.table-button {
+    font-size: 1em;
+    padding: 2px;
 }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/dmps/dmp.component.ts b/dmp-frontend/src/app/dmps/dmp.component.ts
index fa0f93c23..2e53648f3 100644
--- a/dmp-frontend/src/app/dmps/dmp.component.ts
+++ b/dmp-frontend/src/app/dmps/dmp.component.ts
@@ -48,6 +48,7 @@ export class DmpComponent implements OnInit{
   public stateConfig : any = {
     "dmps" : {
       "tableVisible" : true,
+      "dmpDescriptionVisible" : false,
       "selectedID" : null,
       "selectedLabel" : null
     },
@@ -59,27 +60,11 @@ export class DmpComponent implements OnInit{
   }
 
 
-  breadcrumbHome: MenuItem = {icon: 'fa fa-home'};
-
-  /*
-  breadcrumbData: MenuItem[] = [];
-  */
-  
-  breadcrumbData: MenuItem[] = [
-    {label:'Categories'},
-    {label:'Sports'},
-    {label:'Football'},
-    {label:'Countries'},
-    {label:'Spain'},
-    {label:'F.C. Barcelona'},
-    {label:'Squad'},
-    {label:'Lionel Messi', url: 'https://en.wikipedia.org/wiki/Lionel_Messi'}
-  ];
+  //breadcrumbHome: MenuItem = {icon: 'fa fa-home'};
+  breadcrumbData: MenuItem[] = new Array<MenuItem>();
 
 
-
-
-  dmp:any;
+  dmp : any;
 
   @Input() projectsDropDown:DropdownField;
   @Input() statusDropDown: DropdownField;
@@ -128,190 +113,199 @@ export class DmpComponent implements OnInit{
       }
     )
 
+    this.showDmps();
+
+  }
+
+  showDMPDetails(dmp) {
+    console.log("Showing details for dmp : " + JSON.stringify(dmp));
+    // TODO: Add here code to show details of dmp. 
+    //1. hide dmp table and show component for detailed dmp 
+    //2. also edit the breadcrumb
+  }
+
+
+  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);
-    this.breadcrumbService.setData(this.breadcrumbData);
-    
-
   }
 
 
 
-getDmps(muted? : boolean){
-  this.serverService.getDmpOfUser().subscribe( 
-    response => {
-      this.tableData = response;
-      if(muted && muted!=true)
-        simple_notifier("success",null,"Refreshed DMPs");
-    },
-    (err: HttpErrorResponse) => {
-      simple_notifier("danger",null,"Could not refresh DMPs");
-    }      
-  ); 
-}
-
-newDMP(){ 
-  console.log(this.dmp, this.dmp.projectsDropDownKey);  
-
-  this.dmp.project = {"id" : this.dmp.project};
-  this.dmp["version"] = 1;
-  //this.dmp.profile = {};
-  
-  this.serverService.createDmpForCurrentUser(this.dmp)
-  .subscribe(
-    response =>{
-      simple_notifier("success",null,"DMP created");
-      this.getDmps();
-    },
-    error => {
-      simple_notifier("danger",null,"Could not create the DMP");
-    }
-  );
-  $("#newDmpModal").modal("hide");
-}
-
-updateDMP(){ 
-
-  this.dmp.project = {"id":this.dmp.project};
-
-  this.serverService.updateDmp(this.dmp)
-  .subscribe(
-    response =>{
-      simple_notifier("success",null,"Edited the DMP");
-      this.getDmps();
-    },
-    error =>{
-      simple_notifier("danger",null,"Failed to edit the DMP");
-    }
-  );
-  $("#newDmpModal").modal("hide");
-  $("#newVersionDmpModal").modal("hide");
-  
-}
-
-cloneDMP(dmp){
-  dmp = {"id": dmp.id, "label": dmp.label};
-  this.serverService.cloneDmp(dmp).subscribe(
-    response => {
-      simple_notifier("success",null,"Successfully cloned the DMP");
-      this.getDmps();
-    },
-    error => {
-      simple_notifier("danger",null,"Failed to clone the DMP");
-    }
-  );
-  $("#newVersionDmpModal").modal("hide");
-}
-
-SaveDmp(){ 
-  if (this.dmp.id == null)
-    this.newDMP();
-  else
-    this.updateDMP();
-}
-
-
-selectDmp(item){ 
-  this.stateConfig.dmps.selectedID = item.id;
-  this.stateConfig.dmps.selectedLabel = item.label;
-  if(this.stateConfig.datasets.tableVisible == false)
-    this.stateConfig.datasets.tableVisible = true;
-  else 
-    this.datasetsComponent.getDatasetForDmpMethod(item.id);
-}
-
-editRow(item, elementId){ 
-  if (elementId == "editDMP"){
-    this.dmp = item;
-    this.dmp.project = item.project.id;
-    
-    //setTimeout(function() {
-      $("#newDmpModal").modal("show");  
-    //},0);
-    
-  }
-  if(elementId == "changeVersionDMP"){
-    
-
-    this.dmp = item;
-    this.dmp.project = item.project.id;
-    
-    $("#newVersionDmpModal").modal("show");
-  }
-  
-  if(elementId == "showDatasets"){
-    this.selectDmp(item);
-    
-  }
-
-  return false; //return false will prevent browser from following the link
-  
-}
-
-newDmp(item){
-  this.dmp.label = "";
-  this.dmp.id = null;
-  this.dmp.version = "";
- // this.dmp.profile = "";
-  this.dmp.profileData = "";
-  this.dmp.project = "";
-
-  $("#newDmpModal").modal("show");
-}
-
-markDMPForDelete(dmp){
-  this.dmp = dmp;
-}
-
-deleteDMP(confirmation){
-  if(confirmation==true)
-    this.deleteRow(this.dmp);
-}
-
-deleteRow(dmp){
-
-  this.serverService.deleteDmp(dmp).subscribe( 
-    response => { 
-      simple_notifier("success",null,"Successfully deleted the DMP");
-      this.getDmps();
-    },
-    (err: HttpErrorResponse) => {
-      simple_notifier("danger",null,"Failed to delete the DMP");
-    }      
-  );
-
-}
-
-clickFilters(element){ 
-  if(element.textContent == "More filters")
-    element.textContent = "Less Filters";
-  else
-    element.textContent = "More Filters";
-  }
-
-SelectDMPStatus(dmp, event, oldValue){
-  console.log(dmp);
-  let cannotChangeStatus:boolean;
-  if(dmp.status == 2){
-    this.serverService.getDatasetForDmp({ "id": dmp.id }).subscribe(
+  getDmps(muted? : boolean){
+    this.serverService.getDmpOfUser().subscribe( 
       response => {
-        response.forEach(dataset => {
-          if(dataset.status !==2 || dataset.status !==3){
-            cannotChangeStatus=true;            
-          }
-          return;
-        });
-        if(cannotChangeStatus == true){          
-          dmp.status = 0;
-          $("#messageForChangingStatus").modal("show");
-        }
+        this.tableData = response;
+        if(muted && muted!=true)
+          simple_notifier("success",null,"Refreshed DMPs");
+      },
+      (err: HttpErrorResponse) => {
+        simple_notifier("danger",null,"Could not refresh DMPs");
+      }      
+    ); 
+  }
+
+  newDMP(){ 
+    console.log(this.dmp, this.dmp.projectsDropDownKey);  
+
+    this.dmp.project = {"id" : this.dmp.project};
+    this.dmp["version"] = 1;
+    //this.dmp.profile = {};
+    
+    this.serverService.createDmpForCurrentUser(this.dmp)
+    .subscribe(
+      response =>{
+        simple_notifier("success",null,"DMP created");
+        this.getDmps();
       },
       error => {
-        console.log("could not retrieve dataset for dpm: "+dmp.id);
+        simple_notifier("danger",null,"Could not create the DMP");
       }
     );
+    $("#newDmpModal").modal("hide");
+  }
+
+  updateDMP(){ 
+
+    this.dmp.project = {"id":this.dmp.project};
+
+    this.serverService.updateDmp(this.dmp)
+    .subscribe(
+      response =>{
+        simple_notifier("success",null,"Edited the DMP");
+        this.getDmps();
+      },
+      error =>{
+        simple_notifier("danger",null,"Failed to edit the DMP");
+      }
+    );
+    $("#newDmpModal").modal("hide");
+    $("#newVersionDmpModal").modal("hide");
+    
+  }
+
+  cloneDMP(dmp){
+    dmp = {"id": dmp.id, "label": dmp.label};
+    this.serverService.cloneDmp(dmp).subscribe(
+      response => {
+        simple_notifier("success",null,"Successfully cloned the DMP");
+        this.getDmps();
+      },
+      error => {
+        simple_notifier("danger",null,"Failed to clone the DMP");
+      }
+    );
+    $("#newVersionDmpModal").modal("hide");
+  }
+
+  SaveDmp(){ 
+    if (this.dmp.id == null)
+      this.newDMP();
+    else
+      this.updateDMP();
+  }
+
+
+  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;
+    $("#newDmpModal").modal("show");  
+  }
+
+  editDmpVersion(item){ 
+    this.dmp = item;
+    this.dmp.project = item.project.id;
+    $("#newVersionDmpModal").modal("show");
+  }
+
+  newDmp(item){
+    this.dmp.label = "";
+    this.dmp.id = null;
+    this.dmp.version = "";
+  // this.dmp.profile = "";
+    this.dmp.profileData = "";
+    this.dmp.project = "";
+
+    $("#newDmpModal").modal("show");
+  }
+
+  markDMPForDelete(dmp){
+    this.dmp = dmp;
+  }
+
+  deleteDMP(confirmation){
+    if(confirmation==true)
+      this.deleteRow(this.dmp);
+  }
+
+  deleteRow(dmp){
+
+    this.serverService.deleteDmp(dmp).subscribe( 
+      response => { 
+        simple_notifier("success",null,"Successfully deleted the DMP");
+        this.getDmps();
+      },
+      (err: HttpErrorResponse) => {
+        simple_notifier("danger",null,"Failed to delete the DMP");
+      }      
+    );
+
+  }
+
+  clickFilters(element){ 
+    if(element.textContent == "More filters")
+      element.textContent = "Less Filters";
+    else
+      element.textContent = "More Filters";
+    }
+
+  SelectDMPStatus(dmp, event, oldValue){
+    console.log(dmp);
+    let cannotChangeStatus:boolean;
+    if(dmp.status == 2){
+      this.serverService.getDatasetForDmp({ "id": dmp.id }).subscribe(
+        response => {
+          response.forEach(dataset => {
+            if(dataset.status !==2 || dataset.status !==3){
+              cannotChangeStatus=true;            
+            }
+            return;
+          });
+          if(cannotChangeStatus == true){          
+            dmp.status = 0;
+            $("#messageForChangingStatus").modal("show");
+          }
+        },
+        error => {
+          console.log("could not retrieve dataset for dpm: "+dmp.id);
+        }
+      );
+    }
+    
   }
-  
-}
 
 
 }
diff --git a/dmp-frontend/src/app/dmps/dmps.html b/dmp-frontend/src/app/dmps/dmps.html
index e196b6e6b..00f8d484d 100644
--- a/dmp-frontend/src/app/dmps/dmps.html
+++ b/dmp-frontend/src/app/dmps/dmps.html
@@ -1,8 +1,3 @@
-<!--
-<div class="col-md-12 ">
-    <p-breadcrumb  [model]="breadcrumbData" [home]="breadcrumbHome"></p-breadcrumb>
-</div>
--->
 
 <table *ngIf="stateConfig.dmps.tableVisible" class="table table-striped customTable" [mfData]="tableData | dmpTableFilter : filterQuery | dmpVersionFilter : versionFilter |dmpstatusFilter: statusFilter"
     #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
@@ -57,6 +52,9 @@
             <th>
                 Actions
             </th>
+            <th>
+                
+            </th>
 
         </tr>
     </thead>
@@ -75,20 +73,25 @@
             <td>{{dmp?.created | date:'yyyy-MM-dd HH:mm:ss Z'}}</td>
             <td>{{dmp?.status | statusToString }}</td>
             <td>
-                <a class="editGridColumn cursor-link" (click)="editRow(dmp, 'editDMP')"> <!--btn btn-primary btn-rounded css for button style -->
+                <a class="editGridColumn cursor-link" (click)="editDmp(dmp)"> <!--btn btn-primary btn-rounded css for button style -->
                     <i class="fa fa-pencil fa-fw" data-toggle="tooltip" title="edit properties" id="editDMP"></i></a>
-                <a class="editGridColumn cursor-link" (click)="editRow(dmp, 'changeVersionDMP')">
+                <a class="editGridColumn cursor-link" (click)="editDmpVersion(dmp)">
                     <i class="fa fa-clone fa-fw" data-toggle="tooltip" title="create new version" id="changeVersionDMP"></i> </a>
                 <a class="editGridColumn cursor-link" (click)="markDMPForDelete(dmp)">
                     <i class="fa fa-eraser fa-fw" data-toggle="modal" data-target="#delete-dmp-confirm"  title="delete DMP"></i> </a>
-                <a class="editGridColumn cursor-link" (click)="editRow(dmp, 'showDatasets')">
+                <!--
+                <a class="editGridColumn cursor-link" (click)="selectDmp(dmp)">
                     <i class="fa fa-table fa-fw" data-toggle="tooltip" title="show dataset for this DMP" id="showDatasets"></i></a>
+                -->
+            </td>
+            <td style="max-width:100px;">
+                <button type="button" class="btn btn-default table-button" (click)="showDatasetsOfDmp(dmp)"> <i class="fa fa-folder-o" aria-hidden="true"></i> Datasets</button>
             </td>
         </tr>
     </tbody>
     <tfoot>
         <tr>
-            <td colspan="7">
+            <td colspan="8">
                 <button type="button" class="btn btn-info btncustom" (click)="newDmp(item)">New Dmp</button>
                 <mfBootstrapPaginator [rowsOnPageSet]="[5,20,40]"></mfBootstrapPaginator>
             </td>
@@ -224,15 +227,11 @@
 </div>
 
 
-<!--Modal for DMPs-->
-<!-- <modal *ngIf="item && show" [(show)]="show" [item]="item" [(dataSetVisibe)]="stateConfig.datasets.tableVisible"></modal> -->
-
 <!--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>
 
 
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.css b/dmp-frontend/src/app/form/dynamic-form.component.css
index e3d90d93c..0656c2056 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.css
+++ b/dmp-frontend/src/app/form/dynamic-form.component.css
@@ -13,7 +13,7 @@
 }
 
 .parent-div {
-    height: calc(100vh - 60px); /* is height of window  minus heigh of header bar */
+    height: calc(100vh - 60px - 32px); /*  is height_of(window) - heigh_of(app-header-bar) - height_of(breadcrumb) */
     width:100%;
 }
 
@@ -60,7 +60,7 @@
 
 .form-body-container{
     padding-bottom: 10px;
-    height: calc(100vh - 85px - 138px);  /* is height of window minus heigh of app header bar minus height of form footer bar */
+    height: calc(100vh - 85px - 32px - 138px);  /* is height_of(window) - heigh_of(app-header-bar) - height_of(breadcrumb) - height_of(form-footer-bar) */
     overflow-y:scroll; 
 }
 
diff --git a/dmp-frontend/src/app/login/main-sign-in/main-sign-in.component.ts b/dmp-frontend/src/app/login/main-sign-in/main-sign-in.component.ts
index 1a20c152d..99a94acf0 100644
--- a/dmp-frontend/src/app/login/main-sign-in/main-sign-in.component.ts
+++ b/dmp-frontend/src/app/login/main-sign-in/main-sign-in.component.ts
@@ -3,6 +3,8 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 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;
@@ -20,12 +22,12 @@ export class MainSignInComponent implements OnInit {
   creds : any = {"username":"","password":""};
 
 
-  constructor( private fb: FormBuilder, private nativeLogin : NativeLoginService, private tokenService : TokenService, private router : Router) {
+  constructor( private fb: FormBuilder, private nativeLogin : NativeLoginService, private tokenService : TokenService, private router : Router, private breadcrumbService: BreadcrumbService) {
     
   }
 
 
-  createProjectEditorForm(){
+  createForm(){
 
     this.nativeLoginForm = this.fb.group({
       username: ['', Validators.required ],
@@ -36,8 +38,8 @@ export class MainSignInComponent implements OnInit {
 
 
   ngOnInit() {
-    this.createProjectEditorForm();
-    //debugger;
+    this.breadcrumbService.clearAll();
+    this.createForm();
     if(this.tokenService.isLoggedIn()){
       this.router.navigate(['/welcome'], { queryParams: { /*returnUrl: this.state.url*/ }});
     }
diff --git a/dmp-frontend/src/app/projects/projects.component.ts b/dmp-frontend/src/app/projects/projects.component.ts
index 8b9dad21e..82fe7f5f8 100644
--- a/dmp-frontend/src/app/projects/projects.component.ts
+++ b/dmp-frontend/src/app/projects/projects.component.ts
@@ -17,6 +17,8 @@ import { NgForm } from '@angular/forms';
 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';
 
@@ -83,11 +85,13 @@ export class ProjectsComponent implements OnInit{
     firstCalendarDay: 0 // 0 - Sunday, 1 - Monday
   };
 
-
+  //breadcrumbHome: MenuItem = {icon: 'fa fa-home'};
+  breadcrumbData: MenuItem[] = new Array<MenuItem>();
 
   constructor( 
     private serverService: ServerService,
     private route: ActivatedRoute,
+    private breadcrumbService : BreadcrumbService,
     private router: Router) {
       this.datasetDropDown = new DropdownField();
       this.datasetDropDown.options = [];
@@ -118,6 +122,11 @@ getEmptyProject(){
   ngOnInit() {
 
     this.getProjects();
+
+    this.breadcrumbService.clearAll();
+    this.breadcrumbData.push({label:'My Projects', routerLink:"/projects"});
+    this.breadcrumbService.setData(this.breadcrumbData);
+
   }
 
     
diff --git a/dmp-frontend/src/app/services/breadcrumb.service.ts b/dmp-frontend/src/app/services/breadcrumb.service.ts
index e7ad13548..631c3f6ef 100644
--- a/dmp-frontend/src/app/services/breadcrumb.service.ts
+++ b/dmp-frontend/src/app/services/breadcrumb.service.ts
@@ -1,16 +1,18 @@
-import { Injectable, EventEmitter } from '@angular/core';
+import { OnInit, Injectable, EventEmitter } from '@angular/core';
 import {Observable} from 'rxjs/Observable';
 import {MenuItem} from 'primeng/primeng';
 
 
 @Injectable()
-export class BreadcrumbService {
+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);
     }
@@ -19,5 +21,8 @@ export class BreadcrumbService {
         this.breadcrumbHomeEmitter.emit(breadcrumbHome);
     }
 
+    clearAll(){
+        this.breadcrumbDataEmitter.emit(new Array<MenuItem>());
+    }
 
 }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/services/login/token.service.ts b/dmp-frontend/src/app/services/login/token.service.ts
index 9d4fc5612..279093b0e 100644
--- a/dmp-frontend/src/app/services/login/token.service.ts
+++ b/dmp-frontend/src/app/services/login/token.service.ts
@@ -84,7 +84,6 @@ export class TokenService {
 
 
   logout(){
-    debugger;
     //set the log out actions here
     this.setLoggedIn(false);
     this.setEmail(null);