UI: Router tabs improvements. Improve entities table to watch router data changes.

ui-ngx/src/app/core/services/menu.models.ts

@@ -27,6 +27,8 @@ export interface MenuSection extends HasUUID{
   height?: string;
   pages?: Array<MenuSection>;
   opened?: boolean;
+  disabled?: boolean;
+  rootOnly?: boolean;
 }
 
 export interface HomeSection {

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<Subscription>();
+
   constructor(protected store: Store<AppState>,
               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 {

ui-ngx/src/app/modules/home/components/router-tabs.component.html

@@ -16,7 +16,7 @@
 
 -->
 <div fxFlex fxLayout="column" style="width: 100%;">
-  <nav mat-tab-nav-bar mat-stretch-tabs="false" class="tb-router-tabs" [tabPanel]="tabPanel">
+  <nav *ngIf="!routerOutlet?.activatedRouteData?.hideTabs && !hideCurrentTabs" mat-tab-nav-bar mat-stretch-tabs="false" class="tb-router-tabs" [tabPanel]="tabPanel">
     <a *ngFor="let tab of tabs$ | async"
        routerLink="{{tab.path}}"
        routerLinkActive
@@ -29,6 +29,6 @@
     </a>
   </nav>
   <mat-tab-nav-panel #tabPanel fxFlex fxLayout="column" class="tb-router-tabs-content">
-    <router-outlet (activate)="activeComponentChanged($event)"></router-outlet>
+    <router-outlet #routerOutlet="outlet" (activate)="activeComponentChanged($event)"></router-outlet>
   </mat-tab-nav-panel>
 </div>

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<Array<MenuSection>> = 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<AppState>,
@@ -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<MenuSection> {
+    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<MenuSection> = 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;
   }
 
 }