feat: add qualification editing functionality and styles

src/app/components/qualifikation-form/qualifikation-form.component.ts

@@ -1,12 +1,90 @@
-import { Component } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { EmployeesForAQualificationDTO, QualificationGetDTO } from '../../models/skill';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { SkillService } from '../../service/skill.service';
+import { EmployeeService } from '../../service/employee.service';
+import { Observable, of, tap } from 'rxjs';
+import { EmployeeNameDataDTO, EmployeeResponseDTO } from '../../models/mitarbeiter';
+import { AsyncPipe } from '@angular/common';
 
 @Component({
   selector: 'app-qualifikation-form',
   standalone: true,
-  imports: [],
+  imports: [ReactiveFormsModule, AsyncPipe],
   templateUrl: './qualifikation-form.component.html',
   styleUrl: './qualifikation-form.component.css'
 })
 export class QualifikationFormComponent {
+  @Input() skill!: QualificationGetDTO;
+  @Output() skillChange = new EventEmitter<QualificationGetDTO>();
 
+  public skillForm!: FormGroup;
+  public employees: Observable<EmployeesForAQualificationDTO> = of();
+  public allEmployees: Observable<Array<EmployeeResponseDTO>> = of([]);
+  public hiddenEmployees: Array<number> = [];
+  public addedEmployees: Observable<Array<EmployeeResponseDTO>> = of([]);
+  public addedEmployeesIds: Array<number> = [];
+  errorMessages: Record<string, string> = {};
+
+  constructor(private skillService: SkillService, private employeeService: EmployeeService) { }
+
+  removeEmployee(id: number) {
+    this.hiddenEmployees.push(id);
+  }
+
+  isEmployeeHidden(id: number) {
+    for (const employeeId of this.hiddenEmployees) {
+      if (id == employeeId) {
+        return true
+      }
+    }
+
+    return false;
+  }
+
+  employeeHasSkill(employee: EmployeeResponseDTO) {
+
+    for (const id of this.addedEmployeesIds) {
+      console.log(id, employee.id);
+      if (id == employee.id) {
+        return true;
+      }
+    }
+
+    for (const employeeSkill of employee.skillSet || []) {
+      if (employeeSkill.id == this.skill.id) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  addEmployee() {
+    console.log("a");
+    const employeeId = this.skillForm.get("newEmployee")?.value;
+    this.employeeService.getEmployeeById(employeeId).subscribe(employee => {
+      this.addedEmployees.pipe(tap(employeeList => {
+        employeeList.push(employee);
+        this.addedEmployeesIds.push(employee.id);
+      })).subscribe();
+    });
+  }
+
+  setUpForm() {
+    this.skillForm = new FormGroup({
+      name: new FormControl(this.skill.skill, Validators.required),
+      newEmployee: new FormControl(),
+    });
+  }
+
+  ngOnChanges(): void {
+    this.setUpForm();
+    this.employees = this.skillService.getEmployeesBySkill(this.skill.id);
+  }
+
+  ngOnInit() {
+    this.setUpForm();
+    this.allEmployees = this.employeeService.getAllEmployees();
+  }
 }