From 417acde6ac71ce9de784f855d7e490eb128ea1e1 Mon Sep 17 00:00:00 2001
From: Huy <ptran@noreply@simonis.lol>
Date: Wed, 15 Jan 2025 08:31:12 +0000
Subject: [PATCH] Fix employee details opened from qualification details not
 showing any skills (#34)

Co-authored-by: Phan Huy Tran <p.tran@neusta.de>
Reviewed-on: http://git.simonis.lol/angular/ems-frontend/pulls/34
Reviewed-by: Constantin Simonis <constantin@simonis.lol>
---
 .../details/details.component.html            | 22 ++++++++++---------
 .../details/details.component.ts              | 18 ++++++++++-----
 src/app/services/employee-api.service.ts      |  4 ++++
 3 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/src/app/qualification/details/details.component.html b/src/app/qualification/details/details.component.html
index 33cbe2b..3197fa6 100644
--- a/src/app/qualification/details/details.component.html
+++ b/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>
diff --git a/src/app/qualification/details/details.component.ts b/src/app/qualification/details/details.component.ts
index 593eeb1..9a2246d 100644
--- a/src/app/qualification/details/details.component.ts
+++ b/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
+      });
     });
   }
 }
diff --git a/src/app/services/employee-api.service.ts b/src/app/services/employee-api.service.ts
index 16aded1..b8e6d8b 100644
--- a/src/app/services/employee-api.service.ts
+++ b/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}`)
   }