hostbbq-monitoring/ng/src/app/components/service-check-form/service-check-form.component.ts

import { Component, ElementRef, Input, OnInit, QueryList, ViewChildren } from '@angular/core';
import { FormControl, FormGroup, FormArray, FormBuilder } from '@angular/forms';
import { faMinusSquare, faPlusSquare } from '@fortawesome/free-solid-svg-icons';
import { ServiceApiService } from '../../services/service-api.service';
import { deepCopy } from '../../../../../common/util/object-utils';

@Component({
  selector: 'app-service-check-form',
  templateUrl: './service-check-form.component.html',
  styleUrls: ['./service-check-form.component.scss']
})
export class ServiceCheckFormComponent implements OnInit {
  @ViewChildren('checkInput')
  set checkRows(childs: QueryList<ElementRef<HTMLInputElement>>) {
    if (childs?.length && childs.get(0)?.nativeElement.value === '') {
      //new added children via addPattern without value gets focus
      childs.get(0)?.nativeElement.focus();
    }
  }

  @Input()
  serviceCheck!: HttpCheckConfig;
  public fa = { plus: faPlusSquare, delete: faMinusSquare };

  serviceCheckForm: FormGroup = this.formBuilder.group({
    id: -1, //constant for defaultValues
    title: '', //constant for defaultValues
    active: undefined, //constant for defaultValues
    url: '', //constant for defaultValues
    interval: 10, //constant for defaultValues
    timeout: 10, //constant for defaultValuess
    checks: this.formBuilder.array([]),
    notify: true,
    notifyThreshold: 3
  });

  constructor(private formBuilder: FormBuilder, private serviceApi: ServiceApiService) {}

  get checks(): FormArray {
    return this.serviceCheckForm.controls['checks'] as FormArray;
  }

  ngOnInit(): void {
    this.patchForm(this.serviceCheck);
  }

  private patchForm(serviceCheck: HttpCheckConfig) {
    this.checks.controls = [];
    serviceCheck.checks.reverse().forEach(e => {
      this.checks.controls.push(new FormControl(e));
    });
    this.serviceCheckForm.patchValue(serviceCheck);
  }

  addPattern() {
    this.checks.controls.unshift(new FormControl(''));
    //focus set via viewChildren setter, here is too early
  }

  removePattern(index: number) {
    this.checks.controls.splice(index, 1);
  }

  async save() {
    try {
      this.serviceCheckForm.updateValueAndValidity();
      const copy = deepCopy(this.serviceCheckForm.value as HttpCheckConfig);
      copy.checks = this.checks.controls.map(e => e.value).reverse();
      const savedCheck = await this.serviceApi.saveServiceCheck(this.serviceCheck.serverId as number, copy);
      this.patchForm(savedCheck);
    } catch (error: any) {
      console.error(error);
    }
  }
}