feat(datapoints-graph): custom alarm and event attributes form

Destroy attribute form to get initial state. n/a
SoftwareAG · May 22, 2024 · d35f0c0 · d35f0c0
1 parent 30827a7
commit d35f0c0
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 83 deletions.
diff --git a/...-event-selector/alarm-event-attributes-form/alarm-event-attributes-form.component.spec.ts b/...-event-selector/alarm-event-attributes-form/alarm-event-attributes-form.component.spec.ts
@@ -55,34 +55,4 @@ describe('AlarmEventAttributesFormComponent', () => {
       });
     });
   });
-
-  it('reset', fakeAsync(() => {
-    // given
-    component.ngOnInit();
-    fixture.detectChanges();
-    component.formGroup.patchValue({
-      label: 'test',
-      filters: { type: 'test' },
-      timelineType: 'ALARM',
-    });
-    // when
-    component.reset();
-    tick(1000);
-    // then
-    expect(component.formGroup.value).toEqual({
-      label: '',
-      filters: { type: '' },
-      timelineType: 'ALARM',
-    });
-    expect(component.formGroup.controls.label.touched).toBe(false);
-    expect(
-      (component.formGroup.controls['filters'] as FormGroup).controls.type
-        .touched
-    ).toBe(false);
-
-    component.formGroups.forEach((f) => {
-      expect(f.hasError).toBe(false);
-      expect(f.errors).toBe(null);
-    });
-  }));
 });
diff --git a/...alarm-event-selector/alarm-event-attributes-form/alarm-event-attributes-form.component.ts b/...alarm-event-selector/alarm-event-attributes-form/alarm-event-attributes-form.component.ts
@@ -1,11 +1,4 @@
-import {
-  Component,
-  forwardRef,
-  Input,
-  OnInit,
-  QueryList,
-  ViewChildren,
-} from '@angular/core';
+import { Component, forwardRef, Input, OnInit } from '@angular/core';
 import {
   AbstractControl,
   ControlValueAccessor,
@@ -19,7 +12,6 @@ import {
 } from '@angular/forms';
 import { take } from 'rxjs/operators';
 import { TimelineType } from '../alarm-event-selector.model';
-import { FormGroupComponent } from '@c8y/ngx-components';
 
 @Component({
   selector: 'c8y-alarm-event-attributes-form',
@@ -43,9 +35,6 @@ export class AlarmEventAttributesFormComponent
   @Input() timelineType: TimelineType;
   formGroup: FormGroup;
 
-  @ViewChildren(FormGroupComponent)
-  formGroups: QueryList<FormGroupComponent>;
-
   constructor(private formBuilder: FormBuilder) {}
 
   ngOnInit() {
@@ -56,24 +45,6 @@ export class AlarmEventAttributesFormComponent
     });
   }
 
-  reset() {
-    // resetting values to initial state
-    this.formGroup.patchValue({ label: '', filters: { type: '' } });
-    // marking controls as untouched so inputs are not marked as invalid (with red border)
-    this.formGroup.controls.label.markAsUntouched();
-    (
-      this.formGroup.controls['filters'] as FormGroup
-    ).controls.type.markAsUntouched();
-
-    // resetting initial state of FormGroupComponent so validation message are not shown
-    this.formGroups.forEach((formGroup) => {
-      setTimeout(() => {
-        formGroup.errors = null;
-        formGroup.hasError = false;
-      }, (formGroup as any)?.VALIDATION_DEBOUNCE_MS || 1000);
-    });
-  }
-
   validate(_control: AbstractControl): ValidationErrors {
     return this.formGroup?.valid ? null : { formInvalid: {} };
   }

diff --git a/src/datapoints-graph/alarm-event-selector/alarm-event-selector.component.html b/src/datapoints-graph/alarm-event-selector/alarm-event-selector.component.html
@@ -126,13 +126,16 @@ <h1 class="c8y-icon c8y-icon-data-points c8y-icon-duocolor"></h1>
                   [collapse]="!isExpanded"
                   [isAnimated]="true"
                 >
-                  <c8y-custom-alarm-event-form
-                    [timelineType]="timelineType"
-                    [target]="assetSelection | async"
-                    (added)="itemAdded($event); isExpanded = false"
-                    (cancel)="isExpanded = false"
-                    class="d-block separator-top"
-                  ></c8y-custom-alarm-event-form>
+                  <div [style.min-height]="'230px'">
+                    <c8y-custom-alarm-event-form
+                      *ngIf="isExpanded"
+                      [timelineType]="timelineType"
+                      [target]="assetSelection | async"
+                      (added)="itemAdded($event); isExpanded = false"
+                      (cancel)="isExpanded = false"
+                      class="d-block separator-top"
+                    ></c8y-custom-alarm-event-form>
+                  </div>
                 </div>
               </div>
             </div>

diff --git a/...s-graph/alarm-event-selector/custom-alarm-event-form/custom-alarm-event-form.component.ts b/...s-graph/alarm-event-selector/custom-alarm-event-form/custom-alarm-event-form.component.ts
@@ -5,14 +5,12 @@ import {
   OnDestroy,
   OnInit,
   Output,
-  ViewChild,
 } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { AlarmOrEvent, TimelineType } from '../alarm-event-selector.model';
-import { map, takeUntil } from 'rxjs/operators';
+import { map, startWith, takeUntil } from 'rxjs/operators';
 import { Observable, Subject } from 'rxjs';
 import { IIdentified } from '@c8y/client';
-import { AlarmEventAttributesFormComponent } from '../alarm-event-attributes-form/alarm-event-attributes-form.component';
 
 @Component({
   selector: 'c8y-custom-alarm-event-form',
@@ -24,8 +22,6 @@ export class CustomAlarmEventFormComponent implements OnInit, OnDestroy {
   @Output() added = new EventEmitter<AlarmOrEvent>();
   @Output() cancel = new EventEmitter<void>();
 
-  @ViewChild(AlarmEventAttributesFormComponent)
-  alarmEventAttributesFormComponent: AlarmEventAttributesFormComponent;
   formGroup: FormGroup;
   valid$: Observable<boolean>;
   private destroy$ = new Subject<void>();
@@ -41,7 +37,8 @@ export class CustomAlarmEventFormComponent implements OnInit, OnDestroy {
 
     this.valid$ = this.formGroup.statusChanges.pipe(
       takeUntil(this.destroy$),
-      map((val) => val === 'VALID')
+      map((val) => val === 'VALID'),
+      startWith(false)
     );
   }
 
@@ -71,16 +68,6 @@ export class CustomAlarmEventFormComponent implements OnInit, OnDestroy {
     if (this.formGroup.valid) {
       const formValue = this.transformFormValue(this.formGroup.value);
       this.added.emit(formValue);
-
-      this.formGroup.patchValue({
-        color: this.defaultColor,
-        __target: this.target,
-        details: {
-          timelineType: this.timelineType,
-        },
-      });
-
-      this.alarmEventAttributesFormComponent.reset();
     }
   }