Added pagination to the resource list page

2 files changed, 50 insertions, 4 deletions

diff --git a/pyblackbird_cc/resources/views.py b/pyblackbird_cc/resources/views.py
index eecb7cd..04c8b2b 100644
--- a/pyblackbird_cc/resources/views.py
+++ b/pyblackbird_cc/resources/views.py
@@ -7,6 +7,7 @@ from dataclasses import dataclass
 from django.conf import settings
 from django.contrib import messages
 from django.contrib.auth.decorators import login_required
+from django.core.paginator import Paginator
 from django.db import IntegrityError
 from django.db import transaction
 from django.shortcuts import get_object_or_404
@@ -118,9 +119,12 @@ def _extract_metadata_from_resource(resource_obj) -> ResourceInfo | None:
 def index(request):
     resource_objs = Resource.objects.all()
     resource_list = [_extract_metadata_from_resource(r) for r in resource_objs]
+    paginator = Paginator(resource_list, 20)
+    page_number = request.GET.get('page')
+    page_obj = paginator.get_page(page_number)
     featured_resources = [r for r in resource_list if r.feature_slot]
     featured_resources = sorted(featured_resources, key=lambda resource: resource.feature_slot)
-    context = {"resource_list": resource_list, "featured_resources": featured_resources}
+    context = {"page_obj": page_obj, "resource_list": resource_list, "featured_resources": featured_resources}
     return render(request, "resources/resource_list.html", context)
 
 
diff --git a/pyblackbird_cc/templates/resources/resource_list.html b/pyblackbird_cc/templates/resources/resource_list.html
index cfe5ba3..2ef0d48 100644
--- a/pyblackbird_cc/templates/resources/resource_list.html
+++ b/pyblackbird_cc/templates/resources/resource_list.html
@@ -7,7 +7,7 @@
 {% block content %}
 
     <div class="row my-4">
-            {% include "resources/admin_bar.html" %}
+        {% include "resources/admin_bar.html" %}
     </div>
 
     {# featured resources #}
@@ -34,7 +34,7 @@
     {% endif %}
 
 {# standard resources #}
-{% if resource_list %}
+{% if page_obj.object_list %}
     <div class="row my-4 text-center">
         <div class="col">
             <h5 class="display-6">Standard resources</h5>
@@ -42,10 +42,52 @@
     </div>
 
     <div class="d-flex flex-row flex-wrap">
-        {% for resource in resource_list %}
+        {% for resource in page_obj.object_list %}
             {% include "resources/resource_card_standard.html" with resource=resource %}
         {% endfor %}
     </div>
+
+    {% if page_obj.has_other_pages %}
+        <div class="row my-4">
+            <div class="col">
+                <nav aria-label="Page 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 }}">Previous</a>
+                            </li>
+                        {% else %}
+                            <li class="page-item disabled">
+                                <span class="page-link">Previous</span>
+                            </li>
+                        {% endif %}
+
+                        {% for page_num in page_obj.paginator.page_range %}
+                            {% if page_obj.number == page_num %}
+                                <li class="page-item active">
+                                    <span class="page-link">{{ page_num }}</span>
+                                </li>
+                            {% else %}
+                                <li class="page-item">
+                                    <a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a>
+                                </li>
+                            {% endif %}
+                        {% endfor %}
+
+                        {% if page_obj.has_next %}
+                            <li class="page-item">
+                                <a class="page-link" href="?page={{ page_obj.next_page_number }}">Next</a>
+                            </li>
+                        {% else %}
+                            <li class="page-item disabled">
+                                <span class="page-link">Next</span>
+                            </li>
+                        {% endif %}
+                    </ul>
+                </nav>
+            </div>
+        </div>
+    {% endif %}
 {% else %}
     <p>There are no resources</p>
 {% endif %}