tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

UI: Added breadcrumbs when navigate to editing widgets from the widget bundle

pull/9427/head
Vladyslav_Prykhodko 3 years ago
parent
16757b787d
commit
f03751366b
2 changed files with 75 additions and 86 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 159
      ui-ngx/src/app/modules/home/pages/widget/widget-library-routing.module.ts
  2. 2
      ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-widgets.component.ts

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) {
}
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> {
const widgetsBundleWidgetsResolver: ResolveFn<Array<WidgetTypeInfo>> = (route: ActivatedRouteSnapshot) => {
const widgetsBundleId = route.params.widgetsBundleId;
return inject(WidgetService).getBundleWidgetTypeInfosList(widgetsBundleId);
};
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) {

Write Preview
Loading…
Cancel
Save