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>
+  @if (apiError) {
-  <button (click)="closeModal()">No</button>
+    <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,7 +1,15 @@
 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',
@@ -9,13 +17,17 @@ import QualificationService from "../../services/qualification.service";
     FormsModule,
     MatDialogContent,
     MatDialogTitle,
-        ReactiveFormsModule
+    ReactiveFormsModule,
+    MatError,
+    MatDialogActions,
+    MatButton
   ],
   templateUrl: './delete.component.html',
   styleUrl: './delete.component.css'
 })
 export class DeleteComponent {
   public id: number = inject(MAT_DIALOG_DATA);
+  public apiError: string | null = null;
 
   private qualificationService: QualificationService = inject(QualificationService);
   private dialogRef: MatDialogRef<DeleteComponent> = inject(MatDialogRef);
@@ -27,6 +39,8 @@ export class DeleteComponent {
       },
       error: (error) => {
         console.error('Error deleting qualification:', error);
+
+        this.apiError = 'API Error';
       }
     });
   }