From 7ecd9d575593acdd23c21420f3fd86b6f753913a Mon Sep 17 00:00:00 2001 From: Phan Huy Tran Date: Thu, 9 Jan 2025 13:41:03 +0100 Subject: [PATCH 1/3] Add functionality to select qualifications while editing employees --- src/app/employee/edit/edit.component.html | 9 ++++++++ src/app/employee/edit/edit.component.ts | 28 ++++++++++++++++++++--- src/app/services/employee-api.service.ts | 2 +- 3 files changed, 35 insertions(+), 4 deletions(-) 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..6cacb51 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) } } -- 2.47.2 From 8288bb4505340dec3b4c49329abab9e654814972 Mon Sep 17 00:00:00 2001 From: Phan Huy Tran Date: Thu, 9 Jan 2025 13:46:33 +0100 Subject: [PATCH 2/3] Add functionality to select qualifications while creating employees --- src/app/employee/create/create.component.html | 9 ++++ src/app/employee/create/create.component.ts | 51 ++++++++++++++----- 2 files changed, 46 insertions(+), 14 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); } } -- 2.47.2 From 34f04c62cbccefba3961427d2ca76425a33796f8 Mon Sep 17 00:00:00 2001 From: Phan Huy Tran Date: Thu, 9 Jan 2025 13:58:03 +0100 Subject: [PATCH 3/3] Use proper syntax --- src/app/employee/edit/edit.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/employee/edit/edit.component.ts b/src/app/employee/edit/edit.component.ts index 6cacb51..769a938 100644 --- a/src/app/employee/edit/edit.component.ts +++ b/src/app/employee/edit/edit.component.ts @@ -57,7 +57,7 @@ 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) || []] + qualifications: [this.employee.skillSet?.map(skill => skill.id) ?? []] }); } -- 2.47.2