Add dashboard and widget reference to widget settings form. Add default value method.

application/src/main/data/json/system/widget_bundles/cards.json

@@ -163,8 +163,9 @@
         "templateHtml": "<tb-qrcode-widget \n    [ctx]=\"ctx\">\n</tb-qrcode-widget>",
         "templateCss": "#container {\n    overflow: auto;\n}\n\n.tbDatasource-container {\n    margin: 5px;\n    padding: 8px;\n}\n\n.tbDatasource-title {\n    font-size: 1.200rem;\n    font-weight: 500;\n    padding-bottom: 10px;\n}\n\n.tbDatasource-table {\n    width: 100%;\n    box-shadow: 0 0 10px #ccc;\n    border-collapse: collapse;\n    white-space: nowrap;\n    font-size: 1.000rem;\n    color: #757575;\n}\n\n.tbDatasource-table td {\n    position: relative;\n    border-top: 1px solid rgba(0, 0, 0, 0.12);\n    border-bottom: 1px solid rgba(0, 0, 0, 0.12);\n    padding: 0px 18px;\n    box-sizing: border-box;\n}",
         "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n   self.ctx.$scope.qrCodeWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        dataKeysOptional: true,\n        datasourcesOptional: true\n    };\n}\n\nself.onDestroy = function() {\n}\n\n",
-        "settingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"QR Code\",\n        \"properties\": {\n            \"qrCodeTextPattern\": {\n                \"title\": \"QR code text pattern (for ex. '${entityName} | ${keyName} - some text.')\",\n                \"type\": \"string\",\n                \"default\": \"${entityName}\"\n            },\n            \"useQrCodeTextFunction\": {\n                \"title\": \"Use QR code text function\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"qrCodeTextFunction\": {\n                \"title\": \"QR code text function: f(data)\",\n                \"type\": \"string\",\n                \"default\": \"return data[0]['entityName'];\"\n            }\n        },\n        \"required\": []\n    },\n    \"form\": [\n        \"useQrCodeTextFunction\",\n        {\n            \"key\": \"qrCodeTextPattern\",\n            \"condition\": \"model.useQrCodeTextFunction !== true\"\n        },\n        {\n            \"key\": \"qrCodeTextFunction\",\n            \"type\": \"javascript\",\n            \"helpId\": \"widget/lib/qrcode/qrcode_text_fn\",\n            \"condition\": \"model.useQrCodeTextFunction === true\"\n        }\n    ]\n}\n",
+        "settingsSchema": "{}\n",
         "dataKeySettingsSchema": "{}\n",
+        "settingsDirective": "tb-qrcode-widget-settings",
         "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"entityAliasId\":null,\"filterId\":null,\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.7036904308224163,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"qrCodeTextPattern\":\"${entityName}\",\"useQrCodeTextFunction\":false,\"qrCodeTextFunction\":\"return data[0] ? data[0]['entityName'] : '';\"},\"title\":\"QR Code\"}"
       }
     },

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

@@ -33,9 +33,8 @@
       <tb-widget-config
         [aliasController]="aliasController"
         [functionsOnly]="false"
-        [entityAliases]="dashboard.configuration.entityAliases"
+        [dashboard]="dashboard"
-        [filters]="dashboard.configuration.filters"
+        [widget]="widget"
-        [dashboardStates]="dashboard.configuration.states"
         formControlName="widgetConfig">
       </tb-widget-config>
     </fieldset>

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

@@ -20,9 +20,8 @@
     <tb-widget-config
       [aliasController]="aliasController"
       [functionsOnly]="widgetEditMode"
-      [entityAliases]="dashboard.configuration.entityAliases"
+      [dashboard]="dashboard"
-      [filters]="dashboard.configuration.filters"
+      [widget]="widget"
-      [dashboardStates]="dashboard.configuration.states"
       formControlName="widgetConfig">
     </tb-widget-config>
   </fieldset>

ui-ngx/src/app/modules/home/components/widget/data-key-config-dialog.component.html

