Add functionality to select qualifications while creating employees

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);
   }
 }