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

feature/6371: bug-fix and refactoring

Browse Source
This commit is contained in:
Dmitriymush 2022-09-20 18:09:25 +03:00
parent 7c917c8e73
commit d0c2e9e1cb
6 changed files with 102 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
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 { LayoutFixedSize, LayoutWidthType } from '@home/components/dashboard-page/layout/layout.models';
// @dynamic
@Component({
@ -703,11 +703,20 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
return layoutDimension.leftWidthPercentage + '%';
}
} else {
const dashboardWidth = this.dashboardContainer.nativeElement.getBoundingClientRect().width;
const minAvailableWidth = dashboardWidth - LayoutFixedSize.MIN;
if (layoutDimension.fixedLayout === layout) {
return layoutDimension.fixedWidth + 'px';
if (minAvailableWidth <= layoutDimension.fixedWidth) {
return minAvailableWidth + 'px';
} else {
const layoutWidth = this.dashboardContainer.nativeElement.getBoundingClientRect().width - layoutDimension.fixedWidth;
return layoutWidth + 'px';
return layoutDimension.fixedWidth + 'px';
}
} else {
if (minAvailableWidth <= layoutDimension.fixedWidth) {
return LayoutFixedSize.MIN + 'px';
} else {
return (dashboardWidth - layoutDimension.fixedWidth) + 'px';
}
}
}
} else {

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

@ -28,7 +28,7 @@
<section *ngIf="layoutCtx.widgets.isEmpty()" fxLayoutAlign="center center"
style="display: flex; z-index: 1; pointer-events: none;"
class="mat-headline tb-absolute-fill">
<span *ngIf="!isEdit">
<span *ngIf="!isEdit" style="text-align: center;">
{{'dashboard.no-widgets' | translate}}
</span>
<button mat-button *ngIf="isEdit && !widgetEditMode" class="tb-add-new-widget"

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

@ -28,3 +28,13 @@ export enum LayoutWidthType {
FIXED = 'fixed'
}
export enum LayoutPercentageSize {
MIN = 10,
MAX = 90
}
export enum LayoutFixedSize {
MIN = 150,
MAX = 4000
}

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

@ -49,7 +49,7 @@
#tooltip="matTooltip"
matTooltip=""
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
type="button"
matTooltip="{{ 'dashboard.layout-settings' | translate }}"
@ -57,7 +57,7 @@
(click)="openLayoutSettings('main')"
class="tb-layout-preview-element"
aria-label="Layout settings"
[ngClass]="layoutButtonTextAndClass('main', false)">
[ngClass]="layoutButtonClass('main')">
<mat-icon>settings</mat-icon>
</button>
<button fxFlex
@ -65,35 +65,32 @@
mat-raised-button
color="primary"
class="tb-layout-button"
[matTooltip]="layoutButtonTextAndClass('main', true)"
[matTooltip]="layoutButtonText('main')"
matTooltipPosition="above"
matTooltipClass="tb-layout-button-tooltip"
(click)="setFixedLayout('main')"
[ngClass]="layoutButtonTextAndClass('main', false)"
[ngStyle]="layoutsFormGroup.get('right').value ?
{'border-radius': '5px 0 0 5px;'} :
{'border-radius': '5px 5px 5px 5px;'}">
[ngClass]="layoutButtonClass('main', true)">
<span>{{ (layoutsFormGroup.value.right ? 'layout.left' : 'layout.main') | translate }}</span>
</button>
<div fxFlex class="tb-layout-preview-element tb-layout-preview-input" [fxShow]="showPreviewInputs('main')">
<input [fxShow]="layoutsFormGroup.get('type').value !== LayoutWidthType.FIXED"
<div fxFlex class="tb-layout-preview-element tb-layout-preview-input" *ngIf="showPreviewInputs('main')">
<input *ngIf="layoutsFormGroup.get('type').value !== layoutWidthType.FIXED"
formControlName="leftWidthPercentage"
type="number"
step="1"
min="10"
max="90"
min="{{ layoutPercentageSize.MIN }}"
max="{{ layoutPercentageSize.MAX }}"
required>
<input [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.FIXED"
*ngIf="layoutsFormGroup.get('fixedLayout').value === 'main'"
<input *ngIf="layoutsFormGroup.get('type').value === layoutWidthType.FIXED &&
layoutsFormGroup.get('fixedLayout').value === 'main'"
formControlName="fixedWidth"
type="number"
step="1"
min="150"
max="1700"
min="{{ layoutFixedSize.MIN }}"
max="{{ layoutFixedSize.MAX }}"
required>
</div>
</div>
<div fxLayout="column" fxLayoutAlign="start center" fxFlex [fxShow]="layoutsFormGroup.get('right').value" matTooltip="">
<div fxLayout="column" fxLayoutAlign="start center" fxFlex *ngIf="layoutsFormGroup.get('right').value" matTooltip="">
<button mat-icon-button
type="button"
matTooltip="{{ 'dashboard.layout-settings' | translate }}"
@ -101,56 +98,55 @@
(click)="openLayoutSettings('right')"
class="tb-layout-preview-element"
aria-label="Layout settings"
[ngClass]="layoutButtonTextAndClass('right', false)">
[ngClass]="layoutButtonClass('right')">
<mat-icon>settings</mat-icon>
</button>
<button fxFlex
type="button"
mat-raised-button
color="primary"
class="tb-layout-button"
[matTooltip]="layoutButtonTextAndClass('right', true)"
class="tb-layout-button tb-layout-button-right"
[matTooltip]="layoutButtonText('right')"
matTooltipPosition="above"
matTooltipClass="tb-layout-button-tooltip"
(click)="setFixedLayout('right')"
[ngClass]="layoutButtonTextAndClass('right', false)"
style="border-radius: 0 5px 5px 0;">
[ngClass]="layoutButtonClass('right')">
<span>{{ 'layout.right' | translate }}</span>
</button>
<div fxFlex class="tb-layout-preview-element tb-layout-preview-input" [fxShow]="showPreviewInputs('right')">
<input [fxShow]="layoutsFormGroup.get('type').value !== LayoutWidthType.FIXED"
<div fxFlex class="tb-layout-preview-element tb-layout-preview-input" *ngIf="showPreviewInputs('right')">
<input *ngIf="layoutsFormGroup.get('type').value !== layoutWidthType.FIXED"
formControlName="rightWidthPercentage"
type="number"
step="1"
min="10"
max="90"
min="{{ layoutPercentageSize.MIN }}"
max="{{ layoutPercentageSize.MAX }}"
required>
<input [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.FIXED"
<input *ngIf="layoutsFormGroup.get('type').value === layoutWidthType.FIXED"
formControlName="fixedWidth"
type="number"
step="1"
min="150"
max="1700"
min="{{ layoutFixedSize.MIN }}"
max="{{ layoutFixedSize.MAX }}"
required>
</div>
</div>
</div>
</div>
<div fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="8px" [fxShow]="layoutsFormGroup.get('right').value" style="width: 80%">
<mat-slider [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE"
min="10"
<div fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="8px" *ngIf="layoutsFormGroup.get('right').value" style="width: 80%">
<mat-slider *ngIf="layoutsFormGroup.get('type').value === layoutWidthType.PERCENTAGE"
step="1"
max="90"
min="{{ layoutPercentageSize.MIN }}"
max="{{ layoutPercentageSize.MAX }}"
style="width: 100%;"
color="accent"
formControlName="sliderPercentage"
thumbLabel
[displayWith]="formatSliderTooltipLabel.bind(this)">
</mat-slider>
<mat-slider [fxShow]="layoutsFormGroup.get('type').value !== LayoutWidthType.PERCENTAGE"
min="150"
<mat-slider *ngIf="layoutsFormGroup.get('type').value !== layoutWidthType.PERCENTAGE"
step="1"
max="1700"
min="{{ layoutFixedSize.MIN }}"
max="{{ layoutFixedSize.MAX }}"
style="width: 100%;"
color="accent"
formControlName="sliderFixed"
@ -158,8 +154,12 @@
[displayWith]="formatSliderTooltipLabel.bind(this)">
</mat-slider>
<div fxLayout="row" fxLayoutAlign="space-between center" class="tb-hint tb-hint-group" style="width: 100%;">
<label>{{layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE ? '10 %' : '150px'}}</label>
<label>{{layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE ? '90 %' : '1700px'}}</label>
<label>
{{layoutsFormGroup.get('type').value === layoutWidthType.PERCENTAGE ? layoutPercentageSize.MIN + '%' : layoutFixedSize.MIN + 'px'}}
</label>
<label>
{{layoutsFormGroup.get('type').value === layoutWidthType.PERCENTAGE ? layoutPercentageSize.MAX + '%' : layoutFixedSize.MAX + 'px'}}
</label>
</div>
</div>
</div>

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

@ -39,7 +39,11 @@ import {
DashboardSettingsDialogComponent,
DashboardSettingsDialogData
} from '@home/components/dashboard-page/dashboard-settings-dialog.component';
import { LayoutWidthType } from '@home/components/dashboard-page/layout/layout.models';
import {
LayoutFixedSize,
LayoutPercentageSize,
LayoutWidthType
} from '@home/components/dashboard-page/layout/layout.models';
import { Subscription } from 'rxjs';
import { MatTooltip } from '@angular/material/tooltip';
@ -60,7 +64,11 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
layoutsFormGroup: FormGroup;
LayoutWidthType = LayoutWidthType;
layoutWidthType = LayoutWidthType;
layoutPercentageSize = LayoutPercentageSize;
layoutFixedSize = LayoutFixedSize;
private readonly layouts: DashboardStateLayouts;
@ -87,11 +95,11 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
main: [{value: isDefined(this.layouts.main), disabled: true}],
right: [isDefined(this.layouts.right)],
sliderPercentage: [50],
sliderFixed: [150],
leftWidthPercentage: [50, [Validators.min(10), Validators.max(90), Validators.required]],
rightWidthPercentage: [50, [Validators.min(10), Validators.max(90), Validators.required]],
sliderFixed: [this.layoutFixedSize.MIN],
leftWidthPercentage: [50, [Validators.min(this.layoutPercentageSize.MIN), Validators.max(this.layoutPercentageSize.MAX), Validators.required]],
rightWidthPercentage: [50, [Validators.min(this.layoutPercentageSize.MIN), Validators.max(this.layoutPercentageSize.MAX), Validators.required]],
type: [LayoutWidthType.PERCENTAGE],
fixedWidth: [150, [Validators.min(150), Validators.max(1700), Validators.required]],
fixedWidth: [this.layoutFixedSize.MIN, [Validators.min(this.layoutFixedSize.MIN), Validators.max(this.layoutFixedSize.MAX), Validators.required]],
fixedLayout: ['main', []]
}
);
@ -233,7 +241,9 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
}
}
delete this.layouts.main.gridSettings.layoutDimension;
if (this.layouts.right?.gridSettings) {
delete this.layouts.right.gridSettings.layoutDimension;
}
if (this.layoutsFormGroup.value.right) {
const formValues = this.layoutsFormGroup.value;
const widthType = formValues.type;
@ -338,18 +348,25 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
}
}
layoutButtonTextAndClass(side: string, isText: boolean): string {
layoutButtonClass(side: DashboardLayoutId, border: boolean = false): string {
const formValues = this.layoutsFormGroup.value;
if (formValues.right) {
let classString = border ? 'tb-layout-button-main ' : '';
if (!(formValues.fixedLayout === side || formValues.type === LayoutWidthType.PERCENTAGE)) {
classString += 'tb-fixed-layout-button';
}
return classString;
}
}
layoutButtonText(side: DashboardLayoutId): string {
const formValues = this.layoutsFormGroup.value;
if (!(formValues.fixedLayout === side || !formValues.right || formValues.type === LayoutWidthType.PERCENTAGE)) {
if (isText) {
if (side === 'main') {
return this.translate.instant('layout.left-side');
} else {
return this.translate.instant('layout.right-side');
}
} else {
return 'tb-fixed-layout-button';
}
}
}

9
ui-ngx/src/app/modules/home/components/dashboard/layout-button.scss
View File

@ -19,6 +19,15 @@
height: 100%;
padding: 40px 10px;
cursor: default;
border-radius: 5px;
&-right {
border-radius: 0 5px 5px 0;
}
&-main {
border-radius: 5px 0 0 5px;
}
}
&::ng-deep {