UI: Add unsubscribe to device profile transport type

ui-ngx/src/app/modules/home/components/profile/device/coap-device-profile-transport-configuration.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
 import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@app/core/core.state';
@@ -33,6 +33,8 @@ import {
   transportPayloadTypeTranslationMap,
 } from '@shared/models/device.models';
 import { isDefinedAndNotNull } from '@core/utils';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'tb-coap-device-profile-transport-configuration',
@@ -44,7 +46,7 @@ import { isDefinedAndNotNull } from '@core/utils';
     multi: true
   }]
 })
-export class CoapDeviceProfileTransportConfigurationComponent implements ControlValueAccessor, OnInit {
+export class CoapDeviceProfileTransportConfigurationComponent implements ControlValueAccessor, OnInit, OnDestroy {
 
   coapTransportDeviceTypes = Object.keys(CoapTransportDeviceType);
 
@@ -56,6 +58,7 @@ export class CoapDeviceProfileTransportConfigurationComponent implements Control
 
   coapDeviceProfileTransportConfigurationFormGroup: FormGroup;
 
+  private destroy$ = new Subject();
   private requiredValue: boolean;
 
   private transportPayloadTypeConfiguration = this.fb.group({
@@ -99,15 +102,23 @@ export class CoapDeviceProfileTransportConfigurationComponent implements Control
         })
       }
     );
-    this.coapDeviceProfileTransportConfigurationFormGroup.get('coapDeviceTypeConfiguration.coapDeviceType')
-      .valueChanges.subscribe(coapDeviceType => {
+    this.coapDeviceProfileTransportConfigurationFormGroup.get('coapDeviceTypeConfiguration.coapDeviceType').valueChanges.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe(coapDeviceType => {
       this.updateCoapDeviceTypeBasedControls(coapDeviceType, true);
     });
-    this.coapDeviceProfileTransportConfigurationFormGroup.valueChanges.subscribe(() => {
+    this.coapDeviceProfileTransportConfigurationFormGroup.valueChanges.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe(() => {
       this.updateModel();
     });
   }
 
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
   get coapDeviceTypeDefault(): boolean {
     const coapDeviceType = this.coapDeviceProfileTransportConfigurationFormGroup.get('coapDeviceTypeConfiguration.coapDeviceType').value;
     return coapDeviceType === CoapTransportDeviceType.DEFAULT;

ui-ngx/src/app/modules/home/components/profile/device/device-profile-configuration.component.ts

@@ -14,13 +14,15 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
 import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@app/core/core.state';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { DeviceProfileConfiguration, DeviceProfileType } from '@shared/models/device.models';
 import { deepClone } from '@core/utils';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'tb-device-profile-configuration',
@@ -32,12 +34,14 @@ import { deepClone } from '@core/utils';
     multi: true
   }]
 })
