From d96a0342d05d02022319b407fc31bcac695ce1dd Mon Sep 17 00:00:00 2001
From: Constantin Simonis <constantin@simonis.lol>
Date: Wed, 8 Jan 2025 10:03:26 +0100
Subject: [PATCH 1/7] add form to create employee

---
 .../create-employee.component.css             |  0
 .../create-employee.component.html            | 45 +++++++++++++++++
 .../create-employee.component.ts              | 49 +++++++++++++++++++
 src/app/employee/table/table.component.html   |  2 +-
 src/app/employee/table/table.component.ts     |  5 ++
 src/app/services/employee-api.service.ts      |  4 ++
 6 files changed, 104 insertions(+), 1 deletion(-)
 create mode 100644 src/app/create-employee/create-employee.component.css
 create mode 100644 src/app/create-employee/create-employee.component.html
 create mode 100644 src/app/create-employee/create-employee.component.ts

diff --git a/src/app/create-employee/create-employee.component.css b/src/app/create-employee/create-employee.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/create-employee/create-employee.component.html b/src/app/create-employee/create-employee.component.html
new file mode 100644
index 0000000..d322caa
--- /dev/null
+++ b/src/app/create-employee/create-employee.component.html
@@ -0,0 +1,45 @@
+<h2 mat-dialog-title>Create Employee</h2>
+<mat-dialog-content>
+  <form [formGroup]="employeeForm" (ngSubmit)="submit()">
+    <div class="!space-y-4">
+      <div class="flex gap-x-4">
+        <mat-form-field class="!w-full">
+          <mat-label>First Name</mat-label>
+          <input matInput formControlName="firstName" required>
+        </mat-form-field>
+
+        <mat-form-field class="!w-full">
+          <mat-label>Last Name</mat-label>
+          <input matInput formControlName="lastName" required>
+        </mat-form-field>
+      </div>
+
+      <mat-form-field class="!w-full">
+        <mat-label>Street</mat-label>
+        <input matInput formControlName="street" required>
+      </mat-form-field>
+
+      <div class="flex gap-x-4">
+        <mat-form-field class="!w-full">
+          <mat-label>City</mat-label>
+          <input matInput formControlName="city" required>
+        </mat-form-field>
+
+        <mat-form-field class="!w-1/2">
+          <mat-label>Postcode</mat-label>
+          <input matInput formControlName="postcode" minlength="5" maxlength="5" required>
+        </mat-form-field>
+      </div>
+
+      <mat-form-field class="!w-full">
+        <mat-label>Phone</mat-label>
+        <input matInput formControlName="phone" required>
+      </mat-form-field>
+
+      <mat-dialog-actions align="end">
+        <button mat-flat-button color="primary" type="submit">Submit</button>
+      </mat-dialog-actions>
+    </div>
+  </form>
+
+</mat-dialog-content>
diff --git a/src/app/create-employee/create-employee.component.ts b/src/app/create-employee/create-employee.component.ts
new file mode 100644
index 0000000..dc99e20
--- /dev/null
+++ b/src/app/create-employee/create-employee.component.ts
@@ -0,0 +1,49 @@
+import {Component, inject, OnInit} from '@angular/core';
+import {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, MatDialogContent, MatDialogTitle} from "@angular/material/dialog";
+import {Employee} from "../Employee";
+import EmployeeApiService from "../services/employee-api.service";
+
+@Component({
+  selector: 'app-create-employee',
+  imports: [
+    ReactiveFormsModule,
+    MatFormField,
+    MatInput,
+    MatButton,
+    MatLabel,
+    MatDialogContent,
+    MatDialogTitle,
+    MatDialogActions
+  ],
+  templateUrl: './create-employee.component.html',
+  standalone: true,
+  styleUrl: './create-employee.component.css'
+})
+export class CreateEmployeeComponent implements OnInit{
+  employeeForm!: FormGroup;
+  employeeService: EmployeeApiService = inject(EmployeeApiService);
+
+  ngOnInit(): void {
+    this.employeeForm = new FormGroup({
+      firstName: new FormControl('', {validators: [Validators.required]}),
+      lastName: new FormControl('', {validators: [Validators.required]}),
+      street: new FormControl('', {validators: [Validators.required]}),
+      postcode: new FormControl('', {validators: [Validators.required, Validators.minLength(5), Validators.maxLength(5)]}),
+      city: new FormControl('', {validators: [Validators.required]}),
+      phone: new FormControl('', {validators: [Validators.required]}),
+    });
+  }
+
+  submit() {
+    if (!this.employeeForm.valid) {
+      console.error('Form invalid');
+      return;
+    }
+
+    this.employeeService.create(this.employeeForm.value as Employee).subscribe();
+  }
+}
diff --git a/src/app/employee/table/table.component.html b/src/app/employee/table/table.component.html
index 635216f..d5f743e 100644
--- a/src/app/employee/table/table.component.html
+++ b/src/app/employee/table/table.component.html
@@ -4,7 +4,7 @@
       <div class="!space-y-6">
         <div class="!flex !justify-between !items-center">
           <h2 class="!text-2xl !font-semibold !text-gray-900">Employee Directory</h2>
