dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Table layout improvement

Browse Source
This commit is contained in:
Igor Kulikov 2020-02-04 19:50:18 +02:00
parent ccfebce870
commit 09065dee38
18 changed files with 128 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
View File

@ -137,7 +137,7 @@
<mat-table [dataSource]="dataSource" <mat-table [dataSource]="dataSource"
matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear> matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
<ng-container matColumnDef="select" sticky> <ng-container matColumnDef="select" sticky>
<mat-header-cell *matHeaderCellDef> <mat-header-cell *matHeaderCellDef style="width: 30px;">
<mat-checkbox (change)="$event ? dataSource.masterToggle() : null" <mat-checkbox (change)="$event ? dataSource.masterToggle() : null"
[checked]="dataSource.selection.hasValue() && (dataSource.isAllSelected() | async)" [checked]="dataSource.selection.hasValue() && (dataSource.isAllSelected() | async)"
[indeterminate]="dataSource.selection.hasValue() && !(dataSource.isAllSelected() | async)"> [indeterminate]="dataSource.selection.hasValue() && !(dataSource.isAllSelected() | async)">
@ -151,26 +151,28 @@
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="lastUpdateTs"> <ng-container matColumnDef="lastUpdateTs">
<mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'attribute.last-update-time' | translate }} </mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header style="min-width: 150px; max-width: 150px; width: 150px;"> {{ 'attribute.last-update-time' | translate }} </mat-header-cell>
<mat-cell *matCellDef="let attribute"> <mat-cell *matCellDef="let attribute">
{{ attribute.lastUpdateTs | date:'yyyy-MM-dd HH:mm:ss' }} {{ attribute.lastUpdateTs | date:'yyyy-MM-dd HH:mm:ss' }}
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="key"> <ng-container matColumnDef="key">
<mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'attribute.key' | translate }} </mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40%"> {{ 'attribute.key' | translate }} </mat-header-cell>
<mat-cell *matCellDef="let attribute"> <mat-cell *matCellDef="let attribute">
{{ attribute.key }} {{ attribute.key }}
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="value"> <ng-container matColumnDef="value">
<mat-header-cell *matHeaderCellDef> {{ 'attribute.value' | translate }} </mat-header-cell> <mat-header-cell *matHeaderCellDef style="width: 60%"> {{ 'attribute.value' | translate }} </mat-header-cell>
<mat-cell *matCellDef="let attribute" <mat-cell *matCellDef="let attribute"
class="tb-value-cell" class="tb-value-cell"
(click)="editAttribute($event, attribute)"> (click)="editAttribute($event, attribute)">
<span fxFlex>{{attribute.value}}</span> <div fxLayout="row">
<span [fxShow]="!isClientSideTelemetryTypeMap.get(attributeScope)"> <span fxFlex>{{attribute.value}}</span>
<mat-icon>edit</mat-icon> <span [fxShow]="!isClientSideTelemetryTypeMap.get(attributeScope)">
</span> <mat-icon>edit</mat-icon>
</span>
</div>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<mat-header-row [ngClass]="{'mat-row-select': true}" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row> <mat-header-row [ngClass]="{'mat-row-select': true}" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>

6
ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss
View File

@ -54,9 +54,9 @@
mat-cell.tb-value-cell { mat-cell.tb-value-cell {
cursor: pointer; cursor: pointer;
mat-icon { mat-icon {
height: 16px; height: 24px;
width: 16px; width: 24px;
font-size: 16px; font-size: 24px;
color: #757575 color: #757575
} }
} }

10
ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
View File

