diff --git a/libs/angular-accelerator/src/lib/services/breadcrumb.service.ts b/libs/angular-accelerator/src/lib/services/breadcrumb.service.ts index c2d17267..57cb30c7 100644 --- a/libs/angular-accelerator/src/lib/services/breadcrumb.service.ts +++ b/libs/angular-accelerator/src/lib/services/breadcrumb.service.ts @@ -2,19 +2,37 @@ import { Injectable } from '@angular/core' import { ActivatedRoute, ActivatedRouteSnapshot, Data, NavigationEnd, ParamMap, Router } from '@angular/router' import { TranslateService } from '@ngx-translate/core' import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy' -import { BehaviorSubject, filter } from 'rxjs' +import { BehaviorSubject, filter, map } from 'rxjs' import { MenuItem } from 'primeng/api' import { BreadCrumbMenuItem } from '../model/breadcrumb-menu-item.model' +import { SyncableTopic } from '@onecx/accelerator' + +interface ManualBreadcrumbs { + menuItems: MenuItem[] +} + +// This topic is defined here and not in integration-interface, because +// it is not used as framework independent integration but for improving +// angular specific things +class ManualBreadcrumbsTopic extends SyncableTopic { + constructor() { + super('manualBreadcrumbs', 1) + } +} @Injectable({ providedIn: 'any' }) @UntilDestroy() export class BreadcrumbService { - private itemsSource = new BehaviorSubject([]) + private itemsSource$ = new ManualBreadcrumbsTopic() generatedItemsSource = new BehaviorSubject([]) - itemsHandler = this.itemsSource.asObservable() + itemsHandler = this.itemsSource$.pipe(map((manualBreadcrumbs) => manualBreadcrumbs.menuItems)) - constructor(private router: Router, private activeRoute: ActivatedRoute, private translateService: TranslateService) { + constructor( + private router: Router, + private activeRoute: ActivatedRoute, + private translateService: TranslateService + ) { this.generateBreadcrumbs(this.activeRoute.snapshot) this.router.events .pipe( @@ -93,16 +111,18 @@ export class BreadcrumbService { ] if (translationKeys.length) { this.translateService.get(translationKeys).subscribe((translations: any) => { - this.itemsSource.next( - items.map((i) => ({ + this.itemsSource$.publish({ + menuItems: items.map((i) => ({ ...i, label: translations[i.labelKey || ''] || i.label, title: translations[i.titleKey || ''] || i.title, - })) - ) + })), + }) }) } else { - this.itemsSource.next(items) + this.itemsSource$.publish({ + menuItems: items, + }) } } }