researchers and organisations added to create DMP ui

dmp-frontend/src/app/datasets/dataset.component.css

@@ -47,3 +47,10 @@ tr.hover:hover > * {
 }
 
 
+.ui-autocomplete-multiple {
+    width: 100% !important;
+}
+
+.ui-autocomplete-multiple-container {
+    width: 100% !important;
+}

dmp-frontend/src/app/datasets/dataset.component.ts

@@ -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 {

dmp-frontend/src/app/datasets/dataset.html

@@ -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>

dmp-frontend/src/app/dmps/dmp.component.css

@@ -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;
+}
 
 /* 
 

dmp-frontend/src/app/dmps/dmp.component.ts

@@ -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){
+    private router: Router) {
-      this.projectsDropDown = new DropdownField();      
+    this.projectsDropDown = new DropdownField();
-      this.projectsDropDown.options = [];
+    this.projectsDropDown.options = [];
-      this.statusDropDown = new DropdownField();
+    this.statusDropDown = new DropdownField();
-      this.statusDropDown.options= [{key:'', value:null},{key:'0', value:"Active"},{key:'1', value:"Inactive"}]
+    this.statusDropDown.options = [{ key: '', value: null }, { key: '0', value: "Active" }, { key: '1', value: "Inactive" }]
-      //this.projects = [];
+    //this.projects = [];
-      
+
   }
 
 
@@ -71,18 +74,17 @@ export class DmpComponent implements OnInit{
     this.dmp = {
       id: null,
       label: '',
-      previous:'',
+      previous: '',
-      version:'',
+      version: '',
-      //profileData:'',
+      organizations: [],
-      //project: '',
+      researchers: []
-      //profile:{}
     }
 
   }
 
   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){
+  getDmps(muted?: boolean) {
-    this.serverService.getDmpOfUser().subscribe( 
+    this.serverService.getDmpOfUser().subscribe(
       response => {
         this.tableData = response;
-        if(muted && muted!=true)
+        if (muted && muted != true)
-          simple_notifier("success",null,"Refreshed DMPs");
+          simple_notifier("success", null, "Refreshed DMPs");
 
-        this.tableData.forEach( dmp => {
+        this.tableData.forEach(dmp => {
-          if(dmp.previous!=null)
+          if (dmp.previous != null)
-            this.serverService.getDmp(dmp.previous).subscribe( previous => {dmp.previous = previous;});
+            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(
+      .subscribe(
-      response =>{
+      response => {
-        simple_notifier("success",null,"DMP created");
+        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.project = { "id": this.dmp.project };
-    this.dmp.creator = {"id": this.dmp.creator};
+    this.dmp.creator = { "id": this.dmp.creator };
-    if(this.dmp.previous!=null)
+    if (this.dmp.previous != null)
       this.dmp.previous = this.dmp.previous.id;
 
     this.serverService.updateDmp(this.dmp)
-    .subscribe(
+      .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(
       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){
+  editDmp(item) {
-    this.dmp = Object.assign({}, item);  
+    this.dmp = Object.assign({}, item);
     this.dmp.project = item.project.id;
-    $("#newDmpModal").modal("show");  
+    $("#newDmpModal").modal("show");
   }
 
-  cloneDmp(item){ 
+  cloneDmp(item) {
-    this.dmp = Object.assign({}, 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){
+  deleteDMP(confirmation) {
-    if(confirmation==true)
+    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 => { 
+    this.serverService.deleteDmp(this.dmp).subscribe(
-        simple_notifier("success",null,"Successfully deleted the DMP");
+      response => {
+        simple_notifier("success", null, "Successfully deleted the DMP");
         this.getDmps();
       },
       (err: HttpErrorResponse) => {
-        if(err.status>=200 && err.status<300)
+        if (err.status >= 200 && err.status < 300)
-          simple_notifier("success",null,"Successfully deleted the DMP");
+          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){ 
+  clickFilters(element) {
-    if(element.textContent == "More filters")
+    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;
+    let cannotChangeStatus: boolean;
-    if(dmp.status == 2){
+    if (dmp.status == 2) {
       this.serverService.getDatasetForDmp({ "id": dmp.id }).subscribe(
         response => {
           response.forEach(dataset => {
-            if(dataset.status !==2 || dataset.status !==3){
+            if (dataset.status !== 2 || dataset.status !== 3) {
-              cannotChangeStatus=true;            
+              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){ 
+  showDatasetsOfDmp(item) {
-    this.router.navigate(['/dataset'], { queryParams: { "dmpid":item.id , "label":item.label}});
+    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;
+    });
+  }
 
 }

dmp-frontend/src/app/dmps/dmps.html

@@ -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">
+    #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
-<thead>
+    <thead>
-    <tr class="rowFilter">
+        <tr class="rowFilter">
-        <th colspan="1">
+            <th colspan="1">
-            <input class="form-control" [(ngModel)]="filterQuery" placeholder='Search in Labels' />
+                <input class="form-control" [(ngModel)]="filterQuery" placeholder='Search in Labels' />
-        </th>
+            </th>
-        <th colspan="1">
+            <th colspan="1">
-            <button class="btn btn-default " (click)="getDmps('false')">
+                <button class="btn btn-default " (click)="getDmps('false')">
-                <span class="glyphicon glyphicon-refresh"></span>
+                    <span class="glyphicon glyphicon-refresh"></span>
-            </button>
+                </button>
-        </th>
+            </th>
 
-        <th class="rowFilterTopBorder" colspan="3">
+            <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>
+                <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">
+                <div id="demo" class="collapse">
-                <input style="margin-top: 5px;" class="form-control" type="number" [(ngModel)]="versionFilter" placeholder='Version' />
+                    <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>
+                    <select style="margin-top: 5px;" class="form-control" [id]="statusid" [(ngModel)]="statusFilter" [name]="statusDropDown"
-                    <option *ngFor="let opt of statusDropDown.options" [value]="opt.key">{{opt.value}}</option>
+                        #datasetfield>
-                </select>
+                        <option *ngFor="let opt of statusDropDown.options" [value]="opt.key">{{opt.value}}</option>
-            </div>
+                    </select>
-        </th>
+                </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>
+        <tr>
-        <th [ngClass]="{true:'visible', false:'invisible'}[showIDs]">
+            <th [ngClass]="{true:'visible', false:'invisible'}[showIDs]">
-            <mfDefaultSorter by="id">ID</mfDefaultSorter>
+                <mfDefaultSorter by="id">ID</mfDefaultSorter>
-        </th>
+            </th>
-        <th>
+            <th>
-            <mfDefaultSorter by="label">Label</mfDefaultSorter>
+                <mfDefaultSorter by="label">Label</mfDefaultSorter>
-        </th>
+            </th>
-        <th>
+            <th>
-            <mfDefaultSorter by="version">Version</mfDefaultSorter>
+                <mfDefaultSorter by="version">Version</mfDefaultSorter>
-        </th>
+            </th>
-        <th>
+            <th>
-            <mfDefaultSorter by="previous">Previous</mfDefaultSorter>
+                <mfDefaultSorter by="previous">Previous</mfDefaultSorter>
-        </th>
+            </th>
-        <th>
+            <th>
-            <mfDefaultSorter by="project">Project</mfDefaultSorter>
+                <mfDefaultSorter by="project">Project</mfDefaultSorter>
-        </th>
+            </th>
-        <th>
+            <th>
-            <mfDefaultSorter by="description">Description</mfDefaultSorter>
+                <mfDefaultSorter by="description">Description</mfDefaultSorter>
-        </th>
+            </th>
-        <th>
+            <th>
-            <mfDefaultSorter by="created">Created at</mfDefaultSorter>
+                <mfDefaultSorter by="created">Created at</mfDefaultSorter>
-        </th>
+            </th>
-        <th>
+            <th>
-            <mfDefaultSorter by="status">Status</mfDefaultSorter>
+                <mfDefaultSorter by="status">Status</mfDefaultSorter>
-        </th>
+            </th>
-        <th>
+            <th>
-            Actions
+                Actions
-        </th>
+            </th>
-        <th>
+            <th>
-            
-        </th>
 
-    </tr>
+            </th>
-</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">
+        </tr>
-        <td [ngClass]="{true:'visible', false:'invisible'}[showIDs]">{{dmp?.id}}</td>
+    </thead>
-        <!--  data-toggle="modal" data-target="#dmp-deatils-fullscreen"  -->
+    <tbody>
-        <td>{{(dmp?.label?.length > 40) ? (dmp?.label | slice:0:40)+'...':(dmp?.label) }} <span class="url-like" (click)="viewDetailedDMP(dmp)">(info)</span></td>
+        <tr class="grayout-empty-table" *ngIf="!mf.data[0]">
-        <td style="width:20px;">{{dmp?.version}}</td>
+            <td colspan="5">No elements</td>
-        <td style="width:300px;">{{(dmp?.previous?.label?.length > 40) ? (dmp?.previous?.label | slice:0:40)+'...':(dmp?.previous?.label) }}</td>
+        </tr>
-        <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>
+        <tr *ngFor="let dmp of mf.data" class="hover">
-        <td>{{dmp?.created | date:'yyyy-MM-dd HH:mm:ss Z'}}</td>
+            <td [ngClass]="{true:'visible', false:'invisible'}[showIDs]">{{dmp?.id}}</td>
-        <td>{{dmp?.status | statusToString }}</td>
+            <!--  data-toggle="modal" data-target="#dmp-deatils-fullscreen"  -->
-        <td>
+            <td>{{(dmp?.label?.length > 40) ? (dmp?.label | slice:0:40)+'...':(dmp?.label) }}
-            <a class="editGridColumn cursor-link" (click)="editDmp(dmp)"> <!--btn btn-primary btn-rounded css for button style -->
+                <span class="url-like" (click)="viewDetailedDMP(dmp)">(info)</span>
-                <i class="fa fa-pencil fa-fw" data-toggle="tooltip" title="Edit" id="editDMP"></i></a>
+            </td>
-            <a class="editGridColumn cursor-link" (click)="cloneDmp(dmp)">
+            <td style="width:20px;">{{dmp?.version}}</td>
-                <i class="fa fa-clone fa-fw" data-toggle="tooltip" title="Clone" id="changeVersionDMP"></i> </a>
+            <td style="width:300px;">{{(dmp?.previous?.label?.length > 40) ? (dmp?.previous?.label | slice:0:40)+'...':(dmp?.previous?.label) }}</td>
-            <a class="editGridColumn cursor-link" (click)="markDMPForDelete(dmp)">
+            <td>{{(dmp?.project?.label?.length > 40) ? (dmp?.project?.label | slice:0:40)+'...':(dmp?.project?.label) }}
-                <i class="fa fa-eraser fa-fw" data-toggle="modal" data-target="#delete-dmp-confirm"  title="Delete"></i> </a>
+                <span class="url-like" (click)="viewDetailedProject(dmp)">(info)</span>
-        </td>
+            </td>
-        <td style="max-width:100px;">
+            <td>{{(dmp?.description?.length > 40) ? (dmp?.description | slice:0:40)+'...':(dmp?.description) }}</td>
-            <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>{{dmp?.created | date:'yyyy-MM-dd HH:mm:ss Z'}}</td>
-        </td>
+            <td>{{dmp?.status | statusToString }}</td>
-    </tr>
+            <td>
-</tbody>
+                <a class="editGridColumn cursor-link" (click)="editDmp(dmp)">
-<tfoot>
+                    <!--btn btn-primary btn-rounded css for button style -->
-    <tr>
+                    <i class="fa fa-pencil fa-fw" data-toggle="tooltip" title="Edit" id="editDMP"></i>
-        <td colspan="1">
+                </a>
-            <button type="button" class="btn btn-info btncustom" (click)="newDmpForm(item)">Create New</button>
+                <a class="editGridColumn cursor-link" (click)="cloneDmp(dmp)">
-        </td>
+                    <i class="fa fa-clone fa-fw" data-toggle="tooltip" title="Clone" id="changeVersionDMP"></i>
-        <td colspan="8">
+                </a>
-            <mfBootstrapPaginator [rowsOnPageSet]="[5,10,20]"></mfBootstrapPaginator>
+                <a class="editGridColumn cursor-link" (click)="markDMPForDelete(dmp)">
-        </td>
+                    <i class="fa fa-eraser fa-fw" data-toggle="modal" data-target="#delete-dmp-confirm" title="Delete"></i>
-    </tr>
+                </a>
-</tfoot>
+            </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-dialog" role="document">
-    <div class="modal-content">
+        <div class="modal-content">
-        <div class="modal-header centered-text">
+            <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>
+                <h4 class="modal-title" id="modalLabel">
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <b>{{ dmp?.id ? "Edit Data Management Plan" : "New Data Management Plan" }}</b>
-            <span aria-hidden="true">&times;</span>
+                </h4>
-          </button>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-        </div>
+                    <span aria-hidden="true">&times;</span>
-        <div class="modal-body">
+                </button>
-            <form #dmpForm="ngForm" (ngSubmit)="SaveNewDmp()">
+            </div>
-                <div class="form-group">
+            <div class="modal-body">
+                <form #dmpForm="ngForm" (ngSubmit)="SaveNewDmp()">
                     <div class="form-group">
-                        <label for="label-name" class="form-control-label">Label:</label>
+                        <div class="form-group">
-                        <input type="text" class="form-control" id="label-name" [ngModel]="dmp?.label" (ngModelChange)="dmp.label=$event" name="label" required>
+                            <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>
+                    <div class="form-group">
-                    <select class="form-control" id="projectsDropDownKey" [ngModel]="dmp?.project" (ngModelChange)="dmp.project=$event" name="projectsDropDown" required>
+                        <label for="status-name" class="col-form-label">Status:</label>
-                              <option *ngFor="let opt of projectsDropDown.options" [value]="opt.key">{{opt.value}}</option>
+                        <select class="form-control" id="statusid" [ngModel]="dmp?.status" (ngModelChange)="dmp.status=$event" name="statusDropDown"
-                              </select>
+                            (change)="SelectDMPStatus(dmp, $event, oldValue);">
-                </div>
+                            <option *ngFor="let opt of statusDropDown.options" [value]="opt.key">{{opt.value}}</option>
-                <div class="form-group">
+                        </select>
-                    <label for="status-name" class="col-form-label">Status:</label>
+                    </div>
-                    <select class="form-control" id="statusid" [ngModel]="dmp?.status" (ngModelChange)="dmp.status=$event" name="statusDropDown" (change)="SelectDMPStatus(dmp, $event, oldValue);">
+                    <div class="form-group">
-                    <option *ngFor="let opt of statusDropDown.options" [value]="opt.key">{{opt.value}}</option>
+                        <label for="label-name" class="form-control-label">Previous:</label>
-                    </select>
+                        <input type="text" class="form-control" id="label-previous" [ngModel]="dmp?.previous" (ngModelChange)="dmp.previous=$event"
-                </div>
+                            name="previous" disabled>
-                <div class="form-group">
+                    </div>
-                    <label for="label-name" class="form-control-label">Previous:</label>
+                    <div class="form-group">
-                    <input type="text" class="form-control" id="label-previous" [ngModel]="dmp?.previous" (ngModelChange)="dmp.previous=$event"  name="previous" disabled>
+                        <label for="abbreviation-text" class="form-control-label">Version:</label>
-                </div>
+                        <input class="form-control" id="abbreviation-text" [ngModel]="dmp?.version" (ngModelChange)="dmp.version=$event" name="version"
-                <div class="form-group">
+                            disabled>
-                    <label for="abbreviation-text" class="form-control-label">Version:</label>
+                    </div>
-                    <input class="form-control" id="abbreviation-text" [ngModel]="dmp?.version" (ngModelChange)="dmp.version=$event"  name="version" disabled>
+                    <div class="form-group">
-                </div>
+                        <label for="abbreviation-text" class="form-control-label">Description:</label>
-                <div class="form-group">
+                        <textarea rows="3" class="form-control" id="abbreviation-text" [ngModel]="dmp?.description" (ngModelChange)="dmp.description=$event"
-                    <label for="abbreviation-text" class="form-control-label">Description:</label>
+                            name="description"></textarea>
-                    <textarea rows="3" class="form-control" id="abbreviation-text" [ngModel]="dmp?.description" (ngModelChange)="dmp.description=$event"  name="description"></textarea>
+                    </div>
-                </div>
+                    <div class="form-group">
-           <!-- 
+                        <label for="organizations-dropdown" class="form-control-label">Organizations:</label>
-                <div class="form-group">
+                        <p-autoComplete id="organizations-dropdown" [(ngModel)]="dmp.organizations" [suggestions]="filteredOrganizations" (completeMethod)="searchOrganizations($event)"
-                    <label for="reference-text" class="form-control-label">Profile Data:</label>
+                            [minLength]="1" name="organizations" [multiple]="true" emptyMessage="No results found!" field="name">
-                    <textarea class="form-control" id="reference-text" [(ngModel)]="dmp?.profileData" name="profileData"></textarea>
+                        </p-autoComplete>
-                </div>
+                    </div>
-                <div class="form-group">
+                    <div class="form-group">
-                    <label for="start-date" class="form-control-label">Start Date:</label>
+                        <label for="researchers-dropdown" class="form-control-label">Researchers:</label>
-                    <input class="form-control" id="startDate-date" [(ngModel)]= "dmp?.startDate" name = "startDate">
+                        <p-autoComplete id="researchers-dropdown" [(ngModel)]="dmp.researchers" [suggestions]="filteredResearchers" (completeMethod)="searchResearchers($event)"
-                </div>
+                            [minLength]="1" name="researchers" [multiple]="true" emptyMessage="No results found!" field="name">
-                <div class="form-group">
+                        </p-autoComplete>
-                    <label for="end-date" class="form-control-label">End Date:</label>
+                    </div>
-                    <input class="form-control" id="endDate-date" [(ngModel)]= "dmp?.endDate" name = "endDate">
+                </form>
-                </div> 
+            </div>
-            -->
+            <div class="modal-footer">
-            </form>
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-        </div>
+                <button type="submit" class="btn btn-primary" (click)="SaveDmp();">Save Dmp</button>
-        <div class="modal-footer">
+            </div>
-            <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>
 
 
 <!--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-dialog" role="document">
-    <div class="modal-content">
+        <div class="modal-content">
-        <div class="modal-header">
+            <div class="modal-header">
-            <h4 class="modal-title" id="modalLabel"><b>Clone Data Management Plan</b></h4>
+                <h4 class="modal-title" id="modalLabel">
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <b>Clone Data Management Plan</b>
-                <span aria-hidden="true">&times;</span>
+                </h4>
-              </button>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-        </div>
+                    <span aria-hidden="true">&times;</span>
-        <div class="modal-body">
+                </button>
-            <form #dmpForm="ngForm" (ngSubmit)="SaveNewDmp()">
+            </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>
+                </form>
-        </div>
+            </div>
-        <div class="modal-footer">
+            <div class="modal-footer">
-            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                <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>
+                <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-dialog" role="document">
-    <div class="modal-content">
+        <div class="modal-content">
-    <div class="modal-header">
+            <div class="modal-header">
-        <h5 class="modal-title">Change Staus</h5>
+                <h5 class="modal-title">Change Staus</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-        <span aria-hidden="true">&times;</span>
+                    <span aria-hidden="true">&times;</span>
-        </button>
+                </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>

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

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