From 176074fbdca9e60e677313c2ff34a938751d88ca Mon Sep 17 00:00:00 2001 From: Constantin Simonis Date: Thu, 9 Jan 2025 11:10:51 +0000 Subject: [PATCH] add form to edit employee Reviewed-on: https://git.simonis.lol/angular/ems-frontend/pulls/23 Reviewed-by: Get in my car i have candy --- src/app/employee/create/create.component.html | 2 +- src/app/employee/edit/edit.component.css | 0 src/app/employee/edit/edit.component.html | 46 +++++++++++++ src/app/employee/edit/edit.component.ts | 68 +++++++++++++++++++ src/app/employee/table/table.component.html | 2 +- src/app/employee/table/table.component.ts | 16 +++-- .../qualification/delete/delete.component.ts | 3 +- .../qualification/table/table.component.ts | 8 ++- src/app/services/employee-api.service.ts | 4 ++ 9 files changed, 139 insertions(+), 10 deletions(-) create mode 100644 src/app/employee/edit/edit.component.css create mode 100644 src/app/employee/edit/edit.component.html create mode 100644 src/app/employee/edit/edit.component.ts diff --git a/src/app/employee/create/create.component.html b/src/app/employee/create/create.component.html index 50c81ea..268bf0a 100644 --- a/src/app/employee/create/create.component.html +++ b/src/app/employee/create/create.component.html @@ -33,7 +33,7 @@ Phone - + diff --git a/src/app/employee/edit/edit.component.css b/src/app/employee/edit/edit.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/employee/edit/edit.component.html b/src/app/employee/edit/edit.component.html new file mode 100644 index 0000000..d782a1a --- /dev/null +++ b/src/app/employee/edit/edit.component.html @@ -0,0 +1,46 @@ +

Edit Employee

+ +
+
+
+ + First Name + + + + + Last Name + + +
+ + + Street + + + +
+ + City + + + + + Postcode + + +
+ + + Phone + + + + + + + +
+
+ +
diff --git a/src/app/employee/edit/edit.component.ts b/src/app/employee/edit/edit.component.ts new file mode 100644 index 0000000..535f94d --- /dev/null +++ b/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 = 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(); + } +} diff --git a/src/app/employee/table/table.component.html b/src/app/employee/table/table.component.html index d5f743e..f999470 100644 --- a/src/app/employee/table/table.component.html +++ b/src/app/employee/table/table.component.html @@ -34,7 +34,7 @@ Actions -