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"
matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
<ng-container matColumnDef="select" sticky>
<mat-header-cell *matHeaderCellDef>
<mat-header-cell *matHeaderCellDef style="width: 30px;">
<mat-checkbox (change)="$event ? dataSource.masterToggle() : null"
[checked]="dataSource.selection.hasValue() && (dataSource.isAllSelected() | async)"
[indeterminate]="dataSource.selection.hasValue() && !(dataSource.isAllSelected() | async)">
@ -151,26 +151,28 @@
</mat-cell>
</ng-container>
<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">
{{ attribute.lastUpdateTs | date:'yyyy-MM-dd HH:mm:ss' }}
</mat-cell>
</ng-container>
<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">
{{ attribute.key }}
</mat-cell>
</ng-container>
<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"
class="tb-value-cell"
(click)="editAttribute($event, attribute)">
<span fxFlex>{{attribute.value}}</span>
<span [fxShow]="!isClientSideTelemetryTypeMap.get(attributeScope)">
<mat-icon>edit</mat-icon>
</span>
<div fxLayout="row">
<span fxFlex>{{attribute.value}}</span>
<span [fxShow]="!isClientSideTelemetryTypeMap.get(attributeScope)">
<mat-icon>edit</mat-icon>
</span>
</div>
</mat-cell>
</ng-container>
<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 {
cursor: pointer;
mat-icon {
height: 16px;
width: 16px;
font-size: 16px;
height: 24px;
width: 24px;
font-size: 24px;
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"
matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
<ng-container matColumnDef="select" sticky>
<mat-header-cell *matHeaderCellDef>
<mat-header-cell *matHeaderCellDef style="width: 30px;">
<mat-checkbox (change)="$event ? dataSource.masterToggle() : null"
[checked]="dataSource.selection.hasValue() && (dataSource.isAllSelected() | async)"
[indeterminate]="dataSource.selection.hasValue() && !(dataSource.isAllSelected() | async)">
@ -178,10 +178,14 @@
</mat-cell>
</ng-container>
<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) : '' }}
</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">
<button mat-button mat-icon-button [disabled]="isLoading$ | async"
[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);
let res = this.headerCellStyleCache[index];
if (!res) {
const widthStyle: any = {width: column.width};
if (column.width !== '0px') {
widthStyle.minWidth = column.width;
widthStyle.maxWidth = column.width;
}
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 {
res = {width: column.width};
res = widthStyle;
}
this.headerCellStyleCache[index] = res;
}
@ -440,10 +445,15 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
const index = row * this.entitiesTableConfig.columns.length + col;
let res = this.cellStyleCache[index];
if (!res) {
const widthStyle: any = {width: column.width};
if (column.width !== '0px') {
widthStyle.minWidth = column.width;
widthStyle.maxWidth = column.width;
}
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 {
res = {width: column.width};
res = widthStyle;
}
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">
<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">
{{ (i+1) }}
</mat-cell>
</ng-container>
<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">
{{column.sampleData}}
</mat-cell>
</ng-container>
<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-select matInput [(ngModel)]="column.type" (ngModelChange)="columnsUpdated()">
<mat-option *ngFor="let type of columnTypes" [value]="type.value" [disabled]="type.disabled">
@ -39,7 +39,7 @@
</mat-cell>
</ng-container>
<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-form-field floatLabel="always" hideRequiredMarker
*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 : {
columnsInvalid: true
};
return null;
}
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"
matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
<ng-container matColumnDef="select" sticky>
<mat-header-cell *matHeaderCellDef>
<mat-header-cell *matHeaderCellDef style="width: 30px;">
<mat-checkbox (change)="$event ? dataSource.masterToggle() : null"
[checked]="dataSource.selection.hasValue() && (dataSource.isAllSelected() | async)"
[indeterminate]="dataSource.selection.hasValue() && !(dataSource.isAllSelected() | async)">
@ -101,39 +101,39 @@
</mat-cell>
</ng-container>
<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">
{{ relation.type }}
</mat-cell>
</ng-container>
<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">
{{ relation.toEntityTypeName }}
</mat-cell>
</ng-container>
<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">
{{ relation.toName }}
</mat-cell>
</ng-container>
<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">
{{ relation.fromEntityTypeName }}
</mat-cell>
</ng-container>
<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">
{{ relation.fromName }}
</mat-cell>
</ng-container>
<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-cell *matCellDef="let relation" [ngStyle]="{ minWidth: '80px', maxWidth: '80px' }">
<mat-cell *matCellDef="let relation">
<div fxFlex fxLayout="row" fxLayoutAlign="end">
<button mat-button mat-icon-button [disabled]="isLoading$ | async"
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"
matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
<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">
{{ action.actionSourceName }}
</mat-cell>
</ng-container>
<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">
{{ action.name }}
</mat-cell>
</ng-container>
<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-icon>{{ action.icon }}</mat-icon>
</mat-cell>
</ng-container>
<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">
{{ action.typeName }}
</mat-cell>
</ng-container>
<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-cell *matCellDef="let action" [ngStyle]="{ minWidth: '80px', maxWidth: '80px' }">
<mat-cell *matCellDef="let action">
<div fxFlex fxLayout="row" fxLayoutAlign="end">
<button mat-button mat-icon-button [disabled]="isLoading$ | async"
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)">
</mat-checkbox>
</mat-header-cell>
<mat-cell *matCellDef="let alarm" style="width: 30px;">
<mat-cell *matCellDef="let alarm">
<mat-checkbox (click)="$event.stopPropagation();"
(change)="$event ? alarmsDatasource.toggleSelection(alarm) : null"
[checked]="alarmsDatasource.isSelected(alarm)">
@ -85,9 +85,13 @@
</mat-cell>
</ng-container>
<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-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">
<button mat-button mat-icon-button [disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)"
*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,
TableWidgetDataKeySettings,
TableWidgetSettings,
toAlarmColumnDef
toAlarmColumnDef, widthStyle
} from '@home/components/widget/lib/table-widget.models';
import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
@ -476,9 +476,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
public headerStyle(key: EntityColumn): any {
const columnWidth = this.columnWidth[key.def];
return {
width: columnWidth
};
return widthStyle(columnWidth);
}
public cellStyle(alarm: AlarmInfo, key: EntityColumn): any {
@ -498,7 +496,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
}
if (!style.width) {
const columnWidth = this.columnWidth[key.def];
style.width = columnWidth;
style = {...style, ...widthStyle(columnWidth)};
}
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>
</ng-container>
<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-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">
<button mat-button mat-icon-button [disabled]="isLoading$ | async"
*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 { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import {
CellContentInfo,
CellStyleInfo,
constructTableCssString,
DisplayColumn,
EntityColumn,
EntityData,
fromEntityColumnDef,
getCellContentInfo,
getCellStyleInfo,
getColumnWidth,
getEntityValue,
TableWidgetDataKeySettings,
TableWidgetSettings,
toEntityColumnDef
CellContentInfo,
CellStyleInfo,
constructTableCssString,
DisplayColumn,
EntityColumn,
EntityData,
fromEntityColumnDef,
getCellContentInfo,
getCellStyleInfo,
getColumnWidth,
getEntityValue,
TableWidgetDataKeySettings,
TableWidgetSettings,
toEntityColumnDef, widthStyle
} from '@home/components/widget/lib/table-widget.models';
import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
@ -402,9 +402,7 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
public headerStyle(key: EntityColumn): any {
const columnWidth = this.columnWidth[key.def];
return {
width: columnWidth
};
return widthStyle(columnWidth);
}
public cellStyle(entity: EntityData, key: EntityColumn): any {
@ -424,7 +422,7 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
}
if (!style.width) {
const columnWidth = this.columnWidth[key.def];
style.width = columnWidth;
style = {...style, ...widthStyle(columnWidth)};
}
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';
}
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 {
const origColor = widgetConfig.color || 'rgba(0, 0, 0, 0.87)';
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>
</ng-container>
<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-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">
<button mat-button mat-icon-button [disabled]="isLoading$ | async"
*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"
matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
<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">
{{ state.name }}
</mat-cell>
</ng-container>
<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">
{{ state.id }}
</mat-cell>
</ng-container>
<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-icon class="material-icons mat-icon">{{state.root ? 'check_box' : 'check_box_outline_blank'}}</mat-icon>
</mat-cell>
</ng-container>
<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-cell *matCellDef="let state" [ngStyle]="{ minWidth: '80px', maxWidth: '80px' }">
<mat-cell *matCellDef="let state">
<div fxFlex fxLayout="row">
<button mat-button mat-icon-button [disabled]="isLoading$ | async"
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(
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',
entity => {
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;
} else if (typeof item1Value === 'string' && typeof item2Value === 'string') {
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) {
result = 1;
}

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

@ -511,10 +511,25 @@ mat-label {
max-width: 100%;
margin-bottom: 1rem;
display: table;
table-layout: auto;
border-collapse: separate;
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-header-row {
display: table-row;