From aad792807dc92728c6c7084ec1eb9dfa08a54032 Mon Sep 17 00:00:00 2001
From: Phan Huy Tran <p.tran@neusta.de>
Date: Thu, 9 Jan 2025 12:41:06 +0100
Subject: [PATCH] Implement qualification details

---
 src/app/Qualification.ts                      |   7 -
 src/app/employee/Employee.ts                  |   2 +-
 .../qualification/delete/delete.component.ts  |   1 -
 .../details/details.component.css             |   0
 .../details/details.component.html            |  21 +++
 .../details/details.component.ts              |  36 +++++
 .../qualification/table/table.component.html  |   9 +-
 .../qualification/table/table.component.ts    | 147 +++++++++---------
 .../qualifications.component.html             |  42 -----
 src/app/services/qualification.service.ts     |  12 +-
 10 files changed, 153 insertions(+), 124 deletions(-)
 delete mode 100644 src/app/Qualification.ts
 create mode 100644 src/app/qualification/details/details.component.css
 create mode 100644 src/app/qualification/details/details.component.html
 create mode 100644 src/app/qualification/details/details.component.ts
 delete mode 100644 src/app/qualifications/qualifications.component.html

diff --git a/src/app/Qualification.ts b/src/app/Qualification.ts
deleted file mode 100644
index c5821f7..0000000
--- a/src/app/Qualification.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export class Qualification {
-  constructor(
-    public id?: number,
-    public skill?: string
-  ) {
-  }
-}
diff --git a/src/app/employee/Employee.ts b/src/app/employee/Employee.ts
index ca15e4f..10e19d1 100644
--- a/src/app/employee/Employee.ts
+++ b/src/app/employee/Employee.ts
@@ -1,4 +1,4 @@
-import {Qualification} from "../Qualification";
+import {Qualification} from "../qualification/Qualification";
 
 export class Employee {
   constructor(
diff --git a/src/app/qualification/delete/delete.component.ts b/src/app/qualification/delete/delete.component.ts
index 9ffd4e5..0cb1710 100644
--- a/src/app/qualification/delete/delete.component.ts
+++ b/src/app/qualification/delete/delete.component.ts
@@ -18,7 +18,6 @@ import {MatButton} from "@angular/material/button";
     MatDialogContent,
     MatDialogTitle,
     ReactiveFormsModule,
-    MatError,
     MatDialogActions,
     MatButton
   ],
diff --git a/src/app/qualification/details/details.component.css b/src/app/qualification/details/details.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/qualification/details/details.component.html b/src/app/qualification/details/details.component.html
new file mode 100644
index 0000000..c9c364f
--- /dev/null
+++ b/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>
diff --git a/src/app/qualification/details/details.component.ts b/src/app/qualification/details/details.component.ts
new file mode 100644
index 0000000..4656aee
--- /dev/null
+++ b/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();
+  }
+}
diff --git a/src/app/qualification/table/table.component.html b/src/app/qualification/table/table.component.html
index 5852d59..09543a6 100644
--- a/src/app/qualification/table/table.component.html
+++ b/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>
 