@ -138,7 +138,7 @@
<mat-table [dataSource]="dataSource" [trackBy]="trackByEntityId" <mat-table [dataSource]="dataSource" [trackBy]="trackByEntityId"
matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear> matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
<ng-container matColumnDef="select" sticky> <ng-container matColumnDef="select" sticky>
<mat-header-cell *matHeaderCellDef> <mat-header-cell *matHeaderCellDef style="width: 30px;">
<mat-checkbox (change)="$event ? dataSource.masterToggle() : null" <mat-checkbox (change)="$event ? dataSource.masterToggle() : null"
[checked]="dataSource.selection.hasValue() && (dataSource.isAllSelected() | async)" [checked]="dataSource.selection.hasValue() && (dataSource.isAllSelected() | async)"
[indeterminate]="dataSource.selection.hasValue() && !(dataSource.isAllSelected() | async)"> [indeterminate]="dataSource.selection.hasValue() && !(dataSource.isAllSelected() | async)">
@ -178,10 +178,14 @@
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="actions" stickyEnd> <ng-container matColumnDef="actions" stickyEnd>
<mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ width: (cellActionDescriptors.length * 40) + 'px' }"> <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (cellActionDescriptors.length * 40) + 'px',
maxWidth: (cellActionDescriptors.length * 40) + 'px',
width: (cellActionDescriptors.length * 40) + 'px' }">
{{ entitiesTableConfig.actionsColumnTitle ? (entitiesTableConfig.actionsColumnTitle | translate) : '' }} {{ entitiesTableConfig.actionsColumnTitle ? (entitiesTableConfig.actionsColumnTitle | translate) : '' }}
</mat-header-cell> </mat-header-cell>
<mat-cell *matCellDef="let entity" [ngStyle.gt-md]="{ width: (cellActionDescriptors.length * 40) + 'px' }"> <mat-cell *matCellDef="let entity" [ngStyle.gt-md]="{ minWidth: (cellActionDescriptors.length * 40) + 'px',
maxWidth: (cellActionDescriptors.length * 40) + 'px',
width: (cellActionDescriptors.length * 40) + 'px' }">
<div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end"> <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
<button mat-button mat-icon-button [disabled]="isLoading$ | async" <button mat-button mat-icon-button [disabled]="isLoading$ | async"
[fxShow]="actionDescriptor.isEnabled(entity)" *ngFor="let actionDescriptor of cellActionDescriptors" [fxShow]="actionDescriptor.isEnabled(entity)" *ngFor="let actionDescriptor of cellActionDescriptors"

18
ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts
View File

@ -393,10 +393,15 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
const index = this.entitiesTableConfig.columns.indexOf(column); const index = this.entitiesTableConfig.columns.indexOf(column);
let res = this.headerCellStyleCache[index]; let res = this.headerCellStyleCache[index];
if (!res) { if (!res) {
const widthStyle: any = {width: column.width};
if (column.width !== '0px') {
widthStyle.minWidth = column.width;
widthStyle.maxWidth = column.width;
}
if (column instanceof EntityTableColumn) { if (column instanceof EntityTableColumn) {
res = {...column.headerCellStyleFunction(column.key), ...{minWidth: column.width, maxWidth: column.width, width: column.width}}; res = {...column.headerCellStyleFunction(column.key), ...widthStyle};
} else { } else {
res = {width: column.width}; res = widthStyle;
} }
this.headerCellStyleCache[index] = res; this.headerCellStyleCache[index] = res;
} }
@ -440,10 +445,15 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
const index = row * this.entitiesTableConfig.columns.length + col; const index = row * this.entitiesTableConfig.columns.length + col;
let res = this.cellStyleCache[index]; let res = this.cellStyleCache[index];
if (!res) { if (!res) {
const widthStyle: any = {width: column.width};
if (column.width !== '0px') {
widthStyle.minWidth = column.width;
widthStyle.maxWidth = column.width;
}
if (column instanceof EntityTableColumn) { if (column instanceof EntityTableColumn) {
res = {...column.cellStyleFunction(entity, column.key), ...{minWidth: column.width, maxWidth: column.width, width: column.width}}; res = {...column.cellStyleFunction(entity, column.key), ...widthStyle};
} else { } else {
res = {width: column.width}; res = widthStyle;
} }
this.cellStyleCache[index] = res; this.cellStyleCache[index] = res;
} }

