Add more descriptive error message

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

@@ -9,6 +9,7 @@ import {
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import QualificationService from "../../services/qualification.service";
 import {MatButton} from "@angular/material/button";
+import {HttpErrorResponse} from "@angular/common/http";
 
 @Component({
   selector: 'app-delete-qualification',
@@ -36,11 +37,16 @@ export class DeleteComponent {
       next: () => {
         this.dialogRef.close(true);
       },
-      error: (error) => {
+      error: (error: HttpErrorResponse) => {
         console.error('Error deleting qualification:', error);
 
+        if (error.error.message.includes('SQL')) {
+          // The API message is undescriptive but this is the most common
+          this.apiError = 'This qualification cannot be modified because it is currently assigned to one or more employees';
+        } else {
           this.apiError = 'API Error';
         }
+      }
     });
   }