-          <button mat-flat-button color="primary" class="!bg-blue-600 !text-white">
+          <button mat-flat-button color="primary" class="!bg-blue-600 !text-white" (click)="showCreateEmployeeModal()">
             <mat-icon class="!mr-2">add</mat-icon>
             Add Employee
           </button>
diff --git a/src/app/employee/table/table.component.ts b/src/app/employee/table/table.component.ts
index c2cca03..9cd2e8b 100644
--- a/src/app/employee/table/table.component.ts
+++ b/src/app/employee/table/table.component.ts
@@ -41,6 +41,7 @@ export class TableComponent implements OnInit{
   private readonly apiService: EmployeeApiService = inject(EmployeeApiService);
   private readonly snackBar: MatSnackBar = inject(MatSnackBar);
   private readonly deleteDialogue: MatDialog = inject(MatDialog);
+  private readonly createEmployeeDialogue: MatDialog = inject(MatDialog);
 
   private static readonly MAX_RETRIES = 3;
   public employees$: Observable<Employee[]> = of([]);
@@ -73,4 +74,8 @@ export class TableComponent implements OnInit{
   protected openDeleteDialogue(employee: Employee): void {
     this.deleteDialogue.open(DeleteComponent, {data: employee});
   }
+
+  protected showCreateEmployeeModal() {
+    this.createEmployeeDialogue.open(CreateEmployeeComponent);
+  }
 }
diff --git a/src/app/services/employee-api.service.ts b/src/app/services/employee-api.service.ts
index d9ecf2d..33fd804 100644
--- a/src/app/services/employee-api.service.ts
+++ b/src/app/services/employee-api.service.ts
@@ -19,4 +19,8 @@ export default class EmployeeApiService {
   public getAll(): Observable<Employee[]> {
     return this.http.get<Employee[]>(`${EmployeeApiService.BASE_URL}/employees`)
   }
+
+  public create(employee: Employee) {
+    return this.http.post<Employee>(`${EmployeeApiService.BASE_URL}/employees`, employee)
+  }
 }
-- 
2.47.2


From 2c54546620b6ba85b1ba6f0f4b978d7697f9e755 Mon Sep 17 00:00:00 2001
From: Constantin Simonis <constantin@simonis.lol>
Date: Wed, 8 Jan 2025 10:16:03 +0100
Subject: [PATCH 2/7] refactor to use formBulder

---
 .../create-employee.component.ts                | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/app/create-employee/create-employee.component.ts b/src/app/create-employee/create-employee.component.ts
index dc99e20..64cda2c 100644
--- a/src/app/create-employee/create-employee.component.ts
+++ b/src/app/create-employee/create-employee.component.ts
@@ -1,5 +1,5 @@
 import {Component, inject, OnInit} from '@angular/core';
-import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
+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";
@@ -26,15 +26,16 @@ import EmployeeApiService from "../services/employee-api.service";
 export class CreateEmployeeComponent implements OnInit{
   employeeForm!: FormGroup;
   employeeService: EmployeeApiService = inject(EmployeeApiService);
+  formBuilder: FormBuilder = inject(FormBuilder);
 
   ngOnInit(): void {
-    this.employeeForm = new FormGroup({
-      firstName: new FormControl('', {validators: [Validators.required]}),
-      lastName: new FormControl('', {validators: [Validators.required]}),
-      street: new FormControl('', {validators: [Validators.required]}),
-      postcode: new FormControl('', {validators: [Validators.required, Validators.minLength(5), Validators.maxLength(5)]}),
-      city: new FormControl('', {validators: [Validators.required]}),
-      phone: new FormControl('', {validators: [Validators.required]}),
+    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],
     });
   }
 
-- 
2.47.2


From 5e424a6929e34a29a085eabed9f28809fb878e3f Mon Sep 17 00:00:00 2001
From: Constantin Simonis <constantin@simonis.lol>
Date: Wed, 8 Jan 2025 10:16:49 +0100
Subject: [PATCH 3/7] reload page after submit

---
 src/app/create-employee/create-employee.component.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/create-employee/create-employee.component.ts b/src/app/create-employee/create-employee.component.ts
index 64cda2c..fe7d687 100644
--- a/src/app/create-employee/create-employee.component.ts
+++ b/src/app/create-employee/create-employee.component.ts
@@ -46,5 +46,6 @@ export class CreateEmployeeComponent implements OnInit{
     }
 
     this.employeeService.create(this.employeeForm.value as Employee).subscribe();
+    location.reload();
   }
 }
