From 9f1ac56148c3553f930a54dd692715c5d296d0a1 Mon Sep 17 00:00:00 2001 From: gpapavgeri Date: Mon, 20 Jul 2020 16:57:57 +0300 Subject: [PATCH] component dmp-invitation renamed to dmp-invitation-dialog & mat-select updated to show predefined role for invited user --- .../services/utilities/enum-utils.service.ts | 8 ++ .../ui/dashboard/drafts/drafts.component.ts | 2 +- .../recent-edited-activity.component.ts | 2 +- ...ecent-edited-dataset-activity.component.ts | 2 +- .../recent-edited-dmp-activity.component.ts | 2 +- .../dataset-listing-item.component.ts | 2 +- .../overview/dataset-overview.component.ts | 2 +- dmp-frontend/src/app/ui/dmp/dmp.module.ts | 2 +- .../editor/people-tab/people-tab.component.ts | 2 +- .../dmp-invitation-dialog.component.html | 70 ++++++++++ .../dmp-invitation-dialog.component.scss | 71 ++++++++++ .../dmp-invitation-dialog.component.ts | 130 ++++++++++++++++++ .../ui/dmp/listing/dmp-listing.component.ts | 2 +- .../dmp-listing-item.component.ts | 2 +- .../ui/dmp/overview/dmp-overview.component.ts | 2 +- .../src/app/ui/navbar/navbar.component.ts | 2 +- 16 files changed, 291 insertions(+), 12 deletions(-) create mode 100644 dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.html create mode 100644 dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.scss create mode 100644 dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.ts diff --git a/dmp-frontend/src/app/core/services/utilities/enum-utils.service.ts b/dmp-frontend/src/app/core/services/utilities/enum-utils.service.ts index c8e960f3b..0e7e3d09f 100644 --- a/dmp-frontend/src/app/core/services/utilities/enum-utils.service.ts +++ b/dmp-frontend/src/app/core/services/utilities/enum-utils.service.ts @@ -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'); + } + } } diff --git a/dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.ts b/dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.ts index f14dd85af..70fce0ebe 100644 --- a/dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.ts +++ b/dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.ts @@ -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({ diff --git a/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.ts b/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.ts index 294db8807..028231bfa 100644 --- a/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.ts +++ b/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.ts @@ -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'; diff --git a/dmp-frontend/src/app/ui/dashboard/recent-edited-dataset-activity/recent-edited-dataset-activity.component.ts b/dmp-frontend/src/app/ui/dashboard/recent-edited-dataset-activity/recent-edited-dataset-activity.component.ts index f005f863d..48bcb10a6 100644 --- a/dmp-frontend/src/app/ui/dashboard/recent-edited-dataset-activity/recent-edited-dataset-activity.component.ts +++ b/dmp-frontend/src/app/ui/dashboard/recent-edited-dataset-activity/recent-edited-dataset-activity.component.ts @@ -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({ diff --git a/dmp-frontend/src/app/ui/dashboard/recent-edited-dmp-activity/recent-edited-dmp-activity.component.ts b/dmp-frontend/src/app/ui/dashboard/recent-edited-dmp-activity/recent-edited-dmp-activity.component.ts index 65021bf36..9c2c621cc 100644 --- a/dmp-frontend/src/app/ui/dashboard/recent-edited-dmp-activity/recent-edited-dmp-activity.component.ts +++ b/dmp-frontend/src/app/ui/dashboard/recent-edited-dmp-activity/recent-edited-dmp-activity.component.ts @@ -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'; diff --git a/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.ts b/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.ts index 6300f3ca8..affea93a2 100644 --- a/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.ts +++ b/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.ts @@ -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'; diff --git a/dmp-frontend/src/app/ui/dataset/overview/dataset-overview.component.ts b/dmp-frontend/src/app/ui/dataset/overview/dataset-overview.component.ts index 52bf7d3d1..673705876 100644 --- a/dmp-frontend/src/app/ui/dataset/overview/dataset-overview.component.ts +++ b/dmp-frontend/src/app/ui/dataset/overview/dataset-overview.component.ts @@ -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'; diff --git a/dmp-frontend/src/app/ui/dmp/dmp.module.ts b/dmp-frontend/src/app/ui/dmp/dmp.module.ts index c6c5d5a70..9620cda3a 100644 --- a/dmp-frontend/src/app/ui/dmp/dmp.module.ts +++ b/dmp-frontend/src/app/ui/dmp/dmp.module.ts @@ -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'; diff --git a/dmp-frontend/src/app/ui/dmp/editor/people-tab/people-tab.component.ts b/dmp-frontend/src/app/ui/dmp/editor/people-tab/people-tab.component.ts index 8fc0f073f..9c2ad38e1 100644 --- a/dmp-frontend/src/app/ui/dmp/editor/people-tab/people-tab.component.ts +++ b/dmp-frontend/src/app/ui/dmp/editor/people-tab/people-tab.component.ts @@ -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({ diff --git a/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.html b/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.html new file mode 100644 index 000000000..c6faefb3f --- /dev/null +++ b/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.html @@ -0,0 +1,70 @@ +
+
+
+ close +
+
+

{{'DMP-LISTING.ACTIONS.INVITE-AUTHORS' | translate}}

+
+
+ + + + +
+ + + {{enumUtils.toRoleString(roles.Owner)}} + {{enumUtils.toRoleString(roles.Member)}} + + + +
+
+
+
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.scss b/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.scss new file mode 100644 index 000000000..315ec3063 --- /dev/null +++ b/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.scss @@ -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; +} diff --git a/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.ts b/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.ts new file mode 100644 index 000000000..8ea7419e5 --- /dev/null +++ b/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.ts @@ -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, + @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(...(this.formGroup.get('users').value).filter(user => typeof(user) === 'string').map(email => ({ email: email, name: email }))); + invitationObject.users.push(...(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 { + this.filteredUsers = undefined; + this.filteredUsersAsync = true; + const request = new RequestItem(); + request.criteria = { like: value }; + return this.invitationService.getDmpInvitationUsers(request) + .pipe(takeUntil(this._destroyed)); + // .subscribe(items => { + // this.filteredUsers = new JsonSerializer(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; + // }); + } + +} diff --git a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts index 02e4aa33c..e3461242d 100644 --- a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts +++ b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts @@ -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'; diff --git a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.ts b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.ts index 3862fd325..940dc2ff5 100644 --- a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.ts +++ b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.ts @@ -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'; diff --git a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.ts b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.ts index d824b15f9..928454622 100644 --- a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.ts +++ b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.ts @@ -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'; diff --git a/dmp-frontend/src/app/ui/navbar/navbar.component.ts b/dmp-frontend/src/app/ui/navbar/navbar.component.ts index 50fad84c7..1ed369b5d 100644 --- a/dmp-frontend/src/app/ui/navbar/navbar.component.ts +++ b/dmp-frontend/src/app/ui/navbar/navbar.component.ts @@ -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';