You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dlab.apache.org by an...@apache.org on 2019/09/25 14:48:58 UTC
[incubator-dlab] 07/08: [DLAB-472]: added filter row collapsing
This is an automated email from the ASF dual-hosted git repository.
ankovalyshyn pushed a commit to branch DLAB-1056
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit caf4ef6a45ca58f474bc25d5856940f5c1f166c8
Author: Andriana Kovalyshyn <An...@epam.com>
AuthorDate: Wed Sep 25 17:48:10 2019 +0300
[DLAB-472]: added filter row collapsing
---
.../management-grid/management-grid.component.html | 61 ++++++++++++++++++----
.../management-grid/management-grid.component.scss | 16 +++++-
.../management-grid/management-grid.component.ts | 5 ++
3 files changed, 72 insertions(+), 10 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 092e483..31aa49e 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
@@ -20,33 +20,76 @@
<div class="ani">
<table mat-table [dataSource]="allFilteredEnvironmentData" class="data-grid management mat-elevation-z6">
<ng-container matColumnDef="user">
- <th mat-header-cell *matHeaderCellDef class="user"> User </th>
+ <th mat-header-cell *matHeaderCellDef class="user">
+ <span class="label">User</span>
+ <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <i class="material-icons">
+ <span *ngIf="filtering && filterForm.users.length > 0 && !collapsedFilterRow">filter_list</span>
+ <span [hidden]="filtering && filterForm.users.length > 0 && !collapsedFilterRow">more_vert</span>
+ </i>
+ </button> </th>
<td mat-cell *matCellDef="let element">{{ element.user }}</td>
</ng-container>
<ng-container matColumnDef="project">
- <th mat-header-cell *matHeaderCellDef class="project"> Project </th>
+ <th mat-header-cell *matHeaderCellDef class="project">
+ <span class="label">Project</span>
+ <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <i class="material-icons">
+ <span *ngIf="filtering && filterForm.projects.length > 0 && !collapsedFilterRow">filter_list</span>
+ <span [hidden]="filtering && filterForm.projects.length > 0 && !collapsedFilterRow">more_vert</span>
+ </i>
+ </button> </th>
<td mat-cell *matCellDef="let element">{{ element.project }}</td>
</ng-container>
<ng-container matColumnDef="type">
- <th mat-header-cell *matHeaderCellDef class="type"> Type </th>
+ <th mat-header-cell *matHeaderCellDef class="type">
+ <span class="label">Type</span>
+ <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <i class="material-icons">
+ <span *ngIf="filtering && filterForm.type.length > 0 && !collapsedFilterRow">filter_list</span>
+ <span [hidden]="filtering && filterForm.type.length > 0 && !collapsedFilterRow">more_vert</span>
+ </i>
+ </button> </th>
<td mat-cell *matCellDef="let element">{{ element.name || element.type }}</td>
</ng-container>
<ng-container matColumnDef="shape">
- <th mat-header-cell *matHeaderCellDef class="shape"> Shape / Resource id </th>
+ <th mat-header-cell *matHeaderCellDef class="shape">
+ <span class="label">Shape / Resource id</span>
+ <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <i class="material-icons">
+ <span *ngIf="filtering && filterForm.shapes.length > 0 && !collapsedFilterRow">filter_list</span>
+ <span [hidden]="filtering && filterForm.shapes.length > 0 && !collapsedFilterRow">more_vert</span>
+ </i>
+ </button> </th>
<td mat-cell *matCellDef="let element" class="shape">{{ element.shape || element.ip }}</td>
</ng-container>
<ng-container matColumnDef="status">
- <th mat-header-cell *matHeaderCellDef class="status"> Status </th>
+ <th mat-header-cell *matHeaderCellDef class="status">
+ <span class="label">Status</span>
+
+ <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <i class="material-icons">
+ <span *ngIf="filtering && filterForm.statuses.length > 0 && !collapsedFilterRow">filter_list</span>
+ <span [hidden]="filtering && filterForm.statuses.length > 0 && !collapsedFilterRow">more_vert</span>
+ </i>
+ </button> </th>
<td mat-cell *matCellDef="let element" class="ani status" ngClass="{{element.status || ''}}">{{ element.status }}
</td>
</ng-container>
<ng-container matColumnDef="resources">
- <th mat-header-cell *matHeaderCellDef class="resources"> Computational resources </th>
+ <th mat-header-cell *matHeaderCellDef class="resources">
+ <span class="label">Computational resources</span>
+ <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <i class="material-icons">
+ <span *ngIf="filtering && filterForm.resources.length > 0 && !collapsedFilterRow">filter_list</span>
+ <span [hidden]="filtering && filterForm.resources.length > 0 && !collapsedFilterRow">more_vert</span>
+ </i>
+ </button> </th>
<td mat-cell *matCellDef="let element" class="ani resources">
<div class="source" *ngIf="element.resources">
<div *ngIf="!element.resources?.length">
@@ -180,9 +223,9 @@
</td>
</ng-container>
- <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
- <!-- [hidden]="!collapseFilterRow" -->
- <tr mat-header-row *matHeaderRowDef="displayedFilterColumns; sticky: true" class="filter-row"></tr>
+ <tr mat-header-row *matHeaderRowDef="displayedColumns" class="header-row"></tr>
+ <tr [hidden]="!collapsedFilterRow" mat-header-row *matHeaderRowDef="displayedFilterColumns; sticky: true"
+ class="filter-row"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
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 6e6da98..ca86dba 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
@@ -32,7 +32,11 @@
.shape,
.status {
- width: 12% !important;
+ width: 16% !important;
+ }
+
+ .type {
+ width: 18%;
}
.resources {
@@ -54,6 +58,16 @@
table {
width: 100%;
+ .header-row {
+ .label {
+ display: inline-block;
+ padding-top: 10px;
+ vertical-align: super !important;
+ padding-left: 5px;
+ font-size: 11px;
+ }
+ }
+
.actions {
text-align: right;
}
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 2270693..b691b6c 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
@@ -50,6 +50,7 @@ export class ManagementGridComponent implements OnInit {
filterConfiguration: ManagementConfigModel = new ManagementConfigModel([], '', [], [], [], []);
filterForm: ManagementConfigModel = new ManagementConfigModel([], '', [], [], [], []);
filtering: boolean = false;
+ collapsedFilterRow: boolean = false;
@Input() environmentsHealthStatuses: Array<any>;
@Input() resources: Array<any>;
@@ -87,6 +88,10 @@ export class ManagementGridComponent implements OnInit {
this.filterForm[$event.type] = $event.model;
}
+ public toggleFilterRow(): void {
+ this.collapsedFilterRow = !this.collapsedFilterRow;
+ }
+
public resetFilterConfigurations(): void {
this.filterForm.defaultConfigurations();
this.applyFilter(this.filterForm);
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org