From 8f68203ae2fb09845e88e181cc38b9172616e5c4 Mon Sep 17 00:00:00 2001
From: Phan Huy Tran <p.tran@neusta.de>
Date: Wed, 8 Jan 2025 09:38:30 +0100
Subject: [PATCH 1/4] Create modal

---
 .../create-qualification.component.css        |  0
 .../create-qualification.component.html       |  1 +
 .../create-qualification.component.spec.ts    | 23 ++++++++
 .../create-qualification.component.ts         | 11 ++++
 .../qualifications.component.html             |  3 +
 .../qualifications.component.ts               | 58 +++++++++----------
 6 files changed, 64 insertions(+), 32 deletions(-)
 create mode 100644 src/app/create-qualification/create-qualification.component.css
 create mode 100644 src/app/create-qualification/create-qualification.component.html
 create mode 100644 src/app/create-qualification/create-qualification.component.spec.ts
 create mode 100644 src/app/create-qualification/create-qualification.component.ts

diff --git a/src/app/create-qualification/create-qualification.component.css b/src/app/create-qualification/create-qualification.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/create-qualification/create-qualification.component.html b/src/app/create-qualification/create-qualification.component.html
new file mode 100644
index 0000000..91fa634
--- /dev/null
+++ b/src/app/create-qualification/create-qualification.component.html
@@ -0,0 +1 @@
+<p>create-qualification works!</p>
diff --git a/src/app/create-qualification/create-qualification.component.spec.ts b/src/app/create-qualification/create-qualification.component.spec.ts
new file mode 100644
index 0000000..8d2d0fd
--- /dev/null
+++ b/src/app/create-qualification/create-qualification.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateQualificationComponent } from './create-qualification.component';
+
+describe('CreateQualificationComponent', () => {
+  let component: CreateQualificationComponent;
+  let fixture: ComponentFixture<CreateQualificationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CreateQualificationComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CreateQualificationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/create-qualification/create-qualification.component.ts b/src/app/create-qualification/create-qualification.component.ts
new file mode 100644
index 0000000..6a3a2f8
--- /dev/null
+++ b/src/app/create-qualification/create-qualification.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-create-qualification',
+  imports: [],
+  templateUrl: './create-qualification.component.html',
+  styleUrl: './create-qualification.component.css'
+})
+export class CreateQualificationComponent {
+
+}
diff --git a/src/app/qualifications/qualifications.component.html b/src/app/qualifications/qualifications.component.html
index 8253ea8..f0f7005 100644
--- a/src/app/qualifications/qualifications.component.html
+++ b/src/app/qualifications/qualifications.component.html
@@ -1,3 +1,6 @@
+<h1 >Qualifications</h1>
+<button (click)="openCreateModal()">Create qualification</button>
+
 @if (qualifications$ | async; as qualifications) {
     @if (qualifications) {
         <table
diff --git a/src/app/qualifications/qualifications.component.ts b/src/app/qualifications/qualifications.component.ts
index fb28b24..1fc11fa 100644
--- a/src/app/qualifications/qualifications.component.ts
+++ b/src/app/qualifications/qualifications.component.ts
@@ -1,43 +1,37 @@
-import {Component} from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {Observable} from "rxjs";
 import {Qualification} from "../Qualification";
-import {HttpClient} from "@angular/common/http";
 import {AsyncPipe} from "@angular/common";
-import {
-    MatCell,
-    MatCellDef,
-    MatColumnDef,
-    MatHeaderCell,
-    MatHeaderCellDef,
-    MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef,
-    MatTable
-} from "@angular/material/table";
+import {MatCell, MatColumnDef, MatHeaderCell, MatHeaderRow, MatRow, MatTable} from "@angular/material/table";
 import QualificationService from "../services/qualification.service";
+import {MatDialog} from "@angular/material/dialog";
+import {CreateQualificationComponent} from "../create-qualification/create-qualification.component";
 
 @Component({
-    selector: 'app-qualifications',
-    imports: [
-        AsyncPipe,
-        MatTable,
-        MatHeaderCell,
-        MatColumnDef,
-        MatCell,
-        MatCellDef,
-        MatHeaderCellDef,
-        MatHeaderRow,
-        MatRow,
-        MatHeaderRowDef,
-        MatRowDef
-    ],
-    templateUrl: './qualifications.component.html',
-    styleUrl: './qualifications.component.css'
+  selector: 'app-qualifications',
+  imports: [
+    AsyncPipe,
+    MatTable,
+    MatHeaderCell,
+    MatColumnDef,
+    MatCell,
+    MatHeaderRow,
+    MatRow
+  ],
+  templateUrl: './qualifications.component.html',
+  styleUrl: './qualifications.component.css'
 })
 export class QualificationsComponent {
-    public qualifications$: Observable<Qualification[]>;
-    public readonly displayedColumns: string[] = ['skill', 'actions'];
+  public qualifications$: Observable<Qualification[]>;
+  public readonly displayedColumns: string[] = ['skill', 'actions'];
 
+  private readonly dialog: MatDialog = inject(MatDialog);
 
-    constructor(private readonly qualificationService: QualificationService) {
-        this.qualifications$ = this.qualificationService.getAll();
-    }
+  constructor(private readonly qualificationService: QualificationService) {
+    this.qualifications$ = this.qualificationService.getAll();
+  }
+
+  openCreateModal() {
+    const createQualificationModal = this.dialog.open(CreateQualificationComponent);
+  }
 }
-- 
2.47.2


From eb567fa800f142d78f11d3ccdcc153c14c93f547 Mon Sep 17 00:00:00 2001
From: Phan Huy Tran <p.tran@neusta.de>
Date: Wed, 8 Jan 2025 10:04:44 +0100
Subject: [PATCH 2/4] Submit skill

---
 .../create-qualification.component.html       |  6 +++-
 .../create-qualification.component.ts         | 34 +++++++++++++++++--
 .../qualifications.component.ts               | 30 +++++++++++++---
 src/app/services/qualification.service.ts     |  4 +++
 4 files changed, 67 insertions(+), 7 deletions(-)

diff --git a/src/app/create-qualification/create-qualification.component.html b/src/app/create-qualification/create-qualification.component.html
index 91fa634..d6481a7 100644
--- a/src/app/create-qualification/create-qualification.component.html
+++ b/src/app/create-qualification/create-qualification.component.html
@@ -1 +1,5 @@
-<p>create-qualification works!</p>
+<form [formGroup]="qualificationForm" (ngSubmit)="create()">
+  <label for="skill-input">Skill</label>
+  <input id="skill-input" type="text" formControlName="skill">
+  <button type="submit">create</button>
+</form>
diff --git a/src/app/create-qualification/create-qualification.component.ts b/src/app/create-qualification/create-qualification.component.ts
index 6a3a2f8..1eb50f9 100644
--- a/src/app/create-qualification/create-qualification.component.ts
+++ b/src/app/create-qualification/create-qualification.component.ts
@@ -1,11 +1,41 @@
-import { Component } from '@angular/core';
+import {Component, inject} from '@angular/core';
+import {FormBuilder, ReactiveFormsModule} from "@angular/forms";
+import EmployeeApiService from "../services/employee-api.service";
+import QualificationService from "../services/qualification.service";
+import {Router} from "@angular/router";
+import {MatDialogRef} from "@angular/material/dialog";
 
 @Component({
   selector: 'app-create-qualification',
-  imports: [],
+  imports: [
+    ReactiveFormsModule
+  ],
   templateUrl: './create-qualification.component.html',
   styleUrl: './create-qualification.component.css'
 })
 export class CreateQualificationComponent {
+  private formBuilder: FormBuilder = inject(FormBuilder);
+  private qualificationService: QualificationService = inject(QualificationService);
+  private dialogRef: MatDialogRef<CreateQualificationComponent> = inject(MatDialogRef);
 
+  qualificationForm = this.formBuilder.group({
+    'skill': [''],
+  });
+
+  create() {
+    if (this.qualificationForm.valid) {
+      this.qualificationService.create(this.qualificationForm.value).subscribe({
+        next: (createdQualification) => {
+          this.dialogRef.close(createdQualification);
+        },
+        error: (error) => {
+          console.error('Error creating qualification:', error);
+        }
+      });
+    }
+  }
+
+  cancel() {
+    this.dialogRef.close();
+  }
 }
diff --git a/src/app/qualifications/qualifications.component.ts b/src/app/qualifications/qualifications.component.ts
index 1fc11fa..12c2108 100644
--- a/src/app/qualifications/qualifications.component.ts
+++ b/src/app/qualifications/qualifications.component.ts
@@ -2,7 +2,15 @@ import {Component, inject} from '@angular/core';
 import {Observable} from "rxjs";
 import {Qualification} from "../Qualification";
 import {AsyncPipe} from "@angular/common";
-import {MatCell, MatColumnDef, MatHeaderCell, MatHeaderRow, MatRow, MatTable} from "@angular/material/table";
+import {
+  MatCell, MatCellDef,
+  MatColumnDef,
+  MatHeaderCell,
+  MatHeaderCellDef,
+  MatHeaderRow, MatHeaderRowDef,
+  MatRow, MatRowDef,
+  MatTable
+} from "@angular/material/table";
 import QualificationService from "../services/qualification.service";
 import {MatDialog} from "@angular/material/dialog";
 import {CreateQualificationComponent} from "../create-qualification/create-qualification.component";
@@ -16,22 +24,36 @@ import {CreateQualificationComponent} from "../create-qualification/create-quali
     MatColumnDef,
     MatCell,
     MatHeaderRow,
-    MatRow
+    MatRow,
+    MatHeaderCellDef,
+    MatCellDef,
+    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'];
 
   private readonly dialog: MatDialog = inject(MatDialog);
 
   constructor(private readonly qualificationService: QualificationService) {
+    this.loadQualifications();
+  }
+
+  private loadQualifications() {
     this.qualifications$ = this.qualificationService.getAll();
   }
 
   openCreateModal() {
-    const createQualificationModal = this.dialog.open(CreateQualificationComponent);
+    const dialogRef = this.dialog.open(CreateQualificationComponent);
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        this.loadQualifications();
+      }
+    });
   }
 }
