From f03751366b7686b337d25f5bcb1e53a3eeceee7f Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Tue, 17 Oct 2023 10:29:57 +0300 Subject: [PATCH] UI: Added breadcrumbs when navigate to editing widgets from the widget bundle --- .../widget/widget-library-routing.module.ts | 159 ++++++++---------- .../widgets-bundle-widgets.component.ts | 2 +- 2 files changed, 75 insertions(+), 86 deletions(-) diff --git a/ui-ngx/src/app/modules/home/pages/widget/widget-library-routing.module.ts b/ui-ngx/src/app/modules/home/pages/widget/widget-library-routing.module.ts index 4c3c933f82..8519b9d4d0 100644 --- a/ui-ngx/src/app/modules/home/pages/widget/widget-library-routing.module.ts +++ b/ui-ngx/src/app/modules/home/pages/widget/widget-library-routing.module.ts @@ -14,14 +14,13 @@ /// limitations under the License. /// -import { Injectable, NgModule } from '@angular/core'; -import { ActivatedRouteSnapshot, Resolve, RouterModule, Routes } from '@angular/router'; +import { inject, NgModule } from '@angular/core'; +import { ActivatedRouteSnapshot, ResolveFn, RouterModule, Routes } from '@angular/router'; import { EntitiesTableComponent } from '../../components/entity/entities-table.component'; import { Authority } from '@shared/models/authority.enum'; import { WidgetsBundlesTableConfigResolver } from '@modules/home/pages/widget/widgets-bundles-table-config.resolver'; import { BreadCrumbConfig, BreadCrumbLabelFunction } from '@shared/components/breadcrumb'; -import { Observable } from 'rxjs'; import { WidgetsBundle } from '@shared/models/widgets-bundle.model'; import { WidgetService } from '@core/http/widget.service'; import { WidgetEditorComponent } from '@home/pages/widget/widget-editor.component'; @@ -38,64 +37,43 @@ export interface WidgetEditorData { widget: WidgetInfo; } -@Injectable() -export class WidgetsBundleResolver implements Resolve { +const widgetsBundleResolver: ResolveFn = (route: ActivatedRouteSnapshot) => { + const widgetsBundleId = route.params.widgetsBundleId; + return inject(WidgetService).getWidgetsBundle(widgetsBundleId); +}; - constructor(private widgetsService: WidgetService) { - } +const widgetsBundleWidgetsResolver: ResolveFn> = (route: ActivatedRouteSnapshot) => { + const widgetsBundleId = route.params.widgetsBundleId; + return inject(WidgetService).getBundleWidgetTypeInfosList(widgetsBundleId); +}; - resolve(route: ActivatedRouteSnapshot): Observable { - const widgetsBundleId = route.params.widgetsBundleId; - return this.widgetsService.getWidgetsBundle(widgetsBundleId); - } -} - -@Injectable() -export class WidgetsBundleWidgetsResolver implements Resolve> { - - constructor(private widgetsService: WidgetService) { - } - - resolve(route: ActivatedRouteSnapshot): Observable> { - const widgetsBundleId = route.params.widgetsBundleId; - return this.widgetsService.getBundleWidgetTypeInfosList(widgetsBundleId); - } -} - -@Injectable() -export class WidgetEditorDataResolver implements Resolve { - - constructor(private widgetsService: WidgetService) { - } - - resolve(route: ActivatedRouteSnapshot): Observable { - const widgetTypeId = route.params.widgetTypeId; - if (!widgetTypeId || Object.keys(widgetType).includes(widgetTypeId)) { - let widgetTypeParam = widgetTypeId as widgetType; - if (!widgetTypeParam) { - widgetTypeParam = widgetType.timeseries; - } - return this.widgetsService.getWidgetTemplate(widgetTypeParam).pipe( - map((widget) => { - widget.widgetName = null; - return { - widgetTypeDetails: null, - widget - }; - }) - ); - } else { - return this.widgetsService.getWidgetTypeById(widgetTypeId).pipe( - map((result) => ({ - widgetTypeDetails: result, - widget: detailsToWidgetInfo(result) - })) - ); +const widgetEditorDataResolver: ResolveFn = (route: ActivatedRouteSnapshot) => { + const widgetTypeId = route.params.widgetTypeId; + if (!widgetTypeId || Object.keys(widgetType).includes(widgetTypeId)) { + let widgetTypeParam = widgetTypeId as widgetType; + if (!widgetTypeParam) { + widgetTypeParam = widgetType.timeseries; } + return inject(WidgetService).getWidgetTemplate(widgetTypeParam).pipe( + map((widget) => { + widget.widgetName = null; + return { + widgetTypeDetails: null, + widget + }; + }) + ); + } else { + return inject(WidgetService).getWidgetTypeById(widgetTypeId).pipe( + map((result) => ({ + widgetTypeDetails: result, + widget: detailsToWidgetInfo(result) + })) + ); } -} +}; -export const widgetsBundleWidgetsBreadcumbLabelFunction: BreadCrumbLabelFunction = ((route, translate) => +export const widgetsBundleWidgetsBreadcumbLabelFunction: BreadCrumbLabelFunction = ((route) => route.data.widgetsBundle.title); export const widgetEditorBreadcumbLabelFunction: BreadCrumbLabelFunction = @@ -103,6 +81,26 @@ export const widgetEditorBreadcumbLabelFunction: BreadCrumbLabelFunction, + hideTabs: true + }, + resolve: { + widgetEditorData: widgetEditorDataResolver + } + } +]; + const widgetTypesRoutes: Routes = [ { path: 'widget-types', @@ -124,23 +122,7 @@ const widgetTypesRoutes: Routes = [ entitiesTableConfig: WidgetTypesTableConfigResolver } }, - { - path: ':widgetTypeId', - component: WidgetEditorComponent, - canDeactivate: [ConfirmOnExitGuard], - data: { - auth: [Authority.SYS_ADMIN, Authority.TENANT_ADMIN], - title: 'widget.editor', - breadcrumb: { - labelFunction: widgetEditorBreadcumbLabelFunction, - icon: 'insert_chart' - } as BreadCrumbConfig, - hideTabs: true - }, - resolve: { - widgetEditorData: WidgetEditorDataResolver - } - } + ...widgetEditorRouter ] }, ]; @@ -168,21 +150,31 @@ const widgetsBundlesRoutes: Routes = [ }, { path: ':widgetsBundleId', - component: WidgetsBundleWidgetsComponent, - canDeactivate: [ConfirmOnExitGuard], data: { - auth: [Authority.SYS_ADMIN, Authority.TENANT_ADMIN], - title: 'widgets-bundle.widgets-bundle-widgets', breadcrumb: { labelFunction: widgetsBundleWidgetsBreadcumbLabelFunction, icon: 'now_widgets' } as BreadCrumbConfig, - hideTabs: true }, resolve: { - widgetsBundle: WidgetsBundleResolver, - widgets: WidgetsBundleWidgetsResolver - } + widgetsBundle: widgetsBundleResolver + }, + children: [ + { + path: '', + component: WidgetsBundleWidgetsComponent, + canDeactivate: [ConfirmOnExitGuard], + data: { + auth: [Authority.SYS_ADMIN, Authority.TENANT_ADMIN], + title: 'widgets-bundle.widgets-bundle-widgets', + hideTabs: true + }, + resolve: { + widgets: widgetsBundleWidgetsResolver + } + }, + ...widgetEditorRouter + ] } ] }, @@ -261,10 +253,7 @@ const routes: Routes = [ exports: [RouterModule], providers: [ WidgetTypesTableConfigResolver, - WidgetsBundlesTableConfigResolver, - WidgetsBundleResolver, - WidgetsBundleWidgetsResolver, - WidgetEditorDataResolver + WidgetsBundlesTableConfigResolver ] }) export class WidgetLibraryRoutingModule { } diff --git a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-widgets.component.ts b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-widgets.component.ts index 58403ad9b2..77d7cb6c2e 100644 --- a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-widgets.component.ts +++ b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-widgets.component.ts @@ -119,7 +119,7 @@ export class WidgetsBundleWidgetsComponent extends PageComponent implements OnIn if ($event) { $event.stopPropagation(); } - this.router.navigateByUrl(`resources/widgets-library/widget-types/${widgetType.id.id}`); + this.router.navigate([widgetType.id.id], {relativeTo: this.route}).then(()=> {}); } exportWidgetType($event: Event, widgetType: WidgetTypeInfo) {