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

UI: Entities table basic widget config

Browse Source
This commit is contained in:
Igor Kulikov 2023-06-24 12:48:28 +03:00
parent 1ec37d7685
commit 9af871e451
6 changed files with 126 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ui-ngx/src/app/modules/home/components/widget/config/basic/cards/entities-table-basic-config.component.html
View File

@ -62,6 +62,14 @@
</tb-color-input> </tb-color-input>
</div> </div>
</div> </div>
<div class="tb-widget-config-row space-between">
<div translate>widgets.table.show-card-buttons</div>
<mat-chip-listbox multiple formControlName="cardButtons">
<mat-chip-option value="search">{{ 'action.search' | translate }}</mat-chip-option>
<mat-chip-option value="columnsToDisplay">{{ 'widgets.table.columns-to-display' | translate }}</mat-chip-option>
<mat-chip-option value="fullscreen">{{ 'fullscreen.fullscreen' | translate }}</mat-chip-option>
</mat-chip-listbox>
</div>
<div class="tb-widget-config-row space-between same-padding"> <div class="tb-widget-config-row space-between same-padding">
<div>{{ 'widget-config.text-color' | translate }}</div> <div>{{ 'widget-config.text-color' | translate }}</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px"> <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
@ -72,7 +80,7 @@
</div> </div>
</div> </div>
<div class="tb-widget-config-row space-between same-padding"> <div class="tb-widget-config-row space-between same-padding">
<div>{{ 'widget-config.background' | translate }}</div> <div>{{ 'widget-config.background-color' | translate }}</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px"> <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
<mat-divider vertical></mat-divider> <mat-divider vertical></mat-divider>
<tb-color-input asBoxInput <tb-color-input asBoxInput

24
ui-ngx/src/app/modules/home/components/widget/config/basic/cards/entities-table-basic-config.component.ts
View File

@ -24,7 +24,7 @@ import {
DataKey, DataKey,
Datasource, Datasource,
datasourcesHasAggregation, datasourcesHasAggregation,
datasourcesHasOnlyComparisonAggregation datasourcesHasOnlyComparisonAggregation, WidgetConfig
} from '@shared/models/widget.models'; } from '@shared/models/widget.models';
import { WidgetConfigComponent } from '@home/components/widget/widget-config.component'; import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
@ -85,6 +85,7 @@ export class EntitiesTableBasicConfigComponent extends BasicWidgetConfigComponen
showTitleIcon: [configData.config.showTitleIcon, []], showTitleIcon: [configData.config.showTitleIcon, []],
titleIcon: [configData.config.titleIcon, []], titleIcon: [configData.config.titleIcon, []],
iconColor: [configData.config.iconColor, []], iconColor: [configData.config.iconColor, []],
cardButtons: [this.getCardButtons(configData.config), []],
color: [configData.config.color, []], color: [configData.config.color, []],
backgroundColor: [configData.config.backgroundColor, []], backgroundColor: [configData.config.backgroundColor, []],
actions: [configData.config.actions || {}, []] actions: [configData.config.actions || {}, []]
@ -104,6 +105,7 @@ export class EntitiesTableBasicConfigComponent extends BasicWidgetConfigComponen
this.widgetConfig.config.showTitleIcon = config.showTitleIcon; this.widgetConfig.config.showTitleIcon = config.showTitleIcon;
this.widgetConfig.config.titleIcon = config.titleIcon; this.widgetConfig.config.titleIcon = config.titleIcon;
this.widgetConfig.config.iconColor = config.iconColor; this.widgetConfig.config.iconColor = config.iconColor;
this.setCardButtons(config.cardButtons, this.widgetConfig.config);
this.widgetConfig.config.color = config.color; this.widgetConfig.config.color = config.color;
this.widgetConfig.config.backgroundColor = config.backgroundColor; this.widgetConfig.config.backgroundColor = config.backgroundColor;
return this.widgetConfig; return this.widgetConfig;
@ -151,4 +153,24 @@ export class EntitiesTableBasicConfigComponent extends BasicWidgetConfigComponen
} }
} }
private getCardButtons(config: WidgetConfig): string[] {
const buttons: string[] = [];
if (config.settings?.enableSearch) {
buttons.push('search');
}
if (config.settings?.enableSelectColumnDisplay) {
buttons.push('columnsToDisplay');
}
if (config.enableFullscreen) {
buttons.push('fullscreen');
}
return buttons;
}
private setCardButtons(buttons: string[], config: WidgetConfig) {
config.settings.enableSearch = buttons.includes('search');
config.settings.enableSelectColumnDisplay = buttons.includes('columnsToDisplay');
config.enableFullscreen = buttons.includes('fullscreen');
}
} }

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

