changes on dmp-details and project-details

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

@@ -62,7 +62,6 @@ import { DmpVersionFilterPipe } from './pipes/dmp-version-filter.pipe';
 
 import { ProjectTableFilterPipe } from './pipes/project-table-filter.pipe';
 import { ProjectsComponent }  from './projects/projects.component';
-import { ProjectDetailComponent } from './projects/project.detail';
 import { ModalComponent } from './modal/modal.component';
 import { NgDatepickerModule } from 'ng2-datepicker';
 
@@ -91,7 +90,6 @@ import { ProjectDetailedComponent } from './viewers/project-detailed/project-det
     PageNotFoundComponent,
     HomepageComponent,
     ModalComponent,
-    ProjectDetailComponent,
     ProjectsComponent,
     DmpComponent,
     DatasetsComponent,

dmp-frontend/src/app/projects/project.detail.ts

@@ -1,33 +0,0 @@
-import 'rxjs/add/operator/switchMap';
-import { Component, OnInit, HostBinding } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
-import { Router, ActivatedRoute, ParamMap } from '@angular/router';
-
-@Component({
-  template: `
-  <div *ngIf="project">
-    <h3>"{{ project.name }}"</h3>
-    <div>
-      <label>Id: </label>{{ project.id }}</div>
-    <div>
-      <label>Name: </label>
-      <input [(ngModel)]="project.name" placeholder="name"/>
-    </div>
-  </div>
-  `
-})
-export class ProjectDetailComponent implements OnInit {
-
-
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-  ) {}
-
-  ngOnInit() {      
-    // this.hero$ = this.route.paramMap
-    //   .switchMap((params: ParamMap) =>
-    //     this.service.getHero(params.get('id')));
-  }
-
-}

dmp-frontend/src/app/projects/project.html

@@ -55,8 +55,8 @@
             <td [ngClass]="{true:'visible', false:'invisible'}[showIDs]">{{project?.id}}</td>
             <td>{{(project?.label?.length > 40) ? (project?.label | slice:0:40)+'...':(project?.label) }}</td>
             <td>{{project?.abbreviation}}</td>
-            <td>{{project?.startdate | date:'yyyy-MM-dd HH:mm:ss Z' }}</td>
+            <td>{{project?.startdate | date:'medium' }}</td>
-            <td>{{project?.enddate | date:'yyyy-MM-dd HH:mm:ss Z'}}</td>
+            <td>{{project?.enddate | date:'medium'}}</td>
             <td>{{project?.status | statusToString}}</td>
             <td>{{(project?.description?.length > 40) ? (project?.description | slice:0:40)+'...':(project?.description) }}</td>
             <td>

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

@@ -57,6 +57,11 @@ export class ServerService {
       return this.restBase.get("dmps/"+dmpid, {"eager": true});
   }
 
+  public getDmpHistory(dmpid: string){
+    return this.restBase.get("dmp/history/"+dmpid);
+  }
+
+
   public listDmpIDs(){
     return this.restBase.get("dmps");
   }
@@ -97,6 +102,10 @@ export class ServerService {
     return this.restBase.post("project/update", data);
   }
 
+  public getDmpsOfProject(projectID: string){
+    return this.restBase.get("project/dmps", {"id":projectID});
+  }
+
   public getAllDataSet(){
     return this.restBase.get("dataset/getAll");    
   }
@@ -145,6 +154,10 @@ public deleteDataset(dataset: any){
     return this.restBase.post("dataset/softdelete", dataset);
   }
 
+  public getUserByID(id : string){
+    return this.restBase.get("users/"+id);
+  }
+
   public whoami(){
     return this.restBase.get("user/whoami");
   }

dmp-frontend/src/app/viewers/dmp-detailed/dmp-detailed.component.css

@@ -1,20 +1,27 @@
 
 /* START - FOR DETAILS MODALS */
 
+.modal-content {
+  overflow-y: scroll;
+}
+
 .modal.modal-fullscreen .modal-dialog, 
 .modal.modal-fullscreen .modal-content {
     position: absolute;
-    left: 1%;
+    left: 15%;
-    right: 1%;
+    right: 15%;
-    top: 1%;
+    top: 5%;
-    bottom: 1%;
+    bottom: 5%;
 }
 .modal.modal-fullscreen .modal-dialog {
   margin: 0;
-  width: 98%;
+  width: 70%;
   animation-duration:0.5s;
 }
 .modal.modal-fullscreen .modal-content {
+  -moz-border-radius: 20px;
+  border-radius: 20px;
+  /*
   border: none;
   -moz-border-radius: 0;
   border-radius: 0;
@@ -22,6 +29,7 @@
   -moz-box-shadow: inherit;
   -o-box-shadow: inherit;
   box-shadow: inherit;
+  */
   /* change bg color below */
  /* background:#1abc9c; */
 }
