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

WIP: Improve Sidebar UI #667

Closed
syedbarimanjan wants to merge 2 commits from Improvement/ui-of-sidebar-account-list into main
pull from: Improvement/ui-of-sidebar-account-list
merge into: gavin:main
Conversation 9 Commits 2 Files Changed 5 +109 -67
syedbarimanjan commented 2024-04-23 14:32:19 +08:00 (Migrated from github.com)
Copy Link

Requirements

  • Add trendline and percent change to account balance
  • Add a period selector (above the list) and allow the following values: Period.last_7_days, Period.last_30_days. Default should be Period.last_30_days. Labels should be 7D and 1M
  • Add icons left of account name (we don't have bank logos yet, so use the placeholder value design for all accounts)

Fixes #647
/claim #647

Screencast from 23-04-2024 11:29:31.webm

I have added all of the requirements, just time_series chart is giving errors which I am trying to solve.

## Requirements * [x] Add trendline and percent change to account balance * [x] Add a period selector (above the list) and allow the following values: `Period.last_7_days`, `Period.last_30_days`. Default should be `Period.last_30_days`. Labels should be `7D` and `1M` * [x] Add icons left of account name (we don't have bank logos yet, so use the placeholder value design for all accounts) Fixes #647 /claim #647 [Screencast from 23-04-2024 11:29:31.webm](https://github.com/maybe-finance/maybe/assets/112156147/ced71c8d-d012-4b80-a9f7-6cad211c1b69) I have added all of the requirements, just time_series chart is giving errors which I am trying to solve.
zachgoll (Migrated from github.com) reviewed 2024-04-23 22:00:43 +08:00
zachgoll (Migrated from github.com) left a comment
Copy Link

This is a good start but I think there are a few things we'll want to address prior to merging. I left some specific comments within the code, but we'll also want to make sure the UI matches the designs. I'm seeing a few inconsistencies, screenshotted below:

CleanShot 2024-04-23 at 09 55 38

CleanShot 2024-04-23 at 10 00 22

This is a good start but I think there are a few things we'll want to address prior to merging. I left some specific comments within the code, but we'll also want to make sure the UI matches the [designs](https://www.figma.com/file/lonJmVk3HYkwZoIO7xYP2w/Maybe-App-(Community)?type=design&node-id=2828-2845&mode=design&t=Y0hF2UeUXaOhxGL4-0). I'm seeing a few inconsistencies, screenshotted below: ![CleanShot 2024-04-23 at 09 55 38](https://github.com/maybe-finance/maybe/assets/16676157/5dc211e8-d642-4970-b86b-452166d60b4d) ![CleanShot 2024-04-23 at 10 00 22](https://github.com/maybe-finance/maybe/assets/16676157/79d1e8b9-49bd-4273-916b-598ce1439fb5)
app/views/accounts/_account_list.html.erb
@@ -8,17 +9,44 @@
<div class="text-left"><%= type.model_name.human %></div>
zachgoll (Migrated from github.com) commented 2024-04-23 21:46:30 +08:00
Copy Link

Guessing this is from testing? We'll need a more specific id here, along with the other chart below in this file.

Guessing this is from testing? We'll need a more specific id here, along with the other chart below in this file.
app/views/layouts/_sidebar.html.erb
@@ -71,9 +71,15 @@
</nav>
zachgoll (Migrated from github.com) commented 2024-04-23 21:51:56 +08:00
Copy Link

This auto-submit does not appear to be working. You'll need to wrap this in a form and ideally, we submit this via Turbo streams so only the sidebar is replaced when the period changes.

Also, by reading @period, we're exposing ourselves to a bug where if you go to an individual account page and select a period that is not available in the sidebar, an error is thrown. Reproduction:

  1. Go to any account page
  2. Click "1Y" time period (which doesn't exist in sidebar)
This auto-submit does not appear to be working. You'll need to wrap this in a form and ideally, we submit this via Turbo streams so only the sidebar is replaced when the period changes. Also, by reading `@period`, we're exposing ourselves to a bug where if you go to an individual account page and select a period that is _not_ available in the sidebar, an error is thrown. Reproduction: 1. Go to any account page 2. Click "1Y" time period (which doesn't exist in sidebar)
syedbarimanjan commented 2024-04-23 22:49:34 +08:00 (Migrated from github.com)
Copy Link

This is a good start but I think there are a few things we'll want to address prior to merging. I left some specific comments within the code, but we'll also want to make sure the UI matches the designs. I'm seeing a few inconsistencies, screenshotted below:

CleanShot 2024-04-23 at 09 55 38

CleanShot 2024-04-23 at 10 00 22

Yeah I made these changes locally will push them there is just this one problem which I am trying to solve is that the favorable_direction and trend.direction are not updating they are the same for all of these trendlines so thier color is the same

> This is a good start but I think there are a few things we'll want to address prior to merging. I left some specific comments within the code, but we'll also want to make sure the UI matches the [designs](https://www.figma.com/file/lonJmVk3HYkwZoIO7xYP2w/Maybe-App-(Community)?type=design&node-id=2828-2845&mode=design&t=Y0hF2UeUXaOhxGL4-0). I'm seeing a few inconsistencies, screenshotted below: > > ![CleanShot 2024-04-23 at 09 55 38](https://private-user-images.githubusercontent.com/16676157/324862884-5dc211e8-d642-4970-b86b-452166d60b4d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTM4ODMyNzksIm5iZiI6MTcxMzg4Mjk3OSwicGF0aCI6Ii8xNjY3NjE1Ny8zMjQ4NjI4ODQtNWRjMjExZTgtZDY0Mi00OTcwLWI4NmItNDUyMTY2ZDYwYjRkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA0MjMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNDIzVDE0MzYxOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTRkZDkwNGNmMGFkYjI1ZDMzNGUxZmU5NTU0Njk3MDFhMWE5NGViMjI4MmUzMzBkZjMyNjg4ODUzMWM4NTJhZGMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.ao-hIhAwvcc5m2MNPo9ASrWSQYjJsJ70UWHoKvVnmOM) > > ![CleanShot 2024-04-23 at 10 00 22](https://private-user-images.githubusercontent.com/16676157/324863019-79d1e8b9-49bd-4273-916b-598ce1439fb5.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTM4ODMyNzksIm5iZiI6MTcxMzg4Mjk3OSwicGF0aCI6Ii8xNjY3NjE1Ny8zMjQ4NjMwMTktNzlkMWU4YjktNDliZC00MjczLTkxNmItNTk4Y2UxNDM5ZmI1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA0MjMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNDIzVDE0MzYxOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTNlM2NjOWVkMzgyNTljMThkNTMwNGQ0NTgwOWRkYWNhNmM5NGY5NmI5MjUyNjk4YTE3YmJkNmI3NTJhYWNkYTgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.qrQocHdWsVm73nwVthN8N3u3CGoLBzlG_ETY0WNX6bY) Yeah I made these changes locally will push them there is just this one problem which I am trying to solve is that the favorable_direction and trend.direction are not updating they are the same for all of these trendlines so thier color is the same
zachgoll commented 2024-04-24 00:12:07 +08:00 (Migrated from github.com)
Copy Link

This is a good start but I think there are a few things we'll want to address prior to merging. I left some specific comments within the code, but we'll also want to make sure the UI matches the designs. I'm seeing a few inconsistencies, screenshotted below:
CleanShot 2024-04-23 at 09 55 38
CleanShot 2024-04-23 at 10 00 22

Yeah I made these changes locally will push them there is just this one problem which I am trying to solve is that the favorable_direction and trend.direction are not updating they are the same for all of these trendlines so thier color is the same

It looks like you may need to specify the favorable_direction in the series method on account (think we might have missed adding this when we updated time series charts):

1f6e83ee91/app/models/account.rb (L53-L66)

> > This is a good start but I think there are a few things we'll want to address prior to merging. I left some specific comments within the code, but we'll also want to make sure the UI matches the [designs](https://www.figma.com/file/lonJmVk3HYkwZoIO7xYP2w/Maybe-App-(Community)?type=design&node-id=2828-2845&mode=design&t=Y0hF2UeUXaOhxGL4-0). I'm seeing a few inconsistencies, screenshotted below: > > ![CleanShot 2024-04-23 at 09 55 38](https://private-user-images.githubusercontent.com/16676157/324862884-5dc211e8-d642-4970-b86b-452166d60b4d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTM4ODMyNzksIm5iZiI6MTcxMzg4Mjk3OSwicGF0aCI6Ii8xNjY3NjE1Ny8zMjQ4NjI4ODQtNWRjMjExZTgtZDY0Mi00OTcwLWI4NmItNDUyMTY2ZDYwYjRkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA0MjMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNDIzVDE0MzYxOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTRkZDkwNGNmMGFkYjI1ZDMzNGUxZmU5NTU0Njk3MDFhMWE5NGViMjI4MmUzMzBkZjMyNjg4ODUzMWM4NTJhZGMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.ao-hIhAwvcc5m2MNPo9ASrWSQYjJsJ70UWHoKvVnmOM) > > ![CleanShot 2024-04-23 at 10 00 22](https://private-user-images.githubusercontent.com/16676157/324863019-79d1e8b9-49bd-4273-916b-598ce1439fb5.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTM4ODMyNzksIm5iZiI6MTcxMzg4Mjk3OSwicGF0aCI6Ii8xNjY3NjE1Ny8zMjQ4NjMwMTktNzlkMWU4YjktNDliZC00MjczLTkxNmItNTk4Y2UxNDM5ZmI1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA0MjMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNDIzVDE0MzYxOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTNlM2NjOWVkMzgyNTljMThkNTMwNGQ0NTgwOWRkYWNhNmM5NGY5NmI5MjUyNjk4YTE3YmJkNmI3NTJhYWNkYTgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.qrQocHdWsVm73nwVthN8N3u3CGoLBzlG_ETY0WNX6bY) > > Yeah I made these changes locally will push them there is just this one problem which I am trying to solve is that the favorable_direction and trend.direction are not updating they are the same for all of these trendlines so thier color is the same It looks like you _may_ need to specify the `favorable_direction` in the `series` method on `account` (think we might have missed adding this when we updated time series charts): https://github.com/maybe-finance/maybe/blob/1f6e83ee911fcdc618c6fa08ae9e2b8a9c0adb93/app/models/account.rb#L53-L66
syedbarimanjan commented 2024-04-25 18:25:32 +08:00 (Migrated from github.com)
Copy Link

@JoshAntBrown Hey, I'm feeling pretty under the weather. Mind splitting with me and taking on from here?

@JoshAntBrown Hey, I'm feeling pretty under the weather. Mind splitting with me and taking on from here?
JoshAntBrown commented 2024-04-26 04:56:58 +08:00 (Migrated from github.com)
Copy Link

I'm away for the weekend now so not sure I'll get any time to look at this.

I'm away for the weekend now so not sure I'll get any time to look at this.
zachgoll commented 2024-04-27 04:50:42 +08:00 (Migrated from github.com)
Copy Link

@syedbarimanjan I'm going to mark this as a draft for now. When this is ready for another review just mark it as ready and I'll take a look.

@syedbarimanjan I'm going to mark this as a draft for now. When this is ready for another review just mark it as ready and I'll take a look.
syedbarimanjan commented 2024-04-28 19:11:42 +08:00 (Migrated from github.com)
Copy Link

@jakubkottnauer hey mind splitting with me and completing this?

@jakubkottnauer hey mind splitting with me and completing this?
jakubkottnauer commented 2024-04-29 01:15:58 +08:00 (Migrated from github.com)
Copy Link

@jakubkottnauer hey mind splitting with me and completing this?

I won't be able to pick up new work until Thursday. I can take over if this is not finished by then.

> @jakubkottnauer hey mind splitting with me and completing this? I won't be able to pick up new work until Thursday. I can take over if this is not finished by then.
👍 1
zachgoll commented 2024-04-29 22:03:03 +08:00 (Migrated from github.com)
Copy Link

Thanks for the work on this. Closing this out as we've merged the completed bounty in #697

Thanks for the work on this. Closing this out as we've merged the completed bounty in #697

Pull request closed

This pull request cannot be reopened because the branch was deleted.
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#667
Delete Branch "Improvement/ui-of-sidebar-account-list"

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?