This is an automated email from the ASF dual-hosted git repository. ytykhun pushed a commit to branch DATALAB-2347 in repository https://gitbox.apache.org/repos/asf/incubator-datalab.git
commit 1263697ba8da552c2b128c8d0af05be6a49af22b Author: Yurii Tykhun <[email protected]> AuthorDate: Mon Aug 2 13:01:41 2021 +0300 [DATALAB-2347] refactored Roles component --- .../app/administration/roles/roles.component.html | 137 +++++++---- .../app/administration/roles/roles.component.scss | 77 +++--- .../app/administration/roles/roles.component.ts | 259 +++++++++++++-------- 3 files changed, 292 insertions(+), 181 deletions(-) diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.html b/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.html index 400048c..c5d04a7 100644 --- a/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.html +++ b/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.html @@ -23,8 +23,12 @@ matTooltipPosition="above" [matTooltipDisabled]="healthStatus?.admin" > - <button mat-raised-button class="butt add-group" (click)="stepperView = !stepperView" [disabled]="!healthStatus?.admin" - > + <button + mat-raised-button + class="butt add-group" + (click)="stepperView = !stepperView" + [disabled]="!healthStatus?.admin" + > <i class="material-icons">people_outline</i>Add group </button> </div> @@ -36,19 +40,35 @@ <mat-step [completed]='false'> <ng-template matStepLabel>Groups</ng-template> <div class="inner-step mat-reset"> - <input [validator]="groupValidation()" type="text" placeholder="Enter group name" [(ngModel)]="setupGroup" - #setupGroupName="ngModel"> - <div class="error" *ngIf="setupGroupName.errors?.patterns && setupGroupName.dirty">Group name can only - contain letters, numbers, hyphens and '_'.</div> - <div class="error" *ngIf="setupGroupName.errors?.duplicate && setupGroupName.dirty">Group name already - exists.</div> - <div class="error" *ngIf="setupGroupName.errors?.long">Group name cannot be longer than {{maxGroupLength}} characters.</div> + <input + [validator]="groupValidation()" + type="text" + placeholder="Enter group name" + [(ngModel)]="setupGroup" + #setupGroupName="ngModel" + /> + <div class="error" *ngIf="setupGroupName.errors?.patterns && setupGroupName.dirty"> + Group name can only contain letters, numbers, hyphens and '_'. + </div> + <div class="error" *ngIf="setupGroupName.errors?.duplicate && setupGroupName.dirty"> + Group name already exists. + </div> + <div class="error" *ngIf="setupGroupName.errors?.long"> + Group name cannot be longer than {{maxGroupLength}} characters. + </div> </div> <div class="text-center m-bott-10"> - <button mat-raised-button (click)="resetDialog()" class="butt">Cancel</button> - <button mat-raised-button - matStepperNext class="butt" - [disabled]="!setupGroup || setupGroupName.errors?.long || setupGroupName.errors?.duplicate || setupGroupName.errors?.patterns" + <button + mat-raised-button + (click)="resetDialog()" + class="butt" + > + Cancel + </button> + <button + mat-raised-button + matStepperNext class="butt" + [disabled]="!setupGroup || setupGroupName.errors?.long || setupGroupName.errors?.duplicate || setupGroupName.errors?.patterns" > Next <i class="material-icons arrow-icon">keyboard_arrow_right</i> @@ -59,14 +79,20 @@ <mat-step [completed]='false'> <ng-template matStepLabel>Users</ng-template> <div class="inner-step mat-reset"> - <input type="text" placeholder="Enter user login" [(ngModel)]="setupUser"> + <input type="text" placeholder="Enter user login" [(ngModel)]="setupUser" /> </div> <div class="text-center m-bott-10"> - <button mat-raised-button matStepperPrevious class="butt"><i - class="material-icons arrow-icon">keyboard_arrow_left</i>Back</button> - <button mat-raised-button (click)="resetDialog()" class="butt">Cancel</button> - <button mat-raised-button matStepperNext class="butt">Next<i - class="material-icons arrow-icon">keyboard_arrow_right</i></button> + <button mat-raised-button matStepperPrevious class="butt"> + <i class="material-icons arrow-icon">keyboard_arrow_left</i> + Back + </button> + <button mat-raised-button (click)="resetDialog()" class="butt"> + Cancel + </button> + <button mat-raised-button matStepperNext class="butt"> + Next + <i class="material-icons arrow-icon">keyboard_arrow_right</i> + </button> </div> </mat-step> @@ -80,16 +106,29 @@ [items]="rolesList" [model]="setupRoles" [isAdmin]="healthStatus?.admin" - > - </multi-level-select-dropdown> + ></multi-level-select-dropdown> </div> </div> <div class="text-center m-bott-10"> - <button mat-raised-button matStepperPrevious class="butt"><i - class="material-icons arrow-icon">keyboard_arrow_left</i>Back</button> - <button mat-raised-button (click)="resetDialog()" class="butt">Cancel</button> - <button mat-raised-button (click)="manageAction('create', 'group')" class="butt butt-success" - [disabled]="!setupGroup || setupGroupName.errors?.patterns || setupGroupName.errors?.duplicate || !setupRoles.length">Create</button> + <button mat-raised-button matStepperPrevious class="butt"> + <i class="material-icons arrow-icon">keyboard_arrow_left</i> + Back + </button> + <button + mat-raised-button + (click)="resetDialog()" + class="butt" + > + Cancel + </button> + <button + mat-raised-button + (click)="manageAction('create', 'group')" + class="butt butt-success" + [disabled]="!setupGroup || setupGroupName.errors?.patterns || setupGroupName.errors?.duplicate || !setupRoles.length" + > + Create + </button> </div> </mat-step> @@ -124,8 +163,7 @@ [items]="rolesList" [model]="element.selected_roles" [isAdmin]="healthStatus?.admin" - > - </multi-level-select-dropdown> + ></multi-level-select-dropdown> </div> </td> </ng-container> @@ -134,10 +172,27 @@ <th mat-header-cell *matHeaderCellDef class="users"> Users </th> <td mat-cell *matCellDef="let element" class="users-list ani"> <mat-form-field class="chip-list"> - <input #user matInput placeholder="Enter user login" pattern="[@.-_0-9a-zA-Z]" - (keydown.enter)="addUser(user, element);" (keyup)="checkIfUserAdded(element, user.value)"> - <button mat-icon-button matSuffix (click)="addUser(user, element); user.value = ''" [disabled]="element.isUserAdded"> - <mat-icon matTooltip="User is already added to this group" matTooltipPosition="above" [matTooltipDisabled]="!element.isUserAdded">person_add</mat-icon> + <input + #user + matInput + placeholder="Enter user login" + pattern="[@.-_0-9a-zA-Z]" + (keydown.enter)="addUser(user, element);" + (keyup)="checkIfUserAdded(element, user.value)" + /> + <button + mat-icon-button + matSuffix + (click)="addUser(user, element); user.value = ''" + [disabled]="element.isUserAdded" + > + <mat-icon + matTooltip="User is already added to this group" + matTooltipPosition="above" + [matTooltipDisabled]="!element.isUserAdded" + > + person_add + </mat-icon> </button> </mat-form-field> <div class="list-selected list-container ani"> @@ -163,7 +218,8 @@ <th mat-header-cell *matHeaderCellDef class="actions"></th> <td mat-cell *matCellDef="let element" class="actions"> <div class="actions-wrapper"> - <span class="action-disabled" + <span + class="action-disabled" matTooltip="Only admin can delete group." matTooltipPosition="above" [matTooltipDisabled]="healthStatus?.admin" @@ -172,16 +228,19 @@ (click)="manageAction('delete', 'group', element)" class="reset ani" [ngClass]="{ 'not-allowed' : !healthStatus?.admin}" - > - <mat-icon >delete_forever</mat-icon> - </span> + <mat-icon >delete_forever</mat-icon> + </span> </span> - <span class="apply ani big-icon" matTooltip="Group cannot be updated without any selected role" - matTooltipPosition="above" [matTooltipDisabled]="element.selected_roles.length > 0" + <span + class="apply ani big-icon" + matTooltip="Group cannot be updated without any selected role" + matTooltipPosition="above" + [matTooltipDisabled]="element.selected_roles.length > 0" [ngClass]="{ 'not-allowed' : !element.selected_roles.length || isGroupChanded(element)}" - (click)="manageAction('update', 'group', element)"> + (click)="manageAction('update', 'group', element)" + > <mat-icon [ngClass]="{'big-icon': !isGroupChanded(element) && element.selected_roles.length}">done</mat-icon> </span> </div> diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.scss b/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.scss index 993d387..a429649 100644 --- a/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.scss +++ b/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.scss @@ -22,15 +22,15 @@ } .caret { + position: absolute; + top: 0px; + right: 0; width: 40px; + height: 36px; color: #4ab8dc; + background-color: #fff; border: none; border-left: 1px solid #ececec; - background-color: #fff; - position: absolute; - right: 0; - top: 0px; - height: 36px; line-height: 1; cursor: pointer; @@ -40,8 +40,8 @@ } .content-box { - padding: 20px 30px 35px; height: 85vh; + padding: 20px 30px 35px; overflow-y: auto; } @@ -54,13 +54,13 @@ margin-top: 10px; .inner-step { - height: 70px; - padding: 5px; + position: relative; display: flex; justify-content: center; flex-direction: column; + height: 70px; + padding: 5px; text-align: center; - position: relative; input { width: 490px; @@ -88,7 +88,7 @@ } } -.mat-horizontal-content-container{ +.mat-horizontal-content-container { overflow: visible !important; } @@ -98,11 +98,11 @@ width: 490px; height: 32px; padding-left: 0; - font-family: 'Open Sans', sans-serif; + font-family: "Open Sans", sans-serif; font-size: 15px; font-weight: 300; box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); - multi-level-select-dropdown{ + multi-level-select-dropdown { width: 100%; } mat-form-field { @@ -120,7 +120,7 @@ .dropdown-multiselect { width: 100% !important; - >button { + > button { padding: 6px 22px; } } @@ -131,11 +131,11 @@ } .scrolling-content { + display: block; max-height: 450px; + padding: 15px 5px; overflow-x: hidden; overflow-y: auto; - display: block; - padding: 15px 5px; &.stepper-opened { height: 250px; @@ -143,7 +143,6 @@ } .roles { - .selector-wrapper-edit { position: relative; display: flex; @@ -157,7 +156,7 @@ width: 100%; .dropdown-multiselect { - >button { + > button { padding: 8px 22px 5px; } } @@ -165,7 +164,7 @@ .caret { &:hover { - box-shadow: 0 3px 1px -10px rgba(0, 0, 0, 0.2), 0 2px 1px 0 rgba(0, 0, 0, 0.17), 0 1px 5px 0 rgba(0, 0, 0, 0.12) + box-shadow: 0 3px 1px -10px rgba(0, 0, 0, 0.2), 0 2px 1px 0 rgba(0, 0, 0, 0.17), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } } } @@ -181,29 +180,28 @@ } .users-list { + position: relative; padding: 5px 10px; - font-family: 'Open Sans', sans-serif; + font-family: "Open Sans", sans-serif; font-size: 15px; font-weight: 300; color: #577289; - position: relative; i { - color: #FF5722; + color: #ff5722; font-size: 18px; cursor: pointer; } .list-selected { width: 100%; - margin-top: 50px; height: inherit; min-height: 0; + margin-top: 50px; overflow: hidden; } } - .expanded-panel { display: flex; align-items: flex-end; @@ -217,9 +215,9 @@ input { height: 36px; + width: 170px; padding: 0; padding-left: 10px; - width: 170px; } .caret { @@ -228,10 +226,9 @@ } } - mat-expansion-panel-header { &.mat-expansion-panel-header { - font-family: 'Open Sans', sans-serif; + font-family: "Open Sans", sans-serif; font-size: 15px; font-weight: 300; color: #577289; @@ -244,7 +241,7 @@ mat-expansion-panel-header { } .mat-step-label { - font-family: 'Open Sans', sans-serif; + font-family: "Open Sans", sans-serif; font-size: 16px; font-weight: 300; } @@ -274,19 +271,19 @@ mat-expansion-panel-header { } } -.mat-chip-list{ +.mat-chip-list { pointer-events: auto; } .mat-chip:not(.mat-basic-chip) { - transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1); + position: relative; + display: inline-block; + max-width: 100%; padding: 7px 25px 7px 10px; + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); border-radius: 24px; cursor: default; - display: inline-block; - position: relative; ; white-space: nowrap; - max-width: 100%; overflow: hidden; } @@ -351,7 +348,7 @@ table { max-width: 200px; padding-right: 10px; overflow: hidden; - span{ + span { cursor: default; } } @@ -361,32 +358,32 @@ table { } .actions { - color: #607d8b; width: 10%; + color: #607d8b; text-align: center; - .actions-wrapper{ - height: 41px; + .actions-wrapper { display: flex; align-items: center; justify-content: flex-end; + height: 41px; } span { - transition: all .35s ease-in-out; + transition: all 0.35s ease-in-out; cursor: pointer; - &.action-disabled{ + &.action-disabled { cursor: not-allowed; } .mat-icon { font-size: 18px; padding-top: 12px; - &.big-icon{ + &.big-icon { font-size: 25px; padding-top: 10px; - transition: .25s; + transition: 0.25s; } } diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.ts index 6729729..dc119c7 100644 --- a/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.ts +++ b/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.ts @@ -17,15 +17,16 @@ * under the License. */ -import {Component, OnInit, Output, EventEmitter, Inject, ViewChild} from '@angular/core'; +import { Component, OnInit, Output, EventEmitter, Inject } from '@angular/core'; import { ValidatorFn, FormControl } from '@angular/forms'; import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { ToastrService } from 'ngx-toastr'; -import {RolesGroupsService, HealthStatusService, ApplicationSecurityService, AppRoutingService} from '../../core/services'; -import {CheckUtils, SortUtils} from '../../core/util'; + +import { RolesGroupsService, HealthStatusService, ApplicationSecurityService, AppRoutingService } from '../../core/services'; +import { CheckUtils, SortUtils } from '../../core/util'; import { DICTIONARY } from '../../../dictionary/global.dictionary'; -import {ProgressBarService} from '../../core/services/progress-bar.service'; -import {ConfirmationDialogComponent, ConfirmationDialogType} from '../../shared/modal-dialog/confirmation-dialog'; +import { ProgressBarService } from '../../core/services/progress-bar.service'; +import { ConfirmationDialogComponent, ConfirmationDialogType } from '../../shared/modal-dialog/confirmation-dialog'; @Component({ selector: 'datalab-roles', @@ -35,6 +36,10 @@ import {ConfirmationDialogComponent, ConfirmationDialogType} from '../../shared/ export class RolesComponent implements OnInit { readonly DICTIONARY = DICTIONARY; + @Output() manageRolesGroupAction: EventEmitter<{}> = new EventEmitter(); + + private startedGroups: Array<any>; + public groupsData: Array<any> = []; public roles: Array<any> = []; public rolesList: Array<any> = []; @@ -46,13 +51,11 @@ export class RolesComponent implements OnInit { public healthStatus: any; public delimitersRegex = /[-_]?/g; public groupnamePattern = new RegExp(/^[a-zA-Z0-9_\-]+$/); + public noPermissionMessage: string = 'You have not permissions for groups which are not assigned to your projects.'; + public maxGroupLength: number = 25; stepperView: boolean = false; displayedColumns: string[] = ['name', 'roles', 'users', 'actions']; - @Output() manageRolesGroupAction: EventEmitter<{}> = new EventEmitter(); - private startedGroups: Array<any>; - public noPermissionMessage: string = 'You have not permissions for groups which are not assigned to your projects.'; - public maxGroupLength: number = 25; constructor( public toastr: ToastrService, @@ -74,45 +77,57 @@ export class RolesComponent implements OnInit { this.rolesService.getRolesData().subscribe( (roles: any) => { this.roles = roles; - this.rolesList = roles.map((role) => { - return {role: role.description, type: role.type, cloud: role.cloud}; - }); + this.rolesList = roles.map((role) => ({ + role: role.description, + type: role.type, + cloud: role.cloud + })); this.rolesList = SortUtils.sortByKeys(this.rolesList, ['role', 'cloud', 'type']); this.updateGroupData(groups); this.stepperView = false; }, error => this.toastr.error(error.message, 'Oops!')); - this.progressBarService.stopProgressBar(); - }, - error => { - this.toastr.error(error.message, 'Oops!'); this.progressBarService.stopProgressBar(); - }); + }, + error => { + this.toastr.error(error.message, 'Oops!'); + this.progressBarService.stopProgressBar(); + } + ); } getGroupsData() { - this.rolesService.getGroupsData().subscribe( - list => this.updateGroupData(list), - error => this.toastr.error(error.message, 'Oops!')); + this.rolesService.getGroupsData() + .subscribe( + list => this.updateGroupData(list), + error => this.toastr.error(error.message, 'Oops!') + ); } public selectAllOptions(item, values, byKey?) { - byKey ? (item[byKey] = values ? values : []) : this.setupRoles = values ? values : []; + if (byKey) { + item[byKey] = values ? values : []; + } else { + this.setupRoles = values ? values : []; + } } public manageAction(action: string, type: string, item?: any, value?) { if (action === 'create') { - this.manageRolesGroups( - { - action, type, value: { - name: this.setupGroup, - users: this.setupUser ? this.setupUser.split(',').map(elem => elem.trim()).filter(el => !!el) : [], - roleIds: this.extractIds(this.roles, this.setupRoles.map(v => v.role)) - } - }); + this.manageRolesGroups({ + action, + type, + value: { + name: this.setupGroup, + users: this.setupUser ? this.setupUser.split(',').map(elem => elem.trim()).filter(el => !!el) : [], + roleIds: this.extractIds(this.roles, this.setupRoles.map(v => v.role)) + } + }); this.stepperView = false; } else if (action === 'delete') { - const data = (type === 'users') ? { group: item.group, user: value } : { group: item.group, id: item }; + const data = (type === 'users') + ? { group: item.group, user: value } + : { group: item.group, id: item }; const dialogRef: MatDialogRef<ConfirmDeleteUserAccountDialogComponent> = this.dialog.open( ConfirmDeleteUserAccountDialogComponent, { data: data, width: '550px', panelClass: 'error-modalbox' } @@ -128,28 +143,34 @@ export class RolesComponent implements OnInit { }); } else if (action === 'update') { const currGroupSource = this.startedGroups.filter(cur => cur.group === item.group)[0]; - let deletedUsers = currGroupSource.users.filter(user => { - return !item.users.includes(user); - }); - this.dialog.open(ConfirmationDialogComponent, { data: - { notebook: deletedUsers, type: ConfirmationDialogType.deleteUser }, panelClass: 'modal-sm' }) + let deletedUsers = currGroupSource.users.filter(user => !item.users.includes(user)); + + this.dialog.open(ConfirmationDialogComponent, { + data: { + notebook: deletedUsers, + type: ConfirmationDialogType.deleteUser + }, + panelClass: 'modal-sm' + }) .afterClosed().subscribe((res) => { - if (!res) { - item.users = [...currGroupSource.users]; - item.selected_roles = [...currGroupSource.selected_roles]; - item.roles = [...currGroupSource.roles]; - } else { - const selectedRoles = item.selected_roles.map(v => v.role); - this.manageRolesGroups({ - action, type, value: { - name: item.group, - roles: this.extractIds(this.roles, selectedRoles), - users: item.users || [] - } - }); - } - deletedUsers = []; - }); + if (!res) { + item.users = [...currGroupSource.users]; + item.selected_roles = [...currGroupSource.selected_roles]; + item.roles = [...currGroupSource.roles]; + } else { + const selectedRoles = item.selected_roles.map(v => v.role); + this.manageRolesGroups({ + action, + type, + value: { + name: item.group, + roles: this.extractIds(this.roles, selectedRoles), + users: item.users || [] + } + }); + } + deletedUsers = []; + }); } this.resetDialog(); } @@ -157,31 +178,42 @@ export class RolesComponent implements OnInit { public manageRolesGroups($event) { switch ($event.action) { case 'create': - this.rolesService.setupNewGroup($event.value).subscribe(() => { - this.toastr.success('Group creation success!', 'Created!'); - this.getGroupsData(); - }, () => this.toastr.error('Group creation failed!', 'Oops!')); + this.rolesService.setupNewGroup($event.value) + .subscribe( + () => { + this.toastr.success('Group creation success!', 'Created!'); + this.getGroupsData(); + }, + () => this.toastr.error('Group creation failed!', 'Oops!')); break; case 'update': - this.rolesService.updateGroup($event.value).subscribe(() => { - this.toastr.success(`Group data is updated successfully!`, 'Success!'); - this.openManageRolesDialog(); - }, (re) => this.toastr.error('Failed group data updating!', 'Oops!')); - + this.rolesService.updateGroup($event.value) + .subscribe( + () => { + this.toastr.success(`Group data is updated successfully!`, 'Success!'); + this.openManageRolesDialog(); + }, + () => this.toastr.error('Failed group data updating!', 'Oops!')); break; case 'delete': if ($event.type === 'users') { - this.rolesService.removeUsersForGroup($event.value).subscribe(() => { - this.toastr.success('Users was successfully deleted!', 'Success!'); - this.getGroupsData(); - }, () => this.toastr.error('Failed users deleting!', 'Oops!')); + this.rolesService.removeUsersForGroup($event.value) + .subscribe( + () => { + this.toastr.success('Users was successfully deleted!', 'Success!'); + this.getGroupsData(); + }, + () => this.toastr.error('Failed users deleting!', 'Oops!')); } else if ($event.type === 'group') { - this.rolesService.removeGroupById($event.value).subscribe(() => { - this.toastr.success('Group was successfully deleted!', 'Success!'); - this.getGroupsData(); - }, (error) => this.toastr.error(error.message, 'Oops!')); + this.rolesService.removeGroupById($event.value) + .subscribe( + () => { + this.toastr.success('Group was successfully deleted!', 'Success!'); + this.getGroupsData(); + }, + (error) => this.toastr.error(error.message, 'Oops!')); } break; @@ -197,7 +229,11 @@ export class RolesComponent implements OnInit { return v; }).sort((a, b) => (a.group > b.group) ? 1 : ((b.group > a.group) ? -1 : 0)); this.groupsData.forEach(item => { - const selectedRoles = item.roles.map(role => ({role: role.description, type: role.type, cloud: role.cloud})); + const selectedRoles = item.roles.map(role => ({ + role: role.description, + type: role.type, + cloud: role.cloud + })); item.selected_roles = SortUtils.sortByKeys(selectedRoles, ['role', 'type']); }); this.getGroupsListCopy(); @@ -206,7 +242,7 @@ export class RolesComponent implements OnInit { public extractIds(sourceList, target) { const map = new Map(); const mapped = sourceList.reduce((acc, item) => { - target.includes(item.description) && acc.set( item._id, item.description); + target.includes(item.description) && acc.set(item._id, item.description); return acc; }, map); @@ -216,7 +252,7 @@ export class RolesComponent implements OnInit { mapToObj(inputMap) { const obj = {}; - inputMap.forEach(function(value, key) { + inputMap.forEach((value, key) => { obj[key] = value; }); @@ -247,17 +283,17 @@ export class RolesComponent implements OnInit { public isGroupChanded(currGroup) { const currGroupSource = this.startedGroups.filter(cur => cur.group === currGroup.group)[0]; - if (currGroup.users.length !== currGroupSource.users.length && - currGroup.selected_roles.length !== currGroupSource.selected_roles.length) { - return false; - } - return JSON.stringify(currGroup.users) === JSON.stringify(currGroupSource.users) && - JSON.stringify( - currGroup.selected_roles.map(role => role.role).sort() - ) === JSON - .stringify( - currGroupSource.selected_roles.map(role => role.role).sort() - ); + if (currGroup.users.length !== currGroupSource.users.length && + currGroup.selected_roles.length !== currGroupSource.selected_roles.length) { + return false; + } + return JSON.stringify(currGroup.users) === JSON.stringify(currGroupSource.users) && + JSON.stringify( + currGroup.selected_roles.map(role => role.role).sort() + ) === JSON + .stringify( + currGroupSource.selected_roles.map(role => role.role).sort() + ); } public resetDialog() { @@ -288,29 +324,29 @@ export class RolesComponent implements OnInit { this.healthStatusService.getEnvironmentHealthStatus() .subscribe((result: any) => { this.healthStatus = result; - if (!this.healthStatus.admin && !this.healthStatus.projectAdmin) { - this.appRoutingService.redirectToHomePage(); - } else { - this.openManageRolesDialog(); - } - } - ); + if (!this.healthStatus.admin && !this.healthStatus.projectAdmin) { + this.appRoutingService.redirectToHomePage(); + } else { + this.openManageRolesDialog(); + } + }); } public onUpdate($event): void { - if ($event.type) { - this.groupsData.filter(group => group.group === $event.type)[0].selected_roles = $event.model; - } else { - this.setupRoles = $event.model; - } + if ($event.type) { + this.groupsData.filter(group => group.group === $event.type)[0].selected_roles = $event.model; + } else { + this.setupRoles = $event.model; + } } public checkIfUserAdded(element: any, value: string) { - element.isUserAdded = element.users.map(v => v.toLowerCase()).includes(value.toLowerCase()); + element.isUserAdded = element.users + .map(v => v.toLowerCase()) + .includes(value.toLowerCase()); } } - @Component({ selector: 'dialog-result-example-dialog', template: ` @@ -320,14 +356,33 @@ export class RolesComponent implements OnInit { </div> <div mat-dialog-content class="content"> - <p *ngIf="data.user">User <span class="strong">{{ data.user }}</span> will be deleted from <span class="strong">{{ data.group }}</span> group. + <p *ngIf="data.user">User <span class="strong"> + {{ data.user }}</span> will be deleted from <span class="strong">{{ data.group }}</span> group. + </p> + <p *ngIf="data.id">Group <span class="ellipsis group-name strong"> + {{ data.group }}</span> will be decommissioned. + </p> + <p class="m-top-20"> + <span class="strong">Do you want to proceed?</span> </p> - <p *ngIf="data.id">Group <span class="ellipsis group-name strong">{{ data.group }}</span> will be decommissioned.</p> - <p class="m-top-20"><span class="strong">Do you want to proceed?</span></p> </div> <div class="text-center"> - <button type="button" class="butt" mat-raised-button (click)="dialogRef.close()">No</button> - <button type="button" class="butt butt-success" mat-raised-button (click)="dialogRef.close(true)">Yes</button> + <button + type="button" + class="butt" + mat-raised-button + (click)="dialogRef.close()" + > + No + </button> + <button + type="button" + class="butt butt-success" + mat-raised-button + (click)="dialogRef.close(true)" + > + Yes + </button> </div> `, styles: [`.group-name { max-width: 96%; display: inline-block; vertical-align: bottom; }`] @@ -338,4 +393,4 @@ export class ConfirmDeleteUserAccountDialogComponent { public dialogRef: MatDialogRef<ConfirmDeleteUserAccountDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any ) { } -} +} \ No newline at end of file --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
