MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Fix Invitation Dialog Box For Invite From Dmp

This commit is contained in:
Diamantis Tziotzios 2019-02-14 12:18:39 +02:00
parent 8a67f0c7f1
commit f88acb4bd1
3 changed files with 78 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation.component.html
View File

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

48
dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation.component.ts
View File

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

3
dmp-frontend/src/assets/i18n/en.json
View File

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