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

UI: Refactoring code

pull/6374/head
Vladyslav_Prykhodko 4 years ago
parent
3f3c90924f
commit
00a56bf6cd
8 changed files with 246 additions and 226 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. 48
      ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
  2. 7
      ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts
  3. 4
      ui-ngx/src/app/modules/home/components/dashboard-page/layout/layout.models.ts
  4. 272
      ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html
  5. 23
      ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss
  6. 111
      ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts
  7. 4
      ui-ngx/src/app/modules/home/components/home-components.module.ts
  8. 3
      ui-ngx/src/app/shared/shared.module.ts

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

@ -140,7 +140,7 @@ import { MatButton } from '@angular/material/button';
import { VersionControlComponent } from '@home/components/vc/version-control.component';
import { TbPopoverService } from '@shared/components/popover.service';
import { tap } from 'rxjs/operators';
import { LayoutWidthType } from "@home/components/dashboard-page/layout/layout.models";
import { LayoutWidthType } from '@home/components/dashboard-page/layout/layout.models';
// @dynamic
@Component({
@ -685,34 +685,34 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
}
private calculateWidth(layout: DashboardLayoutId): string {
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;
}
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 === 'right') {
return (100 - layoutDimension.leftWidthPercentage) + '%';
} else {
return layoutDimension.leftWidthPercentage + '%';
}
}
if (layoutDimension) {
if (layoutDimension.type === LayoutWidthType.PERCENTAGE) {
if (layout === 'right') {
return (100 - layoutDimension.leftWidthPercentage) + '%';
} else {
if (layoutDimension.fixedLayout === layout) {
return layoutDimension.fixedWidth + 'px';
} else {
const layoutWidth = this.dashboardContainer.nativeElement.getBoundingClientRect().width - layoutDimension.fixedWidth;
return layoutWidth + 'px';
}
return layoutDimension.leftWidthPercentage + '%';
}
} else {
return '50%';
if (layoutDimension.fixedLayout === layout) {
return layoutDimension.fixedWidth + 'px';
} else {
const layoutWidth = this.dashboardContainer.nativeElement.getBoundingClientRect().width - layoutDimension.fixedWidth;
return layoutWidth + 'px';
}
}
} else {
return '50%';
}
}
public rightLayoutHeight(): string {

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

@ -14,12 +14,7 @@
/// limitations under the License.
///
import {
Dashboard,
DashboardLayoutId,
GridSettings,
WidgetLayouts
} from '@app/shared/models/dashboard.models';
import { Dashboard, DashboardLayoutId, GridSettings, WidgetLayouts } from '@app/shared/models/dashboard.models';
import { Widget, WidgetPosition } from '@app/shared/models/widget.models';
import { Timewindow } from '@shared/models/time/time.models';
import { IAliasController, IStateController } from '@core/api/widget-api.models';

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

@ -24,7 +24,7 @@ export interface ILayoutController {
}
export enum LayoutWidthType {
PERCENTAGE = "percentage",
FIXED = "fixed"
PERCENTAGE = 'percentage',
FIXED = 'fixed'
}

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

@ -25,167 +25,147 @@
<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 style="min-width: 300px;">
<fieldset [disabled]="isLoading$ | async" fxLayout="column" fxLayoutGap="8px">
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<mat-checkbox fxFlex formControlName="main">
{{ (layoutsFormGroup.value.right ? 'layout.left' : 'layout.main') | translate }}
</mat-checkbox>
<mat-checkbox fxFlex formControlName="right">
{{ 'layout.right' | translate }}
</mat-checkbox>
<div mat-dialog-content fxLayout="column" fxLayoutGap="8px" style="min-width: 300px;">
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<mat-checkbox fxFlex formControlName="main">
{{ (layoutsFormGroup.value.right ? 'layout.left' : 'layout.main') | translate }}
</mat-checkbox>
<mat-checkbox fxFlex formControlName="right">
{{ 'layout.right' | translate }}
</mat-checkbox>
</div>
<div fxLayout="column" fxLayoutGap="8px">
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="2%">
<button fxFlex="{{buttonFlexValue()}}"
type="button"
mat-raised-button
color="primary"
class="tb-layout-button"
(click)="openLayoutSettings('main')"
>
<span >{{ (layoutsFormGroup.value.right ? 'layout.left' : 'layout.main') | translate }}</span>
</button>
<button fxFlex
[fxShow]="layoutsFormGroup.get('right').value"
type="button"
mat-raised-button
color="primary"
class="tb-layout-button"
(click)="openLayoutSettings('right')">
<span >{{ 'layout.right' | translate }}</span>
</button>
</div>
<div fxLayout="column" fxLayoutAlign="start center" fxLayoutGap="8px">
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="2%" style="width: 100%;">
<button fxFlex="{{buttonFlexValue()}}"
type="button"
mat-raised-button
color="primary"
class="tb-layout-button"
(click)="openLayoutSettings('main')"
>
<span >{{ (layoutsFormGroup.value.right ? 'layout.left' : 'layout.main') | translate }}</span>
</button>
<button fxFlex
[fxShow]="layoutsFormGroup.get('right').value"
type="button"
mat-raised-button
color="primary"
class="tb-layout-button"
(click)="openLayoutSettings('right')">
<span >{{ 'layout.right' | translate }}</span>
</button>
</div>
<div fxLayout="column"
fxLayoutAlign="start center"
fxLayoutGap="8px"
style="width: 100%;"
[fxShow]="layoutsFormGroup.get('right').value">
<mat-button-toggle-group aria-label="Select width value type"
formControlName="type"
style="width: 100%;">
<mat-button-toggle fxFlex value="percentage">
{{ 'layout.percentage-width' | translate }}
</mat-button-toggle>
<mat-button-toggle fxFlex value="fixed">
{{ 'layout.fixed-width' | translate }}
</mat-button-toggle>
</mat-button-toggle-group>
<div [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE" style="width: 100%;">
<div fxLayoutAlign="start center"
fxLayoutGap="8px"
style="width: 100%;">
<mat-slider min="10"
step="1"
style="width: 100%;"
max="90"
formControlName="leftWidthPercentage"
thumbLabel
[value]="layoutsFormGroup.get('leftWidthPercentage').value"
[displayWith]="formatSliderTooltipLabel">
</mat-slider>
</div>
<div fxFlex fxLayout="column" style="width: 100%;">
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" style="width: 100%;">
<mat-form-field fxFlex class="mat-block">
<mat-label>{{ 'layout.left-width' | translate }}</mat-label>
<input matInput
formControlName="leftWidthPercentage"
[value]="layoutsFormGroup.get('leftWidthPercentage').value"
type="number"
step="1"
min="10"
max="90">
<mat-error *ngIf="layoutsFormGroup.get('leftWidthPercentage').hasError('required')">
{{ 'layout.left-width-percentage-required' | translate }}
</mat-error>
<mat-error *ngIf="layoutsFormGroup.get('leftWidthPercentage').hasError('max')">
{{ 'layout.value-max-error' | translate: { max: 90 } }}
</mat-error>
<mat-error *ngIf="layoutsFormGroup.get('leftWidthPercentage').hasError('min')">
{{ 'layout.value-min-error' | translate: { min: 10 } }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label>{{ 'layout.right-width' | translate }}</mat-label>
<input matInput
formControlName="rightWidthPercentage"
type="number"
step="1"
min="10"
max="90">
<mat-error *ngIf="layoutsFormGroup.get('rightWidthPercentage').hasError('required')">
{{ 'layout.right-width-percentage-required' | translate }}
</mat-error>
<mat-error *ngIf="layoutsFormGroup.get('rightWidthPercentage').hasError('max')">
{{ 'layout.value-max-error' | translate: { max: 90 } }}
</mat-error>
<mat-error *ngIf="layoutsFormGroup.get('rightWidthPercentage').hasError('min')">
{{ 'layout.value-min-error' | translate: { min: 10 } }}
</mat-error>
</mat-form-field>
</div>
<label class="tb-hint">{{'layout.layout-min-max' | translate: { min: 10, max: 90, units: "%" } }}</label>
</div>
<div fxLayout="column" fxLayoutGap="8px" [fxShow]="layoutsFormGroup.get('right').value">
<mat-button-toggle-group aria-label="Select width value type"
formControlName="type">
<mat-button-toggle fxFlex value="percentage">
{{ 'layout.percentage-width' | translate }}
</mat-button-toggle>
<mat-button-toggle fxFlex value="fixed">
{{ 'layout.fixed-width' | translate }}
</mat-button-toggle>
</mat-button-toggle-group>
<div [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE">
<mat-slider min="10"
step="1"
max="90"
style="width: 100%;"
formControlName="sliderPercentage"
thumbLabel
[displayWith]="formatSliderTooltipLabel">
</mat-slider>
<div fxLayout="row" fxLayoutGap="8px">
<mat-form-field fxFlex class="mat-block">
<mat-label>{{ 'layout.left-width' | translate }}</mat-label>
<input matInput
formControlName="leftWidthPercentage"
type="number"
step="1"
min="10"
max="90">
<mat-error *ngIf="layoutsFormGroup.get('leftWidthPercentage').hasError('required')">
{{ 'layout.left-width-percentage-required' | translate }}
</mat-error>
<mat-error *ngIf="layoutsFormGroup.get('leftWidthPercentage').hasError('max')">
{{ 'layout.value-max-error' | translate: { max: 90 } }}
</mat-error>
<mat-error *ngIf="layoutsFormGroup.get('leftWidthPercentage').hasError('min')">
{{ 'layout.value-min-error' | translate: { min: 10 } }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label>{{ 'layout.right-width' | translate }}</mat-label>
<input matInput
formControlName="rightWidthPercentage"
type="number"
step="1"
min="10"
max="90">
<mat-error *ngIf="layoutsFormGroup.get('rightWidthPercentage').hasError('required')">
{{ 'layout.right-width-percentage-required' | translate }}
</mat-error>
<mat-error *ngIf="layoutsFormGroup.get('rightWidthPercentage').hasError('max')">
{{ 'layout.value-max-error' | translate: { max: 90 } }}
</mat-error>
<mat-error *ngIf="layoutsFormGroup.get('rightWidthPercentage').hasError('min')">
{{ 'layout.value-min-error' | translate: { min: 10 } }}
</mat-error>
</mat-form-field>
</div>
<div [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.FIXED"
fxLayout="column"
style="width: 100%;"
fxLayoutAlign="start center">
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" class="tb-layout-fixed-container" style="width: 100%;">
<label>{{ 'layout.pick-fixed-side' | translate }}</label>
<mat-radio-group aria-label="Select side"
formControlName="fixedLayout"
fxLayout="row"
fxLayoutAlign="start center"
fxLayoutGap="8px">
<mat-radio-button value="main">
{{ 'layout.left' | translate }}
</mat-radio-button>
<mat-radio-button value="right">
{{ 'layout.right' | translate }}
</mat-radio-button>
</mat-radio-group>
</div>
<div fxLayout="column" style="width: 100%; min-width: 368px;">
<mat-form-field class="mat-block" style="width: 100%;">
<mat-label>{{ 'layout.layout-fixed-width' | translate }}</mat-label>
<input matInput
formControlName="fixedWidth"
type="number"
step="1"
min="150"
max="1700">
<mat-error *ngIf="layoutsFormGroup.get('fixedWidth').hasError('required')">
{{ 'layout.layout-fixed-width-required' | translate }}
</mat-error>
<mat-error *ngIf="layoutsFormGroup.get('fixedWidth').hasError('max')">
{{ 'layout.value-max-error' | translate: { max: 1700 } }}
</mat-error>
<mat-error *ngIf="layoutsFormGroup.get('fixedWidth').hasError('min')">
{{ 'layout.value-min-error' | translate: { min: 150 } }}
</mat-error>
</mat-form-field>
<label class="tb-hint">{{ 'layout.layout-min-max' | translate: {min: 150, max: 1700, units: "px" } }}</label>
</div>
<label [fxShow]="layoutsFormGroup.get('leftWidthPercentage').valid && layoutsFormGroup.get('rightWidthPercentage').valid" class="tb-hint tb-hint-group">
{{'layout.layout-min-max' | translate: { min: 10, max: 90, units: "%" } }}
</label>
</div>
<div [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.FIXED">
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" class="tb-layout-fixed-container">
<label>{{ 'layout.pick-fixed-side' | translate }}</label>
<mat-radio-group aria-label="Select side"
formControlName="fixedLayout"
fxLayout="row"
fxLayoutGap="8px">
<mat-radio-button value="main">
{{ 'layout.left' | translate }}
</mat-radio-button>
<mat-radio-button value="right">
{{ 'layout.right' | translate }}
</mat-radio-button>
</mat-radio-group>
</div>
<mat-form-field fxFlex class="mat-block" style="min-width: 368px;">
<mat-label>{{ 'layout.layout-fixed-width' | translate }}</mat-label>
<input matInput
formControlName="fixedWidth"
type="number"
step="1"
min="150"
max="1700">
<mat-hint>
{{ 'layout.layout-min-max' | translate: {min: 150, max: 1700, units: "px" } }}
</mat-hint>
<mat-error *ngIf="layoutsFormGroup.get('fixedWidth').hasError('required')">
{{ 'layout.layout-fixed-width-required' | translate }}
</mat-error>
<mat-error *ngIf="layoutsFormGroup.get('fixedWidth').hasError('max')">
{{ 'layout.value-max-error' | translate: { max: 1700 } }}
</mat-error>
<mat-error *ngIf="layoutsFormGroup.get('fixedWidth').hasError('min')">
{{ 'layout.value-min-error' | translate: { min: 150 } }}
</mat-error>
</mat-form-field>
</div>
</div>
</fieldset>
</div>
</div>
<div mat-dialog-actions fxLayoutAlign="end center">
<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) || layoutsFormGroup.invalid || !layoutsFormGroup.dirty">
[disabled]="layoutsFormGroup.invalid || !layoutsFormGroup.dirty">
{{ 'action.save' | translate }}
</button>
</div>

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

@ -14,8 +14,22 @@
* limitations under the License.
*/
:host {
::ng-deep .mat-slider-wrapper {
.tb-layout-fixed-container {
width: 100%;
min-width: 368px;
padding: 8px 8px 8px 0;
min-height: 48px;
}
.tb-hint-group {
padding: 0;
margin-top: -15px;
display: block;
}
}
:host ::ng-deep {
.mat-slider-wrapper {
.mat-slider-thumb-container {
.mat-slider-thumb-label {
width: 35px;
@ -23,11 +37,4 @@
}
}
}
.tb-layout-fixed-container {
width: 100%;
min-width: 368px;
padding: 8px 8px 8px 0;
min-height: 48px;
}
}

111
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 { Component, Inject, 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';
@ -31,8 +31,8 @@ import {
DashboardSettingsDialogComponent,
DashboardSettingsDialogData
} from '@home/components/dashboard-page/dashboard-settings-dialog.component';
import { LayoutWidthType } from "@home/components/dashboard-page/layout/layout.models";
import { Subscription } from "rxjs";
import { LayoutWidthType } from '@home/components/dashboard-page/layout/layout.models';
import { Subscription } from 'rxjs';
export interface ManageDashboardLayoutsDialogData {
layouts: DashboardStateLayouts;
@ -45,7 +45,7 @@ export interface ManageDashboardLayoutsDialogData {
styleUrls: ['./manage-dashboard-layouts-dialog.component.scss', '../../../components/dashboard/layout-button.scss']
})
export class ManageDashboardLayoutsDialogComponent extends DialogComponent<ManageDashboardLayoutsDialogComponent, DashboardStateLayouts>
implements OnInit, ErrorStateMatcher {
implements ErrorStateMatcher {
layoutsFormGroup: FormGroup;
@ -53,7 +53,7 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
LayoutWidthType = LayoutWidthType;
subscriptions: Array<Subscription>;
subscriptions: Array<Subscription> = [];
submitted = false;
@ -71,53 +71,90 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
this.layouts = this.data.layouts;
this.layoutsFormGroup = this.fb.group({
main: [{value: isDefined(this.layouts.main), disabled: true}, []],
right: [isDefined(this.layouts.right), []],
main: [{value: isDefined(this.layouts.main), disabled: true}],
right: [isDefined(this.layouts.right)],
sliderPercentage: [50],
leftWidthPercentage: [50, [Validators.min(10), Validators.max(90), Validators.required]],
rightWidthPercentage: [50, [Validators.min(10), Validators.max(90), Validators.required]],
type: [LayoutWidthType.PERCENTAGE, []],
type: [LayoutWidthType.PERCENTAGE],
fixedWidth: [150, [Validators.min(150), Validators.max(1700), Validators.required]],
fixedLayout: ['main', []]
}
);
this.subscriptions.push(
this.layoutsFormGroup.get('type').valueChanges.subscribe(
(value) => {
if (value === LayoutWidthType.FIXED) {
this.layoutsFormGroup.get('leftWidthPercentage').disable();
this.layoutsFormGroup.get('rightWidthPercentage').disable();
this.layoutsFormGroup.get('fixedWidth').enable();
this.layoutsFormGroup.get('fixedLayout').enable();
} else {
this.layoutsFormGroup.get('leftWidthPercentage').enable();
this.layoutsFormGroup.get('rightWidthPercentage').enable();
this.layoutsFormGroup.get('fixedWidth').disable();
this.layoutsFormGroup.get('fixedLayout').disable();
}
}
)
);
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);
this.layoutsFormGroup.patchValue({
fixedLayout: this.layouts.right.gridSettings.layoutDimension.fixedLayout,
type: LayoutWidthType.FIXED,
fixedWidth: this.layouts.right.gridSettings.layoutDimension.fixedWidth
}, {emitEvent: false});
} 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);
this.layoutsFormGroup.patchValue({
fixedLayout: this.layouts.main.gridSettings.layoutDimension.fixedLayout,
type: LayoutWidthType.FIXED,
fixedWidth: this.layouts.main.gridSettings.layoutDimension.fixedWidth
}, {emitEvent: false});
} 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));
this.layoutsFormGroup.patchValue({
leftWidthPercentage,
sliderPercentage: leftWidthPercentage,
rightWidthPercentage: 100 - Number(leftWidthPercentage)
}, {emitEvent: false});
}
}
}
if (!this.layouts['main']) {
this.layouts['main'] = this.dashboardUtils.createDefaultLayoutData();
if (!this.layouts.main) {
this.layouts.main = this.dashboardUtils.createDefaultLayoutData();
}
if (!this.layouts['right']) {
this.layouts['right'] = this.dashboardUtils.createDefaultLayoutData();
if (!this.layouts.right) {
this.layouts.right = this.dashboardUtils.createDefaultLayoutData();
}
const leftWidthPercentageSub = this.layoutsFormGroup.get('leftWidthPercentage').valueChanges
.subscribe((value) => this.layoutControlChange('rightWidthPercentage', value));
const rightWidthPercentageSub = this.layoutsFormGroup.get('rightWidthPercentage').valueChanges
.subscribe((value) => this.layoutControlChange('leftWidthPercentage', value));
this.subscriptions = [leftWidthPercentageSub, rightWidthPercentageSub];
}
ngOnInit(): void {
this.subscriptions.push(
this.layoutsFormGroup.get('sliderPercentage').valueChanges
.subscribe(
(value) => this.layoutsFormGroup.get('leftWidthPercentage').patchValue(value)
));
this.subscriptions.push(
this.layoutsFormGroup.get('leftWidthPercentage').valueChanges
.subscribe(
(value) => {
this.layoutControlChange('rightWidthPercentage', value);
}
));
this.subscriptions.push(
this.layoutsFormGroup.get('rightWidthPercentage').valueChanges
.subscribe(
(value) => {
this.layoutControlChange('leftWidthPercentage', value);
}
));
}
ngOnDestroy(): void {
for (let subscription of this.subscriptions) {
for (const subscription of this.subscriptions) {
subscription.unsubscribe();
}
}
@ -186,20 +223,20 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
}
buttonFlexValue(): number {
if (this.layoutsFormGroup.get('right').value && this.layoutsFormGroup.value.type !== LayoutWidthType.FIXED) {
return this.layoutsFormGroup.get('leftWidthPercentage').value - 1;
const formValues = this.layoutsFormGroup.value;
if (formValues.right && formValues.type !== LayoutWidthType.FIXED) {
return formValues.leftWidthPercentage - 1;
}
}
formatSliderTooltipLabel(value: number):string {
formatSliderTooltipLabel(value: number): string {
return `${value}|${100 - value}`;
}
layoutControlChange(key: string, value) {
const previousValue = this.layoutsFormGroup.get(key).value;
private layoutControlChange(key: string, value) {
const valueToSet = 100 - Number(value);
if (previousValue !== valueToSet) {
this.layoutsFormGroup.get(key).setValue(100 - Number(value));
}
this.layoutsFormGroup.get(key).setValue(valueToSet, {emitEvent: false});
this.layoutsFormGroup.get('sliderPercentage')
.setValue(key === 'leftWidthPercentage' ? valueToSet : Number(value), {emitEvent: false});
}
}

4
ui-ngx/src/app/modules/home/components/home-components.module.ts
View File

@ -17,7 +17,6 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '@app/shared/shared.module';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { AddEntityDialogComponent } from '@home/components/entity/add-entity-dialog.component';
import { EntitiesTableComponent } from '@home/components/entity/entities-table.component';
import { DetailsPanelComponent } from '@home/components/details-panel.component';
@ -314,8 +313,7 @@ import { AutoCommitSettingsComponent } from '@home/components/vc/auto-commit-set
SnmpDeviceProfileTransportModule,
StatesControllerModule,
DeviceCredentialsModule,
DeviceProfileCommonModule,
MatButtonToggleModule
DeviceProfileCommonModule
],
exports: [
EntitiesTableComponent,

3
ui-ngx/src/app/shared/shared.module.ts
View File

@ -26,6 +26,7 @@ import Flow from '@flowjs/flow.js';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
@ -295,6 +296,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
RouterModule,
TranslateModule,
MatButtonModule,
MatButtonToggleModule,
MatCheckboxModule,
MatIconModule,
MatCardModule,
@ -406,6 +408,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
WidgetsBundleSelectComponent,
ValueInputComponent,
MatButtonModule,
MatButtonToggleModule,
MatCheckboxModule,
MatIconModule,
MatCardModule,

Write Preview
Loading…
Cancel
Save