import { Component , OnInit } from '@angular/core' ; import { ActivatedRoute , Router , NavigationEnd } from "@angular/router" ; import { menu } from '../../features/ui/model/menu' ; import { filter , map , distinctUntilChanged } from 'rxjs/operators' ; import { NavItem } from '../../features/ui/model/nav-item' ; import { Breadcrumb } from './breadcrumb' ; import { UrlService } from 'carey-url-util' ; import { BreadcrumbService } from './breadcrumb.service' ; @ Component ( { selector : 'app-breadcrumb' , templateUrl : './breadcrumb.component.html' , styleUrls : [ './breadcrumb.component.css' ] } ) export class BreadcrumbComponent implements OnInit { breadcrumbs : Breadcrumb [ ] = [ ] ; currentUrl : string = '' ; constructor ( private router , private activatedRoute , private urlService , private breadcrumbService ) { } ngOnInit ( ) { this . setDefaultBreadcrumb ( ) ; this . listenForRouteChange ( ) ; this . listenForBreadcrumbUpdate ( ) ; } private setDefaultBreadcrumb ( ) { this . setCurrentUrl ( ) ; if ( this . currentUrl ) { let navItem = this . findRoute ( ) ; if ( navItem ) { let breadcrumb = { name : navItem . displayName , url : this . currentUrl } ; this . pushBreadcrumb ( breadcrumb ) ; } else { let breadcrumbsStr = localStorage . getItem ( "breadcrumbs" ) ; if ( breadcrumbsStr ) { if ( breadcrumbsStr . includes ( this . currentUrl ) ) { this . breadcrumbs = JSON . parse ( breadcrumbsStr ) as Breadcrumb [ ] ; } } } } } private listenForBreadcrumbUpdate ( ) { this . breadcrumbService . onUpdate ( ) . subscribe ( ( str ) => { this . handleBreadcrumbUpdate ( str ) ; } ) ; } private handleBreadcrumbUpdate ( str ) { let lastBreadcrumb = this . breadcrumbs [ this . breadcrumbs . length - 1 ] ; if ( lastBreadcrumb && lastBreadcrumb . pauseDisplay ) { lastBreadcrumb . pauseDisplay = false ; lastBreadcrumb . name = str ; } } private listenForRouteChange ( ) { this . router . events . pipe ( filter ( event => event instanceof NavigationEnd ) , map ( ( ) => this . activatedRoute ) , map ( route => { while ( route . firstChild ) { route = route . firstChild ; } return route ; } ) , distinctUntilChanged ( ) ) . subscribe ( ( route ) => this . handleCurrentRoute ( route ) ) ; } private setCurrentUrl ( ) { let url = this . router . url ; if ( url ) { this . currentUrl = this . urlService . shortenUrlIfNecessary ( url . substring ( 1 ) ) ; } } private handleCurrentRoute ( route ) { this . setCurrentUrl ( ) ; let navItem = this . findRoute ( menu ) ; if ( navItem ) { this . handleTopLevelBreadcrumb ( navItem ) ; } else { this . addBreadcrumb ( route ) ; } } private addBreadcrumb ( route ) { if ( this . breadcrumbs . length < 6 ) { let breadcrumb = null ; route . data . subscribe ( ( data ) => { breadcrumb = { name : data . breadcrumb , url : this . currentUrl , pauseDisplay : data . pauseDisplay } ; } ) ; if ( breadcrumb && this . breadcrumbs && this . breadcrumbs [ this . breadcrumbs . length - 1 ] ) { if ( breadcrumb . url != this . breadcrumbs [ this . breadcrumbs . length - 1 ] . url ) { route . queryParams . subscribe ( ( queryParams ) => { if ( queryParams ) { breadcrumb . queryParams = queryParams ; } } ) ; this . pushBreadcrumb ( breadcrumb ) ; } } } } private handleTopLevelBreadcrumb ( navItem ) { this . breadcrumbs = [ ] ; let breadcrumb = { name : navItem . displayName , url : navItem . route } ; this . pushBreadcrumb ( breadcrumb ) ; } private findRoute ( navItems ? ) { if ( ! navItems ) navItems = menu ; let returnedItem = null ; if ( this . currentUrl ) { for ( let item of navItems ) { if ( this . currentUrl == item . route ) { returnedItem = item ; break ; } else if ( item . children ) { returnedItem = this . findRoute ( item . children ) ; if ( returnedItem != null ) break ; } } } return returnedItem ; } routeTo ( index ) { if ( index < this . breadcrumbs . length - 1 ) { this . breadcrumbs . splice ( index + 1 ) ; } let breadcrumb = this . breadcrumbs [ index ] ; let route = breadcrumb . url ; this . router . navigate ( [ route ] , { queryParams : breadcrumb . queryParams } ) ; } private pushBreadcrumb ( breadcrumb ) { this . breadcrumbs . push ( breadcrumb ) ; localStorage . setItem ( "breadcrumbs" , JSON . stringify ( this . breadcrumbs ) ) ; sessionStorage . setItem ( "breadcrumbs" , JSON . stringify ( this . breadcrumbs ) ) ; } }