Files
WYGIWYH/app/templates/transactions/pages/transactions.html
Herculino Trotta 6955294283 feat(datepicker): drop native datepickers in favor of AirDatePicker for better compatibility
As Firefox (still) doesn't support month input type
2025-01-14 23:47:03 -03:00

58 lines
2.5 KiB
HTML

{% extends 'layouts/base.html' %}
{% load crispy_forms_tags %}
{% load i18n %}
{% block title %}{% translate 'Transactions' %}{% endblock %}
{% block content %}
<div class="container-fluid px-md-3 py-3 column-gap-5">
<div class="row gx-xl-4 gy-3">
<div class="col-12 col-xl-3 order-0 order-xl-0">
{# Filter transactions#}
<div class="row mb-1">
<div class="col-12">
<div class="d-flex mb-3 align-self-center">
<div class="me-auto"><h4><i class="fa-solid fa-filter me-2"></i>{% translate 'Filter' %}</h4></div>
<div class="align-self-center">
<a href="{% url 'transactions_all_index' %}" type="button" class="btn btn-outline-danger btn-sm"
hx-target="body" hx-boost="true">{% translate 'Clear' %}</a>
</div>
</div>
<hr>
<form hx-get="{% url 'transactions_all_list' %}" hx-trigger="change, submit, search"
hx-target="#transactions" id="filter" hx-indicator="#transactions"
_="install init_tom_select
install init_datepicker">
{% crispy filter.form %}
</form>
</div>
</div>
</div>
<div class="col-12 col-xl-6 order-2 order-xl-1">
<div class="text-end tw-justify-end tw-flex tw-text-sm mb-3">
<div class="tw-content-center" _="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">{% translate 'Default' %}</option>
<option value="older">{% translate 'Oldest first' %}</option>
<option value="newer">{% translate 'Newest first' %}</option>
</select>
</div>
</div>
<div id="transactions"
class="show-loading"
hx-get="{% url 'transactions_all_list' %}"
hx-trigger="load, updated from:window" hx-include="#filter, #page, #order">
</div>
</div>
<div class="col-12 col-xl-3 order-1 order-xl-2">
<div id="transactions"
class="show-loading"
hx-get="{% url 'transactions_all_summary' %}"
hx-trigger="load, updated from:window, change from:#filter, submit from:#filter, search from:#filter" hx-include="#filter">
</div>
</div>
</div>
</div>
{% endblock %}