diff --git a/ui-ngx/src/app/core/services/menu.models.ts b/ui-ngx/src/app/core/services/menu.models.ts index fa7192d62e..27a1d81e2b 100644 --- a/ui-ngx/src/app/core/services/menu.models.ts +++ b/ui-ngx/src/app/core/services/menu.models.ts @@ -27,6 +27,8 @@ export interface MenuSection extends HasUUID{ height?: string; pages?: Array; opened?: boolean; + disabled?: boolean; + rootOnly?: boolean; } export interface HomeSection { diff --git a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts index 536e1f3994..ffcfb48aae 100644 --- a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts +++ b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts @@ -126,6 +126,8 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa private widgetResize$: ResizeObserver; + private rxSubscriptions = new Array(); + constructor(protected store: Store, public route: ActivatedRoute, public translate: TranslateService, @@ -143,7 +145,11 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa if (this.entitiesTableConfig) { this.init(this.entitiesTableConfig); } else { - this.init(this.route.snapshot.data.entitiesTableConfig); + this.rxSubscriptions.push(this.route.data.subscribe( + (data) => { + this.init(data.entitiesTableConfig); + } + )); } this.widgetResize$ = new ResizeObserver(() => { const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue; @@ -159,6 +165,10 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa if (this.widgetResize$) { this.widgetResize$.disconnect(); } + this.rxSubscriptions.forEach((subscription) => { + subscription.unsubscribe(); + }); + this.rxSubscriptions.length = 0; } ngOnChanges(changes: SimpleChanges): void { diff --git a/ui-ngx/src/app/modules/home/components/router-tabs.component.html b/ui-ngx/src/app/modules/home/components/router-tabs.component.html index c14238d0eb..8acf399756 100644 --- a/ui-ngx/src/app/modules/home/components/router-tabs.component.html +++ b/ui-ngx/src/app/modules/home/components/router-tabs.component.html @@ -16,7 +16,7 @@ -->
-
diff --git a/ui-ngx/src/app/modules/home/components/route-tabs.component.scss b/ui-ngx/src/app/modules/home/components/router-tabs.component.scss similarity index 100% rename from ui-ngx/src/app/modules/home/components/route-tabs.component.scss rename to ui-ngx/src/app/modules/home/components/router-tabs.component.scss diff --git a/ui-ngx/src/app/modules/home/components/router-tabs.component.ts b/ui-ngx/src/app/modules/home/components/router-tabs.component.ts index afa9672733..17f204d0e4 100644 --- a/ui-ngx/src/app/modules/home/components/router-tabs.component.ts +++ b/ui-ngx/src/app/modules/home/components/router-tabs.component.ts @@ -20,27 +20,30 @@ import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; import { WINDOW } from '@core/services/window.service'; import { BreakpointObserver } from '@angular/cdk/layout'; -import { ActivatedRoute, Router } from '@angular/router'; +import { ActivatedRoute, NavigationEnd, Router } from '@angular/router'; import { MenuService } from '@core/services/menu.service'; -import { map } from 'rxjs/operators'; -import { Observable } from 'rxjs'; +import { distinctUntilChanged, filter, map, mergeMap } from 'rxjs/operators'; +import { merge } from 'rxjs'; import { MenuSection } from '@core/services/menu.models'; -import { instanceOfSearchableComponent } from '@home/models/searchable-component.models'; -import { BroadcastService } from '@core/services/broadcast.service'; import { ActiveComponentService } from '@core/services/active-component.service'; @Component({ selector: 'tb-router-tabs', templateUrl: './router-tabs.component.html', - styleUrls: ['./route-tabs.component.scss'] + styleUrls: ['./router-tabs.component.scss'] }) export class RouterTabsComponent extends PageComponent implements AfterViewInit, OnInit { - tabs$: Observable> = this.menuService.menuSections().pipe( - map(sections => { - const found = sections.find(section => section.path === `/${this.activatedRoute.routeConfig.path}`); - return found ? found.pages : []; - }) + hideCurrentTabs = false; + + tabs$ = merge(this.menuService.menuSections(), + this.router.events.pipe( + filter((event) => event instanceof NavigationEnd ), + distinctUntilChanged() + ) + ).pipe( + mergeMap(() => this.menuService.menuSections()), + map((sections) => this.buildTabs(this.activatedRoute, sections)) ); constructor(protected store: Store, @@ -60,6 +63,45 @@ export class RouterTabsComponent extends PageComponent implements AfterViewInit, activeComponentChanged(activeComponent: any) { this.activeComponentService.setCurrentActiveComponent(activeComponent); + let snapshot = this.router.routerState.snapshot.root; + this.hideCurrentTabs = false; + let found = false; + while (snapshot.children.length) { + if (snapshot.component && snapshot.component === RouterTabsComponent) { + if (this.activatedRoute.snapshot === snapshot) { + found = true; + } else if (found) { + this.hideCurrentTabs = true; + break; + } + } + snapshot = snapshot.children[0]; + } + } + + private buildTabs(activatedRoute: ActivatedRoute, sections: MenuSection[]): Array { + const sectionPath = '/' + activatedRoute.pathFromRoot.map(r => r.snapshot.url) + .filter(f => !!f[0]).map(f => f.map(f1 => f1.path).join('/')).join('/'); + const found = this.findRootSection(sections, sectionPath); + const rootPath = sectionPath.substring(0, sectionPath.length - found.path.length); + const isRoot = rootPath === ''; + const tabs: Array = found ? found.pages.filter(page => !page.disabled && (!page.rootOnly || isRoot)) : []; + return tabs.map((tab) => ({...tab, path: rootPath + tab.path})); + } + + private findRootSection(sections: MenuSection[], sectionPath: string): MenuSection { + for (const section of sections) { + if (sectionPath.endsWith(section.path)) { + return section; + } + if (section.pages?.length) { + const found = this.findRootSection(section.pages, sectionPath); + if (found) { + return found; + } + } + } + return null; } }