diff --git a/src/app/services/qualification.service.ts b/src/app/services/qualification.service.ts
index c28f421..752c7ec 100644
--- a/src/app/services/qualification.service.ts
+++ b/src/app/services/qualification.service.ts
@@ -16,4 +16,8 @@ export default class QualificationService {
   public getAll(): Observable<Qualification[]> {
     return this.http.get<Qualification[]>(`${QualificationService.BASE_URL}/qualifications`)
   }
+
+  public create(data: any) {
+    return this.http.post(`${QualificationService.BASE_URL}/qualifications`, data)
+  }
 }
-- 
2.47.2


From 6e56e863fd9bd7d591d527ef5ddbb59a6b1de0cd Mon Sep 17 00:00:00 2001
From: Phan Huy Tran <p.tran@neusta.de>
Date: Wed, 8 Jan 2025 10:05:49 +0100
Subject: [PATCH 3/4] Delete test

---
 .../create-qualification.component.spec.ts    | 23 -------------------
 1 file changed, 23 deletions(-)
 delete mode 100644 src/app/create-qualification/create-qualification.component.spec.ts

diff --git a/src/app/create-qualification/create-qualification.component.spec.ts b/src/app/create-qualification/create-qualification.component.spec.ts
deleted file mode 100644
index 8d2d0fd..0000000
--- a/src/app/create-qualification/create-qualification.component.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { CreateQualificationComponent } from './create-qualification.component';
-
-describe('CreateQualificationComponent', () => {
-  let component: CreateQualificationComponent;
-  let fixture: ComponentFixture<CreateQualificationComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [CreateQualificationComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(CreateQualificationComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
-- 
2.47.2


From 9a57001280a1f611bda4a48f497e23b557bb3556 Mon Sep 17 00:00:00 2001
From: Phan Huy Tran <p.tran@neusta.de>
Date: Wed, 8 Jan 2025 10:09:51 +0100
Subject: [PATCH 4/4] use ngoninit

---
 src/app/qualifications/qualifications.component.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/app/qualifications/qualifications.component.ts b/src/app/qualifications/qualifications.component.ts
index 12c2108..1e9650c 100644
--- a/src/app/qualifications/qualifications.component.ts
+++ b/src/app/qualifications/qualifications.component.ts
@@ -1,4 +1,4 @@
-import {Component, inject} from '@angular/core';
+import {Component, inject, OnInit} from '@angular/core';
 import {Observable} from "rxjs";
 import {Qualification} from "../Qualification";
 import {AsyncPipe} from "@angular/common";
@@ -33,13 +33,14 @@ import {CreateQualificationComponent} from "../create-qualification/create-quali
   templateUrl: './qualifications.component.html',
   styleUrl: './qualifications.component.css'
 })
-export class QualificationsComponent {
+export class QualificationsComponent implements OnInit{
   public qualifications$!: Observable<Qualification[]>;
   public readonly displayedColumns: string[] = ['skill', 'actions'];
 
   private readonly dialog: MatDialog = inject(MatDialog);
+  private readonly qualificationService: QualificationService = inject(QualificationService);
 
-  constructor(private readonly qualificationService: QualificationService) {
+  ngOnInit() {
     this.loadQualifications();
   }
 
-- 
2.47.2