Merge event-alarm selector

src/datapoints-graph/alarm-event-selector/alarm-event-attributes-form/alarm-event-attributes-form.component.html

@@ -0,0 +1,45 @@
+<div [formGroup]="formGroup">
+  <c8y-form-group>
+    <div class="d-flex a-i-center gap-8">
+      <label class="m-0">{{ 'Label' | translate }}</label>
+      <input
+        class="form-control flex-grow"
+        name="label"
+        formControlName="label"
+        [placeholder]="
+          'e.g. {{ example }}'
+            | translate
+              : {
+                  example:
+                    timelineType === 'ALARM'
+                      ? 'Alarm unavailable'
+                      : 'Location update'
+                }
+        "
+      />
+    </div>
+  </c8y-form-group>
+
+  <div formGroupName="filters">
+    <c8y-form-group>
+      <div class="d-flex a-i-center gap-8">
+        <label class="m-0">{{ 'Type' | translate }}</label>
+        <input
+          class="form-control flex-grow"
+          name="type"
+          formControlName="type"
+          [placeholder]="
+            'e.g. {{ example }}'
+              | translate
+                : {
+                    example:
+                      timelineType === 'ALARM'
+                        ? 'c8y_UnavailabilityAlarm'
+                        : 'c8y_LocationUpdate'
+                  }
+          "
+        />
+      </div>
+    </c8y-form-group>
+  </div>
+</div>

src/datapoints-graph/alarm-event-selector/alarm-event-attributes-form/alarm-event-attributes-form.component.spec.ts

@@ -0,0 +1,58 @@
+import { AlarmEventAttributesFormComponent } from './alarm-event-attributes-form.component';
+import {
+  ComponentFixture,
+  fakeAsync,
+  TestBed,
+  tick,
+} from '@angular/core/testing';
+import { CommonModule, FormsModule } from '@c8y/ngx-components';
+import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+
+describe('AlarmEventAttributesFormComponent', () => {
+  let component: AlarmEventAttributesFormComponent;
+  let fixture: ComponentFixture<AlarmEventAttributesFormComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CommonModule.forRoot(), FormsModule, ReactiveFormsModule],
+      declarations: [AlarmEventAttributesFormComponent],
+      providers: [],
+    });
+    await TestBed.compileComponents();
+
+    fixture = TestBed.createComponent(AlarmEventAttributesFormComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('onInit', () => {
+    it('should init form for event', () => {
+      // given
+      component.timelineType = 'EVENT';
+      // when
+      fixture.detectChanges();
+      // then
+      expect(component.formGroup.value).toEqual({
+        label: '',
+        filters: { type: '' },
+        timelineType: '',
+      });
+    });
+
+    it('should init form for alarm', () => {
+      // given
+      component.timelineType = 'ALARM';
+      // when
+      fixture.detectChanges();
+      // then
+      expect(component.formGroup.value).toEqual({
+        label: '',
+        filters: { type: '' },
+        timelineType: '',
+      });
+    });
+  });
+});

src/datapoints-graph/alarm-event-selector/alarm-event-attributes-form/alarm-event-attributes-form.component.ts

@@ -0,0 +1,67 @@
+import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import {
+  AbstractControl,
+  ControlValueAccessor,
+  FormBuilder,
+  FormGroup,
+  NG_VALIDATORS,
+  NG_VALUE_ACCESSOR,
+  ValidationErrors,
+  Validator,
+  Validators,
+} from '@angular/forms';
+import { take } from 'rxjs/operators';
+import { TimelineType } from '../alarm-event-selector.model';
+
+@Component({
+  selector: 'c8y-alarm-event-attributes-form',
+  templateUrl: './alarm-event-attributes-form.component.html',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => AlarmEventAttributesFormComponent),
+      multi: true,
+    },
+    {
+      provide: NG_VALIDATORS,
+      useExisting: forwardRef(() => AlarmEventAttributesFormComponent),
+      multi: true,
+    },
+  ],
+})
+export class AlarmEventAttributesFormComponent
+  implements ControlValueAccessor, Validator, OnInit
+{
+  @Input() timelineType: TimelineType;
+  formGroup: FormGroup;
+
+  constructor(private formBuilder: FormBuilder) {}
+
+  ngOnInit() {
+    this.formGroup = this.formBuilder.group({
+      label: ['', [Validators.required]],
+      filters: this.formBuilder.group({ type: ['', [Validators.required]] }),
+      timelineType: '',
+    });
+  }
+
+  validate(_control: AbstractControl): ValidationErrors {
+    return this.formGroup?.valid ? null : { formInvalid: {} };
+  }
+
+  writeValue(obj: any): void {
+    this.formGroup.patchValue(obj);
+  }
+
+  registerOnChange(fn: any): void {
+    this.formGroup.valueChanges.subscribe(fn);
+  }
+
+  registerOnTouched(fn: any): void {
+    this.formGroup.valueChanges.pipe(take(1)).subscribe(fn);
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    isDisabled ? this.formGroup.disable() : this.formGroup.enable();
+  }
+}

