gavin/maybe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 28 Wiki Activity

Add transaction modal flow #633

Merged
josefarias merged 3 commits from jose/transaction-modal into main 2024-04-17 02:44:31 +08:00
Conversation 1 Commits 3 Files Changed 12 +137 -22
josefarias commented 2024-04-16 15:55:22 +08:00 (Migrated from github.com)
Copy Link

This PR adds a manual transaction form inside a modal as described in https://github.com/maybe-finance/maybe/issues/629

Preview

A preview of what this feature looks like in this PR

Demos

Toggling through the tab radio buttons (10s):

GIF showing what it looks like to toggle through the tabbed design

Full demo (20s):

https://github.com/maybe-finance/maybe/assets/31393016/5e529deb-62e3-47be-91e7-ba4c1d5b9173

Requirements

  • User can click button on transaction page to open a modal
  • User can click on button on account page
    • Account dropdown is pre-filled in this scenario
  • Modal has a radio group of Expense, Income, Transfer
    • Transfers are NOT part of this issue. A cursor-not-allowed class should be applied to the "Transfer" button and implementation should be skipped
  • If "Expense", amount value is saved as a positive value in the DB. If "Income", amount is saved as negative value in DB.
  • Form uses native HTML input elements (no custom select or datepickers needed here)
  • Form submit should be handled correctly (all fields should be required):
    • If missing fields or validation errors, modal stays open, no alerts
    • If successful submit, app shows success notification
    • If error, app shows error notification (see * below)
  • I18n translations are provided

* I think we'll need further considerations for this. All form fields are required, which means errors indicate foul play. We should raise in those cases, not return a friendly error.

/claim #629

This PR adds a manual transaction form inside a modal as described in https://github.com/maybe-finance/maybe/issues/629 ## Preview <img src="https://github.com/maybe-finance/maybe/assets/31393016/b9244062-4939-46c7-8d30-ae54b58a66d7" width=500 alt="A preview of what this feature looks like in this PR"> ## Demos ### Toggling through the tab radio buttons (10s): ![GIF showing what it looks like to toggle through the tabbed design](https://github.com/maybe-finance/maybe/assets/31393016/09177ee7-c814-481b-bdb4-fdf414feac06) ### Full demo (20s): https://github.com/maybe-finance/maybe/assets/31393016/5e529deb-62e3-47be-91e7-ba4c1d5b9173 ## Requirements * [x] User can click button on transaction page to open a modal * [x] User can click on button on account page * [x] Account dropdown is pre-filled in this scenario * [x] Modal has a radio group of `Expense`, `Income`, `Transfer` * [x] Transfers are NOT part of this issue. A `cursor-not-allowed` class should be applied to the "Transfer" button and implementation should be _skipped_ * [x] If "Expense", amount value is saved as a _positive_ value in the DB. If "Income", amount is saved as _negative_ value in DB. * [x] Form uses native HTML input elements (no custom select or datepickers needed here) * [x] Form submit should be handled correctly (all fields should be required): * [x] If missing fields or validation errors, modal stays open, no alerts * [x] If successful submit, app shows success notification * [ ] ~~If error, app shows error notification~~ _(see * below)_ * [x] I18n translations are provided _* I think we'll need further considerations for this. All form fields are required, which means errors indicate foul play. We should raise in those cases, not return a friendly error._ /claim #629
🎉 1
zachgoll (Migrated from github.com) approved these changes 2024-04-17 02:28:13 +08:00
zachgoll (Migrated from github.com) left a comment
Copy Link

Nice work on this!

Nice work on this!
Sign in to join this conversation.
Reviewers
No Reviewers
zachgoll
Labels
Clear labels
📆 Planned
Not ready to be worked on yet, but planned for future
 💻 Self Hosted only
Issues pertaining to self-hosted versions of Maybe
 ⚙️ Config
ℹ️ Needs info
Further information is requested
 📱 Mobile
Bugs exclusively happening on mobile devices
 1️⃣ High Priority
High priority issues will be worked on next
 🚨 Urgent
Issues that are urgent for app functionality
 3️⃣ Low priority
Contributions accepted, but Maybe team will not be working on this in the near term
 2️⃣ Medium Priority
Community contributions accepted, Maybe team only works on if there are no high priority items open
 ⚡ Performance
Performance issues to address
 🎨 UI / UX
Issues related to UI / UX interactions and design.
 💎 Bounty
💰 Rewarded
📊 Data issue
Issues where the app functionally works, but the data is missing or inaccurate.
 🙋 Bounty claim
$1.5K
Community
This is a great issue for community members to work on
 dependencies
Pull requests that update a dependency file
 Design
Hosted only
Hosted app only
 Required self hoster data migration
Self hosters must run data migrations to resolve this issue
 ruby
Pull requests that update Ruby code
No Label 🙋 Bounty claim
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
gavin
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: gavin/maybe#633
Delete Branch "jose/transaction-modal"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?