8
ui-ngx/src/app/modules/home/components/import-export/table-columns-assignment.component.html
View File

@ -17,19 +17,19 @@
--> -->
<mat-table [dataSource]="dataSource"> <mat-table [dataSource]="dataSource">
<ng-container matColumnDef="order"> <ng-container matColumnDef="order">
<mat-header-cell *matHeaderCellDef></mat-header-cell> <mat-header-cell *matHeaderCellDef style="min-width: 40px; max-width: 40px; width: 40px"></mat-header-cell>
<mat-cell *matCellDef="let column; let i = index"> <mat-cell *matCellDef="let column; let i = index">
{{ (i+1) }} {{ (i+1) }}
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="sampleData"> <ng-container matColumnDef="sampleData">
<mat-header-cell *matHeaderCellDef> {{ 'import.column-example' | translate }} </mat-header-cell> <mat-header-cell *matHeaderCellDef style="width: 30%"> {{ 'import.column-example' | translate }} </mat-header-cell>
<mat-cell *matCellDef="let column"> <mat-cell *matCellDef="let column">
{{column.sampleData}} {{column.sampleData}}
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="type"> <ng-container matColumnDef="type">
<mat-header-cell *matHeaderCellDef> {{ 'import.column-type.column-type' | translate }} </mat-header-cell> <mat-header-cell *matHeaderCellDef style="width: 40%"> {{ 'import.column-type.column-type' | translate }} </mat-header-cell>
<mat-cell *matCellDef="let column"> <mat-cell *matCellDef="let column">
<mat-select matInput [(ngModel)]="column.type" (ngModelChange)="columnsUpdated()"> <mat-select matInput [(ngModel)]="column.type" (ngModelChange)="columnsUpdated()">
<mat-option *ngFor="let type of columnTypes" [value]="type.value" [disabled]="type.disabled"> <mat-option *ngFor="let type of columnTypes" [value]="type.value" [disabled]="type.disabled">
@ -39,7 +39,7 @@
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="key"> <ng-container matColumnDef="key">
<mat-header-cell *matHeaderCellDef> {{ 'import.column-key' | translate }} </mat-header-cell> <mat-header-cell *matHeaderCellDef style="width: 30%"> {{ 'import.column-key' | translate }} </mat-header-cell>
<mat-cell *matCellDef="let column"> <mat-cell *matCellDef="let column">
<mat-form-field floatLabel="always" hideRequiredMarker <mat-form-field floatLabel="always" hideRequiredMarker
*ngIf="column.type !== importEntityColumnType.name && *ngIf="column.type !== importEntityColumnType.name &&

1
ui-ngx/src/app/modules/home/components/import-export/table-columns-assignment.component.ts
View File

