Implement removing and adding qualifications while creating or editing employees (#29)

Co-authored-by: Phan Huy Tran <p.tran@neusta.de>
Reviewed-on: #29
Reviewed-by: Constantin Simonis <constantin@simonis.lol>

src/app/employee/create/create.component.html

@@ -36,6 +36,15 @@
         <input matInput formControlName="phone" required>
       </mat-form-field>
 
+      <mat-form-field class="!w-full">
+        <mat-label>Qualifications</mat-label>
+        <mat-select formControlName="qualifications" multiple>
+          <mat-option *ngFor="let qualification of qualifications" [value]="qualification.id">
+            {{qualification.skill}}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+
       <mat-dialog-actions align="end">
         <button mat-button mat-dialog-close>Cancel</button>
         <button mat-flat-button color="primary" type="submit">Submit</button>

src/app/employee/create/create.component.ts

@@ -12,22 +12,29 @@ import {
 } from "@angular/material/dialog";
 import {Employee} from "../Employee";
 import EmployeeApiService from "../../services/employee-api.service";
-import {NgIf} from "@angular/common";
+import {NgForOf, NgIf} from "@angular/common";
+import {MatOption} from "@angular/material/core";
+import {MatSelect} from "@angular/material/select";
+import QualificationService from "../../services/qualification.service";
+import {Qualification} from "../../qualification/Qualification";
 
 @Component({
   selector: 'app-create-employee',
-  imports: [
-    ReactiveFormsModule,
-    MatFormField,
-    MatInput,
-    MatButton,
-    MatLabel,
-    MatDialogContent,
-    MatDialogTitle,
-    MatDialogActions,
-    MatDialogClose,
-    NgIf,
-  ],
+    imports: [
+        ReactiveFormsModule,
+        MatFormField,
+        MatInput,
+        MatButton,
+        MatLabel,
+        MatDialogContent,
+        MatDialogTitle,
+        MatDialogActions,
+        MatDialogClose,
+        NgIf,
+        MatOption,
+        MatSelect,
+        NgForOf,
+    ],
   templateUrl: './create.component.html',
   standalone: true,
   styleUrl: './create.component.css'
@@ -37,8 +44,11 @@ export class CreateComponent implements OnInit {
   employeeService: EmployeeApiService = inject(EmployeeApiService);
   formBuilder: FormBuilder = inject(FormBuilder);
   dialogRef: MatDialogRef<CreateComponent> = inject(MatDialogRef);
+  qualificationService: QualificationService = inject(QualificationService);
+  qualifications: Qualification[] = [];
 
   ngOnInit(): void {
+    this.loadQualifications();
     this.employeeForm = this.formBuilder.group({
       firstName: ['', Validators.required],
       lastName: ['', Validators.required],
@@ -46,16 +56,29 @@ export class CreateComponent implements OnInit {
       postcode: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(5)]],
       city: ['', Validators.required],
       phone: ['', Validators.required],
+      qualifications: [[]]
     });
   }
 
+  loadQualifications() {
+    this.qualificationService.getAll().subscribe(
+      qualifications => this.qualifications = qualifications
+    );
+  }
+
   submit() {
     if (this.employeeForm === null || !this.employeeForm.valid) {
       console.error('Form invalid');
       return;
     }
 
-    this.employeeService.create(this.employeeForm.value as Employee).subscribe();
+    const formValue = this.employeeForm.value;
+    const employeeData = {
+      ...formValue,
+      skillSet: formValue.qualifications
+    };
+
+    this.employeeService.create(employeeData as Employee).subscribe();
     this.dialogRef.close(true);
   }
 }

src/app/employee/edit/edit.component.html

@@ -36,6 +36,15 @@
         <input matInput formControlName="phone" required>
       </mat-form-field>
 
+      <mat-form-field class="!w-full">
+        <mat-label>Qualifications</mat-label>
+        <mat-select formControlName="qualifications" multiple>
+          <mat-option *ngFor="let qualification of qualifications" [value]="qualification.id">
+            {{qualification.skill}}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+
       <mat-dialog-actions align="end">
         <button mat-button mat-dialog-close>Cancel</button>
         <button mat-flat-button color="primary" type="submit">Submit</button>

src/app/employee/edit/edit.component.ts

@@ -8,12 +8,15 @@ import {
   MatDialogRef,
   MatDialogTitle
 } from "@angular/material/dialog";
-import {NgIf} from "@angular/common";
+import {NgForOf, NgIf} from "@angular/common";
 import {MatFormField} from "@angular/material/form-field";
 import {MatInput, MatLabel} from "@angular/material/input";
 import {MatButton} from "@angular/material/button";
 import {Employee} from "../Employee";
 import EmployeeApiService from "../../services/employee-api.service";
+import QualificationService from "../../services/qualification.service";
+import {Qualification} from "../../qualification/Qualification";
+import {MatOption, MatSelect} from "@angular/material/select";
 
 @Component({
   selector: 'app-edit',
@@ -27,7 +30,10 @@ import EmployeeApiService from "../../services/employee-api.service";
     MatDialogActions,
     MatButton,
     MatDialogClose,
-    MatLabel
+    MatLabel,
+    MatSelect,
+    MatOption,
+    NgForOf
   ],
   templateUrl: './edit.component.html',
   standalone: true,
@@ -37,10 +43,13 @@ export class EditComponent implements OnInit {
   employeeForm: FormGroup | null = null;
   formBuilder: FormBuilder = inject(FormBuilder);
   employeeService: EmployeeApiService = inject(EmployeeApiService);
+  qualificationService: QualificationService = inject(QualificationService);
   dialogRef: MatDialogRef<EditComponent> = inject(MatDialogRef);
   employee: Employee = inject(MAT_DIALOG_DATA);
+  qualifications: Qualification[] = [];
 
   ngOnInit(): void {
+    this.loadQualifications();
     this.employeeForm = this.formBuilder.group({
       firstName: [this.employee.firstName, Validators.required],
       lastName: [this.employee.lastName, Validators.required],
@@ -48,9 +57,16 @@ export class EditComponent implements OnInit {
       postcode: [this.employee.postcode, [Validators.required, Validators.minLength(5), Validators.maxLength(5)]],
       city: [this.employee.city, Validators.required],
       phone: [this.employee.phone, Validators.required],
+      qualifications: [this.employee.skillSet?.map(skill => skill.id) ?? []]
     });
   }
 
+  loadQualifications() {
+    this.qualificationService.getAll().subscribe(
+      qualifications => this.qualifications = qualifications
+    );
+  }
+
   submit() {
     if (this.employeeForm === null || !this.employeeForm.valid) {
       console.error('Form invalid');
@@ -62,7 +78,13 @@ export class EditComponent implements OnInit {
       return;
     }
 
-    this.employeeService.update(this.employeeForm.value as Employee, this.employee.id).subscribe();
+    const formValue = this.employeeForm.value;
+    const employeeData = {
+      ...formValue,
+      skillSet: formValue.qualifications
+    };
+
+    this.employeeService.update(employeeData as Employee, this.employee.id).subscribe();
     this.dialogRef.close(true);
   }
 }

src/app/services/employee-api.service.ts

@@ -25,6 +25,6 @@ export default class EmployeeApiService {
   }
 
   public update(employee: Employee, id: number) {
-    return this.http.patch(`${EmployeeApiService.BASE_URL}/employees/${id}`, employee)
+    return this.http.put(`${EmployeeApiService.BASE_URL}/employees/${id}`, employee)
   }
 }