github-starred/actual
2
0
Fork 0
mirror of https://github.com/actualbudget/actual.git synced 2026-03-09 03:32:54 -05:00
Code Issues 250 Packages Projects Releases 53 Wiki Activity

[PR #1340] [MERGED] Web port of the react native edit transaction view #3674

New Issue
Closed
opened 2026-02-28 20:45:04 -06:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-02-28 20:45:04 -06:00
Owner
Copy Link

📋 Pull Request Information

Original PR: https://github.com/actualbudget/actual/pull/1340
Author: @Cldfire
Created: 7/15/2023
Status: ✅ Merged
Merged: 8/8/2023
Merged by: @trevdor

Base: master ← Head: jarek/port-rn-edit-transaction

📝 Commits (10+)

  • 32e8f95 Add non-functional port of the RN edit transaction component
  • 86dd5a6 Working buttons and functional input fields
  • 9c8cea9 Stop using location state to pass transactions to edit component
  • 0dfd392 Remove add transaction from toolbar
  • 000dbc4 Start using edit field modal
  • 2484281 Lots of UI improvements
  • 60578a2 Implement adding transactions from transactions list
  • ba9df74 Stop edit field modal from closing on blur
  • df94fa0 Set role="button" on downshift autocomplete items
  • 1263062 userSelect: none some things

📊 Changes

13 files changed (+1564 additions, -147 deletions)

View changed files

📝 packages/desktop-client/src/components/FinancesApp.tsx (+31 -1)
📝 packages/desktop-client/src/components/accounts/MobileAccount.js (+4 -16)
📝 packages/desktop-client/src/components/accounts/MobileAccountDetails.js (+1 -1)
📝 packages/desktop-client/src/components/autocomplete/AccountAutocomplete.js (+55 -8)
📝 packages/desktop-client/src/components/autocomplete/Autocomplete.tsx (+26 -0)
📝 packages/desktop-client/src/components/autocomplete/CategorySelect.tsx (+59 -8)
📝 packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.js (+57 -13)
➕ packages/desktop-client/src/components/mobile/MobileAmountInput.js (+315 -0)
➕ packages/desktop-client/src/components/mobile/MobileForms.js (+127 -0)
📝 packages/desktop-client/src/components/modals/EditField.js (+44 -13)
📝 packages/desktop-client/src/components/transactions/MobileTransaction.js (+838 -86)
📝 packages/loot-core/src/shared/transactions.ts (+1 -1)
➕ upcoming-release-notes/1340.md (+6 -0)

📄 Description

Relates to https://github.com/actualbudget/actual/issues/604.

Original React Native experience:

https://github.com/actualbudget/actual/assets/13814214/d5960aca-4e1e-437d-afd4-db01915c5b0d

Experience ported to web in iOS PWA:

https://github.com/actualbudget/actual/assets/13814214/9f6f646a-b7a0-4761-8ed3-ae2acc912fd2

Everything except split transaction editing is here and functional. I didn't implement split transactions because:

  • I don't use them personally
  • It's significantly more work for significantly less gain
  • I don't think the way it was implemented in React Native was particularly ergonomic, and it would likely benefit from a redesign before being implemented again for web
  • It's a logical way to keep this MR smaller than it otherwise would be

Other future improvements possible:

  • Customize the payee / account / category autocomplete modals more for mobile, they could benefit from more touch-friendly layouts (particularly the size of the item rows, to make them easier to tap)
  • Add a toggle switch component instead of the checkbox for "cleared"
  • Fix the mobile account view so it works when you navigate to it directly instead of first loading the accounts view and then tapping into the transaction list. Right now if you go there without having loaded the accounts view first it breaks. (I already fixed this for the edit transaction view.)
  • Style polish
  • Implement split transaction editing (#1352)
  • Move the + symbol somewhere more centrally located so a transaction could be entered with one hand (left or right). (from @shall0pass)
  • Translate the class components into functional ones
  • Combine the serializeTransaction and deserializeTransaction functions added here for mobile with the desktop counterparts in a way that works for both
  • Add some automated testing

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/actualbudget/actual/pull/1340 **Author:** [@Cldfire](https://github.com/Cldfire) **Created:** 7/15/2023 **Status:** ✅ Merged **Merged:** 8/8/2023 **Merged by:** [@trevdor](https://github.com/trevdor) **Base:** `master` ← **Head:** `jarek/port-rn-edit-transaction` --- ### 📝 Commits (10+) - [`32e8f95`](https://github.com/actualbudget/actual/commit/32e8f9525cad7c6c10f4f9ba85f570486b80ef58) Add non-functional port of the RN edit transaction component - [`86dd5a6`](https://github.com/actualbudget/actual/commit/86dd5a6771cb467a666f604c66ac55cac1aab0fc) Working buttons and functional input fields - [`9c8cea9`](https://github.com/actualbudget/actual/commit/9c8cea96178c1f009468cf7d46cd65f34d20e47e) Stop using location state to pass transactions to edit component - [`0dfd392`](https://github.com/actualbudget/actual/commit/0dfd392f1c6f1d44f44dd9c3875662b8773819b4) Remove add transaction from toolbar - [`000dbc4`](https://github.com/actualbudget/actual/commit/000dbc43804575ba558efc11f5b26d0e7a52526b) Start using edit field modal - [`2484281`](https://github.com/actualbudget/actual/commit/2484281162f7896794df45fade093a9f2b5430ac) Lots of UI improvements - [`60578a2`](https://github.com/actualbudget/actual/commit/60578a2d66a89df3584874dc8eaeb003666ae4c5) Implement adding transactions from transactions list - [`ba9df74`](https://github.com/actualbudget/actual/commit/ba9df74ad07cc573c36f08a839aef0e61c22e96a) Stop edit field modal from closing on blur - [`df94fa0`](https://github.com/actualbudget/actual/commit/df94fa021b28071fb51c51620c738bd233136acc) Set `role="button"` on downshift autocomplete items - [`1263062`](https://github.com/actualbudget/actual/commit/12630628f6b850c876ff9afdeec1738002588a07) userSelect: none some things ### 📊 Changes **13 files changed** (+1564 additions, -147 deletions) <details> <summary>View changed files</summary> 📝 `packages/desktop-client/src/components/FinancesApp.tsx` (+31 -1) 📝 `packages/desktop-client/src/components/accounts/MobileAccount.js` (+4 -16) 📝 `packages/desktop-client/src/components/accounts/MobileAccountDetails.js` (+1 -1) 📝 `packages/desktop-client/src/components/autocomplete/AccountAutocomplete.js` (+55 -8) 📝 `packages/desktop-client/src/components/autocomplete/Autocomplete.tsx` (+26 -0) 📝 `packages/desktop-client/src/components/autocomplete/CategorySelect.tsx` (+59 -8) 📝 `packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.js` (+57 -13) ➕ `packages/desktop-client/src/components/mobile/MobileAmountInput.js` (+315 -0) ➕ `packages/desktop-client/src/components/mobile/MobileForms.js` (+127 -0) 📝 `packages/desktop-client/src/components/modals/EditField.js` (+44 -13) 📝 `packages/desktop-client/src/components/transactions/MobileTransaction.js` (+838 -86) 📝 `packages/loot-core/src/shared/transactions.ts` (+1 -1) ➕ `upcoming-release-notes/1340.md` (+6 -0) </details> ### 📄 Description Relates to https://github.com/actualbudget/actual/issues/604. Original React Native experience: https://github.com/actualbudget/actual/assets/13814214/d5960aca-4e1e-437d-afd4-db01915c5b0d Experience ported to web in iOS PWA: https://github.com/actualbudget/actual/assets/13814214/9f6f646a-b7a0-4761-8ed3-ae2acc912fd2 Everything except split transaction editing is here and functional. I didn't implement split transactions because: * I don't use them personally * It's significantly more work for significantly less gain * I don't think the way it was implemented in React Native was particularly ergonomic, and it would likely benefit from a redesign before being implemented again for web * It's a logical way to keep this MR smaller than it otherwise would be Other future improvements possible: * Customize the payee / account / category autocomplete modals more for mobile, they could benefit from more touch-friendly layouts (particularly the size of the item rows, to make them easier to tap) * Add a toggle switch component instead of the checkbox for "cleared" * Fix the mobile account view so it works when you navigate to it directly instead of first loading the accounts view and then tapping into the transaction list. Right now if you go there without having loaded the accounts view first it breaks. (I already fixed this for the edit transaction view.) * Style polish * Implement split transaction editing (#1352) * Move the + symbol somewhere more centrally located so a transaction could be entered with one hand (left or right). (from @shall0pass) * Translate the class components into functional ones * Combine the `serializeTransaction` and `deserializeTransaction` functions added here for mobile with the desktop counterparts in a way that works for both * Add some automated testing --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-02-28 20:45:04 -06:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
AI generated
API
bank sync
budgeting
bug
can’t replicate
dependencies
docker
documentation
electron
experimental feature
feature
feedback
goal templates
good first issue
help wanted
importers
maintenance
needs info
needs testing
needs triage
needs votes
openid
payees
pull-request
Mirrored from GitHub Pull Request
 regression
reports
responsive
rules
schedules
server
✨ merged
split transactions
tech debt
theme
transaction import
transaction reconciliation
transactions
translations
upstream
user interface
✅ approved
wontfix
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/actual#3674
Delete Branch "%!s()"

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?