component dmp-invitation renamed to dmp-invitation-dialog & mat-select updated to show predefined role for invited user

This commit is contained in:
gpapavgeri 2020-07-20 16:57:57 +03:00
parent 04f09ef578
commit 9f1ac56148
16 changed files with 291 additions and 12 deletions

View File

@ -10,6 +10,7 @@ import { DmpStatus } from '../../common/enum/dmp-status';
import { ValidationType } from '../../common/enum/validation-type';
import { DatasetProfileInternalDmpEntitiesType } from '../../common/enum/dataset-profile-internal-dmp-entities-type';
import { RecentActivityOrder } from '@app/core/common/enum/recent-activity-order';
import { Role } from '@app/core/common/enum/role';
@Injectable()
export class EnumUtils {
@ -111,4 +112,11 @@ export class EnumUtils {
case RecentActivityOrder.STATUS: return this.language.instant('TYPES.RECENT-ACTIVITY-ORDER.STATUS');
}
}
toRoleString(status: Role): string {
switch (status) {
case Role.Owner: return this.language.instant('FACET-SEARCH.ROLE.OWNER');
case Role.Member: return this.language.instant('FACET-SEARCH.ROLE.MEMBER');
}
}
}

View File

@ -20,7 +20,7 @@ import { SnackBarNotificationLevel } from '@app/core/services/notification/ui-no
import * as FileSaver from 'file-saver';
import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
import { UiNotificationService } from '@app/core/services/notification/ui-notification-service';
import { DmpInvitationDialogComponent } from '@app/ui/dmp/invitation/dmp-invitation.component';
import { DmpInvitationDialogComponent } from '@app/ui/dmp/invitation/dmp-invitation-dialog.component';
import { RecentActivityOrder } from '@app/core/common/enum/recent-activity-order';
@Component({

View File

@ -15,7 +15,7 @@ import { BaseComponent } from '@common/base/base.component';
import { TranslateService } from '@ngx-translate/core';
import * as FileSaver from 'file-saver';
import { takeUntil } from 'rxjs/operators';
import { DmpInvitationDialogComponent } from '@app/ui/dmp/invitation/dmp-invitation.component';
import { DmpInvitationDialogComponent } from '@app/ui/dmp/invitation/dmp-invitation-dialog.component';
import { DmpStatus } from '@app/core/common/enum/dmp-status';
import { DatasetService } from '@app/core/services/dataset/dataset.service';
import { DatasetListingModel } from '@app/core/model/dataset/dataset-listing';

View File

@ -20,7 +20,7 @@ import { ValidationErrorModel } from '@common/forms/validation/error-model/valid
import { UiNotificationService } from '@app/core/services/notification/ui-notification-service';
import { SnackBarNotificationLevel } from '@common/modules/notification/ui-notification-service';
import { DatasetStatus } from '@app/core/common/enum/dataset-status';
import { DmpInvitationDialogComponent } from '@app/ui/dmp/invitation/dmp-invitation.component';
import { DmpInvitationDialogComponent } from '@app/ui/dmp/invitation/dmp-invitation-dialog.component';
import { RecentActivityOrder } from '@app/core/common/enum/recent-activity-order';
@Component({

View File

@ -15,7 +15,7 @@ import { BaseComponent } from '@common/base/base.component';
import { TranslateService } from '@ngx-translate/core';
import * as FileSaver from 'file-saver';
import { takeUntil } from 'rxjs/operators';
import { DmpInvitationDialogComponent } from '@app/ui/dmp/invitation/dmp-invitation.component';
import { DmpInvitationDialogComponent } from '@app/ui/dmp/invitation/dmp-invitation-dialog.component';
import { DmpStatus } from '@app/core/common/enum/dmp-status';
import { DatasetService } from '@app/core/services/dataset/dataset.service';
import { DatasetListingModel } from '@app/core/model/dataset/dataset-listing';

View File

@ -7,7 +7,7 @@ import { DatasetWizardService } from '@app/core/services/dataset-wizard/dataset-
import { BaseComponent } from '@common/base/base.component';
import { takeUntil } from 'rxjs/operators';
import * as FileSaver from 'file-saver';
import { DmpInvitationDialogComponent } from '@app/ui/dmp/invitation/dmp-invitation.component';
import { DmpInvitationDialogComponent } from '@app/ui/dmp/invitation/dmp-invitation-dialog.component';
import { MatDialog } from '@angular/material';
import { DatasetCopyDialogueComponent } from '../../dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.component';
import { FormControl } from '@angular/forms';

View File

@ -20,7 +20,7 @@ import { UserInfoListingModel } from '@app/core/model/user/user-info-listing';
import { DatasetStatus } from '@app/core/common/enum/dataset-status';
import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component';
import * as FileSaver from 'file-saver';
import { DmpInvitationDialogComponent } from '@app/ui/dmp/invitation/dmp-invitation.component';
import { DmpInvitationDialogComponent } from '@app/ui/dmp/invitation/dmp-invitation-dialog.component';
import { DatasetWizardEditorModel } from '../dataset-wizard/dataset-wizard-editor.model';
import { DatasetWizardService } from '@app/core/services/dataset-wizard/dataset-wizard.service';
import { FormControl } from '@angular/forms';

View File

@ -18,7 +18,7 @@ import { GeneralTabComponent } from '@app/ui/dmp/editor/general-tab/general-tab.
import { GrantTabComponent } from '@app/ui/dmp/editor/grant-tab/grant-tab.component';
import { PeopleTabComponent } from '@app/ui/dmp/editor/people-tab/people-tab.component';
import { InvitationAcceptedComponent } from '@app/ui/dmp/invitation/accepted/dmp-invitation-accepted.component';
import { DmpInvitationDialogComponent } from '@app/ui/dmp/invitation/dmp-invitation.component';
import { DmpInvitationDialogComponent } from '@app/ui/dmp/invitation/dmp-invitation-dialog.component';
import { DmpCriteriaComponent } from '@app/ui/dmp/listing/criteria/dmp-criteria.component';
import { DmpUploadDialogue } from '@app/ui/dmp/listing/upload-dialogue/dmp-upload-dialogue.component';
import { DmpListingComponent } from '@app/ui/dmp/listing/dmp-listing.component';

View File

@ -7,7 +7,7 @@ import { Principal } from '../../../../core/model/auth/principal';
import { UserInfoListingModel } from '../../../../core/model/user/user-info-listing';
import { AuthService } from '../../../../core/services/auth/auth.service';
import { DmpService } from '../../../../core/services/dmp/dmp.service';
import { DmpInvitationDialogComponent } from '../../invitation/dmp-invitation.component';
import { DmpInvitationDialogComponent } from '../../invitation/dmp-invitation-dialog.component';
import { DmpEditorModel } from '../dmp-editor.model';
@Component({

View File

@ -0,0 +1,70 @@
<div class="form-container">
<form *ngIf="formGroup" [formGroup]="formGroup" class="m-0">
<div class="row d-flex justify-content-end m-0" (click)="closeDialog()">
<mat-icon class="close-icon">close</mat-icon>
</div>
<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">
<mat-form-field class="col pt-0 pb-2 mb-4" appearance="standard">
<app-multiple-auto-complete [formControl]="formGroup.get('users')"
placeholder="{{'INVITATION-EDITOR.AUTOCOMPLETE-USER-EMAIL' | translate}}"
[configuration]="usersAutoCompleteConfiguration">
</app-multiple-auto-complete>
</mat-form-field>
<div class="col-12 d-flex justify-content-end align-items-center row m-0 pr-0">
<mat-form-field class="select-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"
class="invite-btn">{{'DMP-LISTING.ACTIONS.INVITE-SHORT' | translate}}</button>
</div>
</div>
</form>
</div>
<!-- <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 [formControl]="formGroup.get('users')"
placeholder="{{'INVITATION-EDITOR.AUTOCOMPLETE-USER' | translate}}"
[configuration]="usersAutoCompleteConfiguration">
</app-multiple-auto-complete>
</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 d-flex">
<button mat-raised-button color="primary" (click)="send()" type="button" class="ml-auto">{{'INVITATION-EDITOR.ACTIONS.SEND-INVITATION' | translate}}</button>
</div>
</div>
</form> -->

View File

@ -0,0 +1,71 @@
.form-container {
width: 33em;
min-height: 14em;
padding: 0.28em 0.34em 0.875em 1.125em;
}
.close-icon {
cursor: pointer;
}
.title {
font-size: 2.375em;
font-weight: lighter;
color: #000000;
opacity: 0.8;
margin-bottom: 0.842em;
}
.content {
width: 31em;
margin: 0px;
padding: 0px;
}
.mat-form-field {
background: #FAFAFA;
border: 1px solid #D1D1D1;
border-radius: 4px;
}
::ng-deep .mat-dialog-container {
border-radius: 8px;
}
::ng-deep .mat-form-field-underline {
display: none;
}
::ng-deep .mat-form-field-wrapper {
padding: 0em !important;
}
::ng-deep .mat-form-field-infix {
border: none;
}
::ng-deep .align-arrow-right {
display: none;
}
.invite-btn {
width: 6.64em;
height: 2.93em;
background: #FFFFFF;
border: 1px solid #B5B5B5;
border-radius: 30px;
font-weight: bold;
letter-spacing: -0.35px;
color: #B5B5B5;
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;
}

View File

@ -0,0 +1,130 @@
import { COMMA, ENTER } from '@angular/cdk/keycodes';
import { Component, Inject, OnInit, ViewChild } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { MatChipInputEvent } from '@angular/material/chips';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { ActivatedRoute, Router } from '@angular/router';
import { DmpInvitation } from '@app/core/model/dmp/invitation/dmp-invitation';
import { DmpInvitationUser } from '@app/core/model/dmp/invitation/dmp-invitation-user';
import { DmpInvitationUserCriteria } from '@app/core/query/dmp/dmp-invitation-user-criteria';
import { RequestItem } from '@app/core/query/request-item';
import { DmpInvitationService } from '@app/core/services/dmp/dmp-invitation.service';
import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/multiple/multiple-auto-complete-configuration';
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';
import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
@Component({
selector: 'app-invitation-dialog-component',
templateUrl: 'dmp-invitation-dialog.component.html',
styleUrls: ['./dmp-invitation-dialog.component.scss'],
})
export class DmpInvitationDialogComponent extends BaseComponent implements OnInit {
public formGroup: FormGroup;
public filteredUsersAsync = false;
public filteredUsers: DmpInvitationUser[];
public emails: string[] = [];
public roles = Role;
public roleNames: string[];
visible = true;
selectable = true;
removable = true;
addOnBlur = true;
readonly separatorKeysCodes: number[] = [ENTER, COMMA];
constructor(
public invitationService: DmpInvitationService,
public enumUtils: EnumUtils,
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;
invitation.role = Role.Member;
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;
return result;
}
};
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);
}
}
send(value: any) {
let invitationObject: any = {};
invitationObject.dataManagementPlan = this.data.dmpId;
invitationObject.role = this.formGroup.get('role').value;
invitationObject.users = [];
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'));
//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()
);
}
closeDialog(): void {
this.dialogRef.close();
}
filterUsers(value: string): Observable<DmpInvitationUser[]> {
this.filteredUsers = undefined;
this.filteredUsersAsync = true;
const request = new RequestItem<DmpInvitationUserCriteria>();
request.criteria = { like: value };
return this.invitationService.getDmpInvitationUsers(request)
.pipe(takeUntil(this._destroyed));
// .subscribe(items => {
// this.filteredUsers = new JsonSerializer<DmpInvitationUser>(DmpInvitationUser).fromJSONArray(items);
// if (!this.filteredUsers || this.filteredUsers.length === 0) {
// const user = new DmpInvitationUser();
// user.email = value;
// user.name = value;
// this.filteredUsers.push(user);
// }
// this.filteredUsersAsync = false;
// });
}
}

View File

@ -10,7 +10,7 @@ import { GrantListingModel } from '@app/core/model/grant/grant-listing';
import { DmpCriteria } from '@app/core/query/dmp/dmp-criteria';
import { DmpService } from '@app/core/services/dmp/dmp.service';
import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
import { DmpInvitationDialogComponent } from '@app/ui/dmp/invitation/dmp-invitation.component';
import { DmpInvitationDialogComponent } from '@app/ui/dmp/invitation/dmp-invitation-dialog.component';
import { DmpCriteriaComponent } from '@app/ui/dmp/listing/criteria/dmp-criteria.component';
import { BreadcrumbItem } from '@app/ui/misc/breadcrumb/definition/breadcrumb-item';
import { IBreadCrumbComponent } from '@app/ui/misc/breadcrumb/definition/IBreadCrumbComponent';

View File

@ -1,7 +1,7 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { DmpListingModel } from '../../../../core/model/dmp/dmp-listing';
import { MatDialog } from '@angular/material/dialog';
import { DmpInvitationDialogComponent } from '../../invitation/dmp-invitation.component';
import { DmpInvitationDialogComponent } from '../../invitation/dmp-invitation-dialog.component';
import { Router, ActivatedRoute } from '@angular/router';
import { DatasetService } from '../../../../core/services/dataset/dataset.service';
import { AuthService } from '../../../../core/services/auth/auth.service';

View File

@ -21,7 +21,7 @@ import * as FileSaver from 'file-saver';
import { Observable, of as observableOf, interval } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { Role } from "@app/core/common/enum/role";
import { DmpInvitationDialogComponent } from '../invitation/dmp-invitation.component';
import { DmpInvitationDialogComponent } from '../invitation/dmp-invitation-dialog.component';
import { MultipleChoiceDialogModule } from '@common/modules/multiple-choice-dialog/multiple-choice-dialog.module';
import { MultipleChoiceDialogComponent } from '@common/modules/multiple-choice-dialog/multiple-choice-dialog.component';
import { ConfigurationService } from '@app/core/services/configuration/configuration.service';

View File

@ -12,7 +12,7 @@ import { DATASETS_ROUTES, DMP_ROUTES, GENERAL_ROUTES } from '../sidebar/sidebar.
import { LanguageService } from '@app/core/services/language/language.service';
import { UserService } from '@app/core/services/user/user.service';
import { FaqDialogComponent } from '../faq/dialog/faq-dialog.component';
import { DmpInvitationDialogComponent } from '../dmp/invitation/dmp-invitation.component';
import { DmpInvitationDialogComponent } from '../dmp/invitation/dmp-invitation-dialog.component';
import { StartNewDmpDialogComponent } from '../dmp/start-new-dmp-dialogue/start-new-dmp-dialog.component';
import { UserListingModel } from '@app/core/model/user/user-listing';
import { Principal } from '@app/core/model/auth/principal';