Igor Kulikov
2 years ago
44 changed files with 2772 additions and 1297 deletions
@ -0,0 +1,212 @@ |
|||
///
|
|||
/// 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, DestroyRef, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core'; |
|||
import { TbPopoverComponent } from '@shared/components/popover.component'; |
|||
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; |
|||
import { ValueType } from '@shared/models/constants'; |
|||
import { |
|||
FormProperty, |
|||
formPropertyFieldClasses, |
|||
formPropertyRowClasses, |
|||
FormPropertyType, |
|||
formPropertyTypes, |
|||
formPropertyTypeTranslations, |
|||
FormSelectItem |
|||
} from '@shared/models/dynamic-form.models'; |
|||
import { |
|||
defaultPropertyValue |
|||
} from '@home/components/widget/lib/settings/common/dynamic-form/dynamic-form-property-row.component'; |
|||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-dynamic-form-property-panel', |
|||
templateUrl: './dynamic-form-property-panel.component.html', |
|||
styleUrls: ['./dynamic-form-property-panel.component.scss'], |
|||
encapsulation: ViewEncapsulation.None |
|||
}) |
|||
export class DynamicFormPropertyPanelComponent implements OnInit { |
|||
|
|||
ValueType = ValueType; |
|||
|
|||
FormPropertyType = FormPropertyType; |
|||
|
|||
formPropertyTypes = formPropertyTypes; |
|||
formPropertyTypeTranslations = formPropertyTypeTranslations; |
|||
|
|||
formPropertyRowClasses = formPropertyRowClasses; |
|||
|
|||
formPropertyFieldClasses = formPropertyFieldClasses; |
|||
|
|||
@Input() |
|||
isAdd = false; |
|||
|
|||
@Input() |
|||
property: FormProperty; |
|||
|
|||
@Input() |
|||
booleanPropertyIds: string[]; |
|||
|
|||
@Input() |
|||
disabled: boolean; |
|||
|
|||
@Input() |
|||
popover: TbPopoverComponent<DynamicFormPropertyPanelComponent>; |
|||
|
|||
@Output() |
|||
propertySettingsApplied = new EventEmitter<FormProperty>(); |
|||
|
|||
panelTitle: string; |
|||
|
|||
propertyFormGroup: UntypedFormGroup; |
|||
|
|||
private propertyType: FormPropertyType; |
|||
|
|||
constructor(private fb: UntypedFormBuilder, |
|||
private destroyRef: DestroyRef) { |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.panelTitle = this.isAdd ? 'dynamic-form.property.add-property' : 'dynamic-form.property.property-settings'; |
|||
this.propertyType = this.property.type; |
|||
this.propertyFormGroup = this.fb.group( |
|||
{ |
|||
id: [this.property.id, [Validators.required]], |
|||
name: [this.property.name, [Validators.required]], |
|||
group: [this.property.group, []], |
|||
type: [this.property.type, [Validators.required]], |
|||
default: [this.property.default, []], |
|||
required: [this.property.required, []], |
|||
subLabel: [this.property.subLabel, []], |
|||
divider: [this.property.divider, []], |
|||
fieldSuffix: [this.property.fieldSuffix, []], |
|||
disableOnProperty: [this.property.disableOnProperty, []], |
|||
condition: [this.property.condition, []], |
|||
rowClass: [(this.property.rowClass || '').split(' '), []], |
|||
fieldClass: [(this.property.fieldClass || '').split(' '), []], |
|||
min: [this.property.min, []], |
|||
max: [this.property.max, []], |
|||
step: [this.property.step, [Validators.min(0)]], |
|||
properties: [this.property.properties, []], |
|||
multiple: [this.property.multiple, []], |
|||
items: [this.property.items, []] |
|||
} |
|||
); |
|||
if (this.disabled) { |
|||
this.propertyFormGroup.disable({emitEvent: false}); |
|||
} else { |
|||
this.propertyFormGroup.get('type').valueChanges.pipe( |
|||
takeUntilDestroyed(this.destroyRef) |
|||
).subscribe(() => { |
|||
this.updateValidators(); |
|||
}); |
|||
|
|||
this.propertyFormGroup.get('items').valueChanges.pipe( |
|||
takeUntilDestroyed(this.destroyRef) |
|||
).subscribe(() => { |
|||
this.onSelectItemsChange(); |
|||
}); |
|||
this.propertyFormGroup.get('multiple').valueChanges.pipe( |
|||
takeUntilDestroyed(this.destroyRef) |
|||
).subscribe(() => { |
|||
this.onMultipleSelectChange(); |
|||
}); |
|||
this.updateValidators(); |
|||
} |
|||
} |
|||
|
|||
cancel() { |
|||
this.popover?.hide(); |
|||
} |
|||
|
|||
applyPropertySettings() { |
|||
const property = this.propertyFormGroup.getRawValue(); |
|||
property.rowClass = (property.rowClass || []).join(' '); |
|||
property.fieldClass = (property.fieldClass || []).join(' '); |
|||
this.propertySettingsApplied.emit(property); |
|||
} |
|||
|
|||
private updateValidators() { |
|||
const type: FormPropertyType = this.propertyFormGroup.get('type').value; |
|||
if (type === FormPropertyType.number) { |
|||
this.propertyFormGroup.get('min').enable({emitEvent: false}); |
|||
this.propertyFormGroup.get('max').enable({emitEvent: false}); |
|||
this.propertyFormGroup.get('step').enable({emitEvent: false}); |
|||
} else { |
|||
this.propertyFormGroup.get('min').disable({emitEvent: false}); |
|||
this.propertyFormGroup.get('max').disable({emitEvent: false}); |
|||
this.propertyFormGroup.get('step').disable({emitEvent: false}); |
|||
} |
|||
if (type === FormPropertyType.fieldset) { |
|||
this.propertyFormGroup.get('default').disable({emitEvent: false}); |
|||
this.propertyFormGroup.get('properties').enable({emitEvent: false}); |
|||
} else { |
|||
this.propertyFormGroup.get('default').enable({emitEvent: false}); |
|||
this.propertyFormGroup.get('properties').disable({emitEvent: false}); |
|||
} |
|||
if (type === FormPropertyType.select) { |
|||
this.propertyFormGroup.get('multiple').enable({emitEvent: false}); |
|||
this.propertyFormGroup.get('items').enable({emitEvent: false}); |
|||
} else { |
|||
this.propertyFormGroup.get('multiple').disable({emitEvent: false}); |
|||
this.propertyFormGroup.get('items').disable({emitEvent: false}); |
|||
} |
|||
if (this.propertyType !== type) { |
|||
const defaultValue = defaultPropertyValue(type); |
|||
this.propertyFormGroup.get('default').patchValue(defaultValue, {emitEvent: false}); |
|||
this.propertyType = type; |
|||
} |
|||
} |
|||
|
|||
private onSelectItemsChange() { |
|||
const type: FormPropertyType = this.propertyFormGroup.get('type').value; |
|||
const multiple: boolean = this.propertyFormGroup.get('multiple').value; |
|||
const defaultValue: any = this.propertyFormGroup.get('default').value; |
|||
const items: FormSelectItem[] = this.propertyFormGroup.get('items').value; |
|||
if (defaultValue && type === FormPropertyType.select) { |
|||
if (multiple) { |
|||
let targetValue: any[] = defaultValue; |
|||
targetValue = targetValue.filter(valItem => !!items.find(item => item.value === valItem)); |
|||
this.propertyFormGroup.get('default').patchValue(targetValue, {emitEvent: false}); |
|||
} else { |
|||
if (!items.find(item => item.value === defaultValue)) { |
|||
this.propertyFormGroup.get('default').patchValue(null, {emitEvent: false}); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
private onMultipleSelectChange() { |
|||
const type: FormPropertyType = this.propertyFormGroup.get('type').value; |
|||
const multiple: boolean = this.propertyFormGroup.get('multiple').value; |
|||
const defaultValue: any = this.propertyFormGroup.get('default').value; |
|||
if (type === FormPropertyType.select) { |
|||
if (multiple) { |
|||
if (defaultValue && !Array.isArray(defaultValue)) { |
|||
const newVal = [defaultValue]; |
|||
this.propertyFormGroup.get('default').patchValue(newVal, {emitEvent: false}); |
|||
} |
|||
} else { |
|||
if (defaultValue && Array.isArray(defaultValue)) { |
|||
const newVal = defaultValue.length ? defaultValue[0] : null; |
|||
setTimeout(() => { |
|||
this.propertyFormGroup.get('default').patchValue(newVal, {emitEvent: false}); |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,37 @@ |
|||
<!-- |
|||
|
|||
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]="selectItemRowFormGroup" class="tb-form-table-row tb-dynamic-form-select-item-row"> |
|||
<tb-value-input class="tb-value-field" |
|||
shortBooleanField |
|||
[allowedValueTypes]="[ValueType.STRING, ValueType.INTEGER, ValueType.DOUBLE, ValueType.BOOLEAN]" |
|||
formControlName="value"> |
|||
</tb-value-input> |
|||
<mat-form-field class="tb-inline-field tb-label-field" appearance="outline" subscriptSizing="dynamic"> |
|||
<input required matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}"> |
|||
</mat-form-field> |
|||
<div class="tb-form-table-row-cell-buttons"> |
|||
<button *ngIf="!disabled" |
|||
type="button" |
|||
mat-icon-button |
|||
(click)="selectItemRemoved.emit()" |
|||
matTooltip="{{ 'dynamic-form.property.remove-option' | translate }}" |
|||
matTooltipPosition="above"> |
|||
<mat-icon>delete</mat-icon> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,23 @@ |
|||
/** |
|||
* 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. |
|||
*/ |
|||
.tb-dynamic-form-select-item-row { |
|||
.tb-value-field { |
|||
flex: 1 1 70%; |
|||
} |
|||
.tb-label-field { |
|||
flex: 1 1 30%; |
|||
} |
|||
} |
|||
@ -0,0 +1,172 @@ |
|||
///
|
|||
/// 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, |
|||
EventEmitter, |
|||
forwardRef, |
|||
Input, |
|||
OnInit, |
|||
Output, |
|||
ViewEncapsulation |
|||
} from '@angular/core'; |
|||
import { |
|||
ControlValueAccessor, |
|||
NG_VALIDATORS, |
|||
NG_VALUE_ACCESSOR, |
|||
UntypedFormBuilder, |
|||
UntypedFormControl, |
|||
UntypedFormGroup, |
|||
Validator, |
|||
ValidatorFn, |
|||
Validators |
|||
} from '@angular/forms'; |
|||
import { isDefinedAndNotNull } from '@core/utils'; |
|||
import { FormSelectItem } from '@shared/models/dynamic-form.models'; |
|||
import { |
|||
DynamicFormSelectItemsComponent |
|||
} from '@home/components/widget/lib/settings/common/dynamic-form/dynamic-form-select-items.component'; |
|||
import { TimeSeriesChartStateSourceType } from '@home/components/widget/lib/chart/time-series-chart.models'; |
|||
import { ValueType } from '@shared/models/constants'; |
|||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; |
|||
|
|||
export const selectItemValid = (item: FormSelectItem): boolean => isDefinedAndNotNull(item.value) && !!item.label; |
|||
|
|||
@Component({ |
|||
selector: 'tb-dynamic-form-select-item-row', |
|||
templateUrl: './dynamic-form-select-item-row.component.html', |
|||
styleUrls: ['./dynamic-form-select-item-row.component.scss'], |
|||
providers: [ |
|||
{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => DynamicFormSelectItemRowComponent), |
|||
multi: true |
|||
}, |
|||
{ |
|||
provide: NG_VALIDATORS, |
|||
useExisting: forwardRef(() => DynamicFormSelectItemRowComponent), |
|||
multi: true |
|||
} |
|||
], |
|||
encapsulation: ViewEncapsulation.None |
|||
}) |
|||
export class DynamicFormSelectItemRowComponent implements ControlValueAccessor, OnInit, Validator { |
|||
|
|||
ValueType = ValueType; |
|||
|
|||
@Input() |
|||
disabled: boolean; |
|||
|
|||
@Input() |
|||
index: number; |
|||
|
|||
@Output() |
|||
selectItemRemoved = new EventEmitter(); |
|||
|
|||
selectItemRowFormGroup: UntypedFormGroup; |
|||
|
|||
modelValue: FormSelectItem; |
|||
|
|||
private propagateChange = (_val: any) => {}; |
|||
|
|||
constructor(private fb: UntypedFormBuilder, |
|||
private destroyRef: DestroyRef, |
|||
private cd: ChangeDetectorRef, |
|||
private selectItemsComponent: DynamicFormSelectItemsComponent) { |
|||
} |
|||
|
|||
ngOnInit() { |
|||
this.selectItemRowFormGroup = this.fb.group({ |
|||
value: [null, [this.selectItemValueValidator()]], |
|||
label: [null, [Validators.required]] |
|||
}); |
|||
this.selectItemRowFormGroup.valueChanges.pipe( |
|||
takeUntilDestroyed(this.destroyRef) |
|||
).subscribe( |
|||
() => this.updateModel() |
|||
); |
|||
} |
|||
|
|||
registerOnChange(fn: any): void { |
|||
this.propagateChange = fn; |
|||
} |
|||
|
|||
registerOnTouched(fn: any): void { |
|||
} |
|||
|
|||
setDisabledState(isDisabled: boolean): void { |
|||
this.disabled = isDisabled; |
|||
if (isDisabled) { |
|||
this.selectItemRowFormGroup.disable({emitEvent: false}); |
|||
} else { |
|||
this.selectItemRowFormGroup.enable({emitEvent: false}); |
|||
} |
|||
} |
|||
|
|||
writeValue(value: FormSelectItem): void { |
|||
this.modelValue = value; |
|||
this.selectItemRowFormGroup.patchValue( |
|||
{ |
|||
value: value?.value, |
|||
label: value?.label |
|||
}, {emitEvent: false} |
|||
); |
|||
this.cd.markForCheck(); |
|||
} |
|||
|
|||
public validate(c: UntypedFormControl) { |
|||
const valueControl = this.selectItemRowFormGroup.get('value'); |
|||
if (valueControl.hasError('itemValueNotUnique')) { |
|||
valueControl.updateValueAndValidity({onlySelf: false, emitEvent: false}); |
|||
} |
|||
if (valueControl.hasError('itemValueNotUnique')) { |
|||
this.selectItemRowFormGroup.get('value').markAsTouched(); |
|||
return { |
|||
itemValueNotUnique: true |
|||
}; |
|||
} |
|||
const item: FormSelectItem = {...this.modelValue, ...this.selectItemRowFormGroup.value}; |
|||
if (!selectItemValid(item)) { |
|||
return { |
|||
selectItem: true |
|||
}; |
|||
} |
|||
return null; |
|||
} |
|||
|
|||
private selectItemValueValidator(): ValidatorFn { |
|||
return control => { |
|||
if (!control.value) { |
|||
return { |
|||
required: true |
|||
}; |
|||
} |
|||
if (!this.selectItemsComponent.selectItemValueUnique(control.value, this.index)) { |
|||
return { |
|||
itemValueNotUnique: true |
|||
}; |
|||
} |
|||
return null; |
|||
}; |
|||
} |
|||
|
|||
private updateModel() { |
|||
const value: FormSelectItem = this.selectItemRowFormGroup.value; |
|||
this.modelValue = {...this.modelValue, ...value}; |
|||
this.propagateChange(this.modelValue); |
|||
} |
|||
} |
|||
@ -0,0 +1,61 @@ |
|||
<!-- |
|||
|
|||
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-panel tb-dynamic-form-select-items no-border no-padding"> |
|||
<div class="tb-form-table"> |
|||
<div class="tb-form-table-header" [class.no-padding-right]="!disabled"> |
|||
<div class="tb-form-table-header-cell tb-value-header" translate>dynamic-form.property.value</div> |
|||
<div class="tb-form-table-header-cell tb-label-header" translate>dynamic-form.property.label</div> |
|||
<div class="tb-form-table-header-cell tb-actions-header" [class.disabled]="disabled"></div> |
|||
</div> |
|||
<div *ngIf="selectItemsFormArray().controls.length; else noSelectItems" class="tb-form-table-body tb-drop-list" |
|||
cdkDropList cdkDropListOrientation="vertical" |
|||
[cdkDropListDisabled]="!dragEnabled" |
|||
(cdkDropListDropped)="selectItemDrop($event)"> |
|||
<div cdkDrag [cdkDragDisabled]="!dragEnabled" |
|||
[class.tb-draggable-form-table-row]="!disabled" |
|||
*ngFor="let selectItemControl of selectItemsFormArray().controls; trackBy: trackBySelectItem; let $index = index;"> |
|||
<tb-dynamic-form-select-item-row class="flex-1" |
|||
[index]="$index" |
|||
[formControl]="selectItemControl" |
|||
(selectItemRemoved)="removeSelectItem($index)"> |
|||
</tb-dynamic-form-select-item-row> |
|||
<div class="tb-form-table-row-cell-buttons"> |
|||
<button mat-icon-button |
|||
*ngIf="!disabled" |
|||
type="button" |
|||
cdkDragHandle |
|||
[class.tb-hidden]="!dragEnabled" |
|||
matTooltip="{{ 'action.drag' | translate }}" |
|||
matTooltipPosition="above"> |
|||
<mat-icon>drag_indicator</mat-icon> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<tb-error *ngIf="errorText" noMargin [error]="errorText" style="padding-left: 12px;"></tb-error> |
|||
</div> |
|||
<div *ngIf="!disabled"> |
|||
<button type="button" mat-stroked-button color="primary" (click)="addSelectItem()"> |
|||
{{ 'dynamic-form.property.add-option' | translate }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
|
|||
<ng-template #noSelectItems> |
|||
<span class="tb-prompt flex items-center justify-center">{{ 'dynamic-form.property.no-options' | translate }}</span> |
|||
</ng-template> |
|||
@ -0,0 +1,43 @@ |
|||
/** |
|||
* 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. |
|||
*/ |
|||
.tb-dynamic-form-select-items { |
|||
flex: 1; |
|||
.tb-form-table-header-cell { |
|||
&.tb-value-header { |
|||
flex: 1 1 70%; |
|||
} |
|||
&.tb-label-header { |
|||
flex: 1 1 30%; |
|||
} |
|||
&.tb-actions-header { |
|||
width: 80px; |
|||
min-width: 80px; |
|||
&.disabled { |
|||
width: 0; |
|||
min-width: 0; |
|||
} |
|||
} |
|||
} |
|||
.tb-form-table { |
|||
overflow: hidden; |
|||
} |
|||
.tb-form-table-body { |
|||
overflow: auto; |
|||
tb-dynamic-form-select-item-row { |
|||
overflow: hidden; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,204 @@ |
|||
///
|
|||
/// 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, DestroyRef, |
|||
forwardRef, |
|||
HostBinding, |
|||
Input, |
|||
OnInit, |
|||
QueryList, |
|||
ViewChildren, |
|||
ViewEncapsulation |
|||
} from '@angular/core'; |
|||
import { |
|||
AbstractControl, |
|||
ControlValueAccessor, |
|||
NG_VALIDATORS, |
|||
NG_VALUE_ACCESSOR, |
|||
UntypedFormArray, |
|||
UntypedFormBuilder, |
|||
UntypedFormControl, |
|||
UntypedFormGroup, |
|||
Validator |
|||
} from '@angular/forms'; |
|||
import { CdkDragDrop } from '@angular/cdk/drag-drop'; |
|||
import { TranslateService } from '@ngx-translate/core'; |
|||
import { FormSelectItem } from '@shared/models/dynamic-form.models'; |
|||
import { |
|||
DynamicFormSelectItemRowComponent, |
|||
selectItemValid |
|||
} from '@home/components/widget/lib/settings/common/dynamic-form/dynamic-form-select-item-row.component'; |
|||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-dynamic-form-select-items', |
|||
templateUrl: './dynamic-form-select-items.component.html', |
|||
styleUrls: ['./dynamic-form-select-items.component.scss'], |
|||
providers: [ |
|||
{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => DynamicFormSelectItemsComponent), |
|||
multi: true |
|||
}, |
|||
{ |
|||
provide: NG_VALIDATORS, |
|||
useExisting: forwardRef(() => DynamicFormSelectItemsComponent), |
|||
multi: true |
|||
} |
|||
], |
|||
encapsulation: ViewEncapsulation.None |
|||
}) |
|||
export class DynamicFormSelectItemsComponent implements ControlValueAccessor, OnInit, Validator { |
|||
|
|||
@HostBinding('style.display') styleDisplay = 'flex'; |
|||
@HostBinding('style.overflow') styleOverflow = 'hidden'; |
|||
|
|||
@ViewChildren(DynamicFormSelectItemRowComponent) |
|||
selectItemRows: QueryList<DynamicFormSelectItemRowComponent>; |
|||
|
|||
@Input() |
|||
disabled: boolean; |
|||
|
|||
selectItemsFormGroup: UntypedFormGroup; |
|||
|
|||
errorText = ''; |
|||
|
|||
get dragEnabled(): boolean { |
|||
return !this.disabled && this.selectItemsFormArray().controls.length > 1; |
|||
} |
|||
|
|||
private propagateChange = (_val: any) => {}; |
|||
|
|||
constructor(private fb: UntypedFormBuilder, |
|||
private destroyRef: DestroyRef, |
|||
private translate: TranslateService) { |
|||
} |
|||
|
|||
ngOnInit() { |
|||
this.selectItemsFormGroup = this.fb.group({ |
|||
selectItems: this.fb.array([]) |
|||
}); |
|||
this.selectItemsFormGroup.valueChanges.pipe( |
|||
takeUntilDestroyed(this.destroyRef) |
|||
).subscribe( |
|||
() => { |
|||
let items: FormSelectItem[] = this.selectItemsFormGroup.get('selectItems').value; |
|||
if (items) { |
|||
items = items.filter(i => selectItemValid(i)); |
|||
} |
|||
this.propagateChange(items); |
|||
} |
|||
); |
|||
} |
|||
|
|||
registerOnChange(fn: any): void { |
|||
this.propagateChange = fn; |
|||
} |
|||
|
|||
registerOnTouched(fn: any): void { |
|||
} |
|||
|
|||
setDisabledState(isDisabled: boolean): void { |
|||
this.disabled = isDisabled; |
|||
if (isDisabled) { |
|||
this.selectItemsFormGroup.disable({emitEvent: false}); |
|||
} else { |
|||
this.selectItemsFormGroup.enable({emitEvent: false}); |
|||
} |
|||
} |
|||
|
|||
writeValue(value: FormSelectItem[] | undefined): void { |
|||
const items= value || []; |
|||
this.selectItemsFormGroup.setControl('selectItems', this.prepareSelectItemsFormArray(items), {emitEvent: false}); |
|||
} |
|||
|
|||
public validate(c: UntypedFormControl) { |
|||
this.errorText = ''; |
|||
const itemsArray = this.selectItemsFormGroup.get('selectItems') as UntypedFormArray; |
|||
const notUniqueControls = |
|||
itemsArray.controls.filter(control => control.hasError('itemValueNotUnique')); |
|||
for (const control of notUniqueControls) { |
|||
control.updateValueAndValidity({onlySelf: false, emitEvent: false}); |
|||
if (control.hasError('itemValueNotUnique')) { |
|||
this.errorText = this.translate.instant('dynamic-form.property.not-unique-select-option-value-error'); |
|||
} |
|||
} |
|||
let valid = this.selectItemsFormGroup.valid; |
|||
if (valid) { |
|||
const items: FormSelectItem[] = this.selectItemsFormGroup.get('selectItems').value; |
|||
valid = !items.some(item => !selectItemValid(item)); |
|||
} |
|||
|
|||
return valid ? null : { |
|||
selectItems: { |
|||
valid: false, |
|||
}, |
|||
}; |
|||
} |
|||
|
|||
public selectItemValueUnique(value: any, index: number): boolean { |
|||
const itemsArray = this.selectItemsFormGroup.get('selectItems') as UntypedFormArray; |
|||
for (let i = 0; i < itemsArray.controls.length; i++) { |
|||
if (i !== index) { |
|||
const otherControl = itemsArray.controls[i]; |
|||
if (value === otherControl.value.value) { |
|||
return false; |
|||
} |
|||
} |
|||
} |
|||
return true; |
|||
} |
|||
|
|||
selectItemDrop(event: CdkDragDrop<string[]>) { |
|||
const itemsArray = this.selectItemsFormGroup.get('selectItems') as UntypedFormArray; |
|||
const item = itemsArray.at(event.previousIndex); |
|||
itemsArray.removeAt(event.previousIndex); |
|||
itemsArray.insert(event.currentIndex, item); |
|||
} |
|||
|
|||
selectItemsFormArray(): UntypedFormArray { |
|||
return this.selectItemsFormGroup.get('selectItems') as UntypedFormArray; |
|||
} |
|||
|
|||
trackBySelectItem(index: number, selectItemControl: AbstractControl): any { |
|||
return selectItemControl; |
|||
} |
|||
|
|||
removeSelectItem(index: number, emitEvent = true) { |
|||
(this.selectItemsFormGroup.get('selectItems') as UntypedFormArray).removeAt(index, {emitEvent}); |
|||
} |
|||
|
|||
addSelectItem() { |
|||
const item: FormSelectItem = { |
|||
value: '', |
|||
label: '' |
|||
}; |
|||
const itemsArray = this.selectItemsFormGroup.get('selectItems') as UntypedFormArray; |
|||
const itemControl = this.fb.control(item, []); |
|||
itemsArray.push(itemControl); |
|||
} |
|||
|
|||
private prepareSelectItemsFormArray(items: FormSelectItem[] | undefined): UntypedFormArray { |
|||
const selectItemsControls: Array<AbstractControl> = []; |
|||
if (items) { |
|||
items.forEach((item) => { |
|||
selectItemsControls.push(this.fb.control(item, [])); |
|||
}); |
|||
} |
|||
return this.fb.array(selectItemsControls); |
|||
} |
|||
} |
|||
@ -0,0 +1,117 @@ |
|||
<!-- |
|||
|
|||
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.!hidden]="!propertyGroups?.length && !propertiesContent.children?.length" class="tb-form-panel" [class.stroked]="stroked" |
|||
[formGroup]="propertiesFormGroup"> |
|||
<div *ngIf="title" class="tb-form-panel-title">{{ title }}</div> |
|||
<ng-container #propertiesContent><ng-content select=".tb-properties-content"></ng-content></ng-container> |
|||
<ng-container *ngFor="let propertyGroup of propertyGroups"> |
|||
<ng-container *ngIf="propertyGroup.visible"> |
|||
<div *ngIf="propertyGroup.title" class="tb-form-panel stroked"> |
|||
<mat-expansion-panel class="tb-settings" expanded> |
|||
<mat-expansion-panel-header class="flex flex-row flex-wrap"> |
|||
<mat-panel-title> |
|||
<div class="tb-form-panel-title">{{ propertyGroup.title | customTranslate }}</div> |
|||
</mat-panel-title> |
|||
</mat-expansion-panel-header> |
|||
<ng-template matExpansionPanelContent> |
|||
<ng-container *ngTemplateOutlet="propertyContainersTpl; context:{propertyContainers: propertyGroup.containers}"></ng-container> |
|||
</ng-template> |
|||
</mat-expansion-panel> |
|||
</div> |
|||
<ng-container *ngIf="!propertyGroup.title"> |
|||
<ng-container *ngTemplateOutlet="propertyContainersTpl; context:{propertyContainers: propertyGroup.containers}"></ng-container> |
|||
</ng-container> |
|||
</ng-container> |
|||
</ng-container> |
|||
</div> |
|||
|
|||
<ng-template #propertyContainersTpl let-propertyContainers="propertyContainers"> |
|||
<ng-container *ngFor="let propertyContainer of propertyContainers" [formGroup]="propertiesFormGroup"> |
|||
<ng-container *ngIf="propertyContainer.type === FormPropertyContainerType.row && propertyContainer.visible"> |
|||
<ng-container *ngTemplateOutlet="propertyRowTpl;context:{propertyRow: propertyContainer}"> |
|||
</ng-container> |
|||
</ng-container> |
|||
<tb-dynamic-form *ngIf="propertyContainer.type === FormPropertyContainerType.fieldset && propertyContainer.visible" |
|||
formControlName="{{ propertyContainer.property.id }}" |
|||
title="{{ propertyContainer.label | customTranslate }}" |
|||
stroked |
|||
[properties]="propertyContainer.properties"> |
|||
</tb-dynamic-form> |
|||
</ng-container> |
|||
</ng-template> |
|||
|
|||
<ng-template #propertyRowTpl let-propertyRow="propertyRow"> |
|||
<div [formGroup]="propertiesFormGroup" class="tb-form-row space-between flex-wrap overflow-auto" [class]="propertyRow.rowClass"> |
|||
<mat-slide-toggle *ngIf="propertyRow.switch && propertyRow.switch.visible" |
|||
class="mat-slide fixed-title-width margin" formControlName="{{ propertyRow.switch.id }}"> |
|||
{{ propertyRow.label | customTranslate }} |
|||
</mat-slide-toggle> |
|||
<div *ngIf="!propertyRow.switch" class="fixed-title-width fixed-title-height">{{ propertyRow.label | customTranslate }}</div> |
|||
<div *ngIf="propertyRow.properties.length" class="tb-flex row flex-end align-center"> |
|||
<ng-container *ngFor="let property of propertyRow.properties"> |
|||
<ng-container *ngIf="property.visible"> |
|||
<div *ngIf="property.subLabel" class="tb-small-label">{{ property.subLabel | customTranslate }}</div> |
|||
<mat-form-field *ngIf="property.type === FormPropertyType.text" [class]="property.fieldClass" appearance="outline" subscriptSizing="dynamic"> |
|||
<input matInput formControlName="{{ property.id }}" [required]="property.required" placeholder="{{ 'widget-config.set' | translate }}"> |
|||
<div class="lt-md:!hidden" matSuffix *ngIf="property.fieldSuffix">{{ property.fieldSuffix | customTranslate }}</div> |
|||
</mat-form-field> |
|||
<mat-form-field *ngIf="property.type === FormPropertyType.select" [class]="property.fieldClass || 'medium-width'" appearance="outline" subscriptSizing="dynamic"> |
|||
<mat-select formControlName="{{ property.id }}" [multiple]="property.multiple"> |
|||
<mat-option *ngFor="let item of property.items" [value]="item.value"> |
|||
{{ item.label | customTranslate }} |
|||
</mat-option> |
|||
</mat-select> |
|||
</mat-form-field> |
|||
<tb-color-input *ngIf="property.type === FormPropertyType.color" |
|||
[required]="property.required" |
|||
[class]="property.fieldClass" |
|||
asBoxInput |
|||
colorClearButton |
|||
formControlName="{{ property.id }}"> |
|||
</tb-color-input> |
|||
<tb-color-settings *ngIf="property.type === FormPropertyType.color_settings" |
|||
[class]="property.fieldClass" |
|||
formControlName="{{ property.id }}" |
|||
settingsKey="{{ property.name | customTranslate }}"> |
|||
</tb-color-settings> |
|||
<mat-form-field *ngIf="property.type === FormPropertyType.number" [class]="property.fieldClass" appearance="outline" class="number" subscriptSizing="dynamic"> |
|||
<input matInput formControlName="{{ property.id }}" [required]="property.required" |
|||
[min]="property.min" [max]="property.max" [step]="property.step" |
|||
type="number" placeholder="{{ 'widget-config.set' | translate }}"> |
|||
<div class="lt-md:!hidden" matSuffix *ngIf="property.fieldSuffix">{{ property.fieldSuffix | customTranslate }}</div> |
|||
</mat-form-field> |
|||
<tb-font-settings *ngIf="property.type === FormPropertyType.font" |
|||
[class]="property.fieldClass" |
|||
formControlName="{{ property.id }}" |
|||
clearButton |
|||
disabledLineHeight> |
|||
</tb-font-settings> |
|||
<tb-unit-input *ngIf="property.type === FormPropertyType.units" |
|||
[class]="property.fieldClass" |
|||
[required]="property.required" |
|||
formControlName="{{ property.id }}"></tb-unit-input> |
|||
<tb-material-icon-select *ngIf="property.type === FormPropertyType.icon" |
|||
asBoxInput |
|||
formControlName="{{ property.id }}"> |
|||
</tb-material-icon-select> |
|||
<mat-divider *ngIf="property.divider" vertical></mat-divider> |
|||
</ng-container> |
|||
</ng-container> |
|||
</div> |
|||
</div> |
|||
</ng-template> |
|||
@ -0,0 +1,22 @@ |
|||
/** |
|||
* 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 { |
|||
.tb-properties-content { |
|||
gap: 16px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
} |
|||
@ -0,0 +1,265 @@ |
|||
///
|
|||
/// 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, |
|||
forwardRef, |
|||
Input, |
|||
OnChanges, |
|||
OnInit, |
|||
SimpleChanges |
|||
} from '@angular/core'; |
|||
import { |
|||
ControlValueAccessor, |
|||
NG_VALIDATORS, |
|||
NG_VALUE_ACCESSOR, |
|||
UntypedFormBuilder, |
|||
UntypedFormControl, |
|||
UntypedFormGroup, |
|||
Validator, |
|||
ValidatorFn, |
|||
Validators |
|||
} from '@angular/forms'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { isDefinedAndNotNull, mergeDeep } from '@core/utils'; |
|||
import { |
|||
defaultFormProperties, |
|||
FormProperty, |
|||
FormPropertyContainerType, |
|||
FormPropertyGroup, |
|||
FormPropertyType, |
|||
PropertyConditionFunction, |
|||
toPropertyGroups |
|||
} from '@shared/models/dynamic-form.models'; |
|||
import { coerceBoolean } from '@shared/decorators/coercion'; |
|||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-dynamic-form', |
|||
templateUrl: './dynamic-form.component.html', |
|||
styleUrls: ['./dynamic-form.component.scss'], |
|||
providers: [ |
|||
{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => DynamicFormComponent), |
|||
multi: true |
|||
}, |
|||
{ |
|||
provide: NG_VALIDATORS, |
|||
useExisting: forwardRef(() => DynamicFormComponent), |
|||
multi: true |
|||
} |
|||
] |
|||
}) |
|||
export class DynamicFormComponent implements OnInit, OnChanges, ControlValueAccessor, Validator { |
|||
|
|||
FormPropertyContainerType = FormPropertyContainerType; |
|||
|
|||
FormPropertyType = FormPropertyType; |
|||
|
|||
@Input() |
|||
disabled: boolean; |
|||
|
|||
@Input() |
|||
properties: FormProperty[]; |
|||
|
|||
@Input() |
|||
title: string; |
|||
|
|||
@Input() |
|||
@coerceBoolean() |
|||
stroked = false; |
|||
|
|||
private modelValue: {[id: string]: any}; |
|||
|
|||
private propagateChange = null; |
|||
|
|||
private validatorTriggers: string[]; |
|||
|
|||
public propertiesFormGroup: UntypedFormGroup; |
|||
|
|||
propertyGroups: FormPropertyGroup[]; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
private destroyRef: DestroyRef, |
|||
private fb: UntypedFormBuilder, |
|||
private cd: ChangeDetectorRef) { |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.propertiesFormGroup = this.fb.group({ |
|||
}); |
|||
this.propertiesFormGroup.valueChanges.pipe( |
|||
takeUntilDestroyed(this.destroyRef) |
|||
).subscribe(() => { |
|||
this.updateModel(); |
|||
}); |
|||
this.loadMetadata(); |
|||
} |
|||
|
|||
ngOnChanges(changes: SimpleChanges): void { |
|||
for (const propName of Object.keys(changes)) { |
|||
const change = changes[propName]; |
|||
if (!change.firstChange && change.currentValue !== change.previousValue) { |
|||
if (['properties'].includes(propName)) { |
|||
this.loadMetadata(); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
registerOnChange(fn: any): void { |
|||
this.propagateChange = fn; |
|||
} |
|||
|
|||
registerOnTouched(_fn: any): void { |
|||
} |
|||
|
|||
setDisabledState(isDisabled: boolean): void { |
|||
this.disabled = isDisabled; |
|||
if (isDisabled) { |
|||
this.propertiesFormGroup.disable({emitEvent: false}); |
|||
} else { |
|||
this.propertiesFormGroup.enable({emitEvent: false}); |
|||
this.updateControlsState(); |
|||
} |
|||
} |
|||
|
|||
writeValue(value: {[id: string]: any}): void { |
|||
this.modelValue = value || {}; |
|||
this.setupValue(); |
|||
} |
|||
|
|||
validate(_c: UntypedFormControl) { |
|||
const valid = this.propertiesFormGroup.valid; |
|||
return valid ? null : { |
|||
properties: { |
|||
valid: false, |
|||
}, |
|||
}; |
|||
} |
|||
|
|||
private loadMetadata() { |
|||
this.validatorTriggers = []; |
|||
this.propertyGroups = []; |
|||
|
|||
for (const control of Object.keys(this.propertiesFormGroup.controls)) { |
|||
this.propertiesFormGroup.removeControl(control, {emitEvent: false}); |
|||
} |
|||
if (this.properties) { |
|||
for (let property of this.properties) { |
|||
property.disabled = false; |
|||
property.visible = true; |
|||
if (property.condition) { |
|||
try { |
|||
property.conditionFunction = new Function('property', 'model', property.condition) as PropertyConditionFunction; |
|||
} catch (_e) { |
|||
} |
|||
} |
|||
} |
|||
this.propertyGroups = toPropertyGroups(this.properties); |
|||
for (const property of this.properties) { |
|||
if (property.disableOnProperty) { |
|||
if (!this.validatorTriggers.includes(property.disableOnProperty)) { |
|||
this.validatorTriggers.push(property.disableOnProperty); |
|||
} |
|||
} |
|||
const validators: ValidatorFn[] = []; |
|||
if (property.required) { |
|||
validators.push(Validators.required); |
|||
} |
|||
if (property.type === FormPropertyType.number) { |
|||
if (isDefinedAndNotNull(property.min)) { |
|||
validators.push(Validators.min(property.min)); |
|||
} |
|||
if (isDefinedAndNotNull(property.max)) { |
|||
validators.push(Validators.max(property.max)); |
|||
} |
|||
} |
|||
this.propertiesFormGroup.addControl(property.id, this.fb.control(null, validators), {emitEvent: false}); |
|||
} |
|||
} |
|||
this.setupValue(); |
|||
this.cd.markForCheck(); |
|||
} |
|||
|
|||
private calculateControlsState(updateControls = false) { |
|||
for (const trigger of this.validatorTriggers) { |
|||
const value: boolean = this.propertiesFormGroup.get(trigger).value; |
|||
this.properties.filter(p => p.disableOnProperty === trigger).forEach( |
|||
(p) => { |
|||
p.disabled = !value; |
|||
} |
|||
); |
|||
} |
|||
if (this.properties) { |
|||
for (let property of this.properties) { |
|||
if (property.conditionFunction) { |
|||
property.visible = property.conditionFunction(property, this.modelValue); |
|||
} |
|||
} |
|||
this.propertyGroups.forEach(g => { |
|||
g.containers.forEach(container => { |
|||
if (container.type === FormPropertyContainerType.fieldset) { |
|||
container.visible = container.property.visible; |
|||
} else { |
|||
container.visible = container.switch?.visible || container.properties.some(p => p.visible); |
|||
} |
|||
}); |
|||
g.visible = g.containers.some(c => c.visible); |
|||
}); |
|||
} |
|||
if (updateControls) { |
|||
this.updateControlsState(); |
|||
} |
|||
} |
|||
|
|||
private updateControlsState() { |
|||
if (this.properties) { |
|||
for (let property of this.properties) { |
|||
const control = this.propertiesFormGroup.get(property.id); |
|||
if (property.visible && !property.disabled) { |
|||
control.enable({emitEvent: false}); |
|||
control.updateValueAndValidity({emitEvent: false}); |
|||
} else { |
|||
control.disable({emitEvent: false}); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
private setupValue() { |
|||
if (this.properties) { |
|||
const defaults = defaultFormProperties(this.properties); |
|||
this.modelValue = mergeDeep<{[id: string]: any}>(defaults, this.modelValue); |
|||
this.propertiesFormGroup.patchValue( |
|||
this.modelValue, {emitEvent: false} |
|||
); |
|||
this.calculateControlsState(); |
|||
this.setDisabledState(this.disabled); |
|||
} |
|||
} |
|||
|
|||
private updateModel() { |
|||
this.modelValue = this.propertiesFormGroup.getRawValue(); |
|||
this.calculateControlsState(true); |
|||
this.propagateChange(this.modelValue); |
|||
} |
|||
|
|||
} |
|||
@ -1,136 +0,0 @@ |
|||
///
|
|||
/// 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, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core'; |
|||
import { TbPopoverComponent } from '@shared/components/popover.component'; |
|||
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; |
|||
import { |
|||
ScadaSymbolProperty, |
|||
scadaSymbolPropertyFieldClasses, |
|||
scadaSymbolPropertyRowClasses, |
|||
ScadaSymbolPropertyType, |
|||
scadaSymbolPropertyTypes, |
|||
scadaSymbolPropertyTypeTranslations |
|||
} from '@home/components/widget/lib/scada/scada-symbol.models'; |
|||
import { defaultPropertyValue } from '@home/pages/scada-symbol/metadata-components/scada-symbol-property-row.component'; |
|||
import { ValueType } from '@shared/models/constants'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-scada-symbol-property-panel', |
|||
templateUrl: './scada-symbol-property-panel.component.html', |
|||
styleUrls: ['./scada-symbol-property-panel.component.scss'], |
|||
encapsulation: ViewEncapsulation.None |
|||
}) |
|||
export class ScadaSymbolPropertyPanelComponent implements OnInit { |
|||
|
|||
ValueType = ValueType; |
|||
|
|||
ScadaSymbolPropertyType = ScadaSymbolPropertyType; |
|||
|
|||
scadaSymbolPropertyTypes = scadaSymbolPropertyTypes; |
|||
scadaSymbolPropertyTypeTranslations = scadaSymbolPropertyTypeTranslations; |
|||
|
|||
scadaSymbolPropertyRowClasses = scadaSymbolPropertyRowClasses; |
|||
|
|||
scadaSymbolPropertyFieldClasses = scadaSymbolPropertyFieldClasses; |
|||
|
|||
@Input() |
|||
isAdd = false; |
|||
|
|||
@Input() |
|||
property: ScadaSymbolProperty; |
|||
|
|||
@Input() |
|||
booleanPropertyIds: string[]; |
|||
|
|||
@Input() |
|||
disabled: boolean; |
|||
|
|||
@Input() |
|||
popover: TbPopoverComponent<ScadaSymbolPropertyPanelComponent>; |
|||
|
|||
@Output() |
|||
propertySettingsApplied = new EventEmitter<ScadaSymbolProperty>(); |
|||
|
|||
panelTitle: string; |
|||
|
|||
propertyFormGroup: UntypedFormGroup; |
|||
|
|||
private propertyType: ScadaSymbolPropertyType; |
|||
|
|||
constructor(private fb: UntypedFormBuilder) { |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.panelTitle = this.isAdd ? 'scada.property.add-property' : 'scada.property.property-settings'; |
|||
this.propertyType = this.property.type; |
|||
this.propertyFormGroup = this.fb.group( |
|||
{ |
|||
id: [this.property.id, [Validators.required]], |
|||
name: [this.property.name, [Validators.required]], |
|||
type: [this.property.type, [Validators.required]], |
|||
default: [this.property.default, []], |
|||
required: [this.property.required, []], |
|||
subLabel: [this.property.subLabel, []], |
|||
divider: [this.property.divider, []], |
|||
fieldSuffix: [this.property.fieldSuffix, []], |
|||
disableOnProperty: [this.property.disableOnProperty, []], |
|||
rowClass: [(this.property.rowClass || '').split(' '), []], |
|||
fieldClass: [(this.property.fieldClass || '').split(' '), []], |
|||
min: [this.property.min, []], |
|||
max: [this.property.max, []], |
|||
step: [this.property.step, [Validators.min(0)]] |
|||
} |
|||
); |
|||
if (this.disabled) { |
|||
this.propertyFormGroup.disable({emitEvent: false}); |
|||
} else { |
|||
this.propertyFormGroup.get('type').valueChanges.subscribe(() => { |
|||
this.updateValidators(); |
|||
}); |
|||
this.updateValidators(); |
|||
} |
|||
} |
|||
|
|||
cancel() { |
|||
this.popover?.hide(); |
|||
} |
|||
|
|||
applyPropertySettings() { |
|||
const property = this.propertyFormGroup.getRawValue(); |
|||
property.rowClass = (property.rowClass || []).join(' '); |
|||
property.fieldClass = (property.fieldClass || []).join(' '); |
|||
this.propertySettingsApplied.emit(property); |
|||
} |
|||
|
|||
private updateValidators() { |
|||
const type: ScadaSymbolPropertyType = this.propertyFormGroup.get('type').value; |
|||
if (type === ScadaSymbolPropertyType.number) { |
|||
this.propertyFormGroup.get('min').enable({emitEvent: false}); |
|||
this.propertyFormGroup.get('max').enable({emitEvent: false}); |
|||
this.propertyFormGroup.get('step').enable({emitEvent: false}); |
|||
} else { |
|||
this.propertyFormGroup.get('min').disable({emitEvent: false}); |
|||
this.propertyFormGroup.get('max').disable({emitEvent: false}); |
|||
this.propertyFormGroup.get('step').disable({emitEvent: false}); |
|||
} |
|||
if (this.propertyType !== type) { |
|||
const defaultValue = defaultPropertyValue(type); |
|||
this.propertyFormGroup.get('default').patchValue(defaultValue, {emitEvent: false}); |
|||
this.propertyType = type; |
|||
} |
|||
} |
|||
} |
|||
File diff suppressed because it is too large
@ -0,0 +1,385 @@ |
|||
///
|
|||
/// 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 { CustomTranslatePipe } from '@shared/pipe/custom-translate.pipe'; |
|||
import { TbEditorCompletion, TbEditorCompletions } from '@shared/models/ace/completion.models'; |
|||
import { isString } from '@core/utils'; |
|||
import { JsonSchema, JsonSettingsSchema } from '@shared/models/widget.models'; |
|||
import JsonFormUtils from '@shared/components/json-form/react/json-form-utils'; |
|||
import { JsonFormData, KeyLabelItem } from '@shared/components/json-form/react/json-form.models'; |
|||
|
|||
export enum FormPropertyType { |
|||
text = 'text', |
|||
number = 'number', |
|||
switch = 'switch', |
|||
select = 'select', |
|||
color = 'color', |
|||
color_settings = 'color_settings', |
|||
font = 'font', |
|||
units = 'units', |
|||
icon = 'icon', |
|||
fieldset = 'fieldset' |
|||
} |
|||
|
|||
export const formPropertyTypes = Object.keys(FormPropertyType) as FormPropertyType[]; |
|||
|
|||
export const formPropertyTypeTranslations = new Map<FormPropertyType, string>( |
|||
[ |
|||
[FormPropertyType.text, 'dynamic-form.property.type-text'], |
|||
[FormPropertyType.number, 'dynamic-form.property.type-number'], |
|||
[FormPropertyType.switch, 'dynamic-form.property.type-switch'], |
|||
[FormPropertyType.select, 'dynamic-form.property.type-select'], |
|||
[FormPropertyType.color, 'dynamic-form.property.type-color'], |
|||
[FormPropertyType.color_settings, 'dynamic-form.property.type-color-settings'], |
|||
[FormPropertyType.font, 'dynamic-form.property.type-font'], |
|||
[FormPropertyType.units, 'dynamic-form.property.type-units'], |
|||
[FormPropertyType.icon, 'dynamic-form.property.type-icon'], |
|||
[FormPropertyType.fieldset, 'dynamic-form.property.type-fieldset'] |
|||
] |
|||
); |
|||
|
|||
export const formPropertyRowClasses = |
|||
['column', 'column-xs', 'column-lt-md', 'align-start', 'no-border', 'no-gap', 'no-padding', 'same-padding']; |
|||
|
|||
export const formPropertyFieldClasses = |
|||
['medium-width', 'flex', 'flex-xs', 'flex-lt-md']; |
|||
|
|||
export type PropertyConditionFunction = (property: FormProperty, model: any) => boolean; |
|||
|
|||
export interface FormPropertyBase { |
|||
id: string; |
|||
name: string; |
|||
group?: string; |
|||
type: FormPropertyType; |
|||
default: any; |
|||
required?: boolean; |
|||
subLabel?: string; |
|||
divider?: boolean; |
|||
fieldSuffix?: string; |
|||
disableOnProperty?: string; |
|||
condition?: string; |
|||
conditionFunction?: PropertyConditionFunction; |
|||
disabled?: boolean; |
|||
visible?: boolean; |
|||
rowClass?: string; |
|||
fieldClass?: string; |
|||
} |
|||
|
|||
export interface FormNumberProperty extends FormPropertyBase { |
|||
min?: number; |
|||
max?: number; |
|||
step?: number; |
|||
} |
|||
|
|||
export interface FormFieldSetProperty extends FormPropertyBase { |
|||
properties?: FormProperty[]; |
|||
} |
|||
|
|||
export interface FormSelectItem { |
|||
value: any; |
|||
label: string; |
|||
} |
|||
|
|||
export interface FormSelectProperty extends FormPropertyBase { |
|||
multiple?: boolean; |
|||
items?: FormSelectItem[]; |
|||
} |
|||
|
|||
export type FormProperty = FormPropertyBase & FormNumberProperty & FormSelectProperty & FormFieldSetProperty; |
|||
|
|||
export enum FormPropertyContainerType { |
|||
row = 'row', |
|||
fieldset = 'fieldset' |
|||
} |
|||
|
|||
export interface FormPropertyContainerBase { |
|||
type: FormPropertyContainerType; |
|||
label: string; |
|||
properties: FormProperty[]; |
|||
visible: boolean; |
|||
} |
|||
|
|||
export interface FormPropertyRow extends FormPropertyContainerBase { |
|||
switch?: FormProperty; |
|||
rowClass?: string; |
|||
} |
|||
|
|||
export interface FormPropertyFieldset extends FormPropertyContainerBase { |
|||
property?: FormProperty; |
|||
} |
|||
|
|||
export type FormPropertyContainer = FormPropertyRow & FormPropertyFieldset; |
|||
|
|||
export interface FormPropertyGroup { |
|||
title?: string; |
|||
containers: FormPropertyContainer[]; |
|||
visible: boolean; |
|||
} |
|||
|
|||
export const toPropertyGroups = (properties: FormProperty[]): FormPropertyGroup[] => { |
|||
const groups: {title: string, properties: FormProperty[]}[] = []; |
|||
for (let property of properties) { |
|||
if (!property.group) { |
|||
groups.push({ |
|||
title: null, |
|||
properties: [property] |
|||
}); |
|||
} else { |
|||
let propertyGroup = groups.find(g => g.title === property.group); |
|||
if (!propertyGroup) { |
|||
propertyGroup = { |
|||
title: property.group, |
|||
properties: [] |
|||
}; |
|||
groups.push(propertyGroup); |
|||
} |
|||
propertyGroup.properties.push(property); |
|||
} |
|||
} |
|||
return groups.map(g => ({ |
|||
title: g.title, |
|||
containers: toPropertyContainers(g.properties), |
|||
visible: true |
|||
})); |
|||
}; |
|||
|
|||
const toPropertyContainers = (properties: FormProperty[]): FormPropertyContainer[] => { |
|||
const result: FormPropertyContainer[] = []; |
|||
for (let property of properties) { |
|||
if (property.type === FormPropertyType.fieldset) { |
|||
const propertyFieldset: FormPropertyFieldset = { |
|||
property, |
|||
label: property.name, |
|||
type: FormPropertyContainerType.fieldset, |
|||
properties: property.properties, |
|||
visible: true |
|||
}; |
|||
result.push(propertyFieldset); |
|||
} else { |
|||
let propertyRow = |
|||
result.find(r => r.type === FormPropertyContainerType.row && r.label === property.name); |
|||
if (!propertyRow) { |
|||
propertyRow = { |
|||
label: property.name, |
|||
type: FormPropertyContainerType.row, |
|||
properties: [], |
|||
rowClass: property.rowClass, |
|||
visible: true |
|||
}; |
|||
result.push(propertyRow); |
|||
} |
|||
if (property.type === FormPropertyType.switch) { |
|||
propertyRow.switch = property; |
|||
} else { |
|||
propertyRow.properties.push(property); |
|||
} |
|||
} |
|||
} |
|||
return result; |
|||
} |
|||
|
|||
export const defaultFormProperties = (properties: FormProperty[]): {[id: string]: any} => { |
|||
const formProperties: {[id: string]: any} = {}; |
|||
for (const property of properties) { |
|||
formProperties[property.id] = defaultFormPropertyValue(property); |
|||
} |
|||
return formProperties; |
|||
}; |
|||
|
|||
export const defaultFormPropertyValue = (property: FormProperty): any => { |
|||
if (property.type === FormPropertyType.fieldset) { |
|||
const propertyValue: {[id: string]: any} = {}; |
|||
for (const childProperty of property.properties) { |
|||
propertyValue[childProperty.id] = defaultFormPropertyValue(childProperty); |
|||
} |
|||
return propertyValue; |
|||
} else { |
|||
return property.default; |
|||
} |
|||
} |
|||
|
|||
export const formPropertyCompletions = (properties: FormProperty[], customTranslate: CustomTranslatePipe): TbEditorCompletions => { |
|||
const propertiesCompletions: TbEditorCompletions = {}; |
|||
for (const property of properties) { |
|||
propertiesCompletions[property.id] = formPropertyCompletion(property, customTranslate); |
|||
} |
|||
return propertiesCompletions; |
|||
} |
|||
|
|||
export const formPropertyCompletion = (property: FormProperty, customTranslate: CustomTranslatePipe): TbEditorCompletion => { |
|||
let description = customTranslate.transform(property.name, property.name); |
|||
if (property.subLabel) { |
|||
description += ` <small>${customTranslate.transform(property.subLabel, property.subLabel)}</small>`; |
|||
} |
|||
if (property.type === FormPropertyType.select) { |
|||
if (property.multiple) { |
|||
description += '<br/><br/><code class="title"><b>Possible values of array element:</b></code>'; |
|||
} else { |
|||
description += '<br/><br/><code class="title"><b>Possible values:</b></code>'; |
|||
} |
|||
description += `<ul>${property.items.map(item => `<li>${item.value} <code style="font-size: 11px;">${typeof item.value}</code></li>`).join('\n')}</ul>`; |
|||
} |
|||
const completion: TbEditorCompletion = { |
|||
meta: 'property', |
|||
description, |
|||
type: formPropertyCompletionType(property) |
|||
}; |
|||
if (property.type === FormPropertyType.fieldset) { |
|||
completion.children = {}; |
|||
for (const childProperty of property.properties) { |
|||
completion.children[childProperty.id] = formPropertyCompletion(childProperty, customTranslate); |
|||
} |
|||
} |
|||
return completion; |
|||
}; |
|||
|
|||
const formPropertyCompletionType = (property: FormProperty): string => { |
|||
switch (property.type) { |
|||
case FormPropertyType.text: |
|||
return 'string'; |
|||
case FormPropertyType.number: |
|||
return 'number'; |
|||
case FormPropertyType.switch: |
|||
return 'boolean'; |
|||
case FormPropertyType.select: |
|||
const items = property.items || []; |
|||
const types: string[] = []; |
|||
items.forEach(item => { |
|||
const type = typeof item.value; |
|||
if (!types.includes(type)) { |
|||
types.push(type); |
|||
} |
|||
}); |
|||
const typesString = types.length ? types.join(' | ') : 'string'; |
|||
if (property.multiple) { |
|||
return `Array<${typesString}>`; |
|||
} else { |
|||
return typesString; |
|||
} |
|||
case FormPropertyType.color: |
|||
return 'color string'; |
|||
case FormPropertyType.color_settings: |
|||
return 'ColorProcessor'; |
|||
case FormPropertyType.font: |
|||
return 'Font'; |
|||
case FormPropertyType.units: |
|||
return 'units string'; |
|||
case FormPropertyType.icon: |
|||
return 'icon string'; |
|||
case FormPropertyType.fieldset: |
|||
return 'object'; |
|||
} |
|||
}; |
|||
|
|||
|
|||
export const jsonFormSchemaToFormProperties = (rawSchema: string | any) : FormProperty[] => { |
|||
const properties: FormProperty[] = []; |
|||
let settingsSchema: JsonSettingsSchema; |
|||
if (!rawSchema || rawSchema === '') { |
|||
settingsSchema = {}; |
|||
} else { |
|||
settingsSchema = isString(rawSchema) ? JSON.parse(rawSchema) : rawSchema; |
|||
} |
|||
if (settingsSchema.schema) { |
|||
const schema = settingsSchema.schema; |
|||
const form = settingsSchema.form || ['*']; |
|||
const groupInfoes = settingsSchema.groupInfoes || []; |
|||
if (form.length > 0) { |
|||
if (groupInfoes.length) { |
|||
for (const info of groupInfoes) { |
|||
const theForm: any[] = form[info.formIndex]; |
|||
properties.push(...schemaFormToProperties(schema, theForm, info.GroupTitle)); |
|||
} |
|||
} else { |
|||
properties.push(...schemaFormToProperties(schema, form)); |
|||
} |
|||
} |
|||
} |
|||
return properties; |
|||
} |
|||
|
|||
const schemaFormToProperties = (schema: JsonSchema, theForm: any[], groupTitle?: string): FormProperty[] => { |
|||
const merged = JsonFormUtils.merge(schema, theForm, {}, { |
|||
formDefaults: { |
|||
startEmpty: true |
|||
} |
|||
}); |
|||
return merged.map((form: JsonFormData) => jsonFormDataToProperty(form, 0, groupTitle)).filter(p => p != null); |
|||
} |
|||
|
|||
const jsonFormDataToProperty = (form: JsonFormData, level: number, groupTitle?: string): FormProperty => { |
|||
if (form.key && form.key.length > level) { |
|||
const property: FormProperty = { |
|||
id: form.key[level] + '', |
|||
name: form.title, |
|||
group: groupTitle, |
|||
type: null, |
|||
default: form.schema.default, |
|||
required: form.required |
|||
}; |
|||
if (form.condition?.length) { |
|||
property.condition = `return ${form.condition};`; |
|||
} |
|||
switch (form.type) { |
|||
case 'number': |
|||
property.type = FormPropertyType.number; |
|||
break; |
|||
case 'text': |
|||
property.type = FormPropertyType.text; |
|||
property.fieldClass = 'flex'; |
|||
break; |
|||
case 'checkbox': |
|||
property.type = FormPropertyType.switch; |
|||
break; |
|||
case 'rc-select': |
|||
property.type = FormPropertyType.select; |
|||
if (form.items?.length) { |
|||
property.items = (form.items as KeyLabelItem[]).map(item => ({value: item.value, label: item.label})); |
|||
} else { |
|||
property.items = []; |
|||
} |
|||
property.multiple = form.multiple; |
|||
property.fieldClass = 'flex'; |
|||
break; |
|||
case 'select': |
|||
property.type = FormPropertyType.select; |
|||
if (form.titleMap?.length) { |
|||
property.items = form.titleMap.map(item => ({value: item.value, label: item.name})); |
|||
} else { |
|||
property.items = []; |
|||
} |
|||
property.multiple = false; |
|||
property.fieldClass = 'flex'; |
|||
break; |
|||
case 'color': |
|||
property.type = FormPropertyType.color; |
|||
break; |
|||
case 'icon': |
|||
property.type = FormPropertyType.icon; |
|||
break; |
|||
case 'fieldset': |
|||
property.type = FormPropertyType.fieldset; |
|||
property.properties = form.items ? (form.items as JsonFormData[]).map(item => |
|||
jsonFormDataToProperty(item, level+1)).filter(p => p !== null) : []; |
|||
break; |
|||
} |
|||
if (!property.type) { |
|||
return null; |
|||
} |
|||
return property; |
|||
} |
|||
return null; |
|||
} |
|||
Loading…
Reference in new issue