researchers and organisations added to create DMP ui
This commit is contained in:
parent
1f1a0e62ae
commit
f7c97f87cf
|
|
@ -47,3 +47,10 @@ tr.hover:hover > * {
|
|||
}
|
||||
|
||||
|
||||
.ui-autocomplete-multiple {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.ui-autocomplete-multiple-container {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { Component, OnInit, Input, ViewChild, NgZone, Output, EventEmitter } from '@angular/core';
|
||||
import { Component, OnInit, Input, ViewChild, NgZone, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
|
||||
import { GoogleSignInSuccess } from 'angular-google-signin';
|
||||
import { Router, ActivatedRoute } from '@angular/router';
|
||||
import { ServerService } from '../../app/services/server.service';
|
||||
|
|
@ -22,7 +22,8 @@ declare function simple_notifier(type: string, title: string, message: string):
|
|||
selector: 'datasets-table',
|
||||
templateUrl: 'dataset.html',
|
||||
styleUrls: ['./dataset.component.css'],
|
||||
providers: [ServerService]
|
||||
providers: [ServerService],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
|
||||
export class DatasetsComponent implements OnInit {
|
||||
|
|
|
|||
|
|
@ -136,19 +136,19 @@
|
|||
<div class="form-group">
|
||||
<label for="services-dropdown" class="form-control-label">Services:</label>
|
||||
<p-autoComplete id="services-dropdown" [(ngModel)]="dataset.services" [suggestions]="filteredServices" (completeMethod)="searchServices($event)"
|
||||
styleClass="wid100" [minLength]="1" name="services" [multiple]="true" [emptyMessage]="true" field="name">
|
||||
[minLength]="1" name="services" [multiple]="true" emptyMessage="No results found!" field="name">
|
||||
</p-autoComplete>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="registries-dropdown" class="form-control-label">Registries:</label>
|
||||
<p-autoComplete id="registries-dropdown" [(ngModel)]="dataset.registries" [suggestions]="filteredRegistries" (completeMethod)="searchRegistries($event)"
|
||||
styleClass="wid100" [minLength]="1" name="registries" [multiple]="true" [emptyMessage]="true" field="name">
|
||||
[minLength]="1" name="registries" [multiple]="true" emptyMessage="No results found!" field="name">
|
||||
</p-autoComplete>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="repositories-dropdown" class="form-control-label">Repositories:</label>
|
||||
<p-autoComplete id="repositories-dropdown" [(ngModel)]="dataset.repositories" [suggestions]="filteredRepositories" (completeMethod)="searchRepositories($event)"
|
||||
styleClass="wid100" [minLength]="1" name="repositories" [multiple]="true" [emptyMessage]="true" field="name">
|
||||
[minLength]="1" name="repositories" [multiple]="true" emptyMessage="No results found!" field="name">
|
||||
</p-autoComplete>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -104,6 +104,13 @@ tr.hover:hover > * {
|
|||
}
|
||||
/* END OF HORIZONTALLY -COLLAPSING DIVS */
|
||||
|
||||
.ui-autocomplete-multiple {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.ui-autocomplete-multiple-container {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angular/core';
|
||||
import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { GoogleSignInSuccess } from 'angular-google-signin';
|
||||
import { Router, ActivatedRoute } from '@angular/router';
|
||||
import { ServerService } from '../../app/services/server.service';
|
||||
|
|
@ -12,29 +12,30 @@ import { DropdownField } from '../../app/form/fields/dropdown/field-dropdown';
|
|||
import { Param } from '../entities/model/param';
|
||||
import { ModalComponent } from '../modal/modal.component';
|
||||
import { HttpErrorResponse } from '@angular/common/http';
|
||||
import { FormGroup, FormControl } from '@angular/forms'; //na dw an xreiazontai
|
||||
import { FormGroup, FormControl } from '@angular/forms'; //na dw an xreiazontai
|
||||
import { NgForm } from '@angular/forms';
|
||||
import { DatasetsComponent } from '../datasets/dataset.component';
|
||||
import { StatusToString } from '../pipes/various/status-to-string';
|
||||
import {MenuItem} from 'primeng/primeng';
|
||||
import { MenuItem } from 'primeng/primeng';
|
||||
|
||||
declare var $ :any;
|
||||
declare var $: any;
|
||||
|
||||
import '../../assets/custom.js';
|
||||
declare function simple_notifier(type: string, title: string, message:string): any;
|
||||
declare function simple_notifier(type: string, title: string, message: string): any;
|
||||
|
||||
@Component({
|
||||
selector: 'dmps',
|
||||
templateUrl: 'dmps.html',
|
||||
styleUrls: ['./dmp.component.css'],
|
||||
providers: [ServerService]
|
||||
providers: [ServerService],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
|
||||
export class DmpComponent implements OnInit{
|
||||
export class DmpComponent implements OnInit {
|
||||
|
||||
//whole dmp data model
|
||||
tableData : any[] = new Array();
|
||||
|
||||
tableData: any[] = new Array();
|
||||
|
||||
//required by the table
|
||||
public filterQuery = "";
|
||||
public rowsOnPage = 10;
|
||||
|
|
@ -42,27 +43,29 @@ export class DmpComponent implements OnInit{
|
|||
public sortOrder = "asc";
|
||||
|
||||
// for tableIds
|
||||
showIDs : boolean = false;
|
||||
showIDs: boolean = false;
|
||||
|
||||
|
||||
dmp : any;
|
||||
dmp: any;
|
||||
|
||||
@Input() projectsDropDown:DropdownField;
|
||||
@Input() projectsDropDown: DropdownField;
|
||||
@Input() statusDropDown: DropdownField;
|
||||
|
||||
@ViewChild(DatasetsComponent) datasetsComponent:DatasetsComponent;
|
||||
|
||||
|
||||
constructor(
|
||||
@ViewChild(DatasetsComponent) datasetsComponent: DatasetsComponent;
|
||||
|
||||
filteredResearchers: any[];
|
||||
filteredOrganizations: any[];
|
||||
|
||||
constructor(
|
||||
private serverService: ServerService,
|
||||
private route: ActivatedRoute,
|
||||
private router: Router){
|
||||
this.projectsDropDown = new DropdownField();
|
||||
this.projectsDropDown.options = [];
|
||||
this.statusDropDown = new DropdownField();
|
||||
this.statusDropDown.options= [{key:'', value:null},{key:'0', value:"Active"},{key:'1', value:"Inactive"}]
|
||||
//this.projects = [];
|
||||
|
||||
private router: Router) {
|
||||
this.projectsDropDown = new DropdownField();
|
||||
this.projectsDropDown.options = [];
|
||||
this.statusDropDown = new DropdownField();
|
||||
this.statusDropDown.options = [{ key: '', value: null }, { key: '0', value: "Active" }, { key: '1', value: "Inactive" }]
|
||||
//this.projects = [];
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -71,18 +74,17 @@ export class DmpComponent implements OnInit{
|
|||
this.dmp = {
|
||||
id: null,
|
||||
label: '',
|
||||
previous:'',
|
||||
version:'',
|
||||
//profileData:'',
|
||||
//project: '',
|
||||
//profile:{}
|
||||
previous: '',
|
||||
version: '',
|
||||
organizations: [],
|
||||
researchers: []
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
this.getDmps();
|
||||
this.getDmps();
|
||||
|
||||
this.serverService.getAllProjects().subscribe(
|
||||
response => {
|
||||
|
|
@ -96,90 +98,90 @@ export class DmpComponent implements OnInit{
|
|||
|
||||
},
|
||||
(err: HttpErrorResponse) => {
|
||||
simple_notifier("danger",null,"Could not load User's Projects");
|
||||
simple_notifier("danger", null, "Could not load User's Projects");
|
||||
}
|
||||
)
|
||||
|
||||
this.clearDmp();
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
getDmps(muted? : boolean){
|
||||
this.serverService.getDmpOfUser().subscribe(
|
||||
getDmps(muted?: boolean) {
|
||||
this.serverService.getDmpOfUser().subscribe(
|
||||
response => {
|
||||
this.tableData = response;
|
||||
if(muted && muted!=true)
|
||||
simple_notifier("success",null,"Refreshed DMPs");
|
||||
if (muted && muted != true)
|
||||
simple_notifier("success", null, "Refreshed DMPs");
|
||||
|
||||
this.tableData.forEach( dmp => {
|
||||
if(dmp.previous!=null)
|
||||
this.serverService.getDmp(dmp.previous).subscribe( previous => {dmp.previous = previous;});
|
||||
this.tableData.forEach(dmp => {
|
||||
if (dmp.previous != null)
|
||||
this.serverService.getDmp(dmp.previous).subscribe(previous => { dmp.previous = previous; });
|
||||
});
|
||||
|
||||
},
|
||||
(err: HttpErrorResponse) => {
|
||||
simple_notifier("danger",null,"Could not refresh DMPs");
|
||||
}
|
||||
);
|
||||
simple_notifier("danger", null, "Could not refresh DMPs");
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
newDMP(){
|
||||
newDMP() {
|
||||
|
||||
this.dmp.project = {"id" : this.dmp.project};
|
||||
this.dmp.project = { "id": this.dmp.project };
|
||||
this.dmp["version"] = 1;
|
||||
|
||||
|
||||
this.serverService.createDmpForCurrentUser(this.dmp)
|
||||
.subscribe(
|
||||
response =>{
|
||||
simple_notifier("success",null,"DMP created");
|
||||
.subscribe(
|
||||
response => {
|
||||
simple_notifier("success", null, "DMP created");
|
||||
this.getDmps();
|
||||
},
|
||||
error => {
|
||||
simple_notifier("danger",null,"Could not create the DMP");
|
||||
simple_notifier("danger", null, "Could not create the DMP");
|
||||
}
|
||||
);
|
||||
);
|
||||
$("#newDmpModal").modal("hide");
|
||||
}
|
||||
|
||||
updateDMP(){
|
||||
updateDMP() {
|
||||
|
||||
this.dmp.project = {"id":this.dmp.project};
|
||||
this.dmp.creator = {"id": this.dmp.creator};
|
||||
if(this.dmp.previous!=null)
|
||||
this.dmp.project = { "id": this.dmp.project };
|
||||
this.dmp.creator = { "id": this.dmp.creator };
|
||||
if (this.dmp.previous != null)
|
||||
this.dmp.previous = this.dmp.previous.id;
|
||||
|
||||
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(
|
||||
.subscribe(
|
||||
response => {
|
||||
simple_notifier("success",null,"Successfully cloned the DMP");
|
||||
simple_notifier("success", null, "Edited the DMP");
|
||||
this.getDmps();
|
||||
},
|
||||
error => {
|
||||
simple_notifier("danger",null,"Failed to clone the DMP");
|
||||
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(){
|
||||
SaveDmp() {
|
||||
if (this.dmp.id == null)
|
||||
this.newDMP();
|
||||
else
|
||||
|
|
@ -187,100 +189,113 @@ export class DmpComponent implements OnInit{
|
|||
}
|
||||
|
||||
|
||||
editDmp(item){
|
||||
this.dmp = Object.assign({}, item);
|
||||
editDmp(item) {
|
||||
this.dmp = Object.assign({}, item);
|
||||
this.dmp.project = item.project.id;
|
||||
$("#newDmpModal").modal("show");
|
||||
$("#newDmpModal").modal("show");
|
||||
}
|
||||
|
||||
cloneDmp(item){
|
||||
this.dmp = Object.assign({}, item);
|
||||
cloneDmp(item) {
|
||||
this.dmp = Object.assign({}, item);
|
||||
this.dmp.project = item.project.id;
|
||||
$("#newVersionDmpModal").modal("show");
|
||||
}
|
||||
|
||||
newDmpForm(item){
|
||||
newDmpForm(item) {
|
||||
|
||||
this.clearDmp();
|
||||
|
||||
$("#newDmpModal").modal("show");
|
||||
}
|
||||
|
||||
markDMPForDelete(dmp){
|
||||
markDMPForDelete(dmp) {
|
||||
this.dmp = dmp;
|
||||
}
|
||||
|
||||
deleteDMP(confirmation){
|
||||
if(confirmation==true)
|
||||
deleteDMP(confirmation) {
|
||||
if (confirmation == true)
|
||||
this.deleteRow(this.dmp);
|
||||
}
|
||||
|
||||
deleteRow(dmp){
|
||||
deleteRow(dmp) {
|
||||
|
||||
this.dmp = {"id": this.dmp.id}; //only id is needed to delete
|
||||
|
||||
this.dmp = { "id": this.dmp.id }; //only id is needed to delete
|
||||
|
||||
this.serverService.deleteDmp(this.dmp).subscribe(
|
||||
response => {
|
||||
simple_notifier("success",null,"Successfully deleted the DMP");
|
||||
|
||||
this.serverService.deleteDmp(this.dmp).subscribe(
|
||||
response => {
|
||||
simple_notifier("success", null, "Successfully deleted the DMP");
|
||||
this.getDmps();
|
||||
},
|
||||
(err: HttpErrorResponse) => {
|
||||
if(err.status>=200 && err.status<300)
|
||||
simple_notifier("success",null,"Successfully deleted the DMP");
|
||||
if (err.status >= 200 && err.status < 300)
|
||||
simple_notifier("success", null, "Successfully deleted the DMP");
|
||||
else
|
||||
simple_notifier("danger",null,"Failed to delete the DMP");
|
||||
simple_notifier("danger", null, "Failed to delete the DMP");
|
||||
this.getDmps();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
clickFilters(element){
|
||||
if(element.textContent == "More filters")
|
||||
clickFilters(element) {
|
||||
if (element.textContent == "More filters")
|
||||
element.textContent = "Less Filters";
|
||||
else
|
||||
element.textContent = "More Filters";
|
||||
}
|
||||
}
|
||||
|
||||
SelectDMPStatus(dmp, event, oldValue){
|
||||
SelectDMPStatus(dmp, event, oldValue) {
|
||||
console.log(dmp);
|
||||
let cannotChangeStatus:boolean;
|
||||
if(dmp.status == 2){
|
||||
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;
|
||||
if (dataset.status !== 2 || dataset.status !== 3) {
|
||||
cannotChangeStatus = true;
|
||||
}
|
||||
return;
|
||||
});
|
||||
if(cannotChangeStatus == true){
|
||||
if (cannotChangeStatus == true) {
|
||||
dmp.status = 0;
|
||||
$("#messageForChangingStatus").modal("show");
|
||||
}
|
||||
},
|
||||
error => {
|
||||
console.log("could not retrieve dataset for dpm: "+dmp.id);
|
||||
console.log("could not retrieve dataset for dpm: " + dmp.id);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
showDatasetsOfDmp(item){
|
||||
this.router.navigate(['/dataset'], { queryParams: { "dmpid":item.id , "label":item.label}});
|
||||
showDatasetsOfDmp(item) {
|
||||
this.router.navigate(['/dataset'], { queryParams: { "dmpid": item.id, "label": item.label } });
|
||||
}
|
||||
|
||||
viewDetailedDMP(dmp){
|
||||
viewDetailedDMP(dmp) {
|
||||
let random = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
|
||||
this.router.navigate(['/dmps/dmp'], { queryParams: { "dmpid":dmp.id, "label":dmp.label, random: random}});
|
||||
this.router.navigate(['/dmps/dmp'], { queryParams: { "dmpid": dmp.id, "label": dmp.label, random: random } });
|
||||
}
|
||||
|
||||
viewDetailedProject(dmp){
|
||||
viewDetailedProject(dmp) {
|
||||
let random = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
|
||||
this.router.navigate(['/dmps/project'], { queryParams: { "projectid":dmp.project.id, "label":dmp.project.label, random: random }});
|
||||
this.router.navigate(['/dmps/project'], { queryParams: { "projectid": dmp.project.id, "label": dmp.project.label, random: random } });
|
||||
}
|
||||
|
||||
searchResearchers(event) {
|
||||
let query = event.query;
|
||||
this.serverService.searchDMPResearchers(query).subscribe(researchers => {
|
||||
this.filteredResearchers = researchers;
|
||||
});
|
||||
}
|
||||
|
||||
searchOrganizations(event) {
|
||||
let query = event.query;
|
||||
this.serverService.searchDMPOrganizations(query).subscribe(organizations => {
|
||||
this.filteredOrganizations = organizations;
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,28 +1,28 @@
|
|||
|
||||
<table class="table table-striped customTable" [mfData]="tableData | dmpTableFilter : filterQuery | dmpVersionFilter : versionFilter |dmpstatusFilter: statusFilter"
|
||||
#mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
|
||||
<thead>
|
||||
<tr class="rowFilter">
|
||||
<th colspan="1">
|
||||
<input class="form-control" [(ngModel)]="filterQuery" placeholder='Search in Labels' />
|
||||
</th>
|
||||
<th colspan="1">
|
||||
<button class="btn btn-default " (click)="getDmps('false')">
|
||||
<span class="glyphicon glyphicon-refresh"></span>
|
||||
</button>
|
||||
</th>
|
||||
#mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
|
||||
<thead>
|
||||
<tr class="rowFilter">
|
||||
<th colspan="1">
|
||||
<input class="form-control" [(ngModel)]="filterQuery" placeholder='Search in Labels' />
|
||||
</th>
|
||||
<th colspan="1">
|
||||
<button class="btn btn-default " (click)="getDmps('false')">
|
||||
<span class="glyphicon glyphicon-refresh"></span>
|
||||
</button>
|
||||
</th>
|
||||
|
||||
<th class="rowFilterTopBorder" colspan="3">
|
||||
<button type="button" class="btn btn-info btnMoreFilters" data-toggle="collapse" data-target="#demo" (click)="clickFilters($event.target)">More filters</button>
|
||||
<div id="demo" class="collapse">
|
||||
<input style="margin-top: 5px;" class="form-control" type="number" [(ngModel)]="versionFilter" placeholder='Version' />
|
||||
<select style="margin-top: 5px;" class="form-control" [id]="statusid" [(ngModel)]="statusFilter" [name]="statusDropDown" #datasetfield>
|
||||
<option *ngFor="let opt of statusDropDown.options" [value]="opt.key">{{opt.value}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</th>
|
||||
|
||||
<!--
|
||||
<th class="rowFilterTopBorder" colspan="3">
|
||||
<button type="button" class="btn btn-info btnMoreFilters" data-toggle="collapse" data-target="#demo" (click)="clickFilters($event.target)">More filters</button>
|
||||
<div id="demo" class="collapse">
|
||||
<input style="margin-top: 5px;" class="form-control" type="number" [(ngModel)]="versionFilter" placeholder='Version' />
|
||||
<select style="margin-top: 5px;" class="form-control" [id]="statusid" [(ngModel)]="statusFilter" [name]="statusDropDown"
|
||||
#datasetfield>
|
||||
<option *ngFor="let opt of statusDropDown.options" [value]="opt.key">{{opt.value}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</th>
|
||||
|
||||
<!--
|
||||
<th style="display: table-row;" class="container rowFilterTopBorder" colspan="3">
|
||||
<button style="display: table-cell;" type="button" class="btn btn-info btnMoreFilters" data-toggle="collapse" data-target="#more-filters" (click)="clickFilters($event.target)">More filters</button>
|
||||
<div style="display: table-cell;" id="more-filters" class="collapse width">
|
||||
|
|
@ -36,207 +36,226 @@
|
|||
</th>
|
||||
-->
|
||||
|
||||
</tr>
|
||||
</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="version">Version</mfDefaultSorter>
|
||||
</th>
|
||||
<th>
|
||||
<mfDefaultSorter by="previous">Previous</mfDefaultSorter>
|
||||
</th>
|
||||
<th>
|
||||
<mfDefaultSorter by="project">Project</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>
|
||||
<th>
|
||||
|
||||
</th>
|
||||
<tr>
|
||||
<th [ngClass]="{true:'visible', false:'invisible'}[showIDs]">
|
||||
<mfDefaultSorter by="id">ID</mfDefaultSorter>
|
||||
</th>
|
||||
<th>
|
||||
<mfDefaultSorter by="label">Label</mfDefaultSorter>
|
||||
</th>
|
||||
<th>
|
||||
<mfDefaultSorter by="version">Version</mfDefaultSorter>
|
||||
</th>
|
||||
<th>
|
||||
<mfDefaultSorter by="previous">Previous</mfDefaultSorter>
|
||||
</th>
|
||||
<th>
|
||||
<mfDefaultSorter by="project">Project</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>
|
||||
<th>
|
||||
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="grayout-empty-table" *ngIf="!mf.data[0]">
|
||||
<td colspan="5">No elements</td>
|
||||
</tr>
|
||||
</th>
|
||||
|
||||
<tr *ngFor="let dmp of mf.data" class="hover">
|
||||
<td [ngClass]="{true:'visible', false:'invisible'}[showIDs]">{{dmp?.id}}</td>
|
||||
<!-- data-toggle="modal" data-target="#dmp-deatils-fullscreen" -->
|
||||
<td>{{(dmp?.label?.length > 40) ? (dmp?.label | slice:0:40)+'...':(dmp?.label) }} <span class="url-like" (click)="viewDetailedDMP(dmp)">(info)</span></td>
|
||||
<td style="width:20px;">{{dmp?.version}}</td>
|
||||
<td style="width:300px;">{{(dmp?.previous?.label?.length > 40) ? (dmp?.previous?.label | slice:0:40)+'...':(dmp?.previous?.label) }}</td>
|
||||
<td>{{(dmp?.project?.label?.length > 40) ? (dmp?.project?.label | slice:0:40)+'...':(dmp?.project?.label) }} <span class="url-like" (click)="viewDetailedProject(dmp)">(info)</span></td>
|
||||
<td>{{(dmp?.description?.length > 40) ? (dmp?.description | slice:0:40)+'...':(dmp?.description) }}</td>
|
||||
<td>{{dmp?.created | date:'yyyy-MM-dd HH:mm:ss Z'}}</td>
|
||||
<td>{{dmp?.status | statusToString }}</td>
|
||||
<td>
|
||||
<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" id="editDMP"></i></a>
|
||||
<a class="editGridColumn cursor-link" (click)="cloneDmp(dmp)">
|
||||
<i class="fa fa-clone fa-fw" data-toggle="tooltip" title="Clone" 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"></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="1">
|
||||
<button type="button" class="btn btn-info btncustom" (click)="newDmpForm(item)">Create New</button>
|
||||
</td>
|
||||
<td colspan="8">
|
||||
<mfBootstrapPaginator [rowsOnPageSet]="[5,10,20]"></mfBootstrapPaginator>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="grayout-empty-table" *ngIf="!mf.data[0]">
|
||||
<td colspan="5">No elements</td>
|
||||
</tr>
|
||||
|
||||
<tr *ngFor="let dmp of mf.data" class="hover">
|
||||
<td [ngClass]="{true:'visible', false:'invisible'}[showIDs]">{{dmp?.id}}</td>
|
||||
<!-- data-toggle="modal" data-target="#dmp-deatils-fullscreen" -->
|
||||
<td>{{(dmp?.label?.length > 40) ? (dmp?.label | slice:0:40)+'...':(dmp?.label) }}
|
||||
<span class="url-like" (click)="viewDetailedDMP(dmp)">(info)</span>
|
||||
</td>
|
||||
<td style="width:20px;">{{dmp?.version}}</td>
|
||||
<td style="width:300px;">{{(dmp?.previous?.label?.length > 40) ? (dmp?.previous?.label | slice:0:40)+'...':(dmp?.previous?.label) }}</td>
|
||||
<td>{{(dmp?.project?.label?.length > 40) ? (dmp?.project?.label | slice:0:40)+'...':(dmp?.project?.label) }}
|
||||
<span class="url-like" (click)="viewDetailedProject(dmp)">(info)</span>
|
||||
</td>
|
||||
<td>{{(dmp?.description?.length > 40) ? (dmp?.description | slice:0:40)+'...':(dmp?.description) }}</td>
|
||||
<td>{{dmp?.created | date:'yyyy-MM-dd HH:mm:ss Z'}}</td>
|
||||
<td>{{dmp?.status | statusToString }}</td>
|
||||
<td>
|
||||
<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" id="editDMP"></i>
|
||||
</a>
|
||||
<a class="editGridColumn cursor-link" (click)="cloneDmp(dmp)">
|
||||
<i class="fa fa-clone fa-fw" data-toggle="tooltip" title="Clone" 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"></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="1">
|
||||
<button type="button" class="btn btn-info btncustom" (click)="newDmpForm(item)">Create New</button>
|
||||
</td>
|
||||
<td colspan="8">
|
||||
<mfBootstrapPaginator [rowsOnPageSet]="[5,10,20]"></mfBootstrapPaginator>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<!-- </div> -->
|
||||
|
||||
<!--Modal for new and edit DMP-->
|
||||
<div class="modal fade" id="newDmpModal" tabindex="-1" role="dialog" aria-labelledby="newDmpModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header centered-text">
|
||||
<h4 class="modal-title" id="modalLabel"><b>{{ dmp?.id ? "Edit Data Management Plan" : "New Data Management Plan" }}</b></h4>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form #dmpForm="ngForm" (ngSubmit)="SaveNewDmp()">
|
||||
<div class="form-group">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header centered-text">
|
||||
<h4 class="modal-title" id="modalLabel">
|
||||
<b>{{ dmp?.id ? "Edit Data Management Plan" : "New Data Management Plan" }}</b>
|
||||
</h4>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form #dmpForm="ngForm" (ngSubmit)="SaveNewDmp()">
|
||||
<div class="form-group">
|
||||
<label for="label-name" class="form-control-label">Label:</label>
|
||||
<input type="text" class="form-control" id="label-name" [ngModel]="dmp?.label" (ngModelChange)="dmp.label=$event" name="label" required>
|
||||
<div class="form-group">
|
||||
<label for="label-name" class="form-control-label">Label:</label>
|
||||
<input type="text" class="form-control" id="label-name" [ngModel]="dmp?.label" (ngModelChange)="dmp.label=$event" name="label"
|
||||
required>
|
||||
</div>
|
||||
<label for="recipient-name" class="col-form-label">Project:</label>
|
||||
<select class="form-control" id="projectsDropDownKey" [ngModel]="dmp?.project" (ngModelChange)="dmp.project=$event" name="projectsDropDown"
|
||||
required>
|
||||
<option *ngFor="let opt of projectsDropDown.options" [value]="opt.key">{{opt.value}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<label for="recipient-name" class="col-form-label">Project:</label>
|
||||
<select class="form-control" id="projectsDropDownKey" [ngModel]="dmp?.project" (ngModelChange)="dmp.project=$event" name="projectsDropDown" required>
|
||||
<option *ngFor="let opt of projectsDropDown.options" [value]="opt.key">{{opt.value}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="status-name" class="col-form-label">Status:</label>
|
||||
<select class="form-control" id="statusid" [ngModel]="dmp?.status" (ngModelChange)="dmp.status=$event" name="statusDropDown" (change)="SelectDMPStatus(dmp, $event, oldValue);">
|
||||
<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">Previous:</label>
|
||||
<input type="text" class="form-control" id="label-previous" [ngModel]="dmp?.previous" (ngModelChange)="dmp.previous=$event" name="previous" disabled>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="abbreviation-text" class="form-control-label">Version:</label>
|
||||
<input class="form-control" id="abbreviation-text" [ngModel]="dmp?.version" (ngModelChange)="dmp.version=$event" name="version" disabled>
|
||||
</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]="dmp?.description" (ngModelChange)="dmp.description=$event" name="description"></textarea>
|
||||
</div>
|
||||
<!--
|
||||
<div class="form-group">
|
||||
<label for="reference-text" class="form-control-label">Profile Data:</label>
|
||||
<textarea class="form-control" id="reference-text" [(ngModel)]="dmp?.profileData" name="profileData"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="start-date" class="form-control-label">Start Date:</label>
|
||||
<input class="form-control" id="startDate-date" [(ngModel)]= "dmp?.startDate" name = "startDate">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="end-date" class="form-control-label">End Date:</label>
|
||||
<input class="form-control" id="endDate-date" [(ngModel)]= "dmp?.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)="SaveDmp();">Save Dmp</button>
|
||||
<div class="form-group">
|
||||
<label for="status-name" class="col-form-label">Status:</label>
|
||||
<select class="form-control" id="statusid" [ngModel]="dmp?.status" (ngModelChange)="dmp.status=$event" name="statusDropDown"
|
||||
(change)="SelectDMPStatus(dmp, $event, oldValue);">
|
||||
<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">Previous:</label>
|
||||
<input type="text" class="form-control" id="label-previous" [ngModel]="dmp?.previous" (ngModelChange)="dmp.previous=$event"
|
||||
name="previous" disabled>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="abbreviation-text" class="form-control-label">Version:</label>
|
||||
<input class="form-control" id="abbreviation-text" [ngModel]="dmp?.version" (ngModelChange)="dmp.version=$event" name="version"
|
||||
disabled>
|
||||
</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]="dmp?.description" (ngModelChange)="dmp.description=$event"
|
||||
name="description"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="organizations-dropdown" class="form-control-label">Organizations:</label>
|
||||
<p-autoComplete id="organizations-dropdown" [(ngModel)]="dmp.organizations" [suggestions]="filteredOrganizations" (completeMethod)="searchOrganizations($event)"
|
||||
[minLength]="1" name="organizations" [multiple]="true" emptyMessage="No results found!" field="name">
|
||||
</p-autoComplete>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="researchers-dropdown" class="form-control-label">Researchers:</label>
|
||||
<p-autoComplete id="researchers-dropdown" [(ngModel)]="dmp.researchers" [suggestions]="filteredResearchers" (completeMethod)="searchResearchers($event)"
|
||||
[minLength]="1" name="researchers" [multiple]="true" emptyMessage="No results found!" field="name">
|
||||
</p-autoComplete>
|
||||
</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)="SaveDmp();">Save Dmp</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--Modal for changing version-->
|
||||
<div class="modal fade" id="newVersionDmpModal" tabindex="-1" role="dialog" aria-labelledby="newVersionDmpModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title" id="modalLabel"><b>Clone Data Management Plan</b></h4>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form #dmpForm="ngForm" (ngSubmit)="SaveNewDmp()">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title" id="modalLabel">
|
||||
<b>Clone Data Management Plan</b>
|
||||
</h4>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form #dmpForm="ngForm" (ngSubmit)="SaveNewDmp()">
|
||||
<div class="form-group">
|
||||
<label for="label-name" class="form-control-label">Label:</label>
|
||||
<input type="text" class="form-control" id="label-name" [ngModel]="dmp?.label" (ngModelChange)="dmp.label=$event" name="label">
|
||||
</div>
|
||||
<div class="form-group" hidden>
|
||||
<label for="recipient-name" class="col-form-label">Project:</label>
|
||||
<select class="form-control" [id]="projectsDropDownKey" [ngModel]="dmp?.project" (ngModelChange)="dmp.project=$event" [name]="projectsDropDown" #datasetfield>
|
||||
<select class="form-control" [id]="projectsDropDownKey" [ngModel]="dmp?.project" (ngModelChange)="dmp.project=$event" [name]="projectsDropDown"
|
||||
#datasetfield>
|
||||
<option *ngFor="let opt of projectsDropDown.options" [value]="opt.key">{{opt.value}}</option>
|
||||
</select>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-group" hidden>
|
||||
<label for="label-name" class="form-control-label">Previous:</label>
|
||||
<input type="text" class="form-control" id="label-previous" [ngModel]="dmp?.previous" (ngModelChange)="dmp.previous=$event" name="previous">
|
||||
<input type="text" class="form-control" id="label-previous" [ngModel]="dmp?.previous" (ngModelChange)="dmp.previous=$event"
|
||||
name="previous">
|
||||
</div>
|
||||
<div class="form-group" hidden>
|
||||
<label for="abbreviation-text" class="form-control-label">Version:</label>
|
||||
<input class="form-control" id="abbreviation-text" [ngModel]="dmp?.version" (ngModelChange)="dmp.version=$event" name="version">
|
||||
</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" [disabled]="!dmpForm.form.valid" (click)="cloneDMP(dmp);">Save Dmp</button>
|
||||
</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" [disabled]="!dmpForm.form.valid" (click)="cloneDMP(dmp);">Save Dmp</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal" tabindex="-1" id="messageForChangingStatus" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Change Staus</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Change Staus</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>The submitted status is available only when all the DMP's datasets are "Submitted" or "Cancel"</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>The submitted status is available only when all the DMP's datasets are "Submitted" or "Cancel"</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -246,4 +265,5 @@
|
|||
|
||||
|
||||
<!-- 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>
|
||||
<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>
|
||||
|
|
@ -184,4 +184,12 @@ export class ServerService {
|
|||
public searchDatasetService(like: string) {
|
||||
return this.restBase.get("external/services" + "?query=" + like);
|
||||
}
|
||||
|
||||
public searchDMPResearchers(like: string) {
|
||||
return this.restBase.get("external/researchers" + "?query=" + like);
|
||||
}
|
||||
|
||||
public searchDMPOrganizations(like: string) {
|
||||
return this.restBase.get("external/organisations" + "?query=" + like);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue