tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge branch 'rc'

pull/13819/head
Igor Kulikov 1 year ago
parent
e7fbad82ac 307fba20db
commit
609a68c991
4 changed files with 215 additions and 235 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 13
      ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
  2. 267
      ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html
  3. 40
      ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.scss
  4. 130
      ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.ts

13
ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
View File

@ -58,7 +58,7 @@ import {
} from '@app/shared/models/dashboard.models';
import { WINDOW } from '@core/services/window.service';
import { WindowMessage } from '@shared/models/window-message.model';
import { deepClone, guid, isDefined, isDefinedAndNotNull, isEqual, isNotEmptyStr } from '@app/core/utils';
import { deepClone, guid, isDefined, isDefinedAndNotNull, isNotEmptyStr } from '@app/core/utils';
import {
DashboardContext,
DashboardPageInitData,
@ -119,7 +119,8 @@ import {
} from '@home/components/dashboard-page/dashboard-settings-dialog.component';
import {
ManageDashboardStatesDialogComponent,
ManageDashboardStatesDialogData
ManageDashboardStatesDialogData,
ManageDashboardStatesDialogResult
} from '@home/components/dashboard-page/states/manage-dashboard-states-dialog.component';
import { ImportExportService } from '@shared/import-export/import-export.service';
import { AuthState } from '@app/core/auth/auth.models';
@ -964,17 +965,17 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
$event.stopPropagation();
}
this.dialog.open<ManageDashboardStatesDialogComponent, ManageDashboardStatesDialogData,
{states: {[id: string]: DashboardState}; widgets: {[id: string]: Widget}}>(ManageDashboardStatesDialogComponent, {
ManageDashboardStatesDialogResult>(ManageDashboardStatesDialogComponent, {
disableClose: true,
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
data: {
states: deepClone(this.dashboard.configuration.states),
widgets: deepClone(this.dashboard.configuration.widgets) as {[id: string]: Widget}
widgets: this.dashboard.configuration.widgets as {[id: string]: Widget}
}
}).afterClosed().subscribe((result) => {
if (result) {
if (!isEqual(result.widgets, this.dashboard.configuration.widgets)) {
this.dashboard.configuration.widgets = result.widgets;
if (result.addWidgets) {
Object.assign(this.dashboard.configuration.widgets, result.addWidgets);
}
if (result.states) {
this.updateStates(result.states);

267
ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html
View File

@ -15,143 +15,134 @@
limitations under the License.
-->
<form [formGroup]="statesFormGroup" (ngSubmit)="save()" style="width: 750px;">
<mat-toolbar color="primary">
<h2 translate>dashboard.manage-states</h2>
<span class="flex-1"></span>
<button mat-icon-button
(click)="cancel()"
type="button">
<mat-icon class="material-icons">close</mat-icon>
</button>
</mat-toolbar>
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
</mat-progress-bar>
<div mat-dialog-content>
<fieldset [disabled]="isLoading$ | async">
<div class="manage-dashboard-states">
<div class="tb-entity-table">
<div class="tb-entity-table-content flex flex-col">
<mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="textSearchMode">
<div class="mat-toolbar-tools">
<span class="tb-entity-table-title" translate>dashboard.states</span>
<span class="flex-1"></span>
<button mat-icon-button [disabled]="isLoading$ | async"
type="button"
(click)="addState($event)"
matTooltip="{{ 'dashboard.add-state' | translate }}"
matTooltipPosition="above">
<mat-icon>add</mat-icon>
</button>
<button mat-icon-button [disabled]="isLoading$ | async" (click)="enterFilterMode()"
type="button"
matTooltip="{{ 'action.search' | translate }}"
matTooltipPosition="above">
<mat-icon>search</mat-icon>
</button>
</div>
</mat-toolbar>
<mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode">
<div class="mat-toolbar-tools">
<button mat-icon-button
type="button"
matTooltip="{{ 'dashboard.search-states' | translate }}"
matTooltipPosition="above">
<mat-icon>search</mat-icon>
</button>
<mat-form-field class="flex-1">
<mat-label>&nbsp;</mat-label>
<input #searchInput matInput
[(ngModel)]="pageLink.textSearch"
[ngModelOptions]="{standalone: true}"
placeholder="{{ 'dashboard.search-states' | translate }}"/>
</mat-form-field>
<button mat-icon-button (click)="exitFilterMode()"
type="button"
matTooltip="{{ 'action.close' | translate }}"
matTooltipPosition="above">
<mat-icon>close</mat-icon>
</button>
</div>
</mat-toolbar>
<div class="table-container">
<table mat-table [dataSource]="dataSource"
matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
<ng-container matColumnDef="name">
<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 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 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 style="min-width: 120px; max-width: 120px; width: 120px">
</mat-header-cell>
<mat-cell *matCellDef="let state">
<div class="flex flex-1 flex-row">
<button mat-icon-button [disabled]="isLoading$ | async"
type="button"
matTooltip="{{ 'dashboard.edit-state' | translate }}"
matTooltipPosition="above"
(click)="editState($event, state)">
<mat-icon>edit</mat-icon>
</button>
<button mat-icon-button [disabled]="isLoading$ | async"
type="button"
matTooltip="{{ 'dashboard.duplicate-state-action' | translate }}"
matTooltipPosition="above"
(click)="duplicateState($event, state)">
<mat-icon>content_copy</mat-icon>
</button>
<button [class.!hidden]="state.root" mat-icon-button [disabled]="isLoading$ | async"
type="button"
matTooltip="{{ 'dashboard.delete-state' | translate }}"
matTooltipPosition="above"
(click)="deleteState($event, state)">
<mat-icon>delete</mat-icon>
</button>
</div>
</mat-cell>
</ng-container>
<mat-header-row class="mat-row-select" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
<mat-row class="mat-row-select"
*matRowDef="let state; columns: displayedColumns;"></mat-row>
</table>
<span [class.!hidden]="(dataSource.isEmpty() | async) === false"
class="no-data-found flex items-center justify-center" translate>{{ 'dashboard.no-states-text' }}</span>
</div>
<mat-divider></mat-divider>
<mat-paginator [length]="dataSource.total() | async"
[pageIndex]="pageLink.page"
[pageSize]="pageLink.pageSize"
[pageSizeOptions]="[5, 10, 15]"></mat-paginator>
</div>
</div>
<mat-toolbar color="primary">
<h2 translate>dashboard.manage-states</h2>
<span class="flex-1"></span>
<button mat-icon-button
(click)="cancel()"
type="button">
<mat-icon class="material-icons">close</mat-icon>
</button>
</mat-toolbar>
<div mat-dialog-content class="manage-dashboard-states">
<div class="tb-entity-table-content flex flex-col">
<mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="textSearchMode">
<div class="mat-toolbar-tools">
<span class="tb-entity-table-title" translate>dashboard.states</span>
<span class="flex-1"></span>
<button mat-icon-button [disabled]="isLoading$ | async"
type="button"
(click)="addState($event)"
matTooltip="{{ 'dashboard.add-state' | translate }}"
matTooltipPosition="above">
<mat-icon>add</mat-icon>
</button>
<button mat-icon-button [disabled]="isLoading$ | async" (click)="enterFilterMode()"
type="button"
matTooltip="{{ 'action.search' | translate }}"
matTooltipPosition="above">
<mat-icon>search</mat-icon>
</button>
</div>
</fieldset>
</div>
<div mat-dialog-actions class="flex items-center justify-end">
<button mat-button color="primary"
type="button"
[disabled]="(isLoading$ | async)"
(click)="cancel()" cdkFocusInitial>
{{ 'action.cancel' | translate }}
</button>
<button mat-raised-button color="primary"
type="submit"
[disabled]="(isLoading$ | async) || statesFormGroup.invalid || !statesFormGroup.dirty">
{{ 'action.save' | translate }}
</button>
</mat-toolbar>
<mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode">
<div class="mat-toolbar-tools">
<button mat-icon-button
type="button"
matTooltip="{{ 'dashboard.search-states' | translate }}"
matTooltipPosition="above">
<mat-icon>search</mat-icon>
</button>
<mat-form-field class="flex-1">
<mat-label>&nbsp;</mat-label>
<input #searchInput matInput
[(ngModel)]="pageLink.textSearch"
[ngModelOptions]="{standalone: true}"
placeholder="{{ 'dashboard.search-states' | translate }}"/>
</mat-form-field>
<button mat-icon-button (click)="exitFilterMode()"
type="button"
matTooltip="{{ 'action.close' | translate }}"
matTooltipPosition="above">
<mat-icon>close</mat-icon>
</button>
</div>
</mat-toolbar>
<div class="table-container">
<table mat-table [dataSource]="dataSource"
matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
<ng-container matColumnDef="name">
<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 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 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 style="min-width: 120px; max-width: 120px; width: 120px">
</mat-header-cell>
<mat-cell *matCellDef="let state">
<div class="flex flex-1 flex-row">
<button mat-icon-button [disabled]="isLoading$ | async"
type="button"
matTooltip="{{ 'dashboard.edit-state' | translate }}"
matTooltipPosition="above"
(click)="editState($event, state)">
<mat-icon>edit</mat-icon>
</button>
<button mat-icon-button [disabled]="isLoading$ | async"
type="button"
matTooltip="{{ 'dashboard.duplicate-state-action' | translate }}"
matTooltipPosition="above"
(click)="duplicateState($event, state)">
<mat-icon>content_copy</mat-icon>
</button>
<button [class.!hidden]="state.root" mat-icon-button [disabled]="isLoading$ | async"
type="button"
matTooltip="{{ 'dashboard.delete-state' | translate }}"
matTooltipPosition="above"
(click)="deleteState($event, state)">
<mat-icon>delete</mat-icon>
</button>
</div>
</mat-cell>
</ng-container>
<mat-header-row class="mat-row-select" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
<mat-row class="mat-row-select"
*matRowDef="let state; columns: displayedColumns;"></mat-row>
</table>
<span [class.!hidden]="(dataSource.isEmpty() | async) === false"
class="no-data-found flex items-center justify-center" translate>{{ 'dashboard.no-states-text' }}</span>
</div>
<mat-divider></mat-divider>
<mat-paginator [length]="dataSource.total() | async"
[pageIndex]="pageLink.page"
[pageSize]="pageLink.pageSize"
[pageSizeOptions]="[5, 10, 15]"></mat-paginator>
</div>
</form>
</div>
<div mat-dialog-actions class="flex items-center justify-end">
<button mat-button color="primary"
type="button"
[disabled]="(isLoading$ | async)"
(click)="cancel()" cdkFocusInitial>
{{ 'action.cancel' | translate }}
</button>
<button mat-raised-button color="primary"
type="submit"
(click)="save()"
[disabled]="(isLoading$ | async) || !isDirty">
{{ 'action.save' | translate }}
</button>
</div>

40
ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.scss
View File

@ -13,27 +13,39 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@import "../scss/constants";
:host {
height: 100%;
display: grid;
grid-template-rows: min-content auto min-content;
.manage-dashboard-states {
.tb-entity-table {
.tb-entity-table-content {
width: 100%;
height: 100%;
background: #fff;
.tb-entity-table-content {
width: 100%;
height: 100%;
background: #fff;
.tb-entity-table-title {
padding-right: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tb-entity-table-title {
padding-right: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.table-container {
overflow: auto;
}
.table-container {
overflow: auto;
}
}
}
@media #{$mat-sm} {
min-width: 470px;
}
@media #{$mat-gt-sm} {
min-width: 750px;
}
}
:host ::ng-deep {

130
ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.ts
View File

@ -14,21 +14,10 @@
/// limitations under the License.
///
import {
AfterViewInit,
Component,
ElementRef,
Inject,
OnInit,
SecurityContext,
SkipSelf,
ViewChild
} from '@angular/core';
import { ErrorStateMatcher } from '@angular/material/core';
import { AfterViewInit, Component, ElementRef, Inject, OnInit, SecurityContext, ViewChild } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { FormGroupDirective, NgForm, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { Router } from '@angular/router';
import { DialogComponent } from '@app/shared/components/dialog.component';
import { DashboardState } from '@app/shared/models/dashboard.models';
@ -44,7 +33,7 @@ import { fromEvent, merge } from 'rxjs';
import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
import { TranslateService } from '@ngx-translate/core';
import { DialogService } from '@core/services/dialog.service';
import { deepClone, isDefined } from '@core/utils';
import { deepClone, isDefined, isEqual } from '@core/utils';
import {
DashboardStateDialogComponent,
DashboardStateDialogData
@ -58,42 +47,42 @@ export interface ManageDashboardStatesDialogData {
widgets: {[id: string]: Widget };
}
export interface ManageDashboardStatesDialogResult {
states: {[id: string]: DashboardState };
addWidgets?: {[id: string]: Widget };
}
@Component({
selector: 'tb-manage-dashboard-states-dialog',
templateUrl: './manage-dashboard-states-dialog.component.html',
providers: [{provide: ErrorStateMatcher, useExisting: ManageDashboardStatesDialogComponent}],
styleUrls: ['./manage-dashboard-states-dialog.component.scss']
})
export class ManageDashboardStatesDialogComponent
extends DialogComponent<ManageDashboardStatesDialogComponent, {states: {[id: string]: DashboardState}; widgets: {[id: string]: Widget}}>
implements OnInit, ErrorStateMatcher, AfterViewInit {
extends DialogComponent<ManageDashboardStatesDialogComponent, ManageDashboardStatesDialogResult>
implements OnInit, AfterViewInit {
statesFormGroup: UntypedFormGroup;
@ViewChild('searchInput', {static: false}) searchInputField: ElementRef;
states: {[id: string]: DashboardState };
widgets: {[id: string]: Widget};
@ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
@ViewChild(MatSort, {static: false}) sort: MatSort;
isDirty = false;
displayedColumns: string[];
pageLink: PageLink;
textSearchMode = false;
dataSource: DashboardStatesDatasource;
submitted = false;
private states: {[id: string]: DashboardState };
private widgets: {[id: string]: Widget};
stateNames: Set<string> = new Set<string>();
@ViewChild('searchInput') searchInputField: ElementRef;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
private stateNames: Set<string> = new Set<string>();
private addWidgets: {[id: string]: Widget} = {};
constructor(protected store: Store<AppState>,
protected router: Router,
@Inject(MAT_DIALOG_DATA) public data: ManageDashboardStatesDialogData,
@SkipSelf() private errorStateMatcher: ErrorStateMatcher,
public dialogRef: MatDialogRef<ManageDashboardStatesDialogComponent,
{states: {[id: string]: DashboardState}; widgets: {[id: string]: Widget}}>,
private fb: UntypedFormBuilder,
public dialogRef: MatDialogRef<ManageDashboardStatesDialogComponent, ManageDashboardStatesDialogResult>,
private translate: TranslateService,
private dialogs: DialogService,
private utils: UtilsService,
@ -103,7 +92,6 @@ export class ManageDashboardStatesDialogComponent
this.states = this.data.states;
this.widgets = this.data.widgets;
this.statesFormGroup = this.fb.group({});
Object.values(this.states).forEach(value => this.stateNames.add(value.name));
const sortOrder: SortOrder = { property: 'name', direction: Direction.ASC };
@ -258,77 +246,65 @@ export class ManageDashboardStatesDialogComponent
}
duplicateState($event: Event, state: DashboardStateInfo) {
const originalState = state;
const newStateName = this.getNextDuplicatedName(state.name);
if (newStateName) {
const newStateId = newStateName.toLowerCase().replace(/\W/g, '_');
if (this.states[newStateId]) {
this.stateNames.add(newStateName);
this.duplicateState(null, state);
const suffix = ` - ${this.translate.instant('action.copy')} `;
let counter = 0;
const maxAttempts = 1000;
while (counter++ < maxAttempts) {
const candidateName = `${state.name}${suffix}${counter}`;
if (this.stateNames.has(candidateName)) continue;
const candidateId = candidateName.toLowerCase().replace(/\W/g, '_');
if (this.states[candidateId]) {
continue;
}
const duplicatedStates = deepClone(originalState);
const duplicatedWidgets = deepClone(this.widgets);
const duplicatedState = deepClone(state);
const mainWidgets = {};
const rightWidgets = {};
duplicatedStates.id = newStateId;
duplicatedStates.name = newStateName;
duplicatedStates.root = false;
this.stateNames.add(duplicatedStates.name);
duplicatedState.id = candidateId;
duplicatedState.name = candidateName;
duplicatedState.root = false;
this.stateNames.add(duplicatedState.name);
for (const [key, value] of Object.entries(duplicatedStates.layouts.main.widgets)) {
for (const [key, value] of Object.entries(duplicatedState.layouts.main.widgets)) {
const guid = this.utils.guid();
mainWidgets[guid] = value;
duplicatedWidgets[guid] = this.widgets[key];
duplicatedWidgets[guid].id = guid;
this.addWidgets[guid] = deepClone(this.widgets[key] ?? this.addWidgets[key]);
this.addWidgets[guid].id = guid;
}
duplicatedStates.layouts.main.widgets = mainWidgets;
duplicatedState.layouts.main.widgets = mainWidgets;
if (isDefined(duplicatedStates.layouts?.right)) {
for (const [key, value] of Object.entries(duplicatedStates.layouts.right.widgets)) {
if (isDefined(duplicatedState.layouts?.right)) {
for (const [key, value] of Object.entries(duplicatedState.layouts.right.widgets)) {
const guid = this.utils.guid();
rightWidgets[guid] = value;
duplicatedWidgets[guid] = this.widgets[key];
duplicatedWidgets[guid].id = guid;
this.addWidgets[guid] = deepClone(this.widgets[key] ?? this.addWidgets[key]);
this.addWidgets[guid].id = guid;
}
duplicatedStates.layouts.right.widgets = rightWidgets;
duplicatedState.layouts.right.widgets = rightWidgets;
}
this.states[duplicatedStates.id] = duplicatedStates;
this.widgets = duplicatedWidgets;
this.states[duplicatedState.id] = duplicatedState;
this.onStatesUpdated();
return;
}
}
private getNextDuplicatedName(stateName: string): string {
const suffix = ` - ${this.translate.instant('action.copy')} `;
let counter = 0;
while (++counter < Number.MAX_SAFE_INTEGER) {
const newName = `${stateName}${suffix}${counter}`;
if (!this.stateNames.has(newName)) {
return newName;
}
}
return null;
}
private onStatesUpdated() {
this.statesFormGroup.markAsDirty();
this.isDirty = true;
this.updateData(true);
}
isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
const customErrorState = !!(control && control.invalid && this.submitted);
return originalErrorState || customErrorState;
}
cancel(): void {
this.dialogRef.close(null);
}
save(): void {
this.submitted = true;
this.dialogRef.close({ states: this.states, widgets: this.widgets });
const result: ManageDashboardStatesDialogResult = {states: this.states};
if (!isEqual(this.addWidgets, {})) {
result.addWidgets = this.addWidgets;
}
this.dialogRef.close(result);
}
}

Write Preview
Loading…
Cancel
Save