From c6a50433825049cf77e34bef1bcd1d44eecd94a8 Mon Sep 17 00:00:00 2001 From: ArtemDzhereleiko Date: Wed, 27 Oct 2021 13:33:51 +0300 Subject: [PATCH 1/7] UI: New widget settings layout --- .../widget/legend-config.component.html | 46 +++- .../widget/legend-config.component.ts | 176 +++++------- .../widget/widget-config.component.html | 258 ++++++++++-------- .../widget/widget-config.component.scss | 55 +++- .../widget/widget-config.component.ts | 37 ++- .../assets/locale/locale.constant-en_US.json | 11 +- .../assets/locale/locale.constant-ru_RU.json | 11 +- .../assets/locale/locale.constant-uk_UA.json | 11 +- 8 files changed, 355 insertions(+), 250 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/legend-config.component.html b/ui-ngx/src/app/modules/home/components/widget/legend-config.component.html index fd02ac6b34..46faecb9f5 100644 --- a/ui-ngx/src/app/modules/home/components/widget/legend-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/legend-config.component.html @@ -15,9 +15,43 @@ limitations under the License. --> - +
+
+ + legend.direction + + + {{ legendDirectionTranslations.get(legendDirection[direction]) | translate }} + + + + + legend.position + + + {{ legendPositionTranslations.get(legendPosition[pos]) | translate }} + + + +
+
+ + {{ 'legend.sort-legend' | translate }} + + + {{ 'legend.show-min' | translate }} + + + {{ 'legend.show-max' | translate }} + + + {{ 'legend.show-avg' | translate }} + + + {{ 'legend.show-total' | translate }} + +
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/legend-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/legend-config.component.ts index 6072bf7eaf..d4ec111bb9 100644 --- a/ui-ngx/src/app/modules/home/components/widget/legend-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/legend-config.component.ts @@ -17,30 +17,21 @@ import { Component, forwardRef, - Inject, - Injector, Input, OnDestroy, OnInit, - StaticProvider, - ViewChild, ViewContainerRef } from '@angular/core'; -import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; -import { DOCUMENT } from '@angular/common'; -import { CdkOverlayOrigin, ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay'; -import { ComponentPortal } from '@angular/cdk/portal'; -import { MediaBreakpoints } from '@shared/models/constants'; -import { BreakpointObserver } from '@angular/cdk/layout'; -import { WINDOW } from '@core/services/window.service'; -import { deepClone } from '@core/utils'; -import { LegendConfig } from '@shared/models/widget.models'; +import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { isDefined } from '@core/utils'; import { - LEGEND_CONFIG_PANEL_DATA, - LegendConfigPanelComponent, - LegendConfigPanelData -} from '@home/components/widget/legend-config-panel.component'; - + LegendConfig, + LegendDirection, + legendDirectionTranslationMap, + LegendPosition, + legendPositionTranslationMap +} from '@shared/models/widget.models'; +import { Subscription } from 'rxjs'; // @dynamic @Component({ selector: 'tb-legend-config', @@ -58,105 +49,37 @@ export class LegendConfigComponent implements OnInit, OnDestroy, ControlValueAcc @Input() disabled: boolean; - @ViewChild('legendConfigPanelOrigin') legendConfigPanelOrigin: CdkOverlayOrigin; + legendSettings: LegendConfig; + legendConfigForm: FormGroup; + legendDirection = LegendDirection; + legendDirections = Object.keys(LegendDirection); + legendDirectionTranslations = legendDirectionTranslationMap; + legendPosition = LegendPosition; + legendPositions = Object.keys(LegendPosition); + legendPositionTranslations = legendPositionTranslationMap; - innerValue: LegendConfig; + legendSettingsChangesSubscription: Subscription; private propagateChange = (_: any) => {}; - constructor(private overlay: Overlay, - public viewContainerRef: ViewContainerRef, - public breakpointObserver: BreakpointObserver, - @Inject(DOCUMENT) private document: Document, - @Inject(WINDOW) private window: Window) { + constructor(public fb: FormBuilder, + public viewContainerRef: ViewContainerRef) { } ngOnInit(): void { - } - - ngOnDestroy(): void { - } - - openEditMode() { - if (this.disabled) { - return; - } - const isGtSm = this.breakpointObserver.isMatched(MediaBreakpoints['gt-sm']); - const position = this.overlay.position(); - const config = new OverlayConfig({ - panelClass: 'tb-legend-config-panel', - backdropClass: 'cdk-overlay-transparent-backdrop', - hasBackdrop: isGtSm, + this.legendConfigForm = this.fb.group({ + direction: [null, []], + position: [null, []], + sortDataKeys: [null, []], + showMin: [null, []], + showMax: [null, []], + showAvg: [null, []], + showTotal: [null, []] }); - if (isGtSm) { - config.minWidth = '220px'; - config.maxHeight = '300px'; - const panelHeight = 220; - const panelWidth = 220; - const el = this.legendConfigPanelOrigin.elementRef.nativeElement; - const offset = el.getBoundingClientRect(); - const scrollTop = this.window.pageYOffset || this.document.documentElement.scrollTop || this.document.body.scrollTop || 0; - const scrollLeft = this.window.pageXOffset || this.document.documentElement.scrollLeft || this.document.body.scrollLeft || 0; - const bottomY = offset.bottom - scrollTop; - const leftX = offset.left - scrollLeft; - let originX; - let originY; - let overlayX; - let overlayY; - const wHeight = this.document.documentElement.clientHeight; - const wWidth = this.document.documentElement.clientWidth; - if (bottomY + panelHeight > wHeight) { - originY = 'top'; - overlayY = 'bottom'; - } else { - originY = 'bottom'; - overlayY = 'top'; - } - if (leftX + panelWidth > wWidth) { - originX = 'end'; - overlayX = 'end'; - } else { - originX = 'start'; - overlayX = 'start'; - } - const connectedPosition: ConnectedPosition = { - originX, - originY, - overlayX, - overlayY - }; - config.positionStrategy = position.flexibleConnectedTo(this.legendConfigPanelOrigin.elementRef) - .withPositions([connectedPosition]); - } else { - config.minWidth = '100%'; - config.minHeight = '100%'; - config.positionStrategy = position.global().top('0%').left('0%') - .right('0%').bottom('0%'); - } - - const overlayRef = this.overlay.create(config); - - overlayRef.backdropClick().subscribe(() => { - overlayRef.dispose(); - }); - - const injector = this._createLegendConfigPanelInjector( - overlayRef, - { - legendConfig: deepClone(this.innerValue), - legendConfigUpdated: this.legendConfigUpdated.bind(this) - } - ); - - overlayRef.attach(new ComponentPortal(LegendConfigPanelComponent, this.viewContainerRef, injector)); } - private _createLegendConfigPanelInjector(overlayRef: OverlayRef, data: LegendConfigPanelData): Injector { - const providers: StaticProvider[] = [ - {provide: LEGEND_CONFIG_PANEL_DATA, useValue: data}, - {provide: OverlayRef, useValue: overlayRef} - ]; - return Injector.create({parent: this.viewContainerRef.injector, providers}); + ngOnDestroy(): void { + this.removeChangeSubscriptions(); } registerOnChange(fn: any): void { @@ -168,14 +91,45 @@ export class LegendConfigComponent implements OnInit, OnDestroy, ControlValueAcc setDisabledState(isDisabled: boolean): void { this.disabled = isDisabled; + if (this.disabled) { + this.legendConfigForm.disable({emitEvent: false}); + } else { + this.legendConfigForm.enable({emitEvent: false}); + } + } + + private removeChangeSubscriptions() { + if (this.legendSettingsChangesSubscription) { + this.legendSettingsChangesSubscription.unsubscribe(); + this.legendSettingsChangesSubscription = null; + } + } + + private createChangeSubscriptions() { + this.legendSettingsChangesSubscription = this.legendConfigForm.valueChanges.subscribe( + () => this.legendConfigUpdated() + ); } writeValue(obj: LegendConfig): void { - this.innerValue = obj; + this.legendSettings = obj; + this.removeChangeSubscriptions(); + if (this.legendSettings) { + this.legendConfigForm.patchValue({ + direction: this.legendSettings.direction, + position: this.legendSettings.position, + sortDataKeys: isDefined(this.legendSettings.sortDataKeys) ? this.legendSettings.sortDataKeys : false, + showMin: isDefined(this.legendSettings.showMin) ? this.legendSettings.showMin : false, + showMax: isDefined(this.legendSettings.showMax) ? this.legendSettings.showMax : false, + showAvg: isDefined(this.legendSettings.showAvg) ? this.legendSettings.showAvg : false, + showTotal: isDefined(this.legendSettings.showTotal) ? this.legendSettings.showTotal : false + }); + } + this.createChangeSubscriptions(); } - private legendConfigUpdated(legendConfig: LegendConfig) { - this.innerValue = legendConfig; - this.propagateChange(this.innerValue); + private legendConfigUpdated() { + this.legendSettings = this.legendConfigForm.value; + this.propagateChange(this.legendSettings); } } diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html index 3be4f1705b..7e69ca704a 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html @@ -292,12 +292,16 @@ -
-
- widget-config.general-settings -
-
- +
+
+
+ widget-config.title + + {{ 'widget-config.display-title' | translate }} + +
+ widget-config.title @@ -306,91 +310,139 @@
-
- -
-
-
-
- + + + + widget-config.advanced-settings + + +
+ +
+ +
+ widget-config.title-icon + {{ 'widget-config.display-icon' | translate }} - - - -
-
- - - - widget-config.icon-size - - -
-
-
-
- - {{ 'widget-config.display-title' | translate }} - - - {{ 'widget-config.drop-shadow' | translate }} - - - {{ 'widget-config.enable-fullscreen' | translate }} - -
-
- -
-
-
-
- - - - -
-
- - widget-config.padding - - - - widget-config.margin - - + +
+ + + + + + widget-config.icon-size + + +
+ + +
+ widget-config.widget-style +
+
+ + + + +
+
+ + widget-config.padding + + + + widget-config.margin + + +
-
+ + {{ 'widget-config.drop-shadow' | translate }} + + + {{ 'widget-config.enable-fullscreen' | translate }} + + + + + widget-config.advanced-settings + + +
+ +
+ + +
+ widget-config.legend + + + + + {{ 'widget-config.display-legend' | translate }} + + + + widget-config.advanced-settings + + + + +
+
+ widget-config.mobile-mode-settings + + + + + {{ 'widget-config.mobile-hide' | translate }} + + + + widget-config.advanced-settings + + +
+ + widget-config.order + + + + widget-config.height + + +
+ +
@@ -402,34 +454,6 @@
-
- - {{ 'widget-config.display-legend' | translate }} - -
- - -
-
-
-
- widget-config.mobile-mode-settings -
- - {{ 'widget-config.mobile-hide' | translate }} - - - widget-config.order - - - - widget-config.height - - -
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.scss b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.scss index 6e1e1cabdf..4c4fa317ce 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.scss @@ -17,9 +17,6 @@ :host { .tb-widget-config { - .tb-advanced-widget-config { - height: 100%; - } .tb-advanced-widget-config { height: 100%; } @@ -69,6 +66,25 @@ padding-left: 8px; } } + .fields-group { + padding: 0 16px 8px; + margin-bottom: 10px; + border: 1px groove rgba(0, 0, 0, .25); + border-radius: 4px; + legend { + color: rgba(0, 0, 0, .7); + width: fit-content; + } + } + .fields-group-slider { + padding: 0; + legend { + margin-left: 16px; + } + .tb-settings { + padding: 0 16px 8px; + } + } } } @@ -94,6 +110,36 @@ white-space: normal; } .mat-expansion-panel { + &.tb-settings { + box-shadow: none; + .mat-content { + overflow: visible; + } + .mat-expansion-panel-header { + padding: 0; + &:hover { + background: none; + } + .mat-expansion-indicator { + padding: 2px; + } + } + .mat-expansion-panel-header-description { + align-items: center; + } + .mat-expansion-panel-body{ + padding: 0 0 16px; + } + .tb-json-object-panel { + margin: 0; + } + .mat-checkbox-layout { + margin: 5px 0; + } + .mat-checkbox-inner-container { + margin-right: 12px; + } + } &.tb-datasources { &.mat-expanded { overflow: visible; @@ -152,5 +198,8 @@ } } } + .mat-slide-toggle-content { + white-space: normal; + } } } diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts index 7351f9985a..48ed4bf700 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts @@ -212,11 +212,28 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont showLegend: [null, []], legendConfig: [null, []] }); + this.widgetSettings.get('showTitle').valueChanges.subscribe((value: boolean) => { + if (value) { + this.widgetSettings.get('titleStyle').enable({emitEvent: false}); + this.widgetSettings.get('titleTooltip').enable({emitEvent: false}); + this.widgetSettings.get('showTitleIcon').enable({emitEvent: false}); + } else { + this.widgetSettings.get('titleStyle').disable({emitEvent: false}); + this.widgetSettings.get('titleTooltip').disable({emitEvent: false}); + this.widgetSettings.get('showTitleIcon').patchValue(false); + this.widgetSettings.get('showTitleIcon').disable({emitEvent: false}); + } + }); + this.widgetSettings.get('showTitleIcon').valueChanges.subscribe((value: boolean) => { if (value) { this.widgetSettings.get('titleIcon').enable({emitEvent: false}); + this.widgetSettings.get('iconColor').enable({emitEvent: false}); + this.widgetSettings.get('iconSize').enable({emitEvent: false}); } else { this.widgetSettings.get('titleIcon').disable({emitEvent: false}); + this.widgetSettings.get('iconColor').disable({emitEvent: false}); + this.widgetSettings.get('iconSize').disable({emitEvent: false}); } }); this.widgetSettings.get('showLegend').valueChanges.subscribe((value: boolean) => { @@ -236,6 +253,10 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont }); } + ngOnDestroy(): void { + this.removeChangeSubscriptions(); + } + private removeChangeSubscriptions() { if (this.dataSettingsChangesSubscription) { this.dataSettingsChangesSubscription.unsubscribe(); @@ -376,7 +397,7 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont iconColor: isDefined(config.iconColor) ? config.iconColor : 'rgba(0, 0, 0, 0.87)', iconSize: isDefined(config.iconSize) ? config.iconSize : '24px', titleTooltip: isDefined(config.titleTooltip) ? config.titleTooltip : '', - showTitle: config.showTitle, + showTitle: isDefined(config.showTitle) ? config.showTitle : false, dropShadow: isDefined(config.dropShadow) ? config.dropShadow : true, enableFullscreen: isDefined(config.enableFullscreen) ? config.enableFullscreen : true, backgroundColor: config.backgroundColor, @@ -396,11 +417,25 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont }, {emitEvent: false} ); + const showTitle: boolean = this.widgetSettings.get('showTitle').value; + if (showTitle) { + this.widgetSettings.get('titleTooltip').enable({emitEvent: false}); + this.widgetSettings.get('titleStyle').enable({emitEvent: false}); + this.widgetSettings.get('showTitleIcon').enable({emitEvent: false}); + } else { + this.widgetSettings.get('titleTooltip').disable({emitEvent: false}); + this.widgetSettings.get('titleStyle').disable({emitEvent: false}); + this.widgetSettings.get('showTitleIcon').disable({emitEvent: false}); + } const showTitleIcon: boolean = this.widgetSettings.get('showTitleIcon').value; if (showTitleIcon) { this.widgetSettings.get('titleIcon').enable({emitEvent: false}); + this.widgetSettings.get('iconColor').enable({emitEvent: false}); + this.widgetSettings.get('iconSize').enable({emitEvent: false}); } else { this.widgetSettings.get('titleIcon').disable({emitEvent: false}); + this.widgetSettings.get('iconColor').disable({emitEvent: false}); + this.widgetSettings.get('iconSize').disable({emitEvent: false}); } const showLegend: boolean = this.widgetSettings.get('showLegend').value; if (showLegend) { diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index 16788b9adc..dd719d3258 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -3026,16 +3026,16 @@ "title": "Title", "title-tooltip": "Title Tooltip", "general-settings": "General settings", - "display-title": "Display title", + "display-title": "Display widget title", "drop-shadow": "Drop shadow", - "enable-fullscreen": "Enable fullscreen", + "enable-fullscreen": "Allow fullscreen", "background-color": "Background color", "text-color": "Text color", "padding": "Padding", "margin": "Margin", "widget-style": "Widget style", "title-style": "Title style", - "mobile-mode-settings": "Mobile mode settings", + "mobile-mode-settings": "Mobile mode", "order": "Order", "height": "Height", "mobile-hide": "Hide widget in mobile mode", @@ -3044,6 +3044,7 @@ "timewindow": "Timewindow", "use-dashboard-timewindow": "Use dashboard timewindow", "display-timewindow": "Display timewindow", + "legend": "Legend", "display-legend": "Display legend", "datasources": "Datasources", "maximum-datasources": "Maximum { count, plural, 1 {1 datasource is allowed.} other {# datasources are allowed} }", @@ -3071,9 +3072,11 @@ "delete-action": "Delete action", "delete-action-title": "Delete widget action", "delete-action-text": "Are you sure you want delete widget action with name '{{actionName}}'?", + "title-icon": "Title icon", "display-icon": "Display title icon", "icon-color": "Icon color", - "icon-size": "Icon size" + "icon-size": "Icon size", + "advanced-settings": "Advanced settings" }, "widget-type": { "import": "Import widget type", diff --git a/ui-ngx/src/assets/locale/locale.constant-ru_RU.json b/ui-ngx/src/assets/locale/locale.constant-ru_RU.json index 35df70e300..65381458ce 100644 --- a/ui-ngx/src/assets/locale/locale.constant-ru_RU.json +++ b/ui-ngx/src/assets/locale/locale.constant-ru_RU.json @@ -1631,7 +1631,7 @@ "advanced": "Дополнительно", "title": "Название", "general-settings": "Общие настройки", - "display-title": "Показать название", + "display-title": "Показать название на виджете", "drop-shadow": "Тень", "enable-fullscreen": "Во весь экран", "background-color": "Цвет фона", @@ -1640,7 +1640,7 @@ "margin": "Margin", "widget-style": "Стиль виджета", "title-style": "Стиль названия", - "mobile-mode-settings": "Настройки мобильного режима", + "mobile-mode-settings": "Мобильный режим", "order": "Порядок", "height": "Высота", "units": "Специальный символ после значения", @@ -1648,6 +1648,7 @@ "timewindow": "Временное окно", "use-dashboard-timewindow": "Использовать временное окно дашборда", "display-timewindow": "Показывать временное окно", + "legend": "Легенда", "display-legend": "Показать легенду", "datasources": "Источники данных", "maximum-datasources": "Максимальной количество источников данных равно {{count}}", @@ -1673,9 +1674,11 @@ "delete-action": "Удалить действие", "delete-action-title": "Удалить действие виджета", "delete-action-text": "Вы точно хотите удалить действие виджета '{{actionName}}'?", - "display-icon": "Показывать иконку в названии", + "title-icon": "Иконка в названии виджета", + "display-icon": "Показывать иконку в названии виджета", "icon-color": "Цвет иконки", - "icon-size": "Размер иконки" + "icon-size": "Размер иконки", + "advanced-settings": "Расширенные настройки" }, "widget-type": { "import": "Импортировать тип виджета", diff --git a/ui-ngx/src/assets/locale/locale.constant-uk_UA.json b/ui-ngx/src/assets/locale/locale.constant-uk_UA.json index 257a3519a9..b4620a937d 100644 --- a/ui-ngx/src/assets/locale/locale.constant-uk_UA.json +++ b/ui-ngx/src/assets/locale/locale.constant-uk_UA.json @@ -2202,7 +2202,7 @@ "advanced": "Додатково", "title": "Назва", "general-settings": "Загальні налаштування", - "display-title": "Відобразити назву", + "display-title": "Відобразити назву у віджеті", "drop-shadow": "Тінь", "enable-fullscreen": "Увімкнути повноекранний режим", "enable-data-export": "Увімкнути експорт даних", @@ -2212,7 +2212,7 @@ "margin": "Границі", "widget-style": "Стиль віджетів", "title-style": "Стиль заголовка", - "mobile-mode-settings": "Налаштування мобільного режиму", + "mobile-mode-settings": "мобільний режим", "order": "Порядок", "height": "Висота", "units": "Спеціальний символ після значення", @@ -2220,6 +2220,7 @@ "timewindow": "Вікно часу", "use-dashboard-timewindow": "Використати вікно часу на панелі візуалізації", "display-timewindow": "Показувати вікно часу", + "legend": "Легенда", "display-legend": "Показати легенду", "datasources": "Джерела даних", "maximum-datasources": "Максимально { count, plural, 1 {1 дозволене джерело даних.} other {# дозволені джерела даних } }", @@ -2245,9 +2246,11 @@ "delete-action": "Видалити дію", "delete-action-title": "Видалити дію віджета", "delete-action-text": "Ви впевнені, що хочете видалити дію віджета '{{actionName}}'?", - "display-icon": "Показувати іконку у назві", + "title-icon": "Іконка у назві віджету", + "display-icon": "Показувати іконку у назві віджету", "icon-color": "Колір іконки", - "icon-size": "Розмір іконки" + "icon-size": "Розмір іконки", + "advanced-settings": "Розширені налаштування" }, "widget-type": { "import": "Імпортувати тип віджета", From 84f2bdd2dedfde61b9360bc28456aa91ac773008 Mon Sep 17 00:00:00 2001 From: ArtemDzhereleiko Date: Wed, 27 Oct 2021 15:26:10 +0300 Subject: [PATCH 2/7] Delete Legend config panel component --- .../home/components/home-components.module.ts | 2 - .../widget/legend-config-panel.component.html | 60 ---------- .../widget/legend-config-panel.component.scss | 32 ------ .../widget/legend-config-panel.component.ts | 105 ------------------ 4 files changed, 199 deletions(-) delete mode 100644 ui-ngx/src/app/modules/home/components/widget/legend-config-panel.component.html delete mode 100644 ui-ngx/src/app/modules/home/components/widget/legend-config-panel.component.scss delete mode 100644 ui-ngx/src/app/modules/home/components/widget/legend-config-panel.component.ts diff --git a/ui-ngx/src/app/modules/home/components/home-components.module.ts b/ui-ngx/src/app/modules/home/components/home-components.module.ts index 71b983b4d4..5e0752fcbc 100644 --- a/ui-ngx/src/app/modules/home/components/home-components.module.ts +++ b/ui-ngx/src/app/modules/home/components/home-components.module.ts @@ -49,7 +49,6 @@ import { EntityAliasSelectComponent } from '@home/components/alias/entity-alias- import { DataKeysComponent } from '@home/components/widget/data-keys.component'; import { DataKeyConfigDialogComponent } from '@home/components/widget/data-key-config-dialog.component'; import { DataKeyConfigComponent } from '@home/components/widget/data-key-config.component'; -import { LegendConfigPanelComponent } from '@home/components/widget/legend-config-panel.component'; import { LegendConfigComponent } from '@home/components/widget/legend-config.component'; import { ManageWidgetActionsComponent } from '@home/components/widget/action/manage-widget-actions.component'; import { WidgetActionDialogComponent } from '@home/components/widget/action/widget-action-dialog.component'; @@ -182,7 +181,6 @@ import { DeviceProfileCommonModule } from '@home/components/profile/device/commo DataKeysComponent, DataKeyConfigComponent, DataKeyConfigDialogComponent, - LegendConfigPanelComponent, LegendConfigComponent, ManageWidgetActionsComponent, WidgetActionDialogComponent, diff --git a/ui-ngx/src/app/modules/home/components/widget/legend-config-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/legend-config-panel.component.html deleted file mode 100644 index d88900f1a5..0000000000 --- a/ui-ngx/src/app/modules/home/components/widget/legend-config-panel.component.html +++ /dev/null @@ -1,60 +0,0 @@ - -
-
-
-
-
- - legend.direction - - - {{ legendDirectionTranslations.get(legendDirection[direction]) | translate }} - - - - - legend.position - - - {{ legendPositionTranslations.get(legendPosition[pos]) | translate }} - - - - - {{ 'legend.sort-legend' | translate }} - - - {{ 'legend.show-min' | translate }} - - - {{ 'legend.show-max' | translate }} - - - {{ 'legend.show-avg' | translate }} - - - {{ 'legend.show-total' | translate }} - -
-
-
-
-
diff --git a/ui-ngx/src/app/modules/home/components/widget/legend-config-panel.component.scss b/ui-ngx/src/app/modules/home/components/widget/legend-config-panel.component.scss deleted file mode 100644 index 1432b28318..0000000000 --- a/ui-ngx/src/app/modules/home/components/widget/legend-config-panel.component.scss +++ /dev/null @@ -1,32 +0,0 @@ -/** - * Copyright © 2016-2021 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. - */ -:host { - width: 100%; - height: 100%; - form, - fieldset { - height: 100%; - } - - .mat-content { - overflow: hidden; - background-color: #fff; - } - - .mat-padding { - padding: 16px; - } -} diff --git a/ui-ngx/src/app/modules/home/components/widget/legend-config-panel.component.ts b/ui-ngx/src/app/modules/home/components/widget/legend-config-panel.component.ts deleted file mode 100644 index c977155428..0000000000 --- a/ui-ngx/src/app/modules/home/components/widget/legend-config-panel.component.ts +++ /dev/null @@ -1,105 +0,0 @@ -/// -/// Copyright © 2016-2021 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. -/// - -import { Component, Inject, InjectionToken, OnInit, ViewContainerRef } from '@angular/core'; -import { OverlayRef } from '@angular/cdk/overlay'; -import { PageComponent } from '@shared/components/page.component'; -import { Store } from '@ngrx/store'; -import { AppState } from '@core/core.state'; -import { FormBuilder, FormGroup } from '@angular/forms'; -import { - LegendConfig, - LegendDirection, - legendDirectionTranslationMap, - LegendPosition, - legendPositionTranslationMap -} from '@shared/models/widget.models'; - -export const LEGEND_CONFIG_PANEL_DATA = new InjectionToken('LegendConfigPanelData'); - -export interface LegendConfigPanelData { - legendConfig: LegendConfig; - legendConfigUpdated: (legendConfig: LegendConfig) => void; -} - -@Component({ - selector: 'tb-legend-config-panel', - templateUrl: './legend-config-panel.component.html', - styleUrls: ['./legend-config-panel.component.scss'] -}) -export class LegendConfigPanelComponent extends PageComponent implements OnInit { - - legendConfigForm: FormGroup; - - legendDirection = LegendDirection; - - legendDirections = Object.keys(LegendDirection); - - legendDirectionTranslations = legendDirectionTranslationMap; - - legendPosition = LegendPosition; - - legendPositions = Object.keys(LegendPosition); - - legendPositionTranslations = legendPositionTranslationMap; - - constructor(@Inject(LEGEND_CONFIG_PANEL_DATA) public data: LegendConfigPanelData, - public overlayRef: OverlayRef, - protected store: Store, - public fb: FormBuilder, - public viewContainerRef: ViewContainerRef) { - super(store); - } - - ngOnInit(): void { - this.legendConfigForm = this.fb.group({ - direction: [this.data.legendConfig.direction, []], - position: [this.data.legendConfig.position, []], - sortDataKeys: [this.data.legendConfig.sortDataKeys, []], - showMin: [this.data.legendConfig.showMin, []], - showMax: [this.data.legendConfig.showMax, []], - showAvg: [this.data.legendConfig.showAvg, []], - showTotal: [this.data.legendConfig.showTotal, []] - }); - this.legendConfigForm.get('direction').valueChanges.subscribe((direction: LegendDirection) => { - this.onDirectionChanged(direction); - }); - this.onDirectionChanged(this.data.legendConfig.direction); - this.legendConfigForm.valueChanges.subscribe(() => { - this.update(); - }); - } - - private onDirectionChanged(direction: LegendDirection) { - if (direction === LegendDirection.row) { - let position: LegendPosition = this.legendConfigForm.get('position').value; - if (position !== LegendPosition.bottom && position !== LegendPosition.top) { - position = LegendPosition.bottom; - } - this.legendConfigForm.patchValue( - { - position - }, {emitEvent: false} - ); - } - } - - update() { - const newLegendConfig: LegendConfig = this.legendConfigForm.value; - this.data.legendConfigUpdated(newLegendConfig); - } - -} From 3f8ef73de0d684e1b2a092c56736c79123d0d395 Mon Sep 17 00:00:00 2001 From: ArtemDzhereleiko Date: Wed, 27 Oct 2021 19:12:23 +0300 Subject: [PATCH 3/7] Change position advanced settings and add lazy loadin for expansion panel --- .../widget/widget-config.component.html | 62 ++++++++++--------- 1 file changed, 33 insertions(+), 29 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html index 7e69ca704a..4f379d95d4 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html @@ -310,21 +310,6 @@
- - - - widget-config.advanced-settings - - -
- -
-
widget-config.title-icon @@ -347,6 +332,21 @@
+ + + + widget-config.advanced-settings + + + + + +
widget-config.widget-style @@ -391,14 +391,14 @@ widget-config.advanced-settings -
+ -
+
@@ -414,7 +414,9 @@ widget-config.advanced-settings - + + +
@@ -430,17 +432,19 @@ widget-config.advanced-settings -
- - widget-config.order - - - - widget-config.height - - -
+ +
+ + widget-config.order + + + + widget-config.height + + +
+
Date: Thu, 28 Oct 2021 09:57:34 +0300 Subject: [PATCH 4/7] Add function onDirection Change for Legend --- .../components/widget/legend-config.component.ts | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/ui-ngx/src/app/modules/home/components/widget/legend-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/legend-config.component.ts index d4ec111bb9..eb38e0adb1 100644 --- a/ui-ngx/src/app/modules/home/components/widget/legend-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/legend-config.component.ts @@ -76,6 +76,20 @@ export class LegendConfigComponent implements OnInit, OnDestroy, ControlValueAcc showAvg: [null, []], showTotal: [null, []] }); + this.legendConfigForm.get('direction').valueChanges.subscribe((direction: LegendDirection) => { + this.onDirectionChanged(direction); + }); + } + + private onDirectionChanged(direction: LegendDirection) { + if (direction === LegendDirection.row) { + let position: LegendPosition = this.legendConfigForm.get('position').value; + if (position !== LegendPosition.bottom && position !== LegendPosition.top) { + position = LegendPosition.bottom; + } + this.legendConfigForm.patchValue({position}, {emitEvent: false} + ); + } } ngOnDestroy(): void { @@ -125,6 +139,7 @@ export class LegendConfigComponent implements OnInit, OnDestroy, ControlValueAcc showTotal: isDefined(this.legendSettings.showTotal) ? this.legendSettings.showTotal : false }); } + this.onDirectionChanged(this.legendSettings.direction); this.createChangeSubscriptions(); } From 560e3fe1dfb08dc3decd30733dc6814a23bb374e Mon Sep 17 00:00:00 2001 From: ArtemDzhereleiko Date: Thu, 28 Oct 2021 10:18:58 +0300 Subject: [PATCH 5/7] Disable icon title click event --- .../material-icon-select.component.ts | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/ui-ngx/src/app/shared/components/material-icon-select.component.ts b/ui-ngx/src/app/shared/components/material-icon-select.component.ts index 5878751ac9..12f7e3f11f 100644 --- a/ui-ngx/src/app/shared/components/material-icon-select.component.ts +++ b/ui-ngx/src/app/shared/components/material-icon-select.component.ts @@ -92,14 +92,16 @@ export class MaterialIconSelectComponent extends PageComponent implements OnInit } openIconDialog() { - this.dialogs.materialIconPicker(this.materialIconFormGroup.get('icon').value).subscribe( - (icon) => { - if (icon) { - this.materialIconFormGroup.patchValue( - {icon}, {emitEvent: true} - ); + if (!this.disabled) { + this.dialogs.materialIconPicker(this.materialIconFormGroup.get('icon').value).subscribe( + (icon) => { + if (icon) { + this.materialIconFormGroup.patchValue( + {icon}, {emitEvent: true} + ); + } } - } - ); + ); + } } } From e196150d3c672bd14e31271d428ed0bcd8040aba Mon Sep 17 00:00:00 2001 From: ArtemDzhereleiko Date: Thu, 28 Oct 2021 11:21:03 +0300 Subject: [PATCH 6/7] Transfer units and dicimals fields to data tab --- .../widget/widget-config.component.html | 31 ++++++++++++------- .../assets/locale/locale.constant-en_US.json | 5 +-- .../assets/locale/locale.constant-ru_RU.json | 3 +- .../assets/locale/locale.constant-uk_UA.json | 3 +- 4 files changed, 27 insertions(+), 15 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html index 4f379d95d4..0121b07cf6 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html @@ -290,6 +290,26 @@
+
+ + + widget-config.data-settings + + +
+ + widget-config.units + + + + widget-config.decimals + + +
+ + +
@@ -447,17 +467,6 @@ -
- - widget-config.units - - - - widget-config.decimals - - -
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index dd719d3258..7451e2c1b9 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -3028,7 +3028,7 @@ "general-settings": "General settings", "display-title": "Display widget title", "drop-shadow": "Drop shadow", - "enable-fullscreen": "Allow fullscreen", + "enable-fullscreen": "Enable fullscreen", "background-color": "Background color", "text-color": "Text color", "padding": "Padding", @@ -3076,7 +3076,8 @@ "display-icon": "Display title icon", "icon-color": "Icon color", "icon-size": "Icon size", - "advanced-settings": "Advanced settings" + "advanced-settings": "Advanced settings", + "data-settings": "Data settings" }, "widget-type": { "import": "Import widget type", diff --git a/ui-ngx/src/assets/locale/locale.constant-ru_RU.json b/ui-ngx/src/assets/locale/locale.constant-ru_RU.json index 65381458ce..d6fefd0e55 100644 --- a/ui-ngx/src/assets/locale/locale.constant-ru_RU.json +++ b/ui-ngx/src/assets/locale/locale.constant-ru_RU.json @@ -1678,7 +1678,8 @@ "display-icon": "Показывать иконку в названии виджета", "icon-color": "Цвет иконки", "icon-size": "Размер иконки", - "advanced-settings": "Расширенные настройки" + "advanced-settings": "Расширенные настройки", + "data-settings": "Настройки данных" }, "widget-type": { "import": "Импортировать тип виджета", diff --git a/ui-ngx/src/assets/locale/locale.constant-uk_UA.json b/ui-ngx/src/assets/locale/locale.constant-uk_UA.json index b4620a937d..0031ca2ad0 100644 --- a/ui-ngx/src/assets/locale/locale.constant-uk_UA.json +++ b/ui-ngx/src/assets/locale/locale.constant-uk_UA.json @@ -2250,7 +2250,8 @@ "display-icon": "Показувати іконку у назві віджету", "icon-color": "Колір іконки", "icon-size": "Розмір іконки", - "advanced-settings": "Розширені налаштування" + "advanced-settings": "Розширені налаштування", + "data-settings": "Налаштування даних" }, "widget-type": { "import": "Імпортувати тип віджета", From c1823ff1e2b7ecc72faeefb49d300f0a3fcaf430 Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Thu, 28 Oct 2021 13:41:37 +0300 Subject: [PATCH 7/7] UI: Refactoring widget settings --- .../widget/legend-config.component.html | 6 +- .../widget/legend-config.component.ts | 78 ++- .../widget/widget-config.component.html | 458 +++++++++--------- .../widget/widget-config.component.scss | 7 +- 4 files changed, 269 insertions(+), 280 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/legend-config.component.html b/ui-ngx/src/app/modules/home/components/widget/legend-config.component.html index 46faecb9f5..7d824a0186 100644 --- a/ui-ngx/src/app/modules/home/components/widget/legend-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/legend-config.component.html @@ -38,9 +38,6 @@
- - {{ 'legend.sort-legend' | translate }} - {{ 'legend.show-min' | translate }} @@ -53,5 +50,8 @@ {{ 'legend.show-total' | translate }} + + {{ 'legend.sort-legend' | translate }} +
diff --git a/ui-ngx/src/app/modules/home/components/widget/legend-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/legend-config.component.ts index eb38e0adb1..1fa5e166f4 100644 --- a/ui-ngx/src/app/modules/home/components/widget/legend-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/legend-config.component.ts @@ -14,14 +14,7 @@ /// limitations under the License. /// -import { - Component, - forwardRef, - Input, - OnDestroy, - OnInit, - ViewContainerRef -} from '@angular/core'; +import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core'; import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms'; import { isDefined } from '@core/utils'; import { @@ -32,6 +25,7 @@ import { legendPositionTranslationMap } from '@shared/models/widget.models'; import { Subscription } from 'rxjs'; + // @dynamic @Component({ selector: 'tb-legend-config', @@ -49,7 +43,6 @@ export class LegendConfigComponent implements OnInit, OnDestroy, ControlValueAcc @Input() disabled: boolean; - legendSettings: LegendConfig; legendConfigForm: FormGroup; legendDirection = LegendDirection; legendDirections = Object.keys(LegendDirection); @@ -58,12 +51,11 @@ export class LegendConfigComponent implements OnInit, OnDestroy, ControlValueAcc legendPositions = Object.keys(LegendPosition); legendPositionTranslations = legendPositionTranslationMap; - legendSettingsChangesSubscription: Subscription; - + private legendSettingsFormChanges$: Subscription; + private legendSettingsFormDirectionChanges$: Subscription; private propagateChange = (_: any) => {}; - constructor(public fb: FormBuilder, - public viewContainerRef: ViewContainerRef) { + constructor(private fb: FormBuilder) { } ngOnInit(): void { @@ -76,9 +68,13 @@ export class LegendConfigComponent implements OnInit, OnDestroy, ControlValueAcc showAvg: [null, []], showTotal: [null, []] }); - this.legendConfigForm.get('direction').valueChanges.subscribe((direction: LegendDirection) => { - this.onDirectionChanged(direction); - }); + this.legendSettingsFormDirectionChanges$ = this.legendConfigForm.get('direction').valueChanges + .subscribe((direction: LegendDirection) => { + this.onDirectionChanged(direction); + }); + this.legendSettingsFormChanges$ = this.legendConfigForm.valueChanges.subscribe( + () => this.legendConfigUpdated() + ); } private onDirectionChanged(direction: LegendDirection) { @@ -93,7 +89,14 @@ export class LegendConfigComponent implements OnInit, OnDestroy, ControlValueAcc } ngOnDestroy(): void { - this.removeChangeSubscriptions(); + if (this.legendSettingsFormDirectionChanges$) { + this.legendSettingsFormDirectionChanges$.unsubscribe(); + this.legendSettingsFormDirectionChanges$ = null; + } + if (this.legendSettingsFormChanges$) { + this.legendSettingsFormChanges$.unsubscribe(); + this.legendSettingsFormChanges$ = null; + } } registerOnChange(fn: any): void { @@ -112,39 +115,22 @@ export class LegendConfigComponent implements OnInit, OnDestroy, ControlValueAcc } } - private removeChangeSubscriptions() { - if (this.legendSettingsChangesSubscription) { - this.legendSettingsChangesSubscription.unsubscribe(); - this.legendSettingsChangesSubscription = null; - } - } - - private createChangeSubscriptions() { - this.legendSettingsChangesSubscription = this.legendConfigForm.valueChanges.subscribe( - () => this.legendConfigUpdated() - ); - } - - writeValue(obj: LegendConfig): void { - this.legendSettings = obj; - this.removeChangeSubscriptions(); - if (this.legendSettings) { + writeValue(legendConfig: LegendConfig): void { + if (legendConfig) { this.legendConfigForm.patchValue({ - direction: this.legendSettings.direction, - position: this.legendSettings.position, - sortDataKeys: isDefined(this.legendSettings.sortDataKeys) ? this.legendSettings.sortDataKeys : false, - showMin: isDefined(this.legendSettings.showMin) ? this.legendSettings.showMin : false, - showMax: isDefined(this.legendSettings.showMax) ? this.legendSettings.showMax : false, - showAvg: isDefined(this.legendSettings.showAvg) ? this.legendSettings.showAvg : false, - showTotal: isDefined(this.legendSettings.showTotal) ? this.legendSettings.showTotal : false - }); + direction: legendConfig.direction, + position: legendConfig.position, + sortDataKeys: isDefined(legendConfig.sortDataKeys) ? legendConfig.sortDataKeys : false, + showMin: isDefined(legendConfig.showMin) ? legendConfig.showMin : false, + showMax: isDefined(legendConfig.showMax) ? legendConfig.showMax : false, + showAvg: isDefined(legendConfig.showAvg) ? legendConfig.showAvg : false, + showTotal: isDefined(legendConfig.showTotal) ? legendConfig.showTotal : false + }, {emitEvent: false}); } - this.onDirectionChanged(this.legendSettings.direction); - this.createChangeSubscriptions(); + this.onDirectionChanged(legendConfig.direction); } private legendConfigUpdated() { - this.legendSettings = this.legendConfigForm.value; - this.propagateChange(this.legendSettings); + this.propagateChange(this.legendConfigForm.value); } } diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html index 0121b07cf6..555e489afa 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html @@ -82,241 +82,241 @@ - - - -
widget-config.datasources
-
{{ 'widget-config.maximum-datasources' | translate:{count: modelValue?.typeParameters.maxDatasources} }}
- - -
- datasource.add-datasource-prompt -
- -
- -
- widget-config.datasource-type - widget-config.datasource-parameters - -
+ + + + +
widget-config.datasources
+
{{ 'widget-config.maximum-datasources' | translate:{count: modelValue?.typeParameters.maxDatasources} }}
+ + +
+ datasource.add-datasource-prompt
-
- - - - -
-
- - {{$index + 1}}. -
-
-
- - - - {{ datasourceTypesTranslations.get(datasourceType) | translate }} - - - -
- - - - - - - - - - - - - - - - + +
+ +
+ widget-config.datasource-type + widget-config.datasource-parameters + +
+
+
+ + + + +
+
+ + {{$index + 1}}. +
+
+
+ + + + {{ datasourceTypesTranslations.get(datasourceType) | translate }} + + + +
+ + + + + + + + + + + + + + + + +
+ +
- - -
- + +
-
- - + + +
+ +
+
- -
- -
- - - - - {{ 'widget-config.target-device' | translate }} - - -
- - -
- - - - - {{ 'widget-config.alarm-source' | translate }} - - -
-
- - - - {{ datasourceTypesTranslations.get(datasourceType) | translate }} - - - -
- - - - - - + + + + + {{ 'widget-config.target-device' | translate }} + + +
+ + +
+ + + + + {{ 'widget-config.alarm-source' | translate }} + + +
+
+ + + + {{ datasourceTypesTranslations.get(datasourceType) | translate }} + + + +
+ + + + + + +
+ +
- - -
-
- - -
- - - widget-config.data-settings - - -
- - widget-config.units - - - - widget-config.decimals - -
- - + + + + widget-config.data-settings + + +
+ + widget-config.units + + + + widget-config.decimals + + +
+ + +
-
+
widget-config.title - + {{ 'widget-config.display-title' | translate }}
-
+
widget-config.title-icon {{ 'widget-config.display-icon' | translate }} @@ -368,10 +368,10 @@
-
+
widget-config.widget-style
+ fxFlex="100%" fxLayoutGap="8px" class="tb-widget-style">
- + {{ 'widget-config.drop-shadow' | translate }} @@ -421,7 +421,7 @@
-
+
widget-config.legend @@ -439,7 +439,7 @@
-
+
widget-config.mobile-mode-settings diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.scss b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.scss index 4c4fa317ce..8d8cd742c6 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.scss @@ -85,6 +85,9 @@ padding: 0 16px 8px; } } + .tb-widget-style { + margin-top: 16px; + } } } @@ -128,10 +131,10 @@ align-items: center; } .mat-expansion-panel-body{ - padding: 0 0 16px; + padding: 0; } .tb-json-object-panel { - margin: 0; + margin: 0 0 8px; } .mat-checkbox-layout { margin: 5px 0;