wip

src/app/Qualification.ts

@@ -0,0 +1,7 @@
+export class Qualification {
+  constructor(
+    public id?: number,
+    public skill?: string
+  ) {
+  }
+}

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

@@ -1,60 +0,0 @@
-import {Component, inject, OnInit} from '@angular/core';
-import {FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
-import {MatFormField, MatLabel} from "@angular/material/form-field";
-import {MatInput} from "@angular/material/input";
-import {MatButton} from "@angular/material/button";
-import {
-  MatDialogActions,
-  MatDialogClose,
-  MatDialogContent,
-  MatDialogRef,
-  MatDialogTitle
-} from "@angular/material/dialog";
-import {Employee} from "../Employee";
-import EmployeeApiService from "../services/employee-api.service";
-import {catchError} from "rxjs";
-
-@Component({
-  selector: 'app-create-employee',
-  imports: [
-    ReactiveFormsModule,
-    MatFormField,
-    MatInput,
-    MatButton,
-    MatLabel,
-    MatDialogContent,
-    MatDialogTitle,
-    MatDialogActions,
-    MatDialogClose
-  ],
-  templateUrl: './create-employee.component.html',
-  standalone: true,
-  styleUrl: './create-employee.component.css'
-})
-export class CreateEmployeeComponent implements OnInit{
-  employeeForm!: FormGroup;
-  employeeService: EmployeeApiService = inject(EmployeeApiService);
-  formBuilder: FormBuilder = inject(FormBuilder);
-  dialogRef: MatDialogRef<CreateEmployeeComponent> = inject(MatDialogRef);
-
-  ngOnInit(): void {
-    this.employeeForm = this.formBuilder.group({
-      firstName: ['', Validators.required],
-      lastName: ['', Validators.required],
-      street: ['', Validators.required],
-      postcode: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(5)]],
-      city: ['', Validators.required],
-      phone: ['', Validators.required],
-    });
-  }
-
-  submit() {
-    if (!this.employeeForm.valid) {
-      console.error('Form invalid');
-      return;
-    }
-
-    this.employeeService.create(this.employeeForm.value as Employee).subscribe();
-    this.dialogRef.close();
-  }
-}

src/app/employee/Employee.ts

@@ -1,10 +1,15 @@
+import {Qualification} from "../Qualification";
+
 export class Employee {
-  constructor(public id?: number,
+  constructor(
+    public id?: number,
     public lastName?: string,
     public firstName?: string,
     public street?: string,
     public postcode?: string,
     public city?: string,
-              public phone?: string) {
+    public phone?: string,
+    public skillSet?: Qualification[]
+  ) {
   }
 }

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

@@ -1,6 +1,6 @@
 <h2 mat-dialog-title>Create Employee</h2>
 <mat-dialog-content>
-  <form [formGroup]="employeeForm" (ngSubmit)="submit()">
+  <form *ngIf="employeeForm" [formGroup]="employeeForm" (ngSubmit)="submit()">
     <div class="!space-y-4">
       <div class="flex gap-x-4">
         <mat-form-field class="!w-full">
@@ -36,6 +36,13 @@
         <input matInput formControlName="phone" required>
       </mat-form-field>
 
+      <mat-form-field class="!w-full">
+        <mat-label>Skills</mat-label>
+        <mat-select formArrayName="skillSet" multiple>
+          <mat-option *ngFor="let skill of skills | async; let i = index" [value]="skill.id" [formGroupName]="i">{{ skill.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

@@ -0,0 +1,87 @@
+import {Component, inject, OnInit} from '@angular/core';
+import {FormArray, FormBuilder, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
+import {MatFormField, MatLabel} from "@angular/material/form-field";
+import {MatInput} from "@angular/material/input";
+import {MatButton} from "@angular/material/button";
+import {
+  MatDialogActions,
+  MatDialogClose,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle
+} from "@angular/material/dialog";
+import {Employee} from "../Employee";
+import EmployeeApiService from "../../services/employee-api.service";
+import {Observable} from "rxjs";
+import {MatOption, MatSelect} from "@angular/material/select";
+import {AsyncPipe, NgForOf, NgIf} from "@angular/common";
+import {Qualification} from "../../Qualification";
+import QualificationService from "../../services/qualification.service";
+
+@Component({
+  selector: 'app-create-employee',
+  imports: [
+    ReactiveFormsModule,
+    MatFormField,
+    MatInput,
+    MatButton,
+    MatLabel,
+    MatDialogContent,
+    MatDialogTitle,
+    MatDialogActions,
+    MatDialogClose,
+    MatSelect,
+    MatOption,
+    NgForOf,
+    NgIf,
+    AsyncPipe,
+  ],
+  templateUrl: './create.component.html',
+  standalone: true,
+  styleUrl: './create.component.css'
+})
+export class CreateComponent implements OnInit {
+  employeeForm: FormGroup | null = null;
+  employeeService: EmployeeApiService = inject(EmployeeApiService);
+  formBuilder: FormBuilder = inject(FormBuilder);
+  dialogRef: MatDialogRef<CreateComponent> = inject(MatDialogRef);
+  qualificationService: QualificationService = inject(QualificationService);
+  skills!: Observable<Qualification[]>
+  formSkills: FormArray = this.formBuilder.array([]);
+
+  ngOnInit(): void {
+    this.employeeForm = this.formBuilder.group({
+      firstName: ['', Validators.required],
+      lastName: ['', Validators.required],
+      street: ['', Validators.required],
+      postcode: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(5)]],
+      city: ['', Validators.required],
+      phone: ['', Validators.required],
+      skillSet: this.formSkills
+    });
+
+    this.skills = this.qualificationService.getAll();
+
+    this.skills.subscribe((qualifications: Qualification[]) => {
+      qualifications.forEach((qualification: Qualification) => {
+
+        this.formSkills.push(this.formBuilder.group(qualification));
+      });
+    })
+  }
+
+  submit() {
+    console.log(this.employeeForm?.controls['skillSet'].value)
+    if (this.employeeForm === null || !this.employeeForm.valid) {
+      console.error('Form invalid');
+      return;
+    }
+    const newEmployee = this.employeeForm.value as Employee;
+    //newEmployee.skillSet = newEmployee.skillSet?.map((selected: boolean, index: number) => {return })
+
+    return;
+
+    this.employeeService.create(newEmployee).subscribe();
+    this.dialogRef.close();
+  }
+}

src/app/employee/table/table.component.ts

@@ -17,6 +17,7 @@ import {MatSortModule} from '@angular/material/sort';
 import {MatDialog} from "@angular/material/dialog";
 import {DeleteComponent} from "../delete/delete.component";
 import EmployeeApiService from "../../services/employee-api.service";
+import {CreateComponent} from "../create/create.component";
 
 @Component({
   selector: 'app-employee-list',
@@ -79,7 +80,7 @@ export class TableComponent implements OnInit{
   }
 
   protected showCreateEmployeeModal() {
-    this.createEmployeeDialogue.open(CreateEmployeeComponent)
+    this.createEmployeeDialogue.open(CreateComponent)
       .afterClosed()
       .subscribe(() => {
       this.employees$ = this.fetchEmployees();