#9 Add personal saving goals

[somaSeb]

Value proposition

As a User I want to add a new savings goal so that I can track my progress towards achieving it.

Description

Acceptance criteria

• [ ] On the goals page, if there are no existing goals, display text "You do not have any Goals yet!".
• [ ] When the user clicks the "+" button, a modal overlays the page with a form to add a new goal.
• [ ] The form contains required fields for Goal Name, Starting Amount, and Total Goal Amount.
• [ ] Starting Amount means any savings the user already has toward the goal. It can start at 0.
• [ ] Total Goal Amount is the target amount the user wants to save.
• [ ] The form has "Cancel" and "Save Goal" buttons.
• [ ] When the user clicks "Cancel", the modal closes without saving.
• [ ] When the user clicks "Save Goal", the data is validated.
• [ ] If valid, the goal is saved and the modal closes.
• [ ] If invalid, an error message is displayed.
• [ ] Once saved successfully, the new goal appears at the top of the goals list on the goals page.

Tasks

Create the Add Button Component:

• [ ] Implement a button component that visually represents the “+” button.
• [ ] Style the button to indicate its purpose (e.g., use a plus icon).
• [ ] Attach an event handler to the button to trigger the display of the goal form.

Display the Goal Form:

• [ ] When the user clicks the “+” button, show a modal or overlay containing the goal form.
• [ ] The form should include input fields for relevant details related to the custom goal (Name of Goal, Starting Amount, Total Amount).
• [ ] All input fields are required

Implement Cancel Functionality:

• [ ] Within the goal form, add a “Cancel” button.
• [ ] When the user clicks the “Cancel” button, close the form without saving any data.
• [ ] Ensure that the user can easily dismiss the form and return to the previous view.

Implement Submit Functionality:

• [ ] Add a “Save Goal” button within the goal form.
• [ ] Validate the form inputs when the user clicks the “Save Goal” button.
• [ ] If the inputs are valid, save the goal data in a global State (for staging purposes).
• [ ] Provide appropriate feedback to the user (e.g., success message or error notification).

[ahohnsen]

I have a few comments on your user story:

Value Proposition: Please stick to the format we provided you with (three-liner: As a ... I want to ... so that...). You mention editing, however, your user story is about adding a goal.

Acceptance Criteria:

if there are no goals, an info text is shown "You do not have any Goals yet!"

This seems a bit out of the blue; it would be better to specify where this note is located: on the goals-page.

when the user clicks the "+" button a window will appear which includes a form

Be more specific here; no new window opens, but a modal does.

Additionally, you describe what happens when the user clicks the cancel-button. But what happens when they click save? Does the modal close and the user returns to the goals-page? Where does the new entry appear - at the top or bottom of the goal list?

Another point: What does "Currently available amount" mean? If no calculation occurs and a default of 0 is displayed, then it should not appear here as it does not provide any value to the user.

[Miriam-Voelkl]

is the goals list display in another user story? if not, you could add to the tasks as well because it's a part of your acceptance criteria. otherwise very detailed 👍