UI: Improve widget settings mode switching.

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

@@ -21,7 +21,7 @@
       <h2>{{'widget.add' | translate}}:</h2>
       <span fxFlex>{{data.widgetInfo.widgetName}}</span>
       <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap.gt-xs="16px" style="min-width: fit-content;">
-        <tb-toggle-select *ngIf="hasBasicMode" appearance="fill-invert" selectMediaBreakpoint="xs"
+        <tb-toggle-select *ngIf="widgetConfig.hasBasicMode" appearance="fill-invert" selectMediaBreakpoint="xs"
                           [(ngModel)]="widgetConfigMode" [ngModelOptions]="{standalone: true}">
           <tb-toggle-option value="basic">{{ 'widget.basic-mode' | translate }}</tb-toggle-option>
           <tb-toggle-option value="advanced">{{ 'widget.advanced-mode' | translate }}</tb-toggle-option>
@@ -36,13 +36,14 @@
     </button>
   </mat-toolbar>
   <div mat-dialog-content>
-    <tb-widget-config class="tb-absolute-fill"
+    <tb-widget-config
+      #widgetConfigComponent
+      class="tb-absolute-fill"
       [aliasController]="aliasController"
       [functionsOnly]="false"
       [dashboard]="dashboard"
       [widget]="widget"
-      [widgetConfigMode]="widgetConfigMode"
-      [hideHeader]="widgetConfigMode === widgetConfigModes.basic"
+      [hideHeader]="hideHeader"
       isAdd
       formControlName="widgetConfig">
     </tb-widget-config>

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

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, Inject, OnInit, SkipSelf, ViewEncapsulation } from '@angular/core';
+import { Component, Inject, OnInit, SkipSelf, ViewChild, ViewEncapsulation } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
@@ -28,6 +28,7 @@ import { IAliasController, IStateController } from '@core/api/widget-api.models'
 import { WidgetConfigComponentData, WidgetInfo } from '@home/models/widget-component.models';
 import { isDefined, isDefinedAndNotNull, isString } from '@core/utils';
 import { TranslateService } from '@ngx-translate/core';
