hackforla / hackforla/tdm-calculator
Dev: Implement sorting visibility by multiple columns on My Projects page
- Dominant language
- JavaScript
- Stars
- 68
- Forks
- 47
- Avg merge
- 3d 9h
- Merged PRs (30d)
- 25
Description
### Overview
Implement adding icon and numbering to all the columns that have an active sort, so that users will be able to see what the sort order is on the My Projects page
#### Details
This issue needs to implement two changes:
1. Add a sort icon to all the columns that have an active sort
2. Add a number next to the sort icon on all columns that have an active sort to indicate the sort order
Currently
- the icon only shows up on the last sort selected but it should show up on all sorts selected.
After the Changes
Default sort on 'Last Saved' showing icon and number
This is an example of multiple sorts showing both the icon and number
Notes
- This issue just covers the My Projects page. There will be separate issues to implement this on the other pages with tables (Manage Submissions, Submissions, Security)
- Only sorts get the order numbers because sorts are applied in order with the most recent sort added as sort 1. This involves no change to the filters as filters are still indicated by the underline and they don't get numbers because there is no order.
### Action Items
- [ ] Assign yourself to the development issue.
- [ ] Move the development issue from the Prioritized Backlog to In Progress.
- [ ] Development Actions
- [ ] Study the Design Issue comment (listed below) and resolve any questions about the design.
- [ ] Ideally, the solution you come up should use components that can be re-used on the Submissions and Manage Submissions pages, and possibly the Accounts, Archived Accounts, and Archived Accounts pages as well.
- [ ] Create a PR
- [ ] Create a new slide (or edit one if it already exists) in staging and add the before and after images
- [ ] Once the PR has been approved, use it to close this issue. If there is no PR is associated with this issue, close this issue after lead signoff.
### Resources/Instructions
- Design details: link to comment in GitHub issue with final designs: https://github.com/hackforla/tdm-calculator/issues/1999#issuecomment-5182454617
- Design mockups: [link to Ready for Dev section in the related Figma page](https://www.figma.com/design/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?node-id=32037-15158&t=97oJeKqsfPvzKqlC-0)
#### Staging and Release decks
- [Staging Deck](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg/)
- [Staging slide, 3225](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg/edit?slide=id.g3e31f6817d5_3_34#slide=id.g3e31f6817d5_3_34)
- Release Deck
- [2025-MM-DD Release deck, slide ISSUE NUMBER]
Contributor guide
Research direction
Start at the My Projects page and review the final designs in the linked Design Issue comment and Figma mockups. Trace the existing multi-column sorting indicators, then implement visible sort icons and order numbers for every active sort while leaving filter indicators unchanged; verify the result with the linked staging slide images.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100