UI: Refactoring CoAP power mode setting

@@ -141,6 +141,7 @@ import { DashboardImageDialogComponent } from '@home/components/dashboard-page/d
 import { WidgetContainerComponent } from '@home/components/widget/widget-container.component';
 import { SnmpDeviceProfileTransportModule } from '@home/components/profile/device/snpm/snmp-device-profile-transport.module';
 import { DeviceCredentialsModule } from '@home/components/device/device-credentials.module';
+import { PowerModeSettingComponent } from '@home/components/profile/device/common/power-mode-setting.component';
 
 @NgModule({
   declarations:
@@ -259,7 +260,8 @@ import { DeviceCredentialsModule } from '@home/components/device/device-credenti
       DashboardStateDialogComponent,
       DashboardImageDialogComponent,
       EmbedDashboardDialogComponent,
-      DisplayWidgetTypesPanelComponent
+      DisplayWidgetTypesPanelComponent,
+      PowerModeSettingComponent
     ],
   imports: [
     CommonModule,
@@ -369,7 +371,8 @@ import { DeviceCredentialsModule } from '@home/components/device/device-credenti
     DashboardStateDialogComponent,
     DashboardImageDialogComponent,
     EmbedDashboardDialogComponent,
-    DisplayWidgetTypesPanelComponent
+    DisplayWidgetTypesPanelComponent,
+    PowerModeSettingComponent
   ],
   providers: [
     WidgetComponentService,

@@ -84,49 +84,8 @@
   <section formGroupName="clientSettings">
     <fieldset class="fields-group">
       <legend class="group-title" translate>device-profile.power-saving-mode</legend>
-      <mat-form-field class="mat-block" fxFlex>
-        <mat-label> </mat-label>
-        <mat-select formControlName="powerMode">
-          <mat-option *ngFor="let powerMod of powerMods" [value]="powerMod">
-            {{ powerModeTranslationMap.get(powerMod) | translate}}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
-      <section class="mat-block" fxFlex *ngIf="coapTransportConfigurationFormGroup.get('clientSettings.powerMode').value === 'E_DRX'">
-        <mat-form-field class="mat-block" fxFlex>
-          <mat-label>{{ 'device-profile.edrx-cycle' | translate }}</mat-label>
-          <input matInput type="number" min="0" formControlName="edrxCycle" required>
-          <mat-error *ngIf="coapTransportConfigurationFormGroup.get('clientSettings.edrxCycle').hasError('required')">
-            {{ 'device-profile.edrx-cycle-required' | translate }}
-          </mat-error>
-          <mat-error *ngIf="coapTransportConfigurationFormGroup.get('clientSettings.edrxCycle').hasError('pattern') ||
-                                        coapTransportConfigurationFormGroup.get('clientSettings.edrxCycle').hasError('min')">
-            {{ 'device-profile.edrx-cycle-pattern' | translate }}
-          </mat-error>
-        </mat-form-field>
-        <mat-form-field class="mat-block" fxFlex>
-          <mat-label>{{ 'device-profile.paging-transmission-window' | translate }}</mat-label>
-          <input matInput type="number" min="0" formControlName="pagingTransmissionWindow" required>
-          <mat-error *ngIf="coapTransportConfigurationFormGroup.get('clientSettings.pagingTransmissionWindow').hasError('required')">
-            {{ 'device-profile.paging-transmission-window-required' | translate }}
-          </mat-error>
-          <mat-error *ngIf="coapTransportConfigurationFormGroup.get('clientSettings.pagingTransmissionWindow').hasError('pattern') ||
-                                        coapTransportConfigurationFormGroup.get('clientSettings.pagingTransmissionWindow').hasError('min')">
-            {{ 'device-profile.paging-transmission-window-pattern' | translate }}
-          </mat-error>
-        </mat-form-field>
-      </section>
-      <mat-form-field class="mat-block" fxFlex *ngIf="coapTransportConfigurationFormGroup.get('clientSettings.powerMode').value === 'PSM'">
-        <mat-label>{{ 'device-profile.psm-activity-timer' | translate }}</mat-label>
-        <input matInput type="number" min="0" formControlName="psmActivityTimer" required>
-        <mat-error *ngIf="coapTransportConfigurationFormGroup.get('clientSettings.psmActivityTimer').hasError('required')">
-          {{ 'device-profile.psm-activity-timer-required' | translate }}
-        </mat-error>
-        <mat-error *ngIf="coapTransportConfigurationFormGroup.get('clientSettings.psmActivityTimer').hasError('pattern') ||
-                                        coapTransportConfigurationFormGroup.get('clientSettings.psmActivityTimer').hasError('min')">
-          {{ 'device-profile.psm-activity-timer-pattern' | translate }}
-        </mat-error>
-      </mat-form-field>
+      <tb-power-mode-settings [parentForm]="clientSettingsFormGroup">
+      </tb-power-mode-settings>
     </fieldset>
   </section>
 </form>

@@ -35,7 +35,7 @@ import {
 import { isDefinedAndNotNull } from '@core/utils';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { PowerMode, PowerModeTranslationMap } from '@home/components/profile/device/lwm2m/lwm2m-profile-config.models';
+import { PowerMode } from '@home/components/profile/device/lwm2m/lwm2m-profile-config.models';
 
 @Component({
   selector: 'tb-coap-device-profile-transport-configuration',
@@ -55,9 +55,6 @@ export class CoapDeviceProfileTransportConfigurationComponent implements Control
   transportPayloadTypes = Object.values(TransportPayloadType);
   transportPayloadTypeTranslations = transportPayloadTypeTranslationMap;
 
-  powerMods = Object.values(PowerMode);
-  powerModeTranslationMap = PowerModeTranslationMap;
-
   coapTransportConfigurationFormGroup: FormGroup;
 
   private destroy$ = new Subject();
@@ -114,21 +111,6 @@ export class CoapDeviceProfileTransportConfigurationComponent implements Control
     ).subscribe(coapDeviceType => {
       this.updateCoapDeviceTypeBasedControls(coapDeviceType, true);
     });
-    this.coapTransportConfigurationFormGroup.get('clientSettings.powerMode').valueChanges.pipe(
-      takeUntil(this.destroy$)
-    ).subscribe((powerMode: PowerMode) => {
-      if (powerMode === PowerMode.E_DRX) {
-        this.coapTransportConfigurationFormGroup.get('clientSettings.edrxCycle').enable({emitEvent: false});
-        this.coapTransportConfigurationFormGroup.get('clientSettings.pagingTransmissionWindow').enable({emitEvent: false});
-        this.disablePSKMode();
-      } else if (powerMode === PowerMode.PSM) {
-        this.coapTransportConfigurationFormGroup.get('clientSettings.psmActivityTimer').enable({emitEvent: false});
-        this.disableEdrxMode();
-      } else {
-        this.disableEdrxMode();
-        this.disablePSKMode();
-      }
-    });
     this.coapTransportConfigurationFormGroup.valueChanges.pipe(
       takeUntil(this.destroy$)
     ).subscribe(() => {
@@ -152,6 +134,9 @@ export class CoapDeviceProfileTransportConfigurationComponent implements Control
     return transportPayloadType === TransportPayloadType.PROTOBUF;
   }
 
+  get clientSettingsFormGroup(): FormGroup {
+    return this.coapTransportConfigurationFormGroup.get('clientSettings') as FormGroup;
+  }
 
   private updateCoapDeviceTypeBasedControls(type: CoapTransportDeviceType, forceUpdated = false) {
     const coapDeviceTypeConfigurationFormGroup = this.coapTransportConfigurationFormGroup
@@ -201,16 +186,4 @@ export class CoapDeviceProfileTransportConfigurationComponent implements Control
     }
     this.propagateChange(configuration);
   }
-
-  private disablePSKMode() {
-    this.coapTransportConfigurationFormGroup.get('clientSettings.psmActivityTimer').disable({emitEvent: false});
-    this.coapTransportConfigurationFormGroup.get('clientSettings.psmActivityTimer').reset(0, {emitEvent: false});
-  }
-
-  private disableEdrxMode() {
-    this.coapTransportConfigurationFormGroup.get('clientSettings.edrxCycle').disable({emitEvent: false});
-    this.coapTransportConfigurationFormGroup.get('clientSettings.edrxCycle').reset(0, {emitEvent: false});
-    this.coapTransportConfigurationFormGroup.get('clientSettings.pagingTransmissionWindow').disable({emitEvent: false});
-    this.coapTransportConfigurationFormGroup.get('clientSettings.pagingTransmissionWindow').reset(0, {emitEvent: false});
-  }
 }

+<!--
+
+    Copyright © 2016-2021 The Thingsboard Authors
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<section [formGroup]="parentForm">
+  <mat-form-field class="mat-block" fxFlex>
+    <mat-label>{{ isDeviceSetting ? ("device-profile.power-saving-mode" | translate) : " "}}</mat-label>
+    <mat-select formControlName="powerMode">
+      <mat-option [value]="null" *ngIf="isDeviceSetting">{{ "device-profile.power-saving-mode-type.default" | translate }}</mat-option>
+      <mat-option *ngFor="let powerMod of powerMods" [value]="powerMod">
+        {{ powerModeTranslationMap.get(powerMod) | translate}}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+  <section class="mat-block" fxFlex *ngIf="parentForm.get('powerMode').value === 'E_DRX'">
+    <mat-form-field class="mat-block" fxFlex>
+      <mat-label>{{ 'device-profile.edrx-cycle' | translate }}</mat-label>
+      <input matInput type="number" min="0" formControlName="edrxCycle" required>
+      <mat-error *ngIf="parentForm.get('edrxCycle').hasError('required')">
+        {{ 'device-profile.edrx-cycle-required' | translate }}
+      </mat-error>
+      <mat-error *ngIf="parentForm.get('edrxCycle').hasError('pattern') ||
+                                        parentForm.get('edrxCycle').hasError('min')">
+        {{ 'device-profile.edrx-cycle-pattern' | translate }}
+      </mat-error>
+    </mat-form-field>
+    <mat-form-field class="mat-block" fxFlex>
+      <mat-label>{{ 'device-profile.paging-transmission-window' | translate }}</mat-label>
+      <input matInput type="number" min="0" formControlName="pagingTransmissionWindow" required>
+      <mat-error *ngIf="parentForm.get('pagingTransmissionWindow').hasError('required')">
+        {{ 'device-profile.paging-transmission-window-required' | translate }}
+      </mat-error>
+      <mat-error *ngIf="parentForm.get('pagingTransmissionWindow').hasError('pattern') ||
+                                        parentForm.get('pagingTransmissionWindow').hasError('min')">
+        {{ 'device-profile.paging-transmission-window-pattern' | translate }}
+      </mat-error>
+    </mat-form-field>
+  </section>
+  <mat-form-field class="mat-block" fxFlex *ngIf="parentForm.get('powerMode').value === 'PSM'">
+    <mat-label>{{ 'device-profile.psm-activity-timer' | translate }}</mat-label>
+    <input matInput type="number" min="0" formControlName="psmActivityTimer" required>
+    <mat-error *ngIf="parentForm.get('psmActivityTimer').hasError('required')">
+      {{ 'device-profile.psm-activity-timer-required' | translate }}
+    </mat-error>
+    <mat-error *ngIf="parentForm.get('psmActivityTimer').hasError('pattern') ||
+                                        parentForm.get('psmActivityTimer').hasError('min')">
+      {{ 'device-profile.psm-activity-timer-pattern' | translate }}
+    </mat-error>
+  </mat-form-field>
+</section>

+///
+/// Copyright © 2016-2021 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { PowerMode, PowerModeTranslationMap } from '@home/components/profile/device/lwm2m/lwm2m-profile-config.models';
+import { takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+
+@Component({
+  selector: 'tb-power-mode-settings',
+  templateUrl: './power-mode-setting.component.html',
+  styleUrls: []
+})
+export class PowerModeSettingComponent implements OnInit, OnDestroy {
+
+  powerMods = Object.values(PowerMode);
+  powerModeTranslationMap = PowerModeTranslationMap;
+
+  private destroy$ = new Subject();
+
+  @Input()
+  parentForm: FormGroup;
+
+  @Input()
+  isDeviceSetting = false;
+
+  ngOnInit() {
+    this.parentForm.get('powerMode').valueChanges.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe((powerMode: PowerMode) => {
+      if (powerMode === PowerMode.E_DRX) {
+        this.parentForm.get('edrxCycle').enable({emitEvent: false});
+        this.parentForm.get('pagingTransmissionWindow').enable({emitEvent: false});
+        this.disablePSKMode();
+      } else if (powerMode === PowerMode.PSM) {
+        this.parentForm.get('psmActivityTimer').enable({emitEvent: false});
+        this.disableEdrxMode();
+      } else {
+        this.disableEdrxMode();
+        this.disablePSKMode();
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  private disablePSKMode() {
+    this.parentForm.get('psmActivityTimer').disable({emitEvent: false});
+    this.parentForm.get('psmActivityTimer').reset(0, {emitEvent: false});
+  }
+
+  private disableEdrxMode() {
+    this.parentForm.get('edrxCycle').disable({emitEvent: false});
+    this.parentForm.get('edrxCycle').reset(0, {emitEvent: false});
+    this.parentForm.get('pagingTransmissionWindow').disable({emitEvent: false});
+    this.parentForm.get('pagingTransmissionWindow').reset(0, {emitEvent: false});
+  }
+}

@@ -16,48 +16,6 @@
 
 -->
 <form [formGroup]="coapDeviceTransportForm" style="padding-bottom: 16px;">
-  <mat-form-field class="mat-block" fxFlex>
-    <mat-label translate>device-profile.power-saving-mode</mat-label>
-    <mat-select formControlName="powerMode">
-      <mat-option [value]="null">{{ "device-profile.power-saving-mode-type.default" | translate }}</mat-option>
-      <mat-option *ngFor="let powerMod of powerMods" [value]="powerMod">
-        {{ powerModeTranslationMap.get(powerMod) | translate }}
-      </mat-option>
-    </mat-select>
-  </mat-form-field>
-  <section class="mat-block" fxFlex *ngIf="coapDeviceTransportForm.get('powerMode').value === 'E_DRX'">
-    <mat-form-field class="mat-block" fxFlex>
-      <mat-label>{{ 'device-profile.edrx-cycle' | translate }}</mat-label>
-      <input matInput type="number" min="0" formControlName="edrxCycle" required>
-      <mat-error *ngIf="coapDeviceTransportForm.get('edrxCycle').hasError('required')">
-        {{ 'device-profile.edrx-cycle-required' | translate }}
-      </mat-error>
-      <mat-error *ngIf="coapDeviceTransportForm.get('edrxCycle').hasError('pattern') ||
-                                        coapDeviceTransportForm.get('edrxCycle').hasError('min')">
-        {{ 'device-profile.edrx-cycle-pattern' | translate }}
-      </mat-error>
-    </mat-form-field>
-    <mat-form-field class="mat-block" fxFlex>
-      <mat-label>{{ 'device-profile.paging-transmission-window' | translate }}</mat-label>
-      <input matInput type="number" min="0" formControlName="pagingTransmissionWindow" required>
-      <mat-error *ngIf="coapDeviceTransportForm.get('pagingTransmissionWindow').hasError('required')">
-        {{ 'device-profile.paging-transmission-window-required' | translate }}
-      </mat-error>
-      <mat-error *ngIf="coapDeviceTransportForm.get('pagingTransmissionWindow').hasError('pattern') ||
-                                        coapDeviceTransportForm.get('pagingTransmissionWindow').hasError('min')">
-        {{ 'device-profile.paging-transmission-window-pattern' | translate }}
-      </mat-error>
-    </mat-form-field>
-  </section>
-  <mat-form-field class="mat-block" fxFlex *ngIf="coapDeviceTransportForm.get('powerMode').value === 'PSM'">
-    <mat-label>{{ 'device-profile.psm-activity-timer' | translate }}</mat-label>
-    <input matInput type="number" min="0" formControlName="psmActivityTimer" required>
-    <mat-error *ngIf="coapDeviceTransportForm.get('psmActivityTimer').hasError('required')">
-      {{ 'device-profile.psm-activity-timer-required' | translate }}
-    </mat-error>
-    <mat-error *ngIf="coapDeviceTransportForm.get('psmActivityTimer').hasError('pattern') ||
-                                        coapDeviceTransportForm.get('psmActivityTimer').hasError('min')">
-      {{ 'device-profile.psm-activity-timer-pattern' | translate }}
-    </mat-error>
-  </mat-form-field>
+  <tb-power-mode-settings [parentForm]="coapDeviceTransportForm" [isDeviceSetting]="true">
+  </tb-power-mode-settings>
 </form>

@@ -24,7 +24,6 @@ import {
   DeviceTransportConfiguration,
   DeviceTransportType
 } from '@shared/models/device.models';
-import { PowerMode, PowerModeTranslationMap } from '@home/components/profile/device/lwm2m/lwm2m-profile-config.models';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { isDefinedAndNotNull } from '@core/utils';
@@ -43,9 +42,6 @@ export class CoapDeviceTransportConfigurationComponent implements ControlValueAc
 
   coapDeviceTransportForm: FormGroup;
 
-  powerMods = Object.values(PowerMode);
-  powerModeTranslationMap = PowerModeTranslationMap;
-
   private requiredValue: boolean;
   get required(): boolean {
     return this.requiredValue;
@@ -79,21 +75,6 @@ export class CoapDeviceTransportConfigurationComponent implements ControlValueAc
       psmActivityTimer: [{disabled: true, value: 0}, [Validators.required, Validators.min(0), Validators.pattern('[0-9]*')]],
       pagingTransmissionWindow: [{disabled: true, value: 0}, [Validators.required, Validators.min(0), Validators.pattern('[0-9]*')]]
     });
-    this.coapDeviceTransportForm.get('powerMode').valueChanges.pipe(
-      takeUntil(this.destroy$)
-    ).subscribe((powerMode: PowerMode) => {
-      if (powerMode === PowerMode.E_DRX) {
-        this.coapDeviceTransportForm.get('edrxCycle').enable({emitEvent: false});
-        this.coapDeviceTransportForm.get('pagingTransmissionWindow').enable({emitEvent: false});
-        this.disablePSKMode();
-      } else if (powerMode === PowerMode.PSM) {
-        this.coapDeviceTransportForm.get('psmActivityTimer').enable({emitEvent: false});
-        this.disableEdrxMode();
-      } else {
-        this.disableEdrxMode();
-        this.disablePSKMode();
-      }
-    });
     this.coapDeviceTransportForm.valueChanges.pipe(
       takeUntil(this.destroy$)
     ).subscribe(() => {
@@ -135,16 +116,4 @@ export class CoapDeviceTransportConfigurationComponent implements ControlValueAc
     }
     this.propagateChange(configuration);
   }
-
-  private disablePSKMode() {
-    this.coapDeviceTransportForm.get('psmActivityTimer').disable({emitEvent: false});
-    this.coapDeviceTransportForm.get('psmActivityTimer').reset(0, {emitEvent: false});
-  }
-
-  private disableEdrxMode() {
-    this.coapDeviceTransportForm.get('edrxCycle').disable({emitEvent: false});
-    this.coapDeviceTransportForm.get('edrxCycle').reset(0, {emitEvent: false});
-    this.coapDeviceTransportForm.get('pagingTransmissionWindow').disable({emitEvent: false});
-    this.coapDeviceTransportForm.get('pagingTransmissionWindow').reset(0, {emitEvent: false});
-  }
 }

@@ -361,6 +361,9 @@ export function createDeviceProfileTransportConfiguration(type: DeviceTransportT
           coapDeviceTypeConfiguration: {
             coapDeviceType: CoapTransportDeviceType.DEFAULT,
             transportPayloadTypeConfiguration: {transportPayloadType: TransportPayloadType.JSON}
+          },
+          clientSettings: {
+            powerMode: PowerMode.DRX
           }
         };
         transportConfiguration = {...coapTransportConfiguration, type: DeviceTransportType.COAP};
@@ -395,7 +398,9 @@ export function createDeviceTransportConfiguration(type: DeviceTransportType): D
         transportConfiguration = {...mqttTransportConfiguration, type: DeviceTransportType.MQTT};
         break;
       case DeviceTransportType.COAP:
-        const coapTransportConfiguration: CoapDeviceTransportConfiguration = {};
+        const coapTransportConfiguration: CoapDeviceTransportConfiguration = {
+          powerMode: null
+        };
         transportConfiguration = {...coapTransportConfiguration, type: DeviceTransportType.COAP};
         break;
       case DeviceTransportType.LWM2M:
@@ -582,7 +587,6 @@ export interface CoapDeviceTransportConfiguration {
   edrxCycle?: number;
   pagingTransmissionWindow?: number;
   psmActivityTimer?: number;
-  [key: string]: any;
 }
 
 export interface Lwm2mDeviceTransportConfiguration {