From bf6247a09153ef8f06a4b0cbbd1706728c6de5c2 Mon Sep 17 00:00:00 2001
From: Diamadis Tziotzios <dtziotzios@cite.gr>
Date: Mon, 18 Dec 2017 13:24:12 +0200
Subject: [PATCH] no message

---
 dmp-frontend/.angular-cli.json                |  9 ++--
 .../datasets_new/dataset-listing.component.ts |  2 +-
 .../app/dmps/editor/dmp-editor.component.html | 48 +++++++++++------
 .../app/dmps/editor/dmp-editor.component.ts   | 53 ++++++++++++++-----
 .../DataManagementPlanModel.ts                | 12 +++--
 .../ExternalSourcesItemModel.ts               |  5 ++
 .../external-sources.service.ts               | 21 ++++----
 dmp-frontend/src/assets/lang/en.json          | 19 ++++++-
 dmp-frontend/src/styles.scss                  | 47 +++++++++++++++-
 9 files changed, 164 insertions(+), 52 deletions(-)
 create mode 100644 dmp-frontend/src/app/models/external-sources/ExternalSourcesItemModel.ts

diff --git a/dmp-frontend/.angular-cli.json b/dmp-frontend/.angular-cli.json
index b6bd82a36..8c4a25f1f 100644
--- a/dmp-frontend/.angular-cli.json
+++ b/dmp-frontend/.angular-cli.json
@@ -19,12 +19,13 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
+        "./../node_modules/bootstrap/dist/css/bootstrap.min.css",
         "styles.scss"
       ],
       "scripts": [
-		"./../node_modules/bootstrap/dist/js/bootstrap.min.js",
-    "./assets/xml2json.min.js"
-	  ],
+        "./../node_modules/bootstrap/dist/js/bootstrap.min.js",
+        "./assets/xml2json.min.js"
+      ],
       "environmentSource": "environments/environment.ts",
       "environments": {
         "dev": "environments/environment.ts",
@@ -60,4 +61,4 @@
     "styleExt": "css",
     "component": {}
   }
-}
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/datasets_new/dataset-listing.component.ts b/dmp-frontend/src/app/datasets_new/dataset-listing.component.ts
index e9068fac5..1688fc92a 100644
--- a/dmp-frontend/src/app/datasets_new/dataset-listing.component.ts
+++ b/dmp-frontend/src/app/datasets_new/dataset-listing.component.ts
@@ -97,7 +97,7 @@ export class DatasetDataSource extends DataSource<DatasetListingModel> {
         });
         const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
         const request = new DataTableRequest(startIndex, this._paginator.pageSize);
