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/25 10:04:50 UTC
[incubator-dlab] branch DLAB-1661 updated: [DLAB-1661]: Grouped
roles by cloud on UI
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a commit to branch DLAB-1661
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
The following commit(s) were added to refs/heads/DLAB-1661 by this push:
new adaf67e [DLAB-1661]: Grouped roles by cloud on UI
adaf67e is described below
commit adaf67e635f36eb18a775b7f185c84a41311ebf5
Author: Dmytro Gnatyshyn <di...@ukr.net>
AuthorDate: Wed Mar 25 12:04:41 2020 +0200
[DLAB-1661]: Grouped roles by cloud on UI
---
.../app/administration/roles/roles.component.ts | 6 ++--
.../multi-level-select-dropdown.component.html | 37 +++++++++++++-------
.../multi-level-select-dropdown.component.scss | 4 ++-
.../multi-level-select-dropdown.component.ts | 39 +++++++++++++++++++++-
4 files changed, 69 insertions(+), 17 deletions(-)
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 222849a..19ab0ed 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
@@ -77,9 +77,9 @@ export class RolesComponent implements OnInit {
this.rolesList = roles.map((role, index) => {
return {role: role.description, type: role.type, cloud: role.cloud};
});
- console.log(this.rolesList);
+ this.rolesList = this.rolesList.sort((a, b) => (a.cloud > b.cloud) ? 1 : ((b.cloud > a.cloud) ? -1 : 0));
this.rolesList = this.rolesList.sort((a, b) => (a.type > b.type) ? 1 : ((b.type > a.type) ? -1 : 0));
- this.updateGroupData(groups);
+ this.updateGroupData(groups);
this.stepperView = false;
},
@@ -210,7 +210,7 @@ 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 => {
- item.selected_roles = item.roles.map(role => ({role: role.description, type: role.type}));
+ item.selected_roles = item.roles.map(role => ({role: role.description, type: role.type, cloud: role.cloud}));
});
this.getGroupsListCopy();
}
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 7164ad4..4e41606 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
@@ -49,18 +49,7 @@
</a>
</li>
-<!-- <li class="role-label" role="presentation" *ngIf="item.type === 'COMPUTATIONAL_SHAPE' && item.cloud !== items[i - 1].cloud || item.type === 'NOTEBOOK_SHAPE' && item.cloud !== items[i - 1].cloud || item.type === 'NOTEBOOK_SHAPE' && 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.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.cloud | titlecase}}-->
-<!-- </a>-->
-<!-- </li>-->
-
- <li class="role-item" role="presentation" *ngIf="model && isOpenCategory[item.type]" >
+ <li class="role-item" role="presentation" *ngIf="model && isOpenCategory[item.type] && item.type !== 'COMPUTATIONAL_SHAPE' && item.type !== 'NOTEBOOK_SHAPE'" >
<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>
@@ -68,6 +57,30 @@
{{item.role}}
</a>
</li>
+ <li class="role-item" role="presentation" (click)="toggleItemsForCloud(item.type + item.cloud, $event)"
+ *ngIf="model && isOpenCategory[item.type] && item.type === 'COMPUTATIONAL_SHAPE' && item.cloud !== items[i - 1].cloud
+ || model && isOpenCategory[item.type] && item.type === 'NOTEBOOK_SHAPE' && item.type !== items[i - 1].type
+ || model && isOpenCategory[item.type] && item.type === 'NOTEBOOK_SHAPE' && item.cloud !== items[i - 1].cloud
+ || model && isOpenCategory[item.type] && item.type === 'COMPUTATIONAL_SHAPE' && item.type !== items[i - 1].type"
+ >
+ <a href="#" class="list-item" role="menuitem">
+ <span class="arrow" [ngClass]="{'rotate-arrow': isCloudOpen[item.type + item.cloud], 'arrow-checked': selectedAllInCloud(item.type, item.cloud) || selectedSomeInCloud(item.type, item.cloud)}"></span>
+ <span class="empty-checkbox" [ngClass]="{'checked': selectedAllInCloud(item.type, item.cloud) || selectedSomeInCloud(item.type, item.cloud)}" (click)="toggleSelectedCloud($event, model, item.type, item.cloud);$event.stopPropagation()" >
+ <span class="checked-checkbox" *ngIf="selectedAllInCloud(item.type, item.cloud)"></span>
+ <span class="line-checkbox" *ngIf="selectedSomeInCloud(item.type, item.cloud)"></span>
+ </span>
+ {{item.cloud || 'AWS'}}
+ </a>
+ </li>
+ <li class="role-cloud-item" role="presentation" *ngIf="model && isCloudOpen[item.type + item.cloud] && 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>
+ </span>
+ {{item.role}}
+ </a>
+ </li>
+
</ng-template>
<li *ngIf="items?.length == 0">
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 00d9a80..5323a24 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
@@ -117,7 +117,9 @@
.role-item{
padding-left: 30px;
}
-
+ .role-cloud-item{
+ padding-left: 60px;
+ }
}
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 7d160fb..cabf7d9 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
@@ -35,6 +35,10 @@ export class MultiLevelSelectDropdownComponent {
public isOpenCategory = {
};
+ public isCloudOpen = {
+
+ };
+
public labels = {
COMPUTATIONAL_SHAPE: 'Compute shapes',
NOTEBOOK_SHAPE: 'Notebook shapes',
@@ -57,8 +61,21 @@ export class MultiLevelSelectDropdownComponent {
this.onUpdate($event);
}
- selectAllOptions($event) {
+ toggleSelectedCloud($event, model, category, cloud) {
+ $event.preventDefault();
+ const categoryItems = this.items.filter(role => role.type === category && role.cloud === cloud);
+ this.selectedAllInCloud(category, cloud) ? this.model = this.model.filter(role => {
+ if (role.type === category && role.cloud === cloud) {
+ return false;
+ }
+ return true;
+ }) : 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];
this.onUpdate($event);
@@ -77,6 +94,14 @@ export class MultiLevelSelectDropdownComponent {
public toggleItemsForLable(label, $event) {
this.isOpenCategory[label] = !this.isOpenCategory[label];
+ this.isCloudOpen[label + 'AWS'] = false;
+ this.isCloudOpen[label + 'GCP'] = false;
+ this.isCloudOpen[label + 'AZURE'] = false;
+ $event.preventDefault();
+ }
+
+ public toggleItemsForCloud(label, $event) {
+ this.isCloudOpen[label] = !this.isCloudOpen[label];
$event.preventDefault();
}
@@ -92,6 +117,18 @@ export class MultiLevelSelectDropdownComponent {
return selected.length && selected.length !== categoryItems.length;
}
+ public selectedAllInCloud(category, cloud) {
+ const selected = this.model.filter(role => role.type === category && role.cloud === cloud);
+ const categoryItems = this.items.filter(role => role.type === category && role.cloud === cloud);
+ return selected.length === categoryItems.length;
+ }
+
+ public selectedSomeInCloud(category, cloud) {
+ const selected = this.model.filter(role => role.type === category && role.cloud === cloud);
+ const categoryItems = this.items.filter(role => role.type === category && role.cloud === cloud);
+ return selected.length && selected.length !== categoryItems.length;
+ }
+
public checkInModel(item) {
return this.model.filter(v => v.role === item).length;
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org