Merge pull request #11035 from rusikv/bug/device-profile-transport-configuration

Fixed disappearing of device profile transport config form on tab switch if it is invalid
This commit is contained in:
Igor Kulikov 2024-07-01 16:07:48 +03:00 committed by GitHub
commit 9fbab5b49a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 94 additions and 49 deletions

View File

@ -15,7 +15,17 @@
///
import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
import {
ControlValueAccessor,
NG_VALIDATORS,
NG_VALUE_ACCESSOR,
UntypedFormBuilder,
UntypedFormControl,
UntypedFormGroup,
ValidationErrors,
Validator,
Validators
} from '@angular/forms';
import { Store } from '@ngrx/store';
import { AppState } from '@app/core/core.state';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
@ -27,7 +37,6 @@ import {
defaultRpcRequestSchema,
defaultRpcResponseSchema,
defaultTelemetrySchema,
DeviceProfileTransportConfiguration,
DeviceTransportType,
TransportPayloadType,
transportPayloadTypeTranslationMap,
@ -41,13 +50,20 @@ import { PowerMode } from '@home/components/profile/device/lwm2m/lwm2m-profile-c
selector: 'tb-coap-device-profile-transport-configuration',
templateUrl: './coap-device-profile-transport-configuration.component.html',
styleUrls: ['./coap-device-profile-transport-configuration.component.scss'],
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CoapDeviceProfileTransportConfigurationComponent),
multi: true
}]
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CoapDeviceProfileTransportConfigurationComponent),
multi: true
},
{
provide: NG_VALIDATORS,
useExisting: forwardRef(() => CoapDeviceProfileTransportConfigurationComponent),
multi: true
}
]
})
export class CoapDeviceProfileTransportConfigurationComponent implements ControlValueAccessor, OnInit, OnDestroy {
export class CoapDeviceProfileTransportConfigurationComponent implements ControlValueAccessor, OnInit, OnDestroy, Validator {
coapTransportDeviceTypes = Object.values(CoapTransportDeviceType);
coapTransportDeviceTypeTranslations = coapDeviceTypeTranslationMap;
@ -178,12 +194,15 @@ export class CoapDeviceProfileTransportConfigurationComponent implements Control
}
}
public validate(c: UntypedFormControl): ValidationErrors | null {
return (this.coapTransportConfigurationFormGroup.valid) ? null : {
valid: false,
};
}
private updateModel() {
let configuration: DeviceProfileTransportConfiguration = null;
if (this.coapTransportConfigurationFormGroup.valid) {
configuration = this.coapTransportConfigurationFormGroup.value;
configuration.type = DeviceTransportType.COAP;
}
const configuration = this.coapTransportConfigurationFormGroup.value;
configuration.type = DeviceTransportType.COAP;
this.propagateChange(configuration);
}
}

View File

@ -15,7 +15,17 @@
///
import { Component, forwardRef, Input, OnInit } from '@angular/core';
import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
import {
ControlValueAccessor,
NG_VALIDATORS,
NG_VALUE_ACCESSOR,
UntypedFormBuilder,
UntypedFormControl,
UntypedFormGroup,
ValidationErrors,
Validator,
Validators
} from '@angular/forms';
import { Store } from '@ngrx/store';
import { AppState } from '@app/core/core.state';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
@ -26,13 +36,20 @@ import { deepClone } from '@core/utils';
selector: 'tb-device-profile-transport-configuration',
templateUrl: './device-profile-transport-configuration.component.html',
styleUrls: [],
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DeviceProfileTransportConfigurationComponent),
multi: true
}]
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DeviceProfileTransportConfigurationComponent),
multi: true
},
{
provide: NG_VALIDATORS,
useExisting: forwardRef(() => DeviceProfileTransportConfigurationComponent),
multi: true,
}
]
})
export class DeviceProfileTransportConfigurationComponent implements ControlValueAccessor, OnInit {
export class DeviceProfileTransportConfigurationComponent implements ControlValueAccessor, OnInit, Validator {
deviceTransportType = DeviceTransportType;
@ -98,11 +115,16 @@ export class DeviceProfileTransportConfigurationComponent implements ControlValu
}
private updateModel() {
let configuration: DeviceProfileTransportConfiguration = null;
if (this.deviceProfileTransportConfigurationFormGroup.valid) {
configuration = this.deviceProfileTransportConfigurationFormGroup.getRawValue().configuration;
configuration.type = this.transportType;
}
const configuration = this.deviceProfileTransportConfigurationFormGroup.getRawValue().configuration;
configuration.type = this.transportType;
this.propagateChange(configuration);
}
public validate(c: UntypedFormControl): ValidationErrors | null {
return (this.deviceProfileTransportConfigurationFormGroup.valid) ? null : {
configuration: {
valid: false,
},
};
}
}

