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">
  {% 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="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"
           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="bs collapse transactions-divider-collapse overflow-visible isolation-auto" 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="flex 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 %}

  {# 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>