Updated dynamic value logic

ui-ngx/src/app/modules/home/components/home-components.module.ts

@@ -147,6 +147,7 @@ import {
   HOME_COMPONENTS_MODULE_TOKEN
 } from '@home/components/tokens';
 import { DashboardStateComponent } from '@home/components/dashboard-page/dashboard-state.component';
+import { AlarmDynamicValue } from '@home/components/profile/alarm/alarm-dynamic-value.component';
 
 @NgModule({
   declarations:
@@ -245,6 +246,7 @@ import { DashboardStateComponent } from '@home/components/dashboard-page/dashboa
       AlarmScheduleInfoComponent,
       DeviceProfileProvisionConfigurationComponent,
       AlarmScheduleComponent,
+      AlarmDynamicValue,
       AlarmDurationPredicateValueComponent,
       DeviceWizardDialogComponent,
       AlarmScheduleDialogComponent,
@@ -356,11 +358,11 @@ import { DashboardStateComponent } from '@home/components/dashboard-page/dashboa
     DeviceWizardDialogComponent,
     AlarmScheduleInfoComponent,
     AlarmScheduleComponent,
+    AlarmDynamicValue,
     AlarmScheduleDialogComponent,
     AlarmDurationPredicateValueComponent,
     EditAlarmDetailsDialogComponent,
     DeviceProfileProvisionConfigurationComponent,
-    AlarmScheduleComponent,
     SmsProviderConfigurationComponent,
     AwsSnsProviderConfigurationComponent,
     TwilioSmsProviderConfigurationComponent,

ui-ngx/src/app/modules/home/components/profile/alarm/alarm-dynamic-value.component.html

@@ -0,0 +1,37 @@
+<mat-expansion-panel [formGroup] = "dynamicValue" class="device-profile-alarm" style = "margin-bottom: 26px;" fxFlex>
+  <mat-expansion-panel-header>
+    <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+      <mat-panel-title>
+        <div fxLayout="row" fxFlex fxLayoutAlign="start center">
+          {{'filter.dynamic-value' | translate}}
+        </div>
+      </mat-panel-title>
+      <span fxFlex></span>
+    </div>
+  </mat-expansion-panel-header>
+  <ng-template matExpansionPanelContent>
+    <div fxFlex fxLayout="column">
+      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div fxFlex="40" fxLayout="column">
+          <mat-form-field floatLabel="always" hideRequiredMarker class="mat-block">
+            <mat-label></mat-label>
+            <mat-select formControlName="sourceType" placeholder="{{'filter.dynamic-source-type' | translate}}">
+              <mat-option [value]="null">
+                {{'filter.no-dynamic-value' | translate}}
+              </mat-option>
+              <mat-option *ngFor="let sourceType of dynamicValueSourceTypes" [value]="sourceType">
+                {{dynamicValueSourceTypeTranslations.get(sourceType) | translate}}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+        </div>
+        <div fxFlex fxLayout="column">
+          <mat-form-field floatLabel="always" hideRequiredMarker class="mat-block source-attribute">
+            <mat-label></mat-label>
+            <input matInput formControlName="sourceAttribute" placeholder="{{'filter.source-attribute' | translate}}">
+          </mat-form-field>
+        </div>
+      </div>
+    </div>
+  </ng-template>
+</mat-expansion-panel>

ui-ngx/src/app/modules/home/components/profile/alarm/alarm-dynamic-value.component.ts

@@ -0,0 +1,68 @@
+import { Component, forwardRef, OnInit } from '@angular/core';
+import {
+  ControlValueAccessor,
+  FormBuilder,
+  FormGroup,
+  NG_VALUE_ACCESSOR,
+} from '@angular/forms';
+import {
+  DynamicValueSourceType,
+  dynamicValueSourceTypeTranslationMap,
+  getDynamicSourcesForAllowUser
+} from '@shared/models/query/query.models';
+
+@Component({
+  selector: 'tb-alarm-dynamic-value',
+  templateUrl: './alarm-dynamic-value.component.html',
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => AlarmDynamicValue),
+    multi: true
+  }]
+})
+
+export class AlarmDynamicValue implements ControlValueAccessor, OnInit{
+  public dynamicValue: FormGroup;
+  public dynamicValueSourceTypes: DynamicValueSourceType[] = getDynamicSourcesForAllowUser(false);
+  public dynamicValueSourceTypeTranslations = dynamicValueSourceTypeTranslationMap;
+  private propagateChange = (v: any) => { };
+
+  constructor(private fb: FormBuilder) {
+  }
+
+  ngOnInit(): void {
+    this.dynamicValue = this.fb.group({
+      sourceType: [null],
+      sourceAttribute: [null]
+    })
+
+    this.dynamicValue.get('sourceType').valueChanges.subscribe(
+      (sourceType) => {
+        if (!sourceType) {
+          this.dynamicValue.get('sourceAttribute').patchValue(null, {emitEvent: false});
+        }
+      }
+    );
+
+    this.dynamicValue.valueChanges.subscribe(() => {
+      this.updateModel();
+    })
+  }
+
+  registerOnChange(fn: any): void {
+    this.propagateChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+  }
+
+  writeValue(dynamicValue: {sourceType: string, sourceAttribute: string}): void {
+    if(dynamicValue) {
+      this.dynamicValue.patchValue(dynamicValue, {emitEvent: false});
+    }
+  }
+
+  private updateModel() {
+    this.propagateChange(this.dynamicValue.value);
+  }
+}

ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.html

