add back button in edit pages (#96)

closes #89

Reviewed-on: #96

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]
 })

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>

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;
 }

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();
+  }
 }

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]
 })

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

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;
 }

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();
+  }
 }