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/06/15 07:02:33 UTC
[incubator-dlab] 01/03: [DLAB-1861]: Added checkboxes to
environment management
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a commit to branch DLAB-1861
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit 1b1006bebbfaac48d21b916d9eacaa5b555885b2
Author: Dmytro_Gnatyshyn <di...@ukr.net>
AuthorDate: Wed Jun 10 18:00:04 2020 +0300
[DLAB-1861]: Added checkboxes to environment management
---
.../management-grid/management-grid.component.html | 16 ++++++++++++++
.../management-grid/management-grid.component.scss | 5 ++++-
.../management-grid/management-grid.component.ts | 10 ++++++---
.../resources/webapp/src/assets/styles/_theme.scss | 25 ++++++++++++++++++++++
4 files changed, 52 insertions(+), 4 deletions(-)
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.html b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.html
index 8b7e459..56fd4c5 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.html
@@ -19,6 +19,16 @@
<div class="ani">
<table mat-table [dataSource]="allFilteredEnvironmentData" class="data-grid management mat-elevation-z6">
+ <ng-container matColumnDef="checkbox">
+ <th mat-header-cell *matHeaderCellDef class="checkbox label-header">
+ </th>
+ <td mat-cell *matCellDef="let element">
+ <div *ngIf="element.type !== 'edge node'" class="empty-checkbox" [ngClass]="{'checked': element.isSelected}" (click)="toggleActionForAll(element);$event.stopPropagation()" >
+ <span class="checked-checkbox" *ngIf="element.isSelected"></span>
+ </div>
+ </td>
+ </ng-container>
+
<ng-container matColumnDef="user">
<th mat-header-cell *matHeaderCellDef class="user label-header">
<span class="label">User</span>
@@ -176,6 +186,12 @@
<!-- FILTERING -->
+ <ng-container matColumnDef="checkbox-filter" sticky>
+ <th mat-header-cell *matHeaderCellDef class="filter-row-item">
+
+ </th>
+ </ng-container>
+
<ng-container matColumnDef="user-filter" sticky>
<th mat-header-cell *matHeaderCellDef class="filter-row-item">
<multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'users'" [items]="filterConfiguration.users"
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.scss b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.scss
index 5d40c3e..14b700e 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.scss
@@ -19,7 +19,10 @@
.data-grid {
&.management {
-
+ .mat-column-checkbox{
+ padding-left: 10px;
+ padding-right: 10px;
+ }
.user{
width: 15%;
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.ts
index 796859a..0403c69 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.ts
@@ -61,8 +61,8 @@ export class ManagementGridComponent implements OnInit {
@Output() refreshGrid: EventEmitter<{}> = new EventEmitter();
@Output() actionToggle: EventEmitter<ManageAction> = new EventEmitter();
- displayedColumns: string[] = ['user', 'type', 'project', 'shape', 'status', 'resources', 'actions'];
- displayedFilterColumns: string[] = ['user-filter', 'type-filter', 'project-filter', 'shape-filter', 'status-filter', 'resource-filter', 'actions-filter'];
+ displayedColumns: string[] = [ 'checkbox', 'user', 'type', 'project', 'shape', 'status', 'resources', 'actions'];
+ displayedFilterColumns: string[] = ['checkbox-filter', 'user-filter', 'type-filter', 'project-filter', 'shape-filter', 'status-filter', 'resource-filter', 'actions-filter'];
constructor(
private healthStatusService: HealthStatusService,
@@ -113,7 +113,7 @@ export class ManagementGridComponent implements OnInit {
let filteredData = this.getEnvironmentDataCopy();
const containsStatus = (list, selectedItems) => {
- if (list){
+ if (list) {
return list.filter((item: any) => { if (selectedItems.indexOf(item.status) !== -1) return item; });
}
};
@@ -240,6 +240,10 @@ export class ManagementGridComponent implements OnInit {
})
.afterClosed().subscribe(() => {});
}
+
+ toggleActionForAll(element) {
+ element.isSelected = !element.isSelected;
+ }
}
diff --git a/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss b/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss
index 43e9c50..1f80ef0 100644
--- a/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss
+++ b/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss
@@ -433,6 +433,31 @@ span.mat-slide-toggle-content {
}
}
+.empty-checkbox {
+ min-width: 16px;
+ width: 16px;
+ height: 16px;
+ border-radius: 2px;
+ border: 2px solid lightgrey;
+ margin-top: 2px;
+ position: relative;
+ cursor: pointer;
+ &.checked {
+ border-color: #35afd5;
+ background-color: #35afd5;
+ }
+ .checked-checkbox {
+ top: 0;
+ left: 4px;
+ width: 5px;
+ height: 10px;
+ border-bottom: 2px solid white;
+ border-right: 2px solid white;
+ position: absolute;
+ transform: rotate(45deg);
+ }
+}
+
mat-horizontal-stepper {
.mat-step-header {
.mat-step-icon {
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org