src/datapoints-graph/alarm-event-selector/alarm-event-selection-list/alarm-event-selection-list.component.html

@@ -0,0 +1,57 @@
+<div class="card-header separator sticky-top bg-inherit">
+  <span class="card-title h4">{{
+    timelineTypeTexts.listTitle | translate
+  }}</span>
+</div>
+
+<c8y-list-group
+  class="flex-grow ff-scroll-fix cdk-droplist"
+  cdkDropList
+  (cdkDropListDropped)="drop($event)"
+  [cdkDropListDisabled]="formArray.controls?.length < 2"
+>
+  <div class="p-t-8" *ngIf="!formArray.controls?.length">
+    <c8y-ui-empty-state
+      [icon]="timelineTypeTexts.emptyStateIcon"
+      [title]="timelineTypeTexts.emptyStateTitle | translate"
+      [subtitle]="timelineTypeTexts.emptyStateSubtitle | translate"
+      [horizontal]="true"
+      class="p-t-8"
+    ></c8y-ui-empty-state>
+  </div>
+  <div
+    *ngFor="let itemForm of formArray.controls; let index = index"
+    [formGroup]="itemForm"
+  >
+    <c8y-alarm-event-selector-list-item
+      class="d-block"
+      cdkDrag
+      formControlName="details"
+      [showAddRemoveButton]="false"
+      [optionToRemove]="true"
+      [showActiveToggle]="true"
+      [timelineType]="timelineType"
+      [showAttributesForm]="true"
+      (removed)="onItemRemoved(index)"
+    >
+      <c8y-li-drag-handle
+        cdkDragHandle
+        title="{{ 'Click and drag to reorder' | translate }}"
+      >
+        <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 separator-bottom">
+  <button
+    [title]="timelineTypeTexts.addButtonLabel | translate"
+    type="button"
+    class="btn btn-default btn-sm"
+    (click)="add()"
+  >
+    <i c8yIcon="plus-circle"></i>
+    {{ timelineTypeTexts.addButtonLabel | translate }}
+  </button>
+</div>

src/datapoints-graph/alarm-event-selector/alarm-event-selection-list/alarm-event-selection-list.component.spec.ts

@@ -0,0 +1,59 @@
+import { AlarmEventSelectionListComponent } from './alarm-event-selection-list.component';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {
+  CommonModule,
+  FormsModule,
+  ListGroupModule,
+} from '@c8y/ngx-components';
+import { ReactiveFormsModule } from '@angular/forms';
+import { BsModalService } from 'ngx-bootstrap/modal';
+import { WidgetConfigComponent } from '@c8y/ngx-components/context-dashboard';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+
+describe('AlarmEventSelectionListComponent', () => {
+  let component: AlarmEventSelectionListComponent;
+  let fixture: ComponentFixture<AlarmEventSelectionListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        CommonModule.forRoot(),
+        FormsModule,
+        ReactiveFormsModule,
+        ListGroupModule,
+        DragDropModule,
+      ],
+      declarations: [AlarmEventSelectionListComponent],
+      providers: [
+        BsModalService,
+        {
+          provide: WidgetConfigComponent,
+          useValue: {
+            context: { id: 1, name: 'test device', c8y_IsDevice: true },
+          },
+        },
+      ],
+    }).compileComponents();
+    await TestBed.compileComponents();
+
+    fixture = TestBed.createComponent(AlarmEventSelectionListComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should set context asset', () => {
+    // when
+    fixture.detectChanges();
+    // then
+    expect(component.config).toEqual({
+      contextAsset: {
+        id: 1,
+        name: 'test device',
+        c8y_IsDevice: true,
+      },
+    });
+  });
+});