From d8ada35182284216e4d7793e811beaf67f9ef0fe Mon Sep 17 00:00:00 2001 From: Tarnavskiy Date: Tue, 27 Dec 2022 12:43:07 +0200 Subject: [PATCH 1/3] Remove dashboard-select component from the DOM-structure when it is hedden --- .../components/dashboard-page/dashboard-page.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html index ca1bae3de7..692d67e292 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html @@ -135,7 +135,7 @@ (click)="openDashboardSettings($event)"> settings - Date: Tue, 27 Dec 2022 15:32:47 +0200 Subject: [PATCH 2/3] Get currentEntity data from stateParams instead doing find-request --- ui-ngx/src/app/core/http/entity.service.ts | 34 ++++++++++++++++++++-- 1 file changed, 32 insertions(+), 2 deletions(-) diff --git a/ui-ngx/src/app/core/http/entity.service.ts b/ui-ngx/src/app/core/http/entity.service.ts index b66399de6c..2493b11a64 100644 --- a/ui-ngx/src/app/core/http/entity.service.ts +++ b/ui-ngx/src/app/core/http/entity.service.ts @@ -869,8 +869,38 @@ export class EntityService { }; aliasInfo.currentEntity = null; if (!aliasInfo.resolveMultiple && aliasInfo.entityFilter) { - return this.findSingleEntityInfoByEntityFilter(aliasInfo.entityFilter, - {ignoreLoading: true, ignoreErrors: true}).pipe( + let entityInfoObservable: Observable; + if (result.stateEntity && aliasInfo.entityFilter.type === AliasFilterType.singleEntity) { + let currentEntity: EntityInfo = null; + if (stateParams) { + if (result.entityParamName && result.entityParamName.length) { + const stateEntity = stateParams[result.entityParamName]; + if (stateEntity) { + currentEntity = { + id: stateEntity.entityId.id, + entityType: stateEntity.entityId.entityType, + name: stateEntity.entityName, + label: stateEntity.entityLabel + }; + } + } else { + if (stateParams.entityId) { + currentEntity = { + id: stateParams.entityId.id, + entityType: stateParams.entityId.entityType as EntityType, + name: stateParams.entityName, + label: stateParams.entityLabel + }; + } + } + } + entityInfoObservable = currentEntity ? of(currentEntity) : this.findSingleEntityInfoByEntityFilter(aliasInfo.entityFilter, + {ignoreLoading: true, ignoreErrors: true}); + } else { + entityInfoObservable = this.findSingleEntityInfoByEntityFilter(aliasInfo.entityFilter, + {ignoreLoading: true, ignoreErrors: true}); + } + return entityInfoObservable.pipe( map((entity) => { aliasInfo.currentEntity = entity; return aliasInfo; From 2b0fa4c47850036abddec2e0e59b7cf74191478a Mon Sep 17 00:00:00 2001 From: Tarnavskiy Date: Tue, 27 Dec 2022 19:16:23 +0200 Subject: [PATCH 3/3] Solved issue of a re-init Widget-Component service and widgets-info Cache. --- .../dashboard-page.component.ts | 6 +++- .../home/components/home-components.module.ts | 2 -- .../widget/widget-component.service.ts | 31 +++++++++++-------- .../components/widget/widget.component.ts | 7 +++-- 4 files changed, 28 insertions(+), 18 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts index 04cc676d95..b9ce6e977b 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts @@ -30,6 +30,7 @@ import { Optional, Renderer2, StaticProvider, + Type, ViewChild, ViewContainerRef, ViewEncapsulation @@ -148,6 +149,7 @@ import { TbPopoverService } from '@shared/components/popover.service'; import { tap } from 'rxjs/operators'; import { LayoutFixedSize, LayoutWidthType } from '@home/components/dashboard-page/layout/layout.models'; import { TbPopoverComponent } from '@shared/components/popover.component'; +import { HOME_COMPONENTS_MODULE_TOKEN } from '@home/components/tokens'; // @dynamic @Component({ @@ -331,6 +333,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC constructor(protected store: Store, @Inject(WINDOW) private window: Window, @Inject(DOCUMENT) private document: Document, + @Inject(HOME_COMPONENTS_MODULE_TOKEN) private homeComponentsModule: Type, private breakpointObserver: BreakpointObserver, private route: ActivatedRoute, private router: Router, @@ -1112,7 +1115,8 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC addWidgetFromType(widget: WidgetInfo) { this.onAddWidgetClosed(); this.searchBundle = ''; - this.widgetComponentService.getWidgetInfo(widget.bundleAlias, widget.typeAlias, widget.isSystemType).subscribe( + this.widgetComponentService.getWidgetInfo(widget.bundleAlias, widget.typeAlias, widget.isSystemType, + [this.homeComponentsModule]).subscribe( (widgetTypeInfo) => { const config: WidgetConfig = JSON.parse(widgetTypeInfo.defaultConfig); config.title = 'New ' + widgetTypeInfo.widgetName; diff --git a/ui-ngx/src/app/modules/home/components/home-components.module.ts b/ui-ngx/src/app/modules/home/components/home-components.module.ts index 7cfcf269de..669fde14ff 100644 --- a/ui-ngx/src/app/modules/home/components/home-components.module.ts +++ b/ui-ngx/src/app/modules/home/components/home-components.module.ts @@ -35,7 +35,6 @@ import { AddAttributeDialogComponent } from '@home/components/attribute/add-attr import { EditAttributeValuePanelComponent } from '@home/components/attribute/edit-attribute-value-panel.component'; import { DashboardComponent } from '@home/components/dashboard/dashboard.component'; import { WidgetComponent } from '@home/components/widget/widget.component'; -import { WidgetComponentService } from '@home/components/widget/widget-component.service'; import { LegendComponent } from '@home/components/widget/legend.component'; import { AliasesEntitySelectPanelComponent } from '@home/components/alias/aliases-entity-select-panel.component'; import { AliasesEntitySelectComponent } from '@home/components/alias/aliases-entity-select.component'; @@ -456,7 +455,6 @@ import { AssetProfileAutocompleteComponent } from '@home/components/profile/asse RateLimitsDetailsDialogComponent ], providers: [ - WidgetComponentService, CustomDialogService, ImportExportService, {provide: EMBED_DASHBOARD_DIALOG_TOKEN, useValue: EmbedDashboardDialogComponent}, diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-component.service.ts b/ui-ngx/src/app/modules/home/components/widget/widget-component.service.ts index 38b14fe485..9a4f941211 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-component.service.ts +++ b/ui-ngx/src/app/modules/home/components/widget/widget-component.service.ts @@ -45,13 +45,13 @@ import { MODULES_MAP } from '@shared/public-api'; import * as tinycolor_ from 'tinycolor2'; import moment from 'moment'; import { IModulesMap } from '@modules/common/modules-map.models'; -import { HOME_COMPONENTS_MODULE_TOKEN } from '@home/components/tokens'; import { widgetSettingsComponentsMap } from '@home/components/widget/lib/settings/widget-settings.module'; const tinycolor = tinycolor_; -// @dynamic -@Injectable() +@Injectable({ + providedIn: 'root' +}) export class WidgetComponentService { private cssParser = new cssjs(); @@ -68,7 +68,6 @@ export class WidgetComponentService { constructor(@Inject(WINDOW) private window: Window, @Optional() @Inject(MODULES_MAP) private modulesMap: IModulesMap, - @Inject(HOME_COMPONENTS_MODULE_TOKEN) private homeComponentsModule: Type, private dynamicComponentFactoryService: DynamicComponentFactoryService, private widgetService: WidgetService, private utils: UtilsService, @@ -185,9 +184,9 @@ export class WidgetComponentService { () => { const loadDefaultWidgetInfoTasks = [ this.loadWidgetResources(this.missingWidgetType, 'global-widget-missing-type', - [SharedModule, WidgetComponentsModule, this.homeComponentsModule]), + [SharedModule, WidgetComponentsModule]), this.loadWidgetResources(this.errorWidgetType, 'global-widget-error-type', - [SharedModule, WidgetComponentsModule, this.homeComponentsModule]), + [SharedModule, WidgetComponentsModule]), ]; forkJoin(loadDefaultWidgetInfoTasks).subscribe( () => { @@ -231,13 +230,14 @@ export class WidgetComponentService { } } - public getWidgetInfo(bundleAlias: string, widgetTypeAlias: string, isSystem: boolean): Observable { + public getWidgetInfo(bundleAlias: string, widgetTypeAlias: string, isSystem: boolean, modules?: Type[]): Observable { return this.init().pipe( - mergeMap(() => this.getWidgetInfoInternal(bundleAlias, widgetTypeAlias, isSystem)) + mergeMap(() => this.getWidgetInfoInternal(bundleAlias, widgetTypeAlias, isSystem, modules)) ); } - private getWidgetInfoInternal(bundleAlias: string, widgetTypeAlias: string, isSystem: boolean): Observable { + private getWidgetInfoInternal(bundleAlias: string, widgetTypeAlias: string, isSystem: boolean, + modules?: Type[]): Observable { const widgetInfoSubject = new ReplaySubject(); const widgetInfo = this.getWidgetInfoFromCache(bundleAlias, widgetTypeAlias, isSystem); if (widgetInfo) { @@ -245,7 +245,7 @@ export class WidgetComponentService { widgetInfoSubject.complete(); } else { if (this.utils.widgetEditMode) { - this.loadWidget(this.editingWidgetType, bundleAlias, isSystem, widgetInfoSubject); + this.loadWidget(this.editingWidgetType, bundleAlias, isSystem, widgetInfoSubject, modules); } else { const key = this.createWidgetInfoCacheKey(bundleAlias, widgetTypeAlias, isSystem); let fetchQueue = this.widgetsInfoFetchQueue.get(key); @@ -256,7 +256,7 @@ export class WidgetComponentService { this.widgetsInfoFetchQueue.set(key, fetchQueue); this.widgetService.getWidgetType(bundleAlias, widgetTypeAlias, isSystem, {ignoreErrors: true}).subscribe( (widgetType) => { - this.loadWidget(widgetType, bundleAlias, isSystem, widgetInfoSubject); + this.loadWidget(widgetType, bundleAlias, isSystem, widgetInfoSubject, modules); }, () => { widgetInfoSubject.next(this.missingWidgetType); @@ -270,7 +270,8 @@ export class WidgetComponentService { return widgetInfoSubject.asObservable(); } - private loadWidget(widgetType: WidgetType, bundleAlias: string, isSystem: boolean, widgetInfoSubject: Subject) { + private loadWidget(widgetType: WidgetType, bundleAlias: string, isSystem: boolean, widgetInfoSubject: Subject, + modules?: Type[]) { const widgetInfo = toWidgetInfo(widgetType); const key = this.createWidgetInfoCacheKey(bundleAlias, widgetInfo.alias, isSystem); let widgetControllerDescriptor: WidgetControllerDescriptor = null; @@ -283,7 +284,11 @@ export class WidgetComponentService { } if (widgetControllerDescriptor) { const widgetNamespace = `widget-type-${(isSystem ? 'sys-' : '')}${bundleAlias}-${widgetInfo.alias}`; - this.loadWidgetResources(widgetInfo, widgetNamespace, [SharedModule, WidgetComponentsModule, this.homeComponentsModule]).subscribe( + const widgetModules = [SharedModule, WidgetComponentsModule]; + if (modules) { + widgetModules.push(...modules); + } + this.loadWidgetResources(widgetInfo, widgetNamespace, widgetModules).subscribe( () => { if (widgetControllerDescriptor.settingsSchema) { widgetInfo.typeSettingsSchema = widgetControllerDescriptor.settingsSchema; diff --git a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts index baa0664a31..cfb95ef97a 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts @@ -31,6 +31,7 @@ import { OnInit, Renderer2, SimpleChanges, + Type, ViewChild, ViewContainerRef, ViewEncapsulation @@ -114,7 +115,7 @@ import { MobileService } from '@core/services/mobile.service'; import { DialogService } from '@core/services/dialog.service'; import { PopoverPlacement } from '@shared/components/popover.models'; import { TbPopoverService } from '@shared/components/popover.service'; -import { DASHBOARD_PAGE_COMPONENT_TOKEN } from '@home/components/tokens'; +import { DASHBOARD_PAGE_COMPONENT_TOKEN, HOME_COMPONENTS_MODULE_TOKEN } from '@home/components/tokens'; @Component({ selector: 'tb-widget', @@ -190,6 +191,7 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI private popoverService: TbPopoverService, @Inject(EMBED_DASHBOARD_DIALOG_TOKEN) private embedDashboardDialogComponent: ComponentType, @Inject(DASHBOARD_PAGE_COMPONENT_TOKEN) private dashboardPageComponent: ComponentType, + @Inject(HOME_COMPONENTS_MODULE_TOKEN) private homeComponentsModule: Type, private widgetService: WidgetService, private resources: ResourcesService, private timeService: TimeService, @@ -354,7 +356,8 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI this.subscriptionContext.widgetUtils = this.widgetContext.utils; this.subscriptionContext.getServerTimeDiff = this.dashboardService.getServerTimeDiff.bind(this.dashboardService); - this.widgetComponentService.getWidgetInfo(this.widget.bundleAlias, this.widget.typeAlias, this.widget.isSystemType).subscribe( + this.widgetComponentService.getWidgetInfo(this.widget.bundleAlias, this.widget.typeAlias, this.widget.isSystemType, + [this.homeComponentsModule]).subscribe( (widgetInfo) => { this.widgetInfo = widgetInfo; this.loadFromWidgetInfo();