@@ -44,3 +52,9 @@
   bottom: 0;
 }
 /* END - FOR DETAILS MODALS */
+
+
+.row {
+  padding-top:30px;
+  padding-bottom:30px;
+}

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

@@ -1,18 +1,75 @@
 
 <div class="modal fade modal-fullscreen  footer-to-bottom" id="dmp-details-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog animated zoomInLeft">
-        <div class="modal-content">
+        <div class="modal-content" id="dmp-modal-content">
             <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times" aria-hidden="true"></i></button>
-                <h4 class="modal-title">Modal title</h4>
+                <h4 style="text-align:center;" class="modal-title">Details</h4>
             </div>
             <div class="modal-body">
+                <!--
                     {{dmp | json}}
-                <p class="">One fine body…</p>
+                -->
+
+
+                <div class="container-fluid">
+
+                    <div class="row">
+                        <div class="col-md-6 row-cell"><b>Digital Management Plan: </b>{{dmp?.label}}</div>
+                        <div class="col-md-6 row-cell"><b>Project: </b>{{dmp?.project?.label}}</div>
+
+                    </div>
+
+                    <div class="row">
+                        <div class="col-md-6 row-cell"><b>Version:</b><span class="badge">{{dmp?.version}}</span></div>
+                        <div class="col-md-6 row-cell"><b>Previous DMPs:</b> 
+                            <ul>
+                                <li *ngFor="let previous of previousDMPs">{{ previous?.label }}</li>
+                            </ul>
+                        </div>
+
+                    </div>
+
+                    <div class="row">
+                        <div class="col-md-6 row-cell">
+                            <b>Creator:</b> {{dmp?.creator?.name}}
+                            
+                        </div>
+                        <div class="col-md-6 row-cell"><b>Users associated:</b> 
+                            <ul>
+                                <li *ngFor="let user of dmp?.users">{{ user?.name }}</li>
+                            </ul>
+                        </div>
+                        
+
+                    </div>
+
+                    <div class="row">
+                        <div class="col-md-6 row-cell"><b>Researchers:</b> 
+                            <div *ngIf="dmp?.researchers?.length==0" style="opacity: 0.5;">None</div>
+                            <ul *ngIf="dmp?.researchers?.length>1">
+                                <li *ngFor="let researcher of dmp?.researchers">{{ researcher?.label }}</li>
+                            </ul>
+                        </div>
+                        <div class="col-md-6 row-cell"><b>Organisations:</b> 
+                            <div *ngIf="dmp?.organisations?.length==0" style="opacity: 0.5;">None</div>
+                            <ul *ngIf="dmp?.organisations?.length>1">
+                                <li *ngFor="let organisation of dmp?.organisations">{{ organisation?.label }}</li>
+                            </ul>
+                        </div>
+                    </div>
+
+
+
+                </div>
+
+                
             </div>
             <div class="modal-footer">
+                <!--
                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                 <button type="button" class="btn btn-primary">Save changes</button>
+                -->
             </div>
         </div>
     </div>

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

@@ -3,11 +3,18 @@ import { Router, ActivatedRoute, ParamMap, Params } from '@angular/router';
 import {Location} from '@angular/common';
 import { ServerService } from '../../../app/services/server.service';
 
