From df9f61c1af3b0c220c543102b3b3570f314d6a87 Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Mon, 24 Mar 2025 17:15:52 +0200 Subject: [PATCH 1/4] UI: Refactoring popover service. Add single config --- .../components/color-input.component.ts | 23 ++-- .../shared/components/popover.component.ts | 10 +- .../app/shared/components/popover.models.ts | 38 ++++++ .../app/shared/components/popover.service.ts | 122 +++++++++++++----- 4 files changed, 151 insertions(+), 42 deletions(-) diff --git a/ui-ngx/src/app/shared/components/color-input.component.ts b/ui-ngx/src/app/shared/components/color-input.component.ts index 00ef7059d7..d0dc7235f7 100644 --- a/ui-ngx/src/app/shared/components/color-input.component.ts +++ b/ui-ngx/src/app/shared/components/color-input.component.ts @@ -196,14 +196,21 @@ export class ColorInputComponent extends PageComponent implements OnInit, Contro if (this.popoverService.hasPopover(trigger)) { this.popoverService.hidePopover(trigger); } else { - const colorPickerPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, ColorPickerPanelComponent, ['left'], true, null, - { - color: this.colorFormGroup.get('color').value, - colorClearButton: this.colorClearButton, - colorCancelButton: true - }, - {}, {}, {}, false, () => {}, {padding: '12px 4px 12px 12px'}); + const colorPickerPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + hostView: this.viewContainerRef, + componentType: ColorPickerPanelComponent, + preferredPlacement: ['left'], + context: { + color: this.colorFormGroup.get('color').value, + colorClearButton: this.colorClearButton, + colorCancelButton: true + }, + showCloseButton: false, + popoverContentStyle: {padding: '12px 4px 12px 12px'}, + isModal: true + }) colorPickerPopover.tbComponentRef.instance.popover = colorPickerPopover; colorPickerPopover.tbComponentRef.instance.colorSelected.subscribe((color) => { colorPickerPopover.hide(); diff --git a/ui-ngx/src/app/shared/components/popover.component.ts b/ui-ngx/src/app/shared/components/popover.component.ts index 21cf4a83c5..4344b32fd7 100644 --- a/ui-ngx/src/app/shared/components/popover.component.ts +++ b/ui-ngx/src/app/shared/components/popover.component.ts @@ -311,6 +311,7 @@ export class TbPopoverDirective implements OnChanges, OnDestroy, AfterViewInit { #overlay="cdkConnectedOverlay" cdkConnectedOverlay [cdkConnectedOverlayHasBackdrop]="hasBackdrop" + [cdkConnectedOverlayBackdropClass]="backdropClass" [cdkConnectedOverlayOrigin]="origin" [cdkConnectedOverlayPositions]="positions" [cdkConnectedOverlayScrollStrategy]="scrollStrategy" @@ -382,6 +383,7 @@ export class TbPopoverComponent implements OnDestroy, OnInit { tbMouseLeaveDelay?: number; tbHideOnClickOutside = true; tbShowCloseButton = true; + tbModal = false; tbAnimationState = 'active'; @@ -461,7 +463,11 @@ export class TbPopoverComponent implements OnDestroy, OnInit { } get hasBackdrop(): boolean { - return this.tbTrigger === 'click' ? this.tbBackdrop : false; + return this.tbModal || (this.tbTrigger === 'click' && this.tbBackdrop); + } + + get backdropClass(): string { + return this.tbModal ? 'tb-popover-overlay-backdrop' : ''; } preferredPlacement: PopoverPlacement = 'top'; @@ -634,7 +640,7 @@ export class TbPopoverComponent implements OnDestroy, OnInit { } onClickOutside(event: MouseEvent): void { - if (this.tbHideOnClickOutside && !this.origin.elementRef.nativeElement.contains(event.target) && this.tbTrigger !== null) { + if (!this.tbModal && this.tbHideOnClickOutside && !this.origin.elementRef.nativeElement.contains(event.target) && this.tbTrigger !== null) { if (!this.isTopOverlay(event.target as Element)) { this.hide(); } diff --git a/ui-ngx/src/app/shared/components/popover.models.ts b/ui-ngx/src/app/shared/components/popover.models.ts index 15db9b1f93..9fb01d1f3d 100644 --- a/ui-ngx/src/app/shared/components/popover.models.ts +++ b/ui-ngx/src/app/shared/components/popover.models.ts @@ -18,6 +18,7 @@ import { animate, AnimationTriggerMetadata, style, transition, trigger } from '@ import { ConnectedOverlayPositionChange } from '@angular/cdk/overlay'; import { TbPopoverComponent } from '@shared/components/popover.component'; import { POSITION_MAP } from '@shared/models/overlay.models'; +import { ComponentRef, Injector, Renderer2, Type, ViewContainerRef } from '@angular/core'; export const popoverMotion: AnimationTriggerMetadata = trigger('popoverMotion', [ transition('void => active', [ @@ -88,3 +89,40 @@ export interface PopoverWithTrigger { trigger: Element; popoverComponent: TbPopoverComponent; } + +export interface DisplayPopoverConfig extends Omit, 'componentRef'>{ + hostView: ViewContainerRef; +} + +export interface DisplayPopoverWithComponentRefConfig { + componentRef: ComponentRef + trigger: Element; + renderer: Renderer2; + componentType: Type; + preferredPlacement?: PopoverPreferredPlacement; + hideOnClickOutside?: boolean; + injector?: Injector; + context?: any; + overlayStyle?: any; + popoverStyle?: any; + style?: any, + showCloseButton?: boolean; + visibleFn?: (visible: boolean) => void; + popoverContentStyle?: any; + isModal?: boolean; +} + +export const defaultPopoverConfig: DisplayPopoverWithComponentRefConfig = { + componentRef: undefined, + trigger: undefined, + renderer: undefined, + componentType: undefined, + preferredPlacement: 'top', + hideOnClickOutside: true, + overlayStyle: {}, + popoverStyle: {}, + showCloseButton: true, + visibleFn: () => {}, + popoverContentStyle: {}, + isModal: false +}; diff --git a/ui-ngx/src/app/shared/components/popover.service.ts b/ui-ngx/src/app/shared/components/popover.service.ts index ce1288651c..15a18fb2fc 100644 --- a/ui-ngx/src/app/shared/components/popover.service.ts +++ b/ui-ngx/src/app/shared/components/popover.service.ts @@ -24,12 +24,19 @@ import { Type, ViewContainerRef } from '@angular/core'; -import { PopoverPreferredPlacement, PopoverWithTrigger } from '@shared/components/popover.models'; +import { + defaultPopoverConfig, + DisplayPopoverConfig, + DisplayPopoverWithComponentRefConfig, + PopoverPreferredPlacement, + PopoverWithTrigger +} from '@shared/components/popover.models'; import { TbPopoverComponent } from '@shared/components/popover.component'; import { ComponentType } from '@angular/cdk/portal'; import { HELP_MARKDOWN_COMPONENT_TOKEN } from '@shared/components/tokens'; import { CdkOverlayOrigin } from '@angular/cdk/overlay'; import { Observable } from 'rxjs'; +import { mergeDeep } from '@core/utils'; @Injectable() export class TbPopoverService { @@ -58,57 +65,108 @@ export class TbPopoverService { return hostView.createComponent(TbPopoverComponent); } + displayPopover(config: DisplayPopoverConfig): TbPopoverComponent; displayPopover(trigger: Element, renderer: Renderer2, hostView: ViewContainerRef, - componentType: Type, preferredPlacement: PopoverPreferredPlacement = 'top', - hideOnClickOutside = true, injector?: Injector, context?: any, overlayStyle: any = {}, - popoverStyle: any = {}, style?: any, - showCloseButton = true, visibleFn: (visible: boolean) => void = () => {}, - popoverContentStyle: any = {}): TbPopoverComponent { - const componentRef = this.createPopoverRef(hostView); - return this.displayPopoverWithComponentRef(componentRef, trigger, renderer, componentType, preferredPlacement, hideOnClickOutside, - injector, context, overlayStyle, popoverStyle, style, showCloseButton, visibleFn, popoverContentStyle); + componentType: Type, preferredPlacement: PopoverPreferredPlacement, + hideOnClickOutside: boolean, injector?: Injector, context?: any, overlayStyle?: any, + popoverStyle?: any, style?: any, + showCloseButton?: boolean, visibleFn?: (visible: boolean) => void, + popoverContentStyle?: any): TbPopoverComponent; + displayPopover(config: Element | DisplayPopoverConfig, renderer?: Renderer2, hostView?: ViewContainerRef, + componentType?: Type, preferredPlacement?: PopoverPreferredPlacement, + hideOnClickOutside?: boolean, injector?: Injector, context?: any, overlayStyle?: any, + popoverStyle?: any, style?: any, + showCloseButton?: boolean, visibleFn?: (visible: boolean) => void, + popoverContentStyle?: any): TbPopoverComponent { + if (!(config instanceof Element) && 'trigger' in config && 'renderer' in config && 'componentType' in config) { + const componentRef = this.createPopoverRef(config.hostView); + return this.displayPopoverWithComponentRef({ ...config, componentRef }) + } else if (config instanceof Element) { + const componentRef = this.createPopoverRef(hostView); + return this.displayPopoverWithComponentRef(componentRef, config, renderer, componentType, preferredPlacement, hideOnClickOutside, + injector, context, overlayStyle, popoverStyle, style, showCloseButton, visibleFn, popoverContentStyle); + } else { + throw new Error("Invalid configuration provided for displayPopover"); + } } + displayPopoverWithComponentRef(config: DisplayPopoverWithComponentRefConfig): TbPopoverComponent; displayPopoverWithComponentRef(componentRef: ComponentRef, trigger: Element, renderer: Renderer2, - componentType: Type, preferredPlacement: PopoverPreferredPlacement = 'top', - hideOnClickOutside = true, injector?: Injector, context?: any, overlayStyle: any = {}, - popoverStyle: any = {}, style?: any, showCloseButton = true, - visibleFn: (visible: boolean) => void = () => {}, + componentType: Type, preferredPlacement: PopoverPreferredPlacement, + hideOnClickOutside: boolean, injector?: Injector, context?: any, overlayStyle?: any, + popoverStyle?: any, style?: any, showCloseButton?: boolean, + visibleFn?: (visible: boolean) => void, popoverContentStyle?: any): TbPopoverComponent; + displayPopoverWithComponentRef(config: ComponentRef | DisplayPopoverWithComponentRefConfig, + trigger?: Element, renderer?: Renderer2, componentType?: Type, + preferredPlacement?: PopoverPreferredPlacement, hideOnClickOutside?: boolean, + injector?: Injector, context?: any, overlayStyle?: any, + popoverStyle?: any, style?: any, showCloseButton?: boolean, + visibleFn?: (visible: boolean) => void, popoverContentStyle: any = {}): TbPopoverComponent { - const component = componentRef.instance; + let popoverConfig: DisplayPopoverWithComponentRefConfig; + if (!(config instanceof ComponentRef) && 'trigger' in config && 'renderer' in config && 'componentType' in config) { + popoverConfig = config; + } else if(config instanceof ComponentRef) { + popoverConfig = { + componentRef: config, + trigger, + renderer, + componentType, + preferredPlacement, + hideOnClickOutside, + injector, + context, + overlayStyle, + popoverStyle, + style, + showCloseButton, + visibleFn, + popoverContentStyle + } + } else { + throw new Error("Invalid configuration provided for displayPopoverWithComponentRef"); + } + popoverConfig = mergeDeep({} as any, defaultPopoverConfig, popoverConfig); + return this._displayPopoverWithComponentRef(popoverConfig); + } + + + private _displayPopoverWithComponentRef(conf: DisplayPopoverWithComponentRefConfig): TbPopoverComponent { + const component = conf.componentRef.instance; this.popoverWithTriggers.push({ - trigger, + trigger: conf.trigger, popoverComponent: component }); - renderer.removeChild( - renderer.parentNode(trigger), - componentRef.location.nativeElement + conf.renderer.removeChild( + conf.renderer.parentNode(conf.trigger), + conf.componentRef.location.nativeElement ); - const originElementRef = new ElementRef(trigger); + const originElementRef = new ElementRef(conf.trigger); component.setOverlayOrigin(new CdkOverlayOrigin(originElementRef)); - component.tbPlacement = preferredPlacement; - component.tbComponent = componentType; - component.tbComponentInjector = injector; - component.tbComponentContext = context; - component.tbOverlayStyle = overlayStyle; - component.tbPopoverInnerStyle = popoverStyle; - component.tbPopoverInnerContentStyle = popoverContentStyle; - component.tbComponentStyle = style; - component.tbHideOnClickOutside = hideOnClickOutside; - component.tbShowCloseButton = showCloseButton; + component.tbPlacement = conf.preferredPlacement; + component.tbComponent = conf.componentType; + component.tbComponentInjector = conf.injector; + component.tbComponentContext = conf.context; + component.tbOverlayStyle = conf.overlayStyle; + component.tbModal = conf.isModal; + component.tbPopoverInnerStyle = conf.popoverStyle; + component.tbPopoverInnerContentStyle = conf.popoverContentStyle; + component.tbComponentStyle = conf.style; + component.tbHideOnClickOutside = conf.hideOnClickOutside; + component.tbShowCloseButton = conf.showCloseButton; component.tbVisibleChange.subscribe((visible: boolean) => { if (!visible) { - componentRef.destroy(); + conf.componentRef.destroy(); } }); component.tbDestroy.subscribe(() => { this.removePopoverByComponent(component); }); component.tbHideStart.subscribe(() => { - visibleFn(false); + conf.visibleFn(false); }); component.show(); - visibleFn(true); + conf.visibleFn(true); return component; } From d6739538854ac9e029560c1687320870b183f06b Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Mon, 24 Mar 2025 17:59:53 +0200 Subject: [PATCH 2/4] UI: Refactoring popover to use isModal setting --- .../debug/entity-debug-settings.service.ts | 14 ++-- .../vc/entity-types-version-load.component.ts | 15 +++- .../vc/entity-version-diff.component.ts | 15 +++- .../vc/entity-versions-table.component.ts | 81 +++++++++++++------ .../config/timewindow-style.component.ts | 14 ++-- .../get-value-action-settings.component.ts | 36 +++++---- .../set-value-action-settings.component.ts | 30 +++---- .../widget-action-settings.component.ts | 28 ++++--- .../auto-date-format-settings.component.ts | 21 ++--- .../common/background-settings.component.ts | 19 +++-- .../widget-button-custom-style.component.ts | 28 ++++--- ...et-button-toggle-custom-style.component.ts | 30 +++---- ...es-chart-axis-settings-button.component.ts | 25 +++--- ...ries-chart-threshold-settings.component.ts | 20 +++-- .../time-series-chart-y-axis-row.component.ts | 25 +++--- .../common/color-range-settings.component.ts | 21 ++--- .../common/color-settings.component.ts | 35 ++++---- .../common/date-format-select.component.ts | 39 +++++---- .../dynamic-form-property-row.component.ts | 25 +++--- .../common/font-settings.component.ts | 14 ++-- .../common/key/data-keys.component.ts | 16 ++-- .../data-layer-color-settings.component.ts | 29 ++++--- .../common/map/map-layer-row.component.ts | 19 +++-- .../map/map-tooltip-tag-actions.component.ts | 32 ++++---- .../map/marker-image-settings.component.ts | 19 +++-- .../map/marker-shape-settings.component.ts | 25 +++--- .../applications/mobile-app.component.ts | 16 ++-- .../layout/mobile-page-item-row.component.ts | 31 ++++--- .../scada-symbol-behavior-row.component.ts | 27 ++++--- .../scada-symbol-metadata-tag.component.ts | 28 ++++--- .../pages/widget/widget-editor.component.ts | 14 ++-- .../shared/components/js-func.component.ts | 19 +++-- .../timewindow-config-dialog.component.ts | 32 +++++--- .../components/time/timezone.component.ts | 15 ++-- 34 files changed, 511 insertions(+), 346 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/entity/debug/entity-debug-settings.service.ts b/ui-ngx/src/app/modules/home/components/entity/debug/entity-debug-settings.service.ts index 873d8f0f3f..cb982b9650 100644 --- a/ui-ngx/src/app/modules/home/components/entity/debug/entity-debug-settings.service.ts +++ b/ui-ngx/src/app/modules/home/components/entity/debug/entity-debug-settings.service.ts @@ -37,14 +37,18 @@ export class EntityDebugSettingsService { if (this.popoverService.hasPopover(trigger)) { this.popoverService.hidePopover(trigger); } else { - const debugStrategyPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, EntityDebugSettingsPanelComponent, 'bottom', true, null, - { + const debugStrategyPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + componentType: EntityDebugSettingsPanelComponent, + hostView: this.viewContainerRef, + preferredPlacement: 'bottom', + context: { ...panelConfig.debugSettings, ...panelConfig.debugConfig, }, - {}, - {}, {}, true); + isModal: true, + }); debugStrategyPopover.tbComponentRef.instance.onSettingsApplied.subscribe(settings => { panelConfig.onSettingsAppliedFn(settings); debugStrategyPopover.hide(); diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.ts b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.ts index f06abaf3a8..903712aac8 100644 --- a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.ts +++ b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.ts @@ -232,16 +232,23 @@ export class EntityTypesVersionLoadComponent extends PageComponent implements On if (this.popoverService.hasPopover(trigger)) { this.popoverService.hidePopover(trigger); } else { - const removeOtherEntitiesConfirmPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, RemoveOtherEntitiesConfirmComponent, 'bottom', true, null, - { + const removeOtherEntitiesConfirmPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + componentType: RemoveOtherEntitiesConfirmComponent, + hostView: this.viewContainerRef, + preferredPlacement: 'bottom', + context: { onClose: (result: boolean | null) => { removeOtherEntitiesConfirmPopover.hide(); if (result) { entityTypeControl.get('config').get('removeOtherEntities').patchValue(true, {emitEvent: true}); } } - }, {}, {}, {}, false); + }, + showCloseButton: false, + isModal: true + }); } } } diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.ts b/ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.ts index 1908b5e1fa..19dc945d65 100644 --- a/ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.ts +++ b/ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.ts @@ -304,9 +304,13 @@ export class EntityVersionDiffComponent extends PageComponent implements OnInit, if (this.popoverService.hasPopover(trigger)) { this.popoverService.hidePopover(trigger); } else { - const restoreVersionPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, EntityVersionRestoreComponent, 'leftTop', false, null, - { + const restoreVersionPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + componentType: EntityVersionRestoreComponent, + hostView: this.viewContainerRef, + preferredPlacement: 'leftTop', + context: { versionName: this.versionName, versionId: this.versionId, externalEntityId: this.externalEntityId, @@ -317,7 +321,10 @@ export class EntityVersionDiffComponent extends PageComponent implements OnInit, this.versionRestored.emit(); } } - }, {}, {}, {}, false); + }, + showCloseButton: false, + isModal: true + }); restoreVersionPopover.tbComponentRef.instance.popoverComponent = restoreVersionPopover; } } diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.ts b/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.ts index 2a6d5c5962..fe9af56e4b 100644 --- a/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.ts +++ b/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.ts @@ -211,9 +211,13 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni if (this.popoverService.hasPopover(trigger)) { this.popoverService.hidePopover(trigger); } else { - const createVersionPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, EntityVersionCreateComponent, 'leftTop', false, null, - { + const createVersionPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + componentType: EntityVersionCreateComponent, + hostView: this.viewContainerRef, + preferredPlacement: 'leftTop', + context: { branch: this.branch, entityId: this.entityId, entityName: this.entityName, @@ -229,8 +233,11 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni } } }, - {maxHeight: '100vh', height: '100%', padding: '10px'}, - {width: '400px', minWidth: '100%', maxWidth: '100%'}, {}, false); + showCloseButton: false, + overlayStyle: {maxHeight: '100vh', height: '100%', padding: '10px'}, + popoverStyle: {width: '400px', minWidth: '100%', maxWidth: '100%'}, + isModal: true + }); createVersionPopover.tbComponentRef.instance.popoverComponent = createVersionPopover; } } @@ -243,9 +250,13 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni if (this.popoverService.hasPopover(trigger)) { this.popoverService.hidePopover(trigger); } else { - const complexCreateVersionPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, ComplexVersionCreateComponent, 'leftTop', false, null, - { + const complexCreateVersionPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + componentType: ComplexVersionCreateComponent, + hostView: this.viewContainerRef, + preferredPlacement: 'leftTop', + context: { branch: this.branch, onClose: (result: VersionCreationResult | null, branch: string | null) => { complexCreateVersionPopover.hide(); @@ -258,8 +269,10 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni } } }, - {maxHeight: '90vh', height: '100%', padding: '10px'}, - {}, {}, false); + showCloseButton: false, + overlayStyle: {maxHeight: '90vh', height: '100%', padding: '10px'}, + isModal: true + }); complexCreateVersionPopover.tbComponentRef.instance.popoverComponent = complexCreateVersionPopover; } } @@ -272,14 +285,21 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni if (this.popoverService.hasPopover(trigger)) { this.popoverService.hidePopover(trigger); } else { - const diffVersionPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, EntityVersionDiffComponent, 'leftTop', true, null, - { + const diffVersionPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + componentType: EntityVersionDiffComponent, + hostView: this.viewContainerRef, + preferredPlacement: 'leftTop', + context: { versionName: entityVersion.name, versionId: entityVersion.id, entityId: this.entityId, externalEntityId: this.externalEntityIdValue - }, {}, {}, {}, false); + }, + showCloseButton: false, + isModal: true + }); diffVersionPopover.tbComponentRef.instance.popoverComponent = diffVersionPopover; diffVersionPopover.tbComponentRef.instance.versionRestored.subscribe(() => { this.versionRestored.emit(); @@ -295,9 +315,13 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni if (this.popoverService.hasPopover(trigger)) { this.popoverService.hidePopover(trigger); } else { - const restoreVersionPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, EntityVersionRestoreComponent, 'leftTop', false, null, - { + const restoreVersionPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + componentType: EntityVersionRestoreComponent, + hostView: this.viewContainerRef, + preferredPlacement: 'leftTop', + context: { versionName: entityVersion.name, versionId: entityVersion.id, externalEntityId: this.externalEntityIdValue, @@ -308,8 +332,11 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni } } }, - {maxHeight: '100vh', height: '100%', padding: '10px'}, - {width: '400px', minWidth: '100%', maxWidth: '100%'}, {}, false); + showCloseButton: false, + overlayStyle: {maxHeight: '100vh', height: '100%', padding: '10px'}, + popoverStyle: {width: '400px', minWidth: '100%', maxWidth: '100%'}, + isModal: true + }); restoreVersionPopover.tbComponentRef.instance.popoverComponent = restoreVersionPopover; } } @@ -322,17 +349,23 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni if (this.popoverService.hasPopover(trigger)) { this.popoverService.hidePopover(trigger); } else { - const restoreEntitiesVersionPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, ComplexVersionLoadComponent, 'leftTop', false, null, - { + const restoreEntitiesVersionPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + componentType: ComplexVersionLoadComponent, + hostView: this.viewContainerRef, + preferredPlacement: 'leftTop', + context: { versionName: entityVersion.name, versionId: entityVersion.id, onClose: (result: VersionLoadResult | null) => { restoreEntitiesVersionPopover.hide(); } }, - {maxHeight: '80vh', height: '100%', padding: '10px'}, - {}, {}, false); + showCloseButton: false, + overlayStyle: {maxHeight: '80vh', height: '100%', padding: '10px'}, + isModal: true + }); restoreEntitiesVersionPopover.tbComponentRef.instance.popoverComponent = restoreEntitiesVersionPopover; } } diff --git a/ui-ngx/src/app/modules/home/components/widget/config/timewindow-style.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/timewindow-style.component.ts index 790535acbc..c9675caefa 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/timewindow-style.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/config/timewindow-style.component.ts @@ -80,11 +80,15 @@ export class TimewindowStyleComponent implements OnInit, ControlValueAccessor { timewindowStyle: this.modelValue, previewValue: this.previewValue }; - const timewindowStylePanelPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, TimewindowStylePanelComponent, 'left', true, null, - ctx, - {}, - {}, {}, true); + const timewindowStylePanelPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + hostView: this.viewContainerRef, + componentType: TimewindowStylePanelComponent, + preferredPlacement: 'left', + context: ctx, + isModal: true + }); timewindowStylePanelPopover.tbComponentRef.instance.popover = timewindowStylePanelPopover; timewindowStylePanelPopover.tbComponentRef.instance.timewindowStyleApplied.subscribe((timewindowStyle) => { timewindowStylePanelPopover.hide(); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/get-value-action-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/get-value-action-settings.component.ts index 5b95ef5f13..7bdb17c06a 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/get-value-action-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/get-value-action-settings.component.ts @@ -129,23 +129,25 @@ export class GetValueActionSettingsComponent implements OnInit, ControlValueAcce if (this.popoverService.hasPopover(trigger)) { this.popoverService.hidePopover(trigger); } else { - const ctx: any = { - getValueSettings: this.modelValue, - panelTitle: this.panelTitle, - valueType: this.valueType, - trueLabel: this.trueLabel, - falseLabel: this.falseLabel, - stateLabel: this.stateLabel, - aliasController: this.aliasController, - targetDevice: this.targetDevice, - widgetType: this.widgetType - }; - const getValueSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, GetValueActionSettingsPanelComponent, - ['leftTopOnly', 'leftOnly', 'leftBottomOnly'], false, null, - ctx, - {}, - {}, {}, true); + const getValueSettingsPanelPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + componentType: GetValueActionSettingsPanelComponent, + hostView: this.viewContainerRef, + preferredPlacement: ['leftTopOnly', 'leftOnly', 'leftBottomOnly'], + context: { + getValueSettings: this.modelValue, + panelTitle: this.panelTitle, + valueType: this.valueType, + trueLabel: this.trueLabel, + falseLabel: this.falseLabel, + stateLabel: this.stateLabel, + aliasController: this.aliasController, + targetDevice: this.targetDevice, + widgetType: this.widgetType + }, + isModal: true + }); getValueSettingsPanelPopover.tbComponentRef.instance.popover = getValueSettingsPanelPopover; getValueSettingsPanelPopover.tbComponentRef.instance.getValueSettingsApplied.subscribe((getValueSettings) => { getValueSettingsPanelPopover.hide(); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/set-value-action-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/set-value-action-settings.component.ts index e446e6f5b3..cf90db33ed 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/set-value-action-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/set-value-action-settings.component.ts @@ -115,20 +115,22 @@ export class SetValueActionSettingsComponent implements OnInit, ControlValueAcce if (this.popoverService.hasPopover(trigger)) { this.popoverService.hidePopover(trigger); } else { - const ctx: any = { - setValueSettings: this.modelValue, - panelTitle: this.panelTitle, - valueType: this.valueType, - aliasController: this.aliasController, - targetDevice: this.targetDevice, - widgetType: this.widgetType - }; - const setValueSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, SetValueActionSettingsPanelComponent, - ['leftTopOnly', 'leftOnly', 'leftBottomOnly'], false, null, - ctx, - {}, - {}, {}, true); + const setValueSettingsPanelPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + componentType: SetValueActionSettingsPanelComponent, + hostView: this.viewContainerRef, + preferredPlacement: ['leftTopOnly', 'leftOnly', 'leftBottomOnly'], + context: { + setValueSettings: this.modelValue, + panelTitle: this.panelTitle, + valueType: this.valueType, + aliasController: this.aliasController, + targetDevice: this.targetDevice, + widgetType: this.widgetType + }, + isModal: true + }); setValueSettingsPanelPopover.tbComponentRef.instance.popover = setValueSettingsPanelPopover; setValueSettingsPanelPopover.tbComponentRef.instance.setValueSettingsApplied.subscribe((setValueSettings) => { setValueSettingsPanelPopover.hide(); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action-settings.component.ts index 51583f71fb..de29366846 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action-settings.component.ts @@ -114,19 +114,21 @@ export class WidgetActionSettingsComponent implements OnInit, ControlValueAccess if (this.popoverService.hasPopover(trigger)) { this.popoverService.hidePopover(trigger); } else { - const ctx: any = { - widgetAction: this.modelValue, - panelTitle: this.panelTitle, - widgetType: this.widgetType, - callbacks: this.callbacks, - additionalWidgetActionTypes: this.additionalWidgetActionTypes - }; - const widgetActionSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, WidgetActionSettingsPanelComponent, - ['leftTopOnly', 'leftOnly', 'leftBottomOnly'], false, null, - ctx, - {}, - {}, {}, true); + const widgetActionSettingsPanelPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + componentType: WidgetActionSettingsPanelComponent, + hostView: this.viewContainerRef, + preferredPlacement: ['leftTopOnly', 'leftOnly', 'leftBottomOnly'], + context: { + widgetAction: this.modelValue, + panelTitle: this.panelTitle, + widgetType: this.widgetType, + callbacks: this.callbacks, + additionalWidgetActionTypes: this.additionalWidgetActionTypes + }, + isModal: true + }); widgetActionSettingsPanelPopover.tbComponentRef.instance.widgetActionApplied.subscribe((widgetAction) => { widgetActionSettingsPanelPopover.hide(); this.modelValue = widgetAction; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/auto-date-format-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/auto-date-format-settings.component.ts index 1d776bcb70..f46bce6dd6 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/auto-date-format-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/auto-date-format-settings.component.ts @@ -78,15 +78,18 @@ export class AutoDateFormatSettingsComponent implements OnInit, ControlValueAcce if (this.popoverService.hasPopover(trigger)) { this.popoverService.hidePopover(trigger); } else { - const ctx: any = { - autoDateFormatSettings: deepClone(this.modelValue), - defaultValues: this.defaultValues - }; - const autoDateFormatSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, AutoDateFormatSettingsPanelComponent, ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], false, null, - ctx, - {}, - {}, {}, true); + const autoDateFormatSettingsPanelPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + componentType: AutoDateFormatSettingsPanelComponent, + hostView: this.viewContainerRef, + preferredPlacement: ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], + context: { + autoDateFormatSettings: deepClone(this.modelValue), + defaultValues: this.defaultValues + }, + isModal: true + }); autoDateFormatSettingsPanelPopover.tbComponentRef.instance.popover = autoDateFormatSettingsPanelPopover; autoDateFormatSettingsPanelPopover.tbComponentRef.instance.autoDateFormatSettingsApplied.subscribe((autoDateFormatSettings) => { autoDateFormatSettingsPanelPopover.hide(); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings.component.ts index cadf5fb07a..a5ed2cf96a 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings.component.ts @@ -107,14 +107,17 @@ export class BackgroundSettingsComponent implements OnInit, ControlValueAccessor if (this.popoverService.hasPopover(trigger)) { this.popoverService.hidePopover(trigger); } else { - const ctx: any = { - backgroundSettings: this.modelValue - }; - const backgroundSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, BackgroundSettingsPanelComponent, ['left'], false, null, - ctx, - {}, - {}, {}, true); + const backgroundSettingsPanelPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + componentType: BackgroundSettingsPanelComponent, + hostView: this.viewContainerRef, + preferredPlacement: 'left', + context: { + backgroundSettings: this.modelValue + }, + isModal: true + }); backgroundSettingsPanelPopover.tbComponentRef.instance.popover = backgroundSettingsPanelPopover; backgroundSettingsPanelPopover.tbComponentRef.instance.backgroundSettingsApplied.subscribe((backgroundSettings) => { backgroundSettingsPanelPopover.hide(); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-custom-style.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-custom-style.component.ts index 5db91fb1bb..1cfc7a77cf 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-custom-style.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-custom-style.component.ts @@ -124,19 +124,21 @@ export class WidgetButtonCustomStyleComponent implements OnInit, OnChanges, Cont if (this.popoverService.hasPopover(trigger)) { this.popoverService.hidePopover(trigger); } else { - const ctx: any = { - appearance: this.appearance, - borderRadius: this.borderRadius, - autoScale: this.autoScale, - state: this.state, - customStyle: this.modelValue - }; - const widgetButtonCustomStylePanelPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, WidgetButtonCustomStylePanelComponent, - ['leftTopOnly', 'leftOnly', 'leftBottomOnly'], false, null, - ctx, - {}, - {}, {}, true); + const widgetButtonCustomStylePanelPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + componentType: WidgetButtonCustomStylePanelComponent, + hostView: this.viewContainerRef, + preferredPlacement: ['leftTopOnly', 'leftOnly', 'leftBottomOnly'], + context: { + appearance: this.appearance, + borderRadius: this.borderRadius, + autoScale: this.autoScale, + state: this.state, + customStyle: this.modelValue + }, + isModal: true + }); widgetButtonCustomStylePanelPopover.tbComponentRef.instance.popover = widgetButtonCustomStylePanelPopover; widgetButtonCustomStylePanelPopover.tbComponentRef.instance.customStyleApplied.subscribe((customStyle) => { widgetButtonCustomStylePanelPopover.hide(); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-toggle-custom-style.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-toggle-custom-style.component.ts index b2a78ff961..1e0f19ea58 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-toggle-custom-style.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-toggle-custom-style.component.ts @@ -127,20 +127,22 @@ export class WidgetButtonToggleCustomStyleComponent implements OnInit, OnChanges if (this.popoverService.hasPopover(trigger)) { this.popoverService.hidePopover(trigger); } else { - const ctx: any = { - appearance: this.appearance, - borderRadius: this.borderRadius, - autoScale: this.autoScale, - state: this.state, - value: this.value, - customStyle: this.modelValue - }; - const widgetButtonCustomStylePanelPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, WidgetButtonToggleCustomStylePanelComponent, - ['leftTopOnly', 'leftOnly', 'leftBottomOnly'], false, null, - ctx, - {}, - {}, {}, true); + const widgetButtonCustomStylePanelPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + componentType: WidgetButtonToggleCustomStylePanelComponent, + hostView: this.viewContainerRef, + preferredPlacement: ['leftTopOnly', 'leftOnly', 'leftBottomOnly'], + context: { + appearance: this.appearance, + borderRadius: this.borderRadius, + autoScale: this.autoScale, + state: this.state, + value: this.value, + customStyle: this.modelValue + }, + isModal: true + }); widgetButtonCustomStylePanelPopover.tbComponentRef.instance.popover = widgetButtonCustomStylePanelPopover; widgetButtonCustomStylePanelPopover.tbComponentRef.instance.customStyleApplied.subscribe((customStyle) => { widgetButtonCustomStylePanelPopover.hide(); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-axis-settings-button.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-axis-settings-button.component.ts index 2f2067f3a8..016f213c0b 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-axis-settings-button.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-axis-settings-button.component.ts @@ -85,17 +85,20 @@ export class TimeSeriesChartAxisSettingsButtonComponent implements OnInit, Contr if (this.popoverService.hasPopover(trigger)) { this.popoverService.hidePopover(trigger); } else { - const ctx: any = { - axisSettings: this.modelValue, - axisType: this.axisType, - panelTitle: this.panelTitle, - advanced: this.advanced - }; - const axisSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, TimeSeriesChartAxisSettingsPanelComponent, ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], false, null, - ctx, - {}, - {}, {}, true); + const axisSettingsPanelPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + componentType: TimeSeriesChartAxisSettingsPanelComponent, + hostView: this.viewContainerRef, + preferredPlacement: ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], + context: { + axisSettings: this.modelValue, + axisType: this.axisType, + panelTitle: this.panelTitle, + advanced: this.advanced + }, + isModal: true + }); axisSettingsPanelPopover.tbComponentRef.instance.popover = axisSettingsPanelPopover; axisSettingsPanelPopover.tbComponentRef.instance.axisSettingsApplied.subscribe((axisSettings) => { axisSettingsPanelPopover.hide(); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings.component.ts index e3ff513e0f..d39e4b48dd 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings.component.ts @@ -107,11 +107,21 @@ export class TimeSeriesChartThresholdSettingsComponent implements OnInit, Contro hideYAxis: this.hideYAxis, yAxisIds: this.yAxisIds }; - const thresholdSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, TimeSeriesChartThresholdSettingsPanelComponent, ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], false, null, - ctx, - {}, - {}, {}, true); + const thresholdSettingsPanelPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + componentType: TimeSeriesChartThresholdSettingsPanelComponent, + hostView: this.viewContainerRef, + preferredPlacement: ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], + context: { + thresholdSettings: deepClone(this.modelValue), + panelTitle: this.title, + widgetConfig: this.widgetConfig, + hideYAxis: this.hideYAxis, + yAxisIds: this.yAxisIds + }, + isModal: true + }); thresholdSettingsPanelPopover.tbComponentRef.instance.popover = thresholdSettingsPanelPopover; thresholdSettingsPanelPopover.tbComponentRef.instance.thresholdSettingsApplied.subscribe((thresholdSettings) => { thresholdSettingsPanelPopover.hide(); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axis-row.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axis-row.component.ts index 69cbc29a25..dec7148b30 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axis-row.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axis-row.component.ts @@ -151,17 +151,20 @@ export class TimeSeriesChartYAxisRowComponent implements ControlValueAccessor, O if (this.popoverService.hasPopover(trigger)) { this.popoverService.hidePopover(trigger); } else { - const ctx: any = { - axisType: 'yAxis', - panelTitle: this.translate.instant('widgets.time-series-chart.axis.y-axis-settings'), - axisSettings: deepClone(this.modelValue), - advanced: this.advanced - }; - const yAxisSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, TimeSeriesChartAxisSettingsPanelComponent, ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], false, null, - ctx, - {}, - {}, {}, true); + const yAxisSettingsPanelPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + componentType: TimeSeriesChartAxisSettingsPanelComponent, + hostView: this.viewContainerRef, + preferredPlacement: ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], + context: { + axisType: 'yAxis', + panelTitle: this.translate.instant('widgets.time-series-chart.axis.y-axis-settings'), + axisSettings: deepClone(this.modelValue), + advanced: this.advanced + }, + isModal: true + }); yAxisSettingsPanelPopover.tbComponentRef.instance.popover = yAxisSettingsPanelPopover; yAxisSettingsPanelPopover.tbComponentRef.instance.axisSettingsApplied.subscribe((yAxisSettings) => { yAxisSettingsPanelPopover.hide(); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-settings.component.ts index 431fac44da..23b1efbce9 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-settings.component.ts @@ -121,15 +121,18 @@ export class ColorRangeSettingsComponent implements OnInit, ControlValueAccessor if (this.popoverService.hasPopover(trigger)) { this.popoverService.hidePopover(trigger); } else { - const ctx: any = { - colorRangeSettings: this.modelValue, - settingsComponents: this.colorSettingsComponentService.getOtherColorSettingsComponents(this) - }; - const colorRangeSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, ColorRangePanelComponent, 'left', false, null, - ctx, - {}, - {}, {}, true); + const colorRangeSettingsPanelPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + componentType: ColorRangePanelComponent, + hostView: this.viewContainerRef, + preferredPlacement: 'left', + context: { + colorRangeSettings: this.modelValue, + settingsComponents: this.colorSettingsComponentService.getOtherColorSettingsComponents(this) + }, + isModal: true + }); colorRangeSettingsPanelPopover.tbComponentRef.instance.popover = colorRangeSettingsPanelPopover; colorRangeSettingsPanelPopover.tbComponentRef.instance.colorRangeApplied.subscribe((colorRangeSettings: Array) => { colorRangeSettingsPanelPopover.hide(); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings.component.ts index 133fa11bd4..05c069cbf3 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings.component.ts @@ -159,22 +159,25 @@ export class ColorSettingsComponent implements OnInit, ControlValueAccessor, OnD if (this.popoverService.hasPopover(trigger)) { this.popoverService.hidePopover(trigger); } else { - const ctx: any = { - colorSettings: this.modelValue, - settingsComponents: this.colorSettingsComponentService.getOtherColorSettingsComponents(this), - aliasController: this.aliasController, - dataKeyCallbacks: this.dataKeyCallbacks, - datasource: this.datasource, - rangeAdvancedMode: this.rangeAdvancedMode, - gradientAdvancedMode: this.gradientAdvancedMode, - minValue: this.minValue, - maxValue: this.maxValue - }; - const colorSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, ColorSettingsPanelComponent, 'left', false, null, - ctx, - {}, - {}, {}, true); + const colorSettingsPanelPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + componentType: ColorSettingsPanelComponent, + hostView: this.viewContainerRef, + preferredPlacement: 'left', + context: { + colorSettings: this.modelValue, + settingsComponents: this.colorSettingsComponentService.getOtherColorSettingsComponents(this), + aliasController: this.aliasController, + dataKeyCallbacks: this.dataKeyCallbacks, + datasource: this.datasource, + rangeAdvancedMode: this.rangeAdvancedMode, + gradientAdvancedMode: this.gradientAdvancedMode, + minValue: this.minValue, + maxValue: this.maxValue + }, + isModal: true + }); colorSettingsPanelPopover.tbComponentRef.instance.popover = colorSettingsPanelPopover; colorSettingsPanelPopover.tbComponentRef.instance.colorSettingsApplied.subscribe((colorSettings) => { colorSettingsPanelPopover.hide(); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-select.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-select.component.ts index 92aef0ba29..847e869fe6 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-select.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-select.component.ts @@ -162,14 +162,16 @@ export class DateFormatSelectComponent implements OnInit, ControlValueAccessor { if (this.popoverService.hasPopover(trigger)) { this.popoverService.hidePopover(trigger); } else { - const ctx: any = { - dateFormat: deepClone(this.modelValue) - }; - const dateFormatSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, DateFormatSettingsPanelComponent, 'top', false, null, - ctx, - {}, - {}, {}, true); + const dateFormatSettingsPanelPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + componentType: DateFormatSettingsPanelComponent, + hostView: this.viewContainerRef, + context: { + dateFormat: deepClone(this.modelValue) + }, + isModal: true + }); dateFormatSettingsPanelPopover.tbComponentRef.instance.popover = dateFormatSettingsPanelPopover; dateFormatSettingsPanelPopover.tbComponentRef.instance.dateFormatApplied.subscribe((dateFormat) => { dateFormatSettingsPanelPopover.hide(); @@ -187,15 +189,18 @@ export class DateFormatSelectComponent implements OnInit, ControlValueAccessor { if (this.popoverService.hasPopover(trigger)) { this.popoverService.hidePopover(trigger); } else { - const ctx: any = { - autoDateFormatSettings: mergeDeep({} as AutoDateFormatSettings, - defaultAutoDateFormatSettings, this.modelValue.autoDateFormatSettings) - }; - const autoDateFormatSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, AutoDateFormatSettingsPanelComponent, ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], false, null, - ctx, - {}, - {}, {}, true); + const autoDateFormatSettingsPanelPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + componentType: AutoDateFormatSettingsPanelComponent, + hostView: this.viewContainerRef, + preferredPlacement: ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], + context: { + autoDateFormatSettings: mergeDeep({} as AutoDateFormatSettings, + defaultAutoDateFormatSettings, this.modelValue.autoDateFormatSettings) + }, + isModal: true + }); autoDateFormatSettingsPanelPopover.tbComponentRef.instance.popover = autoDateFormatSettingsPanelPopover; autoDateFormatSettingsPanelPopover.tbComponentRef.instance.autoDateFormatSettingsApplied.subscribe((autoDateFormatSettings) => { autoDateFormatSettingsPanelPopover.hide(); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-property-row.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-property-row.component.ts index 79c2254a7d..58d879ba79 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-property-row.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-property-row.component.ts @@ -168,17 +168,20 @@ export class DynamicFormPropertyRowComponent implements ControlValueAccessor, On if (this.popoverService.hasPopover(trigger)) { this.popoverService.hidePopover(trigger); } else { - const ctx: any = { - isAdd: add, - disabled: this.disabled, - booleanPropertyIds: this.booleanPropertyIds, - property: deepClone(this.modelValue) - }; - const dynamicFormPropertyPanelPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, DynamicFormPropertyPanelComponent, ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], false, null, - ctx, - {}, - {}, {}, true); + const dynamicFormPropertyPanelPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + componentType: DynamicFormPropertyPanelComponent, + hostView: this.viewContainerRef, + preferredPlacement: ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], + context: { + isAdd: add, + disabled: this.disabled, + booleanPropertyIds: this.booleanPropertyIds, + property: deepClone(this.modelValue) + }, + isModal: true + }); dynamicFormPropertyPanelPopover.tbComponentRef.instance.popover = dynamicFormPropertyPanelPopover; dynamicFormPropertyPanelPopover.tbComponentRef.instance.propertySettingsApplied.subscribe((property) => { dynamicFormPropertyPanelPopover.hide(); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings.component.ts index 25addab5ea..2675f9d1e6 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings.component.ts @@ -109,11 +109,15 @@ export class FontSettingsComponent implements OnInit, ControlValueAccessor { ctx.previewText = previewText; } } - const fontSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, FontSettingsPanelComponent, 'left', false, null, - ctx, - {}, - {}, {}, true); + const fontSettingsPanelPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + componentType: FontSettingsPanelComponent, + hostView: this.viewContainerRef, + preferredPlacement: 'left', + context: ctx, + isModal: true + }); fontSettingsPanelPopover.tbComponentRef.instance.popover = fontSettingsPanelPopover; fontSettingsPanelPopover.tbComponentRef.instance.fontApplied.subscribe((font) => { fontSettingsPanelPopover.hide(); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/key/data-keys.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/key/data-keys.component.ts index e60d0298d9..a9be1fd352 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/key/data-keys.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/key/data-keys.component.ts @@ -565,14 +565,20 @@ export class DataKeysComponent implements ControlValueAccessor, OnInit, OnChange if (this.popoverService.hasPopover(trigger)) { this.popoverService.hidePopover(trigger); } else { - const colorPickerPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, ColorPickerPanelComponent, ['leftTopOnly', 'leftOnly', 'leftBottomOnly'], true, null, - { + const colorPickerPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + componentType: ColorPickerPanelComponent, + hostView: this.viewContainerRef, + preferredPlacement: ['leftTopOnly', 'leftOnly', 'leftBottomOnly'], + context: { color: key.color, colorCancelButton: true }, - {}, - {}, {}, false, () => {}, {padding: '12px 4px 12px 12px'}); + showCloseButton: false, + popoverContentStyle: {padding: '12px 4px 12px 12px'}, + isModal: true + }); colorPickerPopover.tbComponentRef.instance.popover = colorPickerPopover; colorPickerPopover.tbComponentRef.instance.colorSelected.subscribe((color) => { colorPickerPopover.hide(); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/data-layer-color-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/data-layer-color-settings.component.ts index 8c94ed2c80..ea5da11890 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/data-layer-color-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/data-layer-color-settings.component.ts @@ -97,19 +97,22 @@ export class DataLayerColorSettingsComponent implements ControlValueAccessor { if (this.popoverService.hasPopover(trigger)) { this.popoverService.hidePopover(trigger); } else { - const ctx: any = { - colorSettings: this.modelValue, - context: this.context, - dsType: this.dsType, - dsEntityAliasId: this.dsEntityAliasId, - dsDeviceId: this.dsDeviceId, - helpId: this.helpId - }; - const colorSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, DataLayerColorSettingsPanelComponent, 'left', false, null, - ctx, - {}, - {}, {}, true); + const colorSettingsPanelPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + componentType: DataLayerColorSettingsPanelComponent, + hostView: this.viewContainerRef, + preferredPlacement: 'left', + context: { + colorSettings: this.modelValue, + context: this.context, + dsType: this.dsType, + dsEntityAliasId: this.dsEntityAliasId, + dsDeviceId: this.dsDeviceId, + helpId: this.helpId + }, + isModal: true + }); colorSettingsPanelPopover.tbComponentRef.instance.popover = colorSettingsPanelPopover; colorSettingsPanelPopover.tbComponentRef.instance.colorSettingsApplied.subscribe((colorSettings) => { colorSettingsPanelPopover.hide(); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-layer-row.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-layer-row.component.ts index d7d4f78433..40a98b54cc 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-layer-row.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-layer-row.component.ts @@ -180,14 +180,17 @@ export class MapLayerRowComponent implements ControlValueAccessor, OnInit { if (this.popoverService.hasPopover(trigger)) { this.popoverService.hidePopover(trigger); } else { - const ctx: any = { - mapLayerSettings: deepClone(this.modelValue) - }; - const mapLayerSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, MapLayerSettingsPanelComponent, ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], false, null, - ctx, - {}, - {}, {}, true); + const mapLayerSettingsPanelPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + componentType: MapLayerSettingsPanelComponent, + hostView: this.viewContainerRef, + preferredPlacement: ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], + context: { + mapLayerSettings: deepClone(this.modelValue) + }, + isModal: true + }); mapLayerSettingsPanelPopover.tbComponentRef.instance.popover = mapLayerSettingsPanelPopover; mapLayerSettingsPanelPopover.tbComponentRef.instance.mapLayerSettingsApplied.subscribe((layer) => { mapLayerSettingsPanelPopover.hide(); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-tooltip-tag-actions.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-tooltip-tag-actions.component.ts index 6cf5791406..26f17055b6 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-tooltip-tag-actions.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-tooltip-tag-actions.component.ts @@ -151,21 +151,23 @@ export class MapTooltipTagActionsComponent implements ControlValueAccessor, OnIn } else { const title = this.translate.instant(isAdd ? 'widgets.maps.data-layer.add-tooltip-tag-action' : 'widgets.maps.data-layer.edit-tooltip-tag-action'); const applyTitle = this.translate.instant(isAdd ? 'action.add' : 'action.apply'); - const ctx: any = { - widgetAction: action, - withName: true, - actionNames, - panelTitle: title, - applyTitle, - widgetType: widgetType.latest, - callbacks: this.context.callbacks - }; - const widgetActionSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, WidgetActionSettingsPanelComponent, - ['leftTopOnly', 'leftOnly', 'leftBottomOnly'], false, null, - ctx, - {}, - {}, {}, true); + const widgetActionSettingsPanelPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + componentType: WidgetActionSettingsPanelComponent, + hostView: this.viewContainerRef, + preferredPlacement: ['leftTopOnly', 'leftOnly', 'leftBottomOnly'], + context: { + widgetAction: action, + withName: true, + actionNames, + panelTitle: title, + applyTitle, + widgetType: widgetType.latest, + callbacks: this.context.callbacks + }, + isModal: true + }); widgetActionSettingsPanelPopover.tbComponentRef.instance.widgetActionApplied.subscribe((widgetAction) => { widgetActionSettingsPanelPopover.hide(); callback(widgetAction); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/marker-image-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/marker-image-settings.component.ts index 2d8feb817f..eac0dc9121 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/marker-image-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/marker-image-settings.component.ts @@ -76,14 +76,17 @@ export class MarkerImageSettingsComponent implements ControlValueAccessor { if (this.popoverService.hasPopover(trigger)) { this.popoverService.hidePopover(trigger); } else { - const ctx: any = { - markerImageSettings: this.modelValue, - }; - const markerImageSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, MarkerImageSettingsPanelComponent, 'left', false, null, - ctx, - {}, - {}, {}, true); + const markerImageSettingsPanelPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + componentType: MarkerImageSettingsPanelComponent, + hostView: this.viewContainerRef, + preferredPlacement: 'left', + context: { + markerImageSettings: this.modelValue, + }, + isModal: true + }); markerImageSettingsPanelPopover.tbComponentRef.instance.popover = markerImageSettingsPanelPopover; markerImageSettingsPanelPopover.tbComponentRef.instance.markerImageSettingsApplied.subscribe((markerImageSettings) => { markerImageSettingsPanelPopover.hide(); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/marker-shape-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/marker-shape-settings.component.ts index 4400c5a151..bfb6c0c76d 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/marker-shape-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/marker-shape-settings.component.ts @@ -177,17 +177,20 @@ export class MarkerShapeSettingsComponent implements ControlValueAccessor, OnIni ); }); } else if (this.markerType === MarkerType.icon) { - const ctx: any = { - iconContainer: (this.modelValue as MarkerIconSettings).iconContainer, - icon: (this.modelValue as MarkerIconSettings).icon, - color: this.modelValue.color.color, - trip: this.trip - }; - const markerIconShapesPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, MarkerIconShapesComponent, 'left', true, null, - ctx, - {}, - {}, {}, true); + const markerIconShapesPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + componentType: MarkerIconShapesComponent, + hostView: this.viewContainerRef, + preferredPlacement: 'left', + context: { + iconContainer: (this.modelValue as MarkerIconSettings).iconContainer, + icon: (this.modelValue as MarkerIconSettings).icon, + color: this.modelValue.color.color, + trip: this.trip + }, + isModal: true + }); markerIconShapesPopover.tbComponentRef.instance.popover = markerIconShapesPopover; markerIconShapesPopover.tbComponentRef.instance.markerIconSelected.subscribe((iconInfo) => { markerIconShapesPopover.hide(); diff --git a/ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app.component.ts b/ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app.component.ts index bbd096bbaf..eceda5ac9a 100644 --- a/ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app.component.ts +++ b/ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app.component.ts @@ -166,11 +166,17 @@ export class MobileAppComponent extends EntityComponent { ? this.entityForm.get('versionInfo.latestVersionReleaseNotes').value : this.entityForm.get('versionInfo.minVersionReleaseNotes').value }; - const releaseNotesPanelPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, EditorPanelComponent, ['leftOnly', 'leftBottomOnly', 'leftTopOnly'], true, null, - ctx, - {}, - {}, {}, false, () => {}, {padding: '16px 24px'}); + const releaseNotesPanelPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + hostView: this.viewContainerRef, + componentType: EditorPanelComponent, + preferredPlacement: ['leftOnly', 'leftBottomOnly', 'leftTopOnly'], + context: ctx, + showCloseButton: false, + popoverContentStyle: {padding: '16px 24px'}, + isModal: false + }); releaseNotesPanelPopover.tbComponentRef.instance.popover = releaseNotesPanelPopover; releaseNotesPanelPopover.tbComponentRef.instance.editorContentApplied.subscribe((releaseNotes) => { releaseNotesPanelPopover.hide(); diff --git a/ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/mobile-page-item-row.component.ts b/ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/mobile-page-item-row.component.ts index 33be223815..9f4add3195 100644 --- a/ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/mobile-page-item-row.component.ts +++ b/ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/mobile-page-item-row.component.ts @@ -55,6 +55,7 @@ import { TbPopoverService } from '@shared/components/popover.service'; import { CustomMobilePagePanelComponent } from '@home/pages/mobile/bundes/layout/custom-mobile-page-panel.component'; import { DefaultMobilePagePanelComponent } from '@home/pages/mobile/bundes/layout/default-mobile-page-panel.component'; import { TranslateService } from '@ngx-translate/core'; +import { DisplayPopoverConfig } from '@shared/components/popover.models'; @Component({ selector: 'tb-mobile-menu-item-row', @@ -222,27 +223,31 @@ export class MobilePageItemRowComponent implements ControlValueAccessor, OnInit, if (this.popoverService.hasPopover(trigger)) { this.popoverService.hidePopover(trigger); } else { - const ctx: any = { - disabled: this.disabled, - pageItem: deepClone(this.modelValue) + const config: DisplayPopoverConfig = { + trigger, + renderer: this.renderer, + componentType: undefined, + hostView: this.viewContainerRef, + preferredPlacement: ['right', 'bottom', 'top'], + context: { + disabled: this.disabled, + pageItem: deepClone(this.modelValue) + }, + showCloseButton: false, + popoverContentStyle: {padding: '16px 24px'}, + isModal: true }; if (this.isDefaultMenuItem) { - const defaultMobilePagePanelPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, DefaultMobilePagePanelComponent, ['right', 'bottom', 'top'], true, null, - ctx, - {}, - {}, {}, false, () => {}, {padding: '16px 24px'}); + config.componentType = DefaultMobilePagePanelComponent; + const defaultMobilePagePanelPopover = this.popoverService.displayPopover(config); defaultMobilePagePanelPopover.tbComponentRef.instance.popover = defaultMobilePagePanelPopover; defaultMobilePagePanelPopover.tbComponentRef.instance.defaultMobilePageApplied.subscribe((menuItem) => { defaultMobilePagePanelPopover.hide(); this.afterPageEdit(menuItem); }); } else { - const customMobilePagePanelPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, CustomMobilePagePanelComponent, ['right', 'bottom', 'top'], true, null, - ctx, - {}, - {}, {}, false, () => {}, {padding: '16px 24px'}); + config.componentType = CustomMobilePagePanelComponent; + const customMobilePagePanelPopover = this.popoverService.displayPopover(config); customMobilePagePanelPopover.tbComponentRef.instance.popover = customMobilePagePanelPopover; customMobilePagePanelPopover.tbComponentRef.instance.customMobilePageApplied.subscribe((page) => { customMobilePagePanelPopover.hide(); diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-row.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-row.component.ts index 3b1db9a595..7cde50ef29 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-row.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-row.component.ts @@ -203,18 +203,21 @@ export class ScadaSymbolBehaviorRowComponent implements ControlValueAccessor, On if (this.popoverService.hasPopover(trigger)) { this.popoverService.hidePopover(trigger); } else { - const ctx: any = { - isAdd: add, - disabled: this.disabled, - aliasController: this.aliasController, - callbacks: this.callbacks, - behavior: deepClone(this.modelValue) - }; - const scadaSymbolBehaviorPanelPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, ScadaSymbolBehaviorPanelComponent, ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], true, null, - ctx, - {}, - {}, {}, true); + const scadaSymbolBehaviorPanelPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + componentType: ScadaSymbolBehaviorPanelComponent, + hostView: this.viewContainerRef, + preferredPlacement: ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], + context: { + isAdd: add, + disabled: this.disabled, + aliasController: this.aliasController, + callbacks: this.callbacks, + behavior: deepClone(this.modelValue) + }, + isModal: true + }); scadaSymbolBehaviorPanelPopover.tbComponentRef.instance.popover = scadaSymbolBehaviorPanelPopover; scadaSymbolBehaviorPanelPopover.tbComponentRef.instance.behaviorSettingsApplied.subscribe((behavior) => { scadaSymbolBehaviorPanelPopover.hide(); diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.ts index 95b49d47c2..339ac3a358 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.ts @@ -158,19 +158,21 @@ export class ScadaSymbolMetadataTagComponent implements ControlValueAccessor, On tagFunctionControl = this.tagFormGroup.get('clickAction'); completer = this.clickActionFunctionCompleter; } - const ctx: any = { - tagFunction: tagFunctionControl.value, - tagFunctionType, - tag: this.tagFormGroup.get('tag').value, - completer, - disabled: this.disabled - }; - const scadaSymbolTagFunctionPanelPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, ScadaSymbolMetadataTagFunctionPanelComponent, - ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], true, null, - ctx, - {}, - {}, {}, true); + const scadaSymbolTagFunctionPanelPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + componentType: ScadaSymbolMetadataTagFunctionPanelComponent, + hostView: this.viewContainerRef, + preferredPlacement: ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], + context: { + tagFunction: tagFunctionControl.value, + tagFunctionType, + tag: this.tagFormGroup.get('tag').value, + completer, + disabled: this.disabled + }, + isModal: true + }); scadaSymbolTagFunctionPanelPopover.tbComponentRef.instance.popover = scadaSymbolTagFunctionPanelPopover; scadaSymbolTagFunctionPanelPopover.tbComponentRef.instance.tagFunctionApplied.subscribe((tagFunction) => { scadaSymbolTagFunctionPanelPopover.hide(); diff --git a/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts b/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts index 6675425f32..93c411aabe 100644 --- a/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts +++ b/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts @@ -816,11 +816,15 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe const ctx: any = { modules: deepClone(this.controllerScriptModules) }; - const modulesPanelPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, JsFuncModulesComponent, ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], true, null, - ctx, - {}, - {}, {}, true); + const modulesPanelPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + hostView: this.viewContainerRef, + componentType: JsFuncModulesComponent, + preferredPlacement: ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], + context: ctx, + isModal: true + }); modulesPanelPopover.tbComponentRef.instance.popover = modulesPanelPopover; modulesPanelPopover.tbComponentRef.instance.modulesApplied.subscribe((modules) => { modulesPanelPopover.hide(); diff --git a/ui-ngx/src/app/shared/components/js-func.component.ts b/ui-ngx/src/app/shared/components/js-func.component.ts index c424df8242..435b0495ec 100644 --- a/ui-ngx/src/app/shared/components/js-func.component.ts +++ b/ui-ngx/src/app/shared/components/js-func.component.ts @@ -518,14 +518,17 @@ export class JsFuncComponent implements OnInit, OnChanges, OnDestroy, ControlVal if (this.popoverService.hasPopover(trigger)) { this.popoverService.hidePopover(trigger); } else { - const ctx: any = { - modules: deepClone(this.modules) - }; - const modulesPanelPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, JsFuncModulesComponent, ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], false, null, - ctx, - {}, - {}, {}, true); + const modulesPanelPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + componentType: JsFuncModulesComponent, + hostView: this.viewContainerRef, + preferredPlacement: 'leftTop', + context: { + modules: deepClone(this.modules) + }, + isModal: true + }); modulesPanelPopover.tbComponentRef.instance.popover = modulesPanelPopover; modulesPanelPopover.tbComponentRef.instance.modulesApplied.subscribe((modules) => { modulesPanelPopover.hide(); diff --git a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.ts b/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.ts index 68ec6bcdd9..1ad4dab88c 100644 --- a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.ts +++ b/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.ts @@ -558,9 +558,13 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On if (this.popoverService.hasPopover(trigger)) { this.popoverService.hidePopover(trigger); } else { - const aggregationConfigPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, AggregationOptionsConfigPanelComponent, ['left', 'leftTop', 'leftBottom'], true, null, - { + const aggregationConfigPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + hostView: this.viewContainerRef, + componentType: AggregationOptionsConfigPanelComponent, + preferredPlacement: ['left', 'leftTop', 'leftBottom'], + context: { allowedAggregationTypes: deepClone(this.timewindowForm.get('allowedAggTypes').value), onClose: (result: Array | null) => { aggregationConfigPopover.hide(); @@ -570,8 +574,10 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On } } }, - {maxHeight: '500px', height: '100%'}, - {}, {}, true, () => {}, {padding: 0}); + overlayStyle: {maxHeight: '500px', height: '100%'}, + popoverContentStyle: {padding: 0}, + isModal: true + }); aggregationConfigPopover.tbComponentRef.instance.popoverComponent = aggregationConfigPopover; } this.cd.detectChanges(); @@ -612,9 +618,13 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On if (this.popoverService.hasPopover(trigger)) { this.popoverService.hidePopover(trigger); } else { - const intervalsConfigPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, IntervalOptionsConfigPanelComponent, ['left', 'leftTop', 'leftBottom'], true, null, - { + const intervalsConfigPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + hostView: this.viewContainerRef, + componentType: IntervalOptionsConfigPanelComponent, + preferredPlacement: ['left', 'leftTop', 'leftBottom'], + context: { aggregation: this.aggregation, allowedIntervals: deepClone(this.timewindowForm.get(allowedIntervalsControlName).value), aggIntervalsConfig: deepClone(this.timewindowForm.get(aggIntervalsConfigControlName).value), @@ -629,8 +639,10 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On } } }, - {maxHeight: '500px', height: '100%'}, - {}, {}, true, () => {}, {padding: 0}); + overlayStyle: {maxHeight: '500px', height: '100%'}, + popoverContentStyle: {padding: 0}, + isModal: true + }); intervalsConfigPopover.tbComponentRef.instance.popoverComponent = intervalsConfigPopover; } this.cd.detectChanges(); diff --git a/ui-ngx/src/app/shared/components/time/timezone.component.ts b/ui-ngx/src/app/shared/components/time/timezone.component.ts index 78a938f53f..34e2486106 100644 --- a/ui-ngx/src/app/shared/components/time/timezone.component.ts +++ b/ui-ngx/src/app/shared/components/time/timezone.component.ts @@ -155,9 +155,13 @@ export class TimezoneComponent implements ControlValueAccessor, OnInit { if (this.popoverService.hasPopover(trigger)) { this.popoverService.hidePopover(trigger); } else { - const timezoneSelectionPopover = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, TimezonePanelComponent, ['bottomRight', 'leftBottom'], true, null, - { + const timezoneSelectionPopover = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + hostView: this.viewContainerRef, + componentType: TimezonePanelComponent, + preferredPlacement: ['bottomRight', 'leftBottom'], + context: { timezone: this.modelValue, userTimezoneByDefault: this.userTimezoneByDefaultValue, localBrowserTimezonePlaceholderOnEmpty: this.localBrowserTimezonePlaceholderOnEmptyValue, @@ -173,8 +177,9 @@ export class TimezoneComponent implements ControlValueAccessor, OnInit { } } }, - {}, - {}, {}, false); + showCloseButton: false, + isModal: true + }); timezoneSelectionPopover.tbComponentRef.instance.popoverComponent = timezoneSelectionPopover; } this.cd.detectChanges(); From 336d60268b818f5ecd5359a5fbb9afdd6ba6d93a Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Tue, 25 Mar 2025 10:56:32 +0200 Subject: [PATCH 3/4] UI: Refactoring popover model --- ui-ngx/src/app/shared/components/popover.models.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/ui-ngx/src/app/shared/components/popover.models.ts b/ui-ngx/src/app/shared/components/popover.models.ts index 9fb01d1f3d..dc7e1f9ba7 100644 --- a/ui-ngx/src/app/shared/components/popover.models.ts +++ b/ui-ngx/src/app/shared/components/popover.models.ts @@ -112,11 +112,7 @@ export interface DisplayPopoverWithComponentRefConfig { isModal?: boolean; } -export const defaultPopoverConfig: DisplayPopoverWithComponentRefConfig = { - componentRef: undefined, - trigger: undefined, - renderer: undefined, - componentType: undefined, +export const defaultPopoverConfig: Partial> = { preferredPlacement: 'top', hideOnClickOutside: true, overlayStyle: {}, From 887c291deb71e26d8c743ed106afd626f3e34c84 Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Tue, 25 Mar 2025 11:14:44 +0200 Subject: [PATCH 4/4] UI: Refactoring popover to use isModal setting --- .../calculated-field-arguments-table.component.ts | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/arguments-table/calculated-field-arguments-table.component.ts b/ui-ngx/src/app/modules/home/components/calculated-fields/components/arguments-table/calculated-field-arguments-table.component.ts index 945fc67ad4..512480279b 100644 --- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/arguments-table/calculated-field-arguments-table.component.ts +++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/arguments-table/calculated-field-arguments-table.component.ts @@ -174,11 +174,15 @@ export class CalculatedFieldArgumentsTableComponent implements ControlValueAcces entityHasError: this.entityNameErrorSet.has(argument.refEntityId?.id), usedArgumentNames: this.argumentsFormArray.value.map(({ argumentName }) => argumentName).filter(name => name !== argument.argumentName), }; - this.popoverComponent = this.popoverService.displayPopover(trigger, this.renderer, - this.viewContainerRef, CalculatedFieldArgumentPanelComponent, isDefined(index) ? 'left' : 'right', false, null, - ctx, - {}, - {}, {}, true); + this.popoverComponent = this.popoverService.displayPopover({ + trigger, + renderer: this.renderer, + componentType: CalculatedFieldArgumentPanelComponent, + hostView: this.viewContainerRef, + preferredPlacement: isDefined(index) ? 'left' : 'right', + context: ctx, + isModal: true + }); this.popoverComponent.tbComponentRef.instance.argumentsDataApplied.subscribe(({ value, index }) => { this.popoverComponent.hide(); const formGroup = this.fb.group(value);