Filter Categories by Transaction Type in Forms #2082

2025-04-11T15:01:48+08:00

D-Gaspa commented

2025-04-11 15:01:48 +08:00

(Migrated from github.com)

Closes #2016

This PR fixes a bug where transaction forms were showing all categories regardless of transaction type (income or expense).

Changes

Fixed the category dropdown to only show relevant categories:
- Income categories when creating income transactions
- Expense categories when creating expense transactions
Created a shared transaction type tabs component for consistent navigation between expense, income, and transfer forms
Fixed issue where navigating from the transfer form to the income form wasn't working correctly
Enhanced Account::TransactionsController to filter categories appropriately
Fixed minor formatting and whitespace issues in some files

Implementation Details

The implementation filters categories in the controller layer while maintaining a clean user interface for navigating between different transaction types. By moving the filtering logic to the controller and creating a shared navigation component, we've addressed the issue while also maintaining code quality.

Testing

I've manually tested the changes to verify:

Only income categories appear when creating income transactions
Only expense categories appear when creating expense transactions
Navigation between the different forms works correctly

https://github.com/user-attachments/assets/b3cb258e-aa21-436f-8da1-862623b5df62

Note: There were some failing tests in the suite when running the tests on my dev container, but these failures are also present on the main branch before doing any changes; therefore I assume they are unrelated to the changes in this PR.

For Discussion: Potential UI Improvements

While working on this fix, I noticed some opportunities for further improving the transaction forms:

Enhanced Category Dropdown: Currently, the category dropdown shows plain text names. Would it make sense to display categories with their corresponding colors and icons (similar to how they appear in the categories management section)? This would provide visual consistency throughout the app and make it more visually appealing. I noticed that in the Figma mobile designs we already have something similar:

Tags Selection on New Transactions: Currently, users can only add tags when editing an existing transaction. Would it be valuable to add tag selection capability when creating new income/expense transactions?

I'd be happy to implement these improvements in a follow-up PR if you think they'd be beneficial. Great work on the app by the way!

Closes #2016 This PR fixes a bug where transaction forms were showing all categories regardless of transaction type (income or expense). ## Changes - Fixed the category dropdown to only show relevant categories: - Income categories when creating income transactions - Expense categories when creating expense transactions - Created a shared transaction type tabs component for consistent navigation between expense, income, and transfer forms - Fixed issue where navigating from the transfer form to the income form wasn't working correctly - Enhanced `Account::TransactionsController` to filter categories appropriately - Fixed minor formatting and whitespace issues in some files ## Implementation Details The implementation filters categories in the controller layer while maintaining a clean user interface for navigating between different transaction types. By moving the filtering logic to the controller and creating a shared navigation component, we've addressed the issue while also maintaining code quality. ## Testing I've manually tested the changes to verify: - Only income categories appear when creating income transactions - Only expense categories appear when creating expense transactions - Navigation between the different forms works correctly https://github.com/user-attachments/assets/b3cb258e-aa21-436f-8da1-862623b5df62 Note: There were some failing tests in the suite when running the tests on my dev container, but these failures are also present on the main branch before doing any changes; therefore I assume they are unrelated to the changes in this PR. ## For Discussion: Potential UI Improvements While working on this fix, I noticed some opportunities for further improving the transaction forms: 1. **Enhanced Category Dropdown**: Currently, the category dropdown shows plain text names. Would it make sense to display categories with their corresponding colors and icons (similar to how they appear in the categories management section)? This would provide visual consistency throughout the app and make it more visually appealing. I noticed that in the Figma mobile designs we already have something similar: ![Screenshot 2025-04-10 182421](https://github.com/user-attachments/assets/30c381f7-32c2-45f1-83db-bd87e95929c6) 2. **Tags Selection on New Transactions**: Currently, users can only add tags when editing an existing transaction. Would it be valuable to add tag selection capability when creating new income/expense transactions? I'd be happy to implement these improvements in a follow-up PR if you think they'd be beneficial. Great work on the app by the way!

🎉 1

zachgoll commented

2025-04-22 20:58:15 +08:00

(Migrated from github.com)

Hey @D-Gaspa thanks for the PR! Sorry for the delayed response; we've been pretty busy prepping for launch coming up.

I think this code looks good. If you can fix those merge conflicts and get the tests passing I can get this merged.

As far as the additional improvements with the badges in the form fields, we're not quite ready for that yet. That will come down the road when we starting introducing ViewComponent into the codebase.

Hey @D-Gaspa thanks for the PR! Sorry for the delayed response; we've been pretty busy prepping for launch coming up. I think this code looks good. If you can fix those merge conflicts and get the tests passing I can get this merged. As far as the additional improvements with the badges in the form fields, we're not quite ready for that yet. That will come down the road when we starting introducing ViewComponent into the codebase.

👍 1

D-Gaspa commented

2025-04-23 02:38:49 +08:00

(Migrated from github.com)

Hey @zachgoll! I've resolved the merge conflicts and adapted my changes to the new codebase structure.

Note: Noticed that there might need to be some tweaking done for dark mode support, but I didn't want to introduce more changes for now.

Hey @zachgoll! I've resolved the merge conflicts and adapted my changes to the new codebase structure. Note: Noticed that there might need to be some tweaking done for dark mode support, but I didn't want to introduce more changes for now.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: gavin/maybe#2082