+
+import '../../../assets/perfect-scrollbar/perfect-scrollbar.js';
+declare var PerfectScrollbar : any;
+
 declare var $ :any;
 @Component({
   selector: 'dmp-detailed',
   templateUrl: './dmp-detailed.component.html',
-  styleUrls: ['./dmp-detailed.component.css']
+  styleUrls: [
+    '../../../assets/perfect-scrollbar/perfect-scrollbar.css',
+    './dmp-detailed.component.css'
+  ]
 })
 export class DmpDetailedComponent implements OnInit {
 
@@ -16,6 +23,7 @@ export class DmpDetailedComponent implements OnInit {
   }
 
   dmp : any;
+  previousDMPs : any [] = new Array<any>();
 
   ngOnInit() {
 
@@ -25,8 +33,33 @@ export class DmpDetailedComponent implements OnInit {
       let getParams : any = {"eager":true};
       this.serverService.getDmp(dmpid, getParams).subscribe(
         response => {
+          
           this.dmp = response;
+          
+          //get also the labels of all previous dmps (not eagerly, just fetch the dmp tuple)
+          if(this.dmp.previous != null && this.dmp.previous != ""){
+            this.serverService.getDmpHistory(this.dmp.id).subscribe(
+              response => {
+                this.previousDMPs = response;
+              },
+              error => {
+                console.log("Could not get previous DMPs (history)");
+              }
+            )
+          }
+          //fill-in also the creator
+          this.serverService.getUserByID(this.dmp.creator).subscribe(
+            response => {
+              this.dmp.creator = response;
+            },
+            error => {
+              console.log("Could not fetch creator details...");
+            }
+          )
+
+          
           $('#dmp-details-modal').modal('show');
+
         },
         error => {
           console.log("Could not load dmp");
@@ -35,6 +68,14 @@ export class DmpDetailedComponent implements OnInit {
       
     });
 
-  }
+    var dmpDetailsModalScroller = new PerfectScrollbar("#dmp-modal-content");
+
+
+  }
+
+
+  
+
+
 
 }

dmp-frontend/src/app/viewers/project-detailed/project-detailed.component.css

@@ -1,20 +1,36 @@
 
+
+.row {
+  padding-top:30px;
+  padding-bottom:30px;
+}
+
+
+
+
 /* START - FOR DETAILS MODALS */
 
+.modal-content {
+  overflow-y: scroll;
+}
+
 .modal.modal-fullscreen .modal-dialog, 
 .modal.modal-fullscreen .modal-content {
     position: absolute;
-    left: 1%;
+    left: 15%;
-    right: 1%;
+    right: 15%;
-    top: 1%;
+    top: 5%;
-    bottom: 1%;
+    bottom: 5%;
 }
 .modal.modal-fullscreen .modal-dialog {
   margin: 0;
-  width: 98%;
+  width: 70%;
   animation-duration:0.5s;
 }
 .modal.modal-fullscreen .modal-content {
+  -moz-border-radius: 20px;
+  border-radius: 20px;
+  /*
   border: none;
   -moz-border-radius: 0;
   border-radius: 0;
@@ -22,6 +38,7 @@
   -moz-box-shadow: inherit;
   -o-box-shadow: inherit;
   box-shadow: inherit;
+  */
   /* change bg color below */
  /* background:#1abc9c; */
 }
@@ -44,3 +61,187 @@
   bottom: 0;
 }
 /* END - FOR DETAILS MODALS */
