Display start/enddate and make sortable table #320
Conversation
| {% block inline_javascript %} | ||
| {{ block.super }} | ||
| <script> | ||
| function sortableTable() { |
There was a problem hiding this comment.
We could of course do this using jQuery datatables but that will add few JS dependencies. So this is done without any dependencies using AlpineJS.
|
@calellowitz FYI |
| @@ -3,6 +3,63 @@ | |||
|
|
|||
| {% block title %}{{ request.org }} - Opportunities{% endblock %} | |||
|
|
|||
| {% block inline_javascript %} | |||
| {{ block.super }} | |||
| <script> | |||
There was a problem hiding this comment.
Is there a way to make this more reusable, since we will likely need sortable columns in other tables
There was a problem hiding this comment.
Yeah, I thought of that, but didn't do it prematurely. We can take this out when we add another similar feature.
| @@ -15,19 +72,23 @@ <h1> Opportunities | |||
| </span> | |||
| </h1> | |||
| </div> | |||
| <div class="pb-4"> | |||
| <div class="pb-4" x-data="sortableTable()"> | |||
There was a problem hiding this comment.
This looks like it will only sort the items displayed, but for paginated data, you won't get the true first X items. I think this might need to be implemented like the paginations controls, to rerender the table, and fetch the data from the backend. That likely makes the final implementation simpler (since you won't need much js, just click functions that make ajax calls). Let me know if I am misunderstanding how this works.
There was a problem hiding this comment.
This looks like it will only sort the items displayed, but for paginated data, you won't get the true first X items.
Yes, that's right. This sorts client side data only. The server side sorting could be done, but it's entirely different approach and does need much rework. My understanding of the ticket was that they were looking for client side sorting.
| <table class="table border table-responsive"> | ||
| <thead class="table-light"> | ||
| <tr> | ||
| <th>Name</th> | ||
| <th @click="sortByColumn" role="button">Name <i class="bi bi-arrow-down-short"></i></th> | ||
| <th @click="sortByColumn" role="button">Start Date <i class="bi bi-arrow-down-short"></i></th> |
There was a problem hiding this comment.
Does the arrow switch direction when the columns are sorted in the opposite order?
There was a problem hiding this comment.
Not really, apparently that requires good amount of Javascript and CSS. Best handled by libraries such as datatable
|
@calellowitz I have updated the sorting to be done on server side. I have updated the screenshot too. |
| # Construct the URL with the new sorting parameter | ||
| url = f"{request.path}?sort={new_sort}" | ||
| if request.GET.get("page"): | ||
| url += f"&page={request.GET.get('page')}" |
There was a problem hiding this comment.
nit: if you change the sorting it should probably go back to page 1 (it is unintuitive to start on page 3 of a different sort)
There was a problem hiding this comment.
Good point 9dd2cd6120236f5672f3b9d678caf0434b5c9434
https://dimagi.atlassian.net/browse/CCCT-267
