add pagination

games/purchaseviews.py

@@ -1,6 +1,7 @@
 from typing import Any
 
 from django.contrib.auth.decorators import login_required
+from django.core.paginator import Paginator
 from django.db.models.manager import BaseManager
 from django.http import HttpRequest, HttpResponse
 from django.shortcuts import render
@@ -14,9 +15,16 @@ from games.views import dateformat
 @login_required
 def list_purchases(request: HttpRequest) -> HttpResponse:
     context: dict[Any, Any] = {}
-    purchases: BaseManager[Purchase] = Purchase.objects.all()[0:10]
+    paginator = Paginator(Purchase.objects.order_by("created_at"), 10)
+    page_number = request.GET.get("page", 1)
+    page_obj = paginator.get_page(page_number)
+    purchases = page_obj.object_list
     context = {
         "title": "Manage purchases",
+        "page_obj": page_obj,
+        "elided_page_range": page_obj.paginator.get_elided_page_range(
+            page_number, on_each_side=1, on_ends=1
+        ),
         "data": {
             "columns": [
                 "Name",

games/static/base.css

@@ -1370,6 +1370,10 @@ input:checked + .toggle-bg {
   margin-bottom: 0.75rem;
 }
 
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
 .mb-8 {
   margin-bottom: 2rem;
 }
@@ -1382,6 +1386,10 @@ input:checked + .toggle-bg {
   margin-right: 1rem;
 }
 
+.ms-0 {
+  margin-inline-start: 0px;
+}
+
 .mt-2 {
   margin-top: 0.5rem;
 }
@@ -1451,6 +1459,10 @@ input:checked + .toggle-bg {
   height: 1.5rem;
 }
 
+.h-8 {
+  height: 2rem;
+}
+
 .h-9 {
   height: 2.25rem;
 }
@@ -1639,6 +1651,12 @@ input:checked + .toggle-bg {
   gap: 1.25rem;
 }
 
+.-space-x-px > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(-1px * var(--tw-space-x-reverse));
+  margin-left: calc(-1px * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-x-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.25rem * var(--tw-space-x-reverse));
@@ -1885,6 +1903,10 @@ input:checked + .toggle-bg {
   padding-top: 0.5rem;
 }
 
+.pt-4 {
+  padding-top: 1rem;
+}
+
 .pt-8 {
   padding-top: 2rem;
 }
@@ -1966,6 +1988,10 @@ input:checked + .toggle-bg {
   font-weight: 500;
 }
 
+.font-normal {
+  font-weight: 400;
+}
+
 .font-semibold {
   font-weight: 600;
 }
@@ -1982,6 +2008,10 @@ input:checked + .toggle-bg {
   line-height: 2.25rem;
 }
 
+.leading-tight {
+  line-height: 1.25;
+}
+
 .text-blue-600 {
   --tw-text-opacity: 1;
   color: rgb(28 100 242 / var(--tw-text-opacity));
@@ -2474,6 +2504,11 @@ textarea:disabled:is(.dark *) {
   color: rgb(75 85 99 / var(--tw-text-opacity));
 }
 
+.hover\:text-gray-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
 .hover\:text-gray-900:hover {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
@@ -2845,10 +2880,18 @@ textarea:disabled:is(.dark *) {
 }
 
 @media (min-width: 768px) {
+  .md\:mb-0 {
+    margin-bottom: 0px;
+  }
+
   .md\:block {
     display: block;
   }
 
+  .md\:inline {
+    display: inline;
+  }
+
   .md\:w-auto {
     width: auto;
   }
@@ -2904,31 +2947,3 @@ textarea:disabled:is(.dark *) {
   border-start-end-radius: 0.5rem;
   border-end-end-radius: 0.5rem;
 }
-
-.\[\&_td\:first-of-type\]\:whitespace-nowrap td:first-of-type {
-  white-space: nowrap;
-}
-
-.\[\&_td\:first-of-type\]\:px-6 td:first-of-type {
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-}
-
-.\[\&_td\:first-of-type\]\:py-4 td:first-of-type {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
-.\[\&_td\:first-of-type\]\:font-medium td:first-of-type {
-  font-weight: 500;
-}
-
-.\[\&_td\:first-of-type\]\:text-gray-900 td:first-of-type {
-  --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity));
-}
-
-.\[\&_td\:first-of-type\]\:dark\:text-white:is(.dark *) td:first-of-type {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}

games/templates/components/simple_table.html

@@ -1,4 +1,5 @@
-<div class="relative overflow-x-auto">
+<div class="relative overflow-x-auto shadow-md sm:rounded-lg"
+     hx-boost="false">
     <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
         <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
             <tr>
@@ -11,4 +12,37 @@
             {% endfor %}
         </tbody>
     </table>
+    <nav class="flex items-center flex-column flex-wrap md:flex-row justify-between pt-4"
+         aria-label="Table navigation">
+        <span class="text-sm font-normal text-gray-500 dark:text-gray-400 mb-4 md:mb-0 block w-full md:inline md:w-auto">Showing <span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.paginator.page_range.start }}-{{ page_obj.paginator.page_range.stop }}</span> of <span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.paginator.count }}</span></span>
+        <ul class="inline-flex -space-x-px rtl:space-x-reverse text-sm h-8">
+            <li>
+                {% if page_obj.has_previous %}
+                    <a href="?page={{ page_obj.previous_page_number }}"
+                       class="flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Previous</a>
+                {% else %}
+                    <a aria-current="page"
+                       class="cursor-not-allowed flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-s-lg dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400">Previous</a>
+                {% endif %}
+                {% for page in elided_page_range %}
+                    <li>
+                        {% if page != page_obj.number %}
+                            <a href="?page={{ page }}"
+                               class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">{{ page }}</a>
+                        {% else %}
+                            <a aria-current="page"
+                               class="cursor-not-allowed flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400">{{ page }}</a>
+                        {% endif %}
+                    </li>
+                {% endfor %}
+                {% if page_obj.has_next %}
+                    <a href="?page={{ page_obj.next_page_number }}"
+                       class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Next</a>
+                {% else %}
+                    <a aria-current="page"
+                       class="cursor-not-allowed flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400">Next</a>
+                {% endif %}
+            </li>
+        </ul>
+    </nav>
 </div>

games/templates/list_purchases.html

@@ -4,5 +4,5 @@
     {{ title }}
 {% endblock title %}
 {% block content %}
-    {% simple_table columns=data.columns rows=data.rows %}
+    {% simple_table columns=data.columns rows=data.rows page_obj=page_obj elided_page_range=elided_page_range %}
 {% endblock content %}