Merge pull request #6374 from Dmitriymush/feature/6371
[3.4.2] UI:Feature/dashboard layouts width sizing
This commit is contained in:
Andrew Shvayka
GitHub
commit
b56b66a033
@ -49,6 +49,7 @@ import {
|
||||
DashboardState,
|
||||
DashboardStateLayouts,
|
||||
GridSettings,
|
||||
LayoutDimension,
|
||||
WidgetLayout
|
||||
} from '@app/shared/models/dashboard.models';
|
||||
import { WINDOW } from '@core/services/window.service';
|
||||
@ -145,6 +146,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 { LayoutFixedSize, LayoutWidthType } from '@home/components/dashboard-page/layout/layout.models';
|
||||
import { TbPopoverComponent } from '@shared/components/popover.component';
|
||||
|
||||
// @dynamic
|
||||
@ -672,7 +674,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
|
||||
if (this.isEditingWidget && this.editingLayoutCtx.id === 'main') {
|
||||
return '100%';
|
||||
} else {
|
||||
return this.layouts.right.show && !this.isMobile ? '50%' : '100%';
|
||||
return this.layouts.right.show && !this.isMobile ? this.calculateWidth('main') : '100%';
|
||||
}
|
||||
}
|
||||
|
||||
@ -688,7 +690,47 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
|
||||
if (this.isEditingWidget && this.editingLayoutCtx.id === 'right') {
|
||||
return '100%';
|
||||
} else {
|
||||
return this.isMobile ? '100%' : '50%';
|
||||
return this.isMobile ? '100%' : this.calculateWidth('right');
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
if (layoutDimension) {
|
||||
if (layoutDimension.type === LayoutWidthType.PERCENTAGE) {
|
||||
if (layout === 'right') {
|
||||
return (100 - layoutDimension.leftWidthPercentage) + '%';
|
||||
} else {
|
||||
return layoutDimension.leftWidthPercentage + '%';
|
||||
}
|
||||
} else {
|
||||
const dashboardWidth = this.dashboardContainer.nativeElement.getBoundingClientRect().width;
|
||||
const minAvailableWidth = dashboardWidth - LayoutFixedSize.MIN;
|
||||
if (layoutDimension.fixedLayout === layout) {
|
||||
if (minAvailableWidth <= layoutDimension.fixedWidth) {
|
||||
return minAvailableWidth + 'px';
|
||||
} else {
|
||||
return layoutDimension.fixedWidth + 'px';
|
||||
}
|
||||
} else {
|
||||
if (minAvailableWidth <= layoutDimension.fixedWidth) {
|
||||
return LayoutFixedSize.MIN + 'px';
|
||||
} else {
|
||||
return (dashboardWidth - layoutDimension.fixedWidth) + 'px';
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
return '50%';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -28,13 +28,13 @@
|
||||
<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"
|
||||
(click)="addWidget($event)">
|
||||
<mat-icon class="tb-mat-96">add</mat-icon>
|
||||
{{ 'dashboard.add-widget' | translate }}
|
||||
<span>{{ 'dashboard.add-widget' | translate }}</span>
|
||||
</button>
|
||||
</section>
|
||||
<tb-dashboard #dashboard [dashboardStyle]="dashboardStyle"
|
||||
|
||||
@ -16,8 +16,15 @@
|
||||
:host {
|
||||
button.tb-add-new-widget {
|
||||
padding-right: 12px;
|
||||
font-size: 24px;
|
||||
font-size: 20px;
|
||||
border-style: dashed;
|
||||
border-width: 2px;
|
||||
|
||||
::ng-deep .mat-button-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,3 +22,19 @@ export interface ILayoutController {
|
||||
pasteWidget($event: MouseEvent);
|
||||
pasteWidgetReference($event: MouseEvent);
|
||||
}
|
||||
|
||||
export enum LayoutWidthType {
|
||||
PERCENTAGE = 'percentage',
|
||||
FIXED = 'fixed'
|
||||
}
|
||||
|
||||
export enum LayoutPercentageSize {
|
||||
MIN = 10,
|
||||
MAX = 90
|
||||
}
|
||||
|
||||
export enum LayoutFixedSize {
|
||||
MIN = 150,
|
||||
MAX = 4000
|
||||
}
|
||||
|
||||
|
||||
@ -25,45 +25,155 @@
|
||||
<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>
|
||||
<fieldset [disabled]="isLoading$ | async" fxLayout="column" fxLayoutGap="8px">
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<mat-checkbox fxFlex formControlName="main">
|
||||
{{ 'layout.main' | translate }}
|
||||
</mat-checkbox>
|
||||
<mat-checkbox fxFlex formControlName="right">
|
||||
{{ 'layout.right' | translate }}
|
||||
</mat-checkbox>
|
||||
<div mat-dialog-content fxLayout="column" fxLayoutGap="20px" style="min-width: 300px; overflow: hidden;">
|
||||
<div fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-slide-toggle formControlName="right" color="accent">
|
||||
{{ 'layout.divider' | translate }}
|
||||
</mat-slide-toggle>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<div fxLayout="column" fxLayoutAlign="start center" fxLayoutGap="20px">
|
||||
<mat-button-toggle-group aria-label="Select width value type"
|
||||
formControlName="type"
|
||||
[fxShow]="layoutsFormGroup.get('right').value">
|
||||
<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 fxLayout="row" fxLayoutAlign="center center" class="tb-layout-preview">
|
||||
<div fxLayout="row"
|
||||
fxLayoutAlign="start center"
|
||||
class="tb-layout-preview-container"
|
||||
#tooltip="matTooltip"
|
||||
matTooltip=""
|
||||
matTooltipPosition="below">
|
||||
<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 }}"
|
||||
matTooltipPosition="above"
|
||||
(click)="openLayoutSettings('main')"
|
||||
class="tb-layout-preview-element"
|
||||
aria-label="Layout settings"
|
||||
[ngClass]="layoutButtonClass('main')">
|
||||
<mat-icon>settings</mat-icon>
|
||||
</button>
|
||||
<button fxFlex
|
||||
type="button" mat-raised-button color="primary"
|
||||
type="button"
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
class="tb-layout-button"
|
||||
(click)="openLayoutSettings('main')">
|
||||
<span translate>layout.main</span>
|
||||
</button>
|
||||
<button fxFlex [fxShow]="layoutsFormGroup.get('right').value"
|
||||
type="button" mat-raised-button color="primary"
|
||||
class="tb-layout-button"
|
||||
(click)="openLayoutSettings('right')">
|
||||
<span translate>layout.right</span>
|
||||
[matTooltip]="layoutButtonText('main')"
|
||||
matTooltipPosition="above"
|
||||
matTooltipClass="tb-layout-button-tooltip"
|
||||
(click)="setFixedLayout('main')"
|
||||
[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" *ngIf="showPreviewInputs('main')">
|
||||
<input *ngIf="layoutsFormGroup.get('type').value !== layoutWidthType.FIXED"
|
||||
formControlName="leftWidthPercentage"
|
||||
type="number"
|
||||
step="1"
|
||||
min="{{ layoutPercentageSize.MIN }}"
|
||||
max="{{ layoutPercentageSize.MAX }}"
|
||||
required>
|
||||
<input *ngIf="layoutsFormGroup.get('type').value === layoutWidthType.FIXED &&
|
||||
layoutsFormGroup.get('fixedLayout').value === 'main'"
|
||||
formControlName="fixedWidth"
|
||||
type="number"
|
||||
step="1"
|
||||
min="{{ layoutFixedSize.MIN }}"
|
||||
max="{{ layoutFixedSize.MAX }}"
|
||||
required>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="column" fxLayoutAlign="start center" fxFlex *ngIf="layoutsFormGroup.get('right').value" matTooltip="">
|
||||
<button mat-icon-button
|
||||
type="button"
|
||||
matTooltip="{{ 'dashboard.layout-settings' | translate }}"
|
||||
matTooltipPosition="above"
|
||||
(click)="openLayoutSettings('right')"
|
||||
class="tb-layout-preview-element"
|
||||
aria-label="Layout settings"
|
||||
[ngClass]="layoutButtonClass('right')">
|
||||
<mat-icon>settings</mat-icon>
|
||||
</button>
|
||||
<button fxFlex
|
||||
type="button"
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
class="tb-layout-button tb-layout-button-right"
|
||||
[matTooltip]="layoutButtonText('right')"
|
||||
matTooltipPosition="above"
|
||||
matTooltipClass="tb-layout-button-tooltip"
|
||||
(click)="setFixedLayout('right')"
|
||||
[ngClass]="layoutButtonClass('right')">
|
||||
<span>{{ 'layout.right' | translate }}</span>
|
||||
</button>
|
||||
<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="{{ layoutPercentageSize.MIN }}"
|
||||
max="{{ layoutPercentageSize.MAX }}"
|
||||
required>
|
||||
<input *ngIf="layoutsFormGroup.get('type').value === layoutWidthType.FIXED"
|
||||
formControlName="fixedWidth"
|
||||
type="number"
|
||||
step="1"
|
||||
min="{{ layoutFixedSize.MIN }}"
|
||||
max="{{ layoutFixedSize.MAX }}"
|
||||
required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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"
|
||||
min="{{ layoutPercentageSize.MIN }}"
|
||||
max="{{ layoutPercentageSize.MAX }}"
|
||||
style="width: 100%;"
|
||||
color="accent"
|
||||
formControlName="sliderPercentage"
|
||||
thumbLabel
|
||||
[displayWith]="formatSliderTooltipLabel.bind(this)">
|
||||
</mat-slider>
|
||||
<mat-slider *ngIf="layoutsFormGroup.get('type').value !== layoutWidthType.PERCENTAGE"
|
||||
step="1"
|
||||
min="{{ layoutFixedSize.MIN }}"
|
||||
max="{{ layoutFixedSize.MAX }}"
|
||||
style="width: 100%;"
|
||||
color="accent"
|
||||
formControlName="sliderFixed"
|
||||
thumbLabel
|
||||
[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 ? layoutPercentageSize.MIN + '%' : layoutFixedSize.MIN + 'px'}}
|
||||
</label>
|
||||
<label>
|
||||
{{layoutsFormGroup.get('type').value === layoutWidthType.PERCENTAGE ? layoutPercentageSize.MAX + '%' : layoutFixedSize.MAX + 'px'}}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</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>
|
||||
|
||||
@ -0,0 +1,185 @@
|
||||
/**
|
||||
* Copyright © 2016-2022 The Thingsboard Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
@use '~@angular/material' as mat;
|
||||
@import '../theme.scss';
|
||||
|
||||
$tb-warn: mat.get-color-from-palette(map-get($tb-theme, warn), text);
|
||||
|
||||
:host {
|
||||
.tb-layout-fixed-container {
|
||||
width: 100%;
|
||||
min-width: 368px;
|
||||
padding: 8px 8px 8px 0;
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.tb-hint-group {
|
||||
padding: 0;
|
||||
margin-top: -14px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tb-layout-preview {
|
||||
width: 120%;
|
||||
background-color: rgba(mat.get-color-from-palette($tb-primary, 50), 0.6);
|
||||
padding: 35px;
|
||||
|
||||
&-container {
|
||||
width: 75%;
|
||||
|
||||
button.tb-fixed-layout-button {
|
||||
background-color: transparent;
|
||||
color: #000000;
|
||||
cursor: pointer;
|
||||
|
||||
.mat-icon {
|
||||
color: rgba(0, 0, 0, 0.38);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(211, 211, 211, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
transition-duration: 0.5s;
|
||||
transition-property: max-width;
|
||||
position: relative;
|
||||
|
||||
.mat-icon-button {
|
||||
align-self: end;
|
||||
}
|
||||
}
|
||||
|
||||
.tb-layout-preview-element {
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
|
||||
.mat-icon {
|
||||
font-size: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
color: rgba(255, 255, 255, 0.76);
|
||||
|
||||
&:hover {
|
||||
transform: rotate(180deg);
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-main {
|
||||
min-width: 25%;
|
||||
}
|
||||
|
||||
/* remove arrows from input for Chrome, Safari, Edge, Opera */
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* remove arrows from input for Firefox */
|
||||
input[type=number] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
.tb-layout-preview-input {
|
||||
margin: 80px 0 0;
|
||||
|
||||
input {
|
||||
border: 1px solid #778899;
|
||||
background-color: transparent;
|
||||
color: #ffffff;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
outline: none;
|
||||
width: 37px;
|
||||
height: 28px;
|
||||
font-size: 14px;
|
||||
|
||||
&:invalid {
|
||||
outline: 2px solid $tb-warn;
|
||||
border: 1px solid transparent;
|
||||
background-color: rgba($tb-warn, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:host ::ng-deep {
|
||||
.mat-slider-wrapper {
|
||||
.mat-slider-thumb-container {
|
||||
.mat-slider-thumb-label {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-button-toggle-group {
|
||||
width: 100%;
|
||||
min-width: 354px;
|
||||
border: 2px solid rgba(0, 0, 0, 0.06);
|
||||
|
||||
.mat-button-toggle-checked {
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.mat-button-toggle {
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Make mat-slider tooltip always visible */
|
||||
.mat-slider-thumb-label {
|
||||
transform: rotate(45deg) !important;
|
||||
border-radius: 50% 50% 0 !important;
|
||||
}
|
||||
|
||||
.mat-slider-thumb {
|
||||
transform: scale(0) !important;
|
||||
}
|
||||
|
||||
.mat-slider-thumb-label-text {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep {
|
||||
/* Alarm tooltip with side-to-side movement */
|
||||
.tb-layout-error-tooltip-right {
|
||||
background-color: $tb-warn !important;
|
||||
margin: 5px 0 0 105px;
|
||||
width: 160px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tb-layout-error-tooltip-main {
|
||||
background-color: $tb-warn !important;
|
||||
margin: 5px 105px 0 0;
|
||||
width: 160px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tb-layout-button-tooltip {
|
||||
margin: 30px 40px -35px -50px;
|
||||
}
|
||||
}
|
||||
@ -14,23 +14,38 @@
|
||||
/// limitations under the License.
|
||||
///
|
||||
|
||||
import { Component, Inject, OnInit, SkipSelf } from '@angular/core';
|
||||
import { Component, ElementRef, Inject, SkipSelf, ViewChild } from '@angular/core';
|
||||
import { ErrorStateMatcher } from '@angular/material/core';
|
||||
import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
|
||||
import { Store } from '@ngrx/store';
|
||||
import { AppState } from '@core/core.state';
|
||||
import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm } from '@angular/forms';
|
||||
import {
|
||||
AbstractControl,
|
||||
FormBuilder,
|
||||
FormControl,
|
||||
FormGroup,
|
||||
FormGroupDirective,
|
||||
NgForm,
|
||||
Validators
|
||||
} from '@angular/forms';
|
||||
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 {
|
||||
LayoutFixedSize,
|
||||
LayoutPercentageSize,
|
||||
LayoutWidthType
|
||||
} from '@home/components/dashboard-page/layout/layout.models';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { MatTooltip } from '@angular/material/tooltip';
|
||||
|
||||
export interface ManageDashboardLayoutsDialogData {
|
||||
layouts: DashboardStateLayouts;
|
||||
@ -40,44 +55,150 @@ export interface ManageDashboardLayoutsDialogData {
|
||||
selector: 'tb-manage-dashboard-layouts-dialog',
|
||||
templateUrl: './manage-dashboard-layouts-dialog.component.html',
|
||||
providers: [{provide: ErrorStateMatcher, useExisting: ManageDashboardLayoutsDialogComponent}],
|
||||
styleUrls: ['../../../components/dashboard/layout-button.scss']
|
||||
styleUrls: ['./manage-dashboard-layouts-dialog.component.scss', '../../../components/dashboard/layout-button.scss']
|
||||
})
|
||||
export class ManageDashboardLayoutsDialogComponent extends DialogComponent<ManageDashboardLayoutsDialogComponent, DashboardStateLayouts>
|
||||
implements OnInit, ErrorStateMatcher {
|
||||
implements ErrorStateMatcher {
|
||||
|
||||
@ViewChild('tooltip', {static: true}) tooltip: MatTooltip;
|
||||
|
||||
layoutsFormGroup: FormGroup;
|
||||
|
||||
layouts: DashboardStateLayouts;
|
||||
layoutWidthType = LayoutWidthType;
|
||||
|
||||
submitted = false;
|
||||
layoutPercentageSize = LayoutPercentageSize;
|
||||
|
||||
layoutFixedSize = LayoutFixedSize;
|
||||
|
||||
private readonly layouts: DashboardStateLayouts;
|
||||
|
||||
private subscriptions: Array<Subscription> = [];
|
||||
|
||||
private submitted = false;
|
||||
|
||||
constructor(protected store: Store<AppState>,
|
||||
protected router: Router,
|
||||
@Inject(MAT_DIALOG_DATA) public data: ManageDashboardLayoutsDialogData,
|
||||
@Inject(MAT_DIALOG_DATA) private data: ManageDashboardLayoutsDialogData,
|
||||
@SkipSelf() private errorStateMatcher: ErrorStateMatcher,
|
||||
public dialogRef: MatDialogRef<ManageDashboardLayoutsDialogComponent, DashboardStateLayouts>,
|
||||
protected dialogRef: MatDialogRef<ManageDashboardLayoutsDialogComponent, DashboardStateLayouts>,
|
||||
private fb: FormBuilder,
|
||||
private utils: UtilsService,
|
||||
private dashboardUtils: DashboardUtilsService,
|
||||
private translate: TranslateService,
|
||||
private dialog: MatDialog) {
|
||||
private dialog: MatDialog,
|
||||
private elementRef: ElementRef) {
|
||||
super(store, router, dialogRef);
|
||||
|
||||
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],
|
||||
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: [this.layoutFixedSize.MIN, [Validators.min(this.layoutFixedSize.MIN), Validators.max(this.layoutFixedSize.MAX), Validators.required]],
|
||||
fixedLayout: ['main', []]
|
||||
}
|
||||
);
|
||||
for (const l of Object.keys(this.layoutsFormGroup.controls)) {
|
||||
const control = this.layoutsFormGroup.controls[l];
|
||||
if (!this.layouts[l]) {
|
||||
this.layouts[l] = this.dashboardUtils.createDefaultLayoutData();
|
||||
|
||||
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.patchValue({
|
||||
fixedLayout: this.layouts.right.gridSettings.layoutDimension.fixedLayout,
|
||||
type: LayoutWidthType.FIXED,
|
||||
fixedWidth: this.layouts.right.gridSettings.layoutDimension.fixedWidth,
|
||||
sliderFixed: 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.patchValue({
|
||||
fixedLayout: this.layouts.main.gridSettings.layoutDimension.fixedLayout,
|
||||
type: LayoutWidthType.FIXED,
|
||||
fixedWidth: this.layouts.main.gridSettings.layoutDimension.fixedWidth,
|
||||
sliderFixed: this.layouts.main.gridSettings.layoutDimension.fixedWidth
|
||||
}, {emitEvent: false});
|
||||
} else {
|
||||
const leftWidthPercentage: number = Number(this.layouts.main.gridSettings.layoutDimension.leftWidthPercentage);
|
||||
this.layoutsFormGroup.patchValue({
|
||||
leftWidthPercentage,
|
||||
sliderPercentage: leftWidthPercentage,
|
||||
rightWidthPercentage: 100 - Number(leftWidthPercentage)
|
||||
}, {emitEvent: false});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
if (!this.layouts.main) {
|
||||
this.layouts.main = this.dashboardUtils.createDefaultLayoutData();
|
||||
}
|
||||
if (!this.layouts.right) {
|
||||
this.layouts.right = this.dashboardUtils.createDefaultLayoutData();
|
||||
}
|
||||
|
||||
this.subscriptions.push(
|
||||
this.layoutsFormGroup.get('sliderPercentage').valueChanges
|
||||
.subscribe(
|
||||
(value) => this.layoutsFormGroup.get('leftWidthPercentage').patchValue(value)
|
||||
));
|
||||
this.subscriptions.push(
|
||||
this.layoutsFormGroup.get('sliderFixed').valueChanges
|
||||
.subscribe(
|
||||
(value) => {
|
||||
this.layoutsFormGroup.get('fixedWidth').patchValue(value);
|
||||
}
|
||||
));
|
||||
this.subscriptions.push(
|
||||
this.layoutsFormGroup.get('leftWidthPercentage').valueChanges
|
||||
.subscribe(
|
||||
(value) => {
|
||||
this.showTooltip(this.layoutsFormGroup.get('leftWidthPercentage'), LayoutWidthType.PERCENTAGE, 'main');
|
||||
this.layoutControlChange('rightWidthPercentage', value);
|
||||
}
|
||||
));
|
||||
this.subscriptions.push(
|
||||
this.layoutsFormGroup.get('rightWidthPercentage').valueChanges
|
||||
.subscribe(
|
||||
(value) => {
|
||||
this.showTooltip(this.layoutsFormGroup.get('rightWidthPercentage'), LayoutWidthType.PERCENTAGE, 'right');
|
||||
this.layoutControlChange('leftWidthPercentage', value);
|
||||
}
|
||||
));
|
||||
this.subscriptions.push(
|
||||
this.layoutsFormGroup.get('fixedWidth').valueChanges
|
||||
.subscribe(
|
||||
(value) => {
|
||||
this.showTooltip(this.layoutsFormGroup.get('fixedWidth'), LayoutWidthType.FIXED,
|
||||
this.layoutsFormGroup.get('fixedLayout').value);
|
||||
this.layoutsFormGroup.get('sliderFixed').setValue(value, {emitEvent: false});
|
||||
}
|
||||
));
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
for (const subscription of this.subscriptions) {
|
||||
subscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
|
||||
@ -110,12 +231,147 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
|
||||
|
||||
save(): void {
|
||||
this.submitted = true;
|
||||
for (const l of Object.keys(this.layoutsFormGroup.controls)) {
|
||||
const layouts = ['main', 'right'];
|
||||
for (const l of layouts) {
|
||||
const control = this.layoutsFormGroup.controls[l];
|
||||
if (!control.value) {
|
||||
if (this.layouts[l]) {
|
||||
delete this.layouts[l];
|
||||
}
|
||||
}
|
||||
}
|
||||
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;
|
||||
const layoutDimension: LayoutDimension = {
|
||||
type: widthType
|
||||
};
|
||||
if (widthType === LayoutWidthType.PERCENTAGE) {
|
||||
layoutDimension.leftWidthPercentage = formValues.leftWidthPercentage;
|
||||
this.layouts.main.gridSettings.layoutDimension = layoutDimension;
|
||||
} else {
|
||||
layoutDimension.fixedWidth = formValues.fixedWidth;
|
||||
layoutDimension.fixedLayout = formValues.fixedLayout;
|
||||
if (formValues.fixedLayout === 'main') {
|
||||
this.layouts.main.gridSettings.layoutDimension = layoutDimension;
|
||||
} else {
|
||||
this.layouts.right.gridSettings.layoutDimension = layoutDimension;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.dialogRef.close(this.layouts);
|
||||
}
|
||||
|
||||
buttonFlexValue(): number {
|
||||
const formValues = this.layoutsFormGroup.value;
|
||||
if (formValues.right) {
|
||||
if (formValues.type !== LayoutWidthType.FIXED) {
|
||||
return formValues.leftWidthPercentage;
|
||||
} else {
|
||||
if (formValues.fixedLayout === 'main') {
|
||||
return 10;
|
||||
} else {
|
||||
return 90;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
formatSliderTooltipLabel(value: number): string | number {
|
||||
return this.layoutsFormGroup.get('type').value === LayoutWidthType.FIXED ? value : `${value}|${100 - value}`;
|
||||
}
|
||||
|
||||
private layoutControlChange(key: string, value) {
|
||||
const valueToSet = 100 - Number(value);
|
||||
this.layoutsFormGroup.get(key).setValue(valueToSet, {emitEvent: false});
|
||||
this.layoutsFormGroup.get('sliderPercentage')
|
||||
.setValue(key === 'leftWidthPercentage' ? valueToSet : Number(value), {emitEvent: false});
|
||||
}
|
||||
|
||||
setFixedLayout(layout: string): void {
|
||||
const layoutButtons = this.elementRef.nativeElement.querySelectorAll('.tb-layout-button');
|
||||
if (layoutButtons?.length) {
|
||||
let elementToDisable: HTMLButtonElement;
|
||||
if (layout === 'right') {
|
||||
elementToDisable = layoutButtons[0];
|
||||
} else {
|
||||
elementToDisable = layoutButtons[1];
|
||||
}
|
||||
|
||||
elementToDisable.disabled = true;
|
||||
setTimeout(() => {
|
||||
elementToDisable.disabled = false;
|
||||
}, 250);
|
||||
}
|
||||
|
||||
if (this.layoutsFormGroup.get('type').value === LayoutWidthType.FIXED) {
|
||||
this.layoutsFormGroup.get('fixedLayout').setValue(layout);
|
||||
}
|
||||
}
|
||||
|
||||
private showTooltip(control: AbstractControl, layoutType: LayoutWidthType, layoutSide: DashboardLayoutId): void {
|
||||
if (control.errors) {
|
||||
let message: string;
|
||||
const unit = layoutType === LayoutWidthType.FIXED ? 'px' : '%';
|
||||
|
||||
if (control.errors.required) {
|
||||
if (layoutType === LayoutWidthType.FIXED) {
|
||||
message = this.translate.instant('layout.layout-fixed-width-required');
|
||||
} else {
|
||||
if (layoutSide === 'right') {
|
||||
message = this.translate.instant('layout.right-width-percentage-required');
|
||||
} else {
|
||||
message = this.translate.instant('layout.left-width-percentage-required');
|
||||
}
|
||||
}
|
||||
} else if (control.errors.min) {
|
||||
message = this.translate.instant('layout.value-min-error', {min: control.errors.min.min, unit});
|
||||
} else if (control.errors.max) {
|
||||
message = this.translate.instant('layout.value-max-error', {max: control.errors.max.max, unit});
|
||||
}
|
||||
|
||||
if (layoutSide === 'main') {
|
||||
this.tooltip.tooltipClass = 'tb-layout-error-tooltip-main';
|
||||
} else {
|
||||
this.tooltip.tooltipClass = 'tb-layout-error-tooltip-right';
|
||||
}
|
||||
|
||||
this.tooltip.message = message;
|
||||
this.tooltip.show(1300);
|
||||
} else {
|
||||
this.tooltip.message = '';
|
||||
this.tooltip.hide();
|
||||
}
|
||||
}
|
||||
|
||||
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 (side === 'main') {
|
||||
return this.translate.instant('layout.left-side');
|
||||
} else {
|
||||
return this.translate.instant('layout.right-side');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
showPreviewInputs(side: DashboardLayoutId): boolean {
|
||||
const formValues = this.layoutsFormGroup.value;
|
||||
return formValues.right && (formValues.type === LayoutWidthType.PERCENTAGE || formValues.fixedLayout === side);
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,7 +17,17 @@
|
||||
button.tb-layout-button {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 40px 20px;
|
||||
padding: 40px 10px;
|
||||
cursor: default;
|
||||
border-radius: 5px;
|
||||
|
||||
&-right {
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
|
||||
&-main {
|
||||
border-radius: 5px 0 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&::ng-deep {
|
||||
|
||||
@ -55,6 +55,7 @@ export interface GridSettings {
|
||||
autoFillHeight?: boolean;
|
||||
mobileAutoFillHeight?: boolean;
|
||||
mobileRowHeight?: number;
|
||||
layoutDimension?: LayoutDimension;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
@ -69,8 +70,17 @@ export interface DashboardLayoutInfo {
|
||||
gridSettings?: GridSettings;
|
||||
}
|
||||
|
||||
export interface LayoutDimension {
|
||||
type?: LayoutType,
|
||||
fixedWidth?: number,
|
||||
fixedLayout?: DashboardLayoutId,
|
||||
leftWidthPercentage?: number
|
||||
}
|
||||
|
||||
export declare type DashboardLayoutId = 'main' | 'right';
|
||||
|
||||
export declare type LayoutType = 'percentage' | 'fixed';
|
||||
|
||||
export declare type DashboardStateLayouts = {[key in DashboardLayoutId]?: DashboardLayout};
|
||||
|
||||
export declare type DashboardLayoutsInfo = {[key in DashboardLayoutId]?: DashboardLayoutInfo};
|
||||
|
||||
@ -2559,7 +2559,22 @@
|
||||
"color": "Color",
|
||||
"main": "Main",
|
||||
"right": "Right",
|
||||
"select": "Select target layout"
|
||||
"left": "Left",
|
||||
"select": "Select target layout",
|
||||
"percentage-width": "Percentage width (%)",
|
||||
"fixed-width": "Fixed width (px)",
|
||||
"left-width": "Left column (%)",
|
||||
"right-width": "Right column (%)",
|
||||
"pick-fixed-side": "Fixed side: ",
|
||||
"layout-fixed-width": "Fixed width (px)",
|
||||
"value-min-error": "Value must be more then {{min}}{{unit}}",
|
||||
"value-max-error": "Value must be less then {{max}}{{unit}}",
|
||||
"layout-fixed-width-required": "Fixed width is required",
|
||||
"right-width-percentage-required": "Right percentage is required",
|
||||
"left-width-percentage-required": "Left percentage is required",
|
||||
"divider": "Divider",
|
||||
"right-side": "Right side layout",
|
||||
"left-side": "Left side layout"
|
||||
},
|
||||
"legend": {
|
||||
"direction": "Legend direction",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user