add researcher from dmp editor

dmp-frontend/src/app/add-researchers/add-researchers.component.html

@@ -0,0 +1,19 @@
+<form *ngIf="formGroup" [formGroup]="formGroup">
+    <h1 mat-dialog-title>{{'ADDRESEARCHERS-EDITOR.TITLE' | translate}}</h1>
+    <div mat-dialog-content>
+        <mat-form-field class="full-width">
+            <input matInput formControlName="firstName" placeholder="{{'ADDRESEARCHERS-EDITOR.FIRST_NAME' | translate}}" required>
+            <mat-error *ngIf="formGroup.get('firstName').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+        </mat-form-field>
+        <mat-form-field class="full-width">
+                <input matInput formControlName="lastName" placeholder="{{'ADDRESEARCHERS-EDITOR.LAST_NAME' | translate}}" required>
+                <mat-error *ngIf="formGroup.get('lastName').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+            </mat-form-field>
+    </div>
+    <div mat-dialog-actions>
+        <div layout="row" class="full-width text-right" align="end">
+            <button mat-raised-button color="primary" (click)="send()" type="button">Save</button>
+            <button mat-button mat-dialog-close mat-raised-button color="primary">Cancel</button>
+        </div>       
+    </div>
+</form>

dmp-frontend/src/app/add-researchers/add-researchers.component.ts

@@ -0,0 +1,39 @@
+import { JsonSerializer } from '../utilities/JsonSerializer';
+import { RequestItem } from '../models/criteria/RequestItem';
+import { Component, OnInit, Inject } from "@angular/core";
+import { FormGroup } from '@angular/forms';
+import { Params, ActivatedRoute, Router } from '@angular/router';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { ResearcherModel } from '@app/models/researcher/ResearcherModel';
+import { ResearcherService } from '@app/services/researchers/researchers.service';
+
+@Component({
+    selector: 'add-researchers-component',
+    templateUrl: 'add-researchers.component.html',
+    providers: [ResearcherService]
+
+})
+export class AddResearchersComponent implements OnInit {
+
+    private formGroup: FormGroup;
+
+    constructor(
+        private researcherService: ResearcherService,
+        private route: ActivatedRoute,
+        public router: Router,
+        public dialogRef: MatDialogRef<AddResearchersComponent>,
+        @Inject(MAT_DIALOG_DATA) public data: any
+    ) { }
+
+    ngOnInit(): void {
+        let researcher = new ResearcherModel();
+        this.formGroup = researcher.buildForm();
+    }
+
+
+    send(value: any) {
+        this.researcherService.createResearcher(this.formGroup.value).subscribe(
+            null, null, () => this.dialogRef.close()
+        );
+    }
+}

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

@@ -25,7 +25,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { FigurecardComponent } from './shared/components/figurecard/figurecard.component';
 import { InvitationAcceptedComponent } from './invitation-accepted/invitation-accepted.component';
-import { InvitationComponent } from './invitation/invitation.component';
 import { HomepageComponent } from './homepage/homepage.component';
 import { PageNotFoundComponent } from './not-found.component';
 import { AppComponent } from './app.component';
@@ -33,7 +32,6 @@ import { NgModule } from "@angular/core";
 import { DatasetProfileModule } from './dataset-profile-form/dataset-profile.module';
 import { WelcomepageComponent } from '@app/welcomepage/welcomepage.component';
 
