Implement qualification details

src/app/Qualification.ts

@@ -1,7 +0,0 @@
-export class Qualification {
-  constructor(
-    public id?: number,
-    public skill?: string
-  ) {
-  }
-}

src/app/employee/Employee.ts

@@ -1,4 +1,4 @@
-import {Qualification} from "../Qualification";
+import {Qualification} from "../qualification/Qualification";
 
 export class Employee {
   constructor(

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

@@ -0,0 +1,21 @@
+<h2 mat-dialog-title class="text-xl font-semibold mb-4">
+  Employees with {{ qualification.skill }}
+</h2>
+
+<mat-dialog-content>
+  @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">
+          <span class="font-medium">{{ employee.firstName }} {{ employee.lastName }}</span>
+        </a>
+      }
+    }
+  }
+</mat-dialog-content>
+
+<mat-dialog-actions align="end" class="mt-4">
+  <button mat-button (click)="closeModal()">Close</button>
+</mat-dialog-actions>

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

@@ -0,0 +1,36 @@
+import {Component, inject} from '@angular/core';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogActions,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle
+} from "@angular/material/dialog";
+import QualificationService from "../../services/qualification.service";
+import {Qualification} from "../Qualification";
+import {AsyncPipe} from "@angular/common";
+import {MatButton} from "@angular/material/button";
+
+@Component({
+  selector: 'app-details',
+  imports: [
+    AsyncPipe,
+    MatDialogContent,
+    MatDialogTitle,
+    MatDialogActions,
+    MatButton
+  ],
+  templateUrl: './details.component.html',
+  styleUrl: './details.component.css'
+})
+export class DetailsComponent {
+  private qualificationService = inject(QualificationService);
+  private dialogRef: MatDialogRef<DetailsComponent> = inject(MatDialogRef);
+
+  public qualification: Qualification = inject(MAT_DIALOG_DATA);
+  public employees$ = this.qualificationService.findEmployees(this.qualification.id);
+
+  closeModal() {
+    this.dialogRef.close();
+  }
+}

src/app/qualification/table/table.component.html

@@ -21,7 +21,14 @@
 
                             <ng-container matColumnDef="skill">
                                 <th mat-header-cell *matHeaderCellDef class="!text-left">Skill</th>
-                                <td mat-cell *matCellDef="let qualification" class="!py-4">{{ qualification.skill }}
+                                <td mat-cell *matCellDef="let qualification" class="!py-4">
+                                    <a
+                                            class="!text-blue-600 hover:!underline cursor-pointer"
+                                            [matTooltip]="'Click to view skill details'"
+                                            (click)="openDetailsModal(qualification)"
+                                    >
+                                        {{ qualification.skill }}
+                                    </a>
                                 </td>
                             </ng-container>
 

src/app/qualification/table/table.component.ts

@@ -1,12 +1,12 @@
 import {Component, inject, OnInit} from '@angular/core';
 import {Observable} from "rxjs";
 import {Qualification} from "../Qualification";
-import {AsyncPipe} from "@angular/common";
 import {MatDialog} from "@angular/material/dialog";
 import QualificationService from "../../services/qualification.service";
 import {CreateComponent} from "../create/create.component";
 import {EditComponent} from "../edit/edit.component";
 import {DeleteComponent} from "../delete/delete.component";
+import {AsyncPipe} from "@angular/common";
 import {MatButton, MatIconButton} from "@angular/material/button";
 import {
     MatCell,
@@ -14,16 +14,14 @@ import {
     MatColumnDef,
     MatHeaderCell,
     MatHeaderCellDef,
-  MatHeaderRow,
+    MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef,
-  MatHeaderRowDef,
-  MatRow,
-  MatRowDef,
     MatTable
 } from "@angular/material/table";
 import {MatIcon} from "@angular/material/icon";
 import {MatCard, MatCardContent} from "@angular/material/card";
 import {MatTooltip} from "@angular/material/tooltip";
 import {MatProgressSpinner} from "@angular/material/progress-spinner";
+import {DetailsComponent} from "../details/details.component";
 
 @Component({
     selector: 'app-qualifications',
@@ -48,7 +46,6 @@ import {MatProgressSpinner} from "@angular/material/progress-spinner";
         MatProgressSpinner
     ],
     templateUrl: './table.component.html',
-  standalone: true,
     styleUrl: './table.component.css'
 })
 export class QualificationsComponent implements OnInit {
@@ -99,4 +96,10 @@ export class QualificationsComponent implements OnInit {
             }
         });
     }
+
+    openDetailsModal(qualification: Qualification) {
+        const dialogRef = this.dialog.open(DetailsComponent, {
+            data: qualification
+        });
+    }
 }

src/app/qualifications/qualifications.component.html

@@ -1,42 +0,0 @@
-<div class="flex">
-  <h1 class="text-2xl font-semibold">Qualifications</h1>
-  <button mat-flat-button class="ml-auto bg-blue-600" (click)="openCreateModal()">
-    <mat-icon class="mr-2">add</mat-icon>
-    Create qualification
-  </button>
-</div>
-
-@if (qualifications$ | async; as qualifications) {
-  @if (qualifications) {
-    <table
-      mat-table
-      [dataSource]="qualifications"
-      class="mat-elevation-z8"
-    >
-      <ng-container matColumnDef="id">
-        <th mat-header-cell *matHeaderCellDef>ID</th>
-        <td mat-cell *matCellDef="let qualification">{{ qualification.id }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="skill">
-        <th mat-header-cell *matHeaderCellDef>Skill</th>
-        <td mat-cell *matCellDef="let qualification">{{ qualification.skill }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef>Actions</th>
-        <td mat-cell *matCellDef="let qualification">
-          <button mat-icon-button color="primary" (click)="openEditModal(qualification)">
-            <mat-icon>edit</mat-icon>
-          </button>
-          <button mat-icon-button color="warn" (click)="openDeleteModal(qualification.id)">
-            <mat-icon>delete</mat-icon>
-          </button>
-        </td>
-      </ng-container>
-
-      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-    </table>
-  }
-}

src/app/services/qualification.service.ts

@@ -2,6 +2,7 @@ import {inject, Injectable} from "@angular/core";
 import {HttpClient} from "@angular/common/http";
 import {map, Observable} from "rxjs";
 import {Qualification} from "../qualification/Qualification";
+import {Employee} from "../employee/Employee";
 
 
 @Injectable({
@@ -26,7 +27,14 @@ export default class QualificationService {
     return this.http.put(`${QualificationService.BASE_URL}/qualifications/${id}`, data)
   }
 
-  delete(id: number) {
+  public delete(id: number) {
     return this.http.delete(`${QualificationService.BASE_URL}/qualifications/${id}`)
   }
+
+  public findEmployees(id: number): Observable<Employee[]> {
+    return this.http.get<any>(`${QualificationService.BASE_URL}/qualifications/${id}/employees`)
+      .pipe(
+        map(response => response.employees)
+      );
+  }
 }