src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.html

@@ -1 +1 @@
-<app-mitarbeiter-form [(mitarbeiter)]="mitarbeiter"></app-mitarbeiter-form>
+<app-mitarbeiter-form [(mitarbeiter)]="mitarbeiter" (mitarbeiterChange)="submitted($event)"></app-mitarbeiter-form>

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

@@ -16,6 +16,10 @@ export class MitarbeiterBearbeitenViewComponent {
 
   constructor(private employeeService: EmployeeService, private route: ActivatedRoute) { }
 
+  submitted(mitarbeiter: EmployeeResponseDTO) {
+    this.employeeService.updateEmployee(mitarbeiter);
+  }
+
   ngOnInit(): void {
     this.mitarbeiter = {
       id: 0,

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

@@ -41,14 +41,18 @@
         </li>
         }
       </ul>
+      @if (!hasAllSkills) {
       <div class="skill-controls">
         <select formControlName="newSkill">
           @for (skill of allSkills | async; track skill) {
+          @if (!hasSkill(skill.id)) {
           <option value="{{skill.id}}">{{skill.skill}}</option>
           }
+          }
         </select>
         <button (click)="addSkill()" class="add-skill-button">Add qualification</button>
       </div>
+      }
     </div>
     <button (click)="submit()" class="save-button">Save</button>
   </div>

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

@@ -22,6 +22,7 @@ export class MitarbeiterFormComponent {
 
   public mitarbeiterForm!: FormGroup;
   public allSkills: Observable<Array<QualificationGetDTO>> = of([]);
+  public hasAllSkills: boolean = false;
 
   constructor(public http: HttpClient, public router: Router, private employeeService: EmployeeService, private skillService: SkillService) {
 
@@ -43,18 +44,47 @@ export class MitarbeiterFormComponent {
     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.employeeService.addSkillToEmployee(id, this.mitarbeiter);
+    this.allSkills.subscribe(skills => {
+      const newSkill = skills.filter(skill => skill.id == id)[0];
+      this.mitarbeiter.skillSet?.push(newSkill);
+      this.skillsChanged();
+    });
   }
 
   submit() {
@@ -65,8 +95,6 @@ export class MitarbeiterFormComponent {
     this.mitarbeiter.city = this.mitarbeiterForm.get("city")?.value;
     this.mitarbeiter.phone = this.mitarbeiterForm.get("phone")?.value;
 
-    console.log(this.mitarbeiterForm);
-    console.log(this.mitarbeiter);
     this.mitarbeiterChange.emit(this.mitarbeiter);
   }
 }

src/app/models/skill.ts

@@ -1,3 +1,5 @@
+import { EmployeeNameDataDTO } from "./mitarbeiter";
+
 export interface QualificationGetDTO {
   id: number,
   skill: string,
@@ -9,4 +11,5 @@ export interface QualificationPostDTO {
 
 export interface EmployeesForAQualificationDTO {
   qualification: QualificationGetDTO,
+  employees: Array<EmployeeNameDataDTO>,
 }

src/app/service/employee.service.ts

@@ -8,7 +8,7 @@ import { SkillService } from "./skill.service";
   providedIn: 'root'
 })
 export class EmployeeService {
-  constructor(private http: HttpClient) {}
+  constructor(private http: HttpClient) { }
 
 
   responseDtoToPutDto(employee: EmployeeResponseDTO): EmployeeRequestPutDTO {
@@ -23,6 +23,9 @@ export class EmployeeService {
     }
   }
 
+  updateEmployee(employee: EmployeeResponseDTO) {
+    this.http.put(`${SkillService.BASE_URL}/employees/${employee.id}`, this.responseDtoToPutDto(employee)).subscribe();
+  }
 
   getAllEmployees(): Observable<Array<EmployeeResponseDTO>> {
     return this.http.get<Array<EmployeeResponseDTO>>(`${SkillService.BASE_URL}/employees`);