-
 @NgModule({
   declarations: [
     AppComponent,

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

@@ -13,6 +13,8 @@ import { CommonModule } from '@angular/common';
 
 import { SharedModule } from '../shared/shared.module'
 import { NgModule } from '@angular/core';
+import { AddResearchersComponent } from '@app/add-researchers/add-researchers.component';
+
 @NgModule({
     imports: [
         CommonModule,
@@ -35,6 +37,7 @@ import { NgModule } from '@angular/core';
         DataManagementPlanEditorComponent,
         InvitationComponent,
         InvitationAcceptedComponent,
+        AddResearchersComponent
     ],
 
     exports: [
@@ -42,10 +45,12 @@ import { NgModule } from '@angular/core';
         DataManagementPlanEditorComponent,
         InvitationComponent,
         InvitationAcceptedComponent,
+        AddResearchersComponent
         
     ],
     entryComponents: [
-        InvitationComponent
+        InvitationComponent,
+        AddResearchersComponent
     ],
     providers: [
         BaseHttpService

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

@@ -18,15 +18,12 @@
                     <mat-error *ngIf="formGroup.get('description').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
                 </mat-form-field>
 
-                <auto-complete class="mat-form-field-full-width" placeholder="{{'DMP-EDITOR.FIELDS.PROJECT' | translate}}" 
+                <auto-complete class="mat-form-field-full-width" placeholder="{{'DMP-EDITOR.FIELDS.PROJECT' | translate}}" [configuration]="projectAutoCompleteConfiguration"
-                [configuration]="projectAutoCompleteConfiguration"
+                    titleKey="label" [control]="formGroup.get('project')" [required]="true">
-                    titleKey="label" 
-                    [control]="formGroup.get('project')" 
-                    [required]="true">
                 </auto-complete>
 
                 <td-chips color="accent" [items]="filteredProfiles" formControlName="profiles" placeholder="{{'DMP-EDITOR.FIELDS.PROFILES' | translate}}"
-                    (inputChange)="filterProfiles($event)" requireMatch>
+                    (inputChange)="filterProfiles($event)" requireMatch required>
                     <ng-template td-chip let-chip="chip">
                         <div class="tc-grey-100 bgc-teal-700" td-chip-avatar>{{chip.label.substring(0, 1).toUpperCase()}}</div>
                         {{chip.label}}
@@ -37,9 +34,11 @@
                         </div>
                     </ng-template>
                     <mat-progress-bar [style.height.px]="2" *ngIf="filteredProfilesAsync" mode="indeterminate"></mat-progress-bar>
-                    <mat-error style="font-size:10.5px" *ngIf="formGroup.get('profiles').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+                    <span *ngIf="formGroup.get('profiles').touched || !formGroup.get('profiles').pristine">
+                        <mat-error style="font-size:10.5px" *ngIf="formGroup.get('profiles').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+                    </span>
                 </td-chips>
-               
+
 
                 <td-chips color="accent" [items]="filteredOrganisations" formControlName="organisations" placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}"
                     (inputChange)="filterOrganisations($event)" requireMatch>
@@ -55,28 +54,35 @@
                     <mat-progress-bar [style.height.px]="2" *ngIf="filteringOrganisationsAsync" mode="indeterminate"></mat-progress-bar>
                 </td-chips>
 
-                <td-chips style ="margin-bottom:25px;" color="accent" [items]="filteredResearchers" formControlName="researchers" placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}"
+                <div layout="row"  layout-align="start center">
-                    (inputChange)="filterResearchers($event)" requireMatch>
+                    <td-chips style="margin-bottom:25px; display:inline-block; width:90%" color="accent" [items]="filteredResearchers" formControlName="researchers" placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}"
-                    <ng-template td-chip let-chip="chip">
+                        (inputChange)="filterResearchers($event)" requireMatch>
-                        <div class="tc-grey-100 bgc-teal-700" td-chip-avatar>{{chip.name.substring(0, 1).toUpperCase()}}</div>
+                        <ng-template td-chip let-chip="chip">
-                        {{chip.name}}
+                            <div class="tc-grey-100 bgc-teal-700" td-chip-avatar>{{chip.name.substring(0, 1).toUpperCase()}}</div>
-                    </ng-template>
+                            {{chip.name}}
-                    <ng-template td-autocomplete-option let-option="option">
+                        </ng-template>
-                        <div layout="row" layout-align="start center">
+                        <ng-template td-autocomplete-option let-option="option">
-                            {{option.name}}
+                            <div layout="row" layout-align="start center">
-                        </div>
+                                {{option.name}}
-                    </ng-template>
+                            </div>
-                    <mat-progress-bar [style.height.px]="2" *ngIf="filteringResearchersAsync" mode="indeterminate"></mat-progress-bar>
+                        </ng-template>
-                </td-chips>
+                        <mat-progress-bar [style.height.px]="2" *ngIf="filteringResearchersAsync" mode="indeterminate"></mat-progress-bar>
+                    </td-chips>
+
+                    <button style="display:inline-block;" mat-icon-button (click) ="addResearcher()">
+                        <mat-icon aria-label="Example icon-button with a heart icon">add_circle</mat-icon>
+                    </button>
+                </div>
+
 
                 <mat-list *ngIf="associatedUsers?.length" role="list">
-                        <h3 mat-subheader>Associated Users</h3>                
+                    <h3 mat-subheader>Associated Users</h3>
-                        <mat-list-item role="listitem" *ngFor="let user of associatedUsers">
+                    <mat-list-item role="listitem" *ngFor="let user of associatedUsers">
                         <mat-icon mat-list-icon>person</mat-icon>
                         <div>{{user.name}}</div>
                     </mat-list-item>
-                  </mat-list>
+                </mat-list>
-                  
+
 
                 <div layout="row" class="full-width text-right" align="end">
                     <button mat-raised-button color="primary" (click)="cancel()" type="button">{{'DMP-EDITOR.ACTIONS.CANCEL' | translate}}</button>

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

@@ -1,5 +1,5 @@
 import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } from "@angular/core";
-import { MatPaginator, MatSort, MatSnackBar } from "@angular/material";
+import { MatPaginator, MatSort, MatSnackBar, MatDialog } from "@angular/material";
 import { Router, ActivatedRoute, Params } from "@angular/router";
 import { TranslateService } from "@ngx-translate/core";
 import { DataSource } from "@angular/cdk/table";
@@ -20,6 +20,7 @@ import { AutoCompleteConfiguration } from "../../shared/components/autocomplete/
 import { ProjectCriteria } from "../../models/criteria/project/ProjectCriteria";
 import { ProjectService } from "../../services/project/project.service";
 import { DmpUsersModel } from "@app/models/dmpUsers/DmpUsersModel";
+import { AddResearchersComponent } from "@app/add-researchers/add-researchers.component";
 
 
 
@@ -56,7 +57,8 @@ export class DataManagementPlanEditorComponent implements AfterViewInit {
     public snackBar: MatSnackBar,
     public router: Router,
     public language: TranslateService,
-    private _service: DataManagementPlanService
+    private _service: DataManagementPlanService,
+    public dialog: MatDialog
   ) {
 
   }
@@ -209,4 +211,15 @@ export class DataManagementPlanEditorComponent implements AfterViewInit {
     }
   }
 
+  addResearcher(rowId: any, rowName: any) {
+    let dialogRef = this.dialog.open(AddResearchersComponent, {
+      height: '255px',
+      width: '700px',
+      data: {
+        dmpId: rowId,
+        dmpName: rowName
+      }
+    });
+  }
+
 }

