src/app/employee/details/details.component.html

@@ -0,0 +1,27 @@
+<h2 mat-dialog-title>{{ employee.firstName }} {{ employee.lastName }}</h2>
+
+<mat-dialog-content>
+  <div class="flex">
+    <div class="flex-1">
+      <p><strong>ID:</strong> {{ employee.id }}</p>
+      <p><strong>First Name:</strong> {{ employee.firstName }}</p>
+      <p><strong>Last Name:</strong> {{ employee.lastName }}</p>
+      <p><strong>Phone:</strong> {{ employee.phone }}</p>
+      <p><strong>Postcode:</strong> {{ employee.postcode }}</p>
+      <p><strong>Street:</strong> {{ employee.street }}</p>
+      <p><strong>City:</strong> {{ employee.city }}</p>
+      <p><strong>Skills:</strong></p>
+      <ul>
+        @for (skill of employee.skillSet; track null) {
+          <li> <strong>•</strong> {{skill.skill}}</li>
+        } @empty {
+          <li><strong>-</strong></li>
+        }
+      </ul>
+    </div>
+  </div>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end" class="mt-4">
+  <button mat-button (click)="closeModal()">Close</button>
+</mat-dialog-actions>

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

src/app/employee/table/table.component.html

@@ -14,30 +14,35 @@
           <div class="!overflow-x-auto !rounded-lg !bg-gray-50 !p-4">
             <table mat-table [dataSource]="employees" matSort class="!w-full">
               <ng-container matColumnDef="name">
-                <th mat-header-cell *matHeaderCellDef class="!text-left"> Name </th>
+                <th mat-header-cell *matHeaderCellDef class="!text-left"> Name</th>
                 <td mat-cell *matCellDef="let employee" class="!py-4">
                   <div class="!flex !items-center">
                     <div class="!h-10 !w-10 !rounded-full !bg-blue-100 !flex !items-center !justify-center !mr-3">
                       <span class="!text-blue-600 !font-medium">
-                        {{employee.firstName[0]}}{{employee.lastName[0]}}
+                        {{ employee.firstName[0] }}{{ employee.lastName[0] }}
                       </span>
                     </div>
                     <div>
-                      <div class="!font-medium !text-gray-900">
+                      <a
-                        {{employee.lastName}}, {{employee.firstName}}
+                        class="!text-blue-600 hover:!underline cursor-pointer"
-                      </div>
+                        [matTooltip]="'Click to view Employee details'"
+                        (click)="openDetailModal(employee)">
+                        {{ employee.lastName }}, {{ employee.firstName }}
+                      </a>
                     </div>
                   </div>
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="actions">
-                <th mat-header-cell *matHeaderCellDef class="!text-right"> Actions </th>
+                <th mat-header-cell *matHeaderCellDef class="!text-right"> Actions</th>
                 <td mat-cell *matCellDef="let employee" class="!text-right !py-4">
-                  <button mat-icon-button color="primary" [matTooltip]="'Edit employee'" class="!mr-2" (click)="showEditEmployeeModal(employee)">
+                  <button mat-icon-button color="primary" [matTooltip]="'Edit employee'" class="!mr-2"
+                          (click)="showEditEmployeeModal(employee)">
                     <mat-icon>edit</mat-icon>
                   </button>
-                  <button mat-icon-button color="warn" [matTooltip]="'Delete employee'" (click)="openDeleteDialogue(employee)">
+                  <button mat-icon-button color="warn" [matTooltip]="'Delete employee'"
+                          (click)="openDeleteDialogue(employee)">
                     <mat-icon>delete</mat-icon>
                   </button>
                 </td>
@@ -67,7 +72,7 @@
         <div class="!bg-gray-50 !p-4 !rounded-lg">
           <div class="!space-y-4">
             <div class="!h-10 !bg-gray-200 !rounded"></div>
-            @for(i of [1,2,3]; track i) {
+            @for (i of [1, 2, 3]; track i) {
               <div class="!h-16 !bg-white !rounded-lg !shadow-sm"></div>
             }
           </div>

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

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