diff --git a/src/app/qualification/table/table.component.ts b/src/app/qualification/table/table.component.ts
index 86847dd..51052d9 100644
--- a/src/app/qualification/table/table.component.ts
+++ b/src/app/qualification/table/table.component.ts
@@ -9,90 +9,97 @@ import {DeleteComponent} from "../delete/delete.component";
 import {AsyncPipe} from "@angular/common";
 import {MatButton, MatIconButton} from "@angular/material/button";
 import {
-  MatCell,
-  MatCellDef,
-  MatColumnDef,
-  MatHeaderCell,
-  MatHeaderCellDef,
-  MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef,
-  MatTable
+    MatCell,
+    MatCellDef,
+    MatColumnDef,
+    MatHeaderCell,
+    MatHeaderCellDef,
+    MatHeaderRow, 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',
-  imports: [
-    AsyncPipe,
-    MatButton,
-    MatTable,
-    MatColumnDef,
-    MatHeaderCell,
-    MatCell,
-    MatHeaderCellDef,
-    MatCellDef,
-    MatIconButton,
-    MatIcon,
-    MatHeaderRow,
-    MatRow,
-    MatHeaderRowDef,
-    MatRowDef,
-    MatCard,
-    MatCardContent,
-    MatTooltip,
-    MatProgressSpinner
-  ],
-  templateUrl: './table.component.html',
-  styleUrl: './table.component.css'
+    selector: 'app-qualifications',
+    imports: [
+        AsyncPipe,
+        MatButton,
+        MatTable,
+        MatColumnDef,
+        MatHeaderCell,
+        MatCell,
+        MatHeaderCellDef,
+        MatCellDef,
+        MatIconButton,
+        MatIcon,
+        MatHeaderRow,
+        MatRow,
+        MatHeaderRowDef,
+        MatRowDef,
+        MatCard,
+        MatCardContent,
+        MatTooltip,
+        MatProgressSpinner
+    ],
+    templateUrl: './table.component.html',
+    styleUrl: './table.component.css'
 })
 export class QualificationsComponent implements OnInit {
-  public qualifications$!: Observable<Qualification[]>;
-  public readonly displayedColumns: string[] = ['id', 'skill', 'actions'];
+    public qualifications$!: Observable<Qualification[]>;
+    public readonly displayedColumns: string[] = ['id', 'skill', 'actions'];
 
-  private readonly dialog: MatDialog = inject(MatDialog);
-  private readonly qualificationService: QualificationService = inject(QualificationService);
+    private readonly dialog: MatDialog = inject(MatDialog);
+    private readonly qualificationService: QualificationService = inject(QualificationService);
 
-  ngOnInit() {
-    this.loadQualifications();
-  }
-
-  private loadQualifications() {
-    this.qualifications$ = this.qualificationService.getAll();
-  }
-
-  openCreateModal() {
-    const dialogRef = this.dialog.open(CreateComponent);
-
-    dialogRef.afterClosed().subscribe((success: boolean) => {
-      if (success) {
+    ngOnInit() {
         this.loadQualifications();
-      }
-    });
-  }
+    }
 
-  openEditModal(qualification: Qualification) {
-    const dialogRef = this.dialog.open(EditComponent, {
-      data: qualification
-    });
+    private loadQualifications() {
+        this.qualifications$ = this.qualificationService.getAll();
+    }
 
-    dialogRef.afterClosed().subscribe((success: boolean) => {
-      if (success) {
-        this.loadQualifications();
-      }
-    });
-  }
+    openCreateModal() {
+        const dialogRef = this.dialog.open(CreateComponent);
 
-  openDeleteModal(id: number) {
-    const dialogRef = this.dialog.open(DeleteComponent, {
-      data: id
-    });
+        dialogRef.afterClosed().subscribe((success: boolean) => {
+            if (success) {
+                this.loadQualifications();
+            }
+        });
+    }
 
-    dialogRef.afterClosed().subscribe((success: boolean) => {
-      if (success) {
-        this.loadQualifications();
-      }
-    });
-  }
+    openEditModal(qualification: Qualification) {
+        const dialogRef = this.dialog.open(EditComponent, {
+            data: qualification
+        });
+
+        dialogRef.afterClosed().subscribe((success: boolean) => {
+            if (success) {
+                this.loadQualifications();
+            }
+        });
+    }
+
+    openDeleteModal(id: number) {
+        const dialogRef = this.dialog.open(DeleteComponent, {
+            data: id
+        });
+
+        dialogRef.afterClosed().subscribe((success: boolean) => {
+            if (success) {
+                this.loadQualifications();
+            }
+        });
+    }
+
+    openDetailsModal(qualification: Qualification) {
+        const dialogRef = this.dialog.open(DetailsComponent, {
+            data: qualification
+        });
+    }
 }
diff --git a/src/app/qualifications/qualifications.component.html b/src/app/qualifications/qualifications.component.html
deleted file mode 100644
index 517cbcd..0000000
--- a/src/app/qualifications/qualifications.component.html
+++ /dev/null
@@ -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>
-  }
-}
diff --git a/src/app/services/qualification.service.ts b/src/app/services/qualification.service.ts
index 37425fd..b6ce426 100644
--- a/src/app/services/qualification.service.ts
+++ b/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({
@@ -14,7 +15,7 @@ export default class QualificationService {
 
   public getAll(): Observable<Qualification[]> {
     return this.http.get<Qualification[]>(`${QualificationService.BASE_URL}/qualifications`).pipe(
-        map(qualifications => qualifications.sort((a, b) => a.id - b.id))
+      map(qualifications => qualifications.sort((a, b) => a.id - b.id))
     )
   }
 
@@ -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)
+      );
+  }
 }