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

editions after review

Browse Source
This commit is contained in:
Dmitriymush 2022-06-16 22:10:30 +03:00
parent 4479ccd730
commit 4ba6282263
7 changed files with 116 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ui-ngx/src/app/core/services/dashboard-utils.service.ts
View File

@ -287,38 +287,30 @@ export class DashboardUtilsService {
let addedCount = 0;
let removedCount = 0;
for (const l of Object.keys(state.layouts)) {
if (!newLayouts[l] && l !== 'layoutDimension') {
removedCount++;
}
}
for (const l of Object.keys(newLayouts)) {
if (!state.layouts[l] && l !== 'layoutDimension') {
addedCount++;
}
}
state.layouts = newLayouts;
const layoutsCount = Object.keys(state.layouts).length;
let newColumns;
if (addedCount) {
for (const l of Object.keys(state.layouts)) {
if (l !== 'layoutDimension') {
newColumns = state.layouts[l].gridSettings.columns * (layoutsCount - addedCount) / layoutsCount;
if (newColumns > 0) {
state.layouts[l].gridSettings.columns = newColumns;
}
}
}
}
if (removedCount) {
for (const l of Object.keys(state.layouts)) {
if (l !== 'layoutDimension') {
newColumns = state.layouts[l].gridSettings.columns * (layoutsCount + removedCount) / layoutsCount;
if (newColumns > 0) {
state.layouts[l].gridSettings.columns = newColumns;
}
}
}
}
this.removeUnusedWidgets(dashboard);
}
@ -339,7 +331,6 @@ export class DashboardUtilsService {
if (state) {
const result: DashboardLayoutsInfo = {};
for (const l of Object.keys(state.layouts)) {
if (l !== 'layoutDimension') {
const layout: DashboardLayout = state.layouts[l];
if (layout) {
result[l] = {
@ -354,7 +345,6 @@ export class DashboardUtilsService {
result[l].gridSettings = layout.gridSettings;
}
}
}
return result;
} else {
return null;

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

@ -43,7 +43,7 @@ import {
DashboardLayoutsInfo,
DashboardState,
DashboardStateLayouts,
GridSettings,
GridSettings, LayoutDimension,
WidgetLayout
} from '@app/shared/models/dashboard.models';
import { WINDOW } from '@core/services/window.service';
@ -135,7 +135,7 @@ import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
import cssjs from '@core/css/css';
import { DOCUMENT } from '@angular/common';
import { IAliasController } from '@core/api/widget-api.models';
import { LaouytType, LayoutWidthType } from "@home/components/dashboard-page/layout/layout.models";
import { LayoutType, LayoutWidthType } from "@home/components/dashboard-page/layout/layout.models";
// @dynamic
@Component({
@ -267,8 +267,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
ctrl: null,
dashboardCtrl: this
}
},
layoutDimension: null
}
};
addWidgetFabButtons: FooterFabButtons = {
@ -653,15 +652,15 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
}
public mainLayoutWidth(): string {
if (this.isEditingWidget && this.editingLayoutCtx.id === LaouytType.MAIN) {
if (this.isEditingWidget && this.editingLayoutCtx.id === LayoutType.MAIN) {
return '100%';
} else {
return this.layouts.right.show && !this.isMobile ? this.calculateWidth(LaouytType.MAIN) : '100%';
return this.layouts.right.show && !this.isMobile ? this.calculateWidth(LayoutType.MAIN) : '100%';
}
}
public mainLayoutHeight(): string {
if (!this.isEditingWidget || this.editingLayoutCtx.id === LaouytType.MAIN) {
if (!this.isEditingWidget || this.editingLayoutCtx.id === LayoutType.MAIN) {
return '100%';
} else {
return '0px';
@ -669,18 +668,27 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
}
public rightLayoutWidth(): string {
if (this.isEditingWidget && this.editingLayoutCtx.id === LaouytType.RIGHT) {
if (this.isEditingWidget && this.editingLayoutCtx.id === LayoutType.RIGHT) {
return '100%';
} else {
return this.isMobile ? '100%' : this.calculateWidth(LaouytType.RIGHT);
return this.isMobile ? '100%' : this.calculateWidth(LayoutType.RIGHT);
}
}
private calculateWidth(layout: DashboardLayoutId): string {
const layoutDimension = this.dashboard.configuration.states[this.dashboardCtx.state].layouts.layoutDimension;
let layoutDimension: LayoutDimension;
const mainLayout = this.dashboard.configuration.states[this.dashboardCtx.state].layouts.main;
const rightLayout = this.dashboard.configuration.states[this.dashboardCtx.state].layouts.right;
if (rightLayout) {
if (mainLayout.gridSettings.layoutDimension) {
layoutDimension = mainLayout.gridSettings.layoutDimension;
} else {
layoutDimension = rightLayout.gridSettings.layoutDimension;
}
}
if (layoutDimension) {
if (layoutDimension.type === LayoutWidthType.PERCENTAGE) {
if (layout === LaouytType.RIGHT) {
if (layout === LayoutType.RIGHT) {
return (100 - layoutDimension.leftWidthPercentage) + '%';
} else {
return layoutDimension.leftWidthPercentage + '%';
@ -911,7 +919,6 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
}
for (const l of Object.keys(this.layouts)) {
const layout: DashboardPageLayout = this.layouts[l];
if(l !== 'layoutDimension') {
if (layoutsData[l]) {
layout.show = true;
const layoutInfo: DashboardLayoutInfo = layoutsData[l];
@ -922,7 +929,6 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
}
}
}
}
private updateLayout(layout: DashboardPageLayout, layoutInfo: DashboardLayoutInfo) {
if (layoutInfo.gridSettings) {
@ -968,7 +974,6 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
private resetHighlight() {
for (const l of Object.keys(this.layouts)) {
if(l !== 'layoutDimension' ) {
if (this.layouts[l].layoutCtx) {
if (this.layouts[l].layoutCtx.ctrl) {
this.layouts[l].layoutCtx.ctrl.resetHighlight();
@ -976,7 +981,6 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
}
}
}
}
private entityAliasesUpdated() {
this.dashboardCtx.aliasController.updateEntityAliases(this.dashboard.configuration.entityAliases);

3
ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts
View File

@ -18,7 +18,6 @@ import {
Dashboard,
DashboardLayoutId,
GridSettings,
LayoutDimension,
WidgetLayouts
} from '@app/shared/models/dashboard.models';
import { Widget, WidgetPosition } from '@app/shared/models/widget.models';
@ -74,7 +73,7 @@ export interface DashboardPageLayout {
layoutCtx: DashboardPageLayoutContext;
}
export declare type DashboardPageLayouts = {[key in DashboardLayoutId | 'layoutDimension']: DashboardPageLayout & LayoutDimension};
export declare type DashboardPageLayouts = {[key in DashboardLayoutId ]: DashboardPageLayout };
export class LayoutWidgetsArray implements Iterable<Widget> {

2
ui-ngx/src/app/modules/home/components/dashboard-page/layout/layout.models.ts
View File

@ -28,7 +28,7 @@ export enum LayoutWidthType {
FIXED = "fixed"
}
export enum LaouytType {
export enum LayoutType {
MAIN = "main",
RIGHT = "right",
LEFT = "left"

44
ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html
View File

@ -39,40 +39,40 @@
</div>
<div fxLayout="column" fxLayoutAlign="start center" fxLayoutGap="8px">
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" style="width: 100%;">
<button fxFlex
<button fxFlex="{{buttonFlexValue()}}"
type="button"
mat-raised-button
color="primary"
class="tb-layout-button"
(click)="openLayoutSettings('main')"
[ngStyle]="buttonStyle('main')">
<span >{{ (layoutsFormGroup.value.right ? 'layout.left' :'layout.main') | translate }}</span>
(click)="openLayoutSettings(LayoutType.MAIN)"
>
<span >{{ (layoutsFormGroup.value.right ? 'layout.left' : 'layout.main') | translate }}</span>
</button>
<button fxFlex [fxShow]="layoutsFormGroup.get('right').value"
<button fxFlex
[fxShow]="layoutsFormGroup.get(LayoutType.RIGHT).value"
type="button"
mat-raised-button
color="primary"
class="tb-layout-button"
(click)="openLayoutSettings('right')"
[ngStyle]="buttonStyle('right')">
(click)="openLayoutSettings(LayoutType.RIGHT)">
<span >{{ 'layout.right' | translate }}</span>
</button>
</div>
<div fxLayout="column"
fxLayoutAlign="start center"
fxLayoutGap="8px"
[fxShow]="layoutsFormGroup.get('right').value">
[fxShow]="layoutsFormGroup.get(LayoutType.RIGHT).value">
<mat-button-toggle-group aria-label="Select width value type"
formControlName="type"
style="width: 100%;">
<mat-button-toggle style="width: 50%;" value="percentage">
<mat-button-toggle fxFlex value="percentage">
{{ 'layout.percentage-width' | translate }}
</mat-button-toggle>
<mat-button-toggle style="width: 50%;" value="fixed">
<mat-button-toggle fxFlex value="fixed">
{{ 'layout.fixed-width' | translate }}
</mat-button-toggle>
</mat-button-toggle-group>
<div [fxShow]="layoutsFormGroup.get('type').value === 'percentage'">
<div [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE">
<div
fxLayoutAlign="start center"
fxLayoutGap="8px"
@ -83,9 +83,10 @@
max="90"
formControlName="leftWidthPercentage"
thumbLabel
[value]="layoutsFormGroup.value.leftWidthPercentage"
[displayWith]="formatSliderTooltipLabel"
></mat-slider>
[value]="layoutsFormGroup.get('leftWidthPercentage').value"
[displayWith]="formatSliderTooltipLabel">
</mat-slider>
</div>
<div fxLayout="column">
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" style="width: 100%;">
@ -93,9 +94,9 @@
<mat-label>{{ 'layout.left-width' | translate }}</mat-label>
<input matInput
formControlName="leftWidthPercentage"
[value]="layoutsFormGroup.value.leftWidthPercentage"
[value]="layoutsFormGroup.get('leftWidthPercentage').value"
type="number"
step="any"
step="1"
min="10"
max="90">
</mat-form-field>
@ -104,16 +105,15 @@
<input matInput
formControlName="rightWidthPercentage"
type="number"
step="any"
step="1"
min="10"
max="90">
</mat-form-field>
</div>
<mat-hint class="tb-hint">{{'layout.layout-min-max' | translate: { min: 10, max: 90, units: "%" } }}</mat-hint>
<label class="tb-hint">{{'layout.layout-min-max' | translate: { min: 10, max: 90, units: "%" } }}</label>
</div>
</div>
<div [fxShow]="layoutsFormGroup.get('type').value === 'fixed'"
style="width: 100%;"
<div [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.FIXED"
fxLayout="column"
fxLayoutAlign="start center">
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" class="tb-layout-fixed-container">
@ -137,12 +137,12 @@
<input matInput
formControlName="fixedWidth"
type="number"
step="any"
step="1"
min="150"
max="1700"
required>
</mat-form-field>
<mat-hint class="tb-hint">{{ 'layout.layout-min-max' | translate: {min: 150, max: 1700, units: "px" } }}</mat-hint>
<label class="tb-hint">{{ 'layout.layout-min-max' | translate: {min: 150, max: 1700, units: "px" } }}</label>
</div>
</div>
</div>

78
ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts
View File

@ -14,7 +14,7 @@
/// limitations under the License.
///
import { Component, Inject, OnInit, SkipSelf } from '@angular/core';
import { ChangeDetectorRef, Component, Inject, OnInit, SkipSelf} from '@angular/core';
import { ErrorStateMatcher } from '@angular/material/core';
import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
import { Store } from '@ngrx/store';
@ -24,14 +24,14 @@ import { Router } from '@angular/router';
import { DialogComponent } from '@app/shared/components/dialog.component';
import { UtilsService } from '@core/services/utils.service';
import { TranslateService } from '@ngx-translate/core';
import { DashboardLayoutId, DashboardStateLayouts } from '@app/shared/models/dashboard.models';
import { DashboardLayoutId, DashboardStateLayouts, LayoutDimension } from '@app/shared/models/dashboard.models';
import { deepClone, isDefined } from '@core/utils';
import { DashboardUtilsService } from '@core/services/dashboard-utils.service';
import {
DashboardSettingsDialogComponent,
DashboardSettingsDialogData
} from '@home/components/dashboard-page/dashboard-settings-dialog.component';
import { LaouytType, LayoutWidthType } from "@home/components/dashboard-page/layout/layout.models";
import { LayoutType, LayoutWidthType } from "@home/components/dashboard-page/layout/layout.models";
export interface ManageDashboardLayoutsDialogData {
layouts: DashboardStateLayouts;
@ -50,6 +50,10 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
layouts: DashboardStateLayouts;
LayoutWidthType = LayoutWidthType;
LayoutType = LayoutType;
submitted = false;
constructor(protected store: Store<AppState>,
@ -61,7 +65,8 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
private utils: UtilsService,
private dashboardUtils: DashboardUtilsService,
private translate: TranslateService,
private dialog: MatDialog) {
private dialog: MatDialog,
private cd: ChangeDetectorRef) {
super(store, router, dialogRef);
this.layouts = this.data.layouts;
@ -72,26 +77,33 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
rightWidthPercentage: [50, [Validators.min(10), Validators.max(90)]],
type: [LayoutWidthType.PERCENTAGE, []],
fixedWidth: [150, [Validators.min(150), Validators.max(1700)]],
fixedLayout: [LaouytType.MAIN, []]
fixedLayout: [LayoutType.MAIN, []]
}
);
if (this.layouts.layoutDimension) {
this.layoutsFormGroup.get('type').setValue(this.layouts.layoutDimension.type);
if (this.layouts.layoutDimension.type === LayoutWidthType.FIXED) {
this.layoutsFormGroup.get('fixedWidth').setValue(this.layouts.layoutDimension.fixedWidth);
this.layoutsFormGroup.get('fixedLayout').setValue(this.layouts.layoutDimension.fixedLayout);
if (this.layouts.right) {
if (this.layouts.right.gridSettings.layoutDimension) {
this.layoutsFormGroup.get('fixedLayout').setValue(this.layouts.right.gridSettings.layoutDimension.fixedLayout);
this.layoutsFormGroup.get('type').setValue(LayoutWidthType.FIXED);
this.layoutsFormGroup.get('fixedWidth').setValue(this.layouts.right.gridSettings.layoutDimension.fixedWidth);
} else if (this.layouts.main.gridSettings.layoutDimension) {
if (this.layouts.main.gridSettings.layoutDimension.type === LayoutWidthType.FIXED) {
this.layoutsFormGroup.get('fixedLayout').setValue(this.layouts.main.gridSettings.layoutDimension.fixedLayout);
this.layoutsFormGroup.get('type').setValue(LayoutWidthType.FIXED);
this.layoutsFormGroup.get('fixedWidth').setValue(this.layouts.main.gridSettings.layoutDimension.fixedWidth);
} else {
this.layoutsFormGroup.get('leftWidthPercentage').setValue(this.layouts.layoutDimension.leftWidthPercentage);
this.layoutsFormGroup.get('rightWidthPercentage').setValue(100 - Number(this.layouts.layoutDimension.leftWidthPercentage));
const leftWidthPercentage: number = Number(this.layouts.main.gridSettings.layoutDimension.leftWidthPercentage);
this.layoutsFormGroup.get('leftWidthPercentage').setValue(leftWidthPercentage);
this.layoutsFormGroup.get('rightWidthPercentage').setValue(100 - Number(leftWidthPercentage));
}
}
}
if (!this.layouts[LaouytType.MAIN]) {
this.layouts[LaouytType.MAIN] = this.dashboardUtils.createDefaultLayoutData();
if (!this.layouts[LayoutType.MAIN]) {
this.layouts[LayoutType.MAIN] = this.dashboardUtils.createDefaultLayoutData();
}
if (!this.layouts[LaouytType.RIGHT]) {
this.layouts[LaouytType.RIGHT] = this.dashboardUtils.createDefaultLayoutData();
if (!this.layouts[LayoutType.RIGHT]) {
this.layouts[LayoutType.RIGHT] = this.dashboardUtils.createDefaultLayoutData();
}
this.layoutsFormGroup.get('leftWidthPercentage').valueChanges.subscribe((value) => this.layoutControlChange('rightWidthPercentage', value));
@ -134,36 +146,38 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
for (const l of Object.keys(this.layoutsFormGroup.controls)) {
const control = this.layoutsFormGroup.controls[l];
if (!control.value) {
if (this.layouts[l]) {
delete this.layouts[l];
}
}
}
delete this.layouts.main.gridSettings.layoutDimension;
delete this.layouts.right.gridSettings.layoutDimension;
if (this.layoutsFormGroup.value.right) {
const formValues = this.layoutsFormGroup.value;
const widthType = formValues.type;
(this.layouts.layoutDimension as any) = {
const layoutDimension: LayoutDimension = {
type: widthType
}
};
if (widthType === LayoutWidthType.PERCENTAGE) {
this.layouts.layoutDimension.leftWidthPercentage = formValues.leftWidthPercentage;
layoutDimension.leftWidthPercentage = formValues.leftWidthPercentage;
this.layouts.main.gridSettings.layoutDimension = layoutDimension;
} else {
this.layouts.layoutDimension.fixedWidth = formValues.fixedWidth;
this.layouts.layoutDimension.fixedLayout = formValues.fixedLayout;
layoutDimension.fixedWidth = formValues.fixedWidth;
layoutDimension.fixedLayout = formValues.fixedLayout;
if (formValues.fixedLayout === LayoutType.MAIN) {
this.layouts.main.gridSettings.layoutDimension = layoutDimension;
} else {
this.layouts.right.gridSettings.layoutDimension = layoutDimension;
}
}
}
this.dialogRef.close(this.layouts);
}
buttonStyle(layout: DashboardLayoutId): { maxWidth: string } {
if (this.layoutsFormGroup.value.type && this.layoutsFormGroup.value.right) {
if (this.layoutsFormGroup.value.type !== LayoutWidthType.FIXED) {
if (layout === LaouytType.MAIN) {
return { maxWidth: this.layoutsFormGroup.value.leftWidthPercentage + "%" };
} else {
return { maxWidth: (100 - this.layoutsFormGroup.value.leftWidthPercentage) + "%" };
}
} else {
return { maxWidth: '100%' };
}
buttonFlexValue(): number {
if (this.layoutsFormGroup.get('right').value && this.layoutsFormGroup.value.type !== LayoutWidthType.FIXED) {
return this.layoutsFormGroup.get('leftWidthPercentage').value;
}
}

4
ui-ngx/src/app/shared/models/dashboard.models.ts
View File

@ -55,6 +55,7 @@ export interface GridSettings {
autoFillHeight?: boolean;
mobileAutoFillHeight?: boolean;
mobileRowHeight?: number;
layoutDimension?: LayoutDimension;
[key: string]: any;
}
@ -80,7 +81,8 @@ export declare type DashboardLayoutId = 'main' | 'right';
export declare type LayoutType = 'percentage' | 'fixed';
export declare type DashboardStateLayouts = {[key in DashboardLayoutId | 'layoutDimension']?: DashboardLayout & LayoutDimension };
// export declare type DashboardStateLayouts = {[key in DashboardLayoutId | 'layoutDimension']?: DashboardLayout & LayoutDimension };
export declare type DashboardStateLayouts = {[key in DashboardLayoutId]?: DashboardLayout };
export declare type DashboardLayoutsInfo = {[key in DashboardLayoutId]?: DashboardLayoutInfo};