employeeService/src/app/components/mitarbeiter-form/mitarbeiter-form.component.ts

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { EmployeeNameAndSkillDataDTO, EmployeeRequestPutDTO, EmployeeResponseDTO } from '../../models/mitarbeiter';
import { AbstractControl, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';
import { AsyncPipe, NgFor } from '@angular/common';
import { SkillService } from '../../service/skill.service';
import { QualificationGetDTO } from '../../models/skill';
import { Observable, of } from 'rxjs';

@Component({
  selector: 'app-mitarbeiter-form',
  standalone: true,
  imports: [ReactiveFormsModule, NgFor, AsyncPipe],
  templateUrl: './mitarbeiter-form.component.html',
  styleUrl: './mitarbeiter-form.component.css'
})
export class MitarbeiterFormComponent {
  @Input() mitarbeiter!: EmployeeResponseDTO;
  @Output() mitarbeiterChange = new EventEmitter<EmployeeResponseDTO>();

  public mitarbeiterForm!: FormGroup;
  public allSkills: Observable<Array<QualificationGetDTO>> = of([]);
  public hasAllSkills: boolean = false;
  errorMessages: Record<string, string> = {};

  constructor(public http: HttpClient, public router: Router, private skillService: SkillService) {}

  returnToEmployeeOverview() {
    this.router.navigate(["mitarbeiter"]);
  }

  private setupForm() {
    this.mitarbeiterForm = new FormGroup({
      lastName: new FormControl(this.mitarbeiter.lastName, Validators.required),
      firstName: new FormControl(this.mitarbeiter.firstName, Validators.required),
      street: new FormControl(this.mitarbeiter.street, Validators.required),
      postcode: new FormControl(this.mitarbeiter.postcode, [Validators.required, Validators.minLength(5), Validators.maxLength(5)]),
      city: new FormControl(this.mitarbeiter.city, Validators.required),
      phone: new FormControl(this.mitarbeiter.phone, [Validators.required, Validators.pattern('^[- +()0-9]+$')]),
      newSkill: new FormControl(null, Validators.required) // Added
    });
  }

  ngOnChanges(): void {
    this.setupForm();
  }

  skillsChanged() {
    this.allSkills.subscribe(skills => {
      this.hasAllSkills = this.checkAllSkills(skills);
    });
  }

  ngOnInit(): void {
    this.allSkills = this.skillService.getAllSkills();
    this.skillsChanged();
    this.setupForm();
  }

  removeSkill(id?: number) {
    this.mitarbeiter.skillSet = this.mitarbeiter.skillSet?.filter(skill => skill.id !== id);
    this.skillsChanged();
  }

  checkAllSkills(skills: Array<QualificationGetDTO>): boolean {
    const skillSet = this.mitarbeiter.skillSet || [];

    return skills.every(skill =>
      skillSet.some(givenSkill => skill.id === givenSkill.id)
    );
  }

  hasSkill(id: number): boolean {
    for (const skill of this.mitarbeiter.skillSet || []) {
      if (skill.id == id) {
        return true;
      }
    }
    return false;
  }

  addSkill() {
    const id = Number(this.mitarbeiterForm.get("newSkill")?.value);
    this.allSkills.subscribe(skills => {
      const newSkill = skills.filter(skill => skill.id == id)[0];
      this.mitarbeiter.skillSet?.push(newSkill);
      this.skillsChanged();
      this.mitarbeiterForm.get("newSkill")?.reset(null); // Added
    });
  }

  private validationErrorMessages: Record<string, string> = {
    required: "This field is required",
    minlength: "The value is too short",
    maxlength: "The value is too long",
    pattern: "This field must be a valid phone number",
  };

  updateErrorMessages(): void {
    this.errorMessages = {};

    Object.keys(this.mitarbeiterForm.controls).forEach(field => {
      const control = this.mitarbeiterForm.get(field);

      if (control && control.errors) {
        this.errorMessages[field] = Object.keys(control.errors)
          .map(errorKey => this.validationErrorMessages[errorKey] || `Unknown error: ${errorKey}`)
          .join(' ');
      }
    });
  }


  submit() {
    this.updateErrorMessages();
    if (!this.mitarbeiterForm.valid) {
      return;
    }

    this.mitarbeiter.firstName = this.mitarbeiterForm.get("firstName")?.value;
    this.mitarbeiter.lastName = this.mitarbeiterForm.get("lastName")?.value;
    this.mitarbeiter.street = this.mitarbeiterForm.get("street")?.value;
    this.mitarbeiter.postcode = this.mitarbeiterForm.get("postcode")?.value;
    this.mitarbeiter.city = this.mitarbeiterForm.get("city")?.value;
    this.mitarbeiter.phone = this.mitarbeiterForm.get("phone")?.value;

    this.mitarbeiterChange.emit(this.mitarbeiter);
  }
}