hackforla / hackforla/tdm-calculator

Dev: Implement sorting visibility by multiple columns on My Projects page

Open
#3,225 3 comments 0 reactions 0 assignees View on GitHub
deck: staging level: hard p-feature: My Projects priority: MUST HAVE role: front-end size: 5pt
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 Image 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
Image

This is an example of multiple sorts showing both the icon and number
Image

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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.