ems-frontend/src/app/employee/edit/edit.component.ts

import { Component, inject, OnInit } from '@angular/core';
import {
  AbstractControl,
  FormBuilder,
  FormGroup,
  ReactiveFormsModule,
  Validators,
} from '@angular/forms';
import {
  MAT_DIALOG_DATA,
  MatDialogActions,
  MatDialogClose,
  MatDialogContent,
  MatDialogRef,
  MatDialogTitle,
} from '@angular/material/dialog';
import { NgForOf, NgIf } from '@angular/common';
import { MatFormField, MatHint } from '@angular/material/form-field';
import { MatError, MatInput, MatLabel } from '@angular/material/input';
import { MatButton } from '@angular/material/button';
import { Employee } from '../Employee';
import EmployeeApiService from '../../services/employee-api.service';
import QualificationService from '../../services/qualification.service';
import { Qualification } from '../../qualification/Qualification';
import { MatOption, MatSelect } from '@angular/material/select';
import { debounceTime } from 'rxjs';

@Component({
  selector: 'app-edit',
  imports: [
    MatDialogTitle,
    MatDialogContent,
    NgIf,
    ReactiveFormsModule,
    MatFormField,
    MatInput,
    MatDialogActions,
    MatButton,
    MatDialogClose,
    MatLabel,
    MatSelect,
    MatOption,
    NgForOf,
    MatHint,
    MatError,
  ],
  templateUrl: './edit.component.html',
  standalone: true,
})
export class EditComponent implements OnInit {
  employeeForm!: FormGroup;
  formBuilder: FormBuilder = inject(FormBuilder);
  employeeService: EmployeeApiService = inject(EmployeeApiService);
  qualificationService: QualificationService = inject(QualificationService);
  dialogRef: MatDialogRef<EditComponent> = inject(MatDialogRef);
  employee: Employee = inject(MAT_DIALOG_DATA);
  qualifications: Qualification[] = [];
  errorMsgs: Record<string, string> = {
    firstName: 'First name is required',
    lastName: 'Last name is required',
    street: 'Street is required',
    postcode: 'Postcode must be 5 characters long',
    city: 'City is required',
    phone: 'Phone is required',
    qualifications: 'Qualifications are required',
  };

  errors: Record<string, string> = {};

  ngOnInit(): void {
    this.loadQualifications();
    this.employeeForm = this.formBuilder.group({
      firstName: [this.employee.firstName, Validators.required],
      lastName: [this.employee.lastName, Validators.required],
      street: [this.employee.street, Validators.required],
      postcode: [
        this.employee.postcode,
        [Validators.required, this.validatePostcode],
      ],
      city: [this.employee.city, Validators.required],
      phone: [this.employee.phone, Validators.required],
      qualifications: [this.employee.skillSet?.map((skill) => skill.id) ?? []],
    });

    Object.keys(this.employeeForm.controls).forEach((controlName: string) => {
      const control = this.employeeForm.controls[controlName];
      control.valueChanges.pipe(debounceTime(10)).subscribe(() => {
        this.showErrorMsg(controlName, control);
      });
    });
  }

  loadQualifications() {
    this.qualificationService
      .getAll()
      .subscribe((qualifications) => (this.qualifications = qualifications));
  }

  submit() {
    if (this.employeeForm === null || !this.employeeForm.valid) {
      console.error('Form invalid');
      return;
    }

    if (this.employee.id === undefined) {
      console.error('Employee ID is undefined');
      return;
    }

    const formValue = this.employeeForm.value;
    const employeeData = {
      ...formValue,
      skillSet: formValue.qualifications,
    };

    this.employeeService
      .update(employeeData as Employee, this.employee.id)
      .subscribe();
    this.dialogRef.close(true);
  }

  showErrorMsg(controlName: string, control: AbstractControl | undefined) {
    if (control?.errors) {
      this.errors[controlName] = this.errorMsgs[controlName];
    }
  }

  validatePostcode(control: AbstractControl) {
    const postcode = control.value as number;
    if (postcode.toString().length !== 5) {
      return { invalidPostcode: true };
    }

    return null;
  }
}