From c4a129a0bf15d9cea331eb817ecdd59c9edad6a3 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Tue, 20 Aug 2024 13:39:16 +0300
Subject: [PATCH] UI: Menu improvements.

---
 .../widget/lib/home-page/quick-link.component.ts          | 8 +++++---
 ui-ngx/src/app/modules/home/menu/menu-link.component.html | 2 +-
 .../src/app/modules/home/menu/menu-toggle.component.html  | 2 +-
 .../src/app/shared/components/breadcrumb.component.html   | 8 ++------
 ui-ngx/src/app/shared/components/breadcrumb.component.ts  | 5 -----
 ui-ngx/src/app/shared/components/breadcrumb.ts            | 1 -
 6 files changed, 9 insertions(+), 17 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-link.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-link.component.ts
index 7a2e7704f2..efc624f90d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-link.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-link.component.ts
@@ -49,6 +49,7 @@ import { PageLink } from '@shared/models/page/page-link';
 import { Direction } from '@shared/models/page/sort-order';
 import { emptyPageData, PageData } from '@shared/models/page/page-data';
 import { deepClone } from '@core/utils';
+import { CustomTranslatePipe } from '@shared/pipe/custom-translate.pipe';
 
 @Component({
   selector: 'tb-quick-link',
@@ -114,6 +115,7 @@ export class QuickLinkComponent extends PageComponent implements OnInit, Control
               private fb: UntypedFormBuilder,
               private menuService: MenuService,
               public translate: TranslateService,
+              private customTranslate: CustomTranslatePipe,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher) {
     super(store);
   }
@@ -135,7 +137,7 @@ export class QuickLinkComponent extends PageComponent implements OnInit, Control
           this.updateView(modelValue);
         }),
         map(value => value ? (typeof value === 'string' ? value :
-          ((value as any).translated ? value.name : this.translate.instant(value.name))) : ''),
+          ((value as any).translated ? value.name : this.customTranslate.transform(value.name))) : ''),
         distinctUntilChanged(),
         switchMap(name => this.fetchLinks(name) ),
         share()
@@ -202,7 +204,7 @@ export class QuickLinkComponent extends PageComponent implements OnInit, Control
   }
 
   displayLinkFn = (link?: MenuSection): string | undefined =>