+
+
+
+/*  START - DATE CALENDAR VISUALISATION */
+
+@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro|Oswald);
+
+/****************************************/
+/* Styling rules, such as font and colors */
+.date-as-calendar {
+  font-variant: normal;
+  font-style: normal;
+  font-weight: normal;
+  font-family: "Helvetica", "Arial", sans-serif;
+
+  /* It seems vertical-align: baseline does not work correctly with display: inline-flex. */
+  vertical-align: top;
+
+  /* margin: 1ex; */
+
+  color: black;
+  background: white;
+  background : linear-gradient(to bottom right, #FFF 0%, #EEE 100%);
+
+  border: 1px solid #888;
+  border-radius: 3px;
+  overflow: hidden;
+
+  box-shadow: 2px 2px 2px -2px black;
+}
+.date-as-calendar .weekday,
+.date-as-calendar .day,
+.date-as-calendar .month,
+.date-as-calendar .year {
+  text-align: center;
+  line-height: 1.0;
+}
+.date-as-calendar .month {
+  font-family: "Oswald", sans-serif;
+  text-transform: uppercase;
+  background: #B11;
+  background : linear-gradient(to bottom right, #D66 0%, #A00 100%);
+  color: white;
+}
+
+/****************************************/
+/* Layout rules using position: absolute and pixels. */
+.position-pixels.date-as-calendar {
+  display: inline-block;
+  position: relative;
+  width: 64px;
+  height: 64px;
+}
+.position-pixels.date-as-calendar .weekday,
+.position-pixels.date-as-calendar .day,
+.position-pixels.date-as-calendar .month,
+.position-pixels.date-as-calendar .year {
+  display: block;
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 1em;
+}
+.position-pixels.date-as-calendar .month {
+  top: 0px;
+  font-size: 12px;
+  padding: 2px 0;
+}
+.position-pixels.date-as-calendar .weekday {
+  top: 16px;
+  font-size: 10px;
+}
+.position-pixels.date-as-calendar .day {
+  top: 26px;
+  font-size: 24px;
+}
+.position-pixels.date-as-calendar .year {
+  top: 50px;
+  font-size: 14px;
+}
+
+/****************************************/
+/* Layout rules using position: absolute and relative dimensions using em. */
+.position-em.date-as-calendar {
+  display: inline-block;
+  position: relative;
+  
+  width: 4em; 
+  height: 4em; 
+}
+.position-em.date-as-calendar .weekday,
+.position-em.date-as-calendar .day,
+.position-em.date-as-calendar .month,
+.position-em.date-as-calendar .year {
+  display: block;
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 1em;
+}
+.position-em.date-as-calendar .month {
+  top: 0px;
+  font-size: 0.75em;
+  padding: 0.1em 0;
+}
+.position-em.date-as-calendar .weekday {
+  top: 1.6em;
+  font-size: 0.6125em;
+}
+.position-em.date-as-calendar .day {
+  top: 1.1em;
+  font-size: 1.5em
+}
+.position-em.date-as-calendar .year {
+  bottom: 0px;
+  font-size: 0.87750em;
+}
+
+/****************************************/
+/* Layout rules using display: inline-flex and relative dimensions using em. */
+.inline-flex.date-as-calendar {
+  display: inline-flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  
+  width: 4em; 
+  height: 4em; 
+}
+.inline-flex.date-as-calendar .weekday,
+.inline-flex.date-as-calendar .day,
+.inline-flex.date-as-calendar .month,
+.inline-flex.date-as-calendar .year {
+  display: block;
+  flex: 1 1 auto;
+}
+.inline-flex.date-as-calendar .month {
+  order: 1;
+  font-size: 0.75em;
+  padding: 0.1em 0;
+}
+.inline-flex.date-as-calendar .weekday {
+  order: 2;
+  font-size: 0.6125em;
+}
+.inline-flex.date-as-calendar .day {
+  order: 3;
+  font-size: 1.5em;
+}
+.inline-flex.date-as-calendar .year {
+  order: 4;
+  font-size: 0.87750em;
+}
+
+/****************************************/
+/* Multiple sizes. */
+.date-as-calendar.size0_5x {
+  font-size: 8px;
+}
+.date-as-calendar.size0_75x {
+  font-size: 12px;
+}
+.date-as-calendar.size1x {
+  font-size: 16px;
+}
+.date-as-calendar.size1_25x {
+  font-size: 20px;
+}
+.date-as-calendar.size1_5x {
+  font-size: 24px;
+}
+.date-as-calendar.size1_75x {
+  font-size: 28px;
+}
+.date-as-calendar.size2x {
+  font-size: 32px;
+}
+.date-as-calendar.size3x {
+  font-size: 48px;
+}
+
+/*  END - DATE CALENDAR VISUALISATION */

dmp-frontend/src/app/viewers/project-detailed/project-detailed.component.html

@@ -1,18 +1,91 @@
 
 <div class="modal fade modal-fullscreen  footer-to-bottom" id="project-details-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog animated zoomInLeft">
-        <div class="modal-content">
+        <div class="modal-content" id="project-modal-content">
             <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times" aria-hidden="true"></i></button>
-                <h4 class="modal-title">Modal title</h4>
+                <h4 class="modal-title" style="text-align:center;">{{project?.label}}</h4>
             </div>
             <div class="modal-body">
+                <!--
                     {{project | json}}
-                <p class="">One fine body…</p>
+                -->
+                <div class="container-fluid">
+                    <!--
+                    <div class="row">
+                        <div class="col-md-12 row-cell"><b>Project name: </b>{{project?.label}}</div>
+                    </div>
+                    -->
+                    <div class="row">
+                        <div class="col-md-6 row-cell"><b>Abbreviation: </b>{{project?.abbreviation}}</div>
+                        <div class="col-md-6 row-cell"><b>URI : </b><a href="{{project?.uri}}">{{project?.uri}}</a></div>
+                    </div>
+
+                    <div class="row">
+                        <div class="col-md-3 row-cell"><b>Short description: </b></div>
+                        <div class="col-md-9 row-cell">{{project?.description}}</div>
+                        
+                    </div>
+                    
+                    <div class="row">
+                        <div class="col-md-3">
+                            <b>Begins:</b>
+                            <time class="date-as-calendar position-pixels">
+                                <span class="weekday">{{project?.startdate | date:'EEEE' }}</span>
+                                <span class="day">{{project?.startdate | date:'dd' }}</span>
+                                <span class="month">{{project?.startdate | date:'MMMM' }}</span>
+                                <span class="year">{{project?.startdate | date:'y' }}</span>
+                            </time>
+                        </div>
+                        <div class="col-md-3">
+                            <b>Ends:</b>
+                            <time class="date-as-calendar position-pixels">
+                                <span class="weekday">{{project?.enddate | date:'EEEE' }}</span>
+                                <span class="day">{{project?.enddate | date:'dd' }}</span>
+                                <span class="month">{{project?.enddate | date:'MMMM' }}</span>
+                                <span class="year">{{project?.enddate | date:'y' }}</span>
+                            </time>
+                        </div>
+                    </div>
+
+                    <div class="row">
+                        <div class="col-md-4">
+                            <b>Created by: </b> {{project?.creationUser?.name}}
+                        </div>
+                        <div class="col-md-4">
+                            <b>at: </b> {{project?.created | date:'medium' }}
+                        </div>
+                    </div>
+
+                    <div class="row">
+                        <div class="col-md-6 row-cell"><b>Associated DMPs:</b> 
+                            <ul>
+                                <li *ngFor="let dmp of project?.dmps">
+                                    {{ dmp?.label }} (creator: {{   users.get(dmp?.creator)    }})
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                    
+                    
+
+                    <!-- 
+                        STUFF NOT USED: 
+                    status
+                    -->
+
+
+
+                </div>
+
+
+                <p class="">…</p>
             </div>
             <div class="modal-footer">
+                <!--
                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                 <button type="button" class="btn btn-primary">Save changes</button>
+                -->
             </div>
         </div>
     </div>

dmp-frontend/src/app/viewers/project-detailed/project-detailed.component.ts

@@ -3,11 +3,17 @@ import { Router, ActivatedRoute, ParamMap, Params } from '@angular/router';
 import {Location} from '@angular/common';
 import { ServerService } from '../../../app/services/server.service';
 
+import '../../../assets/perfect-scrollbar/perfect-scrollbar.js';
+declare var PerfectScrollbar : any;
+
 declare var $ :any;
 @Component({
   selector: 'project-detailed',
   templateUrl: './project-detailed.component.html',
-  styleUrls: ['./project-detailed.component.css']
+  styleUrls: [
+    '../../../assets/perfect-scrollbar/perfect-scrollbar.css',
+    './project-detailed.component.css'
+  ]
 })
 export class ProjectDetailedComponent implements OnInit {
 
@@ -15,6 +21,7 @@ export class ProjectDetailedComponent implements OnInit {
     
   }
   
+  users : Map<string, string> = new Map<string, string>();
   project : any;
 
   ngOnInit() {
@@ -22,11 +29,20 @@ export class ProjectDetailedComponent implements OnInit {
     let sub = this.route.queryParams.subscribe(params => {
 
       let projectid = params.projectid;
-      let getParams : any = {"eager":true};
+      this.serverService.getProject(projectid).subscribe(
-      this.serverService.getProject(projectid, getParams).subscribe(
         response => {
           this.project = response;
           $('#project-details-modal').modal('show');
+          //get also projects of dmp (there's a problem with the List<> serialization on server - side)
+          this.serverService.getDmpsOfProject(projectid).subscribe(
+            response => {
+              this.project.dmps = response;
+              this.populateUsersMap(this.project);
+            },
+            error => {
+              console.log("Could not fetch project's dmps");
+            }
+          )
         },
         error => {
           console.log("Could not load project");
@@ -35,6 +51,29 @@ export class ProjectDetailedComponent implements OnInit {
       
     });
 
+    var projectDetailsModalScroller = new PerfectScrollbar("#project-modal-content");
+
+  }
+
+
+  getUserByID(userid: string){
+    return this.serverService.getUserByID(userid); //Notice: returns Observable !
+  }
+
+  private populateUsersMap(project){
+    this.users.clear();
+    project.dmps.forEach(dmp => {
+      if(!this.users.has(dmp.creator)){
+        this.serverService.getUserByID(dmp.creator).subscribe(
+          user => {
+            this.users.set(dmp.creator, dmp.name);
+          },
+          error => {
+          }
+        )
+        
+      }
+    });
   }
 
 }