Merge pull request 'Redo skill editing logic' (#69) from refactor/redo-skill-editing-logic into feature/edit-skills

Reviewed-on: #69

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

@@ -104,7 +104,7 @@ export class MitarbeiterFormComponent {
     Object.keys(this.mitarbeiterForm.controls).forEach(field => {
       const control = this.mitarbeiterForm.get(field);
 
-      if (control && control.errors && control.touched) {
+      if (control && control.errors) {
         this.errorMessages[field] = Object.keys(control.errors)
           .map(errorKey => this.validationErrorMessages[errorKey] || `Unknown error: ${errorKey}`)
           .join(' ');

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

@@ -3,6 +3,9 @@
     <button class="back-button">Back</button>
 
     <div class="form-group">
+      @if (errorMessages['name']) {
+      <div class="alert alert-danger">{{errorMessages['name']}}</div>
+      }
       <label for="name">Name</label>
       <input type="text" id="name" formControlName="name">
     </div>
@@ -11,17 +14,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,23 +24,18 @@
         }
       </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>
-
-
-
+      }
     </div>
-
-    <button class="save-button">Save</button>
+    <button (click)="submit()" class="save-button">Save</button>
   </form>
 </div>

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

@@ -6,6 +6,7 @@ import { EmployeeService } from '../../service/employee.service';
 import { concatMap, every, from, lastValueFrom, Observable, of, switchMap, take, tap } from 'rxjs';
 import { EmployeeNameDataDTO, EmployeeResponseDTO } from '../../models/mitarbeiter';
 import { AsyncPipe } from '@angular/common';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-qualifikation-form',
@@ -19,55 +20,28 @@ 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> = [];
+  public addableEmployees: Array<EmployeeResponseDTO> = [];
+  public addedEmployees: Array<EmployeeNameDataDTO> = [];
   errorMessages: Record<string, string> = {};
 
-  constructor(private skillService: SkillService, private employeeService: EmployeeService) { }
 
-  removeEmployee(id: number) {
-    this.hiddenEmployees.push(id);
-  }
+  constructor(private skillService: SkillService, private employeeService: EmployeeService, private router: Router) { }
 
-  isEmployeeHidden(id: number) {
-    for (const employeeId of this.hiddenEmployees) {
-      if (id == employeeId) {
-        return true
-      }
-    }
+  private validationErrorMessages: Record<string, string> = {
+    required: "This field is required",
+  };
 
-    return false;
-  }
+  updateErrorMessages(): void {
+    this.errorMessages = {};
 
-  employeeHasSkill(employee: EmployeeResponseDTO) {
+    Object.keys(this.skillForm.controls).forEach(field => {
+      const control = this.skillForm.get(field);
 
-    for (const id of this.addedEmployeesIds) {
-      console.log(id, employee.id);
-      if (id == employee.id) {
-        return true;
+      if (control && control.errors) {
+        this.errorMessages[field] = Object.keys(control.errors)
+          .map(errorKey => this.validationErrorMessages[errorKey] || `Unknown error: ${errorKey}`)
+          .join(' ');
       }
-    }
-
-    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();
     });
   }
 
@@ -78,13 +52,75 @@ export class QualifikationFormComponent {
     });
   }
 
+
+  addEmployee() {
+    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);
+          });
+        });
+      });
+    }
+  }
+
+  submit() {
+    this.updateErrorMessages();
+    if (!this.skillForm.valid) {
+      return;
+    }
+
+    for (const employee of this.addedEmployees) {
+      this.employeeService.getEmployeeById(employee.id).subscribe(employeeResponse => {
+        this.employeeService.addSkillToEmployee(this.skill.id, employeeResponse);
+      });
+    }
+
+    for (const employee of this.addableEmployees) {
+      this.employeeService.removeSkillFromEmployee(this.skill.id, employee);
+    }
+
+    this.skill.skill = this.skillForm.get("name")?.value;
+    this.skillChange.emit(this.skill);
+
+    this.router.navigate(["/qualifikationen"]);
+  }
+
   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

@@ -18,12 +18,12 @@ export class QualifikatonBearbeitenViewComponent {
   constructor(private skillService: SkillService, private route: ActivatedRoute) {}
 
   submitted(skill: QualificationGetDTO) {
-
+    this.skillService.updateSkill(skill);
   }
 
   ngOnInit(): void {
     this.skill = {
-      id: 0,
+      id: -1,
       skill: '',
     };
 

src/app/service/employee.service.ts

@@ -54,10 +54,20 @@ export class EmployeeService {
     return this.http.get<EmployeeResponseDTO>(`${SkillService.BASE_URL}/employees/${id}`);
   }
 
+  removeSkillFromEmployee(skillId: number, employee: EmployeeResponseDTO) {
+    let employeePut = this.responseDtoToPutDto(employee);
+    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();
+  }
 
   addSkillToEmployee(skillId: number, employee: EmployeeResponseDTO) {
     let employeePut = this.responseDtoToPutDto(employee);
+    if (employeePut.skillSet.indexOf(skillId) == -1) {
       employeePut.skillSet.push(skillId);
+    }
 
     this.http.put(`${SkillService.BASE_URL}/employees/${employee.id}`, employeePut).subscribe();
   }

src/app/service/skill.service.ts

@@ -1,6 +1,6 @@
 import { HttpClient } from "@angular/common/http";
 import { Injectable } from "@angular/core";
-import { EmployeesForAQualificationDTO, QualificationGetDTO } from "../models/skill";
+import { EmployeesForAQualificationDTO, QualificationGetDTO, QualificationPostDTO } from "../models/skill";
 import { Observable } from "rxjs";
 import { EmployeeNameDataDTO } from "../models/mitarbeiter";
 
@@ -11,10 +11,20 @@ export class SkillService {
 
   public static readonly BASE_URL = "http://localhost:8089";
 
+  getToPutDto(skill: QualificationGetDTO): QualificationPostDTO {
+    return {
+      skill: skill.skill,
+    }
+  }
+
   constructor(private http: HttpClient) {
 
   }
 
+  updateSkill(skill: QualificationGetDTO) {
+    this.http.put(`${SkillService.BASE_URL}/qualifications/${skill.id}`, this.getToPutDto(skill)).subscribe();
+  }
+
   getAllSkills(): Observable<Array<QualificationGetDTO>> {
     return this.http.get<Array<QualificationGetDTO>>(`${SkillService.BASE_URL}/qualifications`);
   }