From a4308a1d96e9a4ad256656daf638be659ca48dfe Mon Sep 17 00:00:00 2001 From: Constantin Simonis Date: Thu, 9 Jan 2025 13:12:22 +0100 Subject: [PATCH] add employee details --- .../employee/details/details.component.css | 0 .../employee/details/details.component.html | 27 +++++++++++++++++++ src/app/employee/details/details.component.ts | 26 ++++++++++++++++++ src/app/employee/table/table.component.html | 23 +++++++++------- src/app/employee/table/table.component.ts | 5 ++++ .../details/details.component.html | 5 +++- .../details/details.component.ts | 11 +++++++- 7 files changed, 86 insertions(+), 11 deletions(-) create mode 100644 src/app/employee/details/details.component.css create mode 100644 src/app/employee/details/details.component.html create mode 100644 src/app/employee/details/details.component.ts diff --git a/src/app/employee/details/details.component.css b/src/app/employee/details/details.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/employee/details/details.component.html b/src/app/employee/details/details.component.html new file mode 100644 index 0000000..4b6832a --- /dev/null +++ b/src/app/employee/details/details.component.html @@ -0,0 +1,27 @@ +

{{ employee.firstName }} {{ employee.lastName }}

+ + +
+
+

ID: {{ employee.id }}

+

First Name: {{ employee.firstName }}

+

Last Name: {{ employee.lastName }}

+

Phone: {{ employee.phone }}

+

Postcode: {{ employee.postcode }}

+

Street: {{ employee.street }}

+

City: {{ employee.city }}

+

Skills:

+
    + @for (skill of employee.skillSet; track null) { +
  • • {{skill.skill}}
    • + } @empty { +
  • -
    • + } +
+
+
+ + + + + diff --git a/src/app/employee/details/details.component.ts b/src/app/employee/details/details.component.ts new file mode 100644 index 0000000..3dbafb4 --- /dev/null +++ b/src/app/employee/details/details.component.ts @@ -0,0 +1,26 @@ +import {Component, inject} from '@angular/core'; +import {MAT_DIALOG_DATA, MatDialogActions, MatDialogContent, MatDialogTitle} from "@angular/material/dialog"; +import {Employee} from "../Employee"; +import {MatButton} from "@angular/material/button"; +import {DialogRef} from "@angular/cdk/dialog"; + +@Component({ + selector: 'app-details', + imports: [ + MatDialogTitle, + MatDialogContent, + MatButton, + MatDialogActions + ], + templateUrl: './details.component.html', + standalone: true, + styleUrl: './details.component.css' +}) +export class DetailsComponent { + employee: Employee = inject(MAT_DIALOG_DATA); + dialogRef: DialogRef = inject(DialogRef); + + closeModal() { + this.dialogRef.close(); + } +} diff --git a/src/app/employee/table/table.component.html b/src/app/employee/table/table.component.html index f999470..0be4f02 100644 --- a/src/app/employee/table/table.component.html +++ b/src/app/employee/table/table.component.html @@ -14,30 +14,35 @@
- + - + @@ -67,7 +72,7 @@
- @for(i of [1,2,3]; track i) { + @for (i of [1, 2, 3]; track i) {
}
diff --git a/src/app/employee/table/table.component.ts b/src/app/employee/table/table.component.ts index 716e6d5..5ae8adb 100644 --- a/src/app/employee/table/table.component.ts +++ b/src/app/employee/table/table.component.ts @@ -19,6 +19,7 @@ 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"; +import {DetailsComponent} from "../details/details.component"; @Component({ selector: 'app-employee-list', @@ -95,4 +96,8 @@ export class TableComponent implements OnInit{ this.employees$ = this.fetchEmployees(); }); } + + protected openDetailModal(employee: Employee) { + this.matDialog.open(DetailsComponent, {data: employee}); + } } diff --git a/src/app/qualification/details/details.component.html b/src/app/qualification/details/details.component.html index c9c364f..33cbe2b 100644 --- a/src/app/qualification/details/details.component.html +++ b/src/app/qualification/details/details.component.html @@ -8,7 +8,10 @@

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 index 4656aee..593eeb1 100644 --- a/src/app/qualification/details/details.component.ts +++ b/src/app/qualification/details/details.component.ts @@ -1,6 +1,6 @@ import {Component, inject} from '@angular/core'; import { - MAT_DIALOG_DATA, + MAT_DIALOG_DATA, MatDialog, MatDialogActions, MatDialogContent, MatDialogRef, @@ -10,6 +10,8 @@ import QualificationService from "../../services/qualification.service"; import {Qualification} from "../Qualification"; import {AsyncPipe} from "@angular/common"; import {MatButton} from "@angular/material/button"; +import {Employee} from "../../employee/Employee"; +import {DetailsComponent as EmployeeDetailsComponent} from "../../employee/details/details.component"; @Component({ selector: 'app-details', @@ -26,6 +28,7 @@ import {MatButton} from "@angular/material/button"; export class DetailsComponent { private qualificationService = inject(QualificationService); private dialogRef: MatDialogRef = inject(MatDialogRef); + private dialog: MatDialog = inject(MatDialog); public qualification: Qualification = inject(MAT_DIALOG_DATA); public employees$ = this.qualificationService.findEmployees(this.qualification.id); @@ -33,4 +36,10 @@ export class DetailsComponent { closeModal() { this.dialogRef.close(); } + + openEmployeeDetailsModal(employee: Employee) { + this.dialog.open(EmployeeDetailsComponent, { + data: employee + }); + } } -- 2.47.2
Name Name
- {{employee.firstName[0]}}{{employee.lastName[0]}} + {{ employee.firstName[0] }}{{ employee.lastName[0] }}
-
- {{employee.lastName}}, {{employee.firstName}} -
+ + {{ employee.lastName }}, {{ employee.firstName }} +
Actions Actions - -