You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dlab.apache.org by dg...@apache.org on 2020/03/10 12:33:48 UTC
[incubator-dlab] 04/04: [DLAB-384]: Grouped roles
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a commit to branch DLAB-384
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit 62eb77edaf068ac97be77162469b988818d3f79d
Author: Dmytro Gnatyshyn <di...@ukr.net>
AuthorDate: Tue Mar 10 14:33:26 2020 +0200
[DLAB-384]: Grouped roles
---
.../app/administration/roles/roles.component.html | 64 ++++------------------
.../app/administration/roles/roles.component.ts | 27 ++++-----
.../multi-level-select-dropdown.component.html | 14 ++---
.../multi-level-select-dropdown.component.scss | 2 +-
.../multi-level-select-dropdown.component.ts | 32 +++++------
5 files changed, 46 insertions(+), 93 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 ac3f1d7..0a7c8e2 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
@@ -45,6 +45,7 @@
class="material-icons">keyboard_arrow_right</i></button>
</div>
</mat-step>
+
<mat-step [completed]='false'>
<ng-template matStepLabel>Users</ng-template>
<div class="inner-step mat-reset">
@@ -58,6 +59,7 @@
class="material-icons">keyboard_arrow_right</i></button>
</div>
</mat-step>
+
<mat-step [completed]='false'>
<ng-template matStepLabel>Roles</ng-template>
<div class="inner-step mat-reset roles">
@@ -66,36 +68,8 @@
(selectionChange)="onUpdate($event)"
name="roles"
[items]="rolesList"
- [model]="setupRoles"
- >
- <!-- [type]="element.group" -->
+ [model]="setupRoles">
</multi-level-select-dropdown>
-<!-- <mat-form-field>-->
-
-<!-- <mat-select-->
-<!-- multiple [compareWith]="compareObjects"-->
-<!-- name="roles"-->
-<!-- -->
-<!-- disableOptionCentering-->
-<!-- placeholder="Select roles"-->
-<!-- panelClass="select-role"-->
-<!-- >-->
-<!-- <mat-option class="multiple-select" disabled>-->
-<!-- <a class="select ani" (click)="selectAllOptions(setupRoles, rolesList)">-->
-<!-- <i class="material-icons">playlist_add_check</i> All-->
-<!-- </a>-->
-<!-- <a class="deselect ani" (click)="selectAllOptions(setupRoles)">-->
-<!-- <i class="material-icons">clear</i> None-->
-<!-- </a>-->
-<!-- </mat-option>-->
-<!-- <mat-option *ngFor="let role of rolesList" [value]="role">-->
-<!-- {{ role }}-->
-<!-- </mat-option>-->
-<!-- </mat-select>-->
-<!-- <button class="caret">-->
-<!-- <i class="material-icons">keyboard_arrow_down</i>-->
-<!-- </button>-->
-<!-- </mat-form-field>-->
</div>
</div>
<div class="text-center m-bott-10">
@@ -103,9 +77,10 @@
class="material-icons">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 > 0">Create</button>
+ [disabled]="!setupGroup || setupGroupName.errors?.patterns || setupGroupName.errors?.duplicate || !setupRoles.length">Create</button>
</div>
</mat-step>
+
</mat-horizontal-stepper>
</mat-card>
<mat-divider></mat-divider>
@@ -121,30 +96,13 @@
<th mat-header-cell *matHeaderCellDef class="roles"> Roles </th>
<td mat-cell *matCellDef="let element" class="roles">
<div class="inner-step mat-reset">
-<!-- <div class="selector-wrapper-edit">-->
-<!-- <mat-form-field class="select">-->
-<!-- <mat-select multiple [compareWith]="compareObjects" name="selected_roles" disableOptionCentering-->
-<!-- [(value)]="element.selected_roles" placeholder="Select roles" class="roles-select" panelClass="select-role">-->
-<!-- <mat-option class="multiple-select" disabled>-->
-<!-- <a class="select ani" (click)="selectAllOptions(element, rolesList, 'selected_roles')">-->
-<!-- <i class="material-icons">playlist_add_check</i> All-->
-<!-- </a>-->
-<!-- <a class="deselect ani" (click)="selectAllOptions(element, null, 'selected_roles')">-->
-<!-- <i class="material-icons">clear</i> None-->
-<!-- </a>-->
-<!-- </mat-option>-->
-<!-- <mat-option *ngFor="let role of rolesList" [value]="role">-->
-<!-- {{ role }}-->
-<!-- </mat-option>-->
-<!-- </mat-select>-->
-<!-- <button class="caret">-->
-<!-- <i class="material-icons">keyboard_arrow_down</i>-->
-<!-- </button>-->
-<!-- </mat-form-field>-->
- <multi-level-select-dropdown (selectionChange)="onUpdate($event)" [type]="element.group" [items]="rolesList" [model]="rolesList"></multi-level-select-dropdown>
-<!-- [model]="element.selected_roles"-->
+ <multi-level-select-dropdown
+ (selectionChange)="onUpdate($event)"
+ [type]="element.group"
+ [items]="rolesList"
+ [model]="element.selected_roles">
-<!-- </div>-->
+ </multi-level-select-dropdown>
</div>
</td>
</ng-container>
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 88c9fda..974f049 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
@@ -41,7 +41,7 @@ export class RolesComponent implements OnInit {
public setupGroup: string = '';
public setupUser: string = '';
public manageUser: string = '';
- public setupRoles: Array<string> = [];
+ public setupRoles: Array<any> = [];
public updatedRoles: Array<string> = [];
public healthStatus: any;
public delimitersRegex = /[-_]?/g;
@@ -71,13 +71,7 @@ export class RolesComponent implements OnInit {
(roles: any) => {
this.roles = roles;
this.rolesList = roles.map((role, index) => {
- if (index < 10) {
- return {role: role.description, label: 'templetes'};
- } else if (index > 9 && index < 20) {
- return {role: role.description, label: 'Inctance shapes'};
- } else {
- return {role: role.description, label: 'Resource'};
- }
+ return {role: role.description, type: role.type};
});
this.updateGroupData(groups);
@@ -110,7 +104,7 @@ export class RolesComponent implements OnInit {
action, type, value: {
name: this.setupGroup,
users: this.setupUser ? this.setupUser.split(',').map(elem => elem.trim()) : [],
- roleIds: this.extractIds(this.roles, this.setupRoles)
+ roleIds: this.extractIds(this.roles, this.setupRoles.map(v => v.role))
}
});
this.stepperView = false;
@@ -133,7 +127,7 @@ export class RolesComponent implements OnInit {
this.manageRolesGroups({
action, type, value: {
name: item.group,
- roleIds: this.extractIds(this.roles, item.selected_roles),
+ roleIds: this.extractIds(this.roles, item.selected_roles.map(v => v.role)),
users: item.users || []
}
});
@@ -183,7 +177,7 @@ export class RolesComponent implements OnInit {
public updateGroupData(groups) {
this.groupsData = groups.map(v => v).sort((a, b) => (a.group > b.group) ? 1 : ((b.group > a.group) ? -1 : 0));
this.groupsData.forEach(item => {
- item.selected_roles = item.roles.map(role => role.description);
+ item.selected_roles = item.roles.map(role => ({role: role.description, type: role.type}));
});
}
@@ -201,10 +195,6 @@ export class RolesComponent implements OnInit {
});
}
- public compareObjects(o1: any, o2: any): boolean {
- return o1.toLowerCase() === o2.toLowerCase();
- }
-
public resetDialog() {
this.stepperView = false;
this.setupGroup = '';
@@ -230,7 +220,11 @@ export class RolesComponent implements OnInit {
}
public onUpdate($event): void {
- this.groupsData.filter(group => group.group === $event.type)[0].selected_roles = $event.model;
+ if ($event.type) {
+ this.groupsData.filter(group => group.group === $event.type)[0].selected_roles = $event.model;
+ } else {
+ this.setupRoles = $event.model;
+ }
}
}
@@ -254,6 +248,7 @@ export class RolesComponent implements OnInit {
`,
styles: [`.group-name { max-width: 96%; display: inline-block; vertical-align: bottom; }`]
})
+
export class ConfirmDeleteUserAccountDialogComponent {
constructor(
public dialogRef: MatDialogRef<ConfirmDeleteUserAccountDialogComponent>,
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.html b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.html
index 1cc1c11..f6b52da 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.html
@@ -38,18 +38,18 @@
</li>
<ng-template ngFor let-item [ngForOf]="items" let-i="index">
- <li class="role-label" role="presentation" *ngIf="i === 0 || model && item.label !== items[i - 1].label" (click)="toggleItemsForLable(item.label, $event)">
+ <li class="role-label" role="presentation" *ngIf="i === 0 || model && item.type !== items[i - 1].type" (click)="toggleItemsForLable(item.type, $event)">
<a href="#" class="list-item" role="menuitem">
- <span class="arrow" [ngClass]="{'rotate-arrow': isOpenCategory[item.label], 'arrow-checked': selectedAllInCattegory(item.label) || selectedSomeInCattegory(item.label)}"></span>
- <span class="empty-checkbox" [ngClass]="{'checked': selectedAllInCattegory(item.label) || selectedSomeInCattegory(item.label)}" (click)="toggleselectedCategory($event, model, item.label);$event.stopPropagation()" >
- <span class="checked-checkbox" *ngIf="selectedAllInCattegory(item.label)"></span>
- <span class="line-checkbox" *ngIf="selectedSomeInCattegory(item.label)"></span>
+ <span class="arrow" [ngClass]="{'rotate-arrow': isOpenCategory[item.type], 'arrow-checked': selectedAllInCattegory(item.type) || selectedSomeInCattegory(item.type)}"></span>
+ <span class="empty-checkbox" [ngClass]="{'checked': selectedAllInCattegory(item.type) || selectedSomeInCattegory(item.type)}" (click)="toggleselectedCategory($event, model, item.type);$event.stopPropagation()" >
+ <span class="checked-checkbox" *ngIf="selectedAllInCattegory(item.type)"></span>
+ <span class="line-checkbox" *ngIf="selectedSomeInCattegory(item.type)"></span>
</span>
- {{item.label}}
+ {{labels[item.type] || item.type | titlecase}}
</a>
</li>
- <li class="role-item" role="presentation" *ngIf="model && isOpenCategory[item.label]" >
+ <li class="role-item" role="presentation" *ngIf="model && isOpenCategory[item.type]" >
<a href="#" class="list-item" role="menuitem" (click)="toggleSelectedOptions($event, model, item)">
<span class="empty-checkbox" [ngClass]="{'checked': checkInModel(item.role)}">
<span class="checked-checkbox" *ngIf="checkInModel(item.role)"></span>
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.scss b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.scss
index 1726f47..00d9a80 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.scss
@@ -75,7 +75,7 @@
.selected-items {
color: #4a5c89;
- max-width: 500px;
+ max-width: 477px;
}
}
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.ts
index dc70999..fe8b36a 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.ts
@@ -26,7 +26,6 @@ import { Input, Output, Component, EventEmitter } from '@angular/core';
})
export class MultiLevelSelectDropdownComponent {
- isOpen: boolean = false;
@Input() items: Array<any>;
@Input() model: Array<any>;
@@ -36,30 +35,31 @@ export class MultiLevelSelectDropdownComponent {
public isOpenCategory = {
};
+ public labels = {
+ COMPUTATIONAL_SHAPE: 'Compute shapes',
+ NOTEBOOK_SHAPE: 'Notebook shape'
+ };
+
toggleSelectedOptions($event, model, value) {
$event.preventDefault();
- const currRole = this.model.filter(v => v.role === value.role).length;
+ const currRole = model.filter(v => v.role === value.role).length;
currRole ? this.model = model.filter(v => v.role !== value.role) : model.push(value);
-
this.onUpdate($event);
-
- $event.preventDefault();
}
toggleselectedCategory($event, model, value) {
$event.preventDefault();
- const categoryItems = this.items.filter(role => role.label === value);
- this.selectedAllInCattegory(value) ? this.model = this.model.filter(role => role.label !== value) : categoryItems.forEach(role => {
- if (!model.includes(role)) {model.push(role); }
+ const categoryItems = this.items.filter(role => role.type === value);
+ this.selectedAllInCattegory(value) ? this.model = this.model.filter(role => role.type !== value) : categoryItems.forEach(role => {
+ if (!model.filter(mod => mod.role === role.role).length) {this.model.push(role); }
});
this.onUpdate($event);
}
selectAllOptions($event) {
- $event.preventDefault();
- this.model = [];
- this.items.forEach((item) => { this.model.push(item); });
+ $event.preventDefault();
+ this.model = [...this.items];
this.onUpdate($event);
$event.preventDefault();
}
@@ -71,7 +71,7 @@ export class MultiLevelSelectDropdownComponent {
}
onUpdate($event): void {
- this.selectionChange.emit({ model: this.model.map(v => v.role), type: this.type, $event });
+ this.selectionChange.emit({ model: this.model, type: this.type, $event });
}
public toggleItemsForLable(label, $event) {
@@ -80,14 +80,14 @@ export class MultiLevelSelectDropdownComponent {
}
public selectedAllInCattegory(category) {
- const selected = this.model.filter(role => role.label === category);
- const categoryItems = this.items.filter(role => role.label === category);
+ const selected = this.model.filter(role => role.type === category);
+ const categoryItems = this.items.filter(role => role.type === category);
return selected.length === categoryItems.length;
}
public selectedSomeInCattegory(category) {
- const selected = this.model.filter(role => role.label === category);
- const categoryItems = this.items.filter(role => role.label === category);
+ const selected = this.model.filter(role => role.type === category);
+ const categoryItems = this.items.filter(role => role.type === category);
return selected.length && selected.length !== categoryItems.length;
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org