From 5bcbde46ea544c217c9940bf9cd82522d77c07d3 Mon Sep 17 00:00:00 2001
From: Huffle <knaepen.selina@gmail.com>
Date: Mon, 19 May 2025 09:07:51 +0200
Subject: [PATCH] Add complete task functionality (#71)

closes #61
closes #58

Reviewed-on: https://gitea.seeseepuff.be/seeseemelk/allowance_planner_2000/pulls/71
---
 .../src/app/pages/tasks/tasks.page.html          | 16 +++++++++-------
 .../src/app/pages/tasks/tasks.page.scss          |  7 +++++++
 .../src/app/pages/tasks/tasks.page.ts            | 13 ++++++++++---
 .../src/app/services/task.service.ts             |  4 ++++
 4 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.html b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.html
index 6db0fb9..78f4352 100644
--- a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.html
+++ b/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>
diff --git a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.scss b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.scss
index 999a793..40ff5dc 100644
--- a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.scss
+++ b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.scss
@@ -33,6 +33,13 @@ mat-icon {
     padding: 5px;
 }
 
+.item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+}
+
 .name {
     margin-left: 10px;
     color: var(--font-color);
diff --git a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.ts b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.ts
index da2c1d4..0527d00 100644
--- a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.ts
+++ b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.ts
@@ -28,9 +28,11 @@ export class TasksPage implements ViewWillEnter {
   }
 
   getTasks() {
-    this.taskService.getTaskList().subscribe(tasks => {
-      this.tasks$.next(tasks);
-    });
+    setTimeout(() => {
+      this.taskService.getTaskList().subscribe(tasks => {
+        this.tasks$.next(tasks);
+      });
+    }, 1)
   }
 
   createTask() {
@@ -40,4 +42,9 @@ export class TasksPage implements ViewWillEnter {
   updateTask(id: number) {
     this.router.navigate(['edit', id], { relativeTo: this.route });
   }
+
+  completeTask(id: number) {
+    this.taskService.completeTask(id);
+    this.getTasks();
+  }
 }
diff --git a/frontend/allowance-planner-v2/src/app/services/task.service.ts b/frontend/allowance-planner-v2/src/app/services/task.service.ts
index a4c74bf..af38fa7 100644
--- a/frontend/allowance-planner-v2/src/app/services/task.service.ts
+++ b/frontend/allowance-planner-v2/src/app/services/task.service.ts
@@ -26,4 +26,8 @@ export class TaskService {
     updateTask(id: number, task: Partial<Task>) {
         this.http.put(`${this.url}/task/${id}`, task).subscribe();
     }
+
+    completeTask(id: number) {
+        this.http.post(`${this.url}/task/${id}/complete`, {}).subscribe();
+    }
 }
\ No newline at end of file