UI: Fix toast target for editor components

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;">

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;
     }

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>

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;
     }

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>

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;
     }