From 423116ed34a0d14b114b7709be4398d5307df531 Mon Sep 17 00:00:00 2001 From: Get in my car i have candy Date: Thu, 9 Jan 2025 12:58:48 +0000 Subject: [PATCH] Implement removing and adding qualifications while creating or editing employees (#29) Co-authored-by: Phan Huy Tran Reviewed-on: https://git.simonis.lol/angular/ems-frontend/pulls/29 Reviewed-by: Constantin Simonis --- src/app/employee/create/create.component.html | 9 ++++ src/app/employee/create/create.component.ts | 51 ++++++++++++++----- src/app/employee/edit/edit.component.html | 9 ++++ src/app/employee/edit/edit.component.ts | 28 ++++++++-- src/app/services/employee-api.service.ts | 2 +- 5 files changed, 81 insertions(+), 18 deletions(-) diff --git a/src/app/employee/create/create.component.html b/src/app/employee/create/create.component.html index 268bf0a..454b94c 100644 --- a/src/app/employee/create/create.component.html +++ b/src/app/employee/create/create.component.html @@ -36,6 +36,15 @@ + + Qualifications + + + {{qualification.skill}} + + + + diff --git a/src/app/employee/create/create.component.ts b/src/app/employee/create/create.component.ts index b377102..6cbc5ed 100644 --- a/src/app/employee/create/create.component.ts +++ b/src/app/employee/create/create.component.ts @@ -12,22 +12,29 @@ import { } from "@angular/material/dialog"; import {Employee} from "../Employee"; import EmployeeApiService from "../../services/employee-api.service"; -import {NgIf} from "@angular/common"; +import {NgForOf, NgIf} from "@angular/common"; +import {MatOption} from "@angular/material/core"; +import {MatSelect} from "@angular/material/select"; +import QualificationService from "../../services/qualification.service"; +import {Qualification} from "../../qualification/Qualification"; @Component({ selector: 'app-create-employee', - imports: [ - ReactiveFormsModule, - MatFormField, - MatInput, - MatButton, - MatLabel, - MatDialogContent, - MatDialogTitle, - MatDialogActions, - MatDialogClose, - NgIf, - ], + imports: [ + ReactiveFormsModule, + MatFormField, + MatInput, + MatButton, + MatLabel, + MatDialogContent, + MatDialogTitle, + MatDialogActions, + MatDialogClose, + NgIf, + MatOption, + MatSelect, + NgForOf, + ], templateUrl: './create.component.html', standalone: true, styleUrl: './create.component.css' @@ -37,8 +44,11 @@ export class CreateComponent implements OnInit { employeeService: EmployeeApiService = inject(EmployeeApiService); formBuilder: FormBuilder = inject(FormBuilder); dialogRef: MatDialogRef = inject(MatDialogRef); + qualificationService: QualificationService = inject(QualificationService); + qualifications: Qualification[] = []; ngOnInit(): void { + this.loadQualifications(); this.employeeForm = this.formBuilder.group({ firstName: ['', Validators.required], lastName: ['', Validators.required], @@ -46,16 +56,29 @@ export class CreateComponent implements OnInit { postcode: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(5)]], city: ['', Validators.required], phone: ['', Validators.required], + qualifications: [[]] }); } + loadQualifications() { + this.qualificationService.getAll().subscribe( + qualifications => this.qualifications = qualifications + ); + } + submit() { if (this.employeeForm === null || !this.employeeForm.valid) { console.error('Form invalid'); return; } - this.employeeService.create(this.employeeForm.value as Employee).subscribe(); + const formValue = this.employeeForm.value; + const employeeData = { + ...formValue, + skillSet: formValue.qualifications + }; + + this.employeeService.create(employeeData as Employee).subscribe(); this.dialogRef.close(true); } } diff --git a/src/app/employee/edit/edit.component.html b/src/app/employee/edit/edit.component.html index d782a1a..93dd8ce 100644 --- a/src/app/employee/edit/edit.component.html +++ b/src/app/employee/edit/edit.component.html @@ -36,6 +36,15 @@ + + Qualifications + + + {{qualification.skill}} + + + + diff --git a/src/app/employee/edit/edit.component.ts b/src/app/employee/edit/edit.component.ts index 2259918..769a938 100644 --- a/src/app/employee/edit/edit.component.ts +++ b/src/app/employee/edit/edit.component.ts @@ -8,12 +8,15 @@ import { MatDialogRef, MatDialogTitle } from "@angular/material/dialog"; -import {NgIf} from "@angular/common"; +import {NgForOf, 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"; +import QualificationService from "../../services/qualification.service"; +import {Qualification} from "../../qualification/Qualification"; +import {MatOption, MatSelect} from "@angular/material/select"; @Component({ selector: 'app-edit', @@ -27,7 +30,10 @@ import EmployeeApiService from "../../services/employee-api.service"; MatDialogActions, MatButton, MatDialogClose, - MatLabel + MatLabel, + MatSelect, + MatOption, + NgForOf ], templateUrl: './edit.component.html', standalone: true, @@ -37,10 +43,13 @@ export class EditComponent implements OnInit { employeeForm: FormGroup | null = null; formBuilder: FormBuilder = inject(FormBuilder); employeeService: EmployeeApiService = inject(EmployeeApiService); + qualificationService: QualificationService = inject(QualificationService); dialogRef: MatDialogRef = inject(MatDialogRef); employee: Employee = inject(MAT_DIALOG_DATA); + qualifications: Qualification[] = []; ngOnInit(): void { + this.loadQualifications(); this.employeeForm = this.formBuilder.group({ firstName: [this.employee.firstName, Validators.required], lastName: [this.employee.lastName, Validators.required], @@ -48,9 +57,16 @@ export class EditComponent implements OnInit { postcode: [this.employee.postcode, [Validators.required, Validators.minLength(5), Validators.maxLength(5)]], city: [this.employee.city, Validators.required], phone: [this.employee.phone, Validators.required], + qualifications: [this.employee.skillSet?.map(skill => skill.id) ?? []] }); } + loadQualifications() { + this.qualificationService.getAll().subscribe( + qualifications => this.qualifications = qualifications + ); + } + submit() { if (this.employeeForm === null || !this.employeeForm.valid) { console.error('Form invalid'); @@ -62,7 +78,13 @@ export class EditComponent implements OnInit { return; } - this.employeeService.update(this.employeeForm.value as Employee, this.employee.id).subscribe(); + const formValue = this.employeeForm.value; + const employeeData = { + ...formValue, + skillSet: formValue.qualifications + }; + + this.employeeService.update(employeeData as Employee, this.employee.id).subscribe(); this.dialogRef.close(true); } } diff --git a/src/app/services/employee-api.service.ts b/src/app/services/employee-api.service.ts index c134dad..16aded1 100644 --- a/src/app/services/employee-api.service.ts +++ b/src/app/services/employee-api.service.ts @@ -25,6 +25,6 @@ export default class EmployeeApiService { } public update(employee: Employee, id: number) { - return this.http.patch(`${EmployeeApiService.BASE_URL}/employees/${id}`, employee) + return this.http.put(`${EmployeeApiService.BASE_URL}/employees/${id}`, employee) } }