From 37b5c27a50ba9f540b5ec3701d91d6bdb6cf996f Mon Sep 17 00:00:00 2001
From: Huy <ptran@noreply@simonis.lol>
Date: Wed, 15 Jan 2025 09:05:48 +0000
Subject: [PATCH] Add cancel button to create and edit qualification modals
 (#36)

Co-authored-by: Phan Huy Tran <p.tran@neusta.de>
Reviewed-on: http://git.simonis.lol/angular/ems-frontend/pulls/36
Co-authored-by: Huy <ptran@noreply@simonis.lol>
Co-committed-by: Huy <ptran@noreply@simonis.lol>
---
 .../create/create.component.html              | 39 ++++++++++---------
 .../qualification/create/create.component.ts  | 11 +++++-
 .../qualification/edit/edit.component.html    |  1 +
 src/app/qualification/edit/edit.component.ts  | 37 +++++++++---------
 4 files changed, 49 insertions(+), 39 deletions(-)

diff --git a/src/app/qualification/create/create.component.html b/src/app/qualification/create/create.component.html
index 27f30c4..1485544 100644
--- a/src/app/qualification/create/create.component.html
+++ b/src/app/qualification/create/create.component.html
@@ -1,24 +1,25 @@
 <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>
-            }
+  <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-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-actions align="end">
+        <button mat-button mat-dialog-close>Cancel</button>
+        <button mat-flat-button color="primary" type="submit">Create</button>
+      </mat-dialog-actions>
+    </div>
+  </form>
 </mat-dialog-content>
diff --git a/src/app/qualification/create/create.component.ts b/src/app/qualification/create/create.component.ts
index 2f9b001..ff75395 100644
--- a/src/app/qualification/create/create.component.ts
+++ b/src/app/qualification/create/create.component.ts
@@ -1,7 +1,13 @@
 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 {
+    MatDialogActions,
+    MatDialogClose,
+    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";
@@ -20,7 +26,8 @@ import {filter} from "rxjs";
         MatFormField,
         MatDialogActions,
         MatButton,
-        MatInput
+        MatInput,
+        MatDialogClose
     ],
     templateUrl: './create.component.html',
     styleUrl: './create.component.css'
diff --git a/src/app/qualification/edit/edit.component.html b/src/app/qualification/edit/edit.component.html
index 29a10a7..71a4cb6 100644
--- a/src/app/qualification/edit/edit.component.html
+++ b/src/app/qualification/edit/edit.component.html
@@ -17,6 +17,7 @@
       </mat-form-field>
 
       <mat-dialog-actions align="end">
+        <button mat-button mat-dialog-close>Cancel</button>
         <button mat-flat-button color="primary" type="submit">Edit</button>
       </mat-dialog-actions>
     </div>
diff --git a/src/app/qualification/edit/edit.component.ts b/src/app/qualification/edit/edit.component.ts
index e0450cf..8da9791 100644
--- a/src/app/qualification/edit/edit.component.ts
+++ b/src/app/qualification/edit/edit.component.ts
@@ -2,11 +2,11 @@ import {Component, inject} from '@angular/core';
 import {FormBuilder, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
 import QualificationService from "../../services/qualification.service";
 import {
-  MAT_DIALOG_DATA,
-  MatDialogActions,
-  MatDialogContent,
-  MatDialogRef,
-  MatDialogTitle
+    MAT_DIALOG_DATA,
+    MatDialogActions, MatDialogClose,
+    MatDialogContent,
+    MatDialogRef,
+    MatDialogTitle
 } from "@angular/material/dialog";
 import {MatButton} from "@angular/material/button";
 import {MatError, MatFormField, MatLabel} from "@angular/material/form-field";
@@ -16,19 +16,20 @@ import {Qualification} from "../Qualification";
 
 @Component({
   selector: 'app-edit-qualification',
-  imports: [
-    FormsModule,
-    MatButton,
-    MatDialogActions,
-    MatDialogContent,
-    MatDialogTitle,
-    MatError,
-    MatFormField,
-    MatInput,
-    MatLabel,
-    NgIf,
-    ReactiveFormsModule
-  ],
+    imports: [
+        FormsModule,
+        MatButton,
+        MatDialogActions,
+        MatDialogContent,
+        MatDialogTitle,
+        MatError,
+        MatFormField,
+        MatInput,
+        MatLabel,
+        NgIf,
+        ReactiveFormsModule,
+        MatDialogClose
+    ],
   templateUrl: './edit.component.html',
   styleUrl: './edit.component.css'
 })