Done ig

src/app/qualification/delete/delete.component.html

@@ -1,5 +1,15 @@
-<h2 mat-dialog-title>Are you sure you want to delete this qualification?</h2>
+<h2 mat-dialog-title>Delete Qualification</h2>
+
 <mat-dialog-content>
-  <button (click)="delete()">Yes</button>
-  <button (click)="closeModal()">No</button>
+  @if (apiError) {
+    <div class="!text-red-600 !mb-4 !p-3 !bg-red-50 !rounded">
+      <p>{{ apiError }}</p>
+    </div>
+  }
+  Are you sure you want to delete this qualification? This can't be undone.
 </mat-dialog-content>
+
+<mat-dialog-actions>
+  <button mat-button (click)="closeModal()">Cancel</button>
+  <button mat-button (click)="delete()" cdkFocusInitial>Delete</button>
+</mat-dialog-actions>

src/app/qualification/delete/delete.component.ts

@@ -1,37 +1,51 @@
 import {Component, inject} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogContent, MatDialogRef, MatDialogTitle} from "@angular/material/dialog";
+import {
+  MAT_DIALOG_DATA,
+  MatDialogActions,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle
+} from "@angular/material/dialog";
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import QualificationService from "../../services/qualification.service";
+import {MatError} from "@angular/material/form-field";
+import {MatButton} from "@angular/material/button";
 
 @Component({
-    selector: 'app-delete-qualification',
-    imports: [
-        FormsModule,
-        MatDialogContent,
-        MatDialogTitle,
-        ReactiveFormsModule
-    ],
-    templateUrl: './delete.component.html',
-    styleUrl: './delete.component.css'
+  selector: 'app-delete-qualification',
+  imports: [
+    FormsModule,
+    MatDialogContent,
+    MatDialogTitle,
+    ReactiveFormsModule,
+    MatError,
+    MatDialogActions,
+    MatButton
+  ],
+  templateUrl: './delete.component.html',
+  styleUrl: './delete.component.css'
 })
 export class DeleteComponent {
-    public id: number = inject(MAT_DIALOG_DATA);
+  public id: number = inject(MAT_DIALOG_DATA);
+  public apiError: string | null = null;
 
-    private qualificationService: QualificationService = inject(QualificationService);
-    private dialogRef: MatDialogRef<DeleteComponent> = inject(MatDialogRef);
+  private qualificationService: QualificationService = inject(QualificationService);
+  private dialogRef: MatDialogRef<DeleteComponent> = inject(MatDialogRef);
 
-    delete() {
-        this.qualificationService.delete(this.id).subscribe({
-            next: () => {
-                this.dialogRef.close(true);
-            },
-            error: (error) => {
-                console.error('Error deleting qualification:', error);
-            }
-        });
-    }
+  delete() {
+    this.qualificationService.delete(this.id).subscribe({
+      next: () => {
+        this.dialogRef.close(true);
+      },
+      error: (error) => {
+        console.error('Error deleting qualification:', error);
 
-    closeModal() {
-        this.dialogRef.close(false);
-    }
+        this.apiError = 'API Error';
+      }
+    });
+  }
+
+  closeModal() {
+    this.dialogRef.close(false);
+  }
 }