Merge pull request #3463 from vvlladd28/improvement/menu/trackBy

Improvement draw menu and breadCrumb

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

@@ -14,9 +14,11 @@
 /// limitations under the License.
 ///
 
+import { HasUUID } from '@shared/models/id/has-uuid';
+
 export declare type MenuSectionType = 'link' | 'toggle';
 
-export class MenuSection {
+export interface MenuSection extends HasUUID{
   name: string;
   type: MenuSectionType;
   path: string;
@@ -26,12 +28,12 @@ export class MenuSection {
   pages?: Array<MenuSection>;
 }
 
-export class HomeSection {
+export interface HomeSection {
   name: string;
   places: Array<HomeSectionPlace>;
 }
 
-export class HomeSectionPlace {
+export interface HomeSectionPlace {
   name: string;
   icon: string;
   isMdiIcon?: boolean;

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

@@ -24,6 +24,7 @@ import { HomeSection, MenuSection } from '@core/services/menu.models';
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
 import { Authority } from '@shared/models/authority.enum';
 import { AuthUser } from '@shared/models/user.model';
+import { guid } from '@core/utils';
 
 @Injectable({
   providedIn: 'root'
@@ -74,24 +75,28 @@ export class MenuService {
     const sections: Array<MenuSection> = [];
     sections.push(
       {
+        id: guid(),
         name: 'home.home',
         type: 'link',
         path: '/home',
         icon: 'home'
       },
       {
+        id: guid(),
         name: 'tenant.tenants',
         type: 'link',
         path: '/tenants',
         icon: 'supervisor_account'
       },
       {
+        id: guid(),
         name: 'widget.widget-library',
         type: 'link',
         path: '/widgets-bundles',
         icon: 'now_widgets'
       },
       {
+        id: guid(),
         name: 'admin.system-settings',
         type: 'toggle',
         path: '/settings',
@@ -99,18 +104,21 @@ export class MenuService {
         icon: 'settings',
         pages: [
           {
+            id: guid(),
             name: 'admin.general',
             type: 'link',
             path: '/settings/general',
             icon: 'settings_applications'
           },
           {
+            id: guid(),
             name: 'admin.outgoing-mail',
             type: 'link',
             path: '/settings/outgoing-mail',
             icon: 'mail'
           },
           {
+            id: guid(),
             name: 'admin.security-settings',
             type: 'link',
             path: '/settings/security-settings',
@@ -173,54 +181,63 @@ export class MenuService {
     const sections: Array<MenuSection> = [];
     sections.push(
       {
+        id: guid(),
         name: 'home.home',
         type: 'link',
         path: '/home',
         icon: 'home'
       },
       {
+        id: guid(),
         name: 'rulechain.rulechains',
         type: 'link',
         path: '/ruleChains',
         icon: 'settings_ethernet'
       },
       {
+        id: guid(),
         name: 'customer.customers',
         type: 'link',
         path: '/customers',
         icon: 'supervisor_account'
       },
       {
+        id: guid(),
         name: 'asset.assets',
         type: 'link',
         path: '/assets',
         icon: 'domain'
       },
       {
+        id: guid(),
         name: 'device.devices',
         type: 'link',
         path: '/devices',
         icon: 'devices_other'
       },
       {
+        id: guid(),
         name: 'entity-view.entity-views',
         type: 'link',
         path: '/entityViews',
         icon: 'view_quilt'
       },
       {
+        id: guid(),
         name: 'widget.widget-library',
         type: 'link',
         path: '/widgets-bundles',
         icon: 'now_widgets'
       },
       {
+        id: guid(),
         name: 'dashboard.dashboards',
         type: 'link',
         path: '/dashboards',
         icon: 'dashboards'
       },
       {
+        id: guid(),
         name: 'audit-log.audit-logs',
         type: 'link',
         path: '/auditLogs',
@@ -316,30 +333,35 @@ export class MenuService {
     const sections: Array<MenuSection> = [];
     sections.push(
       {
+        id: guid(),
         name: 'home.home',
         type: 'link',
         path: '/home',
         icon: 'home'
       },
       {
+        id: guid(),
         name: 'asset.assets',
         type: 'link',
         path: '/assets',
         icon: 'domain'
       },
       {
+        id: guid(),
         name: 'device.devices',
         type: 'link',
         path: '/devices',
         icon: 'devices_other'
       },
       {
+        id: guid(),
         name: 'entity-view.entity-views',
         type: 'link',
         path: '/entityViews',
         icon: 'view_quilt'
       },
       {
+        id: guid(),
         name: 'dashboard.dashboards',
         type: 'link',
         path: '/dashboards',

ui-ngx/src/app/modules/home/menu/menu-toggle.component.html

@@ -24,7 +24,7 @@
         [ngClass]="{'tb-toggled' : sectionActive()}"></span>
 </a>
 <ul id="docs-menu-{{section.name | nospace}}" class="tb-menu-toggle-list" [ngStyle]="{height: sectionHeight()}">
-  <li *ngFor="let page of section.pages">
+  <li *ngFor="let page of section.pages; trackBy: trackBySectionPages">
     <tb-menu-link [section]="page"></tb-menu-link>
   </li>
 </ul>

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

@@ -44,4 +44,8 @@ export class MenuToggleComponent implements OnInit {
       return '0px';
     }
   }
+
+  trackBySectionPages(index: number, section: MenuSection){
+    return section.id;
+  }
 }

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

@@ -16,7 +16,7 @@
 
 -->
 <ul fxFlex fxLayout="column" fxLayoutAlign="start stretch" class="tb-side-menu">
-  <li *ngFor="let section of menuSections$| async" [ngSwitch]="section.type === 'link'">
+  <li *ngFor="let section of menuSections$ | async; trackBy: trackByMenuSection" [ngSwitch]="section.type === 'link'">
     <tb-menu-link *ngSwitchCase="true" [section]="section"></tb-menu-link>
     <tb-menu-toggle *ngSwitchCase="false" [section]="section"></tb-menu-toggle>
   </li>

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

@@ -16,6 +16,7 @@
 
 import { Component, OnInit } from '@angular/core';
 import { MenuService } from '@core/services/menu.service';
+import { MenuSection } from '@core/services/menu.models';
 
 @Component({
   selector: 'tb-side-menu',
@@ -29,6 +30,10 @@ export class SideMenuComponent implements OnInit {
   constructor(private menuService: MenuService) {
   }
 
+  trackByMenuSection(index: number, section: MenuSection){
+    return section.id;
+  }
+
   ngOnInit() {
   }
 

ui-ngx/src/app/shared/components/breadcrumb.component.html

@@ -19,7 +19,7 @@
   <h1 fxFlex fxHide.gt-sm *ngIf="lastBreadcrumb$ | async; let breadcrumb">
     {{ breadcrumb.ignoreTranslate ? (breadcrumb.labelFunction ? breadcrumb.labelFunction() : breadcrumb.label) : (breadcrumb.label | translate) }}
   </h1>
-  <span fxHide.lt-md fxLayout="row" *ngFor="let breadcrumb of breadcrumbs$ | async; last as isLast;" [ngSwitch]="isLast">
+  <span fxHide.lt-md fxLayout="row" *ngFor="let breadcrumb of breadcrumbs$ | async; trackBy: trackByBreadcrumbs; last as isLast;" [ngSwitch]="isLast">
 	    <a *ngSwitchCase="false" [routerLink]="breadcrumb.link" [queryParams]="breadcrumb.queryParams">
         <mat-icon *ngIf="breadcrumb.isMdiIcon" [svgIcon]="breadcrumb.icon">
 	    	</mat-icon>

ui-ngx/src/app/shared/components/breadcrumb.component.ts

@@ -20,6 +20,7 @@ import { BreadCrumb, BreadCrumbConfig } from './breadcrumb';
 import { ActivatedRoute, ActivatedRouteSnapshot, NavigationEnd, Router } from '@angular/router';
 import { distinctUntilChanged, filter, map } from 'rxjs/operators';
 import { TranslateService } from '@ngx-translate/core';
+import { guid } from '@core/utils';
 
 @Component({
   selector: 'tb-breadcrumb',
@@ -94,6 +95,7 @@ export class BreadcrumbComponent implements OnInit, OnDestroy {
         const isMdiIcon = icon.startsWith('mdi:');
         const link = [ route.pathFromRoot.map(v => v.url.map(segment => segment.toString()).join('/')).join('/') ];
         const breadcrumb = {
+          id: guid(),
           label,
           labelFunction,
           ignoreTranslate,
@@ -110,4 +112,8 @@ export class BreadcrumbComponent implements OnInit, OnDestroy {
     }
     return newBreadcrumbs;
   }
+
+  trackByBreadcrumbs(index: number, breadcrumb: BreadCrumb){
+    return breadcrumb.id;
+  }
 }

ui-ngx/src/app/shared/components/breadcrumb.ts

@@ -16,8 +16,9 @@
 
 import { ActivatedRouteSnapshot, Params } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
+import { HasUUID } from '@shared/models/id/has-uuid';
 
-export interface BreadCrumb {
+export interface BreadCrumb extends HasUUID{
   label: string;
   labelFunction?: () => string;
   ignoreTranslate: boolean;