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>
+    <div class="toolbar">
-    <ion-title *ngIf="!isAddMode">Edit Task</ion-title>
+      <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']);
+  }
 }

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

@@ -32,7 +32,7 @@ export class TasksPage implements ViewWillEnter {
       this.taskService.getTaskList().subscribe(tasks => {
         this.tasks$.next(tasks);
       });
-    }, 1)
+    }, 10);
   }
 
   createTask() {

frontend/allowance-planner-v2/src/app/services/task.service.ts

@@ -30,4 +30,8 @@ export class TaskService {
     completeTask(id: number) {
         this.http.post(`${this.url}/task/${id}/complete`, {}).subscribe();
     }
+
+    deleteTask(id: number) {
+        this.http.delete(`${this.url}/task/${id}`).subscribe();
+    }
 }