refactor: simplify employee management logic in component

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

@@ -11,17 +11,7 @@
       <h2>Employees possessing the qualification</h2>
 
       <ul class="employee-list">
-        @for (employee of (employees | async)?.employees; track employee) {
-        @if (!isEmployeeHidden(employee.id)) {
-        <li>
-          <button (click)="removeEmployee(employee.id)" class="delete-skill-button">
-            <img src="Delete-button.svg" alt="Delete">
-          </button>
-          <span class="employee-name">{{employee.firstName}} {{employee.lastName}}</span>
-        </li>
-        }
-        }
-        @for (employee of addedEmployees | async; track employee) {
+        @for (employee of addedEmployees; track employee) {
         <li>
           <button (click)="removeEmployee(employee.id)" class="delete-skill-button">
             <img src="Delete-button.svg" alt="Delete">
@@ -31,18 +21,17 @@
         }
       </ul>
 
-
+      @if (addableEmployees.length > 0) {
       <div class="add-employee-section">
         <select formControlName="newEmployee">
-          @for (employee of allEmployees | async; track employee) {
-          @if (!employeeHasSkill(employee)) {
+          @for (employee of addableEmployees; track employee) {
           <option value="{{employee.id}}">{{employee.firstName}} {{employee.lastName}}</option>
           }
-          }
         </select>
 
-        <button class="add-employee-button" (click)="addEmployee()">Add employee</button>
+        <button (click)="addEmployee()" class="add-employee-button">Add employee</button>
       </div>
+      }
 
 
 

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

@@ -19,58 +19,11 @@ export class QualifikationFormComponent {
   @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> = {};
+  public addableEmployees: Array<EmployeeResponseDTO> = [];
+  public addedEmployees: Array<EmployeeNameDataDTO> = [];
 
   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),
@@ -78,13 +31,54 @@ export class QualifikationFormComponent {
     });
   }
 
+
+  addEmployee() {
+    console.log("called");
+    const employeeId = Number(this.skillForm.get("newEmployee")?.value);
+    const employee = this.addableEmployees.find(emp => emp.id === employeeId);
+
+    if (employee) {
+      this.addableEmployees = this.addableEmployees.filter(emp => emp.id !== employeeId);
+
+      this.addedEmployees.push(employee);
+    }
+  }
+
+  removeEmployee(employeeId: number) {
+    const employee = this.addedEmployees.find(emp => emp.id === employeeId);
+
+    if (employee) {
+      this.addedEmployees = this.addedEmployees.filter(emp => emp.id !== employeeId);
+
+      this.employeeService.getEmployeeById(employee.id).subscribe(employeeDto => {
+        this.addableEmployees.push(employeeDto);
+      });
+    }
+  }
+
+  updateEmployeeLists() {
+    if (this.skill.id != -1) {
+      this.employeeService.getAllEmployees().subscribe(employees => {
+        this.addableEmployees = employees;
+
+        this.skillService.getEmployeesBySkill(this.skill.id).subscribe(addedEmployeesResponse => {
+          this.addedEmployees = addedEmployeesResponse.employees;
+
+          this.addableEmployees = this.addableEmployees.filter(employee => {
+            return !this.addedEmployees.some(added => added.id === employee.id);
+          });
+        });
+      });
+    }
+  }
+
   ngOnChanges(): void {
     this.setUpForm();
-    this.employees = this.skillService.getEmployeesBySkill(this.skill.id);
+    this.updateEmployeeLists();
   }
 
   ngOnInit() {
     this.setUpForm();
-    this.allEmployees = this.employeeService.getAllEmployees();
+    this.updateEmployeeLists();
   }
 }

src/app/components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component.ts

@@ -23,7 +23,7 @@ export class QualifikatonBearbeitenViewComponent {
 
   ngOnInit(): void {
     this.skill = {
-      id: 0,
+      id: -1,
       skill: '',
     };