dmp-frontend/src/app/models/researcher/ResearcherModel.ts

@@ -1,8 +1,10 @@
 import { Serializable } from "../Serializable";
+import { FormGroup, FormBuilder } from '@angular/forms';
 
 export class ResearcherModel implements Serializable<ResearcherModel> {
 	public id: String;
 	public name: String;
+	public lastName: String;
 	public uri: String;
 	public email: String;
 
@@ -14,4 +16,14 @@ export class ResearcherModel implements Serializable<ResearcherModel> {
 
 		return this;
 	}
+
+	buildForm(): FormGroup {
+        let formGroup = new FormBuilder().group({
+            firstName:[this.name],
+            lastName:[this.lastName]
+        })
+        
+        return formGroup;
+    }
+	
 }

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

@@ -0,0 +1,31 @@
+import { Invitation } from '../../models/invitation/Invitation';
+import { UserInvitationCriteria } from '../../models/criteria/invitation/UserInvitationCriteria';
+import { User } from '../../models/invitation/User';
+import { HostConfiguration } from '../../app.constants';
+import { BaseHttpService } from '../../utilities/cite-http-service-module/base-http.service';
+import { Injectable } from "@angular/core";
+import { HttpHeaders } from '@angular/common/http';
+import { Observable } from 'rxjs/Observable';
+import { RequestItem } from '../../models/criteria/RequestItem';
+import { ResearcherModel } from '@app/models/researcher/ResearcherModel';
+
+@Injectable()
+export class ResearcherService {
+
+    private actionUrl: string;
+    private headers: HttpHeaders;
+
+    constructor(private http: BaseHttpService) {
+
+        this.actionUrl = HostConfiguration.Server + 'researchers/';
+
+        this.headers = new HttpHeaders();
+        this.headers = this.headers.set('Content-Type', 'application/json');
+        this.headers = this.headers.set('Accept', 'application/json');
+    }
+
+    public createResearcher(researcher: ResearcherModel) {
+        return this.http.post(this.actionUrl + "create", researcher, { headers: this.headers });
+    }
+
+}

dmp-frontend/src/assets/lang/en.json

@@ -199,5 +199,14 @@
 			"USER": "User",
 			"MANAGER": "Manager"
 		}
-	}
+    },
+    "ADDRESEARCHERS-EDITOR": {
+        "TITLE": "Add a Researcher",
+        "FIRST_NAME": "First Name",
+        "LAST_NAME": "Last Name",
+        "ACTIONS": {
+            "SAVE": "Save",
+            "CANCEL": "Cancel"
+        }
+    }
 }