UI: Improve widget resizable options.

ui-ngx/src/app/core/services/dashboard-utils.service.ts

@@ -349,6 +349,7 @@ export class DashboardUtilsService {
     const config = widget.config;
     config.showTitle = false;
     config.dropShadow = false;
+    config.resizable = !isScada;
     config.preserveAspectRatio = isScada;
     config.padding = '0';
     config.margin = '0';

ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.ts

@@ -130,7 +130,14 @@ export class AddWidgetDialogComponent extends DialogComponent<AddWidgetDialogCom
     this.widgetConfig = {
       widgetName: widgetInfo.widgetName,
       config: this.widget.config,
-      layout: {},
+      layout: {
+        resizable: this.widget.config.resizable,
+        preserveAspectRatio: this.widget.config.preserveAspectRatio,
+        mobileHide: this.widget.config.mobileHide,
+        desktopHide: this.widget.config.desktopHide,
+        mobileOrder: this.widget.config.mobileOrder,
+        mobileHeight: this.widget.config.mobileHeight
+      },
       widgetType: this.widget.type,
       typeParameters,
       actionSources,

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

@@ -63,7 +63,7 @@ import { UtilsService } from '@core/services/utils.service';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import { TranslateService } from '@ngx-translate/core';
 import { EntityType } from '@shared/models/entity-type.models';
-import { Observable, of, Subject, Subscription } from 'rxjs';
+import { merge, Observable, of, Subject, Subscription } from 'rxjs';
 import {
   IBasicWidgetConfigComponent,
   WidgetConfigCallbacks
@@ -248,10 +248,8 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, OnDe
       noDataDisplayMessage: [null, []]
     });
 
-    this.widgetSettings.get('showTitle').valueChanges.subscribe(() => {
-      this.updateWidgetSettingsEnabledState();
-    });
-    this.widgetSettings.get('showTitleIcon').valueChanges.subscribe(() => {
+    merge(this.widgetSettings.get('showTitle').valueChanges,
+          this.widgetSettings.get('showTitleIcon').valueChanges).subscribe(() => {
       this.updateWidgetSettingsEnabledState();
     });
 
@@ -263,6 +261,11 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, OnDe
       mobileHide: [false],
       desktopHide: [false]
     });
+
+    this.layoutSettings.get('resizable').valueChanges.subscribe(() => {
+      this.updateLayoutEnabledState();
+    });
+
     this.actionsSettings = this.fb.group({
       actions: [null, []]
     });
@@ -589,6 +592,7 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, OnDe
           {emitEvent: false}
         );
       }
+      this.updateLayoutEnabledState();
     }
     this.createChangeSubscriptions();
   }
@@ -622,6 +626,15 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, OnDe
     }
   }
 
+  private updateLayoutEnabledState() {
+    const resizable: boolean = this.layoutSettings.get('resizable').value;
+    if (resizable) {
+      this.layoutSettings.get('preserveAspectRatio').enable({emitEvent: false});
+    } else {
+      this.layoutSettings.get('preserveAspectRatio').disable({emitEvent: false});
+    }
+  }
+
   private updateSchemaForm(settings?: any) {
     const widgetSettingsFormData: JsonFormComponentData = {};
     if (this.modelValue.settingsSchema && this.modelValue.settingsSchema.schema) {