-- 
2.47.2


From 8f48a405004d61a2d0e6fc400335fd1937900e3b Mon Sep 17 00:00:00 2001
From: Constantin Simonis <constantin@simonis.lol>
Date: Wed, 8 Jan 2025 10:48:24 +0100
Subject: [PATCH 4/7] close modal after submit

---
 src/app/create-employee/create-employee.component.ts | 6 ++++--
 src/app/employee/table/table.component.ts            | 6 +++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/app/create-employee/create-employee.component.ts b/src/app/create-employee/create-employee.component.ts
index fe7d687..8b91594 100644
--- a/src/app/create-employee/create-employee.component.ts
+++ b/src/app/create-employee/create-employee.component.ts
@@ -3,9 +3,10 @@ import {FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators} fr
 import {MatFormField, MatLabel} from "@angular/material/form-field";
 import {MatInput} from "@angular/material/input";
 import {MatButton} from "@angular/material/button";
-import {MatDialogActions, MatDialogContent, MatDialogTitle} from "@angular/material/dialog";
+import {MatDialogActions, 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',
@@ -27,6 +28,7 @@ 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({
@@ -46,6 +48,6 @@ export class CreateEmployeeComponent implements OnInit{
     }
 
     this.employeeService.create(this.employeeForm.value as Employee).subscribe();
-    location.reload();
+    this.dialogRef.close();
   }
 }
diff --git a/src/app/employee/table/table.component.ts b/src/app/employee/table/table.component.ts
index 9cd2e8b..edef320 100644
--- a/src/app/employee/table/table.component.ts
+++ b/src/app/employee/table/table.component.ts
@@ -76,6 +76,10 @@ export class TableComponent implements OnInit{
   }
 
   protected showCreateEmployeeModal() {
-    this.createEmployeeDialogue.open(CreateEmployeeComponent);
+    this.createEmployeeDialogue.open(CreateEmployeeComponent)
+      .afterClosed()
+      .subscribe(() => {
+      this.employees$ = this.fetchEmployees();
+    });
   }
 }
-- 
2.47.2


From e2d6752bbfde535c636fc6c92d66b4d604eeeb8d Mon Sep 17 00:00:00 2001
From: Constantin Simonis <constantin@simonis.lol>
Date: Wed, 8 Jan 2025 10:50:59 +0100
Subject: [PATCH 5/7] add cancel button

