Browse Source
Move breadcrumb resolution out of BreadcrumbComponent into a dedicated BreadcrumbService so the breadcrumb stream can be consumed across the new top toolbar without duplicating ActivatedRoute walking. Introduce a main-toolbar models file shared by HomeComponent for the redesigned header. Promote NotificationBell and GithubBadge to standalone NgModules so they can be re-used outside HomeModule. Refresh dashboard-page / dashboard-toolbar / default- and entity-state controllers and routing data to match the new toolbar shape (drop legacy icon fields, tighten padding, switch flex axes). User-menu spacing follow-up.pull/15888/head
Igor Kulikov
3 months ago
30 changed files with 645 additions and 287 deletions
@ -0,0 +1,140 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2026 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 { Injectable } from '@angular/core'; |
||||
|
import { BehaviorSubject, merge, shareReplay, Subject, Subscription } from 'rxjs'; |
||||
|
import { BreadCrumb, BreadCrumbConfig } from '@shared/components/breadcrumb'; |
||||
|
import { ActivatedRoute, ActivatedRouteSnapshot, NavigationEnd, Router } from '@angular/router'; |
||||
|
import { TranslateService } from '@ngx-translate/core'; |
||||
|
import { MenuService } from '@core/services/menu.service'; |
||||
|
import { distinctUntilChanged, filter, first, map, switchMap } from 'rxjs/operators'; |
||||
|
import { MenuSection, menuSectionMap } from '@core/services/menu.models'; |
||||
|
import { guid } from '@core/utils'; |
||||
|
import { ActiveComponentService } from '@core/services/active-component.service'; |
||||
|
|
||||
|
@Injectable({ |
||||
|
providedIn: 'root' |
||||
|
}) |
||||
|
export class BreadcrumbService { |
||||
|
|
||||
|
private updateBreadcrumbsSubscription: Subscription = null; |
||||
|
private breadcrumbsSubject: Subject<Array<BreadCrumb>> = new BehaviorSubject<Array<BreadCrumb>>([]); |
||||
|
private activeComponent: any; |
||||
|
|
||||
|
get breadcrumbs$() { |
||||
|
return this.breadcrumbsSubject.asObservable().pipe(shareReplay(1)); |
||||
|
} |
||||
|
|
||||
|
get lastBreadcrumb$() { |
||||
|
return this.breadcrumbs$.pipe<BreadCrumb>( |
||||
|
map( (breadcrumbs: BreadCrumb[]) => breadcrumbs.length ? breadcrumbs[breadcrumbs.length - 1] : null) |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
constructor(private router: Router, |
||||
|
private activatedRoute: ActivatedRoute, |
||||
|
private translate: TranslateService, |
||||
|
private menuService: MenuService, |
||||
|
private activeComponentService: ActiveComponentService) { |
||||
|
|
||||
|
merge(this.router.events.pipe( |
||||
|
filter((event) => event instanceof NavigationEnd ), |
||||
|
distinctUntilChanged()), this.menuService.availableMenuSections()).pipe( |
||||
|
switchMap(() => this.menuService.availableMenuSections().pipe(first())), |
||||
|
map( (sections: MenuSection[]) => this.buildBreadCrumbs(this.activatedRoute.snapshot, sections) ) |
||||
|
).subscribe((breadcrumbs: BreadCrumb[]) => this.breadcrumbsSubject.next(breadcrumbs) ); |
||||
|
|
||||
|
this.activeComponentService.onActiveComponentChanged().subscribe(comp => this.setActiveComponent(comp)); |
||||
|
} |
||||
|
|
||||
|
private setActiveComponent(activeComponent: any) { |
||||
|
if (this.updateBreadcrumbsSubscription) { |
||||
|
this.updateBreadcrumbsSubscription.unsubscribe(); |
||||
|
this.updateBreadcrumbsSubscription = null; |
||||
|
} |
||||
|
this.activeComponent = activeComponent; |
||||
|
if (this.activeComponent) { |
||||
|
if (this.activeComponent.updateBreadcrumbs) { |
||||
|
this.updateBreadcrumbsSubscription = this.activeComponent.updateBreadcrumbs.subscribe(() => { |
||||
|
this.menuService.availableMenuSections().pipe(first()).subscribe((sections: MenuSection[]) => { |
||||
|
const breadcrumbs = this.buildBreadCrumbs(this.activatedRoute.snapshot, sections); |
||||
|
this.breadcrumbsSubject.next(breadcrumbs); |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private buildBreadCrumbs(route: ActivatedRouteSnapshot, availableMenuSections: MenuSection[], |
||||
|
breadcrumbs: Array<BreadCrumb> = [], |
||||
|
lastChild?: ActivatedRouteSnapshot): Array<BreadCrumb> { |
||||
|
if (!lastChild) { |
||||
|
lastChild = this.lastChild(route); |
||||
|
} |
||||
|
let newBreadcrumbs = breadcrumbs; |
||||
|
if (route.routeConfig && route.routeConfig.data) { |
||||
|
const breadcrumbConfig = route.routeConfig.data.breadcrumb as BreadCrumbConfig<any>; |
||||
|
if (breadcrumbConfig && !breadcrumbConfig.skip) { |
||||
|
let labelFunction: () => string; |
||||
|
let section: MenuSection = null; |
||||
|
if (breadcrumbConfig.menuId) { |
||||
|
section = availableMenuSections.find(menu => menu.id === breadcrumbConfig.menuId); |
||||
|
if (!section) { |
||||
|
section = menuSectionMap.get(breadcrumbConfig.menuId); |
||||
|
} |
||||
|
} |
||||
|
const label = section?.name || breadcrumbConfig.label || 'home.home'; |
||||
|
const customTranslate = section?.customTranslate || false; |
||||
|
if (breadcrumbConfig.labelFunction) { |
||||
|
labelFunction = () => { |
||||
|
if (this.activeComponent) { |
||||
|
try { |
||||
|
return breadcrumbConfig.labelFunction(route, this.translate, this.activeComponent, lastChild.data); |
||||
|
} catch { |
||||
|
return label; |
||||
|
} |
||||
|
} else { |
||||
|
return label; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
const link = [ route.pathFromRoot.map(v => v.url.map(segment => segment.toString()).join('/')).join('/') ]; |
||||
|
const breadcrumb = { |
||||
|
id: guid(), |
||||
|
label, |
||||
|
customTranslate, |
||||
|
labelFunction, |
||||
|
link, |
||||
|
queryParams: null |
||||
|
}; |
||||
|
newBreadcrumbs = [...breadcrumbs, breadcrumb]; |
||||
|
} |
||||
|
} |
||||
|
if (route.firstChild) { |
||||
|
return this.buildBreadCrumbs(route.firstChild, availableMenuSections, newBreadcrumbs, lastChild); |
||||
|
} |
||||
|
return newBreadcrumbs; |
||||
|
} |
||||
|
|
||||
|
private lastChild(route: ActivatedRouteSnapshot) { |
||||
|
let child = route; |
||||
|
while (child.firstChild !== null) { |
||||
|
child = child.firstChild; |
||||
|
} |
||||
|
return child; |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,35 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2026 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 { NgModule } from '@angular/core'; |
||||
|
import { CommonModule } from '@angular/common'; |
||||
|
import { SharedModule } from '@app/shared/shared.module'; |
||||
|
import { GithubBadgeComponent } from '@home/components/github-badge/github-badge.component'; |
||||
|
|
||||
|
@NgModule({ |
||||
|
declarations: |
||||
|
[ |
||||
|
GithubBadgeComponent |
||||
|
], |
||||
|
imports: [ |
||||
|
CommonModule, |
||||
|
SharedModule |
||||
|
], |
||||
|
exports: [ |
||||
|
GithubBadgeComponent |
||||
|
] |
||||
|
}) |
||||
|
export class GithubBadgeModule { } |
||||
@ -0,0 +1,38 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2026 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 { NgModule } from '@angular/core'; |
||||
|
import { CommonModule } from '@angular/common'; |
||||
|
import { SharedModule } from '@app/shared/shared.module'; |
||||
|
import { NotificationBellComponent } from '@home/components/notification/notification-bell.component'; |
||||
|
import { ShowNotificationPopoverComponent } from '@home/components/notification/show-notification-popover.component'; |
||||
|
|
||||
|
@NgModule({ |
||||
|
declarations: |
||||
|
[ |
||||
|
NotificationBellComponent, |
||||
|
ShowNotificationPopoverComponent |
||||
|
], |
||||
|
imports: [ |
||||
|
CommonModule, |
||||
|
SharedModule |
||||
|
], |
||||
|
exports: [ |
||||
|
NotificationBellComponent, |
||||
|
ShowNotificationPopoverComponent |
||||
|
] |
||||
|
}) |
||||
|
export class NotificationBellModule { } |
||||
@ -0,0 +1,28 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2026 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 { EventEmitter } from '@angular/core'; |
||||
|
import { isObservable } from 'rxjs'; |
||||
|
|
||||
|
export interface MainToolbarComponent { |
||||
|
hideMainToolbar: boolean; |
||||
|
toggleSideBar: EventEmitter<void>; |
||||
|
} |
||||
|
|
||||
|
export const isMainToolbarComponent = (cmp: any): cmp is MainToolbarComponent => { |
||||
|
const mainToolbarCmp = (cmp as MainToolbarComponent); |
||||
|
return isObservable(mainToolbarCmp.toggleSideBar); |
||||
|
}; |
||||
Loading…
Reference in new issue