Add select-role in dmp-invitation
This commit is contained in:
parent
aa930f097a
commit
987b97e802
|
@ -14,7 +14,15 @@
|
|||
[configuration]="usersAutoCompleteConfiguration">
|
||||
</app-multiple-auto-complete>
|
||||
</mat-form-field>
|
||||
<div class="col-12 d-flex justify-content-end row m-0">
|
||||
<div class="col-12 d-flex justify-content-end align-items-center row m-0 pr-0">
|
||||
<mat-form-field class="select-role" floatLabel="never">
|
||||
<mat-label>{{'DMP-LISTING.MEMBER' | translate}}</mat-label>
|
||||
<mat-select [formControl]="formGroup.get('role')">
|
||||
<mat-option *ngFor="let roleName of roleNames | keyvalue" selected [value]="roles[roleName.value]">
|
||||
{{ roleName.value }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<button mat-raised-button (click)="send()" type="button"
|
||||
class="invite-btn">{{'DMP-LISTING.ACTIONS.INVITE-SHORT' | translate}}</button>
|
||||
</div>
|
||||
|
|
|
@ -28,6 +28,10 @@
|
|||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::ng-deep .mat-dialog-container {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
::ng-deep .mat-form-field-underline {
|
||||
display: none;
|
||||
}
|
||||
|
@ -56,3 +60,12 @@
|
|||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
.select-role {
|
||||
width: 16% !important;
|
||||
font-size: 14px;
|
||||
color: #848484;
|
||||
height: min-content;
|
||||
margin-right: 2.5rem;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
|
|
@ -14,6 +14,7 @@ import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/mu
|
|||
import { BaseComponent } from '@common/base/base.component';
|
||||
import { Observable } from 'rxjs';
|
||||
import { map, takeUntil } from 'rxjs/operators';
|
||||
import { Role } from '@app/core/common/enum/role';
|
||||
|
||||
@Component({
|
||||
selector: 'app-invitation-component',
|
||||
|
@ -26,6 +27,8 @@ export class DmpInvitationDialogComponent extends BaseComponent implements OnIni
|
|||
public filteredUsersAsync = false;
|
||||
public filteredUsers: DmpInvitationUser[];
|
||||
public emails: string[] = [];
|
||||
public roles = Role;
|
||||
public roleNames: string[];
|
||||
|
||||
visible = true;
|
||||
selectable = true;
|
||||
|
@ -33,13 +36,29 @@ export class DmpInvitationDialogComponent extends BaseComponent implements OnIni
|
|||
addOnBlur = true;
|
||||
readonly separatorKeysCodes: number[] = [ENTER, COMMA];
|
||||
|
||||
constructor(
|
||||
public invitationService: DmpInvitationService,
|
||||
public route: ActivatedRoute,
|
||||
public router: Router,
|
||||
public dialogRef: MatDialogRef<DmpInvitationDialogComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data: any
|
||||
) {
|
||||
super();
|
||||
this.roleNames = Object.keys(this.roles).filter(key => key.length > 1);
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
const invitation = new DmpInvitation();
|
||||
invitation.dataManagementPlan = this.data.dmpId;
|
||||
this.formGroup = invitation.buildForm();
|
||||
}
|
||||
|
||||
usersAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = {
|
||||
filterFn: this.filterUsers.bind(this),
|
||||
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,
|
||||
valueAssign: (item) => {
|
||||
|
||||
const result = typeof(item) === 'string' ? item : item.email;
|
||||
console.log(result);
|
||||
return result;
|
||||
|
@ -64,30 +83,13 @@ export class DmpInvitationDialogComponent extends BaseComponent implements OnIni
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
constructor(
|
||||
public invitationService: DmpInvitationService,
|
||||
public route: ActivatedRoute,
|
||||
public router: Router,
|
||||
public dialogRef: MatDialogRef<DmpInvitationDialogComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data: any
|
||||
) { super(); }
|
||||
|
||||
ngOnInit(): void {
|
||||
const invitation = new DmpInvitation();
|
||||
invitation.dataManagementPlan = this.data.dmpId;
|
||||
this.formGroup = invitation.buildForm();
|
||||
}
|
||||
|
||||
|
||||
send(value: any) {
|
||||
let invitationObject: any = {};
|
||||
invitationObject.dataManagementPlan = this.data.dmpId;
|
||||
invitationObject.role = this.formGroup.get('role').value;
|
||||
invitationObject.users = [];
|
||||
console.log(this.formGroup.get('users').value);
|
||||
invitationObject.users.push(...(<any[]>this.formGroup.get('users').value).filter(user => typeof(user) === 'string').map(email => ({ email: email, name: email })));
|
||||
invitationObject.users.push(...(<any[]>this.formGroup.get('users').value).filter(user => typeof(user) !== 'string'));
|
||||
console.log(invitationObject.users);
|
||||
//invitationObject.users.push(...this.formGroup.get('users').value);
|
||||
this.emails.forEach(email => {
|
||||
invitationObject.users.push({ email: email, name: email });
|
||||
|
|
Loading…
Reference in New Issue