@ -139,7 +139,6 @@ export class TableColumnsAssignmentComponent implements OnInit, ControlValueAcce
return (this.valid) ? null : { return (this.valid) ? null : {
columnsInvalid: true columnsInvalid: true
}; };
return null;
} }
writeValue(value: CsvColumnParam[]): void { writeValue(value: CsvColumnParam[]): void {

16
ui-ngx/src/app/modules/home/components/relation/relation-table.component.html
View File

@ -87,7 +87,7 @@
<mat-table [dataSource]="dataSource" <mat-table [dataSource]="dataSource"
matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear> matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
<ng-container matColumnDef="select" sticky> <ng-container matColumnDef="select" sticky>
<mat-header-cell *matHeaderCellDef> <mat-header-cell *matHeaderCellDef style="width: 30px;">
<mat-checkbox (change)="$event ? dataSource.masterToggle() : null" <mat-checkbox (change)="$event ? dataSource.masterToggle() : null"
[checked]="dataSource.selection.hasValue() && (dataSource.isAllSelected() | async)" [checked]="dataSource.selection.hasValue() && (dataSource.isAllSelected() | async)"
[indeterminate]="dataSource.selection.hasValue() && !(dataSource.isAllSelected() | async)"> [indeterminate]="dataSource.selection.hasValue() && !(dataSource.isAllSelected() | async)">
@ -101,39 +101,39 @@
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="type"> <ng-container matColumnDef="type">
<mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'relation.type' | translate }} </mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 33%"> {{ 'relation.type' | translate }} </mat-header-cell>
<mat-cell *matCellDef="let relation"> <mat-cell *matCellDef="let relation">
{{ relation.type }} {{ relation.type }}
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<ng-container *ngIf="direction === directions.FROM" matColumnDef="toEntityTypeName"> <ng-container *ngIf="direction === directions.FROM" matColumnDef="toEntityTypeName">
<mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'relation.to-entity-type' | translate }} </mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 33%"> {{ 'relation.to-entity-type' | translate }} </mat-header-cell>
<mat-cell *matCellDef="let relation"> <mat-cell *matCellDef="let relation">
{{ relation.toEntityTypeName }} {{ relation.toEntityTypeName }}
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<ng-container *ngIf="direction === directions.FROM" matColumnDef="toName"> <ng-container *ngIf="direction === directions.FROM" matColumnDef="toName">
<mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'relation.to-entity-name' | translate }} </mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 33%"> {{ 'relation.to-entity-name' | translate }} </mat-header-cell>
<mat-cell *matCellDef="let relation"> <mat-cell *matCellDef="let relation">
{{ relation.toName }} {{ relation.toName }}
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<ng-container *ngIf="direction === directions.TO" matColumnDef="fromEntityTypeName"> <ng-container *ngIf="direction === directions.TO" matColumnDef="fromEntityTypeName">
<mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'relation.from-entity-type' | translate }} </mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 33%"> {{ 'relation.from-entity-type' | translate }} </mat-header-cell>
<mat-cell *matCellDef="let relation"> <mat-cell *matCellDef="let relation">
{{ relation.fromEntityTypeName }} {{ relation.fromEntityTypeName }}
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<ng-container *ngIf="direction === directions.TO" matColumnDef="fromName"> <ng-container *ngIf="direction === directions.TO" matColumnDef="fromName">
<mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'relation.from-entity-name' | translate }} </mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 33%"> {{ 'relation.from-entity-name' | translate }} </mat-header-cell>
<mat-cell *matCellDef="let relation"> <mat-cell *matCellDef="let relation">
{{ relation.fromName }} {{ relation.fromName }}
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="actions" stickyEnd> <ng-container matColumnDef="actions" stickyEnd>
<mat-header-cell *matHeaderCellDef [ngStyle]="{ minWidth: '80px', maxWidth: '80px' }"> <mat-header-cell *matHeaderCellDef style="min-width: 80px; max-width: 80px; width: 80px">
</mat-header-cell> </mat-header-cell>
<mat-cell *matCellDef="let relation" [ngStyle]="{ minWidth: '80px', maxWidth: '80px' }"> <mat-cell *matCellDef="let relation">
<div fxFlex fxLayout="row" fxLayoutAlign="end"> <div fxFlex fxLayout="row" fxLayoutAlign="end">
<button mat-button mat-icon-button [disabled]="isLoading$ | async" <button mat-button mat-icon-button [disabled]="isLoading$ | async"
matTooltip="{{ 'relation.edit' | translate }}" matTooltip="{{ 'relation.edit' | translate }}"

12
ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html
View File