-export class DeviceProfileConfigurationComponent implements ControlValueAccessor, OnInit {
+export class DeviceProfileConfigurationComponent implements ControlValueAccessor, OnInit, OnDestroy {
 
   deviceProfileType = DeviceProfileType;
 
   deviceProfileConfigurationFormGroup: FormGroup;
 
+  private destroy$ = new Subject();
+
   private requiredValue: boolean;
   get required(): boolean {
     return this.requiredValue;
@@ -69,11 +73,18 @@ export class DeviceProfileConfigurationComponent implements ControlValueAccessor
     this.deviceProfileConfigurationFormGroup = this.fb.group({
       configuration: [null, Validators.required]
     });
-    this.deviceProfileConfigurationFormGroup.valueChanges.subscribe(() => {
+    this.deviceProfileConfigurationFormGroup.valueChanges.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe(() => {
       this.updateModel();
     });
   }
 
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
   setDisabledState(isDisabled: boolean): void {
     this.disabled = isDisabled;
     if (this.disabled) {

ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
 import {
   ControlValueAccessor,
   FormBuilder,
@@ -39,6 +39,8 @@ import {
   transportPayloadTypeTranslationMap
 } from '@shared/models/device.models';
 import { isDefinedAndNotNull } from '@core/utils';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'tb-mqtt-device-profile-transport-configuration',
@@ -50,7 +52,7 @@ import { isDefinedAndNotNull } from '@core/utils';
     multi: true
   }]
 })
-export class MqttDeviceProfileTransportConfigurationComponent implements ControlValueAccessor, OnInit {
+export class MqttDeviceProfileTransportConfigurationComponent implements ControlValueAccessor, OnInit, OnDestroy {
 
   transportPayloadTypes = Object.keys(TransportPayloadType);
 
@@ -58,6 +60,7 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control
 
   mqttDeviceProfileTransportConfigurationFormGroup: FormGroup;
 
+  private destroy$ = new Subject();
   private requiredValue: boolean;
 
   get required(): boolean {
@@ -98,15 +101,23 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control
         })
       }, {validator: this.uniqueDeviceTopicValidator}
     );
-    this.mqttDeviceProfileTransportConfigurationFormGroup.get('transportPayloadTypeConfiguration.transportPayloadType')
-      .valueChanges.subscribe(payloadType => {
+    this.mqttDeviceProfileTransportConfigurationFormGroup.get('transportPayloadTypeConfiguration.transportPayloadType').valueChanges.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe(payloadType => {
       this.updateTransportPayloadBasedControls(payloadType, true);
     });
-    this.mqttDeviceProfileTransportConfigurationFormGroup.valueChanges.subscribe(() => {
+    this.mqttDeviceProfileTransportConfigurationFormGroup.valueChanges.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe(() => {
       this.updateModel();
     });
   }
 
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
   setDisabledState(isDisabled: boolean): void {
     this.disabled = isDisabled;
     if (this.disabled) {
@@ -192,8 +203,8 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control
   }
 
   private uniqueDeviceTopicValidator(control: FormGroup): { [key: string]: boolean } | null {
-    if (control.value) {
-      const formValue = control.value as MqttDeviceProfileTransportConfiguration;
+    if (control.getRawValue()) {
+      const formValue = control.getRawValue() as MqttDeviceProfileTransportConfiguration;
       if (formValue.deviceAttributesTopic === formValue.deviceTelemetryTopic) {
         return {unique: true};
       }

ui-ngx/src/app/modules/home/components/profile/device/snmp-device-profile-transport-configuration.component.ts

@@ -14,17 +14,19 @@
 /// limitations under the License.
 ///
 
-import {Component, forwardRef, Input, OnInit} from '@angular/core';
-import {ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators} from '@angular/forms';
-import {Store} from '@ngrx/store';
-import {AppState} from '@app/core/core.state';
-import {coerceBooleanProperty} from '@angular/cdk/coercion';
+import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
+import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
+import { Store } from '@ngrx/store';
+import { AppState } from '@app/core/core.state';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import {
   DeviceProfileTransportConfiguration,
   DeviceTransportType,
   SnmpDeviceProfileTransportConfiguration
 } from '@shared/models/device.models';
-import {isDefinedAndNotNull} from "@core/utils";
+import { isDefinedAndNotNull } from '@core/utils';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 export interface OidMappingConfiguration {
   isAttribute: boolean;
@@ -44,8 +46,11 @@ export interface OidMappingConfiguration {
     multi: true
   }]
 })
-export class SnmpDeviceProfileTransportConfigurationComponent implements ControlValueAccessor, OnInit {
+export class SnmpDeviceProfileTransportConfigurationComponent implements ControlValueAccessor, OnInit, OnDestroy {
+
   snmpDeviceProfileTransportConfigurationFormGroup: FormGroup;
+
+  private destroy$ = new Subject();
   private requiredValue: boolean;
   private configuration = [];
 
@@ -71,11 +76,18 @@ export class SnmpDeviceProfileTransportConfigurationComponent implements Control
     this.snmpDeviceProfileTransportConfigurationFormGroup = this.fb.group({
       configuration: [null, Validators.required]
     });
-    this.snmpDeviceProfileTransportConfigurationFormGroup.valueChanges.subscribe(() => {
+    this.snmpDeviceProfileTransportConfigurationFormGroup.valueChanges.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe(() => {
       this.updateModel();
     });
   }
 
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
   registerOnChange(fn: any): void {
     this.propagateChange = fn;
   }

ui-ngx/src/app/modules/home/pages/device-profile/device-profile-tabs.component.ts

@@ -32,7 +32,7 @@ import {
 })
 export class DeviceProfileTabsComponent extends EntityTabsComponent<DeviceProfile> {
 
-  deviceTransportTypes = Object.keys(DeviceTransportType);
+  deviceTransportTypes = Object.values(DeviceTransportType);
 
   deviceTransportTypeTranslations = deviceTransportTypeTranslationMap;