UI: Refactoring RouterTabsComponent for used children route

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

@@ -262,34 +262,6 @@ export class MenuService {
             isMdiIcon: true
           }
         ]
-      },
-      {
-        id: 'account',
-        name: 'profile.profile',
-        type: 'link',
-        path: '/account',
-        disabled: true,
-        icon: 'mdi:message-badge',
-        isMdiIcon: true,
-        pages: [
-          {
-            id: 'personal_info',
-            name: 'account.personal-info',
-            fullName: 'account.personal-info',
-            type: 'link',
-            path: '/account/profile',
-            icon: 'mdi:badge-account-horizontal',
-            isMdiIcon: true
-          },
-          {
-            id: 'security',
-            name: 'security.security',
-            fullName: 'security.security',
-            type: 'link',
-            path: '/account/security',
-            icon: 'lock'
-          }
-        ]
       }
     );
     return sections;
@@ -662,34 +634,6 @@ export class MenuService {
             icon: 'track_changes'
           }
         ]
-      },
-      {
-        id: 'account',
-        name: 'profile.profile',
-        type: 'link',
-        path: '/account',
-        disabled: true,
-        icon: 'mdi:message-badge',
-        isMdiIcon: true,
-        pages: [
-          {
-            id: 'personal_info',
-            name: 'account.personal-info',
-            fullName: 'account.personal-info',
-            type: 'link',
-            path: '/account/profile',
-            icon: 'mdi:badge-account-horizontal',
-            isMdiIcon: true
-          },
-          {
-            id: 'security',
-            name: 'security.security',
-            fullName: 'security.security',
-            type: 'link',
-            path: '/account/security',
-            icon: 'lock'
-          }
-        ]
       }
     );
     return sections;
@@ -941,34 +885,6 @@ export class MenuService {
             icon: 'inbox'
           }
         ]
-      },
-      {
-        id: 'account',
-        name: 'profile.profile',
-        type: 'link',
-        path: '/account',
-        disabled: true,
-        icon: 'mdi:message-badge',
-        isMdiIcon: true,
-        pages: [
-          {
-            id: 'personal_info',
-            name: 'account.personal-info',
-            fullName: 'account.personal-info',
-            type: 'link',
-            path: '/account/profile',
-            icon: 'mdi:badge-account-horizontal',
-            isMdiIcon: true
-          },
-          {
-            id: 'security',
-            name: 'security.security',
-            fullName: 'security.security',
-            type: 'link',
-            path: '/account/security',
-            icon: 'lock'
-          }
-        ]
       }
     );
     return sections;

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

@@ -89,6 +89,16 @@ export class RouterTabsComponent extends PageComponent implements OnInit {
       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)) {
+      const activeRouterChildren = activatedRoute.routeConfig.children.filter(page => page.path !== '');
+      return activeRouterChildren.map(tab => ({
+        id: tab.component.name,
+        type: 'link',
+        name: tab.data?.breadcrumb?.label ?? '',
+        icon: tab.data?.breadcrumb?.icon ?? '',
+        isMdiIcon: tab.data?.breadcrumb?.icon.startsWith('mdi:') ?? false,
+        path: `${sectionPath}/${tab.path}`
+      }));
     } else {
       return [];
     }

ui-ngx/src/app/modules/home/menu/side-menu.component.ts

@@ -17,8 +17,6 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { MenuService } from '@core/services/menu.service';
 import { MenuSection } from '@core/services/menu.models';
-import { Observable } from 'rxjs';
-import { map, share } from 'rxjs/operators';
 
 @Component({
   selector: 'tb-side-menu',
@@ -28,23 +26,15 @@ import { map, share } from 'rxjs/operators';
 })
 export class SideMenuComponent implements OnInit {
 
-  menuSections$: Observable<Array<MenuSection>>;
+  menuSections$ = this.menuService.menuSections();
 
   constructor(private menuService: MenuService) {
-    this.menuSections$ = this.menuService.menuSections().pipe(
-      map((sections) => this.filterSections(sections)),
-      share()
-    );
   }
 
   trackByMenuSection(index: number, section: MenuSection){
     return section.id;
   }
 
-  private filterSections(sections: Array<MenuSection>): Array<MenuSection> {
-    return sections.filter(section => !section.disabled);
-  }
-
   ngOnInit() {
   }
 

ui-ngx/src/app/modules/home/pages/account/account-routing.module.ts

@@ -30,7 +30,8 @@ const routes: Routes = [
       breadcrumb: {
         label: 'account.account',
         icon: 'account_circle'
-      }
+      },
+      useChildrenRoutesForTabs: true
     },
     children: [
       {

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -11,8 +11,7 @@
         "permission-denied-text": "You don't have permission to perform this operation!"
     },
     "account": {
-        "account": "Account",
-        "personal-info": "Personal info"
+        "account": "Account"
     },
     "action": {
         "activate": "Activate",