Web SDK documentation
  1. Components
  2. DatapointSelectionListComponent

File

datapoint-selector/datapoint-selection-list/datapoint-selection-list.component.ts

Implements

ControlValueAccessor Validator OnInit OnChanges

Metadata

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

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(datapointSelector: DatapointSelectorService, datapointLibrary: DatapointLibraryService, formBuilder: FormBuilder, widgetComponent: WidgetConfigComponent)
Parameters :
Name Type Optional
datapointSelector DatapointSelectorService No
datapointLibrary DatapointLibraryService No
formBuilder FormBuilder No
widgetComponent WidgetConfigComponent No

Inputs

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

Outputs

change
Type : Observable<any[]>
isValid
Type : Observable<boolean>

Methods

add
add()
Returns : void
drop
drop(event: CdkDragDrop<KPIDetails[]>)
Parameters :
Name Type Optional
event CdkDragDrop<KPIDetails[]> No
Returns : void
ngOnChanges
ngOnChanges(changes: SimpleChanges)
Parameters :
Name Type Optional
changes SimpleChanges No
Returns : void
ngOnInit
ngOnInit()
Returns : void
onItemRemoved
onItemRemoved(index: number)
Parameters :
Name Type Optional
index number No
Returns : void
registerOnChange
registerOnChange(fn: any)
Parameters :
Name Type Optional
fn any No
Returns : void
registerOnTouched
registerOnTouched(fn: any)
Parameters :
Name Type Optional
fn any No
Returns : void
validate
validate(control: AbstractControl)
Parameters :
Name Type Optional
control AbstractControl No
Returns : ValidationErrors
writeValue
writeValue(obj: KPIDetails[])
Parameters :
Name Type Optional
obj KPIDetails[] No
Returns : void

Properties

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 data points 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 data points 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>

results matching ""

    No results matching ""