@ -15,32 +15,59 @@
limitations under the License. limitations under the License.
--> -->
<section class="tb-widget-settings" [formGroup]="entitiesTableWidgetSettingsForm" fxLayout="column"> <ng-container [formGroup]="entitiesTableWidgetSettingsForm">
<fieldset class="fields-group"> <div class="tb-widget-config-panel">
<legend class="group-title" translate>widgets.table.common-table-settings</legend> <div class="tb-widget-config-panel-title" translate>widgets.table.table-header</div>
<mat-form-field fxFlex class="mat-block"> <div class="tb-widget-config-row">
<mat-label translate>widgets.table.entities-table-title</mat-label> <div>{{ 'widgets.table.entities-table-title' | translate }}</div>
<input matInput formControlName="entitiesTitle"> <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
<input matInput formControlName="entitiesTitle" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field> </mat-form-field>
<section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px"> </div>
<section fxLayout="column" fxFlex> <div class="tb-widget-config-row">
<mat-checkbox formControlName="enableSearch"> <mat-slide-toggle class="mat-slide" formControlName="enableStickyHeader">
{{ 'widgets.table.enable-search' | translate }}
</mat-checkbox>
<mat-checkbox formControlName="enableSelectColumnDisplay">
{{ 'widgets.table.enable-select-column-display' | translate }}
</mat-checkbox>
</section>
<section fxLayout="column" fxFlex>
<mat-checkbox formControlName="enableStickyHeader">
{{ 'widgets.table.enable-sticky-header' | translate }} {{ 'widgets.table.enable-sticky-header' | translate }}
</mat-checkbox> </mat-slide-toggle>
<mat-checkbox formControlName="enableStickyAction"> </div>
<div class="tb-widget-config-panel stroked">
<div class="tb-widget-config-panel-title" translate>widgets.table.header-buttons</div>
<mat-slide-toggle class="mat-slide no-margin" formControlName="enableSearch">
{{ 'widgets.table.enable-search' | translate }}
</mat-slide-toggle>
<mat-slide-toggle class="mat-slide no-margin" formControlName="enableSelectColumnDisplay">
{{ 'widgets.table.enable-select-column-display' | translate }}
</mat-slide-toggle>
</div>
</div>
<div class="tb-widget-config-panel">
<div class="tb-widget-config-panel-title" translate>widgets.table.columns</div>
<div class="tb-widget-config-row">
<mat-slide-toggle class="mat-slide" formControlName="displayEntityName">
{{ 'widgets.table.display-entity-name' | translate }}
</mat-slide-toggle>
<mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
<input matInput formControlName="entityNameColumnTitle" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
</div>
<div class="tb-widget-config-row">
<mat-slide-toggle class="mat-slide" formControlName="displayEntityName">
{{ 'widgets.table.display-entity-label' | translate }}
</mat-slide-toggle>
<mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
<input matInput formControlName="entityLabelColumnTitle" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
</div>
<div class="tb-widget-config-row">
<mat-slide-toggle class="mat-slide" formControlName="displayEntityType">
{{ 'widgets.table.display-entity-type' | translate }}
</mat-slide-toggle>
</div>
<div class="tb-widget-config-row">
<mat-slide-toggle class="mat-slide" formControlName="enableStickyAction">
{{ 'widgets.table.enable-sticky-action' | translate }} {{ 'widgets.table.enable-sticky-action' | translate }}
</mat-checkbox> </mat-slide-toggle>
</section> </div>
</section> <mat-form-field fxFlex subscriptSizing="dynamic">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.table.hidden-cell-button-display-mode</mat-label> <mat-label translate>widgets.table.hidden-cell-button-display-mode</mat-label>
<mat-select formControlName="reserveSpaceForHiddenAction"> <mat-select formControlName="reserveSpaceForHiddenAction">
<mat-option [value]="'true'"> <mat-option [value]="'true'">
@ -51,54 +78,34 @@
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<section fxLayout="column" fxLayoutGap.gt-xs="8px"> <mat-form-field fxFlex subscriptSizing="dynamic">
<section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutAlign.gt-xs="start center">
<mat-slide-toggle fxFlex formControlName="displayEntityName">
{{ 'widgets.table.display-entity-name' | translate }}
</mat-slide-toggle>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.table.entity-name-column-title</mat-label>
<input matInput formControlName="entityNameColumnTitle">
</mat-form-field>
</section>
<section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutAlign.gt-xs="start center">
<mat-slide-toggle fxFlex formControlName="displayEntityLabel">
{{ 'widgets.table.display-entity-label' | translate }}
</mat-slide-toggle>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.table.entity-label-column-title</mat-label>
<input matInput formControlName="entityLabelColumnTitle">
</mat-form-field>
</section>
<mat-slide-toggle formControlName="displayEntityType">
{{ 'widgets.table.display-entity-type' | translate }}
</mat-slide-toggle>
<section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutAlign.gt-xs="start center">
<mat-slide-toggle fxFlex formControlName="displayPagination">
{{ 'widgets.table.display-pagination' | translate }}
</mat-slide-toggle>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.table.default-page-size</mat-label>
<input matInput type="number" min="1" step="1" formControlName="defaultPageSize">
</mat-form-field>
</section>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.table.default-sort-order</mat-label> <mat-label translate>widgets.table.default-sort-order</mat-label>
<input matInput formControlName="defaultSortOrder"> <input matInput formControlName="defaultSortOrder">
</mat-form-field> </mat-form-field>
</section> </div>
</fieldset> <div class="tb-widget-config-panel">
<fieldset class="fields-group fields-group-slider"> <div class="tb-widget-config-panel-title" translate>widgets.table.pagination</div>
<legend class="group-title" translate>widgets.table.row-style</legend> <mat-slide-toggle class="mat-slide no-margin" formControlName="displayPagination">
{{ 'widgets.table.display-pagination' | translate }}
</mat-slide-toggle>
<div class="tb-widget-config-row space-between">
<div translate>widgets.table.default-page-size</div>
<mat-form-field appearance="outline" class="center number" subscriptSizing="dynamic">
<input matInput formControlName="defaultPageSize" type="number" min="1" step="1" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
</div>
</div>
<div class="tb-widget-config-panel tb-slide-toggle">
<div class="tb-widget-config-panel-title" translate>widgets.table.rows</div>
<mat-expansion-panel class="tb-settings" [expanded]="entitiesTableWidgetSettingsForm.get('useRowStyleFunction').value"> <mat-expansion-panel class="tb-settings" [expanded]="entitiesTableWidgetSettingsForm.get('useRowStyleFunction').value">
<mat-expansion-panel-header fxLayout="row wrap"> <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
<mat-panel-title> <mat-panel-title fxFlex="60">
<mat-slide-toggle formControlName="useRowStyleFunction" (click)="$event.stopPropagation()" <mat-slide-toggle class="mat-slide" formControlName="useRowStyleFunction" (click)="$event.stopPropagation()"
fxLayoutAlign="center"> fxLayoutAlign="center">
{{ 'widgets.table.use-row-style-function' | translate }} {{ 'widgets.table.use-row-style-function' | translate }}
</mat-slide-toggle> </mat-slide-toggle>
</mat-panel-title> </mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate> <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
widget-config.advanced-settings widget-config.advanced-settings
</mat-panel-description> </mat-panel-description>
</mat-expansion-panel-header> </mat-expansion-panel-header>
@ -112,5 +119,5 @@
</tb-js-func> </tb-js-func>
</ng-template> </ng-template>
</mat-expansion-panel> </mat-expansion-panel>
</fieldset> </div>
</section> </ng-container>