-    link ? ((link as any).translated ? link.name : this.translate.instant(link.fullName || link.name)) : undefined;
+    link ? ((link as any).translated ? link.name : this.customTranslate.transform(link.fullName || link.name)) : undefined;
 
   fetchLinks(searchText?: string): Observable<Array<MenuSection>> {
     this.searchText = searchText;
@@ -228,7 +230,7 @@ export class QuickLinkComponent extends PageComponent implements OnInit, Control
         map((links) => {
           const result = deepClone(links);
           for (const link of result) {
-            link.name = this.translate.instant(link.fullName || link.name);
+            link.name = this.customTranslate.transform(link.fullName || link.name);
             (link as any).translated = true;
           }
           return result;
diff --git a/ui-ngx/src/app/modules/home/menu/menu-link.component.html b/ui-ngx/src/app/modules/home/menu/menu-link.component.html
index b1d7d00bcd..c0c098d5b6 100644
--- a/ui-ngx/src/app/modules/home/menu/menu-link.component.html
+++ b/ui-ngx/src/app/modules/home/menu/menu-link.component.html
@@ -17,5 +17,5 @@
 -->
 <a mat-button routerLinkActive="tb-active" [routerLinkActiveOptions]="{paths: 'subset', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored'}" routerLink="{{section.path}}">
   <tb-icon matButtonIcon *ngIf="section.icon !== null">{{section.icon}}</tb-icon>
-  <span>{{section.name | translate}}</span>
+  <span>{{section.name | customTranslate}}</span>
 </a>
diff --git a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
index 9375b04500..13eb0e2095 100644
--- a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
+++ b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
@@ -17,7 +17,7 @@
 -->
 <a mat-button class="tb-button-toggle" (click)="toggleSection($event)">
   <tb-icon matButtonIcon *ngIf="section.icon !== null">{{section.icon}}</tb-icon>
-  <span>{{section.name | translate}}</span>
+  <span>{{section.name | customTranslate}}</span>
   <span class=" pull-right fa fa-chevron-down tb-toggle-icon"
         [ngClass]="{'tb-toggled' : section.opened}"></span>
 </a>
diff --git a/ui-ngx/src/app/shared/components/breadcrumb.component.html b/ui-ngx/src/app/shared/components/breadcrumb.component.html
index 506555d9e8..3397d74e0d 100644
--- a/ui-ngx/src/app/shared/components/breadcrumb.component.html
+++ b/ui-ngx/src/app/shared/components/breadcrumb.component.html
@@ -17,9 +17,7 @@
 -->
 <div fxFlex class="tb-breadcrumb" fxLayout="row">
   <h1 fxFlex fxHide.gt-sm *ngIf="lastBreadcrumb$ | async; let breadcrumb">
-    {{ breadcrumb.ignoreTranslate
-    ? (breadcrumb.labelFunction ? breadcrumb.labelFunction() : (breadcrumb.label | customTranslate))
-    : (breadcrumb.label | translate) }}
+    {{ breadcrumb.labelFunction ? breadcrumb.labelFunction() : (breadcrumb.label | customTranslate) }}
   </h1>
   <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">
@@ -40,7 +38,5 @@
   <tb-icon *ngIf="!breadcrumb.iconUrl">
     {{ breadcrumb.icon }}
   </tb-icon>
-  {{ breadcrumb.ignoreTranslate
-  ? (breadcrumb.labelFunction ? breadcrumb.labelFunction() : (breadcrumb.label | customTranslate))
-  : (breadcrumb.label | translate) }}
+  {{ breadcrumb.labelFunction ? breadcrumb.labelFunction() : (breadcrumb.label | customTranslate) }}
 </ng-template>
diff --git a/ui-ngx/src/app/shared/components/breadcrumb.component.ts b/ui-ngx/src/app/shared/components/breadcrumb.component.ts
index cc4ea56bc4..9965560b55 100644
--- a/ui-ngx/src/app/shared/components/breadcrumb.component.ts
+++ b/ui-ngx/src/app/shared/components/breadcrumb.component.ts
@@ -113,16 +113,12 @@ export class BreadcrumbComponent implements OnInit, OnDestroy {
       const breadcrumbConfig = route.routeConfig.data.breadcrumb as BreadCrumbConfig<any>;
       if (breadcrumbConfig && !breadcrumbConfig.skip) {
         let labelFunction: () => string;
-        let ignoreTranslate: boolean;
         const section: MenuSection = breadcrumbConfig.menuId ?
           availableMenuSections.find(menu => menu.id === breadcrumbConfig.menuId) : null;
         const label = section?.name || breadcrumbConfig.label || 'home.home';
         if (breadcrumbConfig.labelFunction) {
           labelFunction = () => this.activeComponentValue ?
             breadcrumbConfig.labelFunction(route, this.translate, this.activeComponentValue, lastChild.data) : label;
-          ignoreTranslate = true;
-        } else {
-          ignoreTranslate = false;
         }
         const icon = section?.icon || breadcrumbConfig.icon || 'home';
         const link = [ route.pathFromRoot.map(v => v.url.map(segment => segment.toString()).join('/')).join('/') ];
@@ -130,7 +126,6 @@ export class BreadcrumbComponent implements OnInit, OnDestroy {
           id: guid(),
           label,
           labelFunction,
-          ignoreTranslate,
           icon,
           link,
           queryParams: null
diff --git a/ui-ngx/src/app/shared/components/breadcrumb.ts b/ui-ngx/src/app/shared/components/breadcrumb.ts
index 5adf8b3aa2..9c85cc5a19 100644
--- a/ui-ngx/src/app/shared/components/breadcrumb.ts
+++ b/ui-ngx/src/app/shared/components/breadcrumb.ts
@@ -22,7 +22,6 @@ import { MenuId } from '@core/services/menu.models';
 export interface BreadCrumb extends HasUUID{
   label: string;
   labelFunction?: () => string;
-  ignoreTranslate: boolean;
   icon: string;
   link: any[];
   queryParams: Params;