@ -62,33 +62,33 @@
<mat-table [dataSource]="dataSource" <mat-table [dataSource]="dataSource"
matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear> matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
<ng-container matColumnDef="actionSourceName"> <ng-container matColumnDef="actionSourceName">
<mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'widget-config.action-source' | translate }} </mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 20%"> {{ 'widget-config.action-source' | translate }} </mat-header-cell>
<mat-cell *matCellDef="let action"> <mat-cell *matCellDef="let action">
{{ action.actionSourceName }} {{ action.actionSourceName }}
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="name"> <ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'widget-config.action-name' | translate }} </mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%"> {{ 'widget-config.action-name' | translate }} </mat-header-cell>
<mat-cell *matCellDef="let action"> <mat-cell *matCellDef="let action">
{{ action.name }} {{ action.name }}
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="icon"> <ng-container matColumnDef="icon">
<mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'widget-config.action-icon' | translate }} </mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40px"> {{ 'widget-config.action-icon' | translate }} </mat-header-cell>
<mat-cell *matCellDef="let action"> <mat-cell *matCellDef="let action">
<mat-icon>{{ action.icon }}</mat-icon> <mat-icon>{{ action.icon }}</mat-icon>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="typeName"> <ng-container matColumnDef="typeName">
<mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'widget-config.action-type' | translate }} </mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 50%"> {{ 'widget-config.action-type' | translate }} </mat-header-cell>
<mat-cell *matCellDef="let action"> <mat-cell *matCellDef="let action">
{{ action.typeName }} {{ action.typeName }}
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="actions" stickyEnd> <ng-container matColumnDef="actions" stickyEnd>
<mat-header-cell *matHeaderCellDef [ngStyle]="{ minWidth: '80px', maxWidth: '80px' }"> <mat-header-cell *matHeaderCellDef style="min-width: 80px; max-width: 80px; width: 80px">
</mat-header-cell> </mat-header-cell>
<mat-cell *matCellDef="let action" [ngStyle]="{ minWidth: '80px', maxWidth: '80px' }"> <mat-cell *matCellDef="let action">
<div fxFlex fxLayout="row" fxLayoutAlign="end"> <div fxFlex fxLayout="row" fxLayoutAlign="end">
<button mat-button mat-icon-button [disabled]="isLoading$ | async" <button mat-button mat-icon-button [disabled]="isLoading$ | async"
type="button" type="button"

10
ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html
View File

@ -70,7 +70,7 @@
[indeterminate]="alarmsDatasource.selection.hasValue() && !(alarmsDatasource.isAllSelected() | async)"> [indeterminate]="alarmsDatasource.selection.hasValue() && !(alarmsDatasource.isAllSelected() | async)">
</mat-checkbox> </mat-checkbox>
</mat-header-cell> </mat-header-cell>
<mat-cell *matCellDef="let alarm" style="width: 30px;"> <mat-cell *matCellDef="let alarm">
<mat-checkbox (click)="$event.stopPropagation();" <mat-checkbox (click)="$event.stopPropagation();"
(change)="$event ? alarmsDatasource.toggleSelection(alarm) : null" (change)="$event ? alarmsDatasource.toggleSelection(alarm) : null"
[checked]="alarmsDatasource.isSelected(alarm)"> [checked]="alarmsDatasource.isSelected(alarm)">
@ -85,9 +85,13 @@
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="actions" stickyEnd> <ng-container matColumnDef="actions" stickyEnd>
<mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ width: (actionCellDescriptors.length * 36) + 'px' }"> <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (actionCellDescriptors.length * 40) + 'px',
maxWidth: (actionCellDescriptors.length * 40) + 'px',
width: (actionCellDescriptors.length * 40) + 'px' }">
</mat-header-cell> </mat-header-cell>
<mat-cell *matCellDef="let alarm" [ngStyle.gt-md]="{ width: (actionCellDescriptors.length * 36) + 'px' }"> <mat-cell *matCellDef="let alarm" [ngStyle.gt-md]="{ minWidth: (actionCellDescriptors.length * 40) + 'px',
maxWidth: (actionCellDescriptors.length * 40) + 'px',
width: (actionCellDescriptors.length * 40) + 'px' }">
<div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end"> <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
<button mat-button mat-icon-button [disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)" <button mat-button mat-icon-button [disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)"
*ngFor="let actionDescriptor of actionCellDescriptors" *ngFor="let actionDescriptor of actionCellDescriptors"