4
ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
View File

@ -83,7 +83,7 @@
<div class="tb-widget-config-panel"> <div class="tb-widget-config-panel">
<div class="tb-widget-config-panel-title" translate>widget-config.card-style</div> <div class="tb-widget-config-panel-title" translate>widget-config.card-style</div>
<div class="tb-widget-config-row space-between same-padding"> <div class="tb-widget-config-row space-between same-padding">
<div>{{ 'widget-config.text' | translate }}</div> <div>{{ 'widget-config.text-color' | translate }}</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px"> <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
<mat-divider vertical></mat-divider> <mat-divider vertical></mat-divider>
<tb-color-input asBoxInput <tb-color-input asBoxInput
@ -92,7 +92,7 @@
</div> </div>
</div> </div>
<div class="tb-widget-config-row space-between same-padding"> <div class="tb-widget-config-row space-between same-padding">
<div>{{ 'widget-config.background' | translate }}</div> <div>{{ 'widget-config.background-color' | translate }}</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px"> <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
<mat-divider vertical></mat-divider> <mat-divider vertical></mat-divider>
<tb-color-input asBoxInput <tb-color-input asBoxInput

9
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -4243,7 +4243,6 @@
"preview": "Preview", "preview": "Preview",
"set": "Set", "set": "Set",
"set-message": "Set message", "set-message": "Set message",
"card-title": "Card title",
"advanced-title-style": "Advanced title style", "advanced-title-style": "Advanced title style",
"card-style": "Card style", "card-style": "Card style",
"text": "Text", "text": "Text",
@ -5235,7 +5234,13 @@
"column-settings": "Column settings", "column-settings": "Column settings",
"remove-column": "Remove column", "remove-column": "Remove column",
"add-column": "Add column", "add-column": "Add column",
"no-columns": "No columns configured" "no-columns": "No columns configured",
"show-card-buttons": "Show card buttons",
"columns-to-display": "Columns to display",
"table-header": "Table header",
"header-buttons": "Header buttons",
"pagination": "Pagination",
"rows": "Rows"
}, },
"value-source": { "value-source": {
"value-source": "Value source", "value-source": "Value source",

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

@ -1211,6 +1211,11 @@ mat-label {
} }
&.tb-slide-toggle { &.tb-slide-toggle {
padding: 0; padding: 0;
gap: 0;
.tb-widget-config-panel-title {
padding-top: 16px;
padding-left: 16px;
}
.mat-expansion-panel { .mat-expansion-panel {
padding: 16px; padding: 16px;
.mat-expansion-panel-header { .mat-expansion-panel-header {
@ -1268,6 +1273,9 @@ mat-label {
} }
.mat-slide { .mat-slide {
margin: 8px 0; margin: 8px 0;
&.no-margin {
margin: 0;
}
.mdc-form-field>label { .mdc-form-field>label {
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;