@@ -34,6 +34,7 @@
       formControlName="timezone">
     </tb-timezone-select>
     <section *ngIf="alarmScheduleForm.get('type').value === alarmScheduleType.SPECIFIC_TIME">
+      <tb-alarm-dynamic-value formControlName = 'dynamicValue'></tb-alarm-dynamic-value>
       <div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-days</div>
       <div fxLayout="column" fxLayout.gt-md="row" fxLayoutGap="16px">
         <div fxLayout="row" fxLayoutGap="16px">
@@ -73,44 +74,8 @@
       </div>
     </section>
     <section *ngIf="alarmScheduleForm.get('type').value === alarmScheduleType.CUSTOM">
-      <mat-expansion-panel class="device-profile-alarm" fxFlex>
+      <tb-alarm-dynamic-value formControlName = 'dynamicValue'></tb-alarm-dynamic-value>
-        <mat-expansion-panel-header>
+      <div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-days</div>
-          <div fxFlex fxLayout="row" fxLayoutAlign="start center">
-            <mat-panel-title>
-              <div fxLayout="row" fxFlex fxLayoutAlign="start center">
-                {{'filter.dynamic-value' | translate}}
-              </div>
-            </mat-panel-title>
-            <span fxFlex></span>
-          </div>
-        </mat-expansion-panel-header>
-        <ng-template matExpansionPanelContent>
-          <div fxFlex [formGroup] = "alarmScheduleForm.get('dynamicValue')" fxLayout="column">
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-              <div fxFlex="40" fxLayout="column">
-                <mat-form-field floatLabel="always" hideRequiredMarker class="mat-block">
-                  <mat-label></mat-label>
-                  <mat-select formControlName="sourceType" placeholder="{{'filter.dynamic-source-type' | translate}}">
-                    <mat-option [value]="null">
-                      {{'filter.no-dynamic-value' | translate}}
-                    </mat-option>
-                    <mat-option *ngFor="let sourceType of dynamicValueSourceTypes" [value]="sourceType">
-                      {{dynamicValueSourceTypeTranslations.get(sourceType) | translate}}
-                    </mat-option>
-                  </mat-select>
-                </mat-form-field>
-              </div>
-              <div fxFlex fxLayout="column">
-                <mat-form-field floatLabel="always" hideRequiredMarker class="mat-block source-attribute">
-                  <mat-label></mat-label>
-                  <input matInput formControlName="sourceAttribute" placeholder="{{'filter.source-attribute' | translate}}">
-                </mat-form-field>
-              </div>
-            </div>
-          </div>
-        </ng-template>
-      </mat-expansion-panel>
-      <div class="tb-small" style="margin-bottom: 0.5em; margin-top: 26px;" translate>device-profile.schedule-days</div>
       <div *ngFor="let day of allDays" fxLayout="column" formArrayName="items" fxLayoutGap="1em">
         <div fxLayout.xs="column" fxLayout="row" fxLayoutGap="8px" [formGroupName]="''+day" fxLayoutAlign="start center" fxLayoutAlign.xs="center start">
           <mat-checkbox formControlName="enabled" fxFlex="17" (change)="changeCustomScheduler($event, day)">

ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.ts

