From 56a19acd0fb0ce4c4017b4f9af14a7d2acb0a40b Mon Sep 17 00:00:00 2001
From: Huffle <knaepen.selina@gmail.com>
Date: Mon, 26 May 2025 13:57:17 +0200
Subject: [PATCH] add back button in edit pages (#96)

closes #89

Reviewed-on: https://gitea.seeseepuff.be/seeseemelk/allowance_planner_2000/pulls/96
---
 .../src/app/pages/edit-allowance/edit-allowance.module.ts | 4 +++-
 .../src/app/pages/edit-allowance/edit-allowance.page.html | 3 +++
 .../src/app/pages/edit-allowance/edit-allowance.page.scss | 5 +++++
 .../src/app/pages/edit-allowance/edit-allowance.page.ts   | 8 +++++++-
 .../src/app/pages/edit-task/edit-task.module.ts           | 4 +++-
 .../src/app/pages/edit-task/edit-task.page.html           | 3 +++
 .../src/app/pages/edit-task/edit-task.page.scss           | 7 ++++++-
 .../src/app/pages/edit-task/edit-task.page.ts             | 7 ++++++-
 8 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.module.ts b/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.module.ts
index babc77f..fa1ceb8 100644
--- a/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.module.ts
+++ b/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.module.ts
@@ -7,6 +7,7 @@ import { IonicModule } from '@ionic/angular';
 import { EditAllowancePageRoutingModule } from './edit-allowance-routing.module';
 
 import { EditAllowancePage } from './edit-allowance.page';
+import { MatIconModule } from '@angular/material/icon';
 
 @NgModule({
   imports: [
@@ -14,7 +15,8 @@ import { EditAllowancePage } from './edit-allowance.page';
     FormsModule,
     IonicModule,
     EditAllowancePageRoutingModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    MatIconModule
   ],
   declarations: [EditAllowancePage]
 })
diff --git a/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.html b/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.html
index 31cd8f6..e615ac8 100644
--- a/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.html
+++ b/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.html
@@ -1,6 +1,9 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
     <div class="toolbar">
+      <div class="icon" (click)="navigateBack()">
+        <mat-icon>arrow_back</mat-icon>
+      </div>
       <ion-title *ngIf="isAddMode">Create Goal</ion-title>
       <ion-title *ngIf="!isAddMode && goalId != 0">Edit Goal</ion-title>
       <ion-title *ngIf="!isAddMode && goalId == 0">Edit Allowance</ion-title>
diff --git a/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.scss b/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.scss
index 56eb60e..d0d5f34 100644
--- a/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.scss
+++ b/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.scss
@@ -1,5 +1,6 @@
 .toolbar {
     display: flex;
+    align-items: center;
 }
 
 .remove-button {
@@ -53,4 +54,8 @@ button {
 button:disabled,
 button[disabled]{
     opacity: 0.5;
+}
+
+.icon {
+    margin-left: 5px;
 }
\ No newline at end of file
diff --git a/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.ts b/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.ts
index 4fd4112..5ee1786 100644
--- a/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.ts
+++ b/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.ts
@@ -1,3 +1,4 @@
+import { Location } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -31,7 +32,8 @@ export class EditAllowancePage implements OnInit {
     private route: ActivatedRoute,
     private formBuilder: FormBuilder,
     private allowanceService: AllowanceService,
-    private router: Router
+    private router: Router,
+    private location: Location
   ) {
     this.userId = this.route.snapshot.params['id'];
     this.goalId = this.route.snapshot.params['goalId'];
@@ -98,4 +100,8 @@ export class EditAllowancePage implements OnInit {
     this.allowanceService.deleteAllowance(this.goalId, this.userId);
     this.router.navigate(['/tabs/allowance', this.userId]);
   }
+
+  navigateBack() {
+    this.location.back();
+  }
 }
diff --git a/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.module.ts b/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.module.ts
index 6e427b8..97f9e7e 100644
--- a/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.module.ts
+++ b/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.module.ts
@@ -7,6 +7,7 @@ import { IonicModule } from '@ionic/angular';
 import { EditTaskPageRoutingModule } from './edit-task-routing.module';
 
 import { EditTaskPage } from './edit-task.page';
+import { MatIconModule } from '@angular/material/icon';
 
 @NgModule({
   imports: [
@@ -14,7 +15,8 @@ import { EditTaskPage } from './edit-task.page';
     FormsModule,
     IonicModule,
     EditTaskPageRoutingModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    MatIconModule
   ],
   declarations: [EditTaskPage]
 })
diff --git a/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.html b/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.html
index 3d9ee5c..54b2a15 100644
--- a/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.html
+++ b/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.html
@@ -1,6 +1,9 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
     <div class="toolbar">
+      <div class="icon" (click)="navigateBack()">
+        <mat-icon>arrow_back</mat-icon>
+      </div>
       <ion-title *ngIf="isAddMode">Create Task</ion-title>
       <ion-title *ngIf="!isAddMode">Edit Task</ion-title>
       <button
diff --git a/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.scss b/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.scss
index 3029c8d..41248d2 100644
--- a/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.scss
+++ b/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.scss
@@ -1,11 +1,12 @@
 .toolbar {
     display: flex;
+    align-items: center;
 }
 
 .remove-button {
     background-color: var(--ion-color-primary);
     margin-right: 15px;
-    width: 85px;
+    width: 95px;
     margin-bottom: 0;
 }
 
@@ -42,4 +43,8 @@ button {
 button:disabled,
 button[disabled]{
     opacity: 0.5;
+}
+
+.icon {
+    margin-left: 5px;
 }
\ No newline at end of file
diff --git a/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.ts b/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.ts
index 6b0396f..933543b 100644
--- a/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.ts
+++ b/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.ts
@@ -23,7 +23,8 @@ export class EditTaskPage implements OnInit {
     private formBuilder: FormBuilder,
     private taskService: TaskService,
     private userService: UserService,
-    private router: Router
+    private router: Router,
+    private location: Location
   ) {
     this.id = this.route.snapshot.params['id'];
     this.isAddMode = !this.id;
@@ -77,4 +78,8 @@ export class EditTaskPage implements OnInit {
     this.taskService.deleteTask(this.id);
     this.router.navigate(['/tabs/tasks']);
   }
+
+  navigateBack() {
+    this.location.back();
+  }
 }