WYGIWYH/app/templates/transactions/fragments/list_all.html

{% load natural %}
{% load i18n %}

{% regroup page_obj by date|customnaturaldate as transactions_by_date %}

<div id="transactions-list">
  {% for x in transactions_by_date %}
    <div id="{{ x.grouper|slugify }}" class="transactions-divider"
         _="on htmx:afterSwap from #transactions if sessionStorage.getItem(my id) is null then sessionStorage.setItem(my id, 'true')">
      <div class="tw:mt-3 tw:mb-1 tw:w-full tw:text-base tw:border-b tw:border-base-300 tw:bg-base-100 transactions-divider-title">
        <a class="tw:no-underline tw:inline-block tw:w-full"
           role="button"
           data-bs-toggle="collapse"
           data-bs-target="#c-{{ x.grouper|slugify }}-collapse"
           id="c-{{ x.grouper|slugify }}-collapsible"
           aria-expanded="false"
           aria-controls="c-{{ x.grouper|slugify }}-collapse">
        {{ x.grouper }}
        </a>
      </div>
      <div class="tw:collapse transactions-divider-collapse" id="c-{{ x.grouper|slugify }}-collapse"
           _="on shown.bs.collapse sessionStorage.setItem(the closest parent @id, 'true')
              on hidden.bs.collapse sessionStorage.setItem(the closest parent @id, 'false')
              on htmx:afterSettle from #transactions or toggle
                set state to sessionStorage.getItem(the closest parent @id)
                if state is 'true' or state is null
                  add .show to me
                  set @aria-expanded of #c-{{ x.grouper|slugify }}-collapsible to true
                else
                  remove .show from me
                  set @aria-expanded of #c-{{ x.grouper|slugify }}-collapsible to false
                end
              on show
                add .show to me
                set @aria-expanded of #c-{{ x.grouper|slugify }}-collapsible to true">
        <div class="tw:flex tw:flex-col">
        {% for transaction in x.list %}
          <c-transaction.item
            :transaction="transaction"></c-transaction.item>
        {% endfor %}
        </div>
      </div>
    </div>
  {% empty %}
    <c-msg.empty
        title="{% translate "No transactions found" %}"
        subtitle="{% translate "Try adding one" %}"></c-msg.empty>
  {% endfor %}

  {% if page_obj.has_other_pages %}
    <div class="tw:mt-auto">
      <input value="{{ page_obj.number }}" name="page" type="hidden" id="page">

      <nav aria-label="{% translate 'Page navigation' %}">
        <ul class="tw:join tw:flex tw:justify-center tw:mt-5">
          <li>
            <a class="tw:join-item tw:btn tw:btn-sm {% if not page_obj.has_previous %}tw:btn-disabled{% endif %}"
               hx-get="{% if page_obj.has_previous %}{% url 'transactions_all_list' %}{% endif %}"
               hx-vals='{"page": 1}'
               hx-include="#filter, #order"
               hx-target="#transactions-list"
               aria-label="Primeira página"
               hx-swap="show:top">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
          {% for page_number in page_obj.paginator.page_range %}
            {% comment %}
                  This conditional allows us to display up to 3 pages before and after the current page
                  If you decide to remove this conditional, all the pages will be displayed

                  You can change the 3 to any number you want e.g
                  To display only 5 pagination items, change the 3 to 2 (2 before and 2 after the current page)
              {% endcomment %}
            {% if page_number <= page_obj.number|add:3 and page_number >= page_obj.number|add:-3 %}
              {% if page_obj.number == page_number %}
                <li>
                  <a class="tw:join-item tw:btn tw:btn-sm tw:btn-active">
                    {{ page_number }}
                  </a>
                </li>
              {% else %}
                <li>
                  <a class="tw:join-item tw:btn tw:btn-sm"
                     hx-get="{% url 'transactions_all_list' %}"
                     hx-vals='{"page": {{ page_number }}}'
                     hx-include="#filter, #order"
                     hx-target="#transactions-list"
                     hx-swap="show:top">
                    {{ page_number }}
                  </a>
                </li>
              {% endif %}
            {% endif %}
          {% endfor %}
          {% if page_obj.number|add:3 < page_obj.paginator.num_pages %}
            <li>
              <a class="tw:join-item tw:btn tw:btn-sm tw:btn-disabled"
                 aria-label="...">
                <span aria-hidden="true">...</span>
              </a>
            </li>
            <li>
              <a class="tw:join-item tw:btn tw:btn-sm"
                 hx-get="{% url 'transactions_all_list' %}" hx-target="#transactions-list"
                 hx-vals='{"page": {{ page_obj.paginator.num_pages }}}'
                 hx-include="#filter, #order"
                 hx-swap="show:top"
                 aria-label="Última página">
                <span aria-hidden="true">{{ page_obj.paginator.num_pages }}</span>
              </a>
            </li>
          {% endif %}
          <li>
            <a class="tw:join-item tw:btn tw:btn-sm {% if not page_obj.has_next %}tw:btn-disabled{% endif %}"
               hx-get="{% if page_obj.has_next %}{% url 'transactions_all_list' %}{% endif %}"
               hx-vals='{"page": {{ page_obj.paginator.num_pages }}}'
               hx-include="#filter, #order"
               hx-swap="show:top"
               hx-target="#transactions-list"
               aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  {% endif %}
  {#  Floating bar#}
  <c-ui.transactions-action-bar></c-ui.transactions-action-bar>

</div>