Add delete task functionality (#72)

closes #62

Reviewed-on: #72

frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.html

@@ -1,7 +1,14 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title *ngIf="isAddMode">Create Task</ion-title>
-    <ion-title *ngIf="!isAddMode">Edit Task</ion-title>
+    <div class="toolbar">
+      <ion-title *ngIf="isAddMode">Create Task</ion-title>
+      <ion-title *ngIf="!isAddMode">Edit Task</ion-title>
+      <button
+        *ngIf="!isAddMode"
+        class="remove-button"
+        (click)="deleteTask()"
+      >Delete task</button>
+    </div>
   </ion-toolbar>
 </ion-header>
 

frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.scss

@@ -1,3 +1,14 @@
+.toolbar {
+    display: flex;
+}
+
+.remove-button {
+    background-color: var(--ion-color-primary);
+    margin-right: 15px;
+    width: 85px;
+    margin-bottom: 0;
+}
+
 form {
     display: flex;
     flex-direction: column;

frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.ts

@@ -72,4 +72,9 @@ export class EditTaskPage implements OnInit {
 
     this.router.navigate(['/tabs/tasks']);
   }
+
+  deleteTask() {
+    this.taskService.deleteTask(this.id);
+    this.router.navigate(['/tabs/tasks']);
+  }
 }