-        request.projectCriteria = this._criteria.getFormData();
+        request.criteria = this._criteria.getFormData();
         return this._service.getPaged(request);
       })
       .catch((error: any) => {
diff --git a/dmp-frontend/src/app/dmps/editor/dmp-editor.component.html b/dmp-frontend/src/app/dmps/editor/dmp-editor.component.html
index 510f59135..177130ba3 100644
--- a/dmp-frontend/src/app/dmps/editor/dmp-editor.component.html
+++ b/dmp-frontend/src/app/dmps/editor/dmp-editor.component.html
@@ -1,26 +1,25 @@
 <div class="project-editor">
     <form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup">
         <mat-card>
-            <mat-card-title *ngIf="isNew">{{'PROJECT-EDITOR.TITLE.NEW' | translate}}</mat-card-title>
-            <mat-card-title *ngIf="!isNew">{{'PROJECT-EDITOR.TITLE.EDIT' | translate}} {{project.label}}</mat-card-title>
+            <mat-card-title *ngIf="isNew">{{'DMP-EDITOR.TITLE.NEW' | translate}}</mat-card-title>
+            <mat-card-title *ngIf="!isNew">{{'DMP-EDITOR.TITLE.EDIT' | translate}} {{project.label}}</mat-card-title>
             <mat-card-content>
 
                 <mat-form-field>
-                    <input matInput placeholder="{{'PROJECT-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label" formControlName="label"
-                        required>
+                    <input matInput placeholder="{{'DMP-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label" formControlName="label" required>
                     <mat-error *ngIf="formGroup.get('label').errors?.backendError">{{baseErrorModel.label}}</mat-error>
                     <mat-error *ngIf="formGroup.get('label').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
                 </mat-form-field>
 
                 <!-- <mat-form-field>
-                    <input matInput placeholder="{{'PROJECT-EDITOR.FIELDS.ABBREVIATION' | translate}}" type="text" name="abbreviation" formControlName="abbreviation"
+                    <input matInput placeholder="{{'DMP-EDITOR.FIELDS.ABBREVIATION' | translate}}" type="text" name="abbreviation" formControlName="abbreviation"
                         required>
                     <mat-error *ngIf="formGroup.get('abbreviation').errors?.backendError">{{baseErrorModel.abbreviation}}</mat-error>
                     <mat-error *ngIf="formGroup.get('abbreviation').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
                 </mat-form-field>
 
                 <mat-form-field>
-                    <input matInput placeholder="{{'PROJECT-EDITOR.FIELDS.URI' | translate}}" type="text" name="uri" formControlName="uri" required>
+                    <input matInput placeholder="{{'DMP-EDITOR.FIELDS.URI' | translate}}" type="text" name="uri" formControlName="uri" required>
                     <mat-error *ngIf="formGroup.get('uri').errors?.backendError">{{baseErrorModel.uri}}</mat-error>
                     <mat-error *ngIf="formGroup.get('uri').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
                 </mat-form-field> -->
@@ -29,7 +28,7 @@
                     <tr>
                         <td>
                             <mat-form-field>
-                                <input matInput (focus)="startDate.open()" (click)="startDate.open()" placeholder="{{'PROJECT-EDITOR.FIELDS.START' | translate}}"
+                                <input matInput (focus)="startDate.open()" (click)="startDate.open()" placeholder="{{'DMP-EDITOR.FIELDS.START' | translate}}"
                                     class="table-input" [matDatepicker]="startDate" formControlName="startDate" required>
                                 <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
                                 <mat-datepicker #startDate></mat-datepicker>
@@ -39,7 +38,7 @@
                         </td>
                         <td>
                             <mat-form-field>
-                                <input matInput (focus)="endDate.open()" (click)="endDate.open()" placeholder="{{'PROJECT-EDITOR.FIELDS.END' | translate}}"
+                                <input matInput (focus)="endDate.open()" (click)="endDate.open()" placeholder="{{'DMP-EDITOR.FIELDS.END' | translate}}"
                                     class="table-input" [matDatepicker]="endDate" formControlName="endDate" required>
                                 <mat-datepicker-toggle matSuffix [for]="endDate"></mat-datepicker-toggle>
                                 <mat-datepicker #endDate></mat-datepicker>
@@ -51,33 +50,48 @@
                 </table> -->
 
                 <mat-form-field class="full-width">
-                    <textarea matInput class="description-area" placeholder="{{'PROJECT-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description"
+                    <textarea matInput class="description-area" placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description"
                         required></textarea>
                     <mat-error *ngIf="formGroup.get('description').errors?.backendError">{{errorModel.description}}</mat-error>
                     <mat-error *ngIf="formGroup.get('description').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
                 </mat-form-field>
 
-                <td-chips [items]="filteredOrganisations" [debounce]="500" placeholder="Enter autocomplete strings" (inputChange)="filterOrganisations($event)"
-                    requireMatch>
+                <td-chips color="accent" [items]="filteredOrganisations" formControlName="organisations" placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}"
+                    (inputChange)="filterOrganisations($event)" requireMatch>
                     <ng-template td-chip let-chip="chip">
-                        <!-- <div class="tc-grey-100 bgc-teal-700" td-chip-avatar>{{chip.substring(0, 1).toUpperCase()}}</div>  -->
+                        <div class="tc-grey-100 bgc-teal-700" td-chip-avatar>{{chip.name.substring(0, 1).toUpperCase()}}</div>
                         {{chip.name}}
                     </ng-template>
                     <ng-template td-autocomplete-option let-option="option">
                         <div layout="row" layout-align="start center">
-                          {{option.name}}
+                            {{option.name}}
                         </div>
-                      </ng-template>
+                    </ng-template>
                     <mat-progress-bar [style.height.px]="2" *ngIf="filteringOrganisationsAsync" mode="indeterminate"></mat-progress-bar>
                 </td-chips>
 
+                <td-chips color="accent" [items]="filteredResearchers" formControlName="researchers" placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}"
+                    (inputChange)="filterResearchers($event)" requireMatch>
+                    <ng-template td-chip let-chip="chip">
+                        <div class="tc-grey-100 bgc-teal-700" td-chip-avatar>{{chip.name.substring(0, 1).toUpperCase()}}</div>
+                        {{chip.name}}
+                    </ng-template>
+                    <ng-template td-autocomplete-option let-option="option">
+                        <div layout="row" layout-align="start center">
+                            {{option.name}}
+                        </div>
+                    </ng-template>
+                    <mat-progress-bar [style.height.px]="2" *ngIf="filteringResearchersAsync" mode="indeterminate"></mat-progress-bar>
+                </td-chips>
+
                 <div layout="row" class="full-width text-right" align="end">
