Merge pull request #9427 from vvlladd28/improvement/widget-bundle/edit-widgets-breadcrumb

Added breadcrumbs when navigate to editing widgets from the widget bundle

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 { inject, NgModule } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, RouterModule, Routes } from '@angular/router';
+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,44 +37,24 @@ export interface WidgetEditorData {
   widget: WidgetInfo;
 }
 
-@Injectable()
+const widgetsBundleResolver: ResolveFn<WidgetsBundle> = (route: ActivatedRouteSnapshot) => {
-export class WidgetsBundleResolver implements Resolve<WidgetsBundle> {
-
-  constructor(private widgetsService: WidgetService) {
-  }
-
-  resolve(route: ActivatedRouteSnapshot): Observable<WidgetsBundle> {
   const widgetsBundleId = route.params.widgetsBundleId;
-    return this.widgetsService.getWidgetsBundle(widgetsBundleId);
+  return inject(WidgetService).getWidgetsBundle(widgetsBundleId);
-  }
+};
-}
 
-@Injectable()
+const widgetsBundleWidgetsResolver: ResolveFn<Array<WidgetTypeInfo>> = (route: ActivatedRouteSnapshot) => {
-export class WidgetsBundleWidgetsResolver implements Resolve<Array<WidgetTypeInfo>> {
-
-  constructor(private widgetsService: WidgetService) {
-  }
-
-  resolve(route: ActivatedRouteSnapshot): Observable<Array<WidgetTypeInfo>> {
   const widgetsBundleId = route.params.widgetsBundleId;
-    return this.widgetsService.getBundleWidgetTypeInfosList(widgetsBundleId);
+  return inject(WidgetService).getBundleWidgetTypeInfosList(widgetsBundleId);
-  }
+};
-}
 
-@Injectable()
+const widgetEditorDataResolver: ResolveFn<WidgetEditorData> = (route: ActivatedRouteSnapshot) => {
-export class WidgetEditorDataResolver implements Resolve<WidgetEditorData> {
-
-  constructor(private widgetsService: WidgetService) {
-  }
-
-  resolve(route: ActivatedRouteSnapshot): Observable<WidgetEditorData> {
   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(
+    return inject(WidgetService).getWidgetTemplate(widgetTypeParam).pipe(
       map((widget) => {
         widget.widgetName = null;
         return {
@@ -85,17 +64,16 @@ export class WidgetEditorDataResolver implements Resolve<WidgetEditorData> {
       })
     );
   } else {
-      return this.widgetsService.getWidgetTypeById(widgetTypeId).pipe(
+    return inject(WidgetService).getWidgetTypeById(widgetTypeId).pipe(
       map((result) => ({
         widgetTypeDetails: result,
         widget: detailsToWidgetInfo(result)
       }))
     );
   }
-  }
+};
-}
 
-export const widgetsBundleWidgetsBreadcumbLabelFunction: BreadCrumbLabelFunction<any> = ((route, translate) =>
+export const widgetsBundleWidgetsBreadcumbLabelFunction: BreadCrumbLabelFunction<any> = ((route) =>
   route.data.widgetsBundle.title);
 
 export const widgetEditorBreadcumbLabelFunction: BreadCrumbLabelFunction<WidgetEditorComponent> =
@@ -103,6 +81,26 @@ export const widgetEditorBreadcumbLabelFunction: BreadCrumbLabelFunction<WidgetE
     component?.widget?.widgetName ?
       (component.widget.widgetName + (component.widget.deprecated ? ` (${translate.instant('widget.deprecated')})` : '')) : '');
 
+const widgetEditorRouter: Routes = [
+  {
+    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<WidgetEditorComponent>,
+      hideTabs: true
+    },
+    resolve: {
+      widgetEditorData: widgetEditorDataResolver
+    }
+  }
+];
+
 const widgetTypesRoutes: Routes = [
   {
     path: 'widget-types',
@@ -124,23 +122,7 @@ const widgetTypesRoutes: Routes = [
           entitiesTableConfig: WidgetTypesTableConfigResolver
         }
       },
-      {
+      ...widgetEditorRouter
-        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<WidgetEditorComponent>,
-          hideTabs: true
-        },
-        resolve: {
-          widgetEditorData: WidgetEditorDataResolver
-        }
-      }
     ]
   },
 ];
@@ -168,21 +150,31 @@ const widgetsBundlesRoutes: Routes = [
       },
       {
         path: ':widgetsBundleId',
+        data: {
+          breadcrumb: {
+            labelFunction: widgetsBundleWidgetsBreadcumbLabelFunction,
+            icon: 'now_widgets'
+          } as BreadCrumbConfig<any>,
+        },
+        resolve: {
+          widgetsBundle: widgetsBundleResolver
+        },
+        children: [
+          {
+            path: '',
             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<any>,
               hideTabs: true
             },
             resolve: {
-          widgetsBundle: WidgetsBundleResolver,
+              widgets: widgetsBundleWidgetsResolver
-          widgets: WidgetsBundleWidgetsResolver
             }
+          },
+          ...widgetEditorRouter
+        ]
       }
     ]
   },
@@ -261,10 +253,7 @@ const routes: Routes = [
   exports: [RouterModule],
   providers: [
     WidgetTypesTableConfigResolver,
-    WidgetsBundlesTableConfigResolver,
+    WidgetsBundlesTableConfigResolver
-    WidgetsBundleResolver,
-    WidgetsBundleWidgetsResolver,
-    WidgetEditorDataResolver
   ]
 })
 export class WidgetLibraryRoutingModule { }

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) {