Vladyslav Prykhodko
10 months ago
committed by
GitHub
GitHub
16 changed files with 519 additions and 76 deletions
@ -0,0 +1,77 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2025 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. |
|||
|
|||
--> |
|||
<div class="tb-form-panel no-border no-gap no-padding" [formGroup]="filterPredicateValueNoDataFormGroup"> |
|||
<div class="tb-form-row no-padding no-border column-xs"> |
|||
<mat-form-field hideRequiredMarker class="flex-1 w-full max-w-30% xs:max-w-full" appearance="outline" subscriptSizing="dynamic"> |
|||
<mat-select [formControl]="dynamicModeControl" placeholder="{{'filter.dynamic-source-type' | translate}}"> |
|||
<mat-option [value]="false">{{'alarm-rule.static' | translate}}</mat-option> |
|||
<mat-option [value]="true">{{'alarm-rule.dynamic' | translate}}</mat-option> |
|||
</mat-select> |
|||
</mat-form-field> |
|||
<ng-container formGroupName="duration"> |
|||
@if (!dynamicModeControl.value) { |
|||
<mat-form-field hideRequiredMarker class="flex-1" appearance="outline" subscriptSizing="dynamic"> |
|||
<input required type="number" matInput formControlName="staticValue" min="1" |
|||
placeholder="{{'filter.value' | translate}}"> |
|||
@if (filterPredicateValueNoDataFormGroup.get('duration.staticValue').touched && filterPredicateValueNoDataFormGroup.get('duration.staticValue').errors) { |
|||
<mat-icon matSuffix |
|||
matTooltipPosition="above" |
|||
matTooltipClass="tb-error-tooltip" |
|||
[matTooltip]="(filterPredicateValueNoDataFormGroup.get('duration.staticValue').hasError('required') ? 'alarm-rule.value-required' : 'alarm-rule.min-value') | translate" |
|||
class="tb-error"> |
|||
warning |
|||
</mat-icon> |
|||
} |
|||
</mat-form-field> |
|||
} @else { |
|||
<mat-form-field class="flex-1 w-full" appearance="outline" subscriptSizing="dynamic"> |
|||
<mat-select formControlName="dynamicValueArgument" placeholder="{{ 'action.set' | translate }}"> |
|||
@for (argument of argumentsList; track argument) { |
|||
<mat-option [value]="argument" [disabled]="argument === argumentInUse">{{ argument }}</mat-option> |
|||
} |
|||
</mat-select> |
|||
@if (filterPredicateValueNoDataFormGroup.get('duration.dynamicValueArgument').touched && filterPredicateValueNoDataFormGroup.get('duration.dynamicValueArgument').errors) { |
|||
<mat-icon matSuffix |
|||
matTooltipPosition="above" |
|||
matTooltipClass="tb-error-tooltip" |
|||
[matTooltip]="(filterPredicateValueNoDataFormGroup.get('duration.dynamicValueArgument').hasError('required') ? 'calculated-fields.hint.argument-name-required' : 'alarm-rule.argument-in-use') | translate" |
|||
class="tb-error !block"> |
|||
warning |
|||
</mat-icon> |
|||
} |
|||
@if (filterPredicateValueNoDataFormGroup.get('duration.dynamicValueArgument').hasError('argumentInUse')) { |
|||
<mat-icon matSuffix |
|||
matTooltipPosition="above" |
|||
matTooltipClass="tb-error-tooltip" |
|||
[matTooltip]="'alarm-rule.argument-in-use' | translate" |
|||
class="tb-error !block"> |
|||
warning |
|||
</mat-icon> |
|||
} |
|||
</mat-form-field> |
|||
} |
|||
</ng-container> |
|||
<mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic"> |
|||
<mat-select formControlName="unit" required placeholder="{{'alarm-rule.time-unit' | translate}}"> |
|||
<mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit"> |
|||
{{ timeUnitsTranslationMap.get(timeUnit) | translate }} |
|||
</mat-option> |
|||
</mat-select> |
|||
</mat-form-field> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,159 @@ |
|||
///
|
|||
/// Copyright © 2016-2025 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, DestroyRef, forwardRef, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'; |
|||
import { |
|||
ControlValueAccessor, |
|||
FormBuilder, |
|||
NG_VALIDATORS, |
|||
NG_VALUE_ACCESSOR, |
|||
ValidationErrors, |
|||
Validator, |
|||
Validators |
|||
} from '@angular/forms'; |
|||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; |
|||
import { CalculatedFieldArgument } from "@shared/models/calculated-field.models"; |
|||
import { TimeUnit, timeUnitTranslations } from "@home/components/rule-node/rule-node-config.models"; |
|||
import { AlarmRuleFilterPredicateType, NoDataAlarmRuleFilterPredicate } from "@shared/models/alarm-rule.models"; |
|||
|
|||
@Component({ |
|||
selector: 'tb-alarm-rule-filter-predicate-no-data-value', |
|||
templateUrl: './alarm-rule-filter-predicate-no-data-value.component.html', |
|||
styleUrls: [], |
|||
providers: [ |
|||
{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => AlarmRuleFilterPredicateNoDataValueComponent), |
|||
multi: true |
|||
}, |
|||
{ |
|||
provide: NG_VALIDATORS, |
|||
useExisting: forwardRef(() => AlarmRuleFilterPredicateNoDataValueComponent), |
|||
multi: true |
|||
} |
|||
] |
|||
}) |
|||
export class AlarmRuleFilterPredicateNoDataValueComponent implements ControlValueAccessor, Validator, OnInit, OnChanges { |
|||
|
|||
@Input() |
|||
arguments: Record<string, CalculatedFieldArgument>; |
|||
|
|||
@Input() |
|||
valueType: AlarmRuleFilterPredicateType; |
|||
|
|||
@Input() |
|||
argumentInUse: string; |
|||
|
|||
valueTypeEnum = AlarmRuleFilterPredicateType; |
|||
|
|||
filterPredicateValueNoDataFormGroup = this.fb.group({ |
|||
type: ['NO_DATA'], |
|||
unit: [TimeUnit.MINUTES, Validators.required], |
|||
duration: this.fb.group({ |
|||
staticValue: [null as null | number, [Validators.required, Validators.min(1)]], |
|||
dynamicValueArgument: ['', Validators.required] |
|||
}) |
|||
}); |
|||
|
|||
timeUnits = [TimeUnit.MINUTES, TimeUnit.HOURS, TimeUnit.DAYS]; |
|||
timeUnitsTranslationMap = timeUnitTranslations; |
|||
|
|||
|
|||
dynamicModeControl = this.fb.control(false); |
|||
|
|||
argumentsList: Array<string>; |
|||
|
|||
private propagateChange= (v: any) => { }; |
|||
|
|||
constructor(private fb: FormBuilder, |
|||
private destroyRef: DestroyRef) { |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.argumentsList = this.arguments ? Object.keys(this.arguments): []; |
|||
this.filterPredicateValueNoDataFormGroup.valueChanges.pipe( |
|||
takeUntilDestroyed(this.destroyRef) |
|||
).subscribe(() => { |
|||
this.updateModel(); |
|||
}); |
|||
this.dynamicModeControl.valueChanges.pipe( |
|||
takeUntilDestroyed(this.destroyRef) |
|||
).subscribe(value => this.updateValueModeValidators(value)); |
|||
} |
|||
|
|||
ngOnChanges(changes: SimpleChanges) { |
|||
if (changes.argumentInUse) { |
|||
const argumentInUseChanges = changes.argumentInUse; |
|||
if (!argumentInUseChanges.firstChange && argumentInUseChanges.currentValue !== argumentInUseChanges.previousValue) { |
|||
if (this.dynamicModeControl.value) { |
|||
if (this.argumentInUse === this.filterPredicateValueNoDataFormGroup.get('duration.dynamicValueArgument').value) { |
|||
this.filterPredicateValueNoDataFormGroup.get('duration.dynamicValueArgument').setErrors({argumentInUse: true}); |
|||
this.filterPredicateValueNoDataFormGroup.updateValueAndValidity(); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
setDisabledState(isDisabled: boolean): void { |
|||
if (isDisabled) { |
|||
this.filterPredicateValueNoDataFormGroup.disable({emitEvent: false}); |
|||
this.dynamicModeControl.disable({emitEvent: false}); |
|||
} else { |
|||
this.filterPredicateValueNoDataFormGroup.enable({emitEvent: false}); |
|||
this.dynamicModeControl.enable({emitEvent: false}); |
|||
this.updateValueModeValidators(this.dynamicModeControl.value); |
|||
} |
|||
} |
|||
|
|||
private updateValueModeValidators(isDynamicMode: boolean): void { |
|||
if (isDynamicMode) { |
|||
this.filterPredicateValueNoDataFormGroup.get('duration.staticValue').disable({emitEvent: false}); |
|||
this.filterPredicateValueNoDataFormGroup.get('duration.dynamicValueArgument').enable(); |
|||
setTimeout(()=> { |
|||
if (this.filterPredicateValueNoDataFormGroup.get('duration.dynamicValueArgument').value && this.argumentInUse === this.filterPredicateValueNoDataFormGroup.get('dynamicValueArgument').value) { |
|||
this.filterPredicateValueNoDataFormGroup.get('duration.dynamicValueArgument').setErrors({argumentInUse: true}); |
|||
this.filterPredicateValueNoDataFormGroup.updateValueAndValidity(); |
|||
} |
|||
}, 0); |
|||
} else { |
|||
this.filterPredicateValueNoDataFormGroup.get('duration.dynamicValueArgument').disable({emitEvent: false}); |
|||
this.filterPredicateValueNoDataFormGroup.get('duration.staticValue').enable(); |
|||
} |
|||
} |
|||
|
|||
registerOnChange(fn: any): void { |
|||
this.propagateChange = fn; |
|||
} |
|||
|
|||
registerOnTouched(fn: any): void { |
|||
} |
|||
|
|||
validate(): ValidationErrors | null { |
|||
return this.filterPredicateValueNoDataFormGroup.valid ? null : { |
|||
filterPredicateValue: {valid: false} |
|||
}; |
|||
} |
|||
|
|||
writeValue(predicateValue: NoDataAlarmRuleFilterPredicate): void { |
|||
this.filterPredicateValueNoDataFormGroup.patchValue(predicateValue, {emitEvent: false}); |
|||
this.dynamicModeControl.patchValue(!!predicateValue?.duration?.dynamicValueArgument?.length, {emitEvent: false}); |
|||
} |
|||
|
|||
private updateModel() { |
|||
this.propagateChange(this.filterPredicateValueNoDataFormGroup.value); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue