From 00c5ab244fb22610709f84489d85fe383159a3d0 Mon Sep 17 00:00:00 2001 From: Phan Huy Tran Date: Thu, 9 Jan 2025 12:41:06 +0100 Subject: [PATCH 1/2] Implement qualification details --- src/app/Qualification.ts | 7 - src/app/employee/Employee.ts | 2 +- .../details/details.component.css | 0 .../details/details.component.html | 21 +++ .../details/details.component.ts | 36 +++++ .../qualification/table/table.component.html | 9 +- .../qualification/table/table.component.ts | 153 +++++++++--------- .../qualifications.component.html | 42 ----- src/app/services/qualification.service.ts | 12 +- 9 files changed, 154 insertions(+), 128 deletions(-) delete mode 100644 src/app/Qualification.ts create mode 100644 src/app/qualification/details/details.component.css create mode 100644 src/app/qualification/details/details.component.html create mode 100644 src/app/qualification/details/details.component.ts delete mode 100644 src/app/qualifications/qualifications.component.html diff --git a/src/app/Qualification.ts b/src/app/Qualification.ts deleted file mode 100644 index c5821f7..0000000 --- a/src/app/Qualification.ts +++ /dev/null @@ -1,7 +0,0 @@ -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 ca15e4f..10e19d1 100644 --- a/src/app/employee/Employee.ts +++ b/src/app/employee/Employee.ts @@ -1,4 +1,4 @@ -import {Qualification} from "../Qualification"; +import {Qualification} from "../qualification/Qualification"; export class Employee { constructor( diff --git a/src/app/qualification/details/details.component.css b/src/app/qualification/details/details.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/qualification/details/details.component.html b/src/app/qualification/details/details.component.html new file mode 100644 index 0000000..c9c364f --- /dev/null +++ b/src/app/qualification/details/details.component.html @@ -0,0 +1,21 @@ +

+ Employees with {{ qualification.skill }} +

+ + + @if (employees$ | async; as employees) { + @if (employees.length === 0) { +

No employees found with this qualification.

+ } @else { + @for (employee of employees; track employee.id) { + + {{ employee.firstName }} {{ employee.lastName }} + + } + } + } + + + + + diff --git a/src/app/qualification/details/details.component.ts b/src/app/qualification/details/details.component.ts new file mode 100644 index 0000000..4656aee --- /dev/null +++ b/src/app/qualification/details/details.component.ts @@ -0,0 +1,36 @@ +import {Component, inject} from '@angular/core'; +import { + MAT_DIALOG_DATA, + MatDialogActions, + MatDialogContent, + MatDialogRef, + MatDialogTitle +} from "@angular/material/dialog"; +import QualificationService from "../../services/qualification.service"; +import {Qualification} from "../Qualification"; +import {AsyncPipe} from "@angular/common"; +import {MatButton} from "@angular/material/button"; + +@Component({ + selector: 'app-details', + imports: [ + AsyncPipe, + MatDialogContent, + MatDialogTitle, + MatDialogActions, + MatButton + ], + templateUrl: './details.component.html', + styleUrl: './details.component.css' +}) +export class DetailsComponent { + private qualificationService = inject(QualificationService); + private dialogRef: MatDialogRef = inject(MatDialogRef); + + public qualification: Qualification = inject(MAT_DIALOG_DATA); + public employees$ = this.qualificationService.findEmployees(this.qualification.id); + + closeModal() { + this.dialogRef.close(); + } +} diff --git a/src/app/qualification/table/table.component.html b/src/app/qualification/table/table.component.html index 5852d59..09543a6 100644 --- a/src/app/qualification/table/table.component.html +++ b/src/app/qualification/table/table.component.html @@ -21,7 +21,14 @@ Skill - {{ qualification.skill }} + + + {{ qualification.skill }} + diff --git a/src/app/qualification/table/table.component.ts b/src/app/qualification/table/table.component.ts index e89a923..51052d9 100644 --- a/src/app/qualification/table/table.component.ts +++ b/src/app/qualification/table/table.component.ts @@ -1,102 +1,105 @@ 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, - MatCellDef, - MatColumnDef, - MatHeaderCell, - MatHeaderCellDef, - MatHeaderRow, - MatHeaderRowDef, - MatRow, - MatRowDef, - MatTable + MatCell, + MatCellDef, + MatColumnDef, + MatHeaderCell, + MatHeaderCellDef, + MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef, + MatTable } from "@angular/material/table"; import {MatIcon} from "@angular/material/icon"; import {MatCard, MatCardContent} from "@angular/material/card"; import {MatTooltip} from "@angular/material/tooltip"; import {MatProgressSpinner} from "@angular/material/progress-spinner"; +import {DetailsComponent} from "../details/details.component"; @Component({ - selector: 'app-qualifications', - imports: [ - AsyncPipe, - MatButton, - MatTable, - MatColumnDef, - MatHeaderCell, - MatCell, - MatHeaderCellDef, - MatCellDef, - MatIconButton, - MatIcon, - MatHeaderRow, - MatRow, - MatHeaderRowDef, - MatRowDef, - MatCard, - MatCardContent, - MatTooltip, - MatProgressSpinner - ], - templateUrl: './table.component.html', - standalone: true, - styleUrl: './table.component.css' + selector: 'app-qualifications', + imports: [ + AsyncPipe, + MatButton, + MatTable, + MatColumnDef, + MatHeaderCell, + MatCell, + MatHeaderCellDef, + MatCellDef, + MatIconButton, + MatIcon, + MatHeaderRow, + MatRow, + MatHeaderRowDef, + MatRowDef, + MatCard, + MatCardContent, + MatTooltip, + MatProgressSpinner + ], + templateUrl: './table.component.html', + styleUrl: './table.component.css' }) export class QualificationsComponent implements OnInit { - public qualifications$!: Observable; - public readonly displayedColumns: string[] = ['id', 'skill', 'actions']; + public qualifications$!: Observable; + public readonly displayedColumns: string[] = ['id', 'skill', 'actions']; - private readonly dialog: MatDialog = inject(MatDialog); - private readonly qualificationService: QualificationService = inject(QualificationService); + private readonly dialog: MatDialog = inject(MatDialog); + private readonly qualificationService: QualificationService = inject(QualificationService); - ngOnInit() { - this.loadQualifications(); - } - - private loadQualifications() { - this.qualifications$ = this.qualificationService.getAll(); - } - - openCreateModal() { - const dialogRef = this.dialog.open(CreateComponent); - - dialogRef.afterClosed().subscribe((success: boolean) => { - if (success) { + ngOnInit() { this.loadQualifications(); - } - }); - } + } - openEditModal(qualification: Qualification) { - const dialogRef = this.dialog.open(EditComponent, { - data: qualification - }); + private loadQualifications() { + this.qualifications$ = this.qualificationService.getAll(); + } - dialogRef.afterClosed().subscribe((success: boolean) => { - if (success) { - this.loadQualifications(); - } - }); - } + openCreateModal() { + const dialogRef = this.dialog.open(CreateComponent); - openDeleteModal(id: number) { - const dialogRef = this.dialog.open(DeleteComponent, { - data: id - }); + dialogRef.afterClosed().subscribe((success: boolean) => { + if (success) { + this.loadQualifications(); + } + }); + } - dialogRef.afterClosed().subscribe((success: boolean) => { - if (success) { - this.loadQualifications(); - } - }); - } + openEditModal(qualification: Qualification) { + const dialogRef = this.dialog.open(EditComponent, { + data: qualification + }); + + dialogRef.afterClosed().subscribe((success: boolean) => { + if (success) { + this.loadQualifications(); + } + }); + } + + openDeleteModal(id: number) { + const dialogRef = this.dialog.open(DeleteComponent, { + data: id + }); + + dialogRef.afterClosed().subscribe((success: boolean) => { + if (success) { + this.loadQualifications(); + } + }); + } + + openDetailsModal(qualification: Qualification) { + const dialogRef = this.dialog.open(DetailsComponent, { + data: qualification + }); + } } diff --git a/src/app/qualifications/qualifications.component.html b/src/app/qualifications/qualifications.component.html deleted file mode 100644 index 517cbcd..0000000 --- a/src/app/qualifications/qualifications.component.html +++ /dev/null @@ -1,42 +0,0 @@ -
-

Qualifications

- -
- -@if (qualifications$ | async; as qualifications) { - @if (qualifications) { - - - - - - - - - - - - - - - - - - -
ID{{ qualification.id }}Skill{{ qualification.skill }}Actions - - -
- } -} diff --git a/src/app/services/qualification.service.ts b/src/app/services/qualification.service.ts index 37425fd..b6ce426 100644 --- a/src/app/services/qualification.service.ts +++ b/src/app/services/qualification.service.ts @@ -2,6 +2,7 @@ import {inject, Injectable} from "@angular/core"; import {HttpClient} from "@angular/common/http"; import {map, Observable} from "rxjs"; import {Qualification} from "../qualification/Qualification"; +import {Employee} from "../employee/Employee"; @Injectable({ @@ -14,7 +15,7 @@ export default class QualificationService { public getAll(): Observable { return this.http.get(`${QualificationService.BASE_URL}/qualifications`).pipe( - map(qualifications => qualifications.sort((a, b) => a.id - b.id)) + map(qualifications => qualifications.sort((a, b) => a.id - b.id)) ) } @@ -26,7 +27,14 @@ export default class QualificationService { return this.http.put(`${QualificationService.BASE_URL}/qualifications/${id}`, data) } - delete(id: number) { + public delete(id: number) { return this.http.delete(`${QualificationService.BASE_URL}/qualifications/${id}`) } + + public findEmployees(id: number): Observable { + return this.http.get(`${QualificationService.BASE_URL}/qualifications/${id}/employees`) + .pipe( + map(response => response.employees) + ); + } } -- 2.47.2 From 33ecfc6a87d147619d468c630b256a1c37bc7034 Mon Sep 17 00:00:00 2001 From: Phan Huy Tran Date: Thu, 9 Jan 2025 12:43:05 +0100 Subject: [PATCH 2/2] Adjust descirption --- src/app/qualification/table/table.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/qualification/table/table.component.html b/src/app/qualification/table/table.component.html index 09543a6..59f2b71 100644 --- a/src/app/qualification/table/table.component.html +++ b/src/app/qualification/table/table.component.html @@ -24,7 +24,7 @@ {{ qualification.skill }} -- 2.47.2