From f0ecf3db11d95a6e0b9ecb29e46ec7a95d83551b Mon Sep 17 00:00:00 2001
From: Phan Huy Tran <p.tran@neusta.de>
Date: Wed, 18 Dec 2024 13:23:01 +0100
Subject: [PATCH] Display qualifications list in homepage

---
 src/app/Qualification.ts                      |  4 +++
 src/app/app.routes.ts                         |  4 +--
 src/app/home/home.component.css               |  0
 src/app/home/home.component.html              |  2 ++
 src/app/home/home.component.ts                | 16 ++++++++++++
 .../qualifications.component.css              |  0
 .../qualifications.component.html             |  7 ++++++
 .../qualifications.component.spec.ts          | 23 +++++++++++++++++
 .../qualifications.component.ts               | 25 +++++++++++++++++++
 9 files changed, 79 insertions(+), 2 deletions(-)
 create mode 100644 src/app/Qualification.ts
 create mode 100644 src/app/home/home.component.css
 create mode 100644 src/app/home/home.component.html
 create mode 100644 src/app/home/home.component.ts
 create mode 100644 src/app/qualifications/qualifications.component.css
 create mode 100644 src/app/qualifications/qualifications.component.html
 create mode 100644 src/app/qualifications/qualifications.component.spec.ts
 create mode 100644 src/app/qualifications/qualifications.component.ts

diff --git a/src/app/Qualification.ts b/src/app/Qualification.ts
new file mode 100644
index 0000000..d31bd5e
--- /dev/null
+++ b/src/app/Qualification.ts
@@ -0,0 +1,4 @@
+export class Qualification {
+  constructor(public skill?: string) {
+  }
+}
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 5317377..9c15317 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,10 +1,10 @@
 import {Routes} from '@angular/router';
-import {EmployeeListComponent} from "./employee-list/employee-list.component";
 import {LoginComponent} from "./login/login.component";
 import {AuthGuardService} from "./services/auth-guard.service";
+import {HomeComponent} from "./home/home.component";
 
 export const routes: Routes = [
   {path: 'login', component: LoginComponent},
-  {path: '', component: EmployeeListComponent, canActivate: [AuthGuardService]},
+  {path: '', component: HomeComponent, canActivate: [AuthGuardService]},
   {path: '**', redirectTo: ''}
 ];
diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
new file mode 100644
index 0000000..4d5f1a0
--- /dev/null
+++ b/src/app/home/home.component.html
@@ -0,0 +1,2 @@
+<app-employee-list></app-employee-list>
+<app-qualifications></app-qualifications>
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
new file mode 100644
index 0000000..d811f13
--- /dev/null
+++ b/src/app/home/home.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import {EmployeeListComponent} from "../employee-list/employee-list.component";
+import {QualificationsComponent} from "../qualifications/qualifications.component";
+
+@Component({
+  selector: 'app-home',
+  imports: [
+    EmployeeListComponent,
+    QualificationsComponent
+  ],
+  templateUrl: './home.component.html',
+  styleUrl: './home.component.css'
+})
+export class HomeComponent {
+
+}
diff --git a/src/app/qualifications/qualifications.component.css b/src/app/qualifications/qualifications.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/qualifications/qualifications.component.html b/src/app/qualifications/qualifications.component.html
new file mode 100644
index 0000000..7a732ee
--- /dev/null
+++ b/src/app/qualifications/qualifications.component.html
@@ -0,0 +1,7 @@
+<ul>
+  @for (qualification of qualifications$ | async; track qualification.skill) {
+    <li>
+      {{ qualification.skill }}
+    </li>
+  }
+</ul>
diff --git a/src/app/qualifications/qualifications.component.spec.ts b/src/app/qualifications/qualifications.component.spec.ts
new file mode 100644
index 0000000..1808d67
--- /dev/null
+++ b/src/app/qualifications/qualifications.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QualificationsComponent } from './qualifications.component';
+
+describe('QualificationsComponent', () => {
+  let component: QualificationsComponent;
+  let fixture: ComponentFixture<QualificationsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [QualificationsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(QualificationsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/qualifications/qualifications.component.ts b/src/app/qualifications/qualifications.component.ts
new file mode 100644
index 0000000..665593c
--- /dev/null
+++ b/src/app/qualifications/qualifications.component.ts
@@ -0,0 +1,25 @@
+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";
+
+@Component({
+  selector: 'app-qualifications',
+  imports: [
+    AsyncPipe
+  ],
+  templateUrl: './qualifications.component.html',
+  styleUrl: './qualifications.component.css'
+})
+export class QualificationsComponent {
+  public qualifications$: Observable<Qualification[]>;
+
+  constructor(
+    private readonly httpClient: HttpClient,
+  ) {
+    this.qualifications$ = this.httpClient.get<Qualification[]>('http://localhost:8089/qualifications');
+  }
+}