mpetrov
2 years ago
24 changed files with 1572 additions and 117 deletions
@ -0,0 +1,106 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2024 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-table mb-3"> |
|||
<div class="tb-form-table-header"> |
|||
<div class="tb-form-table-header-cell w-[17%]">{{ 'calculated-fields.argument-name' | translate }}</div> |
|||
<div class="tb-form-table-header-cell w-[35%]">{{ 'calculated-fields.datasource' | translate }}</div> |
|||
<div class="tb-form-table-header-cell w-[17%]">{{ 'common.type' | translate }}</div> |
|||
<div class="tb-form-table-header-cell w-[31%]">{{ 'entity.key' | translate }}</div> |
|||
</div> |
|||
<div class="tb-form-table-body tb-drop-list"> |
|||
@for (group of argumentsFormArray.controls; track group) { |
|||
<div [formGroup]="group" class="tb-form-table-row"> |
|||
<mat-form-field appearance="outline" class="tb-inline-field w-1/6" subscriptSizing="dynamic"> |
|||
<input matInput formControlName="argumentName" placeholder="{{ 'action.set' | translate }}"> |
|||
</mat-form-field> |
|||
@if (group.get('refEntityId')?.get('id').value) { |
|||
<ng-container [formGroup]="group.get('refEntityId')"> |
|||
<mat-form-field appearance="outline" class="tb-inline-field w-1/6" subscriptSizing="dynamic"> |
|||
<mat-select [value]="group.get('refEntityId').get('entityType').value" formControlName="entityType"> |
|||
<mat-option [value]="group.get('refEntityId').get('entityType').value"> |
|||
{{ entityTypeTranslations.get(group.get('refEntityId').get('entityType').value)?.type | translate }} |
|||
</mat-option> |
|||
</mat-select> |
|||
</mat-form-field> |
|||
<tb-entity-autocomplete |
|||
class="inline-entity-autocomplete w-1/6" |
|||
formControlName="id" |
|||
[withLabel]="false" |
|||
[placeholder]="'action.set' | translate" |
|||
[appearance]="'outline'" |
|||
[subscriptSizing]="'dynamic'" |
|||
[entityType]="group.get('refEntityId').get('entityType').value"/> |
|||
</ng-container> |
|||
} @else { |
|||
<mat-form-field appearance="outline" class="tb-inline-field w-[calc(33.3%+12px)]" subscriptSizing="dynamic"> |
|||
<mat-select [value]="'current'" [disabled]="true"> |
|||
<mat-option [value]="'current'"> |
|||
{{ (group.get('refEntityId')?.get('entityType').value === ArgumentEntityType.Tenant |
|||
? 'calculated-fields.argument-current-tenant' |
|||
: 'calculated-fields.argument-current') | translate }} |
|||
</mat-option> |
|||
</mat-select> |
|||
</mat-form-field> |
|||
} |
|||
<ng-container [formGroup]="group.get('refEntityKey')"> |
|||
<mat-form-field appearance="outline" class="tb-inline-field w-1/6" subscriptSizing="dynamic"> |
|||
<mat-select [value]="group.get('refEntityKey').get('type').value" formControlName="type"> |
|||
<mat-option [value]="group.get('refEntityKey').get('type').value"> |
|||
{{ ArgumentTypeTranslations.get(group.get('refEntityKey').get('type').value) | translate }} |
|||
</mat-option> |
|||
</mat-select> |
|||
</mat-form-field> |
|||
<mat-chip-listbox formControlName="key" class="tb-inline-field w-1/6"> |
|||
<mat-chip> |
|||
<div tbTruncateWithTooltip class="max-w-25"> |
|||
{{group.get('refEntityKey').get('key').value}} |
|||
</div> |
|||
</mat-chip> |
|||
</mat-chip-listbox> |
|||
</ng-container> |
|||
<div class="flex opacity-55"> |
|||
<button type="button" |
|||
mat-icon-button |
|||
#button |
|||
(click)="manageArgument($event, button, $index)" |
|||
[matTooltip]="'action.edit' | translate" |
|||
matTooltipPosition="above"> |
|||
<mat-icon>edit</mat-icon> |
|||
</button> |
|||
<button type="button" |
|||
mat-icon-button |
|||
(click)="onDelete($index)" |
|||
[matTooltip]="'action.delete' | translate" |
|||
matTooltipPosition="above"> |
|||
<mat-icon>delete</mat-icon> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
} @empty { |
|||
<span class="tb-prompt flex items-center justify-center">{{ 'calculated-fields.no-arguments' | translate }}</span> |
|||
} |
|||
</div> |
|||
@if (errorText) { |
|||
<tb-error noMargin [error]="errorText | translate" class="pl-3"/> |
|||
} |
|||
</div> |
|||
<div> |
|||
<button type="button" mat-stroked-button color="primary" #button (click)="manageArgument($event, button)"> |
|||
{{ 'calculated-fields.add-argument' | translate }} |
|||
</button> |
|||
</div> |
|||
@ -0,0 +1,32 @@ |
|||
/** |
|||
* Copyright © 2016-2024 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. |
|||
*/ |
|||
:host ::ng-deep { |
|||
.inline-entity-autocomplete { |
|||
.mat-mdc-form-field-infix { |
|||
padding-top: 8px; |
|||
padding-bottom: 8px; |
|||
min-height: 40px; |
|||
width: auto; |
|||
.mdc-text-field__input, .mat-mdc-select { |
|||
font-weight: 400; |
|||
line-height: 20px; |
|||
} |
|||
} |
|||
a { |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,213 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 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 { |
|||
ChangeDetectorRef, |
|||
Component, |
|||
DestroyRef, |
|||
effect, |
|||
forwardRef, |
|||
input, |
|||
Input, |
|||
Renderer2, |
|||
ViewContainerRef, |
|||
} from '@angular/core'; |
|||
import { |
|||
AbstractControl, |
|||
ControlValueAccessor, |
|||
FormBuilder, |
|||
NG_VALIDATORS, |
|||
NG_VALUE_ACCESSOR, |
|||
ValidationErrors, |
|||
Validator, |
|||
Validators |
|||
} from '@angular/forms'; |
|||
import { |
|||
ArgumentEntityType, |
|||
ArgumentType, |
|||
ArgumentTypeTranslations, |
|||
CalculatedFieldArgument, |
|||
CalculatedFieldArgumentValue, |
|||
CalculatedFieldType, |
|||
} from '@shared/models/calculated-field.models'; |
|||
import { |
|||
CalculatedFieldArgumentPanelComponent |
|||
} from '@home/components/calculated-fields/components/panel/calculated-field-argument-panel.component'; |
|||
import { MatButton } from '@angular/material/button'; |
|||
import { TbPopoverService } from '@shared/components/popover.service'; |
|||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; |
|||
import { EntityId } from '@shared/models/id/entity-id'; |
|||
import { EntityType, entityTypeTranslations } from '@shared/models/entity-type.models'; |
|||
import { isDefinedAndNotNull } from '@core/utils'; |
|||
import { noLeadTrailSpacesRegex } from '@shared/models/regex.constants'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-calculated-field-arguments-table', |
|||
templateUrl: './calculated-field-arguments-table.component.html', |
|||
styleUrls: [`calculated-field-arguments-table.component.scss`], |
|||
providers: [ |
|||
{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => CalculatedFieldArgumentsTableComponent), |
|||
multi: true |
|||
}, |
|||
{ |
|||
provide: NG_VALIDATORS, |
|||
useExisting: forwardRef(() => CalculatedFieldArgumentsTableComponent), |
|||
multi: true |
|||
} |
|||
], |
|||
}) |
|||
export class CalculatedFieldArgumentsTableComponent implements ControlValueAccessor, Validator { |
|||
|
|||
@Input() entityId: EntityId; |
|||
@Input() tenantId: string; |
|||
|
|||
calculatedFieldType = input<CalculatedFieldType>() |
|||
|
|||
errorText = ''; |
|||
argumentsFormArray = this.fb.array<AbstractControl>([]); |
|||
keysPopupClosed = true; |
|||
|
|||
readonly entityTypeTranslations = entityTypeTranslations; |
|||
readonly ArgumentTypeTranslations = ArgumentTypeTranslations; |
|||
readonly EntityType = EntityType; |
|||
readonly ArgumentEntityType = ArgumentEntityType; |
|||
|
|||
private onChange: (argumentsObj: Record<string, CalculatedFieldArgument>) => void = () => {}; |
|||
|
|||
constructor( |
|||
private fb: FormBuilder, |
|||
private popoverService: TbPopoverService, |
|||
private viewContainerRef: ViewContainerRef, |
|||
private destroyRef: DestroyRef, |
|||
private cd: ChangeDetectorRef, |
|||
private renderer: Renderer2 |
|||
) { |
|||
this.argumentsFormArray.valueChanges.pipe(takeUntilDestroyed()).subscribe(() => { |
|||
this.onChange(this.getArgumentsObject()); |
|||
}); |
|||
effect(() => this.calculatedFieldType() && this.argumentsFormArray.updateValueAndValidity()); |
|||
} |
|||
|
|||
registerOnChange(fn: (argumentsObj: Record<string, CalculatedFieldArgument>) => void): void { |
|||
this.onChange = fn; |
|||
} |
|||
|
|||
registerOnTouched(_): void {} |
|||
|
|||
validate(): ValidationErrors | null { |
|||
if (this.calculatedFieldType() === CalculatedFieldType.SIMPLE |
|||
&& this.argumentsFormArray.controls.some(control => control.get('refEntityKey').get('type').value === ArgumentType.Rolling)) { |
|||
this.errorText = 'calculated-fields.hint.arguments-simple-with-rolling'; |
|||
} else if (!this.argumentsFormArray.controls.length) { |
|||
this.errorText = 'calculated-fields.hint.arguments-empty'; |
|||
} else { |
|||
this.errorText = ''; |
|||
} |
|||
return this.errorText ? { argumentsFormArray: false } : null; |
|||
} |
|||
|
|||
private getArgumentsObject(): Record<string, CalculatedFieldArgument> { |
|||
return this.argumentsFormArray.controls.reduce((acc, control) => { |
|||
const rawValue = control.getRawValue(); |
|||
const { argumentName, ...argument } = rawValue as CalculatedFieldArgumentValue; |
|||
acc[argumentName] = argument; |
|||
return acc; |
|||
}, {} as Record<string, CalculatedFieldArgument>); |
|||
} |
|||
|
|||
writeValue(argumentsObj: Record<string, CalculatedFieldArgument>): void { |
|||
this.argumentsFormArray.clear(); |
|||
Object.keys(argumentsObj).forEach(key => { |
|||
this.argumentsFormArray.push(this.fb.group({ |
|||
argumentName: [key, [Validators.required, Validators.maxLength(255), Validators.pattern(noLeadTrailSpacesRegex)]], |
|||
...argumentsObj[key], |
|||
...(argumentsObj[key].refEntityId ? { |
|||
refEntityId: this.fb.group({ |
|||
entityType: [{ value: argumentsObj[key].refEntityId.entityType, disabled: true }], |
|||
id: [{ value: argumentsObj[key].refEntityId.id , disabled: true }], |
|||
}), |
|||
} : {}), |
|||
refEntityKey: this.fb.group({ |
|||
type: [{ value: argumentsObj[key].refEntityKey.type, disabled: true }], |
|||
key: [{ value: argumentsObj[key].refEntityKey.key, disabled: true }], |
|||
}), |
|||
}) as AbstractControl); |
|||
}); |
|||
} |
|||
|
|||
|
|||
manageArgument($event: Event, matButton: MatButton, index?: number): void { |
|||
$event?.stopPropagation(); |
|||
const trigger = matButton._elementRef.nativeElement; |
|||
if (this.popoverService.hasPopover(trigger)) { |
|||
this.popoverService.hidePopover(trigger); |
|||
} else { |
|||
const ctx = { |
|||
index, |
|||
argument: this.argumentsFormArray.at(index)?.getRawValue() ?? {}, |
|||
entityId: this.entityId, |
|||
calculatedFieldType: this.calculatedFieldType(), |
|||
buttonTitle: this.argumentsFormArray.at(index)?.value ? 'action.apply' : 'action.add', |
|||
tenantId: this.tenantId, |
|||
}; |
|||
this.keysPopupClosed = false; |
|||
const argumentsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer, |
|||
this.viewContainerRef, CalculatedFieldArgumentPanelComponent, 'leftBottom', false, null, |
|||
ctx, |
|||
{}, |
|||
{}, {}, true); |
|||
argumentsPanelPopover.tbComponentRef.instance.popover = argumentsPanelPopover; |
|||
argumentsPanelPopover.tbComponentRef.instance.argumentsDataApplied.subscribe(({ value, index }) => { |
|||
argumentsPanelPopover.hide(); |
|||
const formGroup = this.getArgumentFormGroup(value); |
|||
if (isDefinedAndNotNull(index)) { |
|||
this.argumentsFormArray.setControl(index, formGroup); |
|||
} else { |
|||
this.argumentsFormArray.push(formGroup); |
|||
} |
|||
this.argumentsFormArray.markAsDirty(); |
|||
this.cd.markForCheck(); |
|||
}); |
|||
argumentsPanelPopover.tbHideStart.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => { |
|||
this.keysPopupClosed = true; |
|||
}); |
|||
} |
|||
} |
|||
|
|||
getArgumentFormGroup(value: CalculatedFieldArgumentValue): AbstractControl { |
|||
return this.fb.group({ |
|||
...value, |
|||
argumentName: [value.argumentName, [Validators.required, Validators.maxLength(255), Validators.pattern(noLeadTrailSpacesRegex)]], |
|||
...(value.refEntityId ? { |
|||
refEntityId: this.fb.group({ |
|||
entityType: [{ value: value.refEntityId.entityType, disabled: true }], |
|||
id: [{ value: value.refEntityId.id , disabled: true }], |
|||
}), |
|||
} : {}), |
|||
refEntityKey: this.fb.group({ |
|||
type: [{ value: value.refEntityKey.type, disabled: true }], |
|||
key: [{ value: value.refEntityKey.key, disabled: true }], |
|||
}), |
|||
}) |
|||
} |
|||
|
|||
onDelete(index: number): void { |
|||
this.argumentsFormArray.removeAt(index); |
|||
this.argumentsFormArray.markAsDirty(); |
|||
} |
|||
} |
|||
@ -0,0 +1,169 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2024 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 [formGroup]="fieldFormGroup" class="h-full w-screen min-w-80 max-w-4xl"> |
|||
<mat-toolbar color="primary"> |
|||
<h2>{{ 'entity.type-calculated-field' | translate}}</h2> |
|||
<span class="flex-1"></span> |
|||
<div [tb-help]="helpLink"></div> |
|||
<button mat-icon-button |
|||
(click)="cancel()" |
|||
type="button"> |
|||
<mat-icon class="material-icons">close</mat-icon> |
|||
</button> |
|||
</mat-toolbar> |
|||
<div mat-dialog-content> |
|||
<div class="tb-form-panel no-border no-padding"> |
|||
<div class="tb-form-panel"> |
|||
<div class="tb-form-panel-title">{{ 'common.general' | translate }}</div> |
|||
<div class="flex items-center gap-2"> |
|||
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic"> |
|||
<mat-label>{{ 'entity-field.title' | translate }}</mat-label> |
|||
<input matInput maxlength="255" formControlName="name" required> |
|||
@if (fieldFormGroup.get('name').errors && fieldFormGroup.get('name').touched) { |
|||
<mat-error> |
|||
@if (fieldFormGroup.get('name').hasError('required')) { |
|||
{{ 'common.hint.name-required' | translate }} |
|||
} @else if (fieldFormGroup.get('name').hasError('pattern')) { |
|||
{{ 'common.hint.name-pattern' | translate }} |
|||
} @else if (fieldFormGroup.get('name').hasError('maxlength')) { |
|||
{{ 'common.hint.name-max-length' | translate }} |
|||
} |
|||
</mat-error> |
|||
} |
|||
</mat-form-field> |
|||
<tb-entity-debug-settings-button |
|||
formControlName="debugSettings" |
|||
[entityLabel]="'debug-settings.calculated-field' | translate" |
|||
[debugLimitsConfiguration]="data.debugLimitsConfiguration" |
|||
/> |
|||
</div> |
|||
<mat-form-field appearance="outline" subscriptSizing="dynamic"> |
|||
<mat-label>{{ 'common.type' | translate }}</mat-label> |
|||
<mat-select formControlName="type" required> |
|||
@for (type of fieldTypes; track type) { |
|||
<mat-option [value]="type">{{ CalculatedFieldTypeTranslations.get(type) | translate}}</mat-option> |
|||
} |
|||
</mat-select> |
|||
</mat-form-field> |
|||
</div> |
|||
<ng-container [formGroup]="configFormGroup"> |
|||
<div class="tb-form-panel"> |
|||
<div class="tb-form-panel-title">{{ 'calculated-fields.arguments' | translate }}</div> |
|||
<tb-calculated-field-arguments-table |
|||
formControlName="arguments" |
|||
[entityId]="data.entityId" |
|||
[tenantId]="data.tenantId" |
|||
[calculatedFieldType]="fieldFormGroup.get('type').valueChanges | async" |
|||
/> |
|||
</div> |
|||
<div class="tb-form-panel"> |
|||
<div class="tb-form-panel-title">{{ 'calculated-fields.expression' | translate }}*</div> |
|||
@if (fieldFormGroup.get('type').value === CalculatedFieldType.SIMPLE) { |
|||
<mat-form-field class="mat-block" appearance="outline"> |
|||
<input matInput formControlName="expressionSIMPLE" maxlength="255" [placeholder]="'action.set' | translate" required> |
|||
@if (configFormGroup.get('expressionSIMPLE').errors && configFormGroup.get('expressionSIMPLE').touched) { |
|||
<mat-error> |
|||
@if (configFormGroup.get('expressionSIMPLE').hasError('required')) { |
|||
{{ 'calculated-fields.hint.expression-required' | translate }} |
|||
} @else if (configFormGroup.get('expressionSIMPLE').hasError('pattern')) { |
|||
{{ 'calculated-fields.hint.expression-invalid' | translate }} |
|||
} @else if (configFormGroup.get('expressionSIMPLE').hasError('maxLength')) { |
|||
{{ 'calculated-fields.hint.expression-max-length' | translate }} |
|||
} |
|||
</mat-error> |
|||
} |
|||
</mat-form-field> |
|||
} @else { |
|||
<tb-js-func |
|||
required |
|||
formControlName="expressionSCRIPT" |
|||
functionName="calculate" |
|||
[functionArgs]="functionArgs$ | async" |
|||
[disableUndefinedCheck]="true" |
|||
[scriptLanguage]="ScriptLanguage.TBEL" |
|||
helpId="[TODO]: ADD VALID LINK HERE!!!" |
|||
/> |
|||
} |
|||
</div> |
|||
<div class="tb-form-panel" [formGroup]="outputFormGroup"> |
|||
<div class="tb-form-panel-title">{{ 'calculated-fields.output' | translate }}</div> |
|||
<div class="flex items-center gap-2"> |
|||
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic"> |
|||
<mat-label>{{ 'calculated-fields.output-type' | translate }}</mat-label> |
|||
<mat-select formControlName="type" required> |
|||
@for (type of outputTypes; track type) { |
|||
<mat-option [value]="type">{{ OutputTypeTranslations.get(type) | translate}}</mat-option> |
|||
} |
|||
</mat-select> |
|||
</mat-form-field> |
|||
@if (outputFormGroup.get('type').value === OutputType.Attribute) { |
|||
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic"> |
|||
<mat-label>{{ 'calculated-fields.output-type' | translate }}</mat-label> |
|||
<mat-select formControlName="scope" class="w-full"> |
|||
<mat-option [value]="AttributeScope.SERVER_SCOPE"> |
|||
{{ 'calculated-fields.server-attributes' | translate }} |
|||
</mat-option> |
|||
@if (data.entityId.entityType === EntityType.DEVICE) { |
|||
<mat-option [value]="AttributeScope.SHARED_SCOPE"> |
|||
{{ 'calculated-fields.shared-attributes' | translate }} |
|||
</mat-option> |
|||
} |
|||
</mat-select> |
|||
</mat-form-field> |
|||
} |
|||
</div> |
|||
@if (fieldFormGroup.get('type').value === CalculatedFieldType.SIMPLE) { |
|||
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic"> |
|||
<mat-label> |
|||
{{ (outputFormGroup.get('type').value === OutputType.Timeseries |
|||
? 'calculated-fields.timeseries-key' |
|||
: 'calculated-fields.attribute-key') |
|||
| translate }} |
|||
</mat-label> |
|||
<input matInput formControlName="name" required> |
|||
@if (outputFormGroup.get('name').errors && outputFormGroup.get('name').touched) { |
|||
<mat-error> |
|||
@if (outputFormGroup.get('name').hasError('required')) { |
|||
{{ 'common.hint.key-required' | translate }} |
|||
} @else if (outputFormGroup.get('name').hasError('pattern')) { |
|||
{{ 'common.hint.key-pattern' | translate }} |
|||
} @else if (outputFormGroup.get('name').hasError('maxlength')) { |
|||
{{ 'common.hint.key-max-length' | translate }} |
|||
} |
|||
</mat-error> |
|||
} |
|||
</mat-form-field> |
|||
} |
|||
</div> |
|||
</ng-container> |
|||
</div> |
|||
</div> |
|||
<div mat-dialog-actions class="justify-end"> |
|||
<button mat-button color="primary" |
|||
type="button" |
|||
cdkFocusInitial |
|||
(click)="cancel()"> |
|||
{{ 'action.cancel' | translate }} |
|||
</button> |
|||
<button mat-raised-button color="primary" |
|||
(click)="add()" |
|||
[disabled]="fieldFormGroup.invalid || !fieldFormGroup.dirty"> |
|||
{{ data.buttonTitle | translate }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,122 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 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, Inject } from '@angular/core'; |
|||
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { FormGroup, UntypedFormBuilder, Validators } from '@angular/forms'; |
|||
import { Router } from '@angular/router'; |
|||
import { DialogComponent } from '@shared/components/dialog.component'; |
|||
import { helpBaseUrl } from '@shared/models/constants'; |
|||
import { |
|||
CalculatedField, |
|||
CalculatedFieldConfiguration, |
|||
CalculatedFieldDialogData, |
|||
CalculatedFieldType, |
|||
CalculatedFieldTypeTranslations, |
|||
OutputType, |
|||
OutputTypeTranslations |
|||
} from '@shared/models/calculated-field.models'; |
|||
import { noLeadTrailSpacesRegex } from '@shared/models/regex.constants'; |
|||
import { AttributeScope } from '@shared/models/telemetry/telemetry.models'; |
|||
import { EntityType } from '@shared/models/entity-type.models'; |
|||
import { map } from 'rxjs/operators'; |
|||
import { isObject } from '@core/utils'; |
|||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; |
|||
import { ScriptLanguage } from '@shared/models/rule-node.models'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-calculated-field-dialog', |
|||
templateUrl: './calculated-field-dialog.component.html', |
|||
}) |
|||
export class CalculatedFieldDialogComponent extends DialogComponent<CalculatedFieldDialogComponent, CalculatedField> { |
|||
|
|||
fieldFormGroup = this.fb.group({ |
|||
name: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex), Validators.maxLength(255)]], |
|||
type: [CalculatedFieldType.SIMPLE, [Validators.required]], |
|||
debugSettings: [], |
|||
configuration: this.fb.group({ |
|||
arguments: [{}], |
|||
expressionSIMPLE: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex), Validators.maxLength(255)]], |
|||
expressionSCRIPT: [], |
|||
output: this.fb.group({ |
|||
name: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex), Validators.maxLength(255)]], |
|||
scope: [{ value: AttributeScope.SERVER_SCOPE, disabled: true }], |
|||
type: [OutputType.Timeseries] |
|||
}), |
|||
}), |
|||
}); |
|||
|
|||
functionArgs$ = this.fieldFormGroup.get('configuration').valueChanges |
|||
.pipe( |
|||
map(configuration => isObject(configuration?.arguments) ? Object.keys(configuration.arguments) : []) |
|||
); |
|||
|
|||
readonly OutputTypeTranslations = OutputTypeTranslations; |
|||
readonly OutputType = OutputType; |
|||
readonly AttributeScope = AttributeScope; |
|||
readonly EntityType = EntityType; |
|||
readonly CalculatedFieldType = CalculatedFieldType; |
|||
readonly ScriptLanguage = ScriptLanguage; |
|||
readonly helpLink = `${helpBaseUrl}/[TODO: ADD VALID LINK!!!]`; |
|||
readonly fieldTypes = Object.values(CalculatedFieldType) as CalculatedFieldType[]; |
|||
readonly outputTypes = Object.values(OutputType) as OutputType[]; |
|||
readonly CalculatedFieldTypeTranslations = CalculatedFieldTypeTranslations; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
protected router: Router, |
|||
@Inject(MAT_DIALOG_DATA) public data: CalculatedFieldDialogData, |
|||
public dialogRef: MatDialogRef<CalculatedFieldDialogComponent, CalculatedField>, |
|||
public fb: UntypedFormBuilder) { |
|||
super(store, router, dialogRef); |
|||
this.applyDialogData(); |
|||
this.outputFormGroup.get('type').valueChanges |
|||
.pipe(takeUntilDestroyed()) |
|||
.subscribe(type => this.toggleScopeByOutputType(type)); |
|||
this.toggleScopeByOutputType(this.outputFormGroup.get('type').value); |
|||
} |
|||
|
|||
get configFormGroup(): FormGroup { |
|||
return this.fieldFormGroup.get('configuration') as FormGroup; |
|||
} |
|||
|
|||
get outputFormGroup(): FormGroup { |
|||
return this.fieldFormGroup.get('configuration').get('output') as FormGroup; |
|||
} |
|||
|
|||
cancel(): void { |
|||
this.dialogRef.close(null); |
|||
} |
|||
|
|||
add(): void { |
|||
if (this.fieldFormGroup.valid) { |
|||
const { configuration, type, ...rest } = this.fieldFormGroup.value; |
|||
const { expressionSIMPLE, expressionSCRIPT, ...restConfig } = configuration; |
|||
this.dialogRef.close({ configuration: { ...restConfig, type, expression: configuration['expression'+type] }, ...rest, type }); |
|||
} |
|||
} |
|||
|
|||
private applyDialogData(): void { |
|||
const { configuration = {}, type = CalculatedFieldType.SIMPLE, ...value } = this.data.value; |
|||
const { expression, ...restConfig } = configuration as CalculatedFieldConfiguration; |
|||
this.fieldFormGroup.patchValue({ configuration: { ...restConfig, ['expression'+type]: expression }, ...value }); |
|||
} |
|||
|
|||
private toggleScopeByOutputType(type: OutputType): void { |
|||
this.outputFormGroup.get('scope')[type === OutputType.Attribute? 'enable' : 'disable']({emitEvent: false}); |
|||
} |
|||
} |
|||
@ -0,0 +1,198 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2024 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="w-screen max-w-xl" [formGroup]="argumentFormGroup"> |
|||
<div class="tb-form-panel no-border no-padding mb-2"> |
|||
<div class="tb-form-panel-title">{{ 'calculated-fields.argument-settings' | translate }}</div> |
|||
<div class="tb-form-panel no-border no-padding"> |
|||
<div class="tb-form-row"> |
|||
<div class="fixed-title-width tb-required">{{ 'calculated-fields.argument-name' | translate }}</div> |
|||
<div class="tb-flex no-gap"> |
|||
<mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic"> |
|||
<input matInput name="value" formControlName="argumentName" maxlength="255" placeholder="{{ 'action.set' | translate }}"/> |
|||
@if (argumentFormGroup.get('argumentName').hasError('required') && argumentFormGroup.get('argumentName').touched) { |
|||
<mat-icon matSuffix |
|||
matTooltipPosition="above" |
|||
matTooltipClass="tb-error-tooltip" |
|||
[matTooltip]="'calculated-fields.hint.argument-name-required' | translate" |
|||
class="tb-error"> |
|||
warning |
|||
</mat-icon> |
|||
} @else if (argumentFormGroup.get('argumentName').hasError('pattern') && argumentFormGroup.get('argumentName').touched) { |
|||
<mat-icon matSuffix |
|||
matTooltipPosition="above" |
|||
matTooltipClass="tb-error-tooltip" |
|||
[matTooltip]="'calculated-fields.hint.argument-name-pattern' | translate" |
|||
class="tb-error"> |
|||
warning |
|||
</mat-icon> |
|||
} @else if (argumentFormGroup.get('argumentName').hasError('maxlength') && argumentFormGroup.get('argumentName').touched) { |
|||
<mat-icon matSuffix |
|||
matTooltipPosition="above" |
|||
matTooltipClass="tb-error-tooltip" |
|||
[matTooltip]="'calculated-fields.hint.argument-name-max-length' | translate" |
|||
class="tb-error"> |
|||
warning |
|||
</mat-icon> |
|||
} |
|||
</mat-form-field> |
|||
</div> |
|||
</div> |
|||
<ng-container [formGroup]="refEntityIdFormGroup"> |
|||
<div class="tb-form-row"> |
|||
<div class="fixed-title-width tb-required">{{ 'entity.entity-type' | translate }}</div> |
|||
<mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic"> |
|||
<mat-select formControlName="entityType"> |
|||
@for (type of argumentEntityTypes; track type) { |
|||
<mat-option [value]="type">{{ ArgumentEntityTypeTranslations.get(type) | translate }}</mat-option> |
|||
} |
|||
</mat-select> |
|||
</mat-form-field> |
|||
</div> |
|||
@if (entityType === ArgumentEntityType.Device || entityType === ArgumentEntityType.Asset) { |
|||
<div class="tb-form-row"> |
|||
<div class="fixed-title-width tb-required">{{ 'calculated-fields.device-name' | translate }}</div> |
|||
<tb-entity-autocomplete |
|||
class="entity-autocomplete w-full" |
|||
formControlName="id" |
|||
[withLabel]="false" |
|||
[placeholder]="'action.set' | translate" |
|||
[appearance]="'outline'" |
|||
[required]="true" |
|||
[iconError]="true" |
|||
[subscriptSizing]="'dynamic'" |
|||
[entityType]="EntityType.DEVICE" |
|||
/> |
|||
</div> |
|||
} @else if (entityType === ArgumentEntityType.Customer) { |
|||
<div class="tb-form-row"> |
|||
<div class="fixed-title-width tb-required">{{ 'calculated-fields.customer-name' | translate }}</div> |
|||
<tb-entity-autocomplete |
|||
class="entity-autocomplete w-full" |
|||
formControlName="id" |
|||
[withLabel]="false" |
|||
[placeholder]="'action.set' | translate" |
|||
[appearance]="'outline'" |
|||
[iconError]="true" |
|||
[required]="true" |
|||
[subscriptSizing]="'dynamic'" |
|||
[entityType]="EntityType.CUSTOMER" |
|||
/> |
|||
</div> |
|||
} |
|||
</ng-container> |
|||
<ng-container [formGroup]="refEntityKeyFormGroup"> |
|||
<div class="tb-form-row"> |
|||
<div class="fixed-title-width tb-required">{{ 'calculated-fields.argument-type' | translate }}</div> |
|||
<mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic"> |
|||
<mat-select formControlName="type"> |
|||
@for (type of argumentTypes; track type) { |
|||
<mat-option [value]="type">{{ ArgumentTypeTranslations.get(type) | translate }}</mat-option> |
|||
} |
|||
</mat-select> |
|||
@if (refEntityKeyFormGroup.get('type').hasError('required') && refEntityKeyFormGroup.get('type').touched) { |
|||
<mat-icon matSuffix |
|||
matTooltipPosition="above" |
|||
matTooltipClass="tb-error-tooltip" |
|||
[matTooltip]="'calculated-fields.hint.argument-type-required' | translate" |
|||
class="tb-error"> |
|||
warning |
|||
</mat-icon> |
|||
} |
|||
</mat-form-field> |
|||
</div> |
|||
@if (refEntityKeyFormGroup.get('type').value !== ArgumentType.Attribute) { |
|||
<div class="tb-form-row"> |
|||
<div class="fixed-title-width tb-required">{{ 'calculated-fields.timeseries-key' | translate }}</div> |
|||
<tb-entity-key-autocomplete formControlName="key" [dataKeyType]="DataKeyType.timeseries" [entityFilter]="entityFilter"/> |
|||
</div> |
|||
} @else { |
|||
<div class="tb-form-row"> |
|||
<div class="fixed-title-width tb-required">{{ 'calculated-fields.attribute-scope' | translate }}</div> |
|||
<mat-form-field appearance="outline" subscriptSizing="dynamic"> |
|||
<mat-select formControlName="scope" class="w-full"> |
|||
<mat-option [value]="AttributeScope.SERVER_SCOPE"> |
|||
{{ 'calculated-fields.server-attributes' | translate }} |
|||
</mat-option> |
|||
@if ((keyEntityType$ | async) === EntityType.DEVICE) { |
|||
<mat-option [value]="AttributeScope.CLIENT_SCOPE"> |
|||
{{ 'calculated-fields.client-attributes' | translate }} |
|||
</mat-option> |
|||
<mat-option [value]="AttributeScope.SHARED_SCOPE"> |
|||
{{ 'calculated-fields.shared-attributes' | translate }} |
|||
</mat-option> |
|||
} |
|||
</mat-select> |
|||
</mat-form-field> |
|||
</div> |
|||
<div class="tb-form-row"> |
|||
<div class="fixed-title-width tb-required">{{ 'calculated-fields.attribute-key' | translate }}</div> |
|||
<tb-entity-key-autocomplete |
|||
formControlName="key" |
|||
[dataKeyType]="DataKeyType.attribute" |
|||
[entityFilter]="entityFilter" |
|||
[keyScopeType]="argumentFormGroup.get('refEntityKey').get('scope').value" |
|||
/> |
|||
</div> |
|||
} |
|||
</ng-container> |
|||
@if (refEntityKeyFormGroup.get('type').value !== ArgumentType.Rolling) { |
|||
<div class="tb-form-row"> |
|||
<div class="fixed-title-width">{{ 'calculated-fields.default-value' | translate }}</div> |
|||
<div class="tb-flex no-gap"> |
|||
<mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic"> |
|||
<input matInput autocomplete="off" name="value" formControlName="defaultValue" placeholder="{{ 'action.set' | translate }}"/> |
|||
</mat-form-field> |
|||
</div> |
|||
</div> |
|||
} @else { |
|||
<div class="tb-form-row"> |
|||
<div class="fixed-title-width">{{ 'calculated-fields.time-window' | translate }}</div> |
|||
<div class="tb-flex no-gap"> |
|||
<mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic"> |
|||
<input matInput type="number" min="0" name="value" formControlName="timeWindow" placeholder="{{ 'action.set' | translate }}"/> |
|||
<span class="block pr-2" matSuffix>{{ 'common.suffix.ms' | translate }}</span> |
|||
</mat-form-field> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-row"> |
|||
<div class="fixed-title-width">{{ 'calculated-fields.limit' | translate }}</div> |
|||
<div class="tb-flex no-gap"> |
|||
<mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic"> |
|||
<input matInput type="number" min="0" name="value" formControlName="limit" placeholder="{{ 'action.set' | translate }}"/> |
|||
</mat-form-field> |
|||
</div> |
|||
</div> |
|||
} |
|||
</div> |
|||
</div> |
|||
<div class="tb-flex flex-end"> |
|||
<button mat-button |
|||
color="primary" |
|||
type="button" |
|||
(click)="cancel()"> |
|||
{{ 'action.cancel' | translate }} |
|||
</button> |
|||
<button mat-raised-button |
|||
color="primary" |
|||
type="button" |
|||
(click)="saveArgument()" |
|||
[disabled]="argumentFormGroup.invalid || !argumentFormGroup.dirty"> |
|||
{{ buttonTitle | translate }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,29 @@ |
|||
/** |
|||
* Copyright © 2016-2024 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. |
|||
*/ |
|||
:host { |
|||
.mat-mdc-form-field { |
|||
width: 100%; |
|||
} |
|||
} |
|||
|
|||
:host ::ng-deep { |
|||
.entity-autocomplete { |
|||
.mat-mdc-form-field { |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
@ -0,0 +1,201 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 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, ElementRef, Input, OnInit, output, ViewChild } from '@angular/core'; |
|||
import { TbPopoverComponent } from '@shared/components/popover.component'; |
|||
import { PageComponent } from '@shared/components/page.component'; |
|||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
|||
import { noLeadTrailSpacesRegex } from '@shared/models/regex.constants'; |
|||
import { |
|||
ArgumentEntityType, |
|||
ArgumentEntityTypeTranslations, |
|||
ArgumentType, |
|||
ArgumentTypeTranslations, |
|||
CalculatedFieldArgumentValue, |
|||
CalculatedFieldType |
|||
} from '@shared/models/calculated-field.models'; |
|||
import { debounceTime, delay, distinctUntilChanged, filter, map, startWith } from 'rxjs/operators'; |
|||
import { EntityType } from '@shared/models/entity-type.models'; |
|||
import { AttributeScope, DataKeyType } from '@shared/models/telemetry/telemetry.models'; |
|||
import { DatasourceType } from '@shared/models/widget.models'; |
|||
import { EntityId } from '@shared/models/id/entity-id'; |
|||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; |
|||
import { EntityFilter } from '@shared/models/query/query.models'; |
|||
import { AliasFilterType } from '@shared/models/alias.models'; |
|||
import { merge } from 'rxjs'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-calculated-field-argument-panel', |
|||
templateUrl: './calculated-field-argument-panel.component.html', |
|||
styleUrls: ['./calculated-field-argument-panel.component.scss'] |
|||
}) |
|||
export class CalculatedFieldArgumentPanelComponent extends PageComponent implements OnInit { |
|||
|
|||
@Input() popover: TbPopoverComponent<CalculatedFieldArgumentPanelComponent>; |
|||
@Input() buttonTitle: string; |
|||
@Input() index: number; |
|||
@Input() argument: CalculatedFieldArgumentValue; |
|||
@Input() entityId: EntityId; |
|||
@Input() tenantId: string; |
|||
@Input() calculatedFieldType: CalculatedFieldType; |
|||
|
|||
@ViewChild('timeseriesInput') timeseriesInput: ElementRef; |
|||
|
|||
argumentsDataApplied = output<{ value: CalculatedFieldArgumentValue, index: number }>(); |
|||
|
|||
argumentFormGroup = this.fb.group({ |
|||
argumentName: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex), Validators.maxLength(255)]], |
|||
refEntityId: this.fb.group({ |
|||
entityType: [ArgumentEntityType.Current], |
|||
id: [''] |
|||
}), |
|||
refEntityKey: this.fb.group({ |
|||
type: [ArgumentType.LatestTelemetry, [Validators.required]], |
|||
key: [''], |
|||
scope: [{ value: AttributeScope.SERVER_SCOPE, disabled: true }], |
|||
}), |
|||
defaultValue: ['', [Validators.pattern(noLeadTrailSpacesRegex)]], |
|||
limit: [null], |
|||
timeWindow: [null], |
|||
}); |
|||
|
|||
argumentTypes: ArgumentType[]; |
|||
entityFilter: EntityFilter; |
|||
keyEntityType$ = this.refEntityIdFormGroup.get('entityType').valueChanges |
|||
.pipe( |
|||
startWith(this.refEntityIdFormGroup.get('entityType').value), |
|||
map(type => type === ArgumentEntityType.Current ? this.entityId.entityType : type) |
|||
); |
|||
|
|||
readonly argumentEntityTypes = Object.values(ArgumentEntityType) as ArgumentEntityType[]; |
|||
readonly ArgumentEntityTypeTranslations = ArgumentEntityTypeTranslations; |
|||
readonly ArgumentType = ArgumentType; |
|||
readonly DataKeyType = DataKeyType; |
|||
readonly EntityType = EntityType; |
|||
readonly datasourceType = DatasourceType; |
|||
readonly ArgumentTypeTranslations = ArgumentTypeTranslations; |
|||
readonly AttributeScope = AttributeScope; |
|||
|
|||
constructor( |
|||
private fb: FormBuilder, |
|||
) { |
|||
super(); |
|||
|
|||
this.observeEntityFilterChanges(); |
|||
this.observeEntityTypeChanges() |
|||
this.observeEntityKeyChanges(); |
|||
} |
|||
|
|||
get entityType(): ArgumentEntityType { |
|||
return this.argumentFormGroup.get('refEntityId').get('entityType').value; |
|||
} |
|||
|
|||
get refEntityIdFormGroup(): FormGroup { |
|||
return this.argumentFormGroup.get('refEntityId') as FormGroup; |
|||
} |
|||
|
|||
get refEntityKeyFormGroup(): FormGroup { |
|||
return this.argumentFormGroup.get('refEntityKey') as FormGroup; |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.argumentFormGroup.patchValue(this.argument, {emitEvent: false}); |
|||
this.updateEntityFilter(this.argument.refEntityId?.entityType, true); |
|||
this.toggleByEntityKeyType(this.argument.refEntityKey?.type); |
|||
this.setInitialEntityKeyType(); |
|||
|
|||
this.argumentTypes = Object.values(ArgumentType) |
|||
.filter(type => type !== ArgumentType.Rolling || this.calculatedFieldType === CalculatedFieldType.SCRIPT); |
|||
} |
|||
|
|||
saveArgument(): void { |
|||
this.argumentsDataApplied.emit({ value: this.argumentFormGroup.value as CalculatedFieldArgumentValue, index: this.index }); |
|||
} |
|||
|
|||
cancel(): void { |
|||
this.popover.hide(); |
|||
} |
|||
|
|||
private toggleByEntityKeyType(type: ArgumentType): void { |
|||
const isAttribute = type === ArgumentType.Attribute; |
|||
const isRolling = type === ArgumentType.Rolling; |
|||
this.argumentFormGroup.get('refEntityKey').get('scope')[isAttribute? 'enable' : 'disable']({ emitEvent: false }); |
|||
this.argumentFormGroup.get('limit')[isRolling? 'enable' : 'disable']({ emitEvent: false }); |
|||
this.argumentFormGroup.get('timeWindow')[isRolling? 'enable' : 'disable']({ emitEvent: false }); |
|||
this.argumentFormGroup.get('defaultValue')[isRolling? 'disable' : 'enable']({ emitEvent: false }); |
|||
} |
|||
|
|||
private updateEntityFilter(entityType: ArgumentEntityType, onInit = false): void { |
|||
let entityId: EntityId; |
|||
switch (entityType) { |
|||
case ArgumentEntityType.Current: |
|||
entityId = this.entityId |
|||
break; |
|||
case ArgumentEntityType.Tenant: |
|||
entityId = { |
|||
id: this.tenantId, |
|||
entityType: EntityType.TENANT |
|||
}; |
|||
break; |
|||
default: |
|||
entityId = this.argumentFormGroup.get('refEntityId').value as any; |
|||
} |
|||
if (onInit) { |
|||
this.argumentFormGroup.get('refEntityKey').get('key').setValue(''); |
|||
} |
|||
this.entityFilter = { |
|||
type: AliasFilterType.singleEntity, |
|||
singleEntity: entityId, |
|||
}; |
|||
} |
|||
|
|||
private observeEntityFilterChanges(): void { |
|||
merge( |
|||
this.argumentFormGroup.get('refEntityId').get('entityType').valueChanges, |
|||
this.argumentFormGroup.get('refEntityId').get('id').valueChanges.pipe(filter(Boolean)), |
|||
this.argumentFormGroup.get('refEntityKey').get('scope').valueChanges, |
|||
) |
|||
.pipe(debounceTime(300), delay(50), takeUntilDestroyed()) |
|||
.subscribe(() => this.updateEntityFilter(this.entityType)); |
|||
} |
|||
|
|||
private observeEntityTypeChanges(): void { |
|||
this.argumentFormGroup.get('refEntityId').get('entityType').valueChanges |
|||
.pipe(distinctUntilChanged(), takeUntilDestroyed()) |
|||
.subscribe(type => { |
|||
this.argumentFormGroup.get('refEntityId').get('id').setValue(''); |
|||
this.argumentFormGroup.get('refEntityId') |
|||
.get('id')[type === ArgumentEntityType.Tenant || type === ArgumentEntityType.Current ? 'disable' : 'enable'](); |
|||
}); |
|||
} |
|||
|
|||
private observeEntityKeyChanges(): void { |
|||
this.argumentFormGroup.get('refEntityKey').get('type').valueChanges |
|||
.pipe(takeUntilDestroyed()) |
|||
.subscribe(type => this.toggleByEntityKeyType(type)); |
|||
} |
|||
|
|||
private setInitialEntityKeyType(): void { |
|||
if (this.calculatedFieldType === CalculatedFieldType.SIMPLE && this.argument.refEntityKey?.type === ArgumentType.Rolling) { |
|||
const typeControl = this.argumentFormGroup.get('refEntityKey').get('type'); |
|||
typeControl.setValue(null); |
|||
typeControl.markAsTouched(); |
|||
typeControl.updateValueAndValidity(); |
|||
} |
|||
} |
|||
|
|||
protected readonly ArgumentEntityType = ArgumentEntityType; |
|||
} |
|||
@ -0,0 +1,18 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 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.
|
|||
///
|
|||
|
|||
export * from './dialog/calculated-field-dialog.component'; |
|||
export * from './arguments-table/calculated-field-arguments-table.component'; |
|||
@ -0,0 +1,39 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2024 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. |
|||
|
|||
--> |
|||
<mat-form-field class="tb-flex no-gap !w-full" appearance="outline" subscriptSizing="dynamic"> |
|||
<input matInput type="text" placeholder="{{ 'entity.key-name' | translate }}" |
|||
#keyInput |
|||
[formControl]="keyControl" |
|||
required |
|||
(focusin)="keyInputSubject.next()" |
|||
[matAutocomplete]="keysAutocomplete"> |
|||
@if (keyControl.value) { |
|||
<button type="button" |
|||
matSuffix mat-icon-button aria-label="Clear" |
|||
(click)="clear()"> |
|||
<mat-icon class="material-icons">close</mat-icon> |
|||
</button> |
|||
} |
|||
<mat-autocomplete |
|||
class="tb-autocomplete" |
|||
#keysAutocomplete="matAutocomplete"> |
|||
@for (key of filteredKeys$ | async; track key) { |
|||
<mat-option [value]="key"><span [innerHTML]="key | highlight: searchText"></span></mat-option> |
|||
} |
|||
</mat-autocomplete> |
|||
</mat-form-field> |
|||
@ -0,0 +1,134 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 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, effect, ElementRef, forwardRef, input, ViewChild, } from '@angular/core'; |
|||
import { |
|||
ControlValueAccessor, |
|||
FormBuilder, |
|||
NG_VALIDATORS, |
|||
NG_VALUE_ACCESSOR, |
|||
ValidationErrors, |
|||
Validator, |
|||
Validators |
|||
} from '@angular/forms'; |
|||
import { map, startWith, switchMap } from 'rxjs/operators'; |
|||
import { combineLatest, of, Subject } from 'rxjs'; |
|||
import { EntityService } from '@core/http/entity.service'; |
|||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; |
|||
import { AttributeScope, DataKeyType } from '@shared/models/telemetry/telemetry.models'; |
|||
import { EntitiesKeysByQuery } from '@shared/models/entity.models'; |
|||
import { EntityFilter } from '@shared/models/query/query.models'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-entity-key-autocomplete', |
|||
templateUrl: './entity-key-autocomplete.component.html', |
|||
providers: [ |
|||
{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => EntityKeyAutocompleteComponent), |
|||
multi: true |
|||
}, |
|||
{ |
|||
provide: NG_VALIDATORS, |
|||
useExisting: forwardRef(() => EntityKeyAutocompleteComponent), |
|||
multi: true |
|||
} |
|||
], |
|||
host: { |
|||
class: 'w-full' |
|||
} |
|||
}) |
|||
export class EntityKeyAutocompleteComponent implements ControlValueAccessor, Validator { |
|||
|
|||
@ViewChild('keyInput') keyInput: ElementRef; |
|||
|
|||
entityFilter = input.required<EntityFilter>(); |
|||
dataKeyType = input.required<DataKeyType>(); |
|||
keyScopeType = input<AttributeScope>(); |
|||
|
|||
keyControl = this.fb.control('', [Validators.required]); |
|||
searchText = ''; |
|||
keyInputSubject = new Subject<void>(); |
|||
|
|||
private onChange: (value: string) => void; |
|||
private cachedResult: EntitiesKeysByQuery; |
|||
|
|||
keys$ = this.keyInputSubject.asObservable() |
|||
.pipe( |
|||
switchMap(() => { |
|||
return this.cachedResult ? of(this.cachedResult) : this.entityService.findEntityKeysByQuery({ |
|||
pageLink: { page: 0, pageSize: 100 }, |
|||
entityFilter: this.entityFilter(), |
|||
}, this.dataKeyType() === DataKeyType.attribute, this.dataKeyType() === DataKeyType.timeseries, this.keyScopeType()); |
|||
}), |
|||
map(result => { |
|||
this.cachedResult = result; |
|||
switch (this.dataKeyType()) { |
|||
case DataKeyType.attribute: |
|||
return result.attribute; |
|||
case DataKeyType.timeseries: |
|||
return result.timeseries; |
|||
default: |
|||
return []; |
|||
} |
|||
}), |
|||
); |
|||
|
|||
filteredKeys$ = combineLatest([this.keys$, this.keyControl.valueChanges.pipe(startWith(''))]) |
|||
.pipe( |
|||
map(([keys, searchText = '']) => { |
|||
this.searchText = searchText; |
|||
return searchText ? keys.filter(item => item.toLowerCase().includes(searchText.toLowerCase())) : keys; |
|||
}) |
|||
); |
|||
|
|||
constructor( |
|||
private fb: FormBuilder, |
|||
private entityService: EntityService, |
|||
) { |
|||
this.keyControl.valueChanges |
|||
.pipe(takeUntilDestroyed()) |
|||
.subscribe(value => this.onChange(value)); |
|||
effect(() => { |
|||
if (this.keyScopeType() || this.entityFilter() && this.dataKeyType()) { |
|||
this.cachedResult = null; |
|||
this.searchText = ''; |
|||
} |
|||
}); |
|||
} |
|||
|
|||
clear(): void { |
|||
this.keyControl.patchValue('', {emitEvent: true}); |
|||
setTimeout(() => { |
|||
this.keyInput.nativeElement.blur(); |
|||
this.keyInput.nativeElement.focus(); |
|||
}, 0); |
|||
} |
|||
|
|||
registerOnChange(onChange: (value: string) => void): void { |
|||
this.onChange = onChange; |
|||
} |
|||
|
|||
registerOnTouched(_): void {} |
|||
|
|||
validate(): ValidationErrors | null { |
|||
return this.keyControl.valid ? null : { keyControl: false }; |
|||
} |
|||
|
|||
writeValue(value: string): void { |
|||
this.keyControl.patchValue(value, {emitEvent: false}); |
|||
} |
|||
} |
|||
@ -0,0 +1,17 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 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.
|
|||
///
|
|||
|
|||
export const noLeadTrailSpacesRegex = /^\S+(?: \S+)*$/; |
|||
Loading…
Reference in new issue