dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Added breadcrumbs when navigate to editing widgets from the widget bundle
This commit is contained in:
Igor Kulikov 2023-10-23 14:47:01 +03:00 committed by GitHub
commit 4927b690b6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 75 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

159
ui-ngx/src/app/modules/home/pages/widget/widget-library-routing.module.ts
View File

@ -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<WidgetsBundle> {
const widgetsBundleResolver: ResolveFn<WidgetsBundle> = (route: ActivatedRouteSnapshot) => {
const widgetsBundleId = route.params.widgetsBundleId;
return inject(WidgetService).getWidgetsBundle(widgetsBundleId);
};
constructor(private widgetsService: WidgetService) {
}
const widgetsBundleWidgetsResolver: ResolveFn<Array<WidgetTypeInfo>> = (route: ActivatedRouteSnapshot) => {
const widgetsBundleId = route.params.widgetsBundleId;
return inject(WidgetService).getBundleWidgetTypeInfosList(widgetsBundleId);
};
resolve(route: ActivatedRouteSnapshot): Observable<WidgetsBundle> {
const widgetsBundleId = route.params.widgetsBundleId;
return this.widgetsService.getWidgetsBundle(widgetsBundleId);
}
}
@Injectable()
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);
}
}
@Injectable()
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(
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<WidgetEditorData> = (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<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
}
},
{
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
}
}
...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<any>,
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 { }

2
ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-widgets.component.ts
View File

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