From 907c8f3e1c644c8a359e9ec704ce9b8fafc3597d Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Fri, 28 Jul 2023 16:58:12 +0300
Subject: [PATCH] UI: Optimize gets tabs in routerTabs components

---
 .../home/components/router-tabs.component.ts  | 49 +++++++++++++------
 1 file changed, 34 insertions(+), 15 deletions(-)

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 c5ffb11908..5735499262 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,8 +20,8 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { MenuService } from '@core/services/menu.service';
-import { distinctUntilChanged, filter, map, mergeMap, take } from 'rxjs/operators';
-import { merge } from 'rxjs';
+import { distinctUntilChanged, filter, map, mergeMap, startWith, take } from 'rxjs/operators';
+import { merge, Observable } from 'rxjs';
 import { MenuSection } from '@core/services/menu.models';
 import { ActiveComponentService } from '@core/services/active-component.service';
 import { TbAnchorComponent } from '@shared/components/tb-anchor.component';
@@ -39,14 +39,7 @@ export class RouterTabsComponent extends PageComponent implements OnInit {
 
   hideCurrentTabs = false;
 
-  tabs$ = merge(this.menuService.menuSections(),
-    this.router.events.pipe(
-      filter((event) => event instanceof NavigationEnd ),
-      distinctUntilChanged())
-  ).pipe(
-    mergeMap(() => this.menuService.menuSections().pipe(take(1))),
-    map((sections) => this.buildTabs(this.activatedRoute, sections))
-  );
+  tabs$: Observable<Array<MenuSection>>;
 
   constructor(protected store: Store<AppState>,
               private activatedRoute: ActivatedRoute,
@@ -57,6 +50,23 @@ export class RouterTabsComponent extends PageComponent implements OnInit {
   }
 
   ngOnInit() {
+    if (this.activatedRoute.snapshot.data.useChildrenRoutesForTabs) {
+      this.tabs$ = this.router.events.pipe(
+        filter((event) => event instanceof NavigationEnd),
+        startWith(''),
+        map(() => this.buildTabsForRoutes(this.activatedRoute))
+      );
+    } else {
+      this.tabs$ = merge(this.menuService.menuSections(),
+        this.router.events.pipe(
+          filter((event) => event instanceof NavigationEnd ),
+          distinctUntilChanged())
+      ).pipe(
+        mergeMap(() => this.menuService.menuSections().pipe(take(1))),
+        map((sections) => this.buildTabs(this.activatedRoute, sections))
+      );
+    }
+
     this.activatedRoute.data.subscribe(
       (data) => this.buildTabsHeaderComponent(data)
     );
@@ -80,16 +90,26 @@ export class RouterTabsComponent extends PageComponent implements OnInit {
     }
   }
 
-  private buildTabs(activatedRoute: ActivatedRoute, sections: MenuSection[]): Array<MenuSection> {
-    const sectionPath = '/' + activatedRoute.pathFromRoot.map(r => r.snapshot.url)
+  private getSectionPath(activatedRoute: ActivatedRoute): string {
+    return '/' + activatedRoute.pathFromRoot.map(r => r.snapshot.url)
       .filter(f => !!f[0]).map(f => f.map(f1 => f1.path).join('/')).join('/');
+  }
+
+  private buildTabs(activatedRoute: ActivatedRoute, sections: MenuSection[]): Array<MenuSection> {
+    const sectionPath = this.getSectionPath(activatedRoute);
     const found = this.findRootSection(sections, sectionPath);
     if (found) {
       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}));
-    } else if (activatedRoute.snapshot.data.useChildrenRoutesForTabs && sectionPath.endsWith(activatedRoute.routeConfig.path)) {
+    }
+    return [];
+  }
+
+  private buildTabsForRoutes(activatedRoute: ActivatedRoute): Array<MenuSection> {
+    const sectionPath = this.getSectionPath(activatedRoute);
+    if (activatedRoute.routeConfig.children.length) {
       const activeRouterChildren = activatedRoute.routeConfig.children.filter(page => page.path !== '');
       return activeRouterChildren.map(tab => ({
         id: tab.component.name,
@@ -98,9 +118,8 @@ export class RouterTabsComponent extends PageComponent implements OnInit {
         icon: tab.data?.breadcrumb?.icon ?? '',
         path: `${sectionPath}/${tab.path}`
       }));
-    } else {
-      return [];
     }
+    return [];
   }
 
   private findRootSection(sections: MenuSection[], sectionPath: string): MenuSection {