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

UI: Refactoring code

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2022-09-12 15:52:27 +03:00
parent b384c73119
commit 32ce3d08a7
2 changed files with 18 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -49,7 +49,7 @@
#tooltip="matTooltip" #tooltip="matTooltip"
matTooltip="" matTooltip=""
matTooltipPosition="below"> matTooltipPosition="below">
<div fxLayout="column" fxLayoutAlign="start center" fxFlex="{{ buttonFlexValue() }}" class="tb-layout-preview-container-main"> <div fxLayout="column" fxLayoutAlign="start center" [fxFlex]="buttonFlexValue()" class="tb-layout-preview-container-main">
<button mat-icon-button <button mat-icon-button
type="button" type="button"
matTooltip="{{ 'dashboard.layout-settings' | translate }}" matTooltip="{{ 'dashboard.layout-settings' | translate }}"
@ -126,7 +126,6 @@
max="90" max="90"
required> required>
<input [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.FIXED" <input [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.FIXED"
*ngIf="layoutsFormGroup.get('fixedLayout').value === 'right'"
formControlName="fixedWidth" formControlName="fixedWidth"
type="number" type="number"
step="1" step="1"

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

@ -41,7 +41,7 @@ import {
} from '@home/components/dashboard-page/dashboard-settings-dialog.component'; } from '@home/components/dashboard-page/dashboard-settings-dialog.component';
import { LayoutWidthType } from '@home/components/dashboard-page/layout/layout.models'; import { LayoutWidthType } from '@home/components/dashboard-page/layout/layout.models';
import { Subscription } from 'rxjs'; import { Subscription } from 'rxjs';
import { MatTooltip } from "@angular/material/tooltip"; import { MatTooltip } from '@angular/material/tooltip';
export interface ManageDashboardLayoutsDialogData { export interface ManageDashboardLayoutsDialogData {
layouts: DashboardStateLayouts; layouts: DashboardStateLayouts;
@ -56,23 +56,23 @@ export interface ManageDashboardLayoutsDialogData {
export class ManageDashboardLayoutsDialogComponent extends DialogComponent<ManageDashboardLayoutsDialogComponent, DashboardStateLayouts> export class ManageDashboardLayoutsDialogComponent extends DialogComponent<ManageDashboardLayoutsDialogComponent, DashboardStateLayouts>
implements ErrorStateMatcher { implements ErrorStateMatcher {
@ViewChild('tooltip') tooltip: MatTooltip; @ViewChild('tooltip', {static: true}) tooltip: MatTooltip;
layoutsFormGroup: FormGroup; layoutsFormGroup: FormGroup;
layouts: DashboardStateLayouts;
LayoutWidthType = LayoutWidthType; LayoutWidthType = LayoutWidthType;
subscriptions: Array<Subscription> = []; private readonly layouts: DashboardStateLayouts;
submitted = false; private subscriptions: Array<Subscription> = [];
private submitted = false;
constructor(protected store: Store<AppState>, constructor(protected store: Store<AppState>,
protected router: Router, protected router: Router,
@Inject(MAT_DIALOG_DATA) public data: ManageDashboardLayoutsDialogData, @Inject(MAT_DIALOG_DATA) private data: ManageDashboardLayoutsDialogData,
@SkipSelf() private errorStateMatcher: ErrorStateMatcher, @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
public dialogRef: MatDialogRef<ManageDashboardLayoutsDialogComponent, DashboardStateLayouts>, protected dialogRef: MatDialogRef<ManageDashboardLayoutsDialogComponent, DashboardStateLayouts>,
private fb: FormBuilder, private fb: FormBuilder,
private utils: UtilsService, private utils: UtilsService,
private dashboardUtils: DashboardUtilsService, private dashboardUtils: DashboardUtilsService,
@ -128,7 +128,7 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
fixedLayout: this.layouts.main.gridSettings.layoutDimension.fixedLayout, fixedLayout: this.layouts.main.gridSettings.layoutDimension.fixedLayout,
type: LayoutWidthType.FIXED, type: LayoutWidthType.FIXED,
fixedWidth: this.layouts.main.gridSettings.layoutDimension.fixedWidth, fixedWidth: this.layouts.main.gridSettings.layoutDimension.fixedWidth,
sliderFixed: this.layouts.right.gridSettings.layoutDimension.fixedWidth sliderFixed: this.layouts.main.gridSettings.layoutDimension.fixedWidth
}, {emitEvent: false}); }, {emitEvent: false});
} else { } else {
const leftWidthPercentage: number = Number(this.layouts.main.gridSettings.layoutDimension.leftWidthPercentage); const leftWidthPercentage: number = Number(this.layouts.main.gridSettings.layoutDimension.leftWidthPercentage);
@ -157,7 +157,7 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
this.layoutsFormGroup.get('sliderFixed').valueChanges this.layoutsFormGroup.get('sliderFixed').valueChanges
.subscribe( .subscribe(
(value) => { (value) => {
this.layoutsFormGroup.get('fixedWidth').patchValue(value) this.layoutsFormGroup.get('fixedWidth').patchValue(value);
} }
)); ));
this.subscriptions.push( this.subscriptions.push(
@ -180,7 +180,8 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
this.layoutsFormGroup.get('fixedWidth').valueChanges this.layoutsFormGroup.get('fixedWidth').valueChanges
.subscribe( .subscribe(
(value) => { (value) => {
this.showTooltip(this.layoutsFormGroup.get('fixedWidth'), LayoutWidthType.FIXED, this.layoutsFormGroup.get('fixedLayout').value); this.showTooltip(this.layoutsFormGroup.get('fixedWidth'), LayoutWidthType.FIXED,
this.layoutsFormGroup.get('fixedLayout').value);
this.layoutsFormGroup.get('sliderFixed').setValue(value, {emitEvent: false}); this.layoutsFormGroup.get('sliderFixed').setValue(value, {emitEvent: false});
} }
)); ));
@ -302,7 +303,7 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
} }
} }
private showTooltip(control: AbstractControl, layoutType: LayoutWidthType, layoutSide: string): void { private showTooltip(control: AbstractControl, layoutType: LayoutWidthType, layoutSide: DashboardLayoutId): void {
if (control.errors) { if (control.errors) {
let message: string; let message: string;
const unit = layoutType === LayoutWidthType.FIXED ? 'px' : '%'; const unit = layoutType === LayoutWidthType.FIXED ? 'px' : '%';
@ -318,9 +319,9 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
} }
} }
} else if (control.errors.min) { } else if (control.errors.min) {
message = this.translate.instant('layout.value-min-error', {min: control.errors.min.min, unit: unit}); message = this.translate.instant('layout.value-min-error', {min: control.errors.min.min, unit});
} else if (control.errors.max) { } else if (control.errors.max) {
message = this.translate.instant('layout.value-max-error', {max: control.errors.max.max, unit: unit}); message = this.translate.instant('layout.value-max-error', {max: control.errors.max.max, unit});
} }
if (layoutSide === 'main') { if (layoutSide === 'main') {
@ -352,12 +353,8 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
} }
} }
showPreviewInputs(side: string): boolean { showPreviewInputs(side: DashboardLayoutId): boolean {
const formValues = this.layoutsFormGroup.value; const formValues = this.layoutsFormGroup.value;
return formValues.right && return formValues.right && (formValues.type === LayoutWidthType.PERCENTAGE || formValues.fixedLayout === side);
(
formValues.type === LayoutWidthType.PERCENTAGE ||
(formValues.fixedLayout === side && formValues.type === LayoutWidthType.FIXED)
);
} }
} }