fix removing a new/unsaved profile, add duplicate profile error handling

Author: lardbit

src/frontend/src/app/settings/quality-profiles.component.html

@@ -5,7 +5,7 @@ <h4 class="modal-title">Quality Profiles</h4>
 <div class="modal-body" [formGroup]="form">
   <ngx-loading [show]="isLoading" [config]="{fullScreenBackdrop: true}"></ngx-loading>
   <div class="text-end">
-    <button type="button" class="btn btn-sm btn-outline-success" (click)="add()"><span class="oi oi-plus"></span></button>
+    <button type="button" class="btn btn-sm btn-outline-success" (click)="add()">New <span class="oi oi-plus"></span></button>
   </div>
   <form class="was-validated" [formArrayName]="'profiles'">
     <div class="card my-2" *ngFor="let profile of form.controls.profiles.controls; let i = index" [formGroupName]="i">

src/frontend/src/app/settings/quality-profiles.component.ts

@@ -55,16 +55,36 @@ export class QualityProfilesComponent implements OnInit {
       },
       error: (error) => {
         console.error(error);
-        this.toastr.error('An unknown error occurred updating the quality profile');
+        let msg: string;
+        // display specific error
+        if (error.error) {
+          msg = Object.entries(error.error).map(([key,value]: [k: string, v: string[]]) => {
+            return `${key}: ${value.join(', ')}`;
+          }).join(', ');
+        }
+        // display generic error
+        else {
+          msg = 'An unknown error occurred updating the quality profile'
+        }
+        this.toastr.error(msg);
         this.isLoading = false;
       }
     })
   }
 
   public delete(formArrayIndex: number) {
     const profileFormGroup = this.form.controls.profiles.controls[formArrayIndex];
-    this.isLoading = true;
     const data = profileFormGroup.value;
+
+    // remove unsaved form control
+    if (!data.id) {
+      this.form.controls.profiles.removeAt(formArrayIndex);
+      return;
+    }
+
+    this.isLoading = true;
+
+    // delete existing record
     this.apiService.deleteQualityProfile(data.id).subscribe({
       next: () => {
         // remove form group