83 lines
2.8 KiB
TypeScript
83 lines
2.8 KiB
TypeScript
|
///
|
||
|
|
/// Copyright © 2016-2019 The Thingsboard Authors
|
||
|
|
///
|
||
|
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||
|
|
/// you may not use this file except in compliance with the License.
|
||
|
|
/// You may obtain a copy of the License at
|
||
|
|
///
|
||
|
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||
|
|
///
|
||
|
|
/// Unless required by applicable law or agreed to in writing, software
|
||
|
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||
|
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||
|
|
/// See the License for the specific language governing permissions and
|
||
|
|
/// limitations under the License.
|
||
|
|
///
|
||
|
|
|
||
|
|
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||
|
|
import { BehaviorSubject, Subject } from 'rxjs';
|
||
|
|
import { BreadCrumb } from './breadcrumb';
|
||
|
|
import { ActivatedRoute, ActivatedRouteSnapshot, NavigationEnd, Router } from '@angular/router';
|
||
|
|
import { distinctUntilChanged, filter, map } from 'rxjs/operators';
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
selector: '[tb-breadcrumb]',
|
||
|
|
templateUrl: './breadcrumb.component.html',
|
||
|
|
styleUrls: ['./breadcrumb.component.scss']
|
||
|
|
})
|
||
|
|
export class BreadcrumbComponent implements OnInit, OnDestroy {
|
||
|
|
|
||
|
|
breadcrumbs$: Subject<Array<BreadCrumb>> = new BehaviorSubject<Array<BreadCrumb>>(this.buildBreadCrumbs(this.activatedRoute.snapshot));
|
||
|
|
|
||
|
|
routerEventsSubscription = this.router.events.pipe(
|
||
|
|
filter((event) => event instanceof NavigationEnd ),
|
||
|
|
distinctUntilChanged(),
|
||
|
|
map( () => this.buildBreadCrumbs(this.activatedRoute.snapshot) )
|
||
|
|
).subscribe(breadcrumns => this.breadcrumbs$.next(breadcrumns) );
|
||
|
|
|
||
|
|
lastBreadcrumb$ = this.breadcrumbs$.pipe(
|
||
|
|
map( breadcrumbs => breadcrumbs[breadcrumbs.length - 1])
|
||
|
|
);
|
||
|
|
|
||
|
|
constructor(private router: Router,
|
||
|
|
private activatedRoute: ActivatedRoute) {
|
||
|
|
}
|
||
|
|
|
||
|
|
ngOnInit(): void {
|
||
|
|
}
|
||
|
|
|
||
|
|
ngOnDestroy(): void {
|
||
|
|
if (this.routerEventsSubscription) {
|
||
|
|
this.routerEventsSubscription.unsubscribe();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
buildBreadCrumbs(route: ActivatedRouteSnapshot, breadcrumbs: Array<BreadCrumb> = []): Array<BreadCrumb> {
|
||
|
|
let newBreadcrumbs = breadcrumbs;
|
||
|
|
if (route.routeConfig && route.routeConfig.data) {
|
||
|
|
const breadcrumbData = route.routeConfig.data.breadcrumb;
|
||
|
|
if (breadcrumbData && !breadcrumbData.skip) {
|
||
|
|
const label = breadcrumbData.label || 'home.home';
|
||
|
|
const icon = breadcrumbData.icon || 'home';
|
||
|
|
const isMdiIcon = icon.startsWith('mdi:');
|
||
|
|
const link = [ '/' + route.url.join('') ];
|
||
|
|
const queryParams = route.queryParams;
|
||
|
|
const breadcrumb = {
|
||
|
|
label,
|
||
|
|
icon,
|
||
|
|
isMdiIcon,
|
||
|
|
link,
|
||
|
|
queryParams
|
||
|
|
};
|
||
|
|
newBreadcrumbs = [...breadcrumbs, breadcrumb];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (route.firstChild) {
|
||
|
|
return this.buildBreadCrumbs(route.firstChild, newBreadcrumbs);
|
||
|
|
}
|
||
|
|
return newBreadcrumbs;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|