feat(datapoints-graph): alarm event attributes form

Reset form after adding custom item n/a
SoftwareAG · May 22, 2024 · a784944 · a784944
1 parent 7572fb5
commit a784944
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 4 deletions.
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,4 +1,11 @@
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import {
+  Component,
+  forwardRef,
+  Input,
+  OnInit,
+  QueryList,
+  ViewChildren,
+} from '@angular/core';
 import {
   AbstractControl,
   ControlValueAccessor,
@@ -8,11 +15,11 @@ import {
   NG_VALUE_ACCESSOR,
   ValidationErrors,
   Validator,
-  ValidatorFn,
   Validators,
 } 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',
@@ -36,6 +43,9 @@ export class AlarmEventAttributesFormComponent
   @Input() timelineType: TimelineType;
   formGroup: FormGroup;
 
+  @ViewChildren(FormGroupComponent)
+  private formGroups: QueryList<FormGroupComponent>;
+
   constructor(private formBuilder: FormBuilder) {}
 
   ngOnInit() {
@@ -46,6 +56,22 @@ export class AlarmEventAttributesFormComponent
     });
   }
 
+  reset() {
+    this.formGroup.patchValue({ label: '', filters: { type: '' } });
+
+    this.formGroups.forEach((formGroup) => {
+      this.formGroup.controls.label.markAsUntouched();
+      (
+        this.formGroup.controls['filters'] as FormGroup
+      ).controls.type.markAsUntouched();
+
+      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/...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,12 +5,14 @@ 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 { 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',
@@ -22,6 +24,8 @@ 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>();
@@ -73,10 +77,10 @@ export class CustomAlarmEventFormComponent implements OnInit, OnDestroy {
         __target: this.target,
         details: {
           timelineType: this.timelineType,
-          filters: { type: '' },
-          label: '',
         },
       });
+
+      this.alarmEventAttributesFormComponent.reset();
     }
   }