add form to edit employee

Reviewed-on: #23
Reviewed-by: Get in my car i have candy <huydw@proton.me>

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

@@ -33,7 +33,7 @@
 
       <mat-form-field class="!w-full">
         <mat-label>Phone</mat-label>
-        <input matInput formControlName="phone" required type="number">
+        <input matInput formControlName="phone" required>
       </mat-form-field>
 
       <mat-dialog-actions align="end">

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

@@ -0,0 +1,46 @@
+<h2 mat-dialog-title>Edit 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>
+      </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>

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

@@ -0,0 +1,68 @@
+import {Component, inject, OnInit} from '@angular/core';
+import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
+import {
+  MAT_DIALOG_DATA,
+  MatDialogActions,
+  MatDialogClose,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle
+} from "@angular/material/dialog";
+import {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";
+
+@Component({
+  selector: 'app-edit',
+  imports: [
+    MatDialogTitle,
+    MatDialogContent,
+    NgIf,
+    ReactiveFormsModule,
+    MatFormField,
+    MatInput,
+    MatDialogActions,
+    MatButton,
+    MatDialogClose,
+    MatLabel
+  ],
+  templateUrl: './edit.component.html',
+  standalone: true,
+  styleUrl: './edit.component.css'
+})
+export class EditComponent implements OnInit {
+  employeeForm: FormGroup | null = null;
+  formBuilder: FormBuilder = inject(FormBuilder);
+  employeeService: EmployeeApiService = inject(EmployeeApiService);
+  dialogRef: MatDialogRef<EditComponent> = inject(MatDialogRef);
+  employee: Employee = inject(MAT_DIALOG_DATA);
+
+  ngOnInit(): void {
+    this.employeeForm = this.formBuilder.group({
+      firstName: [this.employee.firstName, Validators.required],
+      lastName: [this.employee.lastName, Validators.required],
+      street: [this.employee.street, Validators.required],
+      postcode: [this.employee.postcode, [Validators.required, Validators.minLength(5), Validators.maxLength(5)]],
+      city: [this.employee.city, Validators.required],
+      phone: [this.employee.phone, Validators.required],
+    });
+  }
+
+  submit() {
+    if (this.employeeForm === null || !this.employeeForm.valid) {
+      console.error('Form invalid');
+      return;
+    }
+
+    if (this.employee.id === undefined) {
+      console.error('Employee ID is undefined');
+      return;
+    }
+
+    this.employeeService.update(this.employeeForm.value as Employee, this.employee.id).subscribe();
+    this.dialogRef.close();
+  }
+}

src/app/employee/table/table.component.html

@@ -34,7 +34,7 @@
               <ng-container matColumnDef="actions">
                 <th mat-header-cell *matHeaderCellDef class="!text-right"> Actions </th>
                 <td mat-cell *matCellDef="let employee" class="!text-right !py-4">
-                  <button mat-icon-button color="primary" [matTooltip]="'Edit employee'" class="!mr-2">
+                  <button mat-icon-button color="primary" [matTooltip]="'Edit employee'" class="!mr-2" (click)="showEditEmployeeModal(employee)">
                     <mat-icon>edit</mat-icon>
                   </button>
                   <button mat-icon-button color="warn" [matTooltip]="'Delete employee'" (click)="openDeleteDialogue(employee)">

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

@@ -18,6 +18,7 @@ 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";
+import {EditComponent} from "../edit/edit.component";
 
 @Component({
   selector: 'app-employee-list',
@@ -41,8 +42,7 @@ import {CreateComponent} from "../create/create.component";
 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 readonly matDialog: MatDialog = inject(MatDialog);
 
   private static readonly MAX_RETRIES = 3;
   public employees$: Observable<Employee[]> = of([]);
@@ -73,7 +73,7 @@ export class TableComponent implements OnInit{
   }
 
   protected openDeleteDialogue(employee: Employee): void {
-    this.deleteDialogue.open(DeleteComponent, {data: employee})
+    this.matDialog.open(DeleteComponent, {data: employee})
       .afterClosed()
       .subscribe(() => {
         this.employees$ = this.fetchEmployees();
@@ -81,10 +81,18 @@ export class TableComponent implements OnInit{
   }
 
   protected showCreateEmployeeModal() {
-    this.createEmployeeDialogue.open(CreateComponent)
+    this.matDialog.open(CreateComponent)
       .afterClosed()
       .subscribe(() => {
       this.employees$ = this.fetchEmployees();
     });
   }
+
+  protected showEditEmployeeModal(employee: Employee) {
+    this.matDialog.open(EditComponent, {data: employee})
+      .afterClosed()
+      .subscribe(() => {
+        this.employees$ = this.fetchEmployees();
+      });
+  }
 }

src/app/qualification/delete/delete.component.ts

@@ -8,7 +8,6 @@ import {
 } from "@angular/material/dialog";
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import QualificationService from "../../services/qualification.service";
-import {MatError} from "@angular/material/form-field";
 import {MatButton} from "@angular/material/button";
 
 @Component({
@@ -18,11 +17,11 @@ import {MatButton} from "@angular/material/button";
     MatDialogContent,
     MatDialogTitle,
     ReactiveFormsModule,
-    MatError,
     MatDialogActions,
     MatButton
   ],
   templateUrl: './delete.component.html',
+  standalone: true,
   styleUrl: './delete.component.css'
 })
 export class DeleteComponent {

src/app/qualification/table/table.component.ts

@@ -1,12 +1,12 @@
 import {Component, inject, OnInit} from '@angular/core';
 import {Observable} from "rxjs";
 import {Qualification} from "../Qualification";
+import {AsyncPipe} from "@angular/common";
 import {MatDialog} from "@angular/material/dialog";
 import QualificationService from "../../services/qualification.service";
 import {CreateComponent} from "../create/create.component";
 import {EditComponent} from "../edit/edit.component";
 import {DeleteComponent} from "../delete/delete.component";
-import {AsyncPipe} from "@angular/common";
 import {MatButton, MatIconButton} from "@angular/material/button";
 import {
   MatCell,
@@ -14,7 +14,10 @@ import {
   MatColumnDef,
   MatHeaderCell,
   MatHeaderCellDef,
-  MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef,
+  MatHeaderRow,
+  MatHeaderRowDef,
+  MatRow,
+  MatRowDef,
   MatTable
 } from "@angular/material/table";
 import {MatIcon} from "@angular/material/icon";
@@ -45,6 +48,7 @@ import {MatProgressSpinner} from "@angular/material/progress-spinner";
     MatProgressSpinner
   ],
   templateUrl: './table.component.html',
+  standalone: true,
   styleUrl: './table.component.css'
 })
 export class QualificationsComponent implements OnInit {

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

@@ -23,4 +23,8 @@ export default class EmployeeApiService {
   public create(employee: Employee) {
     return this.http.post<Employee>(`${EmployeeApiService.BASE_URL}/employees`, employee)
   }
+
+  public update(employee: Employee, id: number) {
+    return this.http.patch(`${EmployeeApiService.BASE_URL}/employees/${id}`, employee)
+  }
 }