---
 .../create-employee/create-employee.component.html    |  1 +
 src/app/create-employee/create-employee.component.ts  | 11 +++++++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/app/create-employee/create-employee.component.html b/src/app/create-employee/create-employee.component.html
index d322caa..bf4c399 100644
--- a/src/app/create-employee/create-employee.component.html
+++ b/src/app/create-employee/create-employee.component.html
@@ -37,6 +37,7 @@
       </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>
       </mat-dialog-actions>
     </div>
diff --git a/src/app/create-employee/create-employee.component.ts b/src/app/create-employee/create-employee.component.ts
index 8b91594..89b1154 100644
--- a/src/app/create-employee/create-employee.component.ts
+++ b/src/app/create-employee/create-employee.component.ts
@@ -3,7 +3,13 @@ import {FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators} fr
 import {MatFormField, MatLabel} from "@angular/material/form-field";
 import {MatInput} from "@angular/material/input";
 import {MatButton} from "@angular/material/button";
-import {MatDialogActions, MatDialogContent, MatDialogRef, MatDialogTitle} from "@angular/material/dialog";
+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";
@@ -18,7 +24,8 @@ import {catchError} from "rxjs";
     MatLabel,
     MatDialogContent,
     MatDialogTitle,
-    MatDialogActions
+    MatDialogActions,
+    MatDialogClose
   ],
   templateUrl: './create-employee.component.html',
   standalone: true,
-- 
2.47.2


From 8474cf73e4859453949c73e75aebb451830ba3f8 Mon Sep 17 00:00:00 2001
From: Constantin Simonis <constantin@simonis.lol>
Date: Thu, 9 Jan 2025 09:12:33 +0100
Subject: [PATCH 6/7] wip

---
 src/app/Qualification.ts                      |  7 ++
 .../create-employee.component.ts              | 60 -------------
 src/app/employee/Employee.ts                  | 19 ++--
 .../create/create.component.css}              |  0
 .../create/create.component.html}             |  9 +-
 src/app/employee/create/create.component.ts   | 87 +++++++++++++++++++
 src/app/employee/table/table.component.ts     |  3 +-
 7 files changed, 116 insertions(+), 69 deletions(-)
 create mode 100644 src/app/Qualification.ts
 delete mode 100644 src/app/create-employee/create-employee.component.ts
 rename src/app/{create-employee/create-employee.component.css => employee/create/create.component.css} (100%)
 rename src/app/{create-employee/create-employee.component.html => employee/create/create.component.html} (78%)
 create mode 100644 src/app/employee/create/create.component.ts

