Fixes on invitation dialog

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

@@ -6,22 +6,23 @@
 		<div class="row m-0">
 			<h1 mat-dialog-title class="title">{{'DMP-LISTING.ACTIONS.INVITE-AUTHORS' | translate}}</h1>
 		</div>
-		<div mat-dialog-content class="row content">
+		<div mat-dialog-content class="row content pb-2">
 			<mat-form-field class="col pt-0 pb-2 mb-4 search" appearance="standard">
 				<app-multiple-auto-complete [formControl]="formGroup.get('users')"
 					placeholder="{{'INVITATION-EDITOR.AUTOCOMPLETE-USER-EMAIL' | translate}}"
 					[configuration]="usersAutoCompleteConfiguration">
 				</app-multiple-auto-complete>
+				<mat-hint class="pl-3">{{'GENERAL.INVITATION-DIALOG.HINT' | translate}}</mat-hint>
 			</mat-form-field>
-			<div class="col-12 d-flex justify-content-end align-items-center row m-0 pr-0">
+			<div class="col-12 d-flex justify-content-end align-items-center row m-0">
 				<mat-form-field class="select-role">
-					<mat-select [formControl]="formGroup.get('role')"> 
+					<mat-select [formControl]="formGroup.get('role')">
 					  <mat-option [value]="roles.Owner">{{enumUtils.toRoleString(roles.Owner)}}</mat-option>
 					  <mat-option [value]="roles.Member">{{enumUtils.toRoleString(roles.Member)}}</mat-option>
 					</mat-select>
 				  </mat-form-field>
-				<button mat-raised-button (click)="send()" type="button"
+				<button mat-raised-button *ngIf="hasValue()" (click)="send()" type="button" class="invite-btn">{{'DMP-LISTING.ACTIONS.INVITE-SHORT' | translate}}</button>
-					class="invite-btn">{{'DMP-LISTING.ACTIONS.INVITE-SHORT' | translate}}</button>
+				<button mat-raised-button *ngIf="!hasValue()" type="button" class="invite-btn-disabled">{{'DMP-LISTING.ACTIONS.INVITE-SHORT' | translate}}</button>
 			</div>
 		</div>
 	</form>
@@ -67,4 +68,4 @@
 			<button mat-raised-button color="primary" (click)="send()" type="button" class="ml-auto">{{'INVITATION-EDITOR.ACTIONS.SEND-INVITATION' | translate}}</button>
 		</div>
 	</div>
-</form> -->
+</form> -->

dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.scss

@@ -40,7 +40,7 @@
     .mat-form-field-infix {
         border: none;
         padding: 14px;
-    }   
+    }
     .mat-form-field-underline {
         display: none;
     }
@@ -64,7 +64,7 @@
 
 ::ng-deep .select-role {
     .mat-form-field-outline-start,
-    .mat-form-field-outline-gap, 
+    .mat-form-field-outline-gap,
     .mat-form-field-outline-end {
         border: none !important;
     }
@@ -74,6 +74,17 @@
 }
 
 .invite-btn {
+	background: #ffffff 0% 0% no-repeat padding-box;
+	border: 1px solid #129d99;
+	border-radius: 30px;
+	opacity: 1;
+	width: 101px;
+	height: 43px;
+	color: #129d99;
+	font-weight: 500;
+}
+
+.invite-btn-disabled {
     width: 6.64em;
     height: 2.93em;
     background: #FFFFFF;
@@ -82,5 +93,6 @@
     font-weight: bold;
     letter-spacing: -0.35px;
     color: #B5B5B5;
-    margin-bottom: 0.25em;
+	margin-bottom: 0.25em;
+	cursor: default;
 }

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

@@ -59,6 +59,7 @@ export class DmpInvitationDialogComponent extends BaseComponent implements OnIni
 		initialItems: (excludedItems: any[]) => this.filterUsers('').pipe(map(result => result.filter(resultItem => (excludedItems || []).map(x => x.id).indexOf(resultItem.id) === -1))),
 		displayFn: (item) => typeof(item) === 'string' ? item : item.name,
 		titleFn: (item) => typeof(item) === 'string' ? item : item.name,
+		subtitleFn: (item) => item.email,
 		valueAssign: (item) => {
 			const result = typeof(item) === 'string' ? item : item.email;
 			return result;
@@ -97,9 +98,9 @@ export class DmpInvitationDialogComponent extends BaseComponent implements OnIni
 
 		this.invitationService.inviteDmpInvitationUsers(invitationObject)
 			.pipe(takeUntil(this._destroyed))
-			.subscribe(
+			.subscribe(items => {
-				null, null, () => this.dialogRef.close()
+				this.dialogRef.close();
-			);
+			});
 	}
 
 	closeDialog(): void {
@@ -125,4 +126,8 @@ export class DmpInvitationDialogComponent extends BaseComponent implements OnIni
 		// });
 	}
 
+	hasValue(): boolean {
+		return this.formGroup.get('users') && this.formGroup.get('users').value && this.formGroup.get('users').value.length > 0;
+	}
+
 }

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

@@ -85,6 +85,9 @@
 			"MACHINE-ACTIONABLE": "for machine-actionable DMPs",
 			"UPLOAD-FILE": "Upload File"
 		},
+		"INVITATION-DIALOG": {
+			"HINT": "Please press comma after each input of new user invitation"
+		},
 		"ACTIONS": {
 			"VIEW-ALL": "Alles anzeigen",
 			"SHOW-MORE": "Mehr anzeigen",

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

@@ -86,6 +86,9 @@
 			"MACHINE-ACTIONABLE": "for machine-actionable DMPs",
 			"UPLOAD-FILE": "Upload File"
 		},
+		"INVITATION-DIALOG": {
+			"HINT": "Please press comma after each input of new user invitation"
+		},
 		"ACTIONS": {
 			"VIEW-ALL": "View All",
 			"SHOW-MORE": "Show more",

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

@@ -86,6 +86,9 @@
 			"MACHINE-ACTIONABLE": "for machine-actionable DMPs",
 			"UPLOAD-FILE": "Upload File"
 		},
+		"INVITATION-DIALOG": {
+			"HINT": "Please press comma after each input of new user invitation"
+		},
 		"ACTIONS": {
 			"VIEW-ALL": "Ver todo",
 			"SHOW-MORE": "Mostrar más",

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

@@ -86,6 +86,9 @@
 			"MACHINE-ACTIONABLE": "for machine-actionable DMPs",
 			"UPLOAD-FILE": "Upload File"
 		},
+		"INVITATION-DIALOG": {
+			"HINT": "Please press comma after each input of new user invitation"
+		},
 		"ACTIONS": {
 			"VIEW-ALL": "Προβολή όλων",
 			"SHOW-MORE": "Δείτε περισσότερα",

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

@@ -83,6 +83,9 @@
 			"MACHINE-ACTIONABLE": "for machine-actionable DMPs",
 			"UPLOAD-FILE": "Upload File"
 		},
+		"INVITATION-DIALOG": {
+			"HINT": "Please press comma after each input of new user invitation"
+		},
 		"ACTIONS": {
 			"VIEW-ALL": "Pozrieť všetko",
 			"SHOW-MORE": "Ukázať viac",

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

@@ -85,6 +85,9 @@
 			"MACHINE-ACTIONABLE": "for machine-actionable DMPs",
 			"UPLOAD-FILE": "Upload File"
 		},
+		"INVITATION-DIALOG": {
+			"HINT": "Please press comma after each input of new user invitation"
+		},
 		"ACTIONS": {
 			"VIEW-ALL": "Tümüne Gör",
 			"SHOW-MORE": "Daha fazla göster",