Merge pull request #5345 from ChantsovaEkaterina/improvement/translatable-dashboard-title

[3.3.2] UI: make dashboard title translatable when 'Display dashboard title' option enabled

@@ -148,7 +148,7 @@
       <mat-drawer-content fxLayout="column" fxLayoutAlign="center start">
       <mat-drawer-content fxLayout="column" fxLayoutAlign="center start">
         <section *ngIf="!widgetEditMode" class="tb-dashboard-title"
         <section *ngIf="!widgetEditMode" class="tb-dashboard-title"
                  [ngStyle]="{'color': dashboard.configuration.settings.titleColor}">
                  [ngStyle]="{'color': dashboard.configuration.settings.titleColor}">
-          <h3 [fxShow]="!isEdit && displayTitle()">{{ dashboard.title }}</h3>
+          <h3 [fxShow]="!isEdit && displayTitle()">{{ translatedDashboardTitle }}</h3>
           <mat-form-field [fxShow]="isEdit" class="mat-block">
           <mat-form-field [fxShow]="isEdit" class="mat-block">
             <mat-label translate [ngStyle]="{'color': dashboard.configuration.settings.titleColor}">dashboard.title</mat-label>
             <mat-label translate [ngStyle]="{'color': dashboard.configuration.settings.titleColor}">dashboard.title</mat-label>
             <input matInput class="tb-dashboard-title"
             <input matInput class="tb-dashboard-title"

@@ -209,6 +209,8 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
 
 
   thingsboardVersion: string = env.tbVersion;
   thingsboardVersion: string = env.tbVersion;
 
 
+  translatedDashboardTitle: string;
+
   currentDashboardId: string;
   currentDashboardId: string;
   currentCustomerId: string;
   currentCustomerId: string;
   currentDashboardScope: DashboardPageScope;
   currentDashboardScope: DashboardPageScope;
@@ -375,6 +377,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
     this.reset();
     this.reset();
 
 
     this.dashboard = data.dashboard;
     this.dashboard = data.dashboard;
+    this.translatedDashboardTitle = this.getTranslatedDashboardTitle();
     if (!this.embedded && this.dashboard.id) {
     if (!this.embedded && this.dashboard.id) {
       this.setStateDashboardId = true;
       this.setStateDashboardId = true;
     }
     }
@@ -424,6 +427,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
 
 
   private reset() {
   private reset() {
     this.dashboard = null;
     this.dashboard = null;
+    this.translatedDashboardTitle = null;
     this.dashboardConfiguration = null;
     this.dashboardConfiguration = null;
     this.dashboardLogoCache = undefined;
     this.dashboardLogoCache = undefined;
     this.prevDashboard = null;
     this.prevDashboard = null;
@@ -520,6 +524,10 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
     }
     }
   }
   }
 
 
+  private getTranslatedDashboardTitle(): string {
+    return this.utils.customTranslation(this.dashboard.title, this.dashboard.title);
+  }
+
   public displayExport(): boolean {
   public displayExport(): boolean {
     if (this.dashboard.configuration.settings &&
     if (this.dashboard.configuration.settings &&
       isDefined(this.dashboard.configuration.settings.showDashboardExport)) {
       isDefined(this.dashboard.configuration.settings.showDashboardExport)) {
@@ -817,6 +825,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
   }
   }
 
 
   public saveDashboard() {
   public saveDashboard() {
+    this.translatedDashboardTitle = this.getTranslatedDashboardTitle();
     this.setEditMode(false, false);
     this.setEditMode(false, false);
     this.notifyDashboardUpdated();
     this.notifyDashboardUpdated();
   }
   }