+import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 
 export interface AddWidgetDialogData {
   dashboard: Dashboard;
@@ -47,7 +48,8 @@ export interface AddWidgetDialogData {
 export class AddWidgetDialogComponent extends DialogComponent<AddWidgetDialogComponent, Widget>
   implements OnInit, ErrorStateMatcher {
 
-  widgetConfigModes = WidgetConfigMode;
+  @ViewChild('widgetConfigComponent')
+  widgetConfigComponent: WidgetConfigComponent;
 
   widgetFormGroup: UntypedFormGroup;
 
@@ -60,17 +62,17 @@ export class AddWidgetDialogComponent extends DialogComponent<AddWidgetDialogCom
 
   previewMode = false;
 
-  hasBasicMode = false;
+  hideHeader = false;
+
+  private readonly initialWidgetConfigMode: WidgetConfigMode;
 
   get widgetConfigMode(): WidgetConfigMode {
-    return this.hasBasicMode ? (this.widgetConfig?.config?.configMode || WidgetConfigMode.advanced) : WidgetConfigMode.advanced;
+    return this.widgetConfigComponent?.widgetConfigMode || this.initialWidgetConfigMode;
   }
 
   set widgetConfigMode(widgetConfigMode: WidgetConfigMode) {
-    if (this.hasBasicMode) {
-      this.widgetConfig.config.configMode = widgetConfigMode;
-      this.widgetFormGroup.markAsDirty();
-    }
+    this.widgetConfigComponent.setWidgetConfigMode(widgetConfigMode);
+    this.hideHeader = this.widgetConfigComponent?.widgetConfigMode === WidgetConfigMode.basic;
   }
 
   submitted = false;
@@ -130,9 +132,16 @@ export class AddWidgetDialogComponent extends DialogComponent<AddWidgetDialogCom
       settingsDirective: widgetInfo.settingsDirective,
       dataKeySettingsDirective: widgetInfo.dataKeySettingsDirective,
       latestDataKeySettingsDirective: widgetInfo.latestDataKeySettingsDirective,
+      hasBasicMode: isDefinedAndNotNull(widgetInfo.hasBasicMode) ? widgetInfo.hasBasicMode : false,
       basicModeDirective: widgetInfo.basicModeDirective
     };
-    this.hasBasicMode = isDefinedAndNotNull(widgetInfo.hasBasicMode) ? widgetInfo.hasBasicMode : false;
+    if (this.widgetConfig.hasBasicMode && this.widgetConfig.config?.configMode === WidgetConfigMode.basic) {
+      this.hideHeader = true;
+      this.initialWidgetConfigMode = WidgetConfigMode.basic;
+    } else {
+      this.initialWidgetConfigMode = WidgetConfigMode.advanced;
+    }
+
     this.widgetFormGroup = this.fb.group({
         widgetConfig: [this.widgetConfig, []]
       }

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html

@@ -367,7 +367,7 @@
                           [isReadOnly]="true"
                           (closeDetails)="onEditWidgetClosed()">
           <div class="details-buttons" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
-            <tb-toggle-select *ngIf="tbEditWidget.hasBasicMode" appearance="fill-invert" selectMediaBreakpoint="xs" [(ngModel)]="tbEditWidget.widgetConfigMode">
+            <tb-toggle-select *ngIf="tbEditWidget.widgetConfig?.hasBasicMode" appearance="fill-invert" selectMediaBreakpoint="xs" [(ngModel)]="tbEditWidget.widgetConfigMode">
               <tb-toggle-option value="basic">{{ 'widget.basic-mode' | translate }}</tb-toggle-option>
               <tb-toggle-option value="advanced">{{ 'widget.advanced-mode' | translate }}</tb-toggle-option>
             </tb-toggle-select>

ui-ngx/src/app/modules/home/components/dashboard-page/edit-widget.component.html

@@ -18,12 +18,12 @@
 <form [formGroup]="widgetFormGroup">
   <fieldset [disabled]="isLoading$ | async">
     <tb-widget-config
+      #widgetConfigComponent
       [aliasController]="aliasController"
       [functionsOnly]="widgetEditMode"
       [dashboard]="dashboard"
       [widget]="widget"
       [hideToggleHeader]="previewMode"
-      [widgetConfigMode]="widgetConfigMode"
       formControlName="widgetConfig">
       <div class="tb-widget-config-header-prefix">
         <button mat-button

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

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -26,6 +26,7 @@ import { WidgetComponentService } from '@home/components/widget/widget-component
 import { WidgetConfigComponentData } from '../../models/widget-component.models';
 import { isDefined, isDefinedAndNotNull, isString } from '@core/utils';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 
 @Component({
   selector: 'tb-edit-widget',
@@ -34,6 +35,9 @@ import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 })
 export class EditWidgetComponent extends PageComponent implements OnInit, OnChanges {
 
+  @ViewChild('widgetConfigComponent')
+  widgetConfigComponent: WidgetConfigComponent;
+
   @Input()
   dashboard: Dashboard;
 
@@ -64,17 +68,12 @@ export class EditWidgetComponent extends PageComponent implements OnInit, OnChan
 
   previewMode = false;
 
-  hasBasicMode = false;
-
   get widgetConfigMode(): WidgetConfigMode {
-    return this.hasBasicMode ? (this.widgetConfig?.config?.configMode || WidgetConfigMode.advanced) : WidgetConfigMode.advanced;
+    return this.widgetConfigComponent?.widgetConfigMode;
   }
 
   set widgetConfigMode(widgetConfigMode: WidgetConfigMode) {
-    if (this.hasBasicMode) {
-      this.widgetConfig.config.configMode = widgetConfigMode;
-      this.widgetFormGroup.markAsDirty();
-    }
+    this.widgetConfigComponent.setWidgetConfigMode(widgetConfigMode);
   }
 
   private currentWidgetConfigChanged = false;
@@ -169,9 +168,9 @@ export class EditWidgetComponent extends PageComponent implements OnInit, OnChan
       settingsDirective: widgetInfo.settingsDirective,
       dataKeySettingsDirective: widgetInfo.dataKeySettingsDirective,
       latestDataKeySettingsDirective: widgetInfo.latestDataKeySettingsDirective,
+      hasBasicMode: isDefinedAndNotNull(widgetInfo.hasBasicMode) ? widgetInfo.hasBasicMode : false,
       basicModeDirective: widgetInfo.basicModeDirective
     };
-    this.hasBasicMode = isDefinedAndNotNull(widgetInfo.hasBasicMode) ? widgetInfo.hasBasicMode : false;
     this.widgetFormGroup.reset({widgetConfig: this.widgetConfig});
   }
 }

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

@@ -168,6 +168,9 @@ export abstract class BasicWidgetConfigComponent extends PageComponent implement
     if (isDefinedAndNotNull(key.decimals)) {
       dataKey.decimals = key.decimals;
     }
+    if (key.color) {
+      dataKey.color = key.color;
+    }
     if (isDefinedAndNotNull(key.settings)) {
       dataKey.settings = key.settings;
     }

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

@@ -149,7 +149,6 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, OnDe
 
   @Input() disabled: boolean;
 
-  @Input()
   widgetConfigMode = WidgetConfigMode.advanced;
 
   widgetType: widgetType;
@@ -407,9 +406,22 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, OnDe
   writeValue(value: WidgetConfigComponentData): void {
     this.modelValue = value;
     this.widgetType = this.modelValue?.widgetType;
+    this.widgetConfigMode = this.modelValue?.hasBasicMode ?
+      (this.modelValue?.config?.configMode || WidgetConfigMode.advanced) : WidgetConfigMode.advanced;
     this.setupConfig(this.isAdd);
   }
 
+  setWidgetConfigMode(widgetConfigMode: WidgetConfigMode) {
+    if (this.modelValue?.hasBasicMode && this.widgetConfigMode !== widgetConfigMode) {
+      this.widgetConfigMode = widgetConfigMode;
+      this.modelValue.config.configMode = widgetConfigMode;
+      if (this.hasBasicModeDirective) {
+        this.setupConfig();
+      }
+      this.propagateChange(this.modelValue);
+    }
+  }
+
   private setupConfig(isAdd = false) {
     if (this.modelValue) {
       this.destroyBasicModeComponent();

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

@@ -529,6 +529,7 @@ export interface WidgetConfigComponentData {
   settingsDirective: string;
   dataKeySettingsDirective: string;
   latestDataKeySettingsDirective: string;
+  hasBasicMode: boolean;
   basicModeDirective: string;
 }
 

ui-ngx/src/app/shared/components/icon.component.ts

@@ -90,7 +90,7 @@ export class TbIconComponent extends _TbIconBase
     return (this._iconNameContent?.nativeElement.textContent || '').trim();
   }
 
-  private _contentChanges: Subscription = null;
+  private _contentChanges = Subscription.EMPTY;
   private _previousFontSetClass: string[] = [];
 
   _useSvgIcon = false;