Adding Detailed DMP

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' },

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;
 }

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 }});
+  }
+
 
 
 }

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>

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>

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() {
+    
   }
 
 }

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)