8
ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts
View File

@ -59,7 +59,7 @@ import {
getColumnWidth, getColumnWidth,
TableWidgetDataKeySettings, TableWidgetDataKeySettings,
TableWidgetSettings, TableWidgetSettings,
toAlarmColumnDef toAlarmColumnDef, widthStyle
} from '@home/components/widget/lib/table-widget.models'; } from '@home/components/widget/lib/table-widget.models';
import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay'; import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
import { ComponentPortal, PortalInjector } from '@angular/cdk/portal'; import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
@ -476,9 +476,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
public headerStyle(key: EntityColumn): any { public headerStyle(key: EntityColumn): any {
const columnWidth = this.columnWidth[key.def]; const columnWidth = this.columnWidth[key.def];
return { return widthStyle(columnWidth);
width: columnWidth
};
} }
public cellStyle(alarm: AlarmInfo, key: EntityColumn): any { public cellStyle(alarm: AlarmInfo, key: EntityColumn): any {
@ -498,7 +496,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
} }
if (!style.width) { if (!style.width) {
const columnWidth = this.columnWidth[key.def]; const columnWidth = this.columnWidth[key.def];
style.width = columnWidth; style = {...style, ...widthStyle(columnWidth)};
} }
return style; return style;
} }

8
ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.html
View File

@ -48,9 +48,13 @@
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="actions" stickyEnd> <ng-container matColumnDef="actions" stickyEnd>
<mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (actionCellDescriptors.length * 36) + 'px', maxWidth: (actionCellDescriptors.length * 36) + 'px' }"> <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (actionCellDescriptors.length * 40) + 'px',
maxWidth: (actionCellDescriptors.length * 40) + 'px',
width: (actionCellDescriptors.length * 40) + 'px' }">
</mat-header-cell> </mat-header-cell>
<mat-cell *matCellDef="let entity" [ngStyle.gt-md]="{ minWidth: (actionCellDescriptors.length * 36) + 'px', maxWidth: (actionCellDescriptors.length * 36) + 'px' }"> <mat-cell *matCellDef="let entity" [ngStyle.gt-md]="{ minWidth: (actionCellDescriptors.length * 40) + 'px',
maxWidth: (actionCellDescriptors.length * 40) + 'px',
width: (actionCellDescriptors.length * 40) + 'px' }">
<div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end"> <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
<button mat-button mat-icon-button [disabled]="isLoading$ | async" <button mat-button mat-icon-button [disabled]="isLoading$ | async"
*ngFor="let actionDescriptor of actionCellDescriptors" *ngFor="let actionDescriptor of actionCellDescriptors"

34
ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts
View File

@ -55,20 +55,20 @@ import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort'; import { MatSort } from '@angular/material/sort';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { import {
CellContentInfo, CellContentInfo,
CellStyleInfo, CellStyleInfo,
constructTableCssString, constructTableCssString,
DisplayColumn, DisplayColumn,
EntityColumn, EntityColumn,
EntityData, EntityData,
fromEntityColumnDef, fromEntityColumnDef,
getCellContentInfo, getCellContentInfo,
getCellStyleInfo, getCellStyleInfo,
getColumnWidth, getColumnWidth,
getEntityValue, getEntityValue,
TableWidgetDataKeySettings, TableWidgetDataKeySettings,
TableWidgetSettings, TableWidgetSettings,
toEntityColumnDef toEntityColumnDef, widthStyle
} from '@home/components/widget/lib/table-widget.models'; } from '@home/components/widget/lib/table-widget.models';
import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay'; import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
import { ComponentPortal, PortalInjector } from '@angular/cdk/portal'; import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
@ -402,9 +402,7 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
public headerStyle(key: EntityColumn): any { public headerStyle(key: EntityColumn): any {
const columnWidth = this.columnWidth[key.def]; const columnWidth = this.columnWidth[key.def];
return { return widthStyle(columnWidth);
width: columnWidth
};
} }
public cellStyle(entity: EntityData, key: EntityColumn): any { public cellStyle(entity: EntityData, key: EntityColumn): any {
@ -424,7 +422,7 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
} }
if (!style.width) { if (!style.width) {
const columnWidth = this.columnWidth[key.def]; const columnWidth = this.columnWidth[key.def];
style.width = columnWidth; style = {...style, ...widthStyle(columnWidth)};
} }
return style; return style;
} }

