US08: Allow the user to delete an owner using the UI

frontend/wendys-friends/src/app/component/list-owners/list-owners.component.html

@@ -30,7 +30,7 @@
         <td>{{ owner.name }}</td>
         <td>
           <a class="btn btn-success" href="owner/{{ owner.id }}/edit"><i class="fas fa-edit"></i></a>
-          <button class="btn btn-danger"><i class="fas fa-trash"></i></button>
+          <button class="btn btn-danger" (click)="deleteOwner(owner.id, owner.name)"><i class="fas fa-trash"></i></button>
         </td>
       </tr>
     </tbody>

frontend/wendys-friends/src/app/component/list-owners/list-owners.component.ts

@@ -71,6 +71,19 @@ export class ListOwnersComponent implements OnInit {
     );
   }
 
+  public deleteOwner(id: number, name: string) {
+    if(confirm("Are you sure you want to delete " + name + ". This action is irreversible.")) {
+      this.ownerService.deleteOwner(id).subscribe(
+        (res) => {
+          console.log('Successfully deleted owner');
+          this.loadAllOwners();
+        }, (error) => {
+          this.defaultServiceErrorHandling(error);
+        }
+      );
+    }
+  }
+
   private defaultServiceErrorHandling(error: any) {
     console.log(error);
     this.error = true;

frontend/wendys-friends/src/app/service/owner.service.ts

@@ -57,4 +57,13 @@ export class OwnerService {
     console.log('Update owner with id ' + owner.id + ': '+ JSON.stringify(owner));
     return this.httpClient.put<Owner>(this.messageBaseUri + '/' + owner.id, owner);
   }
+
+  /**
+   * Delete an owner from the backend
+   * @param id
+   */
+  deleteOwner(id: number): Observable<Object> {
+    console.log('Delete owner with id ' + id);
+    return this.httpClient.delete(this.messageBaseUri + '/' + id);
+  }
 }