From 275d4b8737cb0a0b2d52e927b81c2396d08d30c8 Mon Sep 17 00:00:00 2001
From: Phan Huy Tran <p.tran@neusta.de>
Date: Wed, 8 Jan 2025 10:26:39 +0100
Subject: [PATCH 1/9] Validation

---
 .../create-qualification.component.ts         | 55 +++++++++----------
 1 file changed, 26 insertions(+), 29 deletions(-)

diff --git a/src/app/create-qualification/create-qualification.component.ts b/src/app/create-qualification/create-qualification.component.ts
index 1eb50f9..df7e6db 100644
--- a/src/app/create-qualification/create-qualification.component.ts
+++ b/src/app/create-qualification/create-qualification.component.ts
@@ -1,41 +1,38 @@
 import {Component, inject} from '@angular/core';
-import {FormBuilder, ReactiveFormsModule} from "@angular/forms";
-import EmployeeApiService from "../services/employee-api.service";
+import {FormBuilder, ReactiveFormsModule, Validators} from "@angular/forms";
 import QualificationService from "../services/qualification.service";
-import {Router} from "@angular/router";
 import {MatDialogRef} from "@angular/material/dialog";
 
 @Component({
-  selector: 'app-create-qualification',
-  imports: [
-    ReactiveFormsModule
-  ],
-  templateUrl: './create-qualification.component.html',
-  styleUrl: './create-qualification.component.css'
+    selector: 'app-create-qualification',
+    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);
+    private formBuilder: FormBuilder = inject(FormBuilder);
+    private qualificationService: QualificationService = inject(QualificationService);
+    private dialogRef: MatDialogRef<CreateQualificationComponent> = inject(MatDialogRef);
 
-  qualificationForm = this.formBuilder.group({
-    'skill': [''],
-  });
+    qualificationForm = this.formBuilder.group({
+        'skill': ['', Validators.required],
+    });
 
-  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);
+    create() {
+        if (!this.qualificationForm.valid) {
+            console.error('Validation failed');
+            return;
         }
-      });
-    }
-  }
 
-  cancel() {
-    this.dialogRef.close();
-  }
+        this.qualificationService.create(this.qualificationForm.value).subscribe({
+            next: (createdQualification) => {
+                this.dialogRef.close(createdQualification);
+            },
+            error: (error) => {
+                console.error('Error creating qualification:', error);
+            }
+        });
+    }
 }
-- 
2.47.2


From 3d1750ecec53f6d91a2f08089ea490847363b91b Mon Sep 17 00:00:00 2001
From: Phan Huy Tran <p.tran@neusta.de>
Date: Wed, 8 Jan 2025 10:36:32 +0100
Subject: [PATCH 2/9] Validation

---
 .../create-qualification.component.html       | 25 ++++++++++++++++---
 .../create-qualification.component.ts         | 18 ++++++++++++-
 2 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/src/app/create-qualification/create-qualification.component.html b/src/app/create-qualification/create-qualification.component.html
index d6481a7..15469e4 100644
--- a/src/app/create-qualification/create-qualification.component.html
+++ b/src/app/create-qualification/create-qualification.component.html
@@ -1,5 +1,22 @@
-<form [formGroup]="qualificationForm" (ngSubmit)="create()">
-  <label for="skill-input">Skill</label>
-  <input id="skill-input" type="text" formControlName="skill">
-  <button type="submit">create</button>
+<!-- create-qualification.component.html -->
+<form [formGroup]="qualificationForm" (ngSubmit)="create()" class="space-y-4">
+    <div>
+        <label for="skill-input" class="block mb-1">Skill</label>
+        <input
+                id="skill-input"
+                type="text"
+                formControlName="skill"
+                class="w-full p-2 border rounded"
+                [ngClass]="{'border-red-500 focus:ring-0 focus:outline-none': isFieldInvalid('skill')}">
+
+        <div
+                *ngIf="isFieldInvalid('skill')"
+                class="text-sm text-red-500 mt-1">
+            {{ getErrorMessage('skill') }}
+        </div>
+    </div>
+
+    <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 df7e6db..af4aa6c 100644
--- a/src/app/create-qualification/create-qualification.component.ts
+++ b/src/app/create-qualification/create-qualification.component.ts
@@ -2,11 +2,14 @@ import {Component, inject} from '@angular/core';
 import {FormBuilder, ReactiveFormsModule, Validators} from "@angular/forms";
 import QualificationService from "../services/qualification.service";
 import {MatDialogRef} from "@angular/material/dialog";