-                    <button mat-raised-button color="primary" (click)="cancel()" type="button">{{'PROJECT-EDITOR.ACTIONS.CANCEL' | translate}}</button>
-                    <button mat-raised-button color="primary" type="submit">{{'PROJECT-EDITOR.ACTIONS.SAVE' | translate}}</button>
-                    <button *ngIf="!isNew" mat-raised-button color="primary" type="submit" (click)="delete()">{{'PROJECT-EDITOR.ACTIONS.DELETE' | translate}}</button>
+                    <button mat-raised-button color="primary" (click)="cancel()" type="button">{{'DMP-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+                    <button mat-raised-button color="primary" type="submit">{{'DMP-EDITOR.ACTIONS.SAVE' | translate}}</button>
+                    <button *ngIf="!isNew" mat-raised-button color="primary" type="submit" (click)="delete()">{{'DMP-EDITOR.ACTIONS.DELETE' | translate}}</button>
                 </div>
 
             </mat-card-content>
         </mat-card>
     </form>
+    <div *ngIf="formGroup"> {{ formGroup.value | json }}</div>
 </div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/dmps/editor/dmp-editor.component.ts b/dmp-frontend/src/app/dmps/editor/dmp-editor.component.ts
index 5cb78099b..f728b5edc 100644
--- a/dmp-frontend/src/app/dmps/editor/dmp-editor.component.ts
+++ b/dmp-frontend/src/app/dmps/editor/dmp-editor.component.ts
@@ -12,6 +12,7 @@ import { DataManagementPlanService } from "../../services/data-management-plan/d
 import { DataManagementPlanModel } from "../../models/data-managemnt-plans/DataManagementPlanModel";
 import { ServerService } from "../../services/server.service";
 import { ExternalSourcesService } from "../../services/external-sources/external-sources.service";
+import { ExternalSourcesItemModel } from "../../models/external-sources/ExternalSourcesItemModel";
 
 
 
@@ -30,20 +31,8 @@ export class DataManagementPlanEditorComponent implements AfterViewInit {
 
   filteringOrganisationsAsync: boolean = false;
   filteringResearchersAsync: boolean = false;
-  filteredOrganisations: string[];
-  filteredResearchers: string[];
-
-  filterOrganisations(value: string): void {
-    this.filteredOrganisations = undefined;
-    if (value) {
-      this.filteringOrganisationsAsync = true;
-      
-      this.externalSourcesService.searchDMPOrganizations(value).subscribe(organizations => {
-        this.filteredOrganisations = organizations;
-        this.filteringOrganisationsAsync = false;
-      });
-    }
-  }
+  filteredOrganisations: ExternalSourcesItemModel[];
+  filteredResearchers: ExternalSourcesItemModel[];
 
   constructor(
     private dataManagementPlanService: DataManagementPlanService,
@@ -116,4 +105,40 @@ export class DataManagementPlanEditorComponent implements AfterViewInit {
   public cancel(): void {
     this.router.navigate(['/dataManagementPlans']);
   }
+
+  filterOrganisations(value: string): void {
+    
+    this.filteredOrganisations = undefined;
+    if (value) {
+      this.filteringOrganisationsAsync = true;
+      
+      this.externalSourcesService.searchDMPOrganizations(value).subscribe(items => {
+        this.filteredOrganisations = items;
+        this.filteringOrganisationsAsync = false;
+
+        // this.filteredOrganisations = items.filter((filteredObj: any) => {
+        //   return this.objectsModel ? this.objectsModel.indexOf(filteredObj) < 0 : true;
+        // });
+
+      });
+    }
+  }
+
+  filterResearchers(value: string): void {
+    
+    this.filteredResearchers = undefined;
+    if (value) {
+      this.filteringResearchersAsync = true;
+      
+      this.externalSourcesService.searchDMPResearchers(value).subscribe(items => {
+        this.filteredResearchers = items;
+        this.filteringResearchersAsync = false;
+
+        // this.filteredOrganisations = items.filter((filteredObj: any) => {
+        //   return this.objectsModel ? this.objectsModel.indexOf(filteredObj) < 0 : true;
+        // });
+
+      });
+    }
+  }
 }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/models/data-managemnt-plans/DataManagementPlanModel.ts b/dmp-frontend/src/app/models/data-managemnt-plans/DataManagementPlanModel.ts
index ba8ad860b..ba2d6ebeb 100644
--- a/dmp-frontend/src/app/models/data-managemnt-plans/DataManagementPlanModel.ts
+++ b/dmp-frontend/src/app/models/data-managemnt-plans/DataManagementPlanModel.ts
@@ -4,6 +4,7 @@ import { FormGroup, FormBuilder, FormControl, Validators } from "@angular/forms"
 import { BackendErrorValidator } from "../../utilities/validators/BackendErrorValidator";
 import { BaseErrorModel } from "../error/BaseErrorModel";
 import { AutoCompleteItem } from "../../shared/components/autocomplete/AutoCompleteItem";
+import { ExternalSourcesItemModel } from "../external-sources/ExternalSourcesItemModel";
 
 export class DataManagementPlanModel implements Serializable<DataManagementPlanModel> {
 	public id: String;
@@ -13,9 +14,8 @@ export class DataManagementPlanModel implements Serializable<DataManagementPlanM
 	public status: String;
 	public description: String;
 	public selectedProject: AutoCompleteItem;
-	// public selectedProjectReference: AutoCompleteItem;
-	// public selectedProjectReference: AutoCompleteItem;
-	
+	public organisations: ExternalSourcesItemModel[] = [];
+	public researchers: ExternalSourcesItemModel[] = [];
 
 	public errorModel: BaseErrorModel = new BaseErrorModel();
 
@@ -26,7 +26,7 @@ export class DataManagementPlanModel implements Serializable<DataManagementPlanM
 		this.version = item.version;
 		this.status = item.status;
 		this.description = item.description;
-		
+
 		return this;
 	}
 
@@ -39,6 +39,8 @@ export class DataManagementPlanModel implements Serializable<DataManagementPlanM
 			version: [{ value: this.version, disabled: disabled }, context.getValidation('version').validators],
 			status: [{ value: this.status, disabled: disabled }, context.getValidation('status').validators],
 			description: [{ value: this.description, disabled: disabled }, context.getValidation('description').validators],
+			organisations: [{ value: this.organisations, disabled: disabled }, context.getValidation('description').validators],
+			researchers: [{ value: this.researchers, disabled: disabled }, context.getValidation('researchers').validators],
 		});
 
 		return formGroup;
@@ -51,6 +53,8 @@ export class DataManagementPlanModel implements Serializable<DataManagementPlanM
 		baseContext.validation.push({ key: 'version', validators: [Validators.required, BackendErrorValidator(this.errorModel, 'version')] });
 		baseContext.validation.push({ key: 'status', validators: [Validators.required, BackendErrorValidator(this.errorModel, 'status')] });
 		baseContext.validation.push({ key: 'description', validators: [Validators.required, BackendErrorValidator(this.errorModel, 'description')] });
+		baseContext.validation.push({ key: 'organisations', validators: [Validators.required, BackendErrorValidator(this.errorModel, 'organisations')] });
+		baseContext.validation.push({ key: 'researchers', validators: [Validators.required, BackendErrorValidator(this.errorModel, 'researchers')] });
 
 		return baseContext;
 	}
diff --git a/dmp-frontend/src/app/models/external-sources/ExternalSourcesItemModel.ts b/dmp-frontend/src/app/models/external-sources/ExternalSourcesItemModel.ts
new file mode 100644
index 000000000..aec2fd4b4
--- /dev/null
+++ b/dmp-frontend/src/app/models/external-sources/ExternalSourcesItemModel.ts
@@ -0,0 +1,5 @@
+export interface ExternalSourcesItemModel {
+	id: String;
+	name: String;
+	description: String;
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/services/external-sources/external-sources.service.ts b/dmp-frontend/src/app/services/external-sources/external-sources.service.ts
index 04f45e30b..73b0f17f8 100644
--- a/dmp-frontend/src/app/services/external-sources/external-sources.service.ts
+++ b/dmp-frontend/src/app/services/external-sources/external-sources.service.ts
@@ -4,6 +4,7 @@ import { Injectable } from '@angular/core';
 import { HostConfiguration } from './../../app.constants';
 import { BaseHttpService } from '../../utilities/cite-http-service-module/base-http.service';
 import { Observable } from 'rxjs/Observable';
+import { ExternalSourcesItemModel } from '../../models/external-sources/ExternalSourcesItemModel';
 
 
 @Injectable()
@@ -21,23 +22,23 @@ export class ExternalSourcesService {
         this.headers = this.headers.set('Accept', 'application/json');
     }
 
-    public searchDatasetRegistry(like: string) {
-        return this.http.get("registries" + "?query=" + like);
+    public searchDatasetRegistry(like: string): Observable<ExternalSourcesItemModel[]> {
+        return this.http.get<ExternalSourcesItemModel[]>(this.actionUrl + "registries" + "?query=" + like, { headers: this.headers });
     }
 
-    public searchDatasetRepository(like: string) {
-        return this.http.get("datarepos" + "?query=" + like);
+    public searchDatasetRepository(like: string): Observable<ExternalSourcesItemModel[]> {
+        return this.http.get<ExternalSourcesItemModel[]>(this.actionUrl + "datarepos" + "?query=" + like, { headers: this.headers });
     }
 
-    public searchDatasetService(like: string) {
-        return this.http.get("services" + "?query=" + like);
+    public searchDatasetService(like: string): Observable<ExternalSourcesItemModel[]> {
+        return this.http.get<ExternalSourcesItemModel[]>(this.actionUrl + "services" + "?query=" + like, { headers: this.headers });
     }
 
-    public searchDMPResearchers(like: string) {
-        return this.http.get("researchers" + "?query=" + like);
+    public searchDMPResearchers(like: string): Observable<ExternalSourcesItemModel[]> {
+        return this.http.get<ExternalSourcesItemModel[]>(this.actionUrl + "researchers" + "?query=" + like, { headers: this.headers });
     }
 
-    public searchDMPOrganizations(like: string): Observable<any>  {
-        return this.http.get<any>(this.actionUrl + "organisations" + "?query=" + like, { headers: this.headers });
+    public searchDMPOrganizations(like: string): Observable<ExternalSourcesItemModel[]> {
+        return this.http.get<ExternalSourcesItemModel[]>(this.actionUrl + "organisations" + "?query=" + like, { headers: this.headers });
     }
 }
diff --git a/dmp-frontend/src/assets/lang/en.json b/dmp-frontend/src/assets/lang/en.json
index 799866d7f..b35090fb8 100644
--- a/dmp-frontend/src/assets/lang/en.json
+++ b/dmp-frontend/src/assets/lang/en.json
@@ -43,7 +43,7 @@
             "EDIT": "Edit"
         },
         "FIELDS": {
-            "NAME": "New Project",
+            "NAME": "Name",
             "ABBREVIATION": "Abbreviation",
             "URI": "URI",
             "START": "Start",
@@ -56,6 +56,23 @@
             "DELETE": "Delete"
         }
     },
+    "DMP-EDITOR": {
+        "TITLE": {
+            "NEW": "New Data Management Plan",
+            "EDIT": "Edit"
+        },
+        "FIELDS": {
+            "NAME": "Name",
+            "DESCRIPTION": "Description",
+            "ORGANISATIONS": "Organisations",
+            "RESEARCHERS": "Researchers"
+        },
+        "ACTIONS": {
+            "SAVE": "Save",
+            "CANCEL": "Cancel",
+            "DELETE": "Delete"
+        }
+    },
     "CRITERIA": {
         "FORMS": {
             "PERIOD-FROM": "Start",
diff --git a/dmp-frontend/src/styles.scss b/dmp-frontend/src/styles.scss
index d0630473b..780310f4a 100644
--- a/dmp-frontend/src/styles.scss
+++ b/dmp-frontend/src/styles.scss
@@ -1,3 +1,48 @@
-@import "~@angular/material/prebuilt-themes/indigo-pink.css";
+/* @import "~@angular/material/prebuilt-themes/indigo-pink.css"; */
 @import '~@angular/material/theming';
 @import '~@covalent/core/theming/all-theme';
+
+@include mat-core();
+
+// Define a theme.
+$primary: mat-palette($mat-indigo);
+$accent:  mat-palette($mat-pink, A200, A100, A400);
+
+$theme: mat-light-theme($primary, $accent);
+
+// Include all theme styles for the components.
+@include angular-material-theme($theme);
+@include covalent-theme($theme);
+
+
+
+  
+  /* dashboard */
+
+  .card{
+    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
+    border-radius: 6px;
+    color: rgba(0,0,0, 0.87);
+    background: #fff;
+  }
+  
+  .card-raised{
+    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
+  }
+
+  @media screen and (max-width: 990px){
+    #sidebar, #nav-right, #nav-left-button{
+      display: none;
+    }
+    #menu{
+      display: inline;
+    }
+    #main-panel{
+      padding-left: 0;
+      -webkit-transition: all 400ms;
+      -moz-transition: all 400ms;
+      -ms-transition: all 400ms;
+      -o-transition: all 400ms;
+      transition: all 400ms;
+    }
+  }