@@ -40,12 +40,6 @@ import {
 import { isDefined, isDefinedAndNotNull } from '@core/utils';
 import { MatCheckboxChange } from '@angular/material/checkbox';
 import { getDefaultTimezone } from '@shared/models/time/time.models';
-import {
-  DynamicValueSourceType,
-  dynamicValueSourceTypeTranslationMap,
-  getDynamicSourcesForAllowUser
-} from '@shared/models/query/query.models';
-import { emit } from 'cluster';
 
 @Component({
   selector: 'tb-alarm-schedule',
@@ -70,8 +64,6 @@ export class AlarmScheduleComponent implements ControlValueAccessor, Validator,
   alarmScheduleTypes = Object.keys(AlarmScheduleType);
   alarmScheduleType = AlarmScheduleType;
   alarmScheduleTypeTranslate = AlarmScheduleTypeTranslationMap;
-  dynamicValueSourceTypes: DynamicValueSourceType[] = getDynamicSourcesForAllowUser(false);
-  dynamicValueSourceTypeTranslations = dynamicValueSourceTypeTranslationMap;
   dayOfWeekTranslationsArray = dayOfWeekTranslations;
 
   allDays = Array(7).fill(0).map((x, i) => i);
@@ -99,18 +91,9 @@ export class AlarmScheduleComponent implements ControlValueAccessor, Validator,
       startsOn: [0, Validators.required],
       endsOn: [0, Validators.required],
       items: this.fb.array(Array.from({length: 7}, (value, i) => this.defaultItemsScheduler(i)), this.validateItems),
-      dynamicValue:  this.fb.group({
+      dynamicValue: [null]
-        sourceType: [null],
-        sourceAttribute: [null]
-      })
     });
 
-    this.alarmScheduleForm.get('dynamicValue.sourceType').valueChanges.subscribe((sourceType) => {
-      if (!sourceType) {
-        this.alarmScheduleForm.get('dynamicValue.sourceAttribute').patchValue('', {emitEvent:false});
-      }
-    })
-
     this.alarmScheduleForm.get('type').valueChanges.subscribe((type) => {
       const defaultTimezone = getDefaultTimezone();
       this.alarmScheduleForm.reset({type, items: this.defaultItems, timezone: defaultTimezone}, {emitEvent: false});
@@ -176,7 +159,8 @@ export class AlarmScheduleComponent implements ControlValueAccessor, Validator,
           timezone: this.modelValue.timezone,
           daysOfWeek,
           startsOn: utcTimestampToTimeOfDay(this.modelValue.startsOn),
-          endsOn: utcTimestampToTimeOfDay(this.modelValue.endsOn)
+          endsOn: utcTimestampToTimeOfDay(this.modelValue.endsOn),
+          dynamicValue: this.modelValue.dynamicValue
         }, {emitEvent: false});
         break;
       case AlarmScheduleType.CUSTOM:
@@ -196,10 +180,7 @@ export class AlarmScheduleComponent implements ControlValueAccessor, Validator,
             type: this.modelValue.type,
             timezone: this.modelValue.timezone,
             items: alarmDays,
-            dynamicValue: {
+            dynamicValue: this.modelValue.dynamicValue
-              sourceAttribute: this.modelValue.dynamicValue.sourceAttribute,
-              sourceType: this.modelValue.dynamicValue.sourceType
-            }
           }, {emitEvent: false});
         }
         break;