From 5a5f4ff90cb33424c2a33c80b5581189052aa964 Mon Sep 17 00:00:00 2001
From: Phan Huy Tran <p.tran@neusta.de>
Date: Wed, 18 Dec 2024 14:20:09 +0100
Subject: [PATCH 1/3] Convert qualifications to table

---
 .../qualifications.component.html             | 29 ++++++++---
 .../qualifications.component.ts               | 49 +++++++++++++------
 2 files changed, 56 insertions(+), 22 deletions(-)

diff --git a/src/app/qualifications/qualifications.component.html b/src/app/qualifications/qualifications.component.html
index 7a732ee..8253ea8 100644
--- a/src/app/qualifications/qualifications.component.html
+++ b/src/app/qualifications/qualifications.component.html
@@ -1,7 +1,22 @@
-<ul>
-  @for (qualification of qualifications$ | async; track qualification.skill) {
-    <li>
-      {{ qualification.skill }}
-    </li>
-  }
-</ul>
+@if (qualifications$ | async; as qualifications) {
+    @if (qualifications) {
+        <table
+                mat-table
+                [dataSource]="qualifications"
+                class="mat-elevation-z8"
+        >
+            <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"></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/qualifications/qualifications.component.ts b/src/app/qualifications/qualifications.component.ts
index 665593c..9522246 100644
--- a/src/app/qualifications/qualifications.component.ts
+++ b/src/app/qualifications/qualifications.component.ts
@@ -1,25 +1,44 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 import {Observable} from "rxjs";
-import {Employee} from "../Employee";
 import {Qualification} from "../Qualification";
 import {HttpClient} from "@angular/common/http";
-import {MatSnackBar} from "@angular/material/snack-bar";
 import {AsyncPipe} from "@angular/common";
+import {
+    MatCell,
+    MatCellDef,
+    MatColumnDef,
+    MatHeaderCell,
+    MatHeaderCellDef,
+    MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef,
+    MatTable
+} from "@angular/material/table";
 
 @Component({
-  selector: 'app-qualifications',
-  imports: [
-    AsyncPipe
-  ],
-  templateUrl: './qualifications.component.html',
-  styleUrl: './qualifications.component.css'
+    selector: 'app-qualifications',
+    imports: [
+        AsyncPipe,
+        MatTable,
+        MatHeaderCell,
+        MatColumnDef,
+        MatCell,
+        MatCellDef,
+        MatHeaderCellDef,
+        MatHeaderRow,
+        MatRow,
+        MatHeaderRowDef,
+        MatRowDef
+    ],
+    templateUrl: './qualifications.component.html',
+    styleUrl: './qualifications.component.css'
 })
 export class QualificationsComponent {
-  public qualifications$: Observable<Qualification[]>;
+    public qualifications$: Observable<Qualification[]>;
+    public readonly displayedColumns: string[] = ['skill', 'actions'];
 
-  constructor(
-    private readonly httpClient: HttpClient,
-  ) {
-    this.qualifications$ = this.httpClient.get<Qualification[]>('http://localhost:8089/qualifications');
-  }
+
+    constructor(
+        private readonly httpClient: HttpClient,
+    ) {
+        this.qualifications$ = this.httpClient.get<Qualification[]>('http://localhost:8089/qualifications');
+    }
 }
-- 
2.47.2


From 8d751d1eeac6b69890f60b292b5e7bc6361483a1 Mon Sep 17 00:00:00 2001
From: Phan Huy Tran <p.tran@neusta.de>
Date: Wed, 18 Dec 2024 14:34:20 +0100
Subject: [PATCH 2/3] Use service

---
 .../qualifications.component.ts               |  7 +++----
 src/app/services/qualification-api.service.ts | 19 +++++++++++++++++++
 2 files changed, 22 insertions(+), 4 deletions(-)
 create mode 100644 src/app/services/qualification-api.service.ts

diff --git a/src/app/qualifications/qualifications.component.ts b/src/app/qualifications/qualifications.component.ts
index 9522246..f2046e7 100644
--- a/src/app/qualifications/qualifications.component.ts
+++ b/src/app/qualifications/qualifications.component.ts
@@ -12,6 +12,7 @@ import {
     MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef,
     MatTable
 } from "@angular/material/table";
+import QualificationApiService from "../services/qualification-api.service";
 
 @Component({
     selector: 'app-qualifications',
@@ -36,9 +37,7 @@ export class QualificationsComponent {
     public readonly displayedColumns: string[] = ['skill', 'actions'];
 
 
-    constructor(
-        private readonly httpClient: HttpClient,
-    ) {
-        this.qualifications$ = this.httpClient.get<Qualification[]>('http://localhost:8089/qualifications');
+    constructor(private readonly qualificationApiService: QualificationApiService) {
+        this.qualifications$ = this.qualificationApiService.getAll();
     }
 }
diff --git a/src/app/services/qualification-api.service.ts b/src/app/services/qualification-api.service.ts
new file mode 100644
index 0000000..8fac349
--- /dev/null
+++ b/src/app/services/qualification-api.service.ts
@@ -0,0 +1,19 @@
+import {inject, Injectable} from "@angular/core";
+import {HttpClient} from "@angular/common/http";
+import {Observable} from "rxjs";
+import {Employee} from "../Employee";
+import {Qualification} from "../Qualification";
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export default class QualificationApiService {
+  private http: HttpClient = inject(HttpClient);
+
+  private static readonly BASE_URL = 'http://localhost:8089';
+
+  public getAll(): Observable<Qualification[]> {
+    return this.http.get<Qualification[]>(`${QualificationApiService.BASE_URL}/qualifications`)
+  }
+}
-- 
2.47.2


From 773ae05eafc16bb48751278cf06c1b1930d07154 Mon Sep 17 00:00:00 2001
From: Phan Huy Tran <p.tran@neusta.de>
Date: Wed, 18 Dec 2024 14:35:32 +0100
Subject: [PATCH 3/3] Refactor

---
 src/app/qualifications/qualifications.component.ts          | 6 +++---
 ...ualification-api.service.ts => qualification.service.ts} | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)
 rename src/app/services/{qualification-api.service.ts => qualification.service.ts} (74%)

diff --git a/src/app/qualifications/qualifications.component.ts b/src/app/qualifications/qualifications.component.ts
index f2046e7..fb28b24 100644
--- a/src/app/qualifications/qualifications.component.ts
+++ b/src/app/qualifications/qualifications.component.ts
@@ -12,7 +12,7 @@ import {
     MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef,
     MatTable
 } from "@angular/material/table";
-import QualificationApiService from "../services/qualification-api.service";
+import QualificationService from "../services/qualification.service";
 
 @Component({
     selector: 'app-qualifications',
@@ -37,7 +37,7 @@ export class QualificationsComponent {
     public readonly displayedColumns: string[] = ['skill', 'actions'];
 
 
-    constructor(private readonly qualificationApiService: QualificationApiService) {
-        this.qualifications$ = this.qualificationApiService.getAll();
+    constructor(private readonly qualificationService: QualificationService) {
+        this.qualifications$ = this.qualificationService.getAll();
     }
 }
diff --git a/src/app/services/qualification-api.service.ts b/src/app/services/qualification.service.ts
similarity index 74%
rename from src/app/services/qualification-api.service.ts
rename to src/app/services/qualification.service.ts
index 8fac349..c28f421 100644
--- a/src/app/services/qualification-api.service.ts
+++ b/src/app/services/qualification.service.ts
@@ -8,12 +8,12 @@ import {Qualification} from "../Qualification";
 @Injectable({
   providedIn: 'root'
 })
-export default class QualificationApiService {
+export default class QualificationService {
   private http: HttpClient = inject(HttpClient);
 
   private static readonly BASE_URL = 'http://localhost:8089';
 
   public getAll(): Observable<Qualification[]> {
-    return this.http.get<Qualification[]>(`${QualificationApiService.BASE_URL}/qualifications`)
+    return this.http.get<Qualification[]>(`${QualificationService.BASE_URL}/qualifications`)
   }
 }
-- 
2.47.2