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

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

@ -287,35 +287,27 @@ export class DashboardUtilsService {
let addedCount = 0; let addedCount = 0;
let removedCount = 0; let removedCount = 0;
for (const l of Object.keys(state.layouts)) { for (const l of Object.keys(state.layouts)) {
if (!newLayouts[l] && l !== 'layoutDimension') { removedCount++;
removedCount++;
}
} }
for (const l of Object.keys(newLayouts)) { for (const l of Object.keys(newLayouts)) {
if (!state.layouts[l] && l !== 'layoutDimension') { addedCount++;
addedCount++;
}
} }
state.layouts = newLayouts; state.layouts = newLayouts;
const layoutsCount = Object.keys(state.layouts).length; const layoutsCount = Object.keys(state.layouts).length;
let newColumns; let newColumns;
if (addedCount) { if (addedCount) {
for (const l of Object.keys(state.layouts)) { for (const l of Object.keys(state.layouts)) {
if (l !== 'layoutDimension') { newColumns = state.layouts[l].gridSettings.columns * (layoutsCount - addedCount) / layoutsCount;
newColumns = state.layouts[l].gridSettings.columns * (layoutsCount - addedCount) / layoutsCount; if (newColumns > 0) {
if (newColumns > 0) { state.layouts[l].gridSettings.columns = newColumns;
state.layouts[l].gridSettings.columns = newColumns;
}
} }
} }
} }
if (removedCount) { if (removedCount) {
for (const l of Object.keys(state.layouts)) { for (const l of Object.keys(state.layouts)) {
if (l !== 'layoutDimension') { newColumns = state.layouts[l].gridSettings.columns * (layoutsCount + removedCount) / layoutsCount;
newColumns = state.layouts[l].gridSettings.columns * (layoutsCount + removedCount) / layoutsCount; if (newColumns > 0) {
if (newColumns > 0) { state.layouts[l].gridSettings.columns = newColumns;
state.layouts[l].gridSettings.columns = newColumns;
}
} }
} }
} }
@ -339,20 +331,18 @@ export class DashboardUtilsService {
if (state) { if (state) {
const result: DashboardLayoutsInfo = {}; const result: DashboardLayoutsInfo = {};
for (const l of Object.keys(state.layouts)) { for (const l of Object.keys(state.layouts)) {
if (l !== 'layoutDimension') { const layout: DashboardLayout = state.layouts[l];
const layout: DashboardLayout = state.layouts[l]; if (layout) {
if (layout) { result[l] = {
result[l] = { widgetIds: [],
widgetIds: [], widgetLayouts: {},
widgetLayouts: {}, gridSettings: {}
gridSettings: {} } as DashboardLayoutInfo;
} as DashboardLayoutInfo; for (const id of Object.keys(layout.widgets)) {
for (const id of Object.keys(layout.widgets)) { result[l].widgetIds.push(id);
result[l].widgetIds.push(id);
}
result[l].widgetLayouts = layout.widgets;
result[l].gridSettings = layout.gridSettings;
} }
result[l].widgetLayouts = layout.widgets;
result[l].gridSettings = layout.gridSettings;
} }
} }
return result; return result;

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

@ -43,7 +43,7 @@ import {
DashboardLayoutsInfo, DashboardLayoutsInfo,
DashboardState, DashboardState,
DashboardStateLayouts, DashboardStateLayouts,
GridSettings, GridSettings, LayoutDimension,
WidgetLayout WidgetLayout
} from '@app/shared/models/dashboard.models'; } from '@app/shared/models/dashboard.models';
import { WINDOW } from '@core/services/window.service'; 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 cssjs from '@core/css/css';
import { DOCUMENT } from '@angular/common'; import { DOCUMENT } from '@angular/common';
import { IAliasController } from '@core/api/widget-api.models'; 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 // @dynamic
@Component({ @Component({
@ -267,8 +267,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
ctrl: null, ctrl: null,
dashboardCtrl: this dashboardCtrl: this
} }
}, }
layoutDimension: null
}; };
addWidgetFabButtons: FooterFabButtons = { addWidgetFabButtons: FooterFabButtons = {
@ -653,15 +652,15 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
} }
public mainLayoutWidth(): string { public mainLayoutWidth(): string {
if (this.isEditingWidget && this.editingLayoutCtx.id === LaouytType.MAIN) { if (this.isEditingWidget && this.editingLayoutCtx.id === LayoutType.MAIN) {
return '100%'; return '100%';
} else { } 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 { public mainLayoutHeight(): string {
if (!this.isEditingWidget || this.editingLayoutCtx.id === LaouytType.MAIN) { if (!this.isEditingWidget || this.editingLayoutCtx.id === LayoutType.MAIN) {
return '100%'; return '100%';
} else { } else {
return '0px'; return '0px';
@ -669,18 +668,27 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
} }
public rightLayoutWidth(): string { public rightLayoutWidth(): string {
if (this.isEditingWidget && this.editingLayoutCtx.id === LaouytType.RIGHT) { if (this.isEditingWidget && this.editingLayoutCtx.id === LayoutType.RIGHT) {
return '100%'; return '100%';
} else { } else {
return this.isMobile ? '100%' : this.calculateWidth(LaouytType.RIGHT); return this.isMobile ? '100%' : this.calculateWidth(LayoutType.RIGHT);
} }
} }
private calculateWidth(layout: DashboardLayoutId): string { 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) {
if (layoutDimension.type === LayoutWidthType.PERCENTAGE) { if (layoutDimension.type === LayoutWidthType.PERCENTAGE) {
if (layout === LaouytType.RIGHT) { if (layout === LayoutType.RIGHT) {
return (100 - layoutDimension.leftWidthPercentage) + '%'; return (100 - layoutDimension.leftWidthPercentage) + '%';
} else { } else {
return layoutDimension.leftWidthPercentage + '%'; return layoutDimension.leftWidthPercentage + '%';
@ -911,7 +919,6 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
} }
for (const l of Object.keys(this.layouts)) { for (const l of Object.keys(this.layouts)) {
const layout: DashboardPageLayout = this.layouts[l]; const layout: DashboardPageLayout = this.layouts[l];
if(l !== 'layoutDimension') {
if (layoutsData[l]) { if (layoutsData[l]) {
layout.show = true; layout.show = true;
const layoutInfo: DashboardLayoutInfo = layoutsData[l]; const layoutInfo: DashboardLayoutInfo = layoutsData[l];
@ -920,7 +927,6 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
layout.show = false; layout.show = false;
this.updateLayout(layout, {widgetIds: [], widgetLayouts: {}, gridSettings: null}); this.updateLayout(layout, {widgetIds: [], widgetLayouts: {}, gridSettings: null});
} }
}
} }
} }
@ -968,11 +974,9 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
private resetHighlight() { private resetHighlight() {
for (const l of Object.keys(this.layouts)) { for (const l of Object.keys(this.layouts)) {
if(l !== 'layoutDimension' ) { if (this.layouts[l].layoutCtx) {
if (this.layouts[l].layoutCtx) { if (this.layouts[l].layoutCtx.ctrl) {
if (this.layouts[l].layoutCtx.ctrl) { this.layouts[l].layoutCtx.ctrl.resetHighlight();
this.layouts[l].layoutCtx.ctrl.resetHighlight();
}
} }
} }
} }

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

@ -18,7 +18,6 @@ import {
Dashboard, Dashboard,
DashboardLayoutId, DashboardLayoutId,
GridSettings, GridSettings,
LayoutDimension,
WidgetLayouts WidgetLayouts
} from '@app/shared/models/dashboard.models'; } from '@app/shared/models/dashboard.models';
import { Widget, WidgetPosition } from '@app/shared/models/widget.models'; import { Widget, WidgetPosition } from '@app/shared/models/widget.models';
@ -74,7 +73,7 @@ export interface DashboardPageLayout {
layoutCtx: DashboardPageLayoutContext; 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> { 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" FIXED = "fixed"
} }
export enum LaouytType { export enum LayoutType {
MAIN = "main", MAIN = "main",
RIGHT = "right", RIGHT = "right",
LEFT = "left" 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>
<div fxLayout="column" fxLayoutAlign="start center" fxLayoutGap="8px"> <div fxLayout="column" fxLayoutAlign="start center" fxLayoutGap="8px">
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" style="width: 100%;"> <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" style="width: 100%;">
<button fxFlex <button fxFlex="{{buttonFlexValue()}}"
type="button" type="button"
mat-raised-button mat-raised-button
color="primary" color="primary"
class="tb-layout-button" class="tb-layout-button"
(click)="openLayoutSettings('main')" (click)="openLayoutSettings(LayoutType.MAIN)"
[ngStyle]="buttonStyle('main')"> >
<span >{{ (layoutsFormGroup.value.right ? 'layout.left' :'layout.main') | translate }}</span> <span >{{ (layoutsFormGroup.value.right ? 'layout.left' : 'layout.main') | translate }}</span>
</button> </button>
<button fxFlex [fxShow]="layoutsFormGroup.get('right').value" <button fxFlex
[fxShow]="layoutsFormGroup.get(LayoutType.RIGHT).value"
type="button" type="button"
mat-raised-button mat-raised-button
color="primary" color="primary"
class="tb-layout-button" class="tb-layout-button"
(click)="openLayoutSettings('right')" (click)="openLayoutSettings(LayoutType.RIGHT)">
[ngStyle]="buttonStyle('right')">
<span >{{ 'layout.right' | translate }}</span> <span >{{ 'layout.right' | translate }}</span>
</button> </button>
</div> </div>
<div fxLayout="column" <div fxLayout="column"
fxLayoutAlign="start center" fxLayoutAlign="start center"
fxLayoutGap="8px" fxLayoutGap="8px"
[fxShow]="layoutsFormGroup.get('right').value"> [fxShow]="layoutsFormGroup.get(LayoutType.RIGHT).value">
<mat-button-toggle-group aria-label="Select width value type" <mat-button-toggle-group aria-label="Select width value type"
formControlName="type" formControlName="type"
style="width: 100%;"> style="width: 100%;">
<mat-button-toggle style="width: 50%;" value="percentage"> <mat-button-toggle fxFlex value="percentage">
{{ 'layout.percentage-width' | translate }} {{ 'layout.percentage-width' | translate }}
</mat-button-toggle> </mat-button-toggle>
<mat-button-toggle style="width: 50%;" value="fixed"> <mat-button-toggle fxFlex value="fixed">
{{ 'layout.fixed-width' | translate }} {{ 'layout.fixed-width' | translate }}
</mat-button-toggle> </mat-button-toggle>
</mat-button-toggle-group> </mat-button-toggle-group>
<div [fxShow]="layoutsFormGroup.get('type').value === 'percentage'"> <div [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE">
<div <div
fxLayoutAlign="start center" fxLayoutAlign="start center"
fxLayoutGap="8px" fxLayoutGap="8px"
@ -83,9 +83,10 @@
max="90" max="90"
formControlName="leftWidthPercentage" formControlName="leftWidthPercentage"
thumbLabel thumbLabel
[value]="layoutsFormGroup.value.leftWidthPercentage" [value]="layoutsFormGroup.get('leftWidthPercentage').value"
[displayWith]="formatSliderTooltipLabel" [displayWith]="formatSliderTooltipLabel">
></mat-slider> </mat-slider>
</div> </div>
<div fxLayout="column"> <div fxLayout="column">
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" style="width: 100%;"> <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" style="width: 100%;">
@ -93,9 +94,9 @@
<mat-label>{{ 'layout.left-width' | translate }}</mat-label> <mat-label>{{ 'layout.left-width' | translate }}</mat-label>
<input matInput <input matInput
formControlName="leftWidthPercentage" formControlName="leftWidthPercentage"
[value]="layoutsFormGroup.value.leftWidthPercentage" [value]="layoutsFormGroup.get('leftWidthPercentage').value"
type="number" type="number"
step="any" step="1"
min="10" min="10"
max="90"> max="90">
</mat-form-field> </mat-form-field>
@ -104,16 +105,15 @@
<input matInput <input matInput
formControlName="rightWidthPercentage" formControlName="rightWidthPercentage"
type="number" type="number"
step="any" step="1"
min="10" min="10"
max="90"> max="90">
</mat-form-field> </mat-form-field>
</div> </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> </div>
<div [fxShow]="layoutsFormGroup.get('type').value === 'fixed'" <div [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.FIXED"
style="width: 100%;"
fxLayout="column" fxLayout="column"
fxLayoutAlign="start center"> fxLayoutAlign="start center">
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" class="tb-layout-fixed-container"> <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" class="tb-layout-fixed-container">
@ -137,12 +137,12 @@
<input matInput <input matInput
formControlName="fixedWidth" formControlName="fixedWidth"
type="number" type="number"
step="any" step="1"
min="150" min="150"
max="1700" max="1700"
required> required>
</mat-form-field> </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> </div>
</div> </div>

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

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

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