From 07bbf3d7680ed6d2b5af5ce1f0bd8db016ea0922 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Tue, 24 Mar 2020 19:11:01 +0200
Subject: [PATCH] UI: Fix toast target for editor components

---
 ui-ngx/src/app/shared/components/js-func.component.html   | 2 +-
 ui-ngx/src/app/shared/components/js-func.component.ts     | 8 +++++---
 .../src/app/shared/components/json-content.component.html | 2 +-
 .../src/app/shared/components/json-content.component.ts   | 7 +++++--
 .../app/shared/components/json-object-edit.component.html | 2 +-
 .../app/shared/components/json-object-edit.component.ts   | 7 +++++--
 6 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/ui-ngx/src/app/shared/components/js-func.component.html b/ui-ngx/src/app/shared/components/js-func.component.html
index 39ff2846cd..fb38aa212d 100644
--- a/ui-ngx/src/app/shared/components/js-func.component.html
+++ b/ui-ngx/src/app/shared/components/js-func.component.html
@@ -31,7 +31,7 @@
       <mat-icon class="material-icons">{{ fullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
     </button>
   </div>
-  <div id="tb-javascript-panel" class="tb-js-func-panel" fxLayout="column" tb-toast toastTarget="jsFuncEditor">
+  <div id="tb-javascript-panel" class="tb-js-func-panel" fxLayout="column" tb-toast toastTarget="{{toastTargetId}}">
     <div #javascriptEditor id="tb-javascript-input" [ngClass]="{'fill-height': fillHeight}"></div>
   </div>
   <div fxLayout="row" fxLayoutAlign="start center" style="height: 40px;">
diff --git a/ui-ngx/src/app/shared/components/js-func.component.ts b/ui-ngx/src/app/shared/components/js-func.component.ts
index e0e176efd9..544bf5823d 100644
--- a/ui-ngx/src/app/shared/components/js-func.component.ts
+++ b/ui-ngx/src/app/shared/components/js-func.component.ts
@@ -31,7 +31,7 @@ import { ActionNotificationHide, ActionNotificationShow } from '@core/notificati
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { UtilsService } from '@core/services/utils.service';
-import { isUndefined } from '@app/core/utils';
+import { guid, isUndefined } from '@app/core/utils';
 import { TranslateService } from '@ngx-translate/core';
 import { CancelAnimationFrame, RafService } from '@core/services/raf.service';
 
@@ -62,6 +62,8 @@ export class JsFuncComponent implements OnInit, OnDestroy, ControlValueAccessor,
   private editorsResizeCaf: CancelAnimationFrame;
   private editorResizeListener: any;
 
+  toastTargetId = `jsFuncEditor-${guid()}`;
+
   @Input() functionName: string;
 
   @Input() functionArgs: Array<string>;
@@ -209,7 +211,7 @@ export class JsFuncComponent implements OnInit, OnDestroy, ControlValueAccessor,
           {
             message: this.validationError,
             type: 'error',
-            target: 'jsFuncEditor',
+            target: this.toastTargetId,
             verticalPosition: 'bottom',
             horizontalPosition: 'left'
           }));
@@ -301,7 +303,7 @@ export class JsFuncComponent implements OnInit, OnDestroy, ControlValueAccessor,
     if (this.errorShowed) {
       this.store.dispatch(new ActionNotificationHide(
         {
-          target: 'jsFuncEditor'
+          target: this.toastTargetId
         }));
       this.errorShowed = false;
     }
