简柏林 / thingskit · Commits

Commit 1b2a25919108fc5f55c0a534887e664cd7d138e0

Authored by Vladyslav_Prykhodko
1 parent 252a3ad6

UI: Add unsubscribe to device profile transport type

Inline Side-by-side
Showing 5 changed files with 69 additions and 24 deletions
... ... @@ -14,7 +14,7 @@
14 14 /// limitations under the License.
15 15 ///
16 16
17   -import { Component, forwardRef, Input, OnInit } from '@angular/core';
  17 +import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
18 18 import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
19 19 import { Store } from '@ngrx/store';
20 20 import { AppState } from '@app/core/core.state';
... ... @@ -33,6 +33,8 @@ import {
33 33 transportPayloadTypeTranslationMap,
34 34 } from '@shared/models/device.models';
35 35 import { isDefinedAndNotNull } from '@core/utils';
  36 +import { Subject } from 'rxjs';
  37 +import { takeUntil } from 'rxjs/operators';
36 38
37 39 @Component({
38 40 selector: 'tb-coap-device-profile-transport-configuration',
... ... @@ -44,7 +46,7 @@ import { isDefinedAndNotNull } from '@core/utils';
44 46 multi: true
45 47 }]
46 48 })
47   -export class CoapDeviceProfileTransportConfigurationComponent implements ControlValueAccessor, OnInit {
  49 +export class CoapDeviceProfileTransportConfigurationComponent implements ControlValueAccessor, OnInit, OnDestroy {
48 50
49 51 coapTransportDeviceTypes = Object.keys(CoapTransportDeviceType);
50 52
... ... @@ -56,6 +58,7 @@ export class CoapDeviceProfileTransportConfigurationComponent implements Control
56 58
57 59 coapDeviceProfileTransportConfigurationFormGroup: FormGroup;
58 60
  61 + private destroy$ = new Subject();
59 62 private requiredValue: boolean;
60 63
61 64 private transportPayloadTypeConfiguration = this.fb.group({
... ... @@ -99,15 +102,23 @@ export class CoapDeviceProfileTransportConfigurationComponent implements Control
99 102 })
100 103 }
101 104 );
102   - this.coapDeviceProfileTransportConfigurationFormGroup.get('coapDeviceTypeConfiguration.coapDeviceType')
103   - .valueChanges.subscribe(coapDeviceType => {
  105 + this.coapDeviceProfileTransportConfigurationFormGroup.get('coapDeviceTypeConfiguration.coapDeviceType').valueChanges.pipe(
  106 + takeUntil(this.destroy$)
  107 + ).subscribe(coapDeviceType => {
104 108 this.updateCoapDeviceTypeBasedControls(coapDeviceType, true);
105 109 });
106   - this.coapDeviceProfileTransportConfigurationFormGroup.valueChanges.subscribe(() => {
  110 + this.coapDeviceProfileTransportConfigurationFormGroup.valueChanges.pipe(
  111 + takeUntil(this.destroy$)
  112 + ).subscribe(() => {
107 113 this.updateModel();
108 114 });
109 115 }
110 116
  117 + ngOnDestroy() {
  118 + this.destroy$.next();
  119 + this.destroy$.complete();
  120 + }
  121 +
111 122 get coapDeviceTypeDefault(): boolean {
112 123 const coapDeviceType = this.coapDeviceProfileTransportConfigurationFormGroup.get('coapDeviceTypeConfiguration.coapDeviceType').value;
113 124 return coapDeviceType === CoapTransportDeviceType.DEFAULT;
... ...
... ... @@ -14,13 +14,15 @@
14 14 /// limitations under the License.
15 15 ///
16 16
17   -import { Component, forwardRef, Input, OnInit } from '@angular/core';
  17 +import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
18 18 import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
19 19 import { Store } from '@ngrx/store';
20 20 import { AppState } from '@app/core/core.state';
21 21 import { coerceBooleanProperty } from '@angular/cdk/coercion';
22 22 import { DeviceProfileConfiguration, DeviceProfileType } from '@shared/models/device.models';
23 23 import { deepClone } from '@core/utils';
  24 +import { Subject } from 'rxjs';
  25 +import { takeUntil } from 'rxjs/operators';
24 26
25 27 @Component({
26 28 selector: 'tb-device-profile-configuration',
... ... @@ -32,12 +34,14 @@ import { deepClone } from '@core/utils';
32 34 multi: true
33 35 }]
34 36 })
35   -export class DeviceProfileConfigurationComponent implements ControlValueAccessor, OnInit {
  37 +export class DeviceProfileConfigurationComponent implements ControlValueAccessor, OnInit, OnDestroy {
36 38
37 39 deviceProfileType = DeviceProfileType;
38 40
39 41 deviceProfileConfigurationFormGroup: FormGroup;
40 42
  43 + private destroy$ = new Subject();
  44 +
41 45 private requiredValue: boolean;
42 46 get required(): boolean {
43 47 return this.requiredValue;
... ... @@ -69,11 +73,18 @@ export class DeviceProfileConfigurationComponent implements ControlValueAccessor
69 73 this.deviceProfileConfigurationFormGroup = this.fb.group({
70 74 configuration: [null, Validators.required]
71 75 });
72   - this.deviceProfileConfigurationFormGroup.valueChanges.subscribe(() => {
  76 + this.deviceProfileConfigurationFormGroup.valueChanges.pipe(
  77 + takeUntil(this.destroy$)
  78 + ).subscribe(() => {
73 79 this.updateModel();
74 80 });
75 81 }
76 82
  83 + ngOnDestroy() {
  84 + this.destroy$.next();
  85 + this.destroy$.complete();
  86 + }
  87 +
77 88 setDisabledState(isDisabled: boolean): void {
78 89 this.disabled = isDisabled;
79 90 if (this.disabled) {
... ...
... ... @@ -14,7 +14,7 @@
14 14 /// limitations under the License.
15 15 ///
16 16
17   -import { Component, forwardRef, Input, OnInit } from '@angular/core';
  17 +import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
18 18 import {
19 19 ControlValueAccessor,
20 20 FormBuilder,
... ... @@ -39,6 +39,8 @@ import {
39 39 transportPayloadTypeTranslationMap
40 40 } from '@shared/models/device.models';
41 41 import { isDefinedAndNotNull } from '@core/utils';
  42 +import { Subject } from 'rxjs';
  43 +import { takeUntil } from 'rxjs/operators';
42 44
43 45 @Component({
44 46 selector: 'tb-mqtt-device-profile-transport-configuration',
... ... @@ -50,7 +52,7 @@ import { isDefinedAndNotNull } from '@core/utils';
50 52 multi: true
51 53 }]
52 54 })
53   -export class MqttDeviceProfileTransportConfigurationComponent implements ControlValueAccessor, OnInit {
  55 +export class MqttDeviceProfileTransportConfigurationComponent implements ControlValueAccessor, OnInit, OnDestroy {
54 56
55 57 transportPayloadTypes = Object.keys(TransportPayloadType);
56 58
... ... @@ -58,6 +60,7 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control
58 60
59 61 mqttDeviceProfileTransportConfigurationFormGroup: FormGroup;
60 62
  63 + private destroy$ = new Subject();
61 64 private requiredValue: boolean;
62 65
63 66 get required(): boolean {
... ... @@ -98,15 +101,23 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control
98 101 })
99 102 }, {validator: this.uniqueDeviceTopicValidator}
100 103 );
101   - this.mqttDeviceProfileTransportConfigurationFormGroup.get('transportPayloadTypeConfiguration.transportPayloadType')
102   - .valueChanges.subscribe(payloadType => {
  104 + this.mqttDeviceProfileTransportConfigurationFormGroup.get('transportPayloadTypeConfiguration.transportPayloadType').valueChanges.pipe(
  105 + takeUntil(this.destroy$)
  106 + ).subscribe(payloadType => {
103 107 this.updateTransportPayloadBasedControls(payloadType, true);
104 108 });
105   - this.mqttDeviceProfileTransportConfigurationFormGroup.valueChanges.subscribe(() => {
  109 + this.mqttDeviceProfileTransportConfigurationFormGroup.valueChanges.pipe(
  110 + takeUntil(this.destroy$)
  111 + ).subscribe(() => {
106 112 this.updateModel();
107 113 });
108 114 }
109 115
  116 + ngOnDestroy() {
  117 + this.destroy$.next();
  118 + this.destroy$.complete();
  119 + }
  120 +
110 121 setDisabledState(isDisabled: boolean): void {
111 122 this.disabled = isDisabled;
112 123 if (this.disabled) {
... ... @@ -192,8 +203,8 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control
192 203 }
193 204
194 205 private uniqueDeviceTopicValidator(control: FormGroup): { [key: string]: boolean } | null {
195   - if (control.value) {
196   - const formValue = control.value as MqttDeviceProfileTransportConfiguration;
  206 + if (control.getRawValue()) {
  207 + const formValue = control.getRawValue() as MqttDeviceProfileTransportConfiguration;
197 208 if (formValue.deviceAttributesTopic === formValue.deviceTelemetryTopic) {
198 209 return {unique: true};
199 210 }
... ...
... ... @@ -14,17 +14,19 @@
14 14 /// limitations under the License.
15 15 ///
16 16
17   -import {Component, forwardRef, Input, OnInit} from '@angular/core';
18   -import {ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators} from '@angular/forms';
19   -import {Store} from '@ngrx/store';
20   -import {AppState} from '@app/core/core.state';
21   -import {coerceBooleanProperty} from '@angular/cdk/coercion';
  17 +import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
  18 +import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
  19 +import { Store } from '@ngrx/store';
  20 +import { AppState } from '@app/core/core.state';
  21 +import { coerceBooleanProperty } from '@angular/cdk/coercion';
22 22 import {
23 23 DeviceProfileTransportConfiguration,
24 24 DeviceTransportType,
25 25 SnmpDeviceProfileTransportConfiguration
26 26 } from '@shared/models/device.models';
27   -import {isDefinedAndNotNull} from "@core/utils";
  27 +import { isDefinedAndNotNull } from '@core/utils';
  28 +import { Subject } from 'rxjs';
  29 +import { takeUntil } from 'rxjs/operators';
28 30
29 31 export interface OidMappingConfiguration {
30 32 isAttribute: boolean;
... ... @@ -44,8 +46,11 @@ export interface OidMappingConfiguration {
44 46 multi: true
45 47 }]
46 48 })
47   -export class SnmpDeviceProfileTransportConfigurationComponent implements ControlValueAccessor, OnInit {
  49 +export class SnmpDeviceProfileTransportConfigurationComponent implements ControlValueAccessor, OnInit, OnDestroy {
  50 +
48 51 snmpDeviceProfileTransportConfigurationFormGroup: FormGroup;
  52 +
  53 + private destroy$ = new Subject();
49 54 private requiredValue: boolean;
50 55 private configuration = [];
51 56
... ... @@ -71,11 +76,18 @@ export class SnmpDeviceProfileTransportConfigurationComponent implements Control
71 76 this.snmpDeviceProfileTransportConfigurationFormGroup = this.fb.group({
72 77 configuration: [null, Validators.required]
73 78 });
74   - this.snmpDeviceProfileTransportConfigurationFormGroup.valueChanges.subscribe(() => {
  79 + this.snmpDeviceProfileTransportConfigurationFormGroup.valueChanges.pipe(
  80 + takeUntil(this.destroy$)
  81 + ).subscribe(() => {
75 82 this.updateModel();
76 83 });
77 84 }
78 85
  86 + ngOnDestroy() {
  87 + this.destroy$.next();
  88 + this.destroy$.complete();
  89 + }
  90 +
79 91 registerOnChange(fn: any): void {
80 92 this.propagateChange = fn;
81 93 }
... ...
... ... @@ -32,7 +32,7 @@ import {
32 32 })
33 33 export class DeviceProfileTabsComponent extends EntityTabsComponent<DeviceProfile> {
34 34
35   - deviceTransportTypes = Object.keys(DeviceTransportType);
  35 + deviceTransportTypes = Object.values(DeviceTransportType);
36 36
37 37 deviceTransportTypeTranslations = deviceTransportTypeTranslationMap;
38 38
... ...