@@ -33,6 +33,8 @@
       [dataKeySettingsSchema]="data.dataKeySettingsSchema"
       [dataKeySettingsDirective]="data.dataKeySettingsDirective"
       [entityAliasId]="data.entityAliasId"
+      [dashboard]="data.dashboard"
+      [widget]="data.widget"
       [showPostProcessing]="data.showPostProcessing"
       [callbacks]="data.callbacks"
       formControlName="dataKey">

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

@@ -22,14 +22,17 @@ import { AppState } from '@core/core.state';
 import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { DialogComponent } from '@shared/components/dialog.component';
-import { DataKey } from '@shared/models/widget.models';
+import { DataKey, Widget } from '@shared/models/widget.models';
 import { DataKeysCallbacks } from './data-keys.component.models';
 import { DataKeyConfigComponent } from '@home/components/widget/data-key-config.component';
+import { Dashboard } from '@shared/models/dashboard.models';
 
 export interface DataKeyConfigDialogData {
   dataKey: DataKey;
   dataKeySettingsSchema: any;
   dataKeySettingsDirective: string;
+  dashboard: Dashboard;
+  widget: Widget;
   entityAliasId?: string;
   showPostProcessing?: boolean;
   callbacks?: DataKeysCallbacks;

ui-ngx/src/app/modules/home/components/widget/data-key-config.component.html

@@ -100,6 +100,8 @@
     <div class="mat-padding" fxLayout="column">
       <tb-widget-settings
         [settingsDirective]="dataKeySettingsDirective"
+        [dashboard]="dashboard"
+        [widget]="widget"
         formControlName="settings">
       </tb-widget-settings>
     </div>

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

@@ -18,7 +18,7 @@ import { Component, ElementRef, forwardRef, Input, OnInit, ViewChild } from '@an
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { DataKey } from '@shared/models/widget.models';
+import { DataKey, Widget } from '@shared/models/widget.models';
 import {
   ControlValueAccessor,
   FormBuilder,
@@ -41,6 +41,7 @@ import { alarmFields } from '@shared/models/alarm.models';
 import { JsFuncComponent } from '@shared/components/js-func.component';
 import { JsonFormComponentData } from '@shared/components/json-form/json-form-component.models';
 import { WidgetService } from '@core/http/widget.service';
+import { Dashboard } from '@shared/models/dashboard.models';
 
 @Component({
   selector: 'tb-data-key-config',
@@ -69,6 +70,12 @@ export class DataKeyConfigComponent extends PageComponent implements OnInit, Con
   @Input()
   callbacks: DataKeysCallbacks;
 
+  @Input()
+  dashboard: Dashboard;
+
+  @Input()
+  widget: Widget;
+
   @Input()
   dataKeySettingsSchema: any;
 

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

@@ -46,7 +46,7 @@ import { MatAutocomplete } from '@angular/material/autocomplete';
 import { MatChipInputEvent, MatChipList } from '@angular/material/chips';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
-import { DataKey, DatasourceType, widgetType } from '@shared/models/widget.models';
+import { DataKey, DatasourceType, Widget, widgetType } from '@shared/models/widget.models';
 import { IAliasController } from '@core/api/widget-api.models';
 import { DataKeysCallbacks } from './data-keys.component.models';
 import { alarmFields } from '@shared/models/alarm.models';
@@ -61,6 +61,7 @@ import {
 } from '@home/components/widget/data-key-config-dialog.component';
 import { deepClone } from '@core/utils';
 import { MatChipDropEvent } from '@app/shared/components/mat-chip-draggable.directive';
+import { Dashboard } from '@shared/models/dashboard.models';
 
 @Component({
   selector: 'tb-data-keys',
@@ -116,6 +117,12 @@ export class DataKeysComponent implements ControlValueAccessor, OnInit, AfterVie
   @Input()
   dataKeySettingsDirective: string;
 
+  @Input()
+  dashboard: Dashboard;
+
+  @Input()
+  widget: Widget;
+
   @Input()
   callbacks: DataKeysCallbacks;
 
@@ -399,6 +406,8 @@ export class DataKeysComponent implements ControlValueAccessor, OnInit, AfterVie
           dataKey: deepClone(key),
           dataKeySettingsSchema: this.datakeySettingsSchema,
           dataKeySettingsDirective: this.dataKeySettingsDirective,
+          dashboard: this.dashboard,
+          widget: this.widget,
           entityAliasId: this.entityAliasId,
           showPostProcessing: this.widgetType !== widgetType.alarm,
           callbacks: this.callbacks

ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.html

@@ -28,7 +28,8 @@
   </mat-form-field>
   <section fxLayout="column" [fxShow]="qrCodeWidgetSettingsForm.get('useQrCodeTextFunction').value === true">
     <label translate class="tb-title no-padding">widgets.qr-code.qr-code-text-function</label>
-    <tb-js-func formControlName="qrCodeTextFunction"
+    <tb-js-func #qrCodeTextFunctionComponent
+                formControlName="qrCodeTextFunction"
                 [functionArgs]="['data']"
                 helpId="widget/lib/qrcode/qrcode_text_fn">
     </tb-js-func>

ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.ts

@@ -14,12 +14,12 @@
 /// limitations under the License.
 ///
 
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-
+import { JsFuncComponent } from '@shared/components/js-func.component';
 
 @Component({
   selector: 'tb-qrcode-widget-settings',
@@ -28,6 +28,8 @@ import { AppState } from '@core/core.state';
 })
 export class QrCodeWidgetSettingsComponent extends WidgetSettingsComponent {
 
+  @ViewChild('qrCodeTextFunctionComponent', {static: true}) qrCodeTextFunctionComponent: JsFuncComponent;
+
   qrCodeWidgetSettingsForm: FormGroup;
 
   constructor(protected store: Store<AppState>,
@@ -39,11 +41,19 @@ export class QrCodeWidgetSettingsComponent extends WidgetSettingsComponent {
     return this.qrCodeWidgetSettingsForm;
   }
 
+  protected defaultSettings(): WidgetSettings {
+    return {
+      qrCodeTextPattern: '${entityName}',
+      useQrCodeTextFunction: false,
+      qrCodeTextFunction: 'return data[0][\'entityName\'];'
+    };
+  }
+
   protected onSettingsSet(settings: WidgetSettings) {
     this.qrCodeWidgetSettingsForm = this.fb.group({
-      qrCodeTextPattern: [settings ? settings.qrCodeTextPattern : '${entityName}', []],
+      qrCodeTextPattern: [settings.qrCodeTextPattern, []],
-      useQrCodeTextFunction: [settings ? settings.useQrCodeTextFunction : false, []],
+      useQrCodeTextFunction: [settings.useQrCodeTextFunction, []],
-      qrCodeTextFunction: [settings ? settings.qrCodeTextFunction : 'return data[0][\'entityName\'];', []]
+      qrCodeTextFunction: [settings.qrCodeTextFunction, []]
     });
   }
 
@@ -55,7 +65,9 @@ export class QrCodeWidgetSettingsComponent extends WidgetSettingsComponent {
     const useQrCodeTextFunction: boolean = this.qrCodeWidgetSettingsForm.get('useQrCodeTextFunction').value;
     if (useQrCodeTextFunction) {
       this.qrCodeWidgetSettingsForm.get('qrCodeTextPattern').setValidators([]);
-      this.qrCodeWidgetSettingsForm.get('qrCodeTextFunction').setValidators([Validators.required]);
+      this.qrCodeWidgetSettingsForm.get('qrCodeTextFunction').setValidators([Validators.required,
+        (control: AbstractControl) => this.qrCodeTextFunctionComponent.validate(control as FormControl)
+      ]);
     } else {
       this.qrCodeWidgetSettingsForm.get('qrCodeTextPattern').setValidators([Validators.required]);
       this.qrCodeWidgetSettingsForm.get('qrCodeTextFunction').setValidators([]);

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

@@ -191,6 +191,8 @@
                                       [aliasController]="aliasController"
                                       [datakeySettingsSchema]="modelValue?.dataKeySettingsSchema"
                                       [dataKeySettingsDirective]="modelValue?.dataKeySettingsDirective"
+                                      [dashboard]="dashboard"
+                                      [widget]="widget"
                                       [callbacks]="widgetConfigCallbacks"
                                       [entityAliasId]="datasourceControl.get('entityAliasId').value"
                                       [formControl]="datasourceControl.get('dataKeys')">
@@ -285,6 +287,8 @@
                             [aliasController]="aliasController"
                             [datakeySettingsSchema]="modelValue?.dataKeySettingsSchema"
                             [dataKeySettingsDirective]="modelValue?.dataKeySettingsDirective"
+                            [dashboard]="dashboard"
+                            [widget]="widget"
                             [callbacks]="widgetConfigCallbacks"
                             [entityAliasId]="alarmSourceSettings.get('entityAliasId').value"
                             formControlName="dataKeys">
@@ -480,6 +484,8 @@
          fxLayout="column">
         <tb-widget-settings
           [settingsDirective]="modelValue.settingsDirective"
+          [dashboard]="dashboard"
+          [widget]="widget"
           formControlName="settings">
         </tb-widget-settings>
     </div>

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

@@ -25,7 +25,7 @@ import {
   datasourceTypeTranslationMap,
   defaultLegendConfig,
   GroupInfo,
-  JsonSchema,
+  JsonSchema, Widget,
   widgetType
 } from '@shared/models/widget.models';
 import {
@@ -65,7 +65,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { EntityService } from '@core/http/entity.service';
 import { JsonFormComponentData } from '@shared/components/json-form/json-form-component.models';
 import { WidgetActionsData } from './action/manage-widget-actions.component.models';
-import { DashboardState } from '@shared/models/dashboard.models';
+import { Dashboard, DashboardState } from '@shared/models/dashboard.models';
 import { entityFields } from '@shared/models/entity.models';
 import { Filter, Filters } from '@shared/models/query/query.models';
 import { FilterDialogComponent, FilterDialogData } from '@home/components/filter/filter-dialog.component';
@@ -126,17 +126,14 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont
   aliasController: IAliasController;
 
   @Input()
-  entityAliases: EntityAliases;
+  dashboard: Dashboard;
 
   @Input()
-  filters: Filters;
+  widget: Widget;
 
   @Input()
   functionsOnly: boolean;
 
-  @Input()
-  dashboardStates: {[id: string]: DashboardState };
-
   @Input() disabled: boolean;
 
   widgetType: widgetType;
@@ -831,14 +828,14 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont
       data: {
         isAdd: true,
         allowedEntityTypes,
-        entityAliases: this.entityAliases,
+        entityAliases: this.dashboard.configuration.entityAliases,
         alias: singleEntityAlias
       }
     }).afterClosed().pipe(
       tap((entityAlias) => {
         if (entityAlias) {
-          this.entityAliases[entityAlias.id] = entityAlias;
+          this.dashboard.configuration.entityAliases[entityAlias.id] = entityAlias;
-          this.aliasController.updateEntityAliases(this.entityAliases);
+          this.aliasController.updateEntityAliases(this.dashboard.configuration.entityAliases);
         }
       })
     );
@@ -852,14 +849,14 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont
       panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
       data: {
         isAdd: true,
-        filters: this.filters,
+        filters: this.dashboard.configuration.filters,
         filter: singleFilter
       }
     }).afterClosed().pipe(
       tap((result) => {
         if (result) {
-          this.filters[result.id] = result;
+          this.dashboard.configuration.filters[result.id] = result;
-          this.aliasController.updateFilters(this.filters);
+          this.aliasController.updateFilters(this.dashboard.configuration.filters);
         }
       })
     );
@@ -881,7 +878,7 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont
   }
 
   private fetchDashboardStates(query: string): Array<string> {
-    const stateIds = Object.keys(this.dashboardStates);
+    const stateIds = Object.keys(this.dashboard.configuration.states);
     const result = query ? stateIds.filter(this.createFilterForDashboardState(query)) : stateIds;
     if (result && result.length) {
       return result;

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

@@ -40,8 +40,9 @@ import { deepClone } from '@core/utils';
 import { RuleChainType } from '@shared/models/rule-chain.models';
 import { JsonFormComponent } from '@shared/components/json-form/json-form.component';
 import { JsonFormComponentData } from '@shared/components/json-form/json-form-component.models';
-import { IWidgetSettingsComponent, WidgetSettings } from '@shared/models/widget.models';
+import { IWidgetSettingsComponent, Widget, WidgetSettings } from '@shared/models/widget.models';
 import { widgetSettingsComponentsMap } from '@home/components/widget/lib/settings/widget-settings.module';
+import { Dashboard } from '@shared/models/dashboard.models';
 
 @Component({
   selector: 'tb-widget-settings',
@@ -62,6 +63,12 @@ export class WidgetSettingsComponent implements ControlValueAccessor, OnInit, On
   @Input()
   disabled: boolean;
 
+  @Input()
+  dashboard: Dashboard;
+
+  @Input()
+  widget: Widget;
+
   settingsDirectiveValue: string;
 
   @Input()
@@ -134,6 +141,8 @@ export class WidgetSettingsComponent implements ControlValueAccessor, OnInit, On
       this.changeSubscription = null;
     }
     if (this.definedSettingsComponent) {
+      this.definedSettingsComponent.dashboard = this.dashboard;
+      this.definedSettingsComponent.widget = this.widget;
       this.definedSettingsComponent.settings = this.widgetSettingsFormData.model;
       this.changeSubscription = this.definedSettingsComponent.settingsChanged.subscribe((settings) => {
         this.updateModel(settings);
@@ -185,7 +194,8 @@ export class WidgetSettingsComponent implements ControlValueAccessor, OnInit, On
         const factory = this.cfr.resolveComponentFactory(componentType);
         this.definedSettingsComponentRef = this.definedSettingsContainer.createComponent(factory);
         this.definedSettingsComponent = this.definedSettingsComponentRef.instance;
-        this.definedSettingsComponent.settings = this.widgetSettingsFormData?.model;
+        this.definedSettingsComponent.dashboard = this.dashboard;
+        this.definedSettingsComponent.widget = this.widget;
         this.changeSubscription = this.definedSettingsComponent.settingsChanged.subscribe((settings) => {
           this.updateModel(settings);
         });

ui-ngx/src/app/shared/models/widget.models.ts

@@ -33,6 +33,7 @@ import { AbstractControl, FormGroup } from '@angular/forms';
 import {RuleChainType} from "@shared/models/rule-chain.models";
 import {Observable} from "rxjs";
 import {RuleNodeConfiguration} from "@shared/models/rule-node.models";
+import { Dashboard } from '@shared/models/dashboard.models';
 
 export enum widgetType {
   timeseries = 'timeseries',
@@ -587,6 +588,8 @@ export interface WidgetSize {
 }
 
 export interface IWidgetSettingsComponent {
+  dashboard: Dashboard;
+  widget: Widget;
   settings: WidgetSettings;
   settingsChanged: Observable<WidgetSettings>;
   validate();
@@ -598,17 +601,21 @@ export interface IWidgetSettingsComponent {
 export abstract class WidgetSettingsComponent extends PageComponent implements
   IWidgetSettingsComponent, OnInit, AfterViewInit {
 
+  dashboard: Dashboard;
+
+  widget: Widget;
+
   settingsValue: WidgetSettings;
 
   private settingsSet = false;
 
   set settings(value: WidgetSettings) {
-    this.settingsValue = value;
+    this.settingsValue = value || this.defaultSettings();
     if (!this.settingsSet) {
       this.settingsSet = true;
-      this.setupSettings(value);
+      this.setupSettings(this.settingsValue);
     } else {
-      this.updateSettings(value);
+      this.updateSettings(this.settingsValue);
     }
   }
 
@@ -694,4 +701,8 @@ export abstract class WidgetSettingsComponent extends PageComponent implements
 
   protected abstract onSettingsSet(settings: WidgetSettings);
 
+  protected defaultSettings(): WidgetSettings {
+    return {};
+  }
+
 }