AP-64 (#86)

closes #64

Reviewed-on: #86

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

@@ -0,0 +1,75 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AllowanceService } from 'src/app/services/allowance.service';
+
+@Component({
+  selector: 'app-edit-allowance',
+  templateUrl: './edit-allowance.page.html',
+  styleUrls: ['./edit-allowance.page.scss'],
+  standalone: false
+})
+export class EditAllowancePage implements OnInit {
+  public form: FormGroup;
+  public goalId: number;
+  public userId: number;
+  public isAddMode: boolean;
+  public possibleColors: Array<string> = [
+    '#6199D9',
+    '#D98B61',
+    '#DBC307',
+    '#13DEB5',
+    '#7DCB7D',
+    '#CF1DBD',
+    '#F53311',
+    '#2F00FF',
+    '#098B0D',
+    '#1BC2E8'
+  ];
+
+  constructor(
+    private route: ActivatedRoute,
+    private formBuilder: FormBuilder,
+    private allowanceService: AllowanceService,
+    private router: Router
+  ) {
+    this.userId = this.route.snapshot.params['id'];
+    this.goalId = this.route.snapshot.params['goalId'];
+    this.isAddMode = !this.goalId;
+
+    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) {
+          this.possibleColors.unshift(allowance.colour);
+        }
+      }
+    });
+
+    this.form = this.formBuilder.group({
+      name: ['', Validators.required],
+      target: ['', Validators.required],
+      weight: ['', Validators.required],
+      color: ['', Validators.required]
+    });
+  }
+
+  ngOnInit() {
+  }
+
+  submit() {
+    const formValue = this.form.value;
+    const allowance = {
+      name: formValue.name,
+      target: formValue.target,
+      weight: formValue.weight,
+      colour: formValue.color,
+    };
+
+    if (this.isAddMode) {
+      this.allowanceService.createAllowance(allowance, this.userId);
+    }
+
+    this.router.navigate(['/tabs/allowance', this.userId]);
+  }
+}