From 48a7cb06068586a95956c18e409d94a2bd5b8a9f Mon Sep 17 00:00:00 2001
From: Nikolaos Laskaris <laskarisn@di.uoa.gr>
Date: Thu, 16 Nov 2017 16:16:09 +0200
Subject: [PATCH] Adding Detailed DMP

---
 dmp-frontend/src/app/app-routing.module.ts         |  3 +++
 dmp-frontend/src/app/dmps/dmp.component.css        |  5 +++++
 dmp-frontend/src/app/dmps/dmp.component.ts         |  5 +++++
 dmp-frontend/src/app/dmps/dmps.html                |  2 +-
 .../src/app/form/dynamic-form.component.html       |  2 +-
 .../viewers/dmp-detailed/dmp-detailed.component.ts |  3 ++-
 .../app/widgets/breadcrumb/breadcrumb.component.ts | 14 ++++++++++----
 7 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/dmp-frontend/src/app/app-routing.module.ts b/dmp-frontend/src/app/app-routing.module.ts
index 1a43546f1..b111ec368 100644
--- a/dmp-frontend/src/app/app-routing.module.ts
+++ b/dmp-frontend/src/app/app-routing.module.ts
@@ -10,6 +10,8 @@ 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 { DmpDetailedComponent } from './viewers/dmp-detailed/dmp-detailed.component';
+
 
 const appRoutes: Routes = [
   //{ path: 'dynamic-form/:id', component: DynamicFormComponent, canActivate: [AuthGuard] },
@@ -18,6 +20,7 @@ const appRoutes: Routes = [
   { path: 'login', component: MainSignInComponent},
   { path: 'projects', component: ProjectsComponent},
   { path: 'dmps', component: DmpComponent},
+  { path: 'dmp', component: DmpDetailedComponent },
   { path: 'workspace', component: UserWorkspaceComponent},
   { path: 'welcome', component: EmptyComponent},
   { path: '',   redirectTo: '/login', pathMatch: 'full' },
diff --git a/dmp-frontend/src/app/dmps/dmp.component.css b/dmp-frontend/src/app/dmps/dmp.component.css
index 0e7b1daa7..f158a1bec 100644
--- a/dmp-frontend/src/app/dmps/dmp.component.css
+++ b/dmp-frontend/src/app/dmps/dmp.component.css
@@ -61,4 +61,9 @@ tr.hover:hover > * {
 
 .centered-text{
     text-align: center;
+}
+
+.url-like{
+    color: #0645AD;
+    cursor: pointer;
 }
\ 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 d078346c0..7d0b32889 100644
--- a/dmp-frontend/src/app/dmps/dmp.component.ts
+++ b/dmp-frontend/src/app/dmps/dmp.component.ts
@@ -264,6 +264,11 @@ export class DmpComponent implements OnInit{
     this.router.navigate(['/dataset'], { queryParams: { "dmpid":item.id , "label":item.label}});
   }
 
+  viewDetailedDMP(dmp){
+    console.log(dmp)
+    this.router.navigate(['/dmp'], { queryParams: { "dmpid":dmp.id, "label":dmp.label }});
+  }
+
 
 
 }
diff --git a/dmp-frontend/src/app/dmps/dmps.html b/dmp-frontend/src/app/dmps/dmps.html
index 0a547677a..7118ba627 100644
--- a/dmp-frontend/src/app/dmps/dmps.html
+++ b/dmp-frontend/src/app/dmps/dmps.html
@@ -65,7 +65,7 @@
 
         <tr *ngFor="let dmp of mf.data" class="hover">
             <td [ngClass]="{true:'visible', false:'invisible'}[showIDs]">{{dmp?.id}}</td>
-            <td>{{dmp?.label}}</td>
+            <td class="url-like" (click)="viewDetailedDMP(dmp)">{{dmp?.label}}</td>
             <td style="width:20px;">{{dmp?.version}}</td>
             <td style="width:300px;">{{dmp?.previous}}</td>
             <td>{{dmp?.project?.label}}</td>
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.html b/dmp-frontend/src/app/form/dynamic-form.component.html
index 55541df34..311dee99e 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.html
+++ b/dmp-frontend/src/app/form/dynamic-form.component.html
@@ -44,7 +44,7 @@
 			
 				<div >
 					<div class="progress">
-						<div class="progress-bar" role="progressbar" aria-valuenow= "" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': dirtyValues + '%'}">
+						<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow= "" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': dirtyValues + '%'}">
 						<!-- {{dirtyValues}}% -->
 						</div>
 					</div>
diff --git a/dmp-frontend/src/app/viewers/dmp-detailed/dmp-detailed.component.ts b/dmp-frontend/src/app/viewers/dmp-detailed/dmp-detailed.component.ts
index 8976abfb9..6173c090d 100644
--- a/dmp-frontend/src/app/viewers/dmp-detailed/dmp-detailed.component.ts
+++ b/dmp-frontend/src/app/viewers/dmp-detailed/dmp-detailed.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-dmp-detailed',
+  selector: 'dmp-detailed',
   templateUrl: './dmp-detailed.component.html',
   styleUrls: ['./dmp-detailed.component.css']
 })
@@ -10,6 +10,7 @@ export class DmpDetailedComponent implements OnInit {
   constructor() { }
 
   ngOnInit() {
+    
   }
 
 }
diff --git a/dmp-frontend/src/app/widgets/breadcrumb/breadcrumb.component.ts b/dmp-frontend/src/app/widgets/breadcrumb/breadcrumb.component.ts
index a86f3bff2..d7e5f3612 100644
--- a/dmp-frontend/src/app/widgets/breadcrumb/breadcrumb.component.ts
+++ b/dmp-frontend/src/app/widgets/breadcrumb/breadcrumb.component.ts
@@ -33,10 +33,7 @@ export class BreadcrumbComponent implements OnInit {
           //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);
-            }
+            this.adaptBreadcrumbByMenuItem(menuItem);
           })
 
         }
@@ -69,6 +66,10 @@ export class BreadcrumbComponent implements OnInit {
       label = "Form of dataset '"+params["label"]+"'";
     }
 
+    if(componentName == "DmpDetailedComponent"){
+      label = "Details of DMP '"+params["label"]+"'";
+    }
+
     
     if(label != null)
       menuItem = {"label": label, "routerLink": url, "queryParams" : params };
@@ -81,6 +82,11 @@ export class BreadcrumbComponent implements OnInit {
 
   adaptBreadcrumbByMenuItem(menuItem : MenuItem){
 
+    if(menuItem==null){
+      this.breadcrumbData.length = 0;
+      return;
+    }
+
     let breadcrumbDataNew: MenuItem[] = new Array<MenuItem>();
     for(var i=0; i<this.breadcrumbData.length;i++){
       if(this.breadcrumbData[i].label == menuItem.label)