alarm-event-selector/alarm-event-selection-list/alarm-event-selection-list.component.ts
ControlValueAccessor
Validator
OnInit
OnDestroy
| providers |
)
)
|
| selector | c8y-alarm-event-selection-list |
| imports |
ListGroupComponent
CdkDropList
EmptyStateComponent
FormsModule
ReactiveFormsModule
AlarmEventSelectorListItemComponent
CdkDrag
ListItemDragHandleComponent
CdkDragHandle
IconDirective
NgClass
C8yTranslatePipe
|
| templateUrl | ./alarm-event-selection-list.component.html |
Properties |
Methods |
Inputs |
Accessors |
constructor(alarmEventModalService: AlarmEventSelectorModalService, alarmEventSelectService: AlarmEventSelectorService, formBuilder: FormBuilder, activatedRoute: ActivatedRoute, contextRouteService: ContextRouteService, widgetComponent: WidgetConfigComponent)
|
|||||||||||||||||||||
|
Parameters :
|
| activeToggleAsSwitch |
Type : boolean
|
Default value : true
|
|
Display the alarm/events as switch. If disabled it is displayed as checkbox instead. |
| addButtonLabel |
Type : string
|
|
The label for the button to add items to the list. If not provided, a default label will be used based on the timeline type. |
| canDragAndDrop |
Type : boolean
|
Default value : true
|
| canEdit |
Type : boolean
|
Default value : true
|
|
Whether the user can edit items in the alarm/event list. |
| canRemove |
Type : boolean
|
Default value : true
|
|
Whether the user can remove items from the list. |
| config |
Type : Partial<AlarmEventSelectorModalOptions>
|
Default value : {}
|
|
The configuration for the alarms-events selector modal. |
| datapoints |
Type : {}
|
Default value : []
|
| hideSource |
Type : boolean
|
Default value : false
|
|
Hide or show the source of the alarm or event. |
| inline |
Type : boolean
|
Default value : false
|
|
Display the list inline or as a dropdown. If set to true, the list will be displayed inline. |
| omitProperties |
Type : OmitSelectorProperties
|
Default value : { color: false, label: false }
|
| timelineType |
Type : TimelineType
|
Default value : 'ALARM'
|
|
The type of timeline to be displayed. Can be either 'ALARM' or 'EVENT'. |
| title |
Type : string
|
| add |
add()
|
|
Returns :
void
|
| drop | ||||||
drop(event: CdkDragDrop<AlarmOrEvent[]>)
|
||||||
|
Parameters :
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
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(alarmsOrEvents: AlarmOrEvent[])
|
||||||
|
Parameters :
Returns :
void
|
| contextSourceId |
Type : number | string | null
|
| emptyState |
Type : EmptyStateComponent
|
Decorators :
@ContentChild(EmptyStateComponent)
|
| formArray |
Type : FormArray
|
| timelineTypeTexts |
Type : TimelineTypeTexts
|
| formGroups |
getformGroups()
|
@if (!inline) {
<div class="card-header separator-top-bottom sticky-top bg-inherit">
<span class="card-title h4">{{ title | translate }}</span>
</div>
}
<c8y-list-group
class="flex-grow ff-scroll-fix cdk-droplist"
cdkDropList
(cdkDropListDropped)="drop($event)"
[cdkDropListDisabled]="formArray.controls?.length < 2"
>
@if (!formArray.controls?.length) {
<div class="p-t-8">
<ng-content select="c8y-ui-empty-state"></ng-content>
@if (!emptyState) {
<c8y-ui-empty-state
class="p-t-8"
[icon]="timelineTypeTexts.emptyStateIcon"
[title]="timelineTypeTexts.emptyStateTitle | translate"
[subtitle]="timelineTypeTexts.emptyStateSubtitle | translate"
[horizontal]="true"
></c8y-ui-empty-state>
}
</div>
}
@for (formGroup of formGroups; track formGroup; let index = $index) {
<div [formGroup]="formGroup">
<c8y-alarm-event-selector-list-item
class="d-block"
cdkDrag
[cdkDragDisabled]="!canDragAndDrop"
formControlName="details"
[showAddRemoveButton]="false"
[datapoints]="datapoints"
[optionToRemove]="canRemove"
[showActiveToggle]="true"
[timelineType]="timelineType"
[allowItemEdit]="canEdit"
[hideSource]="hideSource"
[displayAsSwitch]="activeToggleAsSwitch"
[omitProperties]="omitProperties"
(removed)="onItemRemoved(index)"
>
@if (canDragAndDrop) {
<c8y-li-drag-handle
title="{{ 'Click and drag to reorder' | translate }}"
cdkDragHandle
>
<i c8yIcon="drag-reorder"></i>
</c8y-li-drag-handle>
}
</c8y-alarm-event-selector-list-item>
</div>
}
</c8y-list-group>
<div class="card-footer bg-inherit">
<button
class="btn btn-default btn-sm"
[title]="addButtonLabel | translate"
type="button"
(click)="add()"
>
@if (canDragAndDrop) {
<i c8yIcon="plus-circle"></i>
}
{{ addButtonLabel | translate }}
</button>
</div>