changes on dmp-details and project-details
This commit is contained in:
Nikolaos Laskaris
parent
a6b272806b
commit
fc1c6b90d0
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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')));
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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?.enddate | date:'yyyy-MM-dd HH:mm:ss Z'}}</td>
|
||||
<td>{{project?.startdate | date:'medium' }}</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>
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
}
|
||||
|
|
@ -123,31 +132,35 @@ export class ServerService {
|
|||
|
||||
public getDatasetForDmp(data:any){
|
||||
return this.restBase.post("dmp/getdatasets", data);
|
||||
}
|
||||
}
|
||||
|
||||
public createDatasetForDmp(data:any){
|
||||
return this.restBase.post("dataset/create", data);
|
||||
}
|
||||
public createDatasetForDmp(data:any){
|
||||
return this.restBase.post("dataset/create", data);
|
||||
}
|
||||
|
||||
public getAllDatsetsProfile(){
|
||||
return this.restBase.get("datasetprofile/getAll");
|
||||
}
|
||||
public getAllDatsetsProfile(){
|
||||
return this.restBase.get("datasetprofile/getAll");
|
||||
}
|
||||
|
||||
public getDatasetProfileByID(id){
|
||||
return this.restBase.get("datasetprofiles/"+id);
|
||||
}
|
||||
public getDatasetProfileByID(id){
|
||||
return this.restBase.get("datasetprofiles/"+id);
|
||||
}
|
||||
|
||||
public updateDatsetsProfile(data:any){
|
||||
return this.restBase.post("dataset/update", data);
|
||||
}
|
||||
|
||||
public deleteDataset(dataset: any){
|
||||
return this.restBase.post("dataset/softdelete", dataset);
|
||||
}
|
||||
public updateDatsetsProfile(data:any){
|
||||
return this.restBase.post("dataset/update", data);
|
||||
}
|
||||
|
||||
public deleteDataset(dataset: any){
|
||||
return this.restBase.post("dataset/softdelete", dataset);
|
||||
}
|
||||
|
||||
public whoami(){
|
||||
return this.restBase.get("user/whoami");
|
||||
}
|
||||
public getUserByID(id : string){
|
||||
return this.restBase.get("users/"+id);
|
||||
}
|
||||
|
||||
public whoami(){
|
||||
return this.restBase.get("user/whoami");
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
right: 1%;
|
||||
top: 1%;
|
||||
bottom: 1%;
|
||||
left: 15%;
|
||||
right: 15%;
|
||||
top: 5%;
|
||||
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; */
|
||||
}
|
||||
|
|
@ -43,4 +51,10 @@
|
|||
.modal.modal-fullscreen.force-fullscreen .modal-footer {
|
||||
bottom: 0;
|
||||
}
|
||||
/* END - FOR DETAILS MODALS */
|
||||
/* END - FOR DETAILS MODALS */
|
||||
|
||||
|
||||
.row {
|
||||
padding-top:30px;
|
||||
padding-bottom:30px;
|
||||
}
|
||||
|
|
@ -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>
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times" aria-hidden="true"></i></button>
|
||||
<h4 style="text-align:center;" class="modal-title">Details</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
{{dmp | json}}
|
||||
<p class="">One fine body…</p>
|
||||
<!--
|
||||
{{dmp | json}}
|
||||
-->
|
||||
|
||||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
right: 1%;
|
||||
top: 1%;
|
||||
bottom: 1%;
|
||||
left: 15%;
|
||||
right: 15%;
|
||||
top: 5%;
|
||||
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; */
|
||||
}
|
||||
|
|
@ -43,4 +60,188 @@
|
|||
.modal.modal-fullscreen.force-fullscreen .modal-footer {
|
||||
bottom: 0;
|
||||
}
|
||||
/* END - FOR DETAILS MODALS */
|
||||
/* 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 */
|
||||
|
|
@ -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>
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
<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" style="text-align:center;">{{project?.label}}</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
{{project | json}}
|
||||
<p class="">One fine body…</p>
|
||||
<!--
|
||||
{{project | json}}
|
||||
-->
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -3,18 +3,25 @@ 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 {
|
||||
|
||||
constructor(private serverService: ServerService, private router: Router, private _location: Location, private route: ActivatedRoute) {
|
||||
|
||||
}
|
||||
|
||||
|
||||
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, getParams).subscribe(
|
||||
this.serverService.getProject(projectid).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 => {
|
||||
}
|
||||
)
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue