Add complete task functionality (#71)

closes #61
closes #58

Reviewed-on: #71

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

@@ -15,13 +15,15 @@
       <mat-icon>filter_alt</mat-icon>
     </div>
     <div class="list">
-      <div class="task" (click)="updateTask(task.id)" *ngFor="let task of tasks$ | async">
-        <button>Done</button>
-        <div class="name">{{ task.name }}</div>
-        <div
-          class="reward"
-          [ngClass]="{ 'negative': task.reward < 0 }"
-        >{{ task.reward.toFixed(2) }} SP</div>
+      <div class="task" *ngFor="let task of tasks$ | async">
+        <button (click)="completeTask(task.id)">Done</button>
+        <div (click)="updateTask(task.id)" class="item">
+          <div class="name">{{ task.name }}</div>
+          <div
+            class="reward"
+            [ngClass]="{ 'negative': task.reward < 0 }"
+          >{{ task.reward.toFixed(2) }} SP</div>
+        </div>
       </div>
     </div>
   </div>