11
ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts
View File

@ -156,6 +156,17 @@ export function getColumnWidth(keySettings: TableWidgetDataKeySettings): string
return isDefined(keySettings.columnWidth) ? keySettings.columnWidth : '0px'; return isDefined(keySettings.columnWidth) ? keySettings.columnWidth : '0px';
} }
export function widthStyle(width: string): any {
const widthStyleObj: any = {width};
if (width !== '0px') {
widthStyleObj.minWidth = width;
widthStyleObj.maxWidth = width;
}
return widthStyleObj;
}
export function constructTableCssString(widgetConfig: WidgetConfig): string { export function constructTableCssString(widgetConfig: WidgetConfig): string {
const origColor = widgetConfig.color || 'rgba(0, 0, 0, 0.87)'; const origColor = widgetConfig.color || 'rgba(0, 0, 0, 0.87)';
const origBackgroundColor = widgetConfig.backgroundColor || 'rgb(255, 255, 255)'; const origBackgroundColor = widgetConfig.backgroundColor || 'rgb(255, 255, 255)';

8
ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
View File

@ -58,9 +58,13 @@
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="actions" stickyEnd> <ng-container matColumnDef="actions" stickyEnd>
<mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (actionCellDescriptors.length * 36) + 'px', maxWidth: (actionCellDescriptors.length * 36) + 'px' }"> <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (actionCellDescriptors.length * 40) + 'px',
maxWidth: (actionCellDescriptors.length * 40) + 'px',
width: (actionCellDescriptors.length * 40) + 'px' }">
</mat-header-cell> </mat-header-cell>
<mat-cell *matCellDef="let row" [ngStyle.gt-md]="{ minWidth: (actionCellDescriptors.length * 36) + 'px', maxWidth: (actionCellDescriptors.length * 36) + 'px' }"> <mat-cell *matCellDef="let row" [ngStyle.gt-md]="{ minWidth: (actionCellDescriptors.length * 40) + 'px',
maxWidth: (actionCellDescriptors.length * 40) + 'px',
width: (actionCellDescriptors.length * 40) + 'px' }">
<div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end"> <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
<button mat-button mat-icon-button [disabled]="isLoading$ | async" <button mat-button mat-icon-button [disabled]="isLoading$ | async"
*ngFor="let actionDescriptor of actionCellDescriptors" *ngFor="let actionDescriptor of actionCellDescriptors"

10
ui-ngx/src/app/modules/home/pages/dashboard/states/manage-dashboard-states-dialog.component.html
View File

