From 36d5a29b9e079642f0e470abcabf0ba07b01cea6 Mon Sep 17 00:00:00 2001
From: Get in my car i have candy <huydw@proton.me>
Date: Wed, 8 Jan 2025 10:31:38 +0000
Subject: [PATCH] Implement error handling for the create qualification form
 (#19)

Co-authored-by: Phan Huy Tran <p.tran@neusta.de>
Reviewed-on: https://git.simonis.lol/angular/ems-frontend/pulls/19
Reviewed-by: Constantin Simonis <constantin@simonis.lol>
---
 .../create-qualification.component.html       | 29 +++++-
 .../create-qualification.component.ts         | 95 +++++++++++++------
 2 files changed, 89 insertions(+), 35 deletions(-)

diff --git a/src/app/create-qualification/create-qualification.component.html b/src/app/create-qualification/create-qualification.component.html
index d6481a7..27f30c4 100644
--- a/src/app/create-qualification/create-qualification.component.html
+++ b/src/app/create-qualification/create-qualification.component.html
@@ -1,5 +1,24 @@
-<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>
+<h2 mat-dialog-title>Create Qualification</h2>
+<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
+                       formControlName="skill"
+                       required>
+                <mat-error *ngIf="isFieldInvalid('skill')">
+                    {{ getErrorMessage('skill') }}
+                </mat-error>
+            </mat-form-field>
+
+            <mat-dialog-actions align="end">
+                <button mat-flat-button color="primary" type="submit">Create</button>
+            </mat-dialog-actions>
+        </div>
+    </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 1eb50f9..bb32de0 100644
--- a/src/app/create-qualification/create-qualification.component.ts
+++ b/src/app/create-qualification/create-qualification.component.ts
@@ -1,41 +1,76 @@
 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";
+import {MatDialogActions, MatDialogContent, MatDialogRef, MatDialogTitle} from "@angular/material/dialog";
+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',
-  imports: [
-    ReactiveFormsModule
-  ],
-  templateUrl: './create-qualification.component.html',
-  styleUrl: './create-qualification.component.css'
+    selector: 'app-create-qualification',
+    imports: [
+        ReactiveFormsModule,
+        MatError,
+        NgIf,
+        MatLabel,
+        MatDialogTitle,
+        MatDialogContent,
+        MatFormField,
+        MatDialogActions,
+        MatButton,
+        MatInput
+    ],
+    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': [''],
-  });
+    public apiErrorMessage: string = '';
 
-  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);
+    qualificationForm = this.formBuilder.group({
+        'skill': ['', Validators.required],
+    });
+
+    isFieldInvalid(fieldName: string): boolean {
+        const field = this.qualificationForm.get(fieldName);
+
+        if (!field) {
+            throw new Error('Form field does not exist: ' + fieldName)
         }
-      });
-    }
-  }
 
-  cancel() {
-    this.dialogRef.close();
-  }
+        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');
+            return;
+        }
+
+        this.qualificationService.create(this.qualificationForm.value).subscribe({
+            next: (createdQualification) => {
+                this.dialogRef.close(createdQualification);
+            },
+            error: (error) => {
+                console.error('Error creating qualification:', error);
+
+                this.apiErrorMessage = 'API Error';
+            }
+        });
+    }
 }