datapoint-selector/datapoint-selection-list/datapoint-selection-list.component.ts
ControlValueAccessor
Validator
OnInit
OnChanges
| providers |
{
provide: NG_VALUE_ACCESSOR, multi: true, useExisting: forwardRef(() => DatapointSelectionListComponent)
}
{
provide: NG_VALIDATORS, useExisting: forwardRef(() => DatapointSelectionListComponent), multi: true
}
|
| selector | c8y-datapoint-selection-list |
| templateUrl | ./datapoint-selection-list.component.html |
Properties |
Methods |
Inputs |
Outputs |
constructor(datapointSelector: DatapointSelectorService, datapointLibrary: DatapointLibraryService, formBuilder: FormBuilder, widgetComponent: WidgetConfigComponent)
|
|||||||||||||||
|
Parameters :
|
| actions |
Type : DatapointAction[]
|
Default value : []
|
| allowDragAndDrop |
Type : boolean
|
Default value : true
|
| config |
Type : Partial<DatapointSelectorModalOptions>
|
Default value : {}
|
| defaultFormOptions |
Type : Partial<DatapointAttributesFormConfig>
|
Default value : {}
|
| maxActiveCount |
Type : number
|
| minActiveCount |
Type : number
|
Default value : 1
|
| resolveContext |
Type : boolean
|
Default value : true
|
| change |
Type : Observable<any[]>
|
| isValid |
Type : Observable<boolean>
|
| add |
add()
|
|
Returns :
void
|
| drop | ||||||
drop(event: CdkDragDrop<KPIDetails[]>)
|
||||||
|
Parameters :
Returns :
void
|
| ngOnChanges | ||||||
ngOnChanges(changes: SimpleChanges)
|
||||||
|
Parameters :
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| onItemRemoved | ||||||
onItemRemoved(index: number)
|
||||||
|
Parameters :
Returns :
void
|
| registerOnChange | ||||||
registerOnChange(fn: any)
|
||||||
|
Parameters :
Returns :
void
|
| registerOnTouched | ||||||
registerOnTouched(fn: any)
|
||||||
|
Parameters :
Returns :
void
|
| validate | ||||||
validate(control: AbstractControl)
|
||||||
|
Parameters :
Returns :
ValidationErrors
|
| writeValue | ||||||
writeValue(obj: KPIDetails[])
|
||||||
|
Parameters :
Returns :
void
|
| datapointLibraryEntries |
Type : Observable<IResultList<ManagedObjectKPI>>
|
| formArray |
Type : FormArray
|
| maxActiveCountReached |
Default value : false
|
<div class="card-header separator sticky-top bg-component">
<span class="card-title h4" translate>Data points</span>
</div>
<c8y-list-group
class="flex-grow ff-scroll-fix cdk-droplist"
cdkDropList
(cdkDropListDropped)="drop($event)"
[cdkDropListDisabled]="!allowDragAndDrop || formArray.controls?.length < 2"
>
<div class="alert alert-info" role="alert" ngNonBindable *ngIf="formArray.errors?.minActiveCount" translate [translateParams]="formArray.errors?.minActiveCount">
At least {{ minActive }} active datapoints must be selected.
</div>
<div class="alert alert-info" role="alert" ngNonBindable *ngIf="formArray.errors?.maxActiveCount" translate [translateParams]="formArray.errors?.maxActiveCount">
At maximum {{ maxActive }} active datapoints are allowed to be selected.
</div>
<ng-content select=".alert"></ng-content>
<div class="c8y-empty-state" *ngIf="!formArray.controls?.length">
<h1 class="c8y-icon c8y-icon-data-points c8y-icon-duocolor"></h1>
<div>
<p>
<strong translate>No data points to display.</strong>
</p>
<small translate>Add your first data point.</small>
</div>
</div>
<div [formGroup]="dpForm" *ngFor="let dpForm of formArray.controls; let index = index;">
<c8y-datapoint-selector-list-item
class="d-block"
[defaultFormOptions]="defaultFormOptions"
[activeToggleDisabled]="maxActiveCountReached"
[showActiveToggle]="true"
[showAddRemoveButton]="false"
[showOptions]="true"
[editable]="true"
[colorPickerDisabled]="false"
[actions]="actions"
[optionToRemove]="true"
[datapointLibraryEntries]="datapointLibraryEntries"
[hasUnlinkTemplateOption]="true"
formControlName="details"
(removed)="onItemRemoved(index)"
cdkDrag
>
<c8y-li-drag-handle cdkDragHandle>
<i c8yIcon="drag-reorder"></i>
</c8y-li-drag-handle>
</c8y-datapoint-selector-list-item>
</div>
</c8y-list-group>
<div class="card-footer bg-component sticky-bottom separator">
<button [title]="'Add data point' | translate" class="btn btn-default btn-sm" (click)="add()">
<i c8yIcon="plus-circle"></i>
<span translate>Add data point</span>
</button>
</div>