diff --git a/ui-ngx/src/app/modules/home/components/rule-node/action/attributes-config.component.ts b/ui-ngx/src/app/modules/home/components/rule-node/action/attributes-config.component.ts index a60a4ae40e..29b5dd2bc5 100644 --- a/ui-ngx/src/app/modules/home/components/rule-node/action/attributes-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/rule-node/action/attributes-config.component.ts @@ -18,6 +18,7 @@ import { Component } from '@angular/core'; import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; import { RuleNodeConfiguration, RuleNodeConfigurationComponent } from '@shared/models/rule-node.models'; import { AttributeScope, telemetryTypeTranslations } from '@app/shared/models/telemetry/telemetry.models'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; @Component({ selector: 'tb-action-node-attributes-config', @@ -48,7 +49,9 @@ export class AttributesConfigComponent extends RuleNodeConfigurationComponent { updateAttributesOnlyOnValueChange: [configuration ? configuration.updateAttributesOnlyOnValueChange : false, []] }); - this.attributesConfigForm.get('scope').valueChanges.subscribe((value) => { + this.attributesConfigForm.get('scope').valueChanges.pipe( + takeUntilDestroyed(this.destroyRef) + ).subscribe((value) => { if (value !== AttributeScope.SHARED_SCOPE) { this.attributesConfigForm.get('notifyDevice').patchValue(false, {emitEvent: false}); } diff --git a/ui-ngx/src/app/modules/home/components/rule-node/action/create-alarm-config.component.ts b/ui-ngx/src/app/modules/home/components/rule-node/action/create-alarm-config.component.ts index a68eedfbfc..738ec589be 100644 --- a/ui-ngx/src/app/modules/home/components/rule-node/action/create-alarm-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/rule-node/action/create-alarm-config.component.ts @@ -29,6 +29,7 @@ import { import type { JsFuncComponent } from '@app/shared/components/js-func.component'; import { AlarmSeverity, alarmSeverityTranslations } from '@app/shared/models/alarm.models'; import { DebugRuleNodeEventBody } from '@shared/models/event.models'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; @Component({ selector: 'tb-action-node-create-alarm-config', @@ -83,7 +84,9 @@ export class CreateAlarmConfigComponent extends RuleNodeConfigurationComponent { dynamicSeverity: false }); - this.createAlarmConfigForm.get('dynamicSeverity').valueChanges.subscribe((dynamicSeverity) => { + this.createAlarmConfigForm.get('dynamicSeverity').valueChanges.pipe( + takeUntilDestroyed(this.destroyRef) + ).subscribe((dynamicSeverity) => { if(dynamicSeverity){ this.createAlarmConfigForm.get('severity').patchValue('',{emitEvent:false}); } else { diff --git a/ui-ngx/src/app/modules/home/components/rule-node/action/delete-attributes-config.component.ts b/ui-ngx/src/app/modules/home/components/rule-node/action/delete-attributes-config.component.ts index 758e0ecb48..b61f9aa7c1 100644 --- a/ui-ngx/src/app/modules/home/components/rule-node/action/delete-attributes-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/rule-node/action/delete-attributes-config.component.ts @@ -20,6 +20,7 @@ import { MatChipGrid, MatChipInputEvent } from '@angular/material/chips'; import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes'; import { RuleNodeConfiguration, RuleNodeConfigurationComponent } from '@app/shared/models/rule-node.models'; import { AttributeScope, telemetryTypeTranslations } from '@shared/models/telemetry/telemetry.models'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; @Component({ selector: 'tb-action-node-delete-attributes-config', @@ -51,7 +52,9 @@ export class DeleteAttributesConfigComponent extends RuleNodeConfigurationCompon notifyDevice: [configuration ? configuration.notifyDevice : false, []] }); - this.deleteAttributesConfigForm.get('scope').valueChanges.subscribe((value) => { + this.deleteAttributesConfigForm.get('scope').valueChanges.pipe( + takeUntilDestroyed(this.destroyRef) + ).subscribe((value) => { if (value !== AttributeScope.SHARED_SCOPE) { this.deleteAttributesConfigForm.get('notifyDevice').patchValue(false, {emitEvent: false}); } diff --git a/ui-ngx/src/app/modules/home/components/rule-node/common/alarm-status-select.component.ts b/ui-ngx/src/app/modules/home/components/rule-node/common/alarm-status-select.component.ts index 923a4f13fc..f92f09b428 100644 --- a/ui-ngx/src/app/modules/home/components/rule-node/common/alarm-status-select.component.ts +++ b/ui-ngx/src/app/modules/home/components/rule-node/common/alarm-status-select.component.ts @@ -14,11 +14,10 @@ /// limitations under the License. /// -import { Component, forwardRef, OnDestroy, OnInit } from '@angular/core'; +import { Component, DestroyRef, forwardRef, OnInit } from '@angular/core'; import { AlarmStatus, alarmStatusTranslations, PageComponent } from '@shared/public-api'; import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms'; -import { takeUntil } from 'rxjs/operators'; -import { Subject } from 'rxjs'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; @Component({ selector: 'tb-alarm-status-select', @@ -31,17 +30,17 @@ import { Subject } from 'rxjs'; }] }) -export class AlarmStatusSelectComponent extends PageComponent implements OnInit, ControlValueAccessor, OnDestroy { +export class AlarmStatusSelectComponent extends PageComponent implements OnInit, ControlValueAccessor { public alarmStatusGroup: FormGroup; private propagateChange = null; - private destroy$ = new Subject(); readonly alarmStatus = AlarmStatus; readonly alarmStatusTranslations = alarmStatusTranslations; - constructor(private fb: FormBuilder) { + constructor(private fb: FormBuilder, + private destroyRef: DestroyRef) { super(); } @@ -51,7 +50,7 @@ export class AlarmStatusSelectComponent extends PageComponent implements OnInit, }); this.alarmStatusGroup.get('alarmStatus').valueChanges.pipe( - takeUntil(this.destroy$) + takeUntilDestroyed(this.destroyRef) ).subscribe((value) => { this.propagateChange(value); }); @@ -69,12 +68,7 @@ export class AlarmStatusSelectComponent extends PageComponent implements OnInit, this.propagateChange = fn; } - registerOnTouched(fn: any): void { - } - - ngOnDestroy() { - this.destroy$.next(); - this.destroy$.complete(); + registerOnTouched(_fn: any): void { } writeValue(value: Array): void { diff --git a/ui-ngx/src/app/modules/home/components/rule-node/common/arguments-map-config.component.ts b/ui-ngx/src/app/modules/home/components/rule-node/common/arguments-map-config.component.ts index 3b2e99cf96..3e6d5826f8 100644 --- a/ui-ngx/src/app/modules/home/components/rule-node/common/arguments-map-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/rule-node/common/arguments-map-config.component.ts @@ -14,12 +14,11 @@ /// limitations under the License. /// -import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core'; +import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core'; import { ControlValueAccessor, FormArray, FormBuilder, - FormControl, FormGroup, NG_VALIDATORS, NG_VALUE_ACCESSOR, @@ -27,7 +26,6 @@ import { Validators } from '@angular/forms'; import { PageComponent } from '@shared/public-api'; -import { Subscription } from 'rxjs'; import { CdkDragDrop } from '@angular/cdk/drag-drop'; import { ArgumentName, @@ -38,6 +36,7 @@ import { MathFunction, MathFunctionMap } from './../rule-node-config.models'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; @Component({ selector: 'tb-arguments-map-config', @@ -56,7 +55,7 @@ import { } ] }) -export class ArgumentsMapConfigComponent extends PageComponent implements ControlValueAccessor, OnInit, OnDestroy, Validator { +export class ArgumentsMapConfigComponent extends PageComponent implements ControlValueAccessor, OnInit, Validator { @Input() disabled: boolean; @@ -90,9 +89,8 @@ export class ArgumentsMapConfigComponent extends PageComponent implements Contro private propagateChange = null; - private valueChangeSubscription: Subscription[] = []; - - constructor(private fb: FormBuilder) { + constructor(private fb: FormBuilder, + private destroyRef: DestroyRef) { super(); } @@ -101,9 +99,11 @@ export class ArgumentsMapConfigComponent extends PageComponent implements Contro arguments: this.fb.array([]) }); - this.valueChangeSubscription.push(this.argumentsFormGroup.valueChanges.subscribe(() => { + this.argumentsFormGroup.valueChanges.pipe( + takeUntilDestroyed(this.destroyRef) + ).subscribe(() => { this.updateModel(); - })); + }); this.setupArgumentsFormGroup(); } @@ -124,7 +124,7 @@ export class ArgumentsMapConfigComponent extends PageComponent implements Contro this.propagateChange = fn; } - registerOnTouched(fn: any): void { + registerOnTouched(_fn: any): void { } setDisabledState(isDisabled: boolean): void { @@ -138,13 +138,7 @@ export class ArgumentsMapConfigComponent extends PageComponent implements Contro } } - ngOnDestroy() { - if (this.valueChangeSubscription.length) { - this.valueChangeSubscription.forEach(sub => sub.unsubscribe()); - } - } - - writeValue(argumentsList): void { + writeValue(argumentsList: Array): void { const argumentsControls: Array = []; if (argumentsList) { argumentsList.forEach((property, index) => { @@ -167,7 +161,7 @@ export class ArgumentsMapConfigComponent extends PageComponent implements Contro argumentsFormArray.push(argumentControl, {emitEvent}); } - public validate(c: FormControl) { + public validate() { if (!this.argumentsFormGroup.valid) { return { argumentsRequired: true @@ -203,11 +197,13 @@ export class ArgumentsMapConfigComponent extends PageComponent implements Contro defaultValue: [property?.defaultValue ? property?.defaultValue : null] }); this.updateArgumentControlValidators(argumentControl); - this.valueChangeSubscription.push(argumentControl.get('type').valueChanges.subscribe(() => { + argumentControl.get('type').valueChanges.pipe( + takeUntilDestroyed(this.destroyRef) + ).subscribe(() => { this.updateArgumentControlValidators(argumentControl); argumentControl.get('attributeScope').updateValueAndValidity({emitEvent: false}); argumentControl.get('defaultValue').updateValueAndValidity({emitEvent: false}); - })); + }); return argumentControl; } diff --git a/ui-ngx/src/app/modules/home/components/rule-node/common/credentials-config.component.ts b/ui-ngx/src/app/modules/home/components/rule-node/common/credentials-config.component.ts index 97f0ba0846..95ed59683d 100644 --- a/ui-ngx/src/app/modules/home/components/rule-node/common/credentials-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/rule-node/common/credentials-config.component.ts @@ -14,11 +14,10 @@ /// limitations under the License. /// -import { Component, forwardRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core'; +import { Component, DestroyRef, forwardRef, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'; import { ControlValueAccessor, FormBuilder, - FormControl, FormGroup, NG_VALIDATORS, NG_VALUE_ACCESSOR, @@ -27,12 +26,11 @@ import { ValidatorFn, Validators } from '@angular/forms'; -import { AppState, isDefinedAndNotNull } from '@core/public-api'; +import { isDefinedAndNotNull } from '@core/public-api'; import { PageComponent } from '@shared/public-api'; -import { Store } from '@ngrx/store'; import { coerceBooleanProperty } from '@angular/cdk/coercion'; import { credentialsType, credentialsTypes, credentialsTypeTranslations } from '../rule-node-config.models'; -import { Subscription } from 'rxjs'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; interface CredentialsConfig { type: credentialsType; @@ -63,12 +61,10 @@ interface CredentialsConfig { } ] }) -export class CredentialsConfigComponent extends PageComponent implements ControlValueAccessor, OnInit, Validator, OnDestroy, OnChanges { +export class CredentialsConfigComponent extends PageComponent implements ControlValueAccessor, OnInit, Validator, OnChanges { credentialsConfigFormGroup: FormGroup; - subscriptions: Subscription[] = []; - private requiredValue: boolean; get required(): boolean { @@ -91,9 +87,9 @@ export class CredentialsConfigComponent extends PageComponent implements Control private propagateChange = (_: any) => {}; - constructor(protected store: Store, - private fb: FormBuilder) { - super(store); + constructor(private fb: FormBuilder, + private destroyRef: DestroyRef) { + super(); } ngOnInit(): void { @@ -110,16 +106,16 @@ export class CredentialsConfigComponent extends PageComponent implements Control certFileName: [null, []] } ); - this.subscriptions.push( - this.credentialsConfigFormGroup.valueChanges.subscribe(() => { - this.updateView(); - }) - ); - this.subscriptions.push( - this.credentialsConfigFormGroup.get('type').valueChanges.subscribe(() => { - this.credentialsTypeChanged(); - }) - ); + this.credentialsConfigFormGroup.valueChanges.pipe( + takeUntilDestroyed(this.destroyRef) + ).subscribe(() => { + this.updateView(); + }); + this.credentialsConfigFormGroup.get('type').valueChanges.pipe( + takeUntilDestroyed(this.destroyRef) + ).subscribe(() => { + this.credentialsTypeChanged(); + }); } ngOnChanges(changes: SimpleChanges): void { @@ -138,10 +134,6 @@ export class CredentialsConfigComponent extends PageComponent implements Control } } - ngOnDestroy() { - this.subscriptions.forEach(s => s.unsubscribe()); - } - writeValue(credentials: CredentialsConfig | null): void { if (isDefinedAndNotNull(credentials)) { this.credentialsConfigFormGroup.reset(credentials, {emitEvent: false}); @@ -185,10 +177,10 @@ export class CredentialsConfigComponent extends PageComponent implements Control this.propagateChange = fn; } - registerOnTouched(fn: any): void { + registerOnTouched(): void { } - public validate(c: FormControl) { + public validate() { return this.credentialsConfigFormGroup.valid ? null : { credentialsConfig: { valid: false, diff --git a/ui-ngx/src/app/modules/home/components/rule-node/common/device-relations-query-config.component.ts b/ui-ngx/src/app/modules/home/components/rule-node/common/device-relations-query-config.component.ts index 23aee0b29a..bc9f524a75 100644 --- a/ui-ngx/src/app/modules/home/components/rule-node/common/device-relations-query-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/rule-node/common/device-relations-query-config.component.ts @@ -14,12 +14,13 @@ /// limitations under the License. /// -import { Component, forwardRef, Input, OnInit } from '@angular/core'; +import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core'; import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms'; import { coerceBooleanProperty } from '@angular/cdk/coercion'; import { PageComponent } from '@shared/components/page.component'; import { EntitySearchDirection, entitySearchDirectionTranslations } from '@app/shared/models/relation.models'; import { EntityType } from '@shared/models/entity-type.models'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; interface DeviceRelationsQuery { fetchLastLevelOnly: boolean; @@ -65,7 +66,8 @@ export class DeviceRelationsQueryConfigComponent extends PageComponent implement private propagateChange = null; - constructor(private fb: FormBuilder) { + constructor(private fb: FormBuilder, + private destroyRef: DestroyRef) { super(); } @@ -77,7 +79,9 @@ export class DeviceRelationsQueryConfigComponent extends PageComponent implement relationType: [null], deviceTypes: [null, [Validators.required]] }); - this.deviceRelationsQueryFormGroup.valueChanges.subscribe((query: DeviceRelationsQuery) => { + this.deviceRelationsQueryFormGroup.valueChanges.pipe( + takeUntilDestroyed(this.destroyRef) + ).subscribe((query: DeviceRelationsQuery) => { if (this.deviceRelationsQueryFormGroup.valid) { this.propagateChange(query); } else { @@ -90,7 +94,7 @@ export class DeviceRelationsQueryConfigComponent extends PageComponent implement this.propagateChange = fn; } - registerOnTouched(fn: any): void { + registerOnTouched(_fn: any): void { } setDisabledState(isDisabled: boolean): void { diff --git a/ui-ngx/src/app/modules/home/components/rule-node/common/kv-map-config-old.component.ts b/ui-ngx/src/app/modules/home/components/rule-node/common/kv-map-config-old.component.ts index a08394479a..1f7407c5e3 100644 --- a/ui-ngx/src/app/modules/home/components/rule-node/common/kv-map-config-old.component.ts +++ b/ui-ngx/src/app/modules/home/components/rule-node/common/kv-map-config-old.component.ts @@ -14,13 +14,12 @@ /// limitations under the License. /// -import { Component, forwardRef, Injector, Input, OnInit } from '@angular/core'; +import { Component, DestroyRef, forwardRef, Injector, Input, OnInit } from '@angular/core'; import { AbstractControl, ControlValueAccessor, FormArray, FormBuilder, - FormControl, FormGroup, NG_VALIDATORS, NG_VALUE_ACCESSOR, @@ -29,11 +28,9 @@ import { Validators } from '@angular/forms'; import { PageComponent } from '@shared/public-api'; -import { Store } from '@ngrx/store'; -import { AppState } from '@core/public-api'; -import { Subscription } from 'rxjs'; import { coerceBooleanProperty } from '@angular/cdk/coercion'; import { TranslateService } from '@ngx-translate/core'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; @Component({ selector: 'tb-kv-map-config-old', @@ -87,13 +84,11 @@ export class KvMapConfigOldComponent extends PageComponent implements ControlVal private propagateChange = null; - private valueChangeSubscription: Subscription = null; - - constructor(protected store: Store, - public translate: TranslateService, - public injector: Injector, - private fb: FormBuilder) { - super(store); + constructor(public translate: TranslateService, + private injector: Injector, + private fb: FormBuilder, + private destroyRef: DestroyRef) { + super(); } ngOnInit(): void { @@ -101,9 +96,15 @@ export class KvMapConfigOldComponent extends PageComponent implements ControlVal if (this.ngControl != null) { this.ngControl.valueAccessor = this; } - this.kvListFormGroup = this.fb.group({}); - this.kvListFormGroup.addControl('keyVals', - this.fb.array([])); + this.kvListFormGroup = this.fb.group({ + keyVals: this.fb.array([]) + }); + + this.kvListFormGroup.valueChanges.pipe( + takeUntilDestroyed(this.destroyRef) + ).subscribe(() => { + this.updateModel(); + }); } keyValsFormArray(): FormArray { @@ -114,7 +115,7 @@ export class KvMapConfigOldComponent extends PageComponent implements ControlVal this.propagateChange = fn; } - registerOnTouched(fn: any): void { + registerOnTouched(_fn: any): void { } setDisabledState(isDisabled: boolean): void { @@ -127,9 +128,6 @@ export class KvMapConfigOldComponent extends PageComponent implements ControlVal } writeValue(keyValMap: { [key: string]: string }): void { - if (this.valueChangeSubscription) { - this.valueChangeSubscription.unsubscribe(); - } const keyValsControls: Array = []; if (keyValMap) { for (const property of Object.keys(keyValMap)) { @@ -141,10 +139,7 @@ export class KvMapConfigOldComponent extends PageComponent implements ControlVal } } } - this.kvListFormGroup.setControl('keyVals', this.fb.array(keyValsControls)); - this.valueChangeSubscription = this.kvListFormGroup.valueChanges.subscribe(() => { - this.updateModel(); - }); + this.kvListFormGroup.setControl('keyVals', this.fb.array(keyValsControls), {emitEvent: false}); } public removeKeyVal(index: number) { @@ -159,7 +154,7 @@ export class KvMapConfigOldComponent extends PageComponent implements ControlVal })); } - public validate(c: FormControl) { + public validate() { const kvList: { key: string; value: string }[] = this.kvListFormGroup.get('keyVals').value; if (!kvList.length && this.required) { return { diff --git a/ui-ngx/src/app/modules/home/components/rule-node/common/kv-map-config.component.ts b/ui-ngx/src/app/modules/home/components/rule-node/common/kv-map-config.component.ts index 042dcf94bd..f46b5e9923 100644 --- a/ui-ngx/src/app/modules/home/components/rule-node/common/kv-map-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/rule-node/common/kv-map-config.component.ts @@ -14,7 +14,7 @@ /// limitations under the License. /// -import { Component, forwardRef, Injector, Input, OnDestroy, OnInit } from '@angular/core'; +import { Component, DestroyRef, forwardRef, Injector, Input, OnInit } from '@angular/core'; import { AbstractControl, ControlValueAccessor, @@ -31,7 +31,7 @@ import { } from '@angular/forms'; import { coerceBoolean } from '@shared/public-api'; import { isEqual } from '@core/public-api'; -import { Subject, takeUntil } from 'rxjs'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; @Component({ selector: 'tb-kv-map-config', @@ -50,10 +50,9 @@ import { Subject, takeUntil } from 'rxjs'; } ] }) -export class KvMapConfigComponent implements ControlValueAccessor, OnInit, Validator, OnDestroy { +export class KvMapConfigComponent implements ControlValueAccessor, OnInit, Validator { private propagateChange: (value: any) => void = () => {}; - private destroy$ = new Subject(); kvListFormGroup: FormGroup; ngControl: NgControl; @@ -87,7 +86,8 @@ export class KvMapConfigComponent implements ControlValueAccessor, OnInit, Valid required = false; constructor(private injector: Injector, - private fb: FormBuilder) { + private fb: FormBuilder, + private destroyRef: DestroyRef) { } ngOnInit(): void { @@ -101,17 +101,12 @@ export class KvMapConfigComponent implements ControlValueAccessor, OnInit, Valid }, {validators: [this.propagateNestedErrors, this.oneMapRequiredValidator]}); this.kvListFormGroup.valueChanges - .pipe(takeUntil(this.destroy$)) + .pipe(takeUntilDestroyed(this.destroyRef)) .subscribe(() => { this.updateModel(); }); } - ngOnDestroy() { - this.destroy$.next(); - this.destroy$.complete(); - } - keyValsFormArray(): FormArray { return this.kvListFormGroup.get('keyVals') as FormArray; } @@ -120,7 +115,7 @@ export class KvMapConfigComponent implements ControlValueAccessor, OnInit, Valid this.propagateChange = fn; } - registerOnTouched(fn: any): void { + registerOnTouched(_fn: any): void { } setDisabledState(isDisabled: boolean): void { diff --git a/ui-ngx/src/app/modules/home/components/rule-node/common/math-function-autocomplete.component.ts b/ui-ngx/src/app/modules/home/components/rule-node/common/math-function-autocomplete.component.ts index 1583048073..fb34cf4418 100644 --- a/ui-ngx/src/app/modules/home/components/rule-node/common/math-function-autocomplete.component.ts +++ b/ui-ngx/src/app/modules/home/components/rule-node/common/math-function-autocomplete.component.ts @@ -75,7 +75,7 @@ export class MathFunctionAutocompleteComponent implements ControlValueAccessor, }); this.filteredOptions = this.mathFunctionForm.get('operation').valueChanges.pipe( tap(value => { - let modelValue; + let modelValue: MathFunction; if (typeof value === 'string' && MathFunction[value]) { modelValue = MathFunction[value]; } else { @@ -101,7 +101,7 @@ export class MathFunctionAutocompleteComponent implements ControlValueAccessor, this.propagateChange = fn; } - registerOnTouched(fn: any): void { + registerOnTouched(_fn: any): void { } setDisabledState(isDisabled: boolean): void { diff --git a/ui-ngx/src/app/modules/home/components/rule-node/common/message-types-config.component.ts b/ui-ngx/src/app/modules/home/components/rule-node/common/message-types-config.component.ts index 686c6150aa..c5d10a2d25 100644 --- a/ui-ngx/src/app/modules/home/components/rule-node/common/message-types-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/rule-node/common/message-types-config.component.ts @@ -98,7 +98,7 @@ export class MessageTypesConfigComponent extends PageComponent implements Contro this.propagateChange = fn; } - registerOnTouched(fn: any): void { + registerOnTouched(_fn: any): void { } ngOnInit() { diff --git a/ui-ngx/src/app/modules/home/components/rule-node/common/msg-metadata-chip.component.ts b/ui-ngx/src/app/modules/home/components/rule-node/common/msg-metadata-chip.component.ts index 066cea455e..a8e00a68e4 100644 --- a/ui-ngx/src/app/modules/home/components/rule-node/common/msg-metadata-chip.component.ts +++ b/ui-ngx/src/app/modules/home/components/rule-node/common/msg-metadata-chip.component.ts @@ -14,12 +14,11 @@ /// limitations under the License. /// -import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core'; +import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core'; import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms'; import { FetchTo, FetchToTranslation } from '../rule-node-config.models'; -import { takeUntil } from 'rxjs/operators'; -import { Subject } from 'rxjs'; import { TranslateService } from '@ngx-translate/core'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; @Component({ selector: 'tb-msg-metadata-chip', @@ -31,19 +30,19 @@ import { TranslateService } from '@ngx-translate/core'; }] }) -export class MsgMetadataChipComponent implements OnInit, ControlValueAccessor, OnDestroy { +export class MsgMetadataChipComponent implements OnInit, ControlValueAccessor { @Input() labelText: string; @Input() translation: Map = FetchToTranslation; private propagateChange: (value: any) => void = () => {}; - private destroy$ = new Subject(); public chipControlGroup: FormGroup; public selectOptions = []; constructor(private fb: FormBuilder, - private translate: TranslateService) {} + private translate: TranslateService, + private destroyRef: DestroyRef) {} ngOnInit(): void { this.initOptions(); @@ -52,7 +51,7 @@ export class MsgMetadataChipComponent implements OnInit, ControlValueAccessor, O }); this.chipControlGroup.get('chipControl').valueChanges.pipe( - takeUntil(this.destroy$) + takeUntilDestroyed(this.destroyRef) ).subscribe((value) => { if (value) { this.propagateChange(value); @@ -61,11 +60,6 @@ export class MsgMetadataChipComponent implements OnInit, ControlValueAccessor, O ); } - ngOnDestroy(): void { - this.destroy$.next(); - this.destroy$.complete(); - } - initOptions() { for (const key of this.translation.keys()) { this.selectOptions.push({ @@ -83,7 +77,7 @@ export class MsgMetadataChipComponent implements OnInit, ControlValueAccessor, O this.propagateChange = fn; } - registerOnTouched(fn: any): void { + registerOnTouched(_fn: any): void { } setDisabledState(isDisabled: boolean): void { diff --git a/ui-ngx/src/app/modules/home/components/rule-node/common/output-message-type-autocomplete.component.ts b/ui-ngx/src/app/modules/home/components/rule-node/common/output-message-type-autocomplete.component.ts index 494b686ba3..b824240968 100644 --- a/ui-ngx/src/app/modules/home/components/rule-node/common/output-message-type-autocomplete.component.ts +++ b/ui-ngx/src/app/modules/home/components/rule-node/common/output-message-type-autocomplete.component.ts @@ -14,7 +14,7 @@ /// limitations under the License. /// -import { Component, forwardRef, Input, OnDestroy } from '@angular/core'; +import { Component, forwardRef, Input } from '@angular/core'; import { ControlValueAccessor, FormBuilder, @@ -26,7 +26,7 @@ import { } from '@angular/forms'; import { SubscriptSizing } from '@angular/material/form-field'; import { coerceBoolean } from '@shared/public-api'; -import { Subject, takeUntil } from 'rxjs'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; interface MessageType { name: string; @@ -51,7 +51,7 @@ interface MessageType { ] }) -export class OutputMessageTypeAutocompleteComponent implements ControlValueAccessor, Validator, OnDestroy { +export class OutputMessageTypeAutocompleteComponent implements ControlValueAccessor, Validator { @Input() subscriptSizing: SubscriptSizing = 'fixed'; @@ -93,7 +93,6 @@ export class OutputMessageTypeAutocompleteComponent implements ControlValueAcces private modelValue: string | null; private requiredValue: boolean; private propagateChange: (value: any) => void = () => {}; - private destroy$ = new Subject(); constructor(private fb: FormBuilder) { this.messageTypeFormGroup = this.fb.group({ @@ -101,19 +100,14 @@ export class OutputMessageTypeAutocompleteComponent implements ControlValueAcces messageType: [{value: null, disabled: true}, [Validators.maxLength(255)]] }); this.messageTypeFormGroup.get('messageTypeAlias').valueChanges - .pipe(takeUntil(this.destroy$)) + .pipe(takeUntilDestroyed()) .subscribe(value => this.updateMessageTypeValue(value)); this.messageTypeFormGroup.valueChanges - .pipe(takeUntil(this.destroy$)) + .pipe(takeUntilDestroyed()) .subscribe(() => this.updateView()); } - ngOnDestroy() { - this.destroy$.next(); - this.destroy$.complete(); - } - - registerOnTouched(fn: any): void { + registerOnTouched(_fn: any): void { } registerOnChange(fn: any): void { diff --git a/ui-ngx/src/app/modules/home/components/rule-node/common/relations-query-config-old.component.ts b/ui-ngx/src/app/modules/home/components/rule-node/common/relations-query-config-old.component.ts index e89cd249f8..261b2aadc3 100644 --- a/ui-ngx/src/app/modules/home/components/rule-node/common/relations-query-config-old.component.ts +++ b/ui-ngx/src/app/modules/home/components/rule-node/common/relations-query-config-old.component.ts @@ -14,13 +14,12 @@ /// limitations under the License. /// -import { Component, forwardRef, Input, OnInit } from '@angular/core'; +import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core'; import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms'; import { EntitySearchDirection, entitySearchDirectionTranslations, PageComponent } from '@shared/public-api'; -import { Store } from '@ngrx/store'; -import { AppState } from '@core/public-api'; import { coerceBooleanProperty } from '@angular/cdk/coercion'; import { RelationsQuery } from '../rule-node-config.models'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; @Component({ selector: 'tb-relations-query-config-old', @@ -56,9 +55,9 @@ export class RelationsQueryConfigOldComponent extends PageComponent implements C private propagateChange = null; - constructor(protected store: Store, - private fb: FormBuilder) { - super(store); + constructor(private fb: FormBuilder, + private destroyRef: DestroyRef) { + super(); } ngOnInit(): void { @@ -68,7 +67,9 @@ export class RelationsQueryConfigOldComponent extends PageComponent implements C maxLevel: [null, []], filters: [null] }); - this.relationsQueryFormGroup.valueChanges.subscribe((query: RelationsQuery) => { + this.relationsQueryFormGroup.valueChanges.pipe( + takeUntilDestroyed(this.destroyRef) + ).subscribe((query: RelationsQuery) => { if (this.relationsQueryFormGroup.valid) { this.propagateChange(query); } else { @@ -81,7 +82,7 @@ export class RelationsQueryConfigOldComponent extends PageComponent implements C this.propagateChange = fn; } - registerOnTouched(fn: any): void { + registerOnTouched(_fn: any): void { } setDisabledState(isDisabled: boolean): void { diff --git a/ui-ngx/src/app/modules/home/components/rule-node/common/relations-query-config.component.ts b/ui-ngx/src/app/modules/home/components/rule-node/common/relations-query-config.component.ts index d17e6f891f..5ed0eadbcc 100644 --- a/ui-ngx/src/app/modules/home/components/rule-node/common/relations-query-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/rule-node/common/relations-query-config.component.ts @@ -14,13 +14,12 @@ /// limitations under the License. /// -import { Component, forwardRef, Input, OnInit } from '@angular/core'; +import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core'; import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms'; import { EntitySearchDirection, entitySearchDirectionTranslations, PageComponent } from '@shared/public-api'; -import { Store } from '@ngrx/store'; -import { AppState } from '@core/public-api'; import { coerceBooleanProperty } from '@angular/cdk/coercion'; import { RelationsQuery } from '../rule-node-config.models'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; @Component({ selector: 'tb-relations-query-config', @@ -55,9 +54,9 @@ export class RelationsQueryConfigComponent extends PageComponent implements Cont private propagateChange = null; - constructor(protected store: Store, - private fb: FormBuilder) { - super(store); + constructor(private fb: FormBuilder, + private destroyRef: DestroyRef) { + super(); } ngOnInit(): void { @@ -67,7 +66,9 @@ export class RelationsQueryConfigComponent extends PageComponent implements Cont maxLevel: [null, [Validators.min(1)]], filters: [null] }); - this.relationsQueryFormGroup.valueChanges.subscribe((query: RelationsQuery) => { + this.relationsQueryFormGroup.valueChanges.pipe( + takeUntilDestroyed(this.destroyRef) + ).subscribe((query: RelationsQuery) => { if (this.relationsQueryFormGroup.valid) { this.propagateChange(query); } else { @@ -80,7 +81,7 @@ export class RelationsQueryConfigComponent extends PageComponent implements Cont this.propagateChange = fn; } - registerOnTouched(fn: any): void { + registerOnTouched(_fn: any): void { } setDisabledState(isDisabled: boolean): void { diff --git a/ui-ngx/src/app/modules/home/components/rule-node/common/select-attributes.component.ts b/ui-ngx/src/app/modules/home/components/rule-node/common/select-attributes.component.ts index fbfbb63a14..2bebd875ae 100644 --- a/ui-ngx/src/app/modules/home/components/rule-node/common/select-attributes.component.ts +++ b/ui-ngx/src/app/modules/home/components/rule-node/common/select-attributes.component.ts @@ -14,7 +14,7 @@ /// limitations under the License. /// -import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core'; +import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core'; import { ControlValueAccessor, FormBuilder, @@ -25,11 +25,10 @@ import { ValidatorFn, Validators } from '@angular/forms'; -import { takeUntil } from 'rxjs/operators'; -import { Subject } from 'rxjs'; import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes'; import { TranslateService } from '@ngx-translate/core'; import { isDefinedAndNotNull } from '@core/public-api'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; @Component({ selector: 'tb-select-attributes', @@ -46,10 +45,9 @@ import { isDefinedAndNotNull } from '@core/public-api'; }] }) -export class SelectAttributesComponent implements OnInit, ControlValueAccessor, OnDestroy { +export class SelectAttributesComponent implements OnInit, ControlValueAccessor { private propagateChange = (v: any) => { }; - private destroy$ = new Subject(); public attributeControlGroup: FormGroup; public separatorKeysCodes = [ENTER, COMMA, SEMICOLON]; @@ -58,7 +56,8 @@ export class SelectAttributesComponent implements OnInit, ControlValueAccessor, @Input() popupHelpLink: string; constructor(public translate: TranslateService, - private fb: FormBuilder) { + private fb: FormBuilder, + private destroyRef: DestroyRef) { } ngOnInit(): void { @@ -74,7 +73,7 @@ export class SelectAttributesComponent implements OnInit, ControlValueAccessor, }); this.attributeControlGroup.valueChanges.pipe( - takeUntil(this.destroy$) + takeUntilDestroyed(this.destroyRef) ).subscribe((value) => { this.propagateChange(this.preparePropagateValue(value)); }); @@ -88,7 +87,7 @@ export class SelectAttributesComponent implements OnInit, ControlValueAccessor, } else { formatValue[key] = isDefinedAndNotNull(propagateValue[key]) ? propagateValue[key] : []; } - }; + } return formatValue; }; @@ -131,9 +130,4 @@ export class SelectAttributesComponent implements OnInit, ControlValueAccessor, this.attributeControlGroup.enable({emitEvent: false}); } } - - ngOnDestroy(): void { - this.destroy$.next(null); - this.destroy$.complete(); - } } diff --git a/ui-ngx/src/app/modules/home/components/rule-node/common/sv-map-config.component.ts b/ui-ngx/src/app/modules/home/components/rule-node/common/sv-map-config.component.ts index df9d3f0b3d..0a836fc508 100644 --- a/ui-ngx/src/app/modules/home/components/rule-node/common/sv-map-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/rule-node/common/sv-map-config.component.ts @@ -14,13 +14,12 @@ /// limitations under the License. /// -import { Component, forwardRef, Injector, Input, OnDestroy, OnInit } from '@angular/core'; +import { Component, DestroyRef, forwardRef, Injector, Input, OnInit } from '@angular/core'; import { AbstractControl, ControlValueAccessor, FormArray, FormBuilder, - FormControl, FormGroup, NG_VALIDATORS, NG_VALUE_ACCESSOR, @@ -31,12 +30,10 @@ import { Validators } from '@angular/forms'; import { coerceBoolean, PageComponent } from '@shared/public-api'; -import { Store } from '@ngrx/store'; -import { AppState, isDefinedAndNotNull, isEqual } from '@core/public-api'; -import { Subject, Subscription } from 'rxjs'; +import { isDefinedAndNotNull, isEqual } from '@core/public-api'; import { TranslateService } from '@ngx-translate/core'; -import { takeUntil } from 'rxjs/operators'; import { OriginatorFieldsMappingValues, SvMapOption } from '../rule-node-config.models'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; @Component({ selector: 'tb-sv-map-config', @@ -55,10 +52,8 @@ import { OriginatorFieldsMappingValues, SvMapOption } from '../rule-node-config. } ] }) -export class SvMapConfigComponent extends PageComponent implements ControlValueAccessor, OnInit, Validator, OnDestroy { +export class SvMapConfigComponent extends PageComponent implements ControlValueAccessor, OnInit, Validator { - private destroy$ = new Subject(); - private sourceFieldSubcritption: Subscription[] = []; private propagateChange = null; svListFormGroup: FormGroup; @@ -92,11 +87,11 @@ export class SvMapConfigComponent extends PageComponent implements ControlValueA @coerceBoolean() required = false; - constructor(protected store: Store, - public translate: TranslateService, - public injector: Injector, - private fb: FormBuilder) { - super(store); + constructor(public translate: TranslateService, + private injector: Injector, + private fb: FormBuilder, + private destroyRef: DestroyRef) { + super(); } ngOnInit(): void { @@ -110,17 +105,12 @@ export class SvMapConfigComponent extends PageComponent implements ControlValueA }, {validators: [this.propagateNestedErrors, this.oneMapRequiredValidator]}); this.svListFormGroup.valueChanges - .pipe(takeUntil(this.destroy$)) + .pipe(takeUntilDestroyed(this.destroyRef)) .subscribe(() => { this.updateModel(); }); } - ngOnDestroy() { - this.destroy$.next(); - this.destroy$.complete(); - } - keyValsFormArray(): FormArray { return this.svListFormGroup.get('keyVals') as FormArray; } @@ -129,7 +119,7 @@ export class SvMapConfigComponent extends PageComponent implements ControlValueA this.propagateChange = fn; } - registerOnTouched(fn: any): void { + registerOnTouched(_fn: any): void { } setDisabledState(isDisabled: boolean): void { @@ -215,8 +205,6 @@ export class SvMapConfigComponent extends PageComponent implements ControlValueA public removeKeyVal(index: number) { this.keyValsFormArray().removeAt(index); - this.sourceFieldSubcritption[index].unsubscribe(); - this.sourceFieldSubcritption.splice(index, 1); } public addKeyVal() { @@ -228,15 +216,15 @@ export class SvMapConfigComponent extends PageComponent implements ControlValueA } private keyChangeSubscribe(formGroup: FormGroup) { - this.sourceFieldSubcritption.push(formGroup.get('key').valueChanges.pipe( - takeUntil(this.destroy$) + formGroup.get('key').valueChanges.pipe( + takeUntilDestroyed(this.destroyRef) ).subscribe((value) => { const mappedValue = OriginatorFieldsMappingValues.get(value); formGroup.get('value').patchValue(this.targetKeyPrefix + mappedValue[0].toUpperCase() + mappedValue.slice(1)); - })); + }); } - public validate(c: FormControl) { + public validate() { const svList: { key: string; value: string }[] = this.svListFormGroup.get('keyVals').value; if (!svList.length && this.required) { return { diff --git a/ui-ngx/src/app/shared/models/rule-node.models.ts b/ui-ngx/src/app/shared/models/rule-node.models.ts index 86e304b3df..471594f689 100644 --- a/ui-ngx/src/app/shared/models/rule-node.models.ts +++ b/ui-ngx/src/app/shared/models/rule-node.models.ts @@ -101,7 +101,7 @@ export abstract class RuleNodeConfigurationComponent extends PageComponent imple private configurationSet = false; private disabledValue = false; - private destroyRef = inject(DestroyRef); + protected destroyRef = inject(DestroyRef); set disabled(value: boolean) { if (this.disabledValue !== value) {