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

import {Component, inject, OnInit} from '@angular/core';
import {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} from "@angular/material/form-field";
import {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";

@Component({
  selector: 'app-edit',
  imports: [
    MatDialogTitle,
    MatDialogContent,
    NgIf,
    ReactiveFormsModule,
    MatFormField,
    MatInput,
    MatDialogActions,
    MatButton,
    MatDialogClose,
    MatLabel,
    MatSelect,
    MatOption,
    NgForOf
  ],
  templateUrl: './edit.component.html',
  standalone: true,
  styleUrl: './edit.component.css'
})
export class EditComponent implements OnInit {
  employeeForm: FormGroup | null = null;
  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[] = [];

  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, Validators.minLength(5), Validators.maxLength(5)]],
      city: [this.employee.city, Validators.required],
      phone: [this.employee.phone, Validators.required],
      qualifications: [this.employee.skillSet?.map(skill => skill.id) ?? []]
    });
  }

  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);
  }
}