Fix Invitation Dialog Box For Invite From Dmp

dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation.component.html

@@ -1,13 +1,41 @@
 <form *ngIf="formGroup" [formGroup]="formGroup">
 	<h1 mat-dialog-title>{{'INVITATION-EDITOR.TITLE' | translate}} {{data.dmpName}}</h1>
 	<div mat-dialog-content>
+		<!-- User -->
 		<mat-form-field class="col">
-			<app-multiple-auto-complete required='true' [formControl]="formGroup.get('users')" placeholder="{{'INVITATION-EDITOR.AUTOCOMPLETE-TITLE' | translate}}" [configuration]="usersAutoCompleteConfiguration">
+			<app-multiple-auto-complete [formControl]="formGroup.get('users')"
+				placeholder="{{'INVITATION-EDITOR.AUTOCOMPLETE-USER' | translate}}"
+				[configuration]="usersAutoCompleteConfiguration">
 			</app-multiple-auto-complete>
-			<mat-error *ngIf="formGroup.get('users').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 		</mat-form-field>
+
+		<!-- Email -->
+		<mat-form-field class="example-chip-list col">
+			<mat-chip-list #chipList>
+				<mat-chip *ngFor="let email of emails" [selectable]="selectable" [removable]="removable"
+					(removed)="remove(email)">
+					{{email}}
+					<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
+				</mat-chip>
+				<input placeholder="{{'INVITATION-EDITOR.AUTOCOMPLETE-EMAIL' | translate}}" [matChipInputFor]="chipList"
+					[matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur"
+					(matChipInputTokenEnd)="add($event)">
+			</mat-chip-list>
+		</mat-form-field>
+
+		<!-- <mat-form-field class="col">
+			<app-multiple-auto-complete required='false' [formControl]="formGroup.get('users').get('email')"
+				placeholder="{{'INVITATION-EDITOR.AUTOCOMPLETE-EMAIL' | translate}}"
+				[configuration]="emailAutoCompleteConfiguration" ()>
+			</app-multiple-auto-complete>
+			<mat-error *ngIf="formGroup.get('users').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+			</mat-error>
+		</mat-form-field> -->
+
+
 		<div class="col-12">
-			<button mat-raised-button color="primary" (click)="send()" type="button">{{'INVITATION-EDITOR.ACTIONS.SEND-INVITATION' | translate}}</button>
+			<button mat-raised-button color="primary" (click)="send()"
+				type="button">{{'INVITATION-EDITOR.ACTIONS.SEND-INVITATION' | translate}}</button>
 		</div>
 	</div>
 </form>

dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation.component.ts

@@ -1,6 +1,7 @@
+import { COMMA, ENTER } from '@angular/cdk/keycodes';
 import { Component, Inject, OnInit } from '@angular/core';
 import { FormGroup } from '@angular/forms';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { MatChipInputEvent, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Observable } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -8,9 +9,12 @@ import { BaseComponent } from '../../../core/common/base/base.component';
 import { DmpInvitation } from '../../../core/model/dmp/invitation/dmp-invitation';
 import { DmpInvitationUser } from '../../../core/model/dmp/invitation/dmp-invitation-user';
 import { DmpInvitationUserCriteria } from '../../../core/query/dmp/dmp-invitation-user-criteria';
+import { RequestItem } from '../../../core/query/request-item';
 import { DmpInvitationService } from '../../../core/services/dmp/dmp-invitation.service';
 import { MultipleAutoCompleteConfiguration } from '../../../library/auto-complete/multiple/multiple-auto-complete-configuration';
-import { RequestItem } from '../../../core/query/request-item';
+
+
+
 
 @Component({
 	selector: 'app-invitation-component',
@@ -21,6 +25,14 @@ export class DmpInvitationDialogComponent extends BaseComponent implements OnIni
 	public formGroup: FormGroup;
 	public filteredUsersAsync = false;
 	public filteredUsers: DmpInvitationUser[];
+	public emails: string[] = [];
+
+	visible = true;
+	selectable = true;
+	removable = true;
+	addOnBlur = true;
+	readonly separatorKeysCodes: number[] = [ENTER, COMMA];
+
 
 	usersAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = {
 		filterFn: this.filterUsers.bind(this),
@@ -29,6 +41,25 @@ export class DmpInvitationDialogComponent extends BaseComponent implements OnIni
 		titleFn: (item) => item.name
 	};
 
+	add(event: MatChipInputEvent): void {
+		const input = event.input;
+		const value = event.value;
+		if ((value || '').trim()) {
+			this.emails.push(value.trim());
+		}
+		if (input) {
+			input.value = '';
+		}
+	}
+
+	remove(email: string): void {
+		const index = this.emails.indexOf(email);
+		if (index >= 0) {
+			this.emails.splice(index, 1);
+		}
+	}
+
+
 	constructor(
 		public invitationService: DmpInvitationService,
 		public route: ActivatedRoute,
@@ -45,7 +76,16 @@ export class DmpInvitationDialogComponent extends BaseComponent implements OnIni
 
 
 	send(value: any) {
-		this.invitationService.inviteDmpInvitationUsers(this.formGroup.value)
+		let invitationObject: any = {};
+		invitationObject.dataManagementPlan = this.data.dmpId;
+		invitationObject.users = [];
+
+		invitationObject.users.push(...this.formGroup.get('users').value);
+		this.emails.forEach(email => {
+			invitationObject.users.push({ email: email, name: email });
+		});
+
+		this.invitationService.inviteDmpInvitationUsers(invitationObject)
 			.pipe(takeUntil(this._destroyed))
 			.subscribe(
 				null, null, () => this.dialogRef.close()
@@ -54,7 +94,6 @@ export class DmpInvitationDialogComponent extends BaseComponent implements OnIni
 
 	filterUsers(value: string): Observable<DmpInvitationUser[]> {
 		this.filteredUsers = undefined;
-
 		this.filteredUsersAsync = true;
 		const request = new RequestItem<DmpInvitationUserCriteria>();
 		request.criteria = { like: value };
@@ -72,4 +111,3 @@ export class DmpInvitationDialogComponent extends BaseComponent implements OnIni
 		// });
 	}
 }
-

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

@@ -432,7 +432,8 @@
 	},
 	"INVITATION-EDITOR": {
 		"TITLE": "Send Invitations for ",
-		"AUTOCOMPLETE-TITLE": "User/Email",
+		"AUTOCOMPLETE-USER": "User",
+		"AUTOCOMPLETE-EMAIL": "Email",
 		"ACTIONS": {
 			"SEND-INVITATION": "Send Invitations",
 			"CANCEL": "Cancel"