+import {NgClass, NgIf} from "@angular/common";
 
 @Component({
     selector: 'app-create-qualification',
     imports: [
-        ReactiveFormsModule
+        ReactiveFormsModule,
+        NgClass,
+        NgIf
     ],
     templateUrl: './create-qualification.component.html',
     styleUrl: './create-qualification.component.css'
@@ -20,6 +23,19 @@ export class CreateQualificationComponent {
         'skill': ['', Validators.required],
     });
 
+    isFieldInvalid(fieldName: string): boolean {
+        const field = this.qualificationForm.get(fieldName);
+        return !!field?.invalid && (field.dirty || field.touched);
+    }
+
+    getErrorMessage(fieldName: string): string {
+        const field = this.qualificationForm.get(fieldName);
+        if (field?.errors?.['required']) {
+            return 'This field is required';
+        }
+        return '';
+    }
+
     create() {
         if (!this.qualificationForm.valid) {
             console.error('Validation failed');
-- 
2.47.2


From daa7af73a403cf72a9f392bd4d3ba8593276198e Mon Sep 17 00:00:00 2001
From: Phan Huy Tran <p.tran@neusta.de>
Date: Wed, 8 Jan 2025 10:56:27 +0100
Subject: [PATCH 3/9] Style

---
 .../create-qualification.component.html       | 38 +++++++++----------
 .../create-qualification.component.ts         | 16 ++++++--
 2 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/src/app/create-qualification/create-qualification.component.html b/src/app/create-qualification/create-qualification.component.html
index 15469e4..40fc188 100644
--- a/src/app/create-qualification/create-qualification.component.html
+++ b/src/app/create-qualification/create-qualification.component.html
@@ -1,22 +1,20 @@
-<!-- create-qualification.component.html -->
-<form [formGroup]="qualificationForm" (ngSubmit)="create()" class="space-y-4">
-    <div>
-        <label for="skill-input" class="block mb-1">Skill</label>
-        <input
-                id="skill-input"
-                type="text"
-                formControlName="skill"
-                class="w-full p-2 border rounded"
-                [ngClass]="{'border-red-500 focus:ring-0 focus:outline-none': isFieldInvalid('skill')}">
+<h2 mat-dialog-title>Create Qualification</h2>
+<mat-dialog-content>
+    <form [formGroup]="qualificationForm" (ngSubmit)="create()">
+        <div class="!space-y-4">
+            <mat-form-field class="!w-full">
+                <mat-label>Skill</mat-label>
+                <input matInput
+                       formControlName="skill"
+                       required>
+                <mat-error *ngIf="isFieldInvalid('skill')">
+                    {{ getErrorMessage('skill') }}
+                </mat-error>
+            </mat-form-field>
 
-        <div
-                *ngIf="isFieldInvalid('skill')"
-                class="text-sm text-red-500 mt-1">
-            {{ getErrorMessage('skill') }}
+            <mat-dialog-actions align="end">
+                <button mat-flat-button color="primary" type="submit">Create</button>
+            </mat-dialog-actions>
         </div>
-    </div>
-
-    <button type="submit">
-        Create
-    </button>
-</form>
+    </form>
+</mat-dialog-content>
diff --git a/src/app/create-qualification/create-qualification.component.ts b/src/app/create-qualification/create-qualification.component.ts
index af4aa6c..ec12768 100644
--- a/src/app/create-qualification/create-qualification.component.ts
+++ b/src/app/create-qualification/create-qualification.component.ts
@@ -1,15 +1,25 @@
 import {Component, inject} from '@angular/core';
 import {FormBuilder, ReactiveFormsModule, Validators} from "@angular/forms";
 import QualificationService from "../services/qualification.service";
-import {MatDialogRef} from "@angular/material/dialog";
+import {MatDialogActions, MatDialogContent, MatDialogRef, MatDialogTitle} from "@angular/material/dialog";
 import {NgClass, NgIf} from "@angular/common";
+import {MatError, MatFormField, MatLabel} from "@angular/material/form-field";
+import {MatButton} from "@angular/material/button";
+import {MatInput} from "@angular/material/input";
 
 @Component({
     selector: 'app-create-qualification',
     imports: [
         ReactiveFormsModule,
-        NgClass,
-        NgIf
+        MatError,
+        NgIf,
+        MatLabel,
+        MatDialogTitle,
+        MatDialogContent,
+        MatFormField,
+        MatDialogActions,
+        MatButton,
+        MatInput
     ],
     templateUrl: './create-qualification.component.html',
     styleUrl: './create-qualification.component.css'
-- 
2.47.2


From e24faf7eaaa53d9d3d2bb575f3de58810b388bac Mon Sep 17 00:00:00 2001
From: Phan Huy Tran <p.tran@neusta.de>
Date: Wed, 8 Jan 2025 11:08:03 +0100
Subject: [PATCH 4/9] Display api errors

---
 .../create-qualification/create-qualification.component.html  | 4 ++++
 .../create-qualification/create-qualification.component.ts    | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/src/app/create-qualification/create-qualification.component.html b/src/app/create-qualification/create-qualification.component.html
index 40fc188..27f30c4 100644
--- a/src/app/create-qualification/create-qualification.component.html
+++ b/src/app/create-qualification/create-qualification.component.html
@@ -2,6 +2,10 @@
 <mat-dialog-content>
     <form [formGroup]="qualificationForm" (ngSubmit)="create()">
         <div class="!space-y-4">
+            @if (apiErrorMessage) {
+                <mat-error>{{ apiErrorMessage }}</mat-error>
+            }
+
             <mat-form-field class="!w-full">
                 <mat-label>Skill</mat-label>
                 <input matInput
diff --git a/src/app/create-qualification/create-qualification.component.ts b/src/app/create-qualification/create-qualification.component.ts
index ec12768..0c05181 100644
--- a/src/app/create-qualification/create-qualification.component.ts
+++ b/src/app/create-qualification/create-qualification.component.ts
@@ -29,6 +29,8 @@ export class CreateQualificationComponent {
     private qualificationService: QualificationService = inject(QualificationService);
     private dialogRef: MatDialogRef<CreateQualificationComponent> = inject(MatDialogRef);
 
+    public apiErrorMessage: string = '';
+
     qualificationForm = this.formBuilder.group({
         'skill': ['', Validators.required],
     });
@@ -58,6 +60,8 @@ export class CreateQualificationComponent {
             },
             error: (error) => {
                 console.error('Error creating qualification:', error);
+
+                this.apiErrorMessage = 'API Error';
             }
         });
     }
-- 
2.47.2


From bcfe0cb43c530545d78ff6aeef884d84b5baded1 Mon Sep 17 00:00:00 2001
From: Phan Huy Tran <p.tran@neusta.de>
Date: Wed, 8 Jan 2025 11:09:56 +0100
Subject: [PATCH 5/9] lol

---
 src/app/create-qualification/create-qualification.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/create-qualification/create-qualification.component.ts b/src/app/create-qualification/create-qualification.component.ts
index 0c05181..458f445 100644
--- a/src/app/create-qualification/create-qualification.component.ts
+++ b/src/app/create-qualification/create-qualification.component.ts
@@ -37,7 +37,7 @@ export class CreateQualificationComponent {
 
     isFieldInvalid(fieldName: string): boolean {
         const field = this.qualificationForm.get(fieldName);
-        return !!field?.invalid && (field.dirty || field.touched);
+        return field?.invalid && (field.dirty || field.touched);
     }
 
     getErrorMessage(fieldName: string): string {
-- 
2.47.2


From 7a44ba28d3db529afa49e110480bc84c9be81b18 Mon Sep 17 00:00:00 2001
From: Phan Huy Tran <p.tran@neusta.de>
Date: Wed, 8 Jan 2025 11:11:51 +0100
Subject: [PATCH 6/9] idk

---
 .../create-qualification/create-qualification.component.ts    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/create-qualification/create-qualification.component.ts b/src/app/create-qualification/create-qualification.component.ts
index 458f445..5190c06 100644
--- a/src/app/create-qualification/create-qualification.component.ts
+++ b/src/app/create-qualification/create-qualification.component.ts
@@ -2,7 +2,7 @@ import {Component, inject} from '@angular/core';
 import {FormBuilder, ReactiveFormsModule, Validators} from "@angular/forms";
 import QualificationService from "../services/qualification.service";
 import {MatDialogActions, MatDialogContent, MatDialogRef, MatDialogTitle} from "@angular/material/dialog";
-import {NgClass, NgIf} from "@angular/common";
+import {NgIf} from "@angular/common";
 import {MatError, MatFormField, MatLabel} from "@angular/material/form-field";
 import {MatButton} from "@angular/material/button";
 import {MatInput} from "@angular/material/input";
@@ -37,7 +37,7 @@ export class CreateQualificationComponent {
 
     isFieldInvalid(fieldName: string): boolean {
         const field = this.qualificationForm.get(fieldName);
-        return field?.invalid && (field.dirty || field.touched);
+        return (field?.invalid && (field.dirty || field.touched)) as boolean;
     }
 
     getErrorMessage(fieldName: string): string {
-- 
2.47.2


From 1297ed1b73cc2ce39ab40dc53b40e872e85db164 Mon Sep 17 00:00:00 2001
From: Phan Huy Tran <p.tran@neusta.de>
Date: Wed, 8 Jan 2025 11:13:02 +0100
Subject: [PATCH 7/9] Refactor

---
 .../create-qualification/create-qualification.component.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/app/create-qualification/create-qualification.component.ts b/src/app/create-qualification/create-qualification.component.ts
index 5190c06..17d12b1 100644
--- a/src/app/create-qualification/create-qualification.component.ts
+++ b/src/app/create-qualification/create-qualification.component.ts
@@ -37,7 +37,12 @@ export class CreateQualificationComponent {
 
     isFieldInvalid(fieldName: string): boolean {
         const field = this.qualificationForm.get(fieldName);
-        return (field?.invalid && (field.dirty || field.touched)) as boolean;
+
+        if (!field) {
+            return false;
+        }
+
+        return field.invalid && (field.dirty || field.touched);
     }
 
     getErrorMessage(fieldName: string): string {
-- 
2.47.2


From 326972938dc7d066229b5096ca935c3a8ed68b83 Mon Sep 17 00:00:00 2001
From: Phan Huy Tran <p.tran@neusta.de>
Date: Wed, 8 Jan 2025 11:13:20 +0100
Subject: [PATCH 8/9] Style fix

---
 src/app/create-qualification/create-qualification.component.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/app/create-qualification/create-qualification.component.ts b/src/app/create-qualification/create-qualification.component.ts
index 17d12b1..b9bb381 100644
--- a/src/app/create-qualification/create-qualification.component.ts
+++ b/src/app/create-qualification/create-qualification.component.ts
@@ -47,9 +47,11 @@ export class CreateQualificationComponent {
 
     getErrorMessage(fieldName: string): string {
         const field = this.qualificationForm.get(fieldName);
+
         if (field?.errors?.['required']) {
             return 'This field is required';
         }
+
         return '';
     }
 
-- 
2.47.2


From 12bebfe033bcec36e906ac8030ba8c2a78b3deba Mon Sep 17 00:00:00 2001
From: Phan Huy Tran <p.tran@neusta.de>
Date: Wed, 8 Jan 2025 11:19:14 +0100
Subject: [PATCH 9/9] refactor

---
 src/app/create-qualification/create-qualification.component.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/create-qualification/create-qualification.component.ts b/src/app/create-qualification/create-qualification.component.ts
index b9bb381..bb32de0 100644
--- a/src/app/create-qualification/create-qualification.component.ts
+++ b/src/app/create-qualification/create-qualification.component.ts
@@ -6,6 +6,7 @@ import {NgIf} from "@angular/common";
 import {MatError, MatFormField, MatLabel} from "@angular/material/form-field";
 import {MatButton} from "@angular/material/button";
 import {MatInput} from "@angular/material/input";
+import {filter} from "rxjs";
 
 @Component({
     selector: 'app-create-qualification',
@@ -39,7 +40,7 @@ export class CreateQualificationComponent {
         const field = this.qualificationForm.get(fieldName);
 
         if (!field) {
-            return false;
+            throw new Error('Form field does not exist: ' + fieldName)
         }
 
         return field.invalid && (field.dirty || field.touched);
-- 
2.47.2