⛏️ Spike: Datatable functionality through Hotwire

[schoork]

What type(s) of user does this feature affect?

Description

Currently we use the datatables jquery plugin to make some tables searchable and sortable on multiple columns. While these work well, they cause two major problems:

1. The code is harder to maintain. For some tables, the html is rendered by javascript (app/javascript/src/dashboard.js) and a requires a companion datatables class (`app/datatables/reimbursement_datatable.rb).
2. The code is harder to test. Since the table data is loaded asynchronously, specs need to take this into account. Specs that pass locally, might not pass in Docker because they don't have appropriate waits for the table to load.

The goal of this issue is to proof of concept (POC) a way to get the same functionality from a Hotwire, synchronous approach. Keep in mind that modularity is key here, meaning that it should be fairly simple

Verifications

Take a current datatable (/volunteers, /supervisors, or /reimbursements) and recreate it's current functionality with Hotwire, ensuring the following:

1. Table has search bar that displays filtered results without reloading the page
2. Table has sorting chevrons that sort results without reloading the page
3. Table loads results synchronously with the page
4. Table loads no more than 20 results at a time (this should be changeable by the user)
5. No references to the table are left in app/javascript/src/dashboard.js
6. Table row html is rendered in html templates
7. All current tests pass (or are refactored to pass as needed)

Implementation Details

I highly recommend Pagy for pagination of results. It's fast and easy.

Screenshots of current behavior, if any

How to access the QA site

Login Details:
Link to QA site

Login Emails:

• [email protected] view site as a volunteer
• [email protected] view site as a supervisor
• [email protected] view site as an admin
• [email protected] view site as an all casa admin
  • go to /all_casa_admins/sign_in

password for all users: 12345678

Questions? Join Slack!

We highly recommend that you join us in slack #casa channel to ask questions quickly. And discord for office hours (currently Tuesday 5-7pm Pacific), stakeholder news, and upcoming new issues.

[jonesdylanbates]

I would like to help with this issue!

[schoork]

@jonesdylanbates Let's make sure this is a draft PR when submitted, since it's a POC.

[github-actions[bot]]

This issue has been inactive for 250 hours (10.42 days) and will be unassigned after 110 more hours (4.58 days). If you have questions, please

If you are still working on this, comment here to tell the bot to give you more time

[jonesdylanbates]

I need more time.

[github-actions[bot]]

This issue has been inactive for 240 hours (10.00 days) and will be unassigned after 120 more hours (5.00 days). If you have questions, please

If you are still working on this, comment here to tell the bot to give you more time

[github-actions[bot]]

This issue has been inactive for 360 hours (15.00 days) and is past the limit of 360 hours (15.00 days) so is being unassigned.You’ve just been unassigned from this ticket due to inactivity – but feel free to pick it back up (or a new one!) in the future! Thank you again for your contribution to this project.

[github-actions[bot]]

This issue has been open without changes for a long time! What's up?

[compwron]

This would be very cool if we could get it working!

[compwron]

I still think we should do this