diff --git a/ui-ngx/src/app/shared/components/json-content.component.html b/ui-ngx/src/app/shared/components/json-content.component.html
index d072c674f4..53435c7151 100644
--- a/ui-ngx/src/app/shared/components/json-content.component.html
+++ b/ui-ngx/src/app/shared/components/json-content.component.html
@@ -36,7 +36,7 @@
       <mat-icon class="material-icons">{{ fullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
     </button>
   </div>
-  <div id="tb-json-panel" tb-toast toastTarget="jsonContentEditor"
+  <div id="tb-json-panel" tb-toast toastTarget="{{toastTargetId}}"
        class="tb-json-content-panel" fxLayout="column">
     <div #jsonEditor id="tb-json-input" [ngStyle]="editorStyle" [ngClass]="{'fill-height': fillHeight}"></div>
   </div>
diff --git a/ui-ngx/src/app/shared/components/json-content.component.ts b/ui-ngx/src/app/shared/components/json-content.component.ts
index ed949a6bb0..4dabd93b9b 100644
--- a/ui-ngx/src/app/shared/components/json-content.component.ts
+++ b/ui-ngx/src/app/shared/components/json-content.component.ts
@@ -33,6 +33,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { ContentType, contentTypesMap } from '@shared/models/constants';
 import { CancelAnimationFrame, RafService } from '@core/services/raf.service';
+import { guid } from '@core/utils';
 
 @Component({
   selector: 'tb-json-content',
@@ -60,6 +61,8 @@ export class JsonContentComponent implements OnInit, ControlValueAccessor, Valid
   private editorsResizeCaf: CancelAnimationFrame;
   private editorResizeListener: any;
 
+  toastTargetId = `jsonContentEditor-${guid()}`;
+
   @Input() label: string;
 
   @Input() contentType: ContentType;
@@ -220,7 +223,7 @@ export class JsonContentComponent implements OnInit, ControlValueAccessor, Valid
         {
           message: errorInfo,
           type: 'error',
-          target: 'jsonContentEditor',
+          target: this.toastTargetId,
           verticalPosition: 'bottom',
           horizontalPosition: 'left'
         }));
@@ -233,7 +236,7 @@ export class JsonContentComponent implements OnInit, ControlValueAccessor, Valid
     if (this.errorShowed) {
       this.store.dispatch(new ActionNotificationHide(
         {
-          target: 'jsonContentEditor'
+          target: this.toastTargetId
         }));
       this.errorShowed = false;
     }
diff --git a/ui-ngx/src/app/shared/components/json-object-edit.component.html b/ui-ngx/src/app/shared/components/json-object-edit.component.html
index 755c517aca..b4bfa17293 100644
--- a/ui-ngx/src/app/shared/components/json-object-edit.component.html
+++ b/ui-ngx/src/app/shared/components/json-object-edit.component.html
@@ -38,7 +38,7 @@
       <mat-icon class="material-icons">{{ fullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
     </button>
   </div>
-  <div id="tb-json-panel" tb-toast toastTarget="jsonObjectEditor"
+  <div id="tb-json-panel" tb-toast toastTarget="{{toastTargetId}}"
        class="tb-json-object-panel" fxLayout="column">
     <div #jsonEditor id="tb-json-input" [ngStyle]="editorStyle" [ngClass]="{'fill-height': fillHeight}"></div>
   </div>
diff --git a/ui-ngx/src/app/shared/components/json-object-edit.component.ts b/ui-ngx/src/app/shared/components/json-object-edit.component.ts
index 40d222e0e4..45c59b98df 100644
--- a/ui-ngx/src/app/shared/components/json-object-edit.component.ts
+++ b/ui-ngx/src/app/shared/components/json-object-edit.component.ts
@@ -30,6 +30,7 @@ import { ActionNotificationHide, ActionNotificationShow } from '@core/notificati
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { CancelAnimationFrame, RafService } from '@core/services/raf.service';
+import { guid } from '@core/utils';
 
 @Component({
   selector: 'tb-json-object-edit',
@@ -57,6 +58,8 @@ export class JsonObjectEditComponent implements OnInit, ControlValueAccessor, Va
   private editorsResizeCaf: CancelAnimationFrame;
   private editorResizeListener: any;
 
+  toastTargetId = `jsonObjectEditor-${guid()}`;
+
   @Input() label: string;
 
   @Input() disabled: boolean;
@@ -176,7 +179,7 @@ export class JsonObjectEditComponent implements OnInit, ControlValueAccessor, Va
           {
             message: this.validationError,
             type: 'error',
-            target: 'jsonObjectEditor',
+            target: this.toastTargetId,
             verticalPosition: 'bottom',
             horizontalPosition: 'left'
           }));
@@ -189,7 +192,7 @@ export class JsonObjectEditComponent implements OnInit, ControlValueAccessor, Va
     if (this.errorShowed) {
       this.store.dispatch(new ActionNotificationHide(
         {
-          target: 'jsonObjectEditor'
+          target: this.toastTargetId
         }));
       this.errorShowed = false;
     }