From fa380bc3002ec526a2ba727ade2d3400427b72ed Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Fri, 14 Aug 2020 14:28:19 +0300 Subject: [PATCH] Add enumerable to widget x,y,cols,rows. Fix js_beautify. --- ui-ngx/angular.json | 1 + .../custom-action-pretty-resources-tabs.component.ts | 5 +++-- .../modules/home/models/dashboard-component.models.ts | 6 ++++++ .../modules/home/pages/widget/widget-editor.component.ts | 5 +++-- .../shared/components/json-form/react/json-form-css.tsx | 3 ++- .../shared/components/json-form/react/json-form-html.tsx | 3 ++- ui-ngx/src/app/shared/decorators/enumerable.ts | 9 +++++++++ 7 files changed, 26 insertions(+), 6 deletions(-) create mode 100644 ui-ngx/src/app/shared/decorators/enumerable.ts diff --git a/ui-ngx/angular.json b/ui-ngx/angular.json index 776f862144..59a58c4b96 100644 --- a/ui-ngx/angular.json +++ b/ui-ngx/angular.json @@ -98,6 +98,7 @@ "react-ace", "schema-inspector", "@flowjs/flow.js", + "js-beautify", "mousetrap", "prop-types", "react-is", diff --git a/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.ts b/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.ts index ad7e39f1b3..54eab79b60 100644 --- a/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.ts +++ b/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); diff --git a/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts b/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts index b79c16527e..3709b08b28 100644 --- a/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts +++ b/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; @@ -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) { diff --git a/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts b/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts index 4d97c909ac..905efe2adb 100644 --- a/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts +++ b/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; diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-css.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-css.tsx index 632e0d26f3..a5107ad4db 100644 --- a/ui-ngx/src/app/shared/components/json-form/react/json-form-css.tsx +++ b/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 { @@ -25,7 +26,7 @@ class ThingsboardCss extends React.Component { @@ -25,7 +26,7 @@ class ThingsboardHtml extends React.Component { + descriptor.enumerable = value; + }; +}