From 196bc96616affa8ce002d9d654e7358814cb6a64 Mon Sep 17 00:00:00 2001
From: Birger Schacht <birger.schacht@oeaw.ac.at>
Date: Wed, 13 Dec 2023 19:40:33 +0100
Subject: [PATCH] feat: improve listview pagination

This improves the pagination links below the table in the generic list
view. to make the template code smaller, we introducce a templatetag
`page_range` that uses the paginators get_elided_page_range to get a
list of useful pagination links.

Closes: #416
---
 .../apis_metainfo/templates/generic_list.html | 125 +++++++-----------
 apis_core/core/templatetags/apiscore.py       |   5 +
 2 files changed, 52 insertions(+), 78 deletions(-)

diff --git a/apis_core/apis_metainfo/templates/generic_list.html b/apis_core/apis_metainfo/templates/generic_list.html
index 89cc3a2e0..aa8e65c57 100644
--- a/apis_core/apis_metainfo/templates/generic_list.html
+++ b/apis_core/apis_metainfo/templates/generic_list.html
@@ -5,6 +5,7 @@
 {% load i18n %}
 {% load crispy_forms_field %}
 {% load crispy_forms_tags %}
+{% load apiscore %}
 
 {% block title %}Browse {{ class_name }}{% endblock %}
 
@@ -255,48 +256,59 @@ <h1>{{ data.title }}</h1>
         </div>
 
         {% block pagination.allpages %}
-          <div>
-            {% with table.page.object_list|length as count %}<p>Page total: {{ count }}</p>{% endwith %}
-          </div>
-          <ul class="pagination">
-
-            {% if table.paginator.page_range|length > 10 %}
-              {% if table.page.has_previous %}
-
-                {% block pagination.previous.goto %}
-                  <li class="previous">
-                    <a style="margin-right: 10px"
-                       href="{% querystring table.prefixed_page_field=table.page.previous_page_number %}">{% trans "Previous" %}</a>
-                  </li>
-                {% endblock pagination.previous.goto %}
+          <small>{{ table.page.object_list|length }} results per page</small>
+          <nav aria-label="Table navigation">
+            <ul class="pagination justify-content-center">
 
+              {% if page_obj.has_previous %}
+                <li class="page-item">
+                  <a class="page-link" href="?page={{ page_obj.previous_page_number }}">&laquo;</a>
+                </li>
+              {% else %}
+                <li class="disabled page-item">
+                  <span class="page-link">&laquo;</span>
+                </li>
               {% endif %}
 
-              {% if table.page.has_previous or table.page.has_next %}
+              {% page_range paginator=table.paginator number=table.page.number as page_range %}
+              {% for p in page_range %}
 
-                {% block pagination.cardinality %}
-                  {% blocktrans with table.page.number as current and table.paginator.num_pages as total %}
-                                            <p>Page {{ current }} of {{ total }}</p>
-                                        {% endblocktrans %}
-                {% endblock pagination.cardinality %}
-
-              {% endif %}
+                {% if page_obj.number == p %}
+                  <li class="active page-item">
+                    <span class="page-link">{{ p }} <span class="sr-only">(current)</span></span>
+                  </li>
+                {% else %}
 
-              {% if table.page.has_next %}
+                  {% if p == page_obj.paginator.ELLIPSIS %}
+                    <li class="page-item">
+                      <span class="page-link">{{ p }}</span>
+                    </li>
+                  {% else %}
+                    <li class="page-item">
+                      <a class="page-link"
+                         href="{% querystring table.prefixed_page_field=p %}">{{ p }}</a>
+                    </li>
+                  {% endif %}
+                {% endif %}
 
-                {% block pagination.next.goto %}
-                  <li class="next">
-                    <a style="margin-left: 10px"
-                       href="{% querystring table.prefixed_page_field=table.page.next_page_number %}"
-                       style="border-radius: 0px">{% trans "Next" %}</a>
-                  </li>
-                {% endblock pagination.next.goto %}
+              {% endfor %}
 
+              {% if page_obj.has_next %}
+                <li class="page-item">
+                  <a class="page-link" href="?page={{ page_obj.next_page_number }}">&raquo;</a>
+                </li>
+              {% else %}
+                <li class="disabled page-item">
+                  <span class="page-link">&raquo;</span>
+                </li>
               {% endif %}
 
             </ul>
-            <div class="form-group" style="width: 20%;">
-              <label for="goto">Go to page</label>
+          </nav>
+
+          {% if table.paginator.page_range|length > 10 %}
+            <div class="form-inline justify-content-center small">
+              <label for="goto" class="mr-3">Page</label>
               <select class="form-control"
                       id="goto"
                       onchange="javascript:location.href = this.value;">
@@ -305,57 +317,14 @@ <h1>{{ data.title }}</h1>
                 {% endfor %}
               </select>
             </div>
-          {% else %}
-
-            {% if table.page.has_previous %}
-
-              {% block pagination.previous %}
-                <li class="previous">
-                  <a style="margin-right: 10px"
-                     href="{% querystring table.prefixed_page_field=table.page.previous_page_number %}">{% trans "Previous" %}</a>
-                </li>
-              {% endblock pagination.previous %}
-
-            {% endif %}
-
-            {% for p in table.paginator.page_range %}
-
-              {% if p == table.page.number %}
-                <li>
-                  <a href="{% querystring table.prefixed_page_field=p %}"
-                     style="background-color:#007bff;
-                            border-color: #2e6da4;
-                            color: #ffffff;
-                            padding: 5px 10px 5px 10px">{{ p }}</a>
-                </li>
-              {% else %}
-                <li>
-                  <a href="{% querystring table.prefixed_page_field=p %}"
-                     style="padding: 5px 10px 5px 10px">{{ p }}</a>
-                </li>
-              {% endif %}
-
-            {% endfor %}
+          {% endif %}
 
-            {% if table.page.has_next %}
-
-              {% block pagination.next %}
-                <li class="next">
-                  <a style="margin-left: 10px"
-                     href="{% querystring table.prefixed_page_field=table.page.next_page_number %}">{% trans "Next" %}</a>
-                </li>
-              {% endblock pagination.next %}
+        {% endblock pagination.allpages %}
 
-            {% endif %}
-
-          </ul>
-        {% endif %}
-
-      {% endblock pagination.allpages %}
+      </div>
     </div>
   </div>
 </div>
-</div>
 
 {% if 'entities' in APPS %}{% endif %}
 
diff --git a/apis_core/core/templatetags/apiscore.py b/apis_core/core/templatetags/apiscore.py
index a171d68a5..e001c1a30 100644
--- a/apis_core/core/templatetags/apiscore.py
+++ b/apis_core/core/templatetags/apiscore.py
@@ -8,3 +8,8 @@
 @register.simple_tag
 def shared_url():
     return getattr(settings, "SHARED_URL", "/static/")
+
+
+@register.simple_tag
+def page_range(paginator, number):
+    return paginator.get_elided_page_range(number=number)