From 9ceb0b803eb6883431bb9569471ebba2a870a823 Mon Sep 17 00:00:00 2001
From: Constantin Simonis <constantin@simonis.lol>
Date: Thu, 9 Jan 2025 09:59:01 +0000
Subject: [PATCH] add form to create employee

Reviewed-on: https://git.simonis.lol/angular/ems-frontend/pulls/18
Reviewed-by: Get in my car i have candy <huydw@proton.me>
---
 src/app/Qualification.ts                      |  7 +++
 src/app/employee/Employee.ts                  | 19 +++---
 src/app/employee/create/create.component.css  |  0
 src/app/employee/create/create.component.html | 46 ++++++++++++++
 src/app/employee/create/create.component.ts   | 61 +++++++++++++++++++
 src/app/employee/table/table.component.html   |  2 +-
 src/app/employee/table/table.component.ts     | 10 +++
 src/app/services/employee-api.service.ts      |  4 ++
 8 files changed, 141 insertions(+), 8 deletions(-)
 create mode 100644 src/app/Qualification.ts
 create mode 100644 src/app/employee/create/create.component.css
 create mode 100644 src/app/employee/create/create.component.html
 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/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/employee/create/create.component.css b/src/app/employee/create/create.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/employee/create/create.component.html b/src/app/employee/create/create.component.html
new file mode 100644
index 0000000..50c81ea
--- /dev/null
+++ b/src/app/employee/create/create.component.html
@@ -0,0 +1,46 @@
+<h2 mat-dialog-title>Create Employee</h2>
+<mat-dialog-content>
+  <form *ngIf="employeeForm" [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" type="number" required>
+        </mat-form-field>
+      </div>
+
+      <mat-form-field class="!w-full">
+        <mat-label>Phone</mat-label>
+        <input matInput formControlName="phone" required type="number">
+      </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>
+  </form>
+
+</mat-dialog-content>
diff --git a/src/app/employee/create/create.component.ts b/src/app/employee/create/create.component.ts
new file mode 100644
index 0000000..83cb773
--- /dev/null
+++ b/src/app/employee/create/create.component.ts
@@ -0,0 +1,61 @@
+import {Component, inject, OnInit} from '@angular/core';
+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";
+import {
+  MatDialogActions,
+  MatDialogClose,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle
+} from "@angular/material/dialog";
+import {Employee} from "../Employee";
+import EmployeeApiService from "../../services/employee-api.service";
+import {NgIf} from "@angular/common";
+
+@Component({
+  selector: 'app-create-employee',
+  imports: [
+    ReactiveFormsModule,
+    MatFormField,
+    MatInput,
+    MatButton,
+    MatLabel,
+    MatDialogContent,
+    MatDialogTitle,
+    MatDialogActions,
+    MatDialogClose,
+    NgIf,
+  ],
+  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);
+
+  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 === null || !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/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..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',
@@ -41,6 +42,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 +75,12 @@ export class TableComponent implements OnInit{
   protected openDeleteDialogue(employee: Employee): void {
     this.deleteDialogue.open(DeleteComponent, {data: employee});
   }
+
+  protected showCreateEmployeeModal() {
+    this.createEmployeeDialogue.open(CreateComponent)
+      .afterClosed()
+      .subscribe(() => {
+      this.employees$ = this.fetchEmployees();
+    });
+  }
 }
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)
+  }
 }