AP-65 (#87)

closes #65

Reviewed-on: #87

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

@@ -37,7 +37,7 @@
       <div class="main" *ngIf="goal.id === 0; else other_goal">
         <div class="title">
           <div class="name">Main Allowance</div>
-          <div class="icon">
+          <div class="icon" (click)="updateAllowance(goal.id)">
             <mat-icon>settings</mat-icon>
           </div>
         </div>
@@ -53,7 +53,7 @@
           <div>
             <div class="title">
               <div class="name">{{ goal.name }}</div>
-              <div class="icon">
+              <div class="icon" (click)="updateAllowance(goal.id)">
                 <mat-icon>settings</mat-icon>
               </div>
             </div>

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

@@ -36,7 +36,7 @@ export class AllowancePage implements ViewWillEnter {
         allowance[0].name = 'Main Allowance';
         this.allowance$.next(allowance);
       })
-    }, 10);
+    }, 20);
   }
 
   canFinishGoal(allowance: Allowance): boolean {

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

@@ -2,30 +2,38 @@
   <ion-toolbar>
     <div class="toolbar">
       <ion-title *ngIf="isAddMode">Create Goal</ion-title>
-      <ion-title *ngIf="!isAddMode">Edit Goal</ion-title>
+      <ion-title *ngIf="!isAddMode && goalId != 0">Edit Goal</ion-title>
+      <ion-title *ngIf="!isAddMode && goalId == 0">Edit Allowance</ion-title>
     </div>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
   <form [formGroup]="form">
-    <label>Goal Name</label>
+    <div class="item" *ngIf="isAddMode || goalId != 0">
-    <input id="name" type="text" formControlName="name"/>
+      <label>Goal Name</label>
+      <input id="name" type="text" formControlName="name"/>
+    </div>
 
-    <label>Target</label>
+    <div class="item" *ngIf="isAddMode || goalId != 0">
-    <input id="target" type="number" placeholder="0.00" name="price" min="0" value="0" step="0.01" formControlName="target"/>
+      <label>Target</label>
+      <input id="target" type="number" placeholder="0.00" name="price" min="0" value="0" step="0.01" formControlName="target"/>
+    </div>
 
     <label>Weight</label>
     <input id="weight" type="number" placeholder="0.00" name="price" min="0" value="0" step="0.01" formControlName="weight"/>
 
-    <label>Colour</label>
+    <div class="item" *ngIf="isAddMode || goalId != 0">
-    <select formControlName="color">
+      <label>Colour</label>
-      <option *ngFor="let color of possibleColors" [value]="color" [style.--background]="color">{{color}}</option>
+      <select formControlName="color">
-    </select>
+        <option *ngFor="let color of possibleColors" [value]="color" [style.--background]="color">{{color}}</option>
+      </select>
+    </div>
 
     <button type="button" [disabled]="!form.valid" (click)="submit()">
       <span *ngIf="isAddMode">Add Goal</span>
-      <span *ngIf="!isAddMode">Update Goal</span>
+      <span *ngIf="!isAddMode && goalId != 0">Update Goal</span>
+      <span *ngIf="!isAddMode && goalId == 0">Update Allowance</span>
     </button>
   </form>
 </ion-content>

frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.scss

@@ -3,10 +3,14 @@
 }
 
 form {
+    height: 100%;
+}
+
+form,
+.item {
     display: flex;
     flex-direction: column;
     align-items: center;
-    height: 100%;
 }
 
 label {

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

@@ -40,7 +40,7 @@ export class EditAllowancePage implements OnInit {
     this.allowanceService.getAllowanceList(this.userId).subscribe((list) => {
       for (let allowance of list) {
         this.possibleColors = this.possibleColors.filter(color => color !== allowance.colour);
-        if (!this.isAddMode && this.goalId === allowance.id) {
+        if (!this.isAddMode && +this.goalId === allowance.id) {
           this.possibleColors.unshift(allowance.colour);
         }
       }
@@ -55,6 +55,25 @@ export class EditAllowancePage implements OnInit {
   }
 
   ngOnInit() {
+    if (!this.isAddMode) {
+      this.allowanceService.getAllowanceById(this.goalId, this.userId).subscribe((allowance) => {
+        if (+this.goalId === 0) {
+          this.form.setValue({
+            name: 'Main Allowance',
+            target: 0,
+            weight: allowance.weight,
+            color: '#9C4BE4'
+          });
+        } else {
+          this.form.setValue({
+            name: allowance.name,
+            target: allowance.target,
+            weight: allowance.weight,
+            color: allowance.colour
+          });
+        }
+      });
+    }
   }
 
   submit() {
@@ -68,6 +87,8 @@ export class EditAllowancePage implements OnInit {
 
     if (this.isAddMode) {
       this.allowanceService.createAllowance(allowance, this.userId);
+    } else {
+      this.allowanceService.updateAllowance(allowance, this.goalId, this.userId);
     }
 
     this.router.navigate(['/tabs/allowance', this.userId]);

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

@@ -15,7 +15,15 @@ export class AllowanceService {
         return this.http.get<Allowance[]>(`${this.url}/user/${userId}/allowance`);
     }
 
+    getAllowanceById(allowanceId: number, userId: number): Observable<Allowance> {
+        return this.http.get<Allowance>(`${this.url}/user/${userId}/allowance/${allowanceId}`);
+    }
+
     createAllowance(allowance: Partial<Allowance>, userId: number) {
         this.http.post(`${this.url}/user/${userId}/allowance`, allowance).subscribe();
     }
+
+    updateAllowance(allowance: Partial<Allowance>, allowanceId: number, userId: number) {
+        this.http.put(`${this.url}/user/${userId}/allowance/${allowanceId}`, allowance).subscribe();
+    }
 }