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 ) )
selector c8y-datapoint-selection-list
imports ListGroupComponent CdkDropList EmptyStateComponent FormsModule ReactiveFormsModule DatapointSelectorListItemComponent CdkDrag ListItemDragHandleComponent CdkDragHandle IconDirective C8yTranslatePipe
templateUrl ./datapoint-selection-list.component.html

Index

Properties
Methods
Inputs
Outputs
Accessors

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

Enable or disable drag and drop functionality.
config
Type : Partial<DatapointSelectorModalOptions>
Default value : {}
defaultFormOptions
Type : Partial<DatapointAttributesFormConfig>
Default value : {}
listTitle
Type : string
Default value : ''
maxActiveCount
Type : number

Maximum number of active datapoints allowed in the list.
minActiveCount
Type : number
Default value : 1

Minimum number of active datapoints required in the list.
removeTitle
Type : boolean
Default value : false
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 | null
writeValue
writeValue(datapoints: KPIDetails[])
Parameters :
Name Type Optional
datapoints KPIDetails[] No
Returns : void

Properties

AddButtonTypes
Type : unknown
Default value : AddButtonTypes
DATA_POINTS_LABEL
Type : unknown
Default value : gettext('Data points`display`')
datapointLibraryEntries
Type : Observable<IResultList<ManagedObjectKPI>>
formArray
Type : FormArray
maxActiveCountReached
Type : unknown
Default value : false
maxActiveErrorMessage
Type : unknown
Default value : gettext( 'At maximum {{ maxActive }} data point(s) can be selected and active.' )
minActiveErrorMessage
Type : unknown
Default value : gettext( 'At least {{ minActive }} data point(s) must be selected and active.' )

Accessors

formGroups
getformGroups() 
@if (!removeTitle) {
  <div class="card-header separator sticky-top bg-inherit">
    <span class="card-title h4">
      {{ (listTitle ? listTitle : DATA_POINTS_LABEL) | translate }}
    </span>
  </div>
}

<c8y-list-group
  class="flex-grow ff-scroll-fix cdk-droplist"
  cdkDropList
  (cdkDropListDropped)="drop($event)"
  [cdkDropListDisabled]="!allowDragAndDrop || formArray.controls?.length < 2"
>
  @if (formArray.errors?.minActiveCount && formArray.touched) {
    <div
      class="alert alert-warning m-t-8"
      role="alert"
    >
      {{ minActiveErrorMessage | translate: { minActive: minActiveCount } }}
    </div>
  }

  @if (formArray.errors?.maxActiveCount && formArray.touched) {
    <div
      class="alert alert-warning m-t-8"
      role="alert"
    >
      {{ maxActiveErrorMessage | translate: { maxActive: maxActiveCount } }}
    </div>
  }

  <ng-content select=".alert"></ng-content>

  @if (!formArray.controls?.length) {
    <div class="p-t-8">
      <c8y-ui-empty-state
        class="p-t-8"
        [icon]="'c8y-data-points'"
        [title]="'No data points to display.' | translate"
        [subtitle]="'Add your first data point.' | translate"
        [horizontal]="true"
      ></c8y-ui-empty-state>
    </div>
  }

  @for (formGroup of formGroups; track formGroup; let index = $index) {
    <div [formGroup]="formGroup">
      <c8y-datapoint-selector-list-item
        class="d-block"
        [defaultFormOptions]="defaultFormOptions"
        [activeToggleDisabled]="maxActiveCountReached"
        [showActiveToggle]="true"
        [addButtonType]="AddButtonTypes.none"
        [showOptions]="true"
        [editable]="true"
        [colorPickerDisabled]="false"
        [actions]="actions"
        [optionToRemove]="true"
        [datapointLibraryEntries]="datapointLibraryEntries"
        [hasUnlinkTemplateOption]="true"
        formControlName="details"
        (removed)="onItemRemoved(index)"
        cdkDrag
      >
        <c8y-li-drag-handle
          title="{{ 'Click and drag to reorder' | translate }}"
          cdkDragHandle
        >
          <i c8yIcon="drag-reorder"></i>
        </c8y-li-drag-handle>
      </c8y-datapoint-selector-list-item>
    </div>
  }

  <div class="card-footer bg-inherit">
    <button
      class="btn btn-default btn-sm"
      [title]="'Add data point' | translate"
      type="button"
      data-cy="c8y-datapoint-selection-list--add-datapoint-button"
      (click)="add()"
    >
      <i c8yIcon="plus-circle"></i>
      {{ 'Add data point' | translate }}
    </button>
  </div>
</c8y-list-group>

results matching ""

    No results matching ""