feat: add ordering selector to monthly_overview and all_transactions

This commit is contained in:
Herculino Trotta
2024-10-28 00:57:54 -03:00
parent 8c628718ff
commit 5aec7b840e
5 changed files with 102 additions and 54 deletions
@@ -103,25 +103,35 @@
<div class="col-12 col-xl-8 order-2 order-xl-1">
{# Filter transactions#}
<div class="row mb-1">
<div class="col-12">
<div class="col-sm-6 col-12">
<div class="dropdown">
<button type="button" class="btn btn-sm btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown"
aria-expanded="false" data-bs-auto-close="false">
<i class="fa-solid fa-filter fa-fw me-2"></i>{% translate 'Filter transactions' %}
</button>
<form hx-get="{% url 'monthly_transactions_list' month=month year=year %}" hx-trigger="change, submit, search"
hx-target="#transactions" id="filter" hx-indicator="#transactions"
class="dropdown-menu p-4 tw-w-full lg:tw-w-3/4"
_="install init_tom_select">
<form _="on change or submit or search trigger updated on window end
install init_tom_select"
id="filter"
class="dropdown-menu p-4 tw-min-w-full sm:tw-min-w-[30em] md:tw-min-w-[40em]">
{% crispy filter.form %}
</form>
</div>
</div>
<div class="col-sm-6 col-12 tw-content-center my-3 my-sm-0">
<div class="text-sm-end" _="on change trigger updated on window">
<label for="order">{% translate "Order by" %}</label>
<select class="tw-border-0 focus-visible:tw-outline-0 w-full pe-2 tw-leading-normal text-bg-tertiary tw-font-medium rounded" name="order" id="order">
<option value="default">Default</option>
<option value="older">Oldest first</option>
<option value="newer">Newest first</option>
</select>
</div>
</div>
</div>
<div id="transactions"
class="show-loading"
hx-get="{% url 'monthly_transactions_list' month=month year=year %}"
hx-trigger="load, updated from:window" hx-include="#filter"></div>
hx-trigger="load, updated from:window" hx-include="#filter, #order"></div>
</div>
</div>
</div>