feat(qualifikation): add skill management features and fixes

angular.json

@@ -93,5 +93,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

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

@@ -1,6 +1,6 @@
 <div class="container">
   <form [formGroup]="skillForm">
-    <button class="back-button">Back</button>
+    <button (click)="returnToSkillList()" class="back-button">Back</button>
 
     <div class="form-group">
       @if (errorMessages['name']) {

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

@@ -76,6 +76,10 @@ export class QualifikationFormComponent {
     }
   }
 
+  returnToSkillList() {
+    this.router.navigate(["qualifikationsverwaltung"]);
+  }
+
   updateEmployeeLists() {
     if (this.skill.id != -1) {
       this.employeeService.getAllEmployees().subscribe(employees => {
@@ -105,7 +109,7 @@ export class QualifikationFormComponent {
     }
 
     for (const employee of this.addableEmployees) {
-      this.employeeService.removeSkillFromEmployee(this.skill.id, employee);
+      this.employeeService.removeSkillFromEmployee(this.skill.id, employee.id);
     }
 
     this.skill.skill = this.skillForm.get("name")?.value;

src/app/components/qualifikationsverwaltung/qualifikationsverwaltung.component.html

@@ -18,15 +18,15 @@
         <input type="text" placeholder="Search employee" formControlName="search">
         <button (click)="submit()">Search</button>
       </div>
-      <p class="text-body-tertiary">Search for a propertiy of a Qualification. eg. First Name</p>
+      <p class="text-body-tertiary">Search for a propertiy of a Qualification. eg. Name</p>
     </form>
-    <button (click)="createEmployee()" class="add-button">Add qualification</button>
+    <button (click)="createSkill()" class="add-button">Add qualification</button>
   </div>
 
   <table class="employee-table">
     <thead>
       <tr>
-        <th><span class="sortable">First Name</span></th>
+        <th><span class="sortable">Name</span></th>
         <th>Actions</th>
       </tr>
     </thead>

src/app/components/qualifikationsverwaltung/qualifikationsverwaltung.component.ts

@@ -1,12 +1,57 @@
 import { Component } from '@angular/core';
+import { QualificationGetDTO } from '../../models/skill';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { SkillService } from '../../service/skill.service';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-qualifikationsverwaltung',
   standalone: true,
-  imports: [],
+  imports: [ReactiveFormsModule],
   templateUrl: './qualifikationsverwaltung.component.html',
   styleUrl: './qualifikationsverwaltung.component.css'
 })
 export class QualifikationsverwaltungComponent {
+  skills: Array<QualificationGetDTO> = [];
+  public searchForm!: FormGroup;
 
+  constructor(private skillService: SkillService, private router: Router) {}
+
+  submit() {
+    const searchTerm = this.searchForm.get("search")?.value || '';
+
+    this.skillService.getAllSkills().subscribe(skills => {
+      let foundSkills: Array<QualificationGetDTO> = [];
+      for (const skill of skills) {
+        if (
+          skill.skill.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          searchTerm == ''
+        ) {
+          foundSkills.push(skill);
+        }
+      }
+
+      this.skills = foundSkills;
+    });
+  }
+
+  editSkill(id: number) {
+    this.router.navigate([`/qualifikationbearbeiten/${id}`]);
+  }
+
+  createSkill() {
+    this.router.navigate(['/qualifikationerstellen']);
+  }
+
+  deleteSkill(id: number) {
+    this.skillService.deleteSkill(id);
+    this.skills = this.skills.filter(skill => skill.id != id);
+  }
+
+  ngOnInit(): void {
+    this.searchForm = new FormGroup({
+      search: new FormControl(''),
+    });
+    this.skillService.getAllSkills().subscribe(skills => this.skills = skills);
+  }
 }

src/app/service/employee.service.ts

@@ -54,13 +54,15 @@ export class EmployeeService {
     return this.http.get<EmployeeResponseDTO>(`${SkillService.BASE_URL}/employees/${id}`);
   }
 
-  removeSkillFromEmployee(skillId: number, employee: EmployeeResponseDTO) {
+  removeSkillFromEmployee(skillId: number, employeeId: number) {
-    let employeePut = this.responseDtoToPutDto(employee);
+    this.getEmployeeById(employeeId).subscribe(employee => {
-    if (employeePut.skillSet.indexOf(skillId) != 1) {
+      let employeePut = this.responseDtoToPutDto(employee);
-      employeePut.skillSet = employeePut.skillSet.filter(skill => skill != skillId);
+      if (employeePut.skillSet.indexOf(skillId) != 1) {
-    }
+        employeePut.skillSet = employeePut.skillSet.filter(skill => skill != skillId);
+      }
 
-    this.http.put(`${SkillService.BASE_URL}/employees/${employee.id}`, employeePut).subscribe();
+      this.http.put(`${SkillService.BASE_URL}/employees/${employee.id}`, employeePut).subscribe();
+    });
   }
 
   addSkillToEmployee(skillId: number, employee: EmployeeResponseDTO) {

src/app/service/skill.service.ts

@@ -3,11 +3,21 @@ import { Injectable } from "@angular/core";
 import { EmployeesForAQualificationDTO, QualificationGetDTO, QualificationPostDTO } from "../models/skill";
 import { Observable } from "rxjs";
 import { EmployeeNameDataDTO } from "../models/mitarbeiter";
+import { EmployeeService } from "./employee.service";
 
 @Injectable({
   providedIn: 'root'
 })
 export class SkillService {
+  deleteSkill(id: number) {
+    this.getEmployeesBySkill(id).subscribe(employees => {
+      for (let employee of employees.employees) {
+        this.employeeService.removeSkillFromEmployee(id, employee.id);
+      }
+    });
+
+    this.http.delete(`${SkillService.BASE_URL}/qualifications/${id}`).subscribe();
+  }
 
   public static readonly BASE_URL = "http://localhost:8089";
 
@@ -17,7 +27,7 @@ export class SkillService {
     }
   }
 
-  constructor(private http: HttpClient) {
+  constructor(private http: HttpClient, private employeeService: EmployeeService) {
 
   }