diff --git a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select-panel.component.html b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select-panel.component.html index 32de8f314c..2cc4788d96 100644 --- a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select-panel.component.html +++ b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select-panel.component.html @@ -17,7 +17,7 @@ -->
- + {{alias.value.alias}} diff --git a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select-panel.component.ts b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select-panel.component.ts index 6673d55498..2e2d11b66b 100644 --- a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select-panel.component.ts +++ b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select-panel.component.ts @@ -22,6 +22,7 @@ export const ALIASES_ENTITY_SELECT_PANEL_DATA = new InjectionToken('Aliases export interface AliasesEntitySelectPanelData { aliasController: IAliasController; + entityAliasesInfo: {[aliasId: string]: AliasInfo}; } @Component({ @@ -31,18 +32,10 @@ export interface AliasesEntitySelectPanelData { }) export class AliasesEntitySelectPanelComponent { - entityAliasesInfo: {[aliasId: string]: AliasInfo} = {}; + entityAliasesInfo: {[aliasId: string]: AliasInfo}; constructor(@Inject(ALIASES_ENTITY_SELECT_PANEL_DATA) public data: AliasesEntitySelectPanelData) { - const allEntityAliases = this.data.aliasController.getEntityAliases(); - for (const aliasId of Object.keys(allEntityAliases)) { - const aliasInfo = this.data.aliasController.getInstantAliasInfo(aliasId); - if (aliasInfo && !aliasInfo.resolveMultiple && aliasInfo.currentEntity - && aliasInfo.resolvedEntities.length > 1) { - this.entityAliasesInfo[aliasId] = deepClone(aliasInfo); - this.entityAliasesInfo[aliasId].selectedId = aliasInfo.currentEntity.id; - } - } + this.entityAliasesInfo = this.data.entityAliasesInfo; } public currentAliasEntityChanged(aliasId: string, selectedId: string) { diff --git a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.html b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.html index 703defd80d..0353c12436 100644 --- a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.html +++ b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.html @@ -19,13 +19,13 @@ {{displayValue}} diff --git a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.ts b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.ts index ef70a09690..d1f34ae969 100644 --- a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.ts +++ b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.ts @@ -14,23 +14,21 @@ /// limitations under the License. /// -import { Component, Inject, Input, OnDestroy, OnInit, ViewChild, ViewContainerRef } from '@angular/core'; +import { Component, Input, OnDestroy, OnInit, ViewChild, ViewContainerRef } from '@angular/core'; import { TooltipPosition } from '@angular/material/tooltip'; -import { IAliasController } from '@core/api/widget-api.models'; +import { AliasInfo, IAliasController } from '@core/api/widget-api.models'; import { CdkOverlayOrigin, ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay'; import { TranslateService } from '@ngx-translate/core'; import { Subscription } from 'rxjs'; import { BreakpointObserver } from '@angular/cdk/layout'; -import { DOCUMENT } from '@angular/common'; -import { WINDOW } from '@core/services/window.service'; import { ComponentPortal, PortalInjector } from '@angular/cdk/portal'; import { ALIASES_ENTITY_SELECT_PANEL_DATA, AliasesEntitySelectPanelComponent, AliasesEntitySelectPanelData } from './aliases-entity-select-panel.component'; +import { deepClone } from '@core/utils'; -// @dynamic @Component({ selector: 'tb-aliases-entity-select', templateUrl: './aliases-entity-select.component.html', @@ -38,8 +36,17 @@ import { }) export class AliasesEntitySelectComponent implements OnInit, OnDestroy { + aliasControllerValue: IAliasController; + @Input() - aliasController: IAliasController; + set aliasController(aliasController: IAliasController) { + this.aliasControllerValue = aliasController; + this.setupAliasController(this.aliasControllerValue); + } + + get aliasController(): IAliasController { + return this.aliasControllerValue; + } @Input() tooltipPosition: TooltipPosition = 'above'; @@ -49,32 +56,43 @@ export class AliasesEntitySelectComponent implements OnInit, OnDestroy { @ViewChild('aliasEntitySelectPanelOrigin') aliasEntitySelectPanelOrigin: CdkOverlayOrigin; displayValue: string; + entityAliasesInfo: {[aliasId: string]: AliasInfo} = {}; + hasSelectableAliasEntities = false; private rxSubscriptions = new Array(); constructor(private translate: TranslateService, private overlay: Overlay, private breakpointObserver: BreakpointObserver, - private viewContainerRef: ViewContainerRef, - @Inject(DOCUMENT) private document: Document, - @Inject(WINDOW) private window: Window) { + private viewContainerRef: ViewContainerRef) { + } + + private setupAliasController(aliasController: IAliasController) { + this.rxSubscriptions.forEach((subscription) => { + subscription.unsubscribe(); + }); + this.rxSubscriptions.length = 0; + if (aliasController) { + this.rxSubscriptions.push(aliasController.entityAliasesChanged.subscribe( + () => { + setTimeout(() => { + this.updateDisplayValue(); + this.updateEntityAliasesInfo(); + }, 0); + } + )); + this.rxSubscriptions.push(aliasController.entityAliasResolved.subscribe( + () => { + setTimeout(() => { + this.updateDisplayValue(); + this.updateEntityAliasesInfo(); + }, 0); + } + )); + } } ngOnInit(): void { - this.rxSubscriptions.push(this.aliasController.entityAliasesChanged.subscribe( - () => { - setTimeout(() => { - this.updateDisplayValue(); - }, 0); - } - )); - this.rxSubscriptions.push(this.aliasController.entityAliasResolved.subscribe( - () => { - setTimeout(() => { - this.updateDisplayValue(); - }, 0); - } - )); } ngOnDestroy(): void { @@ -85,48 +103,20 @@ export class AliasesEntitySelectComponent implements OnInit, OnDestroy { } openEditMode() { - if (this.disabled) { + if (this.disabled || !this.hasSelectableAliasEntities) { return; } - const panelHeight = this.breakpointObserver.isMatched('min-height: 350px') ? 250 : 150; - const panelWidth = 300; const position = this.overlay.position(); const config = new OverlayConfig({ panelClass: 'tb-aliases-entity-select-panel', backdropClass: 'cdk-overlay-transparent-backdrop', hasBackdrop: true, }); - const el = this.aliasEntitySelectPanelOrigin.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 + originX: 'start', + originY: 'bottom', + overlayX: 'start', + overlayY: 'top' }; config.positionStrategy = position.flexibleConnectedTo(this.aliasEntitySelectPanelOrigin.elementRef) .withPositions([connectedPosition]); @@ -138,7 +128,8 @@ export class AliasesEntitySelectComponent implements OnInit, OnDestroy { const injector = this._createAliasesEntitySelectPanelInjector( overlayRef, { - aliasController: this.aliasController + aliasController: this.aliasController, + entityAliasesInfo: this.entityAliasesInfo } ); overlayRef.attach(new ComponentPortal(AliasesEntitySelectPanelComponent, this.viewContainerRef, injector)); @@ -180,4 +171,19 @@ export class AliasesEntitySelectComponent implements OnInit, OnDestroy { this.displayValue = displayValue; } + private updateEntityAliasesInfo() { + const allEntityAliases = this.aliasController.getEntityAliases(); + this.entityAliasesInfo = {}; + this.hasSelectableAliasEntities = false; + for (const aliasId of Object.keys(allEntityAliases)) { + const aliasInfo = this.aliasController.getInstantAliasInfo(aliasId); + if (aliasInfo && !aliasInfo.resolveMultiple && aliasInfo.currentEntity + && aliasInfo.resolvedEntities.length > 1) { + this.entityAliasesInfo[aliasId] = deepClone(aliasInfo); + this.entityAliasesInfo[aliasId].selectedId = aliasInfo.currentEntity.id; + this.hasSelectableAliasEntities = true; + } + } + } + } diff --git a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html index d11e00baa2..653e7f841f 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html +++ b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html @@ -18,7 +18,7 @@
+ [fxShow]="(isLoading$ | async) && !ignoreLoading && !isEdit">
diff --git a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts index fdc6569d29..18503a1aed 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts @@ -122,7 +122,7 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo dashboardClass: string; @Input() - ignoreLoading: boolean; + ignoreLoading = true; @Input() dashboardTimewindow: Timewindow; @@ -154,8 +154,6 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo widgetContextMenuEvent: MouseEvent; - dashboardLoading = true; - dashboardWidgets = new DashboardWidgets(this, this.differs.find([]).create((index, item) => { return item; @@ -282,7 +280,6 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo private updateWidgets() { this.dashboardWidgets.setWidgets(this.widgets, this.widgetLayouts); this.dashboardWidgets.doCheck(); - this.dashboardLoading = false; } private updateWidgetLayouts() { diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.component.ts b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.component.ts index ab5535a92f..0df52fcbfa 100644 --- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.component.ts +++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.component.ts @@ -159,7 +159,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC widgets: null, widgetLayouts: {}, gridSettings: {}, - ignoreLoading: false, + ignoreLoading: true, ctrl: null, dashboardCtrl: this } @@ -171,7 +171,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC widgets: null, widgetLayouts: {}, gridSettings: {}, - ignoreLoading: false, + ignoreLoading: true, ctrl: null, dashboardCtrl: this } diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/states/entity-state-controller.component.ts b/ui-ngx/src/app/modules/home/pages/dashboard/states/entity-state-controller.component.ts index 646429f1e4..ddbbec4f21 100644 --- a/ui-ngx/src/app/modules/home/pages/dashboard/states/entity-state-controller.component.ts +++ b/ui-ngx/src/app/modules/home/pages/dashboard/states/entity-state-controller.component.ts @@ -193,21 +193,25 @@ export class EntityStateControllerComponent extends StateControllerComponent imp public getStateName(index: number): string { let result = ''; - if (this.stateObject[index]) { - let stateName = this.states[this.stateObject[index].id].name; - stateName = this.utils.customTranslation(stateName, stateName); - const params = this.stateObject[index].params; - const targetParams = params && params.targetEntityParamName ? params[params.targetEntityParamName] : params; - const entityName = targetParams && targetParams.entityName ? targetParams.entityName : ''; - const entityLabel = targetParams && targetParams.entityLabel ? targetParams.entityLabel : ''; - result = this.utils.insertVariable(stateName, 'entityName', entityName); - result = this.utils.insertVariable(result, 'entityLabel', entityLabel); - for (const prop of Object.keys(params)) { - if (params[prop] && params[prop].entityName) { - result = this.utils.insertVariable(result, prop + ':entityName', params[prop].entityName); - } - if (params[prop] && params[prop].entityLabel) { - result = this.utils.insertVariable(result, prop + ':entityLabel', params[prop].entityLabel); + const state = this.stateObject[index]; + if (state) { + const dashboardState = this.states[state.id]; + if (dashboardState) { + let stateName = dashboardState.name; + stateName = this.utils.customTranslation(stateName, stateName); + const params = this.stateObject[index].params; + const targetParams = params && params.targetEntityParamName ? params[params.targetEntityParamName] : params; + const entityName = targetParams && targetParams.entityName ? targetParams.entityName : ''; + const entityLabel = targetParams && targetParams.entityLabel ? targetParams.entityLabel : ''; + result = this.utils.insertVariable(stateName, 'entityName', entityName); + result = this.utils.insertVariable(result, 'entityLabel', entityLabel); + for (const prop of Object.keys(params)) { + if (params[prop] && params[prop].entityName) { + result = this.utils.insertVariable(result, prop + ':entityName', params[prop].entityName); + } + if (params[prop] && params[prop].entityLabel) { + result = this.utils.insertVariable(result, prop + ':entityLabel', params[prop].entityLabel); + } } } }