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 <di1...@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-unsubscr...@dlab.apache.org For additional commands, e-mail: commits-h...@dlab.apache.org