Add enumerable to widget x,y,cols,rows. Fix js_beautify.

ui-ngx/angular.json

@@ -98,6 +98,7 @@
               "react-ace",
               "schema-inspector",
               "@flowjs/flow.js",
+              "js-beautify",
               "mousetrap",
               "prop-types",
               "react-is",

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

@@ -34,6 +34,7 @@ import { AppState } from '@core/core.state';
 import { CustomActionDescriptor } from '@shared/models/widget.models';
 import * as ace from 'ace-builds';
 import { CancelAnimationFrame, RafService } from '@core/services/raf.service';
+import { css_beautify, html_beautify } from 'js-beautify';
 import { ResizeObserver } from '@juggle/resize-observer';
 import { CustomPrettyActionEditorCompleter } from '@home/components/widget/action/custom-action.models';
 
@@ -134,7 +135,7 @@ export class CustomActionPrettyResourcesTabsComponent extends PageComponent impl
   }
 
   public beautifyCss(): void {
-    const res = js_beautify.css_beautify(this.action.customCss, {indent_size: 4});
+    const res = css_beautify(this.action.customCss, {indent_size: 4});
     if (this.action.customCss !== res) {
       this.action.customCss = res;
       this.cssEditor.setValue(this.action.customCss ? this.action.customCss : '', -1);
@@ -143,7 +144,7 @@ export class CustomActionPrettyResourcesTabsComponent extends PageComponent impl
   }
 
   public beautifyHtml(): void {
-    const res = js_beautify.html_beautify(this.action.customHtml, {indent_size: 4, wrap_line_length: 60});
+    const res = html_beautify(this.action.customHtml, {indent_size: 4, wrap_line_length: 60});
     if (this.action.customHtml !== res) {
       this.action.customHtml = res;
       this.htmlEditor.setValue(this.action.customHtml ? this.action.customHtml : '', -1);

ui-ngx/src/app/modules/home/models/dashboard-component.models.ts

@@ -23,6 +23,7 @@ import { Observable, of, Subject } from 'rxjs';
 import { guid, isDefined, isEqual, isUndefined } from '@app/core/utils';
 import { IterableDiffer, KeyValueDiffer } from '@angular/core';
 import { IAliasController, IStateController } from '@app/core/api/widget-api.models';
+import { enumerable } from '@shared/decorators/enumerable';
 
 export interface WidgetsData {
   widgets: Array<Widget>;
@@ -401,6 +402,7 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget {
     this.widgetActions = this.widgetContext.widgetActions ? this.widgetContext.widgetActions : [];
   }
 
+  @enumerable(true)
   get x(): number {
     let res;
     if (this.widgetLayout) {
@@ -421,6 +423,7 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget {
     }
   }
 
+  @enumerable(true)
   get y(): number {
     let res;
     if (this.widgetLayout) {
@@ -441,6 +444,7 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget {
     }
   }
 
+  @enumerable(true)
   get cols(): number {
     let res;
     if (this.widgetLayout) {
@@ -461,6 +465,7 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget {
     }
   }
 
+  @enumerable(true)
   get rows(): number {
     let res;
     if (this.dashboard.isMobileSize && !this.dashboard.mobileAutofillHeight) {
@@ -497,6 +502,7 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget {
     }
   }
 
+  @enumerable(true)
   get widgetOrder(): number {
     let order;
     if (this.widgetLayout && isDefined(this.widgetLayout.mobileOrder) && this.widgetLayout.mobileOrder >= 0) {

ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts

@@ -33,6 +33,7 @@ import { Hotkey } from 'angular2-hotkeys';
 import { TranslateService } from '@ngx-translate/core';
 import { getCurrentIsLoading } from '@app/core/interceptors/load.selectors';
 import * as ace from 'ace-builds';
+import { css_beautify, html_beautify } from 'js-beautify';
 import { CancelAnimationFrame, RafService } from '@core/services/raf.service';
 import { WINDOW } from '@core/services/window.service';
 import { WindowMessage } from '@shared/models/window-message.model';
@@ -576,7 +577,7 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe
   }
 
   beautifyCss(): void {
-    const res = js_beautify.css_beautify(this.widget.templateCss, {indent_size: 4});
+    const res = css_beautify(this.widget.templateCss, {indent_size: 4});
     if (this.widget.templateCss !== res) {
       this.isDirty = true;
       this.widget.templateCss = res;
@@ -585,7 +586,7 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe
   }
 
   beautifyHtml(): void {
-    const res = js_beautify.html_beautify(this.widget.templateHtml, {indent_size: 4, wrap_line_length: 60});
+    const res = html_beautify(this.widget.templateHtml, {indent_size: 4, wrap_line_length: 60});
     if (this.widget.templateHtml !== res) {
       this.isDirty = true;
       this.widget.templateHtml = res;

ui-ngx/src/app/shared/components/json-form/react/json-form-css.tsx

@@ -16,6 +16,7 @@
 import * as React from 'react';
 import ThingsboardAceEditor from './json-form-ace-editor';
 import { JsonFormFieldProps, JsonFormFieldState } from '@shared/components/json-form/react/json-form.models';
+import { css_beautify } from 'js-beautify';
 
 class ThingsboardCss extends React.Component<JsonFormFieldProps, JsonFormFieldState> {
 
@@ -25,7 +26,7 @@ class ThingsboardCss extends React.Component<JsonFormFieldProps, JsonFormFieldSt
     }
 
     onTidyCss(css: string): string {
-        return js_beautify.css_beautify(css, {indent_size: 4});
+        return css_beautify(css, {indent_size: 4});
     }
 
     render() {

ui-ngx/src/app/shared/components/json-form/react/json-form-html.tsx

@@ -15,6 +15,7 @@
  */
 import * as React from 'react';
 import ThingsboardAceEditor from './json-form-ace-editor';
+import { html_beautify } from 'js-beautify';
 import { JsonFormFieldProps, JsonFormFieldState } from '@shared/components/json-form/react/json-form.models';
 
 class ThingsboardHtml extends React.Component<JsonFormFieldProps, JsonFormFieldState> {
@@ -25,7 +26,7 @@ class ThingsboardHtml extends React.Component<JsonFormFieldProps, JsonFormFieldS
     }
 
     onTidyHtml(html: string): string {
-        return js_beautify.html_beautify(html, {indent_size: 4});
+        return html_beautify(html, {indent_size: 4});
     }
 
     render() {

ui-ngx/src/app/shared/decorators/enumerable.ts

@@ -0,0 +1,9 @@
+export function enumerable(value: boolean) {
+  return (
+    target: any,
+    propertyKey: string,
+    descriptor: PropertyDescriptor
+  ) => {
+    descriptor.enumerable = value;
+  };
+}