You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@datalab.apache.org by dg...@apache.org on 2021/02/17 15:22:30 UTC
[incubator-datalab] branch develop updated: [DATALAB-2289]:
Enhancement for the dropdown lists (#1076)
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/incubator-datalab.git
The following commit(s) were added to refs/heads/develop by this push:
new 9bda6de [DATALAB-2289]: Enhancement for the dropdown lists (#1076)
9bda6de is described below
commit 9bda6de98aae84387ccbdcf352e9a13310f5b445
Author: Dmytro Gnatyshyn <42...@users.noreply.github.com>
AuthorDate: Wed Feb 17 17:22:24 2021 +0200
[DATALAB-2289]: Enhancement for the dropdown lists (#1076)
[DATALAB-2289]: Enhancement for the dropdown list
---
.../reporting-grid/reporting-grid.component.html | 24 ++++++----
.../reporting-grid/reporting-grid.component.scss | 41 +++++++++++++---
.../reporting-grid/reporting-grid.component.ts | 55 ++++++----------------
.../resources-grid/resources-grid.component.html | 4 +-
.../shared/form-controls/dropdowns.component.scss | 7 +--
5 files changed, 70 insertions(+), 61 deletions(-)
diff --git a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.html b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.html
index d64509d..173066d 100644
--- a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.html
@@ -18,7 +18,13 @@
-->
<div class="billing-page-wrapper scrolling" #pageWrapper [ngClass]="{'scroll': reportData?.length < 5}" (scroll)="scrollTable($event)">
<div class="wrapper" #wrapper>
+ <div class="totaL-item strong"
+ *ngIf="fullReport?.total_cost"
+ [ngClass]="{'scrollbar-right': tableWrapper.offsetHeight - tableEl['offsetHeight'] < 0, 'scrollbar-bottom': tableWrapper.offsetWidth - tableEl['offsetWidth'] < 0}">
+ Total <span *ngIf="reportData?.length">{{fullReport.total_cost | localcurrency}}</span>
+ </div>
<section class="table-wrapper" id="scrolling" #tableWrapper (scroll)="scrollTable($event)" [ngClass]="{'scroll': reportData?.length > 4, 'shadow-none': reportData?.length < 5}">
+
<table mat-table [dataSource]="reportData" class="data-grid reporting mat-elevation-z6" #table>
<ng-container matColumnDef="name">
@@ -53,15 +59,15 @@
</i>
</button>
</th>
- <td mat-cell *matCellDef=" let element">
+ <td mat-cell *matCellDef=" let element">
<div
class="ellipsis user-name-cell"
- [ngStyle]="element.user.length < 20 ? {'max-width' :'fit-content'} : {'max-width':'200px'}"
+ [ngStyle]="element.user?.length < 20 ? {'max-width' :'fit-content'} : {'max-width':'200px'}"
[matTooltip]="element.user"
matTooltipPosition="above"
matTooltipClass="billing-user-name">
{{element.user}}
- </div>
+ </div>
</td>
<td mat-footer-cell *matFooterCellDef class="table-footer"></td>
</ng-container>
@@ -162,17 +168,17 @@
</th>
<td mat-cell *matCellDef="let element">
</td>
- <td mat-footer-cell *matFooterCellDef class="table-footer total-cost" [colSpan]="2" [ngClass]="{'right-sticky': reportData?.length < 5}">
- <span class="strong">
- Total <span *ngIf="reportData?.length">{{fullReport['total_cost'] | localcurrency}}</span>
- </span>
+ <td mat-footer-cell *matFooterCellDef class="table-footer total-cost" [colSpan]="2" [ngClass]="{'right-sticky': reportData?.length < 5}" [style]="{zIndex: 99999}">
+<!-- <span class="strong">-->
+<!-- Total <span *ngIf="reportData?.length">{{fullReport['total_cost'] | localcurrency}}</span>-->
+<!-- </span>-->
</td>
</ng-container>
<ng-container matColumnDef="charge" stickyEnd>
- <th mat-header-cell *matHeaderCellDef class="th_charges label-header index-102" [ngClass]="{'right-sticky': reportData?.length < 5}">
+ <th mat-header-cell *matHeaderCellDef class="th_charges label-header index-105" [ngClass]="{'right-sticky': reportData?.length < 5}">
<div class="label">
<div class="sort">
<div class="sort-arrow up" (click)="sortBy('cost', 'down')" [ngClass]="{'active': !!this.active['costdown']}"></div>
@@ -247,7 +253,7 @@
</th>
</ng-container>
<ng-container matColumnDef="actions" stickyEnd>
- <th mat-header-cell *matHeaderCellDef class="filter-row-item index-102" [ngClass]="{'right-sticky': reportData?.length < 5}" [ngStyle]="{'zIndex': '101 !important'}">
+ <th mat-header-cell *matHeaderCellDef class="filter-row-item index-105" [ngClass]="{'right-sticky': reportData?.length < 5}" [ngStyle]="{'zIndex': '101 !important'}">
<div class="actions">
<button mat-icon-button class="btn reset" (click)="resetFiltering(); isFiltered = !isFiltered" [disabled]="!isFilterSelected">
<i class="material-icons">close</i>
diff --git a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.scss b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.scss
index c38e1aa..63cecf3 100644
--- a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.scss
@@ -80,6 +80,10 @@
font-size: 13px;
padding-left: 20px;
+ &.mat-cell{
+ border-bottom-color: #e3e5e8;
+ }
+
&.info {
z-index: 1 !important;
text-align: center;
@@ -155,7 +159,7 @@
}
.th_empty {
- width: 1%;
+ width: 3%;
z-index: 4 !important;
}
@@ -208,10 +212,10 @@
background-color: #f8f8f8;
}
- .mat-column-charge:not(.index-102),
- .filter-row-item:last-child:not(.index-102),
+ .mat-column-charge:not(.index-105),
+ .filter-row-item:last-child:not(.index-105),
.table-footer.mat-column-charge{
- z-index: 100 !important;
+ z-index: 103 !important;
}
.header-row {
@@ -340,8 +344,10 @@
.table-wrapper{
.reporting{
tr{
- th.th_charges.index-102{
- z-index: 102 !important;
+ th.th_charges.index-105,
+ .filter-row-item.index-105
+ {
+ z-index: 105 !important;
}
}
}
@@ -368,3 +374,26 @@
}
}
}
+
+.totaL-item{
+ z-index: 115;
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ height: 48px;
+ width: 135px;
+ display: flex;
+ justify-content: flex-end;
+ padding-right: 24px;
+ align-items: center;
+ font-size: 13px;
+ background-color: white;
+
+ &.scrollbar-right{
+ right: 3px;
+ }
+
+ &.scrollbar-bottom{
+ bottom: 3px;
+ }
+}
diff --git a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.ts b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.ts
index d11c9aa..5581119 100644
--- a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.ts
@@ -34,6 +34,18 @@ import {BehaviorSubject, fromEvent, Observable, of, Subject, timer} from 'rxjs';
import {logger} from 'codelyzer/util/logger';
import {take} from 'rxjs/operators';
+export interface IFullReport {
+ currency: string;
+ from: Array<number>;
+ is_full: boolean;
+ name: string;
+ reportHeaderCompletable: true;
+ report_lines: Array<any>;
+ sbn: string;
+ to: Array<number>;
+ total_cost: number;
+}
+
@Component({
selector: 'datalab-reporting-grid',
templateUrl: './reporting-grid.component.html',
@@ -48,7 +60,7 @@ export class ReportingGridComponent implements OnInit {
// filteredReportData: ReportingConfigModel = new ReportingConfigModel([], [], [], [], [], '', '', '', []);
collapseFilterRow: boolean = false;
reportData: Array<any> = [];
- fullReport: Array<any>;
+ fullReport: IFullReport;
isFiltered: boolean = false;
active: object = {};
displayedColumns: string[] = ['name', 'user', 'project', 'type', 'status', 'shape', 'service', 'empty', 'charge'];
@@ -107,48 +119,9 @@ export class ReportingGridComponent implements OnInit {
.filter(v => this.filteredReportData[v] && this.filteredReportData[v].length > 0).length > 0;
}
- // compareFilters() {
- // const previousData = {
- // datalabId: '',
- // date_end: '',
- // date_start: '',
- // locale: undefined,
- // products: [],
- // projects: [],
- // resource_type: [1],
- // shapes: [],
- // statuses: [],
- // users: [],
- // };
- //
- // const currentData = {
- // datalabId: '',
- // date_end: '',
- // date_start: '',
- // locale: undefined,
- // products: [],
- // projects: [],
- // resource_type: [],
- // shapes: [],
- // statuses: [],
- // users: [],
- // };
- //
- // console.log(Object.keys(currentData).every(el => {
- // if (Array.isArray(el)) {
- // if (previousData[el].length !== currentData[el].length) {
- // return true;
- // } else {
- // return false;
- // }
- // } else {
- // return previousData[el] !== currentData[el];
- // }
- // }));
- // }
-
refreshData(fullReport, report) {
this.reportData = [...report];
+ console.log(fullReport);
this.fullReport = fullReport;
this.checkFilters();
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.html
index 0b08163..b83d084 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.html
@@ -40,7 +40,7 @@
</ng-container> -->
<ng-container matColumnDef="name" sticky>
- <th mat-header-cell *matHeaderCellDef class="name-col ellipsis label-header">
+ <th mat-header-cell *matHeaderCellDef class="name-col label-header">
<span class="label">Environment name</span>
<button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
<i class="material-icons">
@@ -307,7 +307,7 @@
</th>
</ng-container>
<ng-container matColumnDef="resource-filter">
- <th mat-header-cell *matHeaderCellDef class="resources-col ellipsis filter-row-item">
+ <th mat-header-cell *matHeaderCellDef class="resources-col filter-row-item">
<multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'resources'"
[items]="filterConfiguration.resources" [model]="filterForm.resources"></multi-select-dropdown>
</th>
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/dropdowns.component.scss b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/dropdowns.component.scss
index ad90694..66cf215 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/dropdowns.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/dropdowns.component.scss
@@ -146,7 +146,7 @@
}
.dropdown-multiselect .list-menu li a {
- padding-left: 45px;
+ padding-left: 30px;
transition: all .45s ease-in-out;
}
@@ -246,9 +246,10 @@
.dropdown-multiselect .list-menu a span {
position: absolute;
- top: 8px;
- left: 12px;
+ top: 10px;
+ left: 9px;
color: #35afd5;
+ font-size: 18px;
}
.dropdown-multiselect.btn-group.open .dropdown-toggle {
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@datalab.apache.org
For additional commands, e-mail: commits-help@datalab.apache.org