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

@@ -1,20 +1,22 @@
 <h2 mat-dialog-title class="text-xl font-semibold mb-4">
-  Employees with {{ qualification.skill }}
+  {{ qualification.skill }} Developers
 </h2>
 
-<mat-dialog-content>
+<mat-dialog-content class="px-1">
   @if (employees$ | async; as employees) {
     @if (employees.length === 0) {
       <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"
-          (click)="openEmployeeDetailsModal(employee)"
-        >
-          <span class="font-medium">{{ employee.firstName }} {{ employee.lastName }}</span>
-        </a>
-      }
+      <div class="space-y-1">
+        @for (employee of employees; track employee.id) {
+          <a
+            class="block w-full px-4 py-2 text-blue-600 rounded-lg hover:bg-blue-50 transition-colors cursor-pointer"
+            (click)="openEmployeeDetailsModal(employee.id)"
+          >
+            <span class="font-medium">{{ employee.firstName }} {{ employee.lastName }}</span>
+          </a>
+        }
+      </div>
     }
   }
 </mat-dialog-content>

src/app/qualification/details/details.component.ts

@@ -1,6 +1,7 @@
 import {Component, inject} from '@angular/core';
 import {
-  MAT_DIALOG_DATA, MatDialog,
+  MAT_DIALOG_DATA,
+  MatDialog,
   MatDialogActions,
   MatDialogContent,
   MatDialogRef,
@@ -10,8 +11,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";
+import EmployeeApiService from "../../services/employee-api.service";
 
 @Component({
   selector: 'app-details',
@@ -27,6 +28,7 @@ import {DetailsComponent as EmployeeDetailsComponent} from "../../employee/detai
 })
 export class DetailsComponent {
   private qualificationService = inject(QualificationService);
+  private employeeService = inject(EmployeeApiService);
   private dialogRef: MatDialogRef<DetailsComponent> = inject(MatDialogRef);
   private dialog: MatDialog = inject(MatDialog);
 
@@ -37,9 +39,15 @@ export class DetailsComponent {
     this.dialogRef.close();
   }
 
-  openEmployeeDetailsModal(employee: Employee) {
-    this.dialog.open(EmployeeDetailsComponent, {
-      data: employee
+  openEmployeeDetailsModal(id: number | undefined) {
+    if (!id) {
+      throw new Error("ID must not be undefined");
+    }
+
+    this.employeeService.getById(id).subscribe(employee => {
+      this.dialog.open(EmployeeDetailsComponent, {
+        data: employee
+      });
     });
   }
 }

src/app/services/employee-api.service.ts

@@ -12,6 +12,10 @@ export default class EmployeeApiService {
 
   private static readonly BASE_URL = 'http://localhost:8089';
 
+  public getById(id: number): Observable<Employee> {
+    return this.http.get(`${EmployeeApiService.BASE_URL}/employees/${id}`)
+  }
+
   public deleteById(id: number): Observable<Employee> {
     return this.http.delete(`${EmployeeApiService.BASE_URL}/employees/${id}`)
   }