@ -78,27 +78,27 @@
<mat-table [dataSource]="dataSource" <mat-table [dataSource]="dataSource"
matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear> matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
<ng-container matColumnDef="name"> <ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'dashboard.state-name' | translate }} </mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 60%"> {{ 'dashboard.state-name' | translate }} </mat-header-cell>
<mat-cell *matCellDef="let state"> <mat-cell *matCellDef="let state">
{{ state.name }} {{ state.name }}
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="id"> <ng-container matColumnDef="id">
<mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'dashboard.state-id' | translate }} </mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40%"> {{ 'dashboard.state-id' | translate }} </mat-header-cell>
<mat-cell *matCellDef="let state"> <mat-cell *matCellDef="let state">
{{ state.id }} {{ state.id }}
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="root"> <ng-container matColumnDef="root">
<mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'dashboard.is-root-state' | translate }} </mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 80px"> {{ 'dashboard.is-root-state' | translate }} </mat-header-cell>
<mat-cell *matCellDef="let state"> <mat-cell *matCellDef="let state">
<mat-icon class="material-icons mat-icon">{{state.root ? 'check_box' : 'check_box_outline_blank'}}</mat-icon> <mat-icon class="material-icons mat-icon">{{state.root ? 'check_box' : 'check_box_outline_blank'}}</mat-icon>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="actions" stickyEnd> <ng-container matColumnDef="actions" stickyEnd>
<mat-header-cell *matHeaderCellDef [ngStyle]="{ minWidth: '80px', maxWidth: '80px' }"> <mat-header-cell *matHeaderCellDef style="min-width: 80px; max-width: 80px; width: 80px">
</mat-header-cell> </mat-header-cell>
<mat-cell *matCellDef="let state" [ngStyle]="{ minWidth: '80px', maxWidth: '80px' }"> <mat-cell *matCellDef="let state">
<div fxFlex fxLayout="row"> <div fxFlex fxLayout="row">
<button mat-button mat-icon-button [disabled]="isLoading$ | async" <button mat-button mat-icon-button [disabled]="isLoading$ | async"
type="button" type="button"

2
ui-ngx/src/app/modules/home/pages/rulechain/rulechains-table-config.resolver.ts
View File

@ -56,7 +56,7 @@ export class RuleChainsTableConfigResolver implements Resolve<EntityTableConfig<
this.config.columns.push( this.config.columns.push(
new DateEntityTableColumn<RuleChain>('createdTime', 'rulechain.created-time', this.datePipe, '150px'), new DateEntityTableColumn<RuleChain>('createdTime', 'rulechain.created-time', this.datePipe, '150px'),
new EntityTableColumn<RuleChain>('name', 'rulechain.name'), new EntityTableColumn<RuleChain>('name', 'rulechain.name', '100%'),
new EntityTableColumn<RuleChain>('root', 'rulechain.root', '60px', new EntityTableColumn<RuleChain>('root', 'rulechain.root', '60px',
entity => { entity => {
return checkBoxCell(entity.root); return checkBoxCell(entity.root);

6
ui-ngx/src/app/shared/models/page/page-link.ts
View File

@ -85,6 +85,12 @@ export class PageLink {
result = item1Value - item2Value; result = item1Value - item2Value;
} else if (typeof item1Value === 'string' && typeof item2Value === 'string') { } else if (typeof item1Value === 'string' && typeof item2Value === 'string') {
result = item1Value.localeCompare(item2Value); result = item1Value.localeCompare(item2Value);
} else if (typeof item1Value === 'boolean' && typeof item2Value === 'boolean') {
if (item1Value && !item2Value) {
result = 1;
} else if (!item1Value && item2Value) {
result = -1;
}
} else if (typeof item1Value !== typeof item2Value) { } else if (typeof item1Value !== typeof item2Value) {
result = 1; result = 1;
} }

15
ui-ngx/src/styles.scss
View File

@ -511,10 +511,25 @@ mat-label {
max-width: 100%; max-width: 100%;
margin-bottom: 1rem; margin-bottom: 1rem;
display: table; display: table;
table-layout: auto;
border-collapse: separate; border-collapse: separate;
margin: 0px; margin: 0px;
} }
mat-footer-row::after, mat-header-row::after, mat-row::after {
content: none;
}
mat-header-row {
min-height: 60px;
height: 60px;
}
mat-footer-row, mat-row {
min-height: 52px;
height: 52px;
}
.mat-row, .mat-row,
.mat-header-row { .mat-header-row {
display: table-row; display: table-row;