Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor WasteLineTable display #622

Closed
dpgraham4401 opened this issue Oct 26, 2023 · 2 comments · Fixed by #680
Closed

Refactor WasteLineTable display #622

dpgraham4401 opened this issue Oct 26, 2023 · 2 comments · Fixed by #680
Assignees
Labels
challenge An issue that represents a particular challenge and may not be straightforward to implement client Related to front end workings (React/Redux) enhancement New feature or enhancement

Comments

@dpgraham4401
Copy link
Member

dpgraham4401 commented Oct 26, 2023

🚀 Feature Request

We recently refactored the table of transporters to a list of cards that use the auto-animate library for UI improvement. We should do something similar with waste line information (just below). The new transporters list looks like the following.

image

The Row Action items (move up, move down, remove) (see Transporter Table equivalent here) were moved from 3 distinct (poorly formatted) buttons to a dropdown.

image

The user can drill down for additional information by using the accordion to display more information, like below. This has the added benefit of only showing what the user needs initially, and more information can be added to the accordion when needed/desired.

image

A PR that closes this issue will employ unit tests that show the feature is functioning as expected. The wasteline list should follow the below expected behavior.

  1. Display a card for each waste line on a manifest
  2. each waste line renders a dropdown on the right with the available actions the user can take on a waste line
    • edit
    • remove
  3. each waste line renders a button (chevron/arrow) that collapses/expands the accordion.
  4. When expanded the card should display the below info
    • The federal waste codes
    • the generator state waste codes
    • the TSDF state waste codes
    • The container type
    • the quantity (number of containers)
    • The waste description
  5. The list should use the auto-animate library to add transitions. (this will require that the key used for each item in the list will need to be independent of the order of the wasteline).

for reference the current waste line table looks like the below

image
@dpgraham4401 dpgraham4401 added the enhancement New feature or enhancement label Oct 26, 2023
@github-project-automation github-project-automation bot moved this to 🆕 ToDo in Haztrak Oct 26, 2023
@dpgraham4401 dpgraham4401 added client Related to front end workings (React/Redux) challenge An issue that represents a particular challenge and may not be straightforward to implement labels Oct 26, 2023
@ayobamiseun
Copy link
Contributor

Let me work on this.

@dpgraham4401
Copy link
Member Author

dpgraham4401 commented Jan 10, 2024

Hey @ayobamiseun, I'm going to go ahead and implement this feature since it's been a few months and this is blocking issue #677 (i'd like to have the planned UI refactoring done before we start writing new functionality into it).

let me know if there's something else you'd like to work on, we also appreciate your PRs.

@github-project-automation github-project-automation bot moved this from 🆕 ToDo to ✅ Done in Haztrak Jan 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
challenge An issue that represents a particular challenge and may not be straightforward to implement client Related to front end workings (React/Redux) enhancement New feature or enhancement
Projects
No open projects
Status: Done
Development

Successfully merging a pull request may close this issue.

2 participants