diff --git a/src/app/Qualification.ts b/src/app/Qualification.ts
new file mode 100644
index 0000000..c5821f7
--- /dev/null
+++ b/src/app/Qualification.ts
@@ -0,0 +1,7 @@
+export class Qualification {
+  constructor(
+    public id?: number,
+    public skill?: string
+  ) {
+  }
+}
diff --git a/src/app/create-employee/create-employee.component.ts b/src/app/create-employee/create-employee.component.ts
deleted file mode 100644
index 89b1154..0000000
--- a/src/app/create-employee/create-employee.component.ts
+++ /dev/null
@@ -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();
-  }
-}
diff --git a/src/app/employee/Employee.ts b/src/app/employee/Employee.ts
index 1debefc..ca15e4f 100644
--- a/src/app/employee/Employee.ts
+++ b/src/app/employee/Employee.ts
@@ -1,10 +1,15 @@
+import {Qualification} from "../Qualification";
+
 export class Employee {
-  constructor(public id?: number,
-              public lastName?: string,
-              public firstName?: string,
-              public street?: string,
-              public postcode?: string,
-              public city?: string,
-              public phone?: string) {
+  constructor(
+    public id?: number,
+    public lastName?: string,
+    public firstName?: string,
+    public street?: string,
+    public postcode?: string,
+    public city?: string,
+    public phone?: string,
+    public skillSet?: Qualification[]
+  ) {
   }
 }
diff --git a/src/app/create-employee/create-employee.component.css b/src/app/employee/create/create.component.css
similarity index 100%
rename from src/app/create-employee/create-employee.component.css
rename to src/app/employee/create/create.component.css
diff --git a/src/app/create-employee/create-employee.component.html b/src/app/employee/create/create.component.html
similarity index 78%
rename from src/app/create-employee/create-employee.component.html
rename to src/app/employee/create/create.component.html
index bf4c399..bd139c9 100644
--- a/src/app/create-employee/create-employee.component.html
+++ b/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>
diff --git a/src/app/employee/create/create.component.ts b/src/app/employee/create/create.component.ts
new file mode 100644
index 0000000..98e6a39
--- /dev/null
+++ b/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();
+  }
+}
diff --git a/src/app/employee/table/table.component.ts b/src/app/employee/table/table.component.ts
index edef320..def3f10 100644
--- a/src/app/employee/table/table.component.ts
+++ b/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',
@@ -76,7 +77,7 @@ export class TableComponent implements OnInit{
   }
 
   protected showCreateEmployeeModal() {
-    this.createEmployeeDialogue.open(CreateEmployeeComponent)
+    this.createEmployeeDialogue.open(CreateComponent)
       .afterClosed()
       .subscribe(() => {
       this.employees$ = this.fetchEmployees();
-- 
2.47.2


From 1a932601a255311d1313a7eeae71a5c7d2dcc0b5 Mon Sep 17 00:00:00 2001
From: Constantin Simonis <constantin@simonis.lol>
Date: Thu, 9 Jan 2025 10:43:42 +0100
Subject: [PATCH 7/7] fuck this shit im deleting it fuck you fucking dumbass

---
 src/app/employee/create/create.component.html | 11 ++-----
 src/app/employee/create/create.component.ts   | 32 ++-----------------
 2 files changed, 5 insertions(+), 38 deletions(-)

diff --git a/src/app/employee/create/create.component.html b/src/app/employee/create/create.component.html
index bd139c9..50c81ea 100644
--- a/src/app/employee/create/create.component.html
+++ b/src/app/employee/create/create.component.html
@@ -27,20 +27,13 @@
 
         <mat-form-field class="!w-1/2">
           <mat-label>Postcode</mat-label>
-          <input matInput formControlName="postcode" minlength="5" maxlength="5" required>
+          <input matInput formControlName="postcode" minlength="5" maxlength="5" type="number" required>
         </mat-form-field>
       </div>
 
       <mat-form-field class="!w-full">
         <mat-label>Phone</mat-label>
-        <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>
+        <input matInput formControlName="phone" required type="number">
       </mat-form-field>
 
       <mat-dialog-actions align="end">
diff --git a/src/app/employee/create/create.component.ts b/src/app/employee/create/create.component.ts
index 98e6a39..83cb773 100644
--- a/src/app/employee/create/create.component.ts
+++ b/src/app/employee/create/create.component.ts
@@ -1,5 +1,5 @@
 import {Component, inject, OnInit} from '@angular/core';
-import {FormArray, FormBuilder, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
+import {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";
@@ -12,11 +12,7 @@ import {
 } 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";
+import {NgIf} from "@angular/common";
 
 @Component({
   selector: 'app-create-employee',
@@ -30,11 +26,7 @@ import QualificationService from "../../services/qualification.service";
     MatDialogTitle,
     MatDialogActions,
     MatDialogClose,
-    MatSelect,
-    MatOption,
-    NgForOf,
     NgIf,
-    AsyncPipe,
   ],
   templateUrl: './create.component.html',
   standalone: true,
@@ -45,9 +37,6 @@ export class CreateComponent implements OnInit {
   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({
@@ -57,31 +46,16 @@ export class CreateComponent implements OnInit {
       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.employeeService.create(this.employeeForm.value as Employee).subscribe();
     this.dialogRef.close();
   }
 }
-- 
2.47.2