View File

@ -296,11 +296,7 @@ export class Lwm2mDeviceProfileTransportConfigurationComponent implements Contro
}
private updateModel = (): void => {
let configuration: Lwm2mProfileConfigModels = null;
if (this.lwm2mDeviceProfileFormGroup.valid) {
configuration = this.configurationValue;
}
this.propagateChange(configuration);
this.propagateChange(this.configurationValue);
}
private updateObserveAttrTelemetryObjectFormGroup = (objectsList: ObjectLwM2M[]): void => {

View File

@ -17,10 +17,13 @@
import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
import {
ControlValueAccessor,
NG_VALIDATORS,
NG_VALUE_ACCESSOR,
UntypedFormBuilder,
UntypedFormControl,
UntypedFormGroup,
NG_VALUE_ACCESSOR,
ValidationErrors,
Validator,
ValidatorFn,
Validators
} from '@angular/forms';
@ -32,7 +35,6 @@ import {
defaultRpcRequestSchema,
defaultRpcResponseSchema,
defaultTelemetrySchema,
DeviceProfileTransportConfiguration,
DeviceTransportType,
MqttDeviceProfileTransportConfiguration,
TransportPayloadType,
@ -46,13 +48,20 @@ import { takeUntil } from 'rxjs/operators';
selector: 'tb-mqtt-device-profile-transport-configuration',
templateUrl: './mqtt-device-profile-transport-configuration.component.html',
styleUrls: ['./mqtt-device-profile-transport-configuration.component.scss'],
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MqttDeviceProfileTransportConfigurationComponent),
multi: true
}]
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MqttDeviceProfileTransportConfigurationComponent),
multi: true
},
{
provide: NG_VALIDATORS,
useExisting: forwardRef(() => MqttDeviceProfileTransportConfigurationComponent),
multi: true
}
]
})
export class MqttDeviceProfileTransportConfigurationComponent implements ControlValueAccessor, OnInit, OnDestroy {
export class MqttDeviceProfileTransportConfigurationComponent implements ControlValueAccessor, OnInit, OnDestroy, Validator {
transportPayloadTypes = Object.keys(TransportPayloadType);
@ -172,12 +181,15 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control
}
}
public validate(c: UntypedFormControl): ValidationErrors | null {
return (this.mqttDeviceProfileTransportConfigurationFormGroup.valid) ? null : {
valid: false,
};
}
private updateModel() {
let configuration: DeviceProfileTransportConfiguration = null;
if (this.mqttDeviceProfileTransportConfigurationFormGroup.valid) {
configuration = this.mqttDeviceProfileTransportConfigurationFormGroup.getRawValue();
configuration.type = DeviceTransportType.MQTT;
}
const configuration = this.mqttDeviceProfileTransportConfigurationFormGroup.getRawValue();
configuration.type = DeviceTransportType.MQTT;
this.propagateChange(configuration);
}

View File

@ -27,7 +27,6 @@ import {
} from '@angular/forms';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import {
DeviceProfileTransportConfiguration,
DeviceTransportType,
SnmpDeviceProfileTransportConfiguration
} from '@shared/models/device.models';
@ -125,11 +124,8 @@ export class SnmpDeviceProfileTransportConfigurationComponent implements OnInit,
}
private updateModel() {
let configuration: DeviceProfileTransportConfiguration = null;
if (this.snmpDeviceProfileTransportConfigurationFormGroup.valid) {
configuration = this.snmpDeviceProfileTransportConfigurationFormGroup.getRawValue();
configuration.type = DeviceTransportType.SNMP;
}
const configuration = this.snmpDeviceProfileTransportConfigurationFormGroup.getRawValue();
configuration.type = DeviceTransportType.SNMP;
this.propagateChange(configuration);
}