Igor Kulikov
2 years ago
19 changed files with 1168 additions and 28 deletions
@ -0,0 +1,63 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
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-scada-symbol-properties"> |
||||
|
<div class="tb-form-table"> |
||||
|
<div class="tb-form-table-header no-padding-right"> |
||||
|
<div class="tb-form-table-header-cell tb-id-header" translate>scada.property.id</div> |
||||
|
<div class="tb-form-table-header-cell tb-name-header" translate>scada.property.name</div> |
||||
|
<div class="tb-form-table-header-cell tb-type-header" translate>scada.property.type</div> |
||||
|
<div class="tb-form-table-header-cell tb-actions-header"></div> |
||||
|
</div> |
||||
|
<div *ngIf="propertiesFormArray().controls.length; else noProperties" class="tb-form-table-body tb-drop-list" |
||||
|
cdkDropList cdkDropListOrientation="vertical" |
||||
|
[cdkDropListDisabled]="!dragEnabled" |
||||
|
(cdkDropListDropped)="propertyDrop($event)"> |
||||
|
<div cdkDrag [cdkDragDisabled]="!dragEnabled" |
||||
|
class="tb-draggable-form-table-row" |
||||
|
*ngFor="let propertyControl of propertiesFormArray().controls; trackBy: trackByProperty; let $index = index;"> |
||||
|
<tb-scada-symbol-metadata-property-row fxFlex |
||||
|
[index]="$index" |
||||
|
[booleanPropertyIds]="booleanPropertyIds" |
||||
|
[formControl]="propertyControl" |
||||
|
(propertyRemoved)="removeProperty($index)"> |
||||
|
</tb-scada-symbol-metadata-property-row> |
||||
|
<div class="tb-form-table-row-cell-buttons"> |
||||
|
<button mat-icon-button |
||||
|
type="button" |
||||
|
cdkDragHandle |
||||
|
[ngClass]="{'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> |
||||
|
<button type="button" mat-stroked-button color="primary" (click)="addProperty()"> |
||||
|
{{ 'scada.property.add-property' | translate }} |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<ng-template #noProperties> |
||||
|
<span fxLayoutAlign="center center" |
||||
|
class="tb-prompt">{{ 'scada.property.no-properties' | 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-scada-symbol-properties { |
||||
|
flex: 1; |
||||
|
margin: 12px; |
||||
|
.tb-form-table-header-cell { |
||||
|
&.tb-id-header { |
||||
|
flex: 1 1 40%; |
||||
|
} |
||||
|
&.tb-name-header { |
||||
|
flex: 1 1 40%; |
||||
|
} |
||||
|
&.tb-type-header { |
||||
|
flex: 1 1 20%; |
||||
|
} |
||||
|
&.tb-actions-header { |
||||
|
width: 120px; |
||||
|
min-width: 120px; |
||||
|
} |
||||
|
} |
||||
|
.tb-form-table { |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.tb-form-table-body { |
||||
|
overflow: auto; |
||||
|
tb-scada-symbol-metadata-property-row { |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,207 @@ |
|||||
|
///
|
||||
|
/// 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, |
||||
|
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 { IotSvgProperty, IotSvgPropertyType } from '@home/components/widget/lib/svg/iot-svg.models'; |
||||
|
import { CdkDragDrop } from '@angular/cdk/drag-drop'; |
||||
|
import { |
||||
|
propertyValid, |
||||
|
ScadaSymbolPropertyRowComponent |
||||
|
} from '@home/pages/scada-symbol/metadata-components/scada-symbol-property-row.component'; |
||||
|
import { TranslateService } from '@ngx-translate/core'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-scada-symbol-metadata-properties', |
||||
|
templateUrl: './scada-symbol-properties.component.html', |
||||
|
styleUrls: ['./scada-symbol-properties.component.scss'], |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => ScadaSymbolPropertiesComponent), |
||||
|
multi: true |
||||
|
}, |
||||
|
{ |
||||
|
provide: NG_VALIDATORS, |
||||
|
useExisting: forwardRef(() => ScadaSymbolPropertiesComponent), |
||||
|
multi: true |
||||
|
} |
||||
|
], |
||||
|
encapsulation: ViewEncapsulation.None |
||||
|
}) |
||||
|
export class ScadaSymbolPropertiesComponent implements ControlValueAccessor, OnInit, Validator { |
||||
|
|
||||
|
@HostBinding('style.display') styleDisplay = 'flex'; |
||||
|
@HostBinding('style.overflow') styleOverflow = 'hidden'; |
||||
|
|
||||
|
@ViewChildren(ScadaSymbolPropertyRowComponent) |
||||
|
propertyRows: QueryList<ScadaSymbolPropertyRowComponent>; |
||||
|
|
||||
|
@Input() |
||||
|
disabled: boolean; |
||||
|
|
||||
|
booleanPropertyIds: string[] = []; |
||||
|
|
||||
|
propertiesFormGroup: UntypedFormGroup; |
||||
|
|
||||
|
errorText = ''; |
||||
|
|
||||
|
get dragEnabled(): boolean { |
||||
|
return this.propertiesFormArray().controls.length > 1; |
||||
|
} |
||||
|
|
||||
|
private propagateChange = (_val: any) => {}; |
||||
|
|
||||
|
constructor(private fb: UntypedFormBuilder, |
||||
|
private translate: TranslateService) { |
||||
|
} |
||||
|
|
||||
|
ngOnInit() { |
||||
|
this.propertiesFormGroup = this.fb.group({ |
||||
|
properties: this.fb.array([]) |
||||
|
}); |
||||
|
this.propertiesFormGroup.valueChanges.subscribe( |
||||
|
() => { |
||||
|
let properties: IotSvgProperty[] = this.propertiesFormGroup.get('properties').value; |
||||
|
if (properties) { |
||||
|
properties = properties.filter(p => propertyValid(p)); |
||||
|
} |
||||
|
this.booleanPropertyIds = properties.filter(p => p.type === IotSvgPropertyType.switch).map(p => p.id); |
||||
|
this.propagateChange(properties); |
||||
|
} |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
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}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
writeValue(value: IotSvgProperty[] | undefined): void { |
||||
|
const properties= value || []; |
||||
|
this.propertiesFormGroup.setControl('properties', this.preparePropertiesFormArray(properties), {emitEvent: false}); |
||||
|
this.booleanPropertyIds = properties.filter(p => p.type === IotSvgPropertyType.switch).map(p => p.id); |
||||
|
} |
||||
|
|
||||
|
public validate(c: UntypedFormControl) { |
||||
|
this.errorText = ''; |
||||
|
const propertiesArray = this.propertiesFormGroup.get('properties') as UntypedFormArray; |
||||
|
const notUniqueControls = |
||||
|
propertiesArray.controls.filter(control => control.hasError('propertyIdNotUnique')); |
||||
|
for (const control of notUniqueControls) { |
||||
|
control.updateValueAndValidity({onlySelf: false, emitEvent: false}); |
||||
|
if (control.hasError('propertyIdNotUnique')) { |
||||
|
this.errorText = this.translate.instant('scada.property.not-unique-property-ids-error'); |
||||
|
} |
||||
|
} |
||||
|
const valid = this.propertiesFormGroup.valid; |
||||
|
return valid ? null : { |
||||
|
properties: { |
||||
|
valid: false, |
||||
|
}, |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
public propertyIdUnique(id: string, index: number): boolean { |
||||
|
const propertiesArray = this.propertiesFormGroup.get('properties') as UntypedFormArray; |
||||
|
for (let i = 0; i < propertiesArray.controls.length; i++) { |
||||
|
if (i !== index) { |
||||
|
const otherControl = propertiesArray.controls[i]; |
||||
|
if (id === otherControl.value.id) { |
||||
|
return false; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
propertyDrop(event: CdkDragDrop<string[]>) { |
||||
|
const propertiesArray = this.propertiesFormGroup.get('properties') as UntypedFormArray; |
||||
|
const property = propertiesArray.at(event.previousIndex); |
||||
|
propertiesArray.removeAt(event.previousIndex); |
||||
|
propertiesArray.insert(event.currentIndex, property); |
||||
|
} |
||||
|
|
||||
|
propertiesFormArray(): UntypedFormArray { |
||||
|
return this.propertiesFormGroup.get('properties') as UntypedFormArray; |
||||
|
} |
||||
|
|
||||
|
trackByProperty(index: number, propertyControl: AbstractControl): any { |
||||
|
return propertyControl; |
||||
|
} |
||||
|
|
||||
|
removeProperty(index: number, emitEvent = true) { |
||||
|
(this.propertiesFormGroup.get('properties') as UntypedFormArray).removeAt(index, {emitEvent}); |
||||
|
} |
||||
|
|
||||
|
addProperty() { |
||||
|
const property: IotSvgProperty = { |
||||
|
id: '', |
||||
|
name: '', |
||||
|
type: IotSvgPropertyType.text, |
||||
|
default: '' |
||||
|
}; |
||||
|
const propertiesArray = this.propertiesFormGroup.get('properties') as UntypedFormArray; |
||||
|
const propertyControl = this.fb.control(property, []); |
||||
|
propertiesArray.push(propertyControl); |
||||
|
setTimeout(() => { |
||||
|
const propertyRow = this.propertyRows.get(this.propertyRows.length-1); |
||||
|
propertyRow.onAdd(() => { |
||||
|
this.removeProperty(propertiesArray.length-1); |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
private preparePropertiesFormArray(properties: IotSvgProperty[] | undefined): UntypedFormArray { |
||||
|
const propertiesControls: Array<AbstractControl> = []; |
||||
|
if (properties) { |
||||
|
properties.forEach((property) => { |
||||
|
propertiesControls.push(this.fb.control(property, [])); |
||||
|
}); |
||||
|
} |
||||
|
return this.fb.array(propertiesControls); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,184 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
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-scada-symbol-property-settings-panel" [formGroup]="propertyFormGroup"> |
||||
|
<div class="tb-scada-symbol-property-settings-title">{{ panelTitle | translate }}</div> |
||||
|
<div class="tb-scada-symbol-property-settings-panel-content"> |
||||
|
<div class="tb-form-row"> |
||||
|
<div class="fixed-title-width" translate>scada.property.id</div> |
||||
|
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input required matInput formControlName="id" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<div class="tb-form-row"> |
||||
|
<div class="fixed-title-width" translate>scada.property.name</div> |
||||
|
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input required matInput formControlName="name" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<div class="tb-form-row"> |
||||
|
<div class="fixed-title-width" translate>scada.property.type</div> |
||||
|
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<mat-select formControlName="type"> |
||||
|
<mat-option *ngFor="let type of iotSvgPropertyTypes" [value]="type"> |
||||
|
{{ iotSvgPropertyTypeTranslations.get(type) | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div class="fixed-title-width" translate>scada.property.default-value</div> |
||||
|
<mat-form-field *ngIf="propertyFormGroup.get('type').value === IotSvgPropertyType.text" |
||||
|
class="flex" |
||||
|
appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="default" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
<tb-color-input *ngIf="propertyFormGroup.get('type').value === IotSvgPropertyType.color" |
||||
|
asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="default"> |
||||
|
</tb-color-input> |
||||
|
<tb-color-settings *ngIf="propertyFormGroup.get('type').value === IotSvgPropertyType.color_settings" |
||||
|
formControlName="default" |
||||
|
settingsKey="{{ propertyFormGroup.get('id').value }}"> |
||||
|
</tb-color-settings> |
||||
|
<mat-form-field *ngIf="propertyFormGroup.get('type').value === IotSvgPropertyType.number" |
||||
|
appearance="outline" |
||||
|
class="number" |
||||
|
subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="default" |
||||
|
[min]="propertyFormGroup.get('min').value" |
||||
|
[max]="propertyFormGroup.get('max').value" |
||||
|
[step]="propertyFormGroup.get('step').value" |
||||
|
type="number" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
<tb-font-settings *ngIf="propertyFormGroup.get('type').value === IotSvgPropertyType.font" |
||||
|
formControlName="default" |
||||
|
clearButton |
||||
|
disabledLineHeight> |
||||
|
</tb-font-settings> |
||||
|
<tb-unit-input *ngIf="propertyFormGroup.get('type').value === IotSvgPropertyType.units" |
||||
|
formControlName="default"></tb-unit-input> |
||||
|
<tb-value-input *ngIf="propertyFormGroup.get('type').value === IotSvgPropertyType.switch" |
||||
|
[valueType]="ValueType.BOOLEAN" |
||||
|
formControlName="default"></tb-value-input> |
||||
|
</div> |
||||
|
<div *ngIf="propertyFormGroup.get('type').value === IotSvgPropertyType.number" class="tb-form-row space-between"> |
||||
|
<div translate>scada.property.number-settings</div> |
||||
|
<div fxLayout="row" fxFlex fxLayoutAlign="end center" fxLayoutGap="8px"> |
||||
|
<div class="tb-small-label" translate>scada.property.min</div> |
||||
|
<mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="min" |
||||
|
type="number" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
<mat-divider vertical></mat-divider> |
||||
|
<div class="tb-small-label" translate>scada.property.max</div> |
||||
|
<mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="max" |
||||
|
type="number" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
<mat-divider vertical></mat-divider> |
||||
|
<div class="tb-small-label" translate>scada.property.step</div> |
||||
|
<mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="step" min="0" |
||||
|
type="number" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="required"> |
||||
|
{{ 'scada.property.value-required' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</div> |
||||
|
<div class="tb-form-panel stroked"> |
||||
|
<mat-expansion-panel class="tb-settings"> |
||||
|
<mat-expansion-panel-header fxLayout="row wrap"> |
||||
|
<mat-panel-title> |
||||
|
{{ 'scada.property.advanced-ui-settings' | translate }} |
||||
|
</mat-panel-title> |
||||
|
</mat-expansion-panel-header> |
||||
|
<ng-template matExpansionPanelContent> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div class="fixed-title-width" translate>scada.property.sub-label</div> |
||||
|
<mat-form-field class="flex" |
||||
|
appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="subLabel" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="divider"> |
||||
|
{{ 'scada.property.vertical-divider-after' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</div> |
||||
|
<div *ngIf="[IotSvgPropertyType.number, IotSvgPropertyType.text].includes(propertyFormGroup.get('type').value)" |
||||
|
class="tb-form-row space-between"> |
||||
|
<div class="fixed-title-width" translate>scada.property.input-field-suffix</div> |
||||
|
<mat-form-field class="flex" |
||||
|
appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="fieldSuffix" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div class="fixed-title-width" translate>scada.property.disable-on-property</div> |
||||
|
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<mat-select formControlName="disableOnProperty" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
<mat-option *ngFor="let prop of booleanPropertyIds" [value]="prop"> |
||||
|
{{ prop }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<div class="tb-form-row"> |
||||
|
<div class="fixed-title-width" translate>scada.property.property-row-classes</div> |
||||
|
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<mat-select formControlName="rowClass" multiple placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
<mat-option *ngFor="let clazz of iotSvgPropertyRowClasses" [value]="clazz"> |
||||
|
{{ clazz }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<div *ngIf="propertyFormGroup.get('type').value !== IotSvgPropertyType.switch" class="tb-form-row"> |
||||
|
<div class="fixed-title-width" translate>scada.property.property-field-classes</div> |
||||
|
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<mat-select formControlName="fieldClass" multiple placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
<mat-option *ngFor="let clazz of iotSvgPropertyFieldClasses" [value]="clazz"> |
||||
|
{{ clazz }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</ng-template> |
||||
|
</mat-expansion-panel> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-scada-symbol-property-settings-panel-buttons"> |
||||
|
<button mat-button |
||||
|
color="primary" |
||||
|
type="button" |
||||
|
(click)="cancel()"> |
||||
|
{{ 'action.cancel' | translate }} |
||||
|
</button> |
||||
|
<button mat-raised-button |
||||
|
color="primary" |
||||
|
type="button" |
||||
|
(click)="applyPropertySettings()" |
||||
|
[disabled]="propertyFormGroup.invalid || !propertyFormGroup.dirty"> |
||||
|
{{ (isAdd ? 'action.add' : 'action.apply') | translate }} |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,49 @@ |
|||||
|
/** |
||||
|
* 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 '../../../../../../scss/constants'; |
||||
|
|
||||
|
.tb-scada-symbol-property-settings-panel { |
||||
|
width: 540px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 16px; |
||||
|
@media #{$mat-lt-md} { |
||||
|
width: 90vw; |
||||
|
} |
||||
|
.tb-scada-symbol-property-settings-panel-content { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 16px; |
||||
|
overflow: auto; |
||||
|
margin: -10px; |
||||
|
padding: 10px; |
||||
|
} |
||||
|
.tb-scada-symbol-property-settings-title { |
||||
|
font-size: 16px; |
||||
|
font-weight: 500; |
||||
|
line-height: 24px; |
||||
|
letter-spacing: 0.25px; |
||||
|
color: rgba(0, 0, 0, 0.87); |
||||
|
} |
||||
|
.tb-scada-symbol-property-settings-panel-buttons { |
||||
|
height: 40px; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
gap: 16px; |
||||
|
justify-content: flex-end; |
||||
|
align-items: flex-end; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,129 @@ |
|||||
|
///
|
||||
|
/// 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 { |
||||
|
IotSvgProperty, iotSvgPropertyFieldClasses, iotSvgPropertyRowClasses, |
||||
|
IotSvgPropertyType, |
||||
|
iotSvgPropertyTypes, |
||||
|
iotSvgPropertyTypeTranslations |
||||
|
} from '@home/components/widget/lib/svg/iot-svg.models'; |
||||
|
import { WidgetService } from '@core/http/widget.service'; |
||||
|
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; |
||||
|
|
||||
|
IotSvgPropertyType = IotSvgPropertyType; |
||||
|
|
||||
|
iotSvgPropertyTypes = iotSvgPropertyTypes; |
||||
|
iotSvgPropertyTypeTranslations = iotSvgPropertyTypeTranslations; |
||||
|
|
||||
|
iotSvgPropertyRowClasses = iotSvgPropertyRowClasses; |
||||
|
|
||||
|
iotSvgPropertyFieldClasses = iotSvgPropertyFieldClasses; |
||||
|
|
||||
|
@Input() |
||||
|
isAdd = false; |
||||
|
|
||||
|
@Input() |
||||
|
property: IotSvgProperty; |
||||
|
|
||||
|
@Input() |
||||
|
booleanPropertyIds: string[]; |
||||
|
|
||||
|
@Input() |
||||
|
popover: TbPopoverComponent<ScadaSymbolPropertyPanelComponent>; |
||||
|
|
||||
|
@Output() |
||||
|
propertySettingsApplied = new EventEmitter<IotSvgProperty>(); |
||||
|
|
||||
|
panelTitle: string; |
||||
|
|
||||
|
propertyFormGroup: UntypedFormGroup; |
||||
|
|
||||
|
private propertyType: IotSvgPropertyType; |
||||
|
|
||||
|
constructor(private fb: UntypedFormBuilder, |
||||
|
private widgetService: WidgetService) { |
||||
|
} |
||||
|
|
||||
|
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)]] |
||||
|
} |
||||
|
); |
||||
|
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: IotSvgPropertyType = this.propertyFormGroup.get('type').value; |
||||
|
if (type === IotSvgPropertyType.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; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,49 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
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]="propertyRowFormGroup" class="tb-form-table-row tb-scada-symbol-metadata-property-row"> |
||||
|
<mat-form-field class="tb-inline-field tb-id-field" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input #idInput required matInput formControlName="id" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field class="tb-inline-field tb-name-field" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input required matInput formControlName="name" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field class="tb-inline-field tb-type-field fixed-height" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<mat-select formControlName="type"> |
||||
|
<mat-option *ngFor="let type of iotSvgPropertyTypes" [value]="type"> |
||||
|
{{ iotSvgPropertyTypeTranslations.get(type) | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
<div class="tb-form-table-row-cell-buttons"> |
||||
|
<button type="button" |
||||
|
mat-icon-button |
||||
|
#editButton |
||||
|
(click)="editProperty($event, editButton)" |
||||
|
matTooltip="{{ 'scada.property.property-settings' | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>settings</mat-icon> |
||||
|
</button> |
||||
|
<button type="button" |
||||
|
mat-icon-button |
||||
|
(click)="propertyRemoved.emit()" |
||||
|
matTooltip="{{ 'scada.property.remove-property' | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>delete</mat-icon> |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,26 @@ |
|||||
|
/** |
||||
|
* 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-scada-symbol-metadata-property-row { |
||||
|
.tb-id-field { |
||||
|
flex: 1 1 40%; |
||||
|
} |
||||
|
.tb-name-field { |
||||
|
flex: 1 1 40%; |
||||
|
} |
||||
|
.tb-type-field { |
||||
|
flex: 1 1 20%; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,280 @@ |
|||||
|
///
|
||||
|
/// 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, |
||||
|
ElementRef, |
||||
|
EventEmitter, |
||||
|
forwardRef, |
||||
|
Input, |
||||
|
OnInit, |
||||
|
Output, |
||||
|
Renderer2, |
||||
|
ViewChild, |
||||
|
ViewContainerRef, |
||||
|
ViewEncapsulation |
||||
|
} from '@angular/core'; |
||||
|
import { |
||||
|
ControlValueAccessor, |
||||
|
NG_VALIDATORS, |
||||
|
NG_VALUE_ACCESSOR, |
||||
|
UntypedFormBuilder, |
||||
|
UntypedFormControl, |
||||
|
UntypedFormGroup, |
||||
|
Validator, |
||||
|
ValidatorFn, |
||||
|
Validators |
||||
|
} from '@angular/forms'; |
||||
|
import { |
||||
|
IotSvgProperty, |
||||
|
IotSvgPropertyType, |
||||
|
iotSvgPropertyTypes, |
||||
|
iotSvgPropertyTypeTranslations |
||||
|
} from '@home/components/widget/lib/svg/iot-svg.models'; |
||||
|
import { deepClone } from '@core/utils'; |
||||
|
import { MatButton } from '@angular/material/button'; |
||||
|
import { TbPopoverService } from '@shared/components/popover.service'; |
||||
|
import { constantColor, Font } from '@shared/models/widget-settings.models'; |
||||
|
import { |
||||
|
ScadaSymbolPropertyPanelComponent |
||||
|
} from '@home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component'; |
||||
|
import { |
||||
|
ScadaSymbolPropertiesComponent |
||||
|
} from '@home/pages/scada-symbol/metadata-components/scada-symbol-properties.component'; |
||||
|
|
||||
|
export const propertyValid = (property: IotSvgProperty): boolean => !(!property.id || !property.name || !property.type); |
||||
|
|
||||
|
export const defaultPropertyValue = (type: IotSvgPropertyType): any => { |
||||
|
switch (type) { |
||||
|
case IotSvgPropertyType.text: |
||||
|
return ''; |
||||
|
case IotSvgPropertyType.number: |
||||
|
return 0; |
||||
|
case IotSvgPropertyType.switch: |
||||
|
return false; |
||||
|
case IotSvgPropertyType.color: |
||||
|
return '#000'; |
||||
|
case IotSvgPropertyType.color_settings: |
||||
|
return constantColor('#000'); |
||||
|
case IotSvgPropertyType.font: |
||||
|
return { |
||||
|
size: 12, |
||||
|
sizeUnit: 'px', |
||||
|
family: 'Roboto', |
||||
|
weight: 'normal', |
||||
|
style: 'normal', |
||||
|
lineHeight: '1' |
||||
|
} as Font; |
||||
|
case IotSvgPropertyType.units: |
||||
|
return ''; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-scada-symbol-metadata-property-row', |
||||
|
templateUrl: './scada-symbol-property-row.component.html', |
||||
|
styleUrls: ['./scada-symbol-property-row.component.scss'], |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => ScadaSymbolPropertyRowComponent), |
||||
|
multi: true |
||||
|
}, |
||||
|
{ |
||||
|
provide: NG_VALIDATORS, |
||||
|
useExisting: forwardRef(() => ScadaSymbolPropertyRowComponent), |
||||
|
multi: true |
||||
|
} |
||||
|
], |
||||
|
encapsulation: ViewEncapsulation.None |
||||
|
}) |
||||
|
export class ScadaSymbolPropertyRowComponent implements ControlValueAccessor, OnInit, Validator { |
||||
|
|
||||
|
@ViewChild('idInput') |
||||
|
idInput: ElementRef<HTMLInputElement>; |
||||
|
|
||||
|
@ViewChild('editButton') |
||||
|
editButton: MatButton; |
||||
|
|
||||
|
iotSvgPropertyTypes = iotSvgPropertyTypes; |
||||
|
iotSvgPropertyTypeTranslations = iotSvgPropertyTypeTranslations; |
||||
|
|
||||
|
@Input() |
||||
|
disabled: boolean; |
||||
|
|
||||
|
@Input() |
||||
|
index: number; |
||||
|
|
||||
|
@Input() |
||||
|
booleanPropertyIds: string[]; |
||||
|
|
||||
|
@Output() |
||||
|
propertyRemoved = new EventEmitter(); |
||||
|
|
||||
|
propertyRowFormGroup: UntypedFormGroup; |
||||
|
|
||||
|
modelValue: IotSvgProperty; |
||||
|
|
||||
|
private propagateChange = (_val: any) => {}; |
||||
|
|
||||
|
constructor(private fb: UntypedFormBuilder, |
||||
|
private cd: ChangeDetectorRef, |
||||
|
private popoverService: TbPopoverService, |
||||
|
private renderer: Renderer2, |
||||
|
private viewContainerRef: ViewContainerRef, |
||||
|
private propertiesComponent: ScadaSymbolPropertiesComponent) { |
||||
|
} |
||||
|
|
||||
|
ngOnInit() { |
||||
|
this.propertyRowFormGroup = this.fb.group({ |
||||
|
id: [null, [this.propertyIdValidator()]], |
||||
|
name: [null, [Validators.required]], |
||||
|
type: [null, [Validators.required]] |
||||
|
}); |
||||
|
this.propertyRowFormGroup.valueChanges.subscribe( |
||||
|
() => this.updateModel() |
||||
|
); |
||||
|
this.propertyRowFormGroup.get('type').valueChanges.subscribe((newType: IotSvgPropertyType) => { |
||||
|
this.onTypeChanged(newType); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.propagateChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: any): void { |
||||
|
} |
||||
|
|
||||
|
setDisabledState(isDisabled: boolean): void { |
||||
|
this.disabled = isDisabled; |
||||
|
if (isDisabled) { |
||||
|
this.propertyRowFormGroup.disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.propertyRowFormGroup.enable({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
writeValue(value: IotSvgProperty): void { |
||||
|
this.modelValue = value; |
||||
|
this.propertyRowFormGroup.patchValue( |
||||
|
{ |
||||
|
id: value?.id, |
||||
|
name: value?.name, |
||||
|
type: value?.type |
||||
|
}, {emitEvent: false} |
||||
|
); |
||||
|
this.cd.markForCheck(); |
||||
|
} |
||||
|
|
||||
|
editProperty($event: Event, matButton: MatButton, add = false, editCanceled = () => {}) { |
||||
|
if ($event) { |
||||
|
$event.stopPropagation(); |
||||
|
} |
||||
|
const trigger = matButton._elementRef.nativeElement; |
||||
|
if (this.popoverService.hasPopover(trigger)) { |
||||
|
this.popoverService.hidePopover(trigger); |
||||
|
} else { |
||||
|
const ctx: any = { |
||||
|
isAdd: add, |
||||
|
booleanPropertyIds: this.booleanPropertyIds, |
||||
|
property: deepClone(this.modelValue) |
||||
|
}; |
||||
|
const scadaSymbolPropertyPanelPopover = this.popoverService.displayPopover(trigger, this.renderer, |
||||
|
this.viewContainerRef, ScadaSymbolPropertyPanelComponent, ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], true, null, |
||||
|
ctx, |
||||
|
{}, |
||||
|
{}, {}, true); |
||||
|
scadaSymbolPropertyPanelPopover.tbComponentRef.instance.popover = scadaSymbolPropertyPanelPopover; |
||||
|
scadaSymbolPropertyPanelPopover.tbComponentRef.instance.propertySettingsApplied.subscribe((property) => { |
||||
|
scadaSymbolPropertyPanelPopover.hide(); |
||||
|
this.propertyRowFormGroup.patchValue( |
||||
|
{ |
||||
|
id: property.id, |
||||
|
name: property.name, |
||||
|
type: property.type |
||||
|
}, {emitEvent: false} |
||||
|
); |
||||
|
this.modelValue = property; |
||||
|
this.propagateChange(this.modelValue); |
||||
|
}); |
||||
|
scadaSymbolPropertyPanelPopover.tbDestroy.subscribe(() => { |
||||
|
if (!propertyValid(this.modelValue)) { |
||||
|
editCanceled(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
focus() { |
||||
|
this.idInput.nativeElement.scrollIntoView(); |
||||
|
this.idInput.nativeElement.focus(); |
||||
|
} |
||||
|
|
||||
|
onAdd(onCanceled: () => void) { |
||||
|
this.idInput.nativeElement.scrollIntoView(); |
||||
|
this.editProperty(null, this.editButton, true, onCanceled); |
||||
|
} |
||||
|
|
||||
|
public validate(c: UntypedFormControl) { |
||||
|
const idControl = this.propertyRowFormGroup.get('id'); |
||||
|
if (idControl.hasError('propertyIdNotUnique')) { |
||||
|
idControl.updateValueAndValidity({onlySelf: false, emitEvent: false}); |
||||
|
} |
||||
|
if (idControl.hasError('propertyIdNotUnique')) { |
||||
|
this.propertyRowFormGroup.get('id').markAsTouched(); |
||||
|
return { |
||||
|
propertyIdNotUnique: true |
||||
|
}; |
||||
|
} |
||||
|
const property: IotSvgProperty = {...this.modelValue, ...this.propertyRowFormGroup.value}; |
||||
|
if (!propertyValid(property)) { |
||||
|
return { |
||||
|
property: true |
||||
|
}; |
||||
|
} |
||||
|
return null; |
||||
|
} |
||||
|
|
||||
|
private propertyIdValidator(): ValidatorFn { |
||||
|
return control => { |
||||
|
if (!control.value) { |
||||
|
return { |
||||
|
required: true |
||||
|
}; |
||||
|
} |
||||
|
if (!this.propertiesComponent.propertyIdUnique(control.value, this.index)) { |
||||
|
return { |
||||
|
propertyIdNotUnique: true |
||||
|
}; |
||||
|
} |
||||
|
return null; |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
private onTypeChanged(newType: IotSvgPropertyType) { |
||||
|
this.modelValue = {...this.modelValue, ...{type: newType}}; |
||||
|
this.modelValue.default = defaultPropertyValue(newType); |
||||
|
} |
||||
|
|
||||
|
private updateModel() { |
||||
|
const value: IotSvgProperty = this.propertyRowFormGroup.value; |
||||
|
this.modelValue = {...this.modelValue, ...value}; |
||||
|
this.propagateChange(this.modelValue); |
||||
|
} |
||||
|
|
||||
|
} |
||||
Loading…
Reference in new issue