From d52f745909854eb319231a275380d00aaf8b71f9 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Thu, 9 Nov 2023 15:37:49 +0200 Subject: [PATCH 1/2] UI: Convert widget style to camel case --- ui-ngx/src/app/core/utils.ts | 4 ++++ .../home/models/dashboard-component.models.ts | 17 +++++++++++++---- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/ui-ngx/src/app/core/utils.ts b/ui-ngx/src/app/core/utils.ts index ec02a0d117..b810689b69 100644 --- a/ui-ngx/src/app/core/utils.ts +++ b/ui-ngx/src/app/core/utils.ts @@ -817,3 +817,7 @@ export const getOS = (): string => { export const camelCase = (str: string): string => { return _.camelCase(str); }; + +export const convertKeysToCamelCase = (obj: Record): Record => { + return _.mapKeys(obj, (value, key) => _.camelCase(key)); +}; 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 f49a5454f1..cb9bd0b6f0 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 @@ -27,7 +27,15 @@ import { WidgetLayout, WidgetLayouts } from '@app/shared/models/dashboard.models import { IDashboardWidget, WidgetAction, WidgetContext, WidgetHeaderAction } from './widget-component.models'; import { Timewindow } from '@shared/models/time/time.models'; import { Observable, of, Subject } from 'rxjs'; -import { formattedDataFormDatasourceData, guid, isDefined, isEqual, isUndefined } from '@app/core/utils'; +import { + convertKeysToCamelCase, + formattedDataFormDatasourceData, + guid, + isDefined, + isEmpty, + 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'; @@ -479,9 +487,10 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget { backgroundColor: this.backgroundColor, padding: this.padding, margin: this.margin, - borderRadius: this.borderRadius || 'unset' }; - if (this.widget.config.widgetStyle) { - this.style = {...this.style, ...this.widget.config.widgetStyle}; + borderRadius: this.borderRadius }; + if (this.widget.config.widgetStyle && !isEmpty(this.widget.config.widgetStyle)) { + const convertedStyle = convertKeysToCamelCase(this.widget.config.widgetStyle); + this.style = {...this.style, ...convertedStyle}; } this.showWidgetTitlePanel = this.widgetContext.hideTitlePanel ? false : From 694f9a0dd48a6b5628842eb1dc9f047e838b7cbb Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Thu, 9 Nov 2023 15:50:41 +0200 Subject: [PATCH 2/2] UI: Refactoring --- .../app/modules/home/models/dashboard-component.models.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) 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 cb9bd0b6f0..b218504ad1 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 @@ -488,9 +488,8 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget { padding: this.padding, margin: this.margin, borderRadius: this.borderRadius }; - if (this.widget.config.widgetStyle && !isEmpty(this.widget.config.widgetStyle)) { - const convertedStyle = convertKeysToCamelCase(this.widget.config.widgetStyle); - this.style = {...this.style, ...convertedStyle}; + if (!isEmpty(this.widget.config.widgetStyle)) { + this.style = {...this.style, ...convertKeysToCamelCase(this.widget.config.widgetStyle)}; } this.showWidgetTitlePanel = this.widgetContext.hideTitlePanel ? false :