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

Improvement draw menu and breadCrumb
2020-09-15 12:24:00 +03:00 · 2020-09-15 12:24:00 +03:00 · 075138cc5c
commit 075138cc5c
parent 6a4c2791b3 dc77426dab
9 changed files with 47 additions and 7 deletions
--- a/ui-ngx/src/app/core/services/menu.models.ts
+++ b/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;
--- a/ui-ngx/src/app/core/services/menu.service.ts
+++ b/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',
--- a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
+++ b/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>
--- a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.ts
+++ b/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;
+  }
 }
--- a/ui-ngx/src/app/modules/home/menu/side-menu.component.html
+++ b/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>
--- a/ui-ngx/src/app/modules/home/menu/side-menu.component.ts
+++ b/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() {
  }

--- a/ui-ngx/src/app/shared/components/breadcrumb.component.html
+++ b/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>
--- a/ui-ngx/src/app/shared/components/breadcrumb.component.ts
+++ b/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;
+  }
 }
--- a/ui-ngx/src/app/shared/components/breadcrumb.ts
+++ b/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;