add employee details

Reviewed-on: #27
Reviewed-by: Get in my car i have candy <huydw@proton.me>

src/app/qualification/details/details.component.html

@@ -8,7 +8,10 @@
       <p class="text-gray-500 italic">No employees found with this qualification.</p>
     } @else {
       @for (employee of employees; track employee.id) {
-        <a class="flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
+        <a
+          class="flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
+          (click)="openEmployeeDetailsModal(employee)"
+        >
           <span class="font-medium">{{ employee.firstName }} {{ employee.lastName }}</span>
         </a>
       }

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<DetailsComponent> = 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
+    });
+  }
 }