Implement qualification details (#26)

Co-authored-by: Phan Huy Tran <p.tran@neusta.de>
Reviewed-on: #26
Reviewed-by: Constantin Simonis <constantin@simonis.lol>

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 qualification details'"
+                                            (click)="openDetailsModal(qualification)"
+                                    >
+                                        {{ qualification.skill }}
+                                    </a>
                                 </td>
                             </ng-container>
 

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

@@ -1,102 +1,105 @@
 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,
-  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',
-  standalone: true,
-  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
+        });
+    }
 }

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