UI: Added global scope variables in javascript functions - refactoring

ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-editor.component.html

@@ -44,7 +44,7 @@
             (ngModelChange)="onActionUpdated()"
             [fillHeight]="true"
             [functionArgs]="['$event', 'widgetContext', 'entityId', 'entityName', 'htmlTemplate', 'additionalParams', 'entityLabel']"
-            [globalVariables]="functionScopeVariables"
+            [disableUndefinedCheck]="true"
             [validationArgs]="[]"
             [editorCompleter]="customPrettyActionEditorCompleter">
           </tb-js-func>

ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-editor.component.ts

@@ -36,7 +36,6 @@ import { AppState } from '@core/core.state';
 import { combineLatest } from 'rxjs';
 import { CustomActionDescriptor } from '@shared/models/widget.models';
 import { CustomPrettyActionEditorCompleter } from '@home/components/widget/action/custom-action.models';
-import { WidgetService } from "@core/http/widget.service";
 
 @Component({
   selector: 'tb-custom-action-pretty-editor',
@@ -59,8 +58,6 @@ export class CustomActionPrettyEditorComponent extends PageComponent implements
 
   fullscreen = false;
 
-  functionScopeVariables: string[];
-
   @ViewChildren('leftPanel')
   leftPanelElmRef: QueryList<ElementRef<HTMLElement>>;
 
@@ -71,10 +68,8 @@ export class CustomActionPrettyEditorComponent extends PageComponent implements
 
   private propagateChange = (_: any) => {};
 
-  constructor(protected store: Store<AppState>,
-              private widgetService: WidgetService) {
+  constructor(protected store: Store<AppState>) {
     super(store);
-    this.functionScopeVariables = this.widgetService.getWidgetScopeVariables();
   }
 
   ngOnInit(): void {

ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.html

@@ -94,7 +94,7 @@
       [(ngModel)]="action.customFunction"
       (ngModelChange)="notifyActionUpdated()"
       [functionArgs]="['$event', 'widgetContext', 'entityId', 'entityName', 'htmlTemplate', 'additionalParams', 'entityLabel']"
-      [globalVariables]="functionScopeVariables"
+      [disableUndefinedCheck]="true"
       [validationArgs]="[]"
       [editorCompleter]="customPrettyActionEditorCompleter">
     </tb-js-func>

ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.ts

@@ -41,7 +41,6 @@ import { forkJoin, from } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 import { getAce } from '@shared/models/ace/ace.models';
 import { beautifyCss, beautifyHtml } from '@shared/models/beautify.models';
-import { WidgetService } from "@core/http/widget.service";
 
 @Component({
   selector: 'tb-custom-action-pretty-resources-tabs',
@@ -76,16 +75,12 @@ export class CustomActionPrettyResourcesTabsComponent extends PageComponent impl
   cssEditor: Ace.Editor;
   setValuesPending = false;
 
-  functionScopeVariables: string[];
-
   customPrettyActionEditorCompleter = CustomPrettyActionEditorCompleter;
 
   constructor(protected store: Store<AppState>,
               private translate: TranslateService,
-              private widgetService: WidgetService,
               private raf: RafService) {
     super(store);
-    this.functionScopeVariables = this.widgetService.getWidgetScopeVariables();
   }
 
   ngOnInit(): void {

ui-ngx/src/app/modules/home/components/widget/action/mobile-action-editor.component.ts

@@ -36,7 +36,7 @@ import {
   getDefaultProcessLocationFunction,
   getDefaultProcessQrCodeFunction
 } from '@home/components/widget/action/mobile-action-editor.models';
-import { WidgetService } from "@core/http/widget.service";
+import { WidgetService } from '@core/http/widget.service';
 
 @Component({
   selector: 'tb-mobile-action-editor',

ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts

@@ -47,7 +47,7 @@ import { CustomActionEditorCompleter } from '@home/components/widget/action/cust
 import { isDefinedAndNotNull } from '@core/utils';
 import { MobileActionEditorComponent } from '@home/components/widget/action/mobile-action-editor.component';
 import { widgetType } from '@shared/models/widget.models';
-import { WidgetService } from "@core/http/widget.service";
+import { WidgetService } from '@core/http/widget.service';
 
 export interface WidgetActionDialogData {
   isAdd: boolean;

ui-ngx/src/app/modules/home/components/widget/data-key-config.component.ts

@@ -40,7 +40,7 @@ import { map, mergeMap, publishReplay, refCount, tap } from 'rxjs/operators';
 import { alarmFields } from '@shared/models/alarm.models';
 import { JsFuncComponent } from '@shared/components/js-func.component';
 import { JsonFormComponentData } from '@shared/components/json-form/json-form-component.models';
-import { WidgetService } from "@core/http/widget.service";
+import { WidgetService } from '@core/http/widget.service';
 
 @Component({
   selector: 'tb-data-key-config',

ui-ngx/src/app/shared/components/js-func.component.ts

@@ -85,6 +85,8 @@ export class JsFuncComponent implements OnInit, OnDestroy, ControlValueAccessor,
 
   @Input() globalVariables: Array<string>;
 
+  @Input() disableUndefinedCheck = false;
+
   private noValidateValue: boolean;
   get noValidate(): boolean {
     return this.noValidateValue;
@@ -167,32 +169,34 @@ export class JsFuncComponent implements OnInit, OnDestroy, ControlValueAccessor,
             this.updateView();
           }
         });
-        // @ts-ignore
-        this.jsEditor.session.on('changeAnnotation', () => {
-          const annotations = this.jsEditor.session.getAnnotations();
-          annotations.filter(annotation => annotation.text.includes('is not defined')).forEach(annotation => {
-            annotation.type = 'error';
+        if (!this.disableUndefinedCheck) {
+          // @ts-ignore
+          this.jsEditor.session.on('changeAnnotation', () => {
+            const annotations = this.jsEditor.session.getAnnotations();
+            annotations.filter(annotation => annotation.text.includes('is not defined')).forEach(annotation => {
+              annotation.type = 'error';
+            });
+            this.jsEditor.renderer.setAnnotations(annotations);
+            const hasErrors = annotations.filter(annotation => annotation.type === 'error').length > 0;
+            if (this.hasErrors !== hasErrors) {
+              this.hasErrors = hasErrors;
+              this.propagateChange(this.modelValue);
+            }
           });
-          this.jsEditor.renderer.setAnnotations(annotations);
-          const hasErrors = annotations.filter(annotation => annotation.type === 'error').length > 0;
-          if (this.hasErrors !== hasErrors) {
-            this.hasErrors = hasErrors;
-            this.propagateChange(this.modelValue);
-          }
-        });
+        }
         // @ts-ignore
         if (!!this.jsEditor.session.$worker) {
           const jsWorkerOptions = {
-            undef: true,
+            undef: !this.disableUndefinedCheck,
             unused: true,
             globals: {}
           };
-          if (this.functionArgs) {
+          if (!this.disableUndefinedCheck && this.functionArgs) {
             this.functionArgs.forEach(arg => {
               jsWorkerOptions.globals[arg] = false;
             });
           }
-          if (this.globalVariables) {
+          if (!this.disableUndefinedCheck && this.globalVariables) {
             this.globalVariables.forEach(arg => {
               jsWorkerOptions.globals[arg] = false;
             });