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" class="show-loading">
  {% if late_transactions %}
  <div id="late-transactions" class="transactions-divider"
       x-data="{ open: sessionStorage.getItem('late-transactions') !== 'false' }"
       x-init="if (sessionStorage.getItem('late-transactions') === null) sessionStorage.setItem('late-transactions', 'true')">
      <div class="mt-3 mb-1 w-full border-b border-b-error/50 transactions-divider-title cursor-pointer">
        <a class="no-underline inline-block w-full text-error font-semibold"
           role="button"
           @click="open = !open; sessionStorage.setItem('late-transactions', open)"
           :aria-expanded="open">
        <i class="fa-solid fa-circle-exclamation me-1"></i>{% translate "late" %}
        </a>
      </div>
      <div class="transactions-divider-collapse overflow-visible isolation-auto"
           x-show="open"
           x-collapse>
        <div class="flex flex-col">
        {% for transaction in late_transactions %}
          <c-transaction.item
            :transaction="transaction"></c-transaction.item>
        {% endfor %}
        </div>
      </div>
    </div>
  {% endif %}

  {% for x in transactions_by_date %}
    <div id="{{ x.grouper|slugify }}" class="transactions-divider"
         x-data="{ open: sessionStorage.getItem('{{ x.grouper|slugify }}') !== 'false' }"
         x-init="if (sessionStorage.getItem('{{ x.grouper|slugify }}') === null) sessionStorage.setItem('{{ x.grouper|slugify }}', 'true')">
      <div class="mt-3 mb-1 w-full border-b border-b-base-content/30 transactions-divider-title cursor-pointer">
        <a class="no-underline inline-block w-full"
           role="button"
           @click="open = !open; sessionStorage.setItem('{{ x.grouper|slugify }}', open)"
           :aria-expanded="open">
        {{ x.grouper }}
        </a>
      </div>
      <div class="transactions-divider-collapse overflow-visible isolation-auto"
           x-show="open"
           x-collapse>
        <div class="flex flex-col">
        {% for transaction in x.list %}
          <c-transaction.item
            :transaction="transaction"></c-transaction.item>
        {% endfor %}
        </div>
      </div>
    </div>

  {% empty %}
    {% if not late_transactions %}
    <c-msg.empty
        title="{% translate "No transactions found" %}"
        subtitle="{% translate "Try adding one" %}"></c-msg.empty>
    {% endif %}
  {% endfor %}

  {# Floating bar #}
  <c-ui.transactions-action-bar></c-ui.transactions-action-bar>

  {% if page_obj.has_other_pages %}
    <div class="my-3">
      <input value="{{ page_obj.number }}" name="page" type="hidden" id="page">

      <nav aria-label="{% translate 'Page navigation' %}">
        <ul class="join flex justify-center mt-5">
          <li>
            <a class="join-item btn btn-sm {% if not page_obj.has_previous %}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="join-item btn btn-sm btn-active">
                    {{ page_number }}
                  </a>
                </li>
              {% else %}
                <li>
                  <a class="join-item btn btn-sm"
                     hx-get="{% url 'transactions_all_list' %}"
                     hx-vals='{"page": {{ page_number }}}'
                     hx-include="#filter, #order"
                     hx-target="#transactions-list"
                     hx-swap="outerHTML show:top"
                     hx-indicator="#transactions-list">
                    {{ page_number }}
                  </a>
                </li>
              {% endif %}
            {% endif %}
          {% endfor %}
          {% if page_obj.number|add:3 < page_obj.paginator.num_pages %}
            <li>
              <a class="join-item btn btn-sm btn-disabled"
                 aria-label="...">
                <span aria-hidden="true">...</span>
              </a>
            </li>
            <li>
              <a class="join-item btn 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="outerHTML show:top"
                 hx-indicator="#transactions-list"
                 aria-label="Última página">
                <span aria-hidden="true">{{ page_obj.paginator.num_pages }}</span>
              </a>
            </li>
          {% endif %}
          <li>
            <a class="join-item btn btn-sm {% if not page_obj.has_next %}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="outerHTML show:top"
               hx-target="#transactions-list"
               hx-indicator="#transactions-list"
               aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  {% endif %}
</div>