wip: implementing the tabbed filter for standard resources

- it is filtering Featured resources too and it shouldn't. Fix.

3 files changed, 53 insertions, 21 deletions

diff --git a/pyblackbird_cc/resources/views.py b/pyblackbird_cc/resources/views.py
index 04c8b2b..4df7208 100644
--- a/pyblackbird_cc/resources/views.py
+++ b/pyblackbird_cc/resources/views.py
@@ -17,7 +17,7 @@ from django.shortcuts import render
 from . import services
 from .forms import ResourceCreateForm, ResourceUpdateThumbnailsForm, ResourceUpdatePDFsForm
 from .forms import ResourceUpdateMetadataForm
-from .models import PDFPageSnapshot, ResourceSubcategory
+from .models import PDFPageSnapshot, ResourceSubcategory, ResourceCategory
 from .models import PDFResource
 from .models import Resource
 from .s3 import get_presigned_obj_url, upload_files_to_s3, upload_to_s3, upload_snapshotted_pages_to_s3
@@ -118,13 +118,27 @@ def _extract_metadata_from_resource(resource_obj) -> ResourceInfo | None:
 @login_required
 def index(request):
     resource_objs = Resource.objects.all()
+    categories = ResourceCategory.objects.all()
+    category = request.GET.get('category', 'all')
+
+    if category != 'all':
+        resource_objs = resource_objs.filter(main_resource_category__name=category)
+
     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)
+
+    # Create a separate queryset for Featured resources
     featured_resources = [r for r in resource_list if r.feature_slot]
     featured_resources = sorted(featured_resources, key=lambda resource: resource.feature_slot)
-    context = {"page_obj": page_obj, "resource_list": resource_list, "featured_resources": featured_resources}
+
+    context = {
+        "page_obj": page_obj,
+        "categories": categories,
+        "featured_resources": featured_resources,
+        "selected_category": category,
+    }
     return render(request, "resources/resource_list.html", context)
 
 
diff --git a/pyblackbird_cc/templates/resources/resource_card_standard.html b/pyblackbird_cc/templates/resources/resource_card_standard.html
index bdc3325..68ea0dc 100644
--- a/pyblackbird_cc/templates/resources/resource_card_standard.html
+++ b/pyblackbird_cc/templates/resources/resource_card_standard.html
@@ -2,9 +2,10 @@
 {% load markdown_extras %}
 
 <!-- Card 1 -->
-<div class="col-md-6 mb-3">
 
-    <div class="card mx-2 mt-2 my-card-shadow-sm" style="border-color: {{ resource.main_resource_category_colour_css_class }}; border-width: 1px;" onmouseover="this.classList.add('my-card-shadow-lg')" onmouseout="this.classList.remove('my-card-shadow-lg')">
+<div class="card mx-2 mt-2 my-card-shadow-sm"
+     style="border-color: {{ resource.main_resource_category_colour_css_class }}; border-width: 1px;"
+     onmouseover="this.classList.add('my-card-shadow-lg')" onmouseout="this.classList.remove('my-card-shadow-lg')">
     <div class="row g-0">
         <div class="col-4">
             <img class="img-fluid rounded-start"
@@ -15,7 +16,8 @@
             <div class="card-body">
                 <div class="d-flex flex-row justify-content-start align-items-center">
                     <h5 class="card-title"><a
-                            href="{% url 'resources:resource_detail' resource_id=resource.id %}">{{ resource.name }}</a></h5>
+                            href="{% url 'resources:resource_detail' resource_id=resource.id %}">{{ resource.name }}</a>
+                    </h5>
                 </div>
                 <div class="d-flex flex-row justify-content-start align-items-center mt-2">
                     <span class="badge bg-secondary me-2">{{ resource.age_range }}</span>
@@ -44,6 +46,5 @@
             </div>
         {% endif %}
     </div>
-</div>
 
 </div>
\ No newline at end of file
diff --git a/pyblackbird_cc/templates/resources/resource_list.html b/pyblackbird_cc/templates/resources/resource_list.html
index 2ef0d48..5611bca 100644
--- a/pyblackbird_cc/templates/resources/resource_list.html
+++ b/pyblackbird_cc/templates/resources/resource_list.html
@@ -2,7 +2,7 @@
 {% load static %}
 {% load markdown_extras %}
 {% block title %}
-    Joanna Lemon Learning - Resource List
+    Alphabet Learning - Resource List
 {% endblock title %}
 {% block content %}
 
@@ -11,6 +11,7 @@
     </div>
 
     {# featured resources #}
+{#    TODO fix the tabbed navbar also fetching the selected Featured resources#}
     {% if featured_resources %}
         <div class="row my-4 text-center">
             <h5 class="display-6">Featured resources</h5>
@@ -19,11 +20,11 @@
         <div class="row">
         {% for featured_resource in featured_resources %}
             {% if featured_resources|length == 1 %}
-                <div class="col-lg-12 col-md-12 col-sm-12 mb-4">
+                <div class="col-lg-12 col-md-12 col-sm-12 mb-4 resource-card">
             {% elif featured_resources|length == 2 %}
-                <div class="col-lg-6 col-md-6 col-sm-12 mb-4">
+                <div class="col-lg-6 col-md-6 col-sm-12 mb-4 resource-card">
             {% elif featured_resources|length == 3 %}
-                <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
+                <div class="col-lg-4 col-md-6 col-sm-12 mb-4 resource-card">
             {% endif %}
         {% include "resources/resource_card_featured.html" with resource=featured_resource %}
         </div>
@@ -33,20 +34,36 @@
         <p>There are no featured resources</p>
     {% endif %}
 
-{# standard resources #}
-{% if page_obj.object_list %}
+    {# standard resources #}
     <div class="row my-4 text-center">
         <div class="col">
             <h5 class="display-6">Standard resources</h5>
         </div>
     </div>
 
-    <div class="d-flex flex-row flex-wrap">
+    <!-- Tabbed navigation bar for filtering -->
+    <ul class="nav nav-tabs mb-4" id="resourceTabs" role="tablist">
+        <li class="nav-item">
+            <a class="nav-link {% if selected_category == 'all' %}active{% endif %}" href="?category=all">All</a>
+        </li>
+        {% for category in categories %}
+            <li class="nav-item">
+                <a class="nav-link {% if selected_category == category.name %}active{% endif %}"
+                   href="?category={{ category.name }}">{{ category.name|title }}</a>
+            </li>
+        {% endfor %}
+    </ul>
+
+
+    <div class="row">
         {% for resource in page_obj.object_list %}
-            {% include "resources/resource_card_standard.html" with resource=resource %}
+            <div class="col-md-6 mb-4" data-type="{{ resource.main_resource_category_name }}">
+                {% include "resources/resource_card_standard.html" with resource=resource %}
+            </div>
         {% endfor %}
     </div>
 
+    {# Pagination #}
     {% if page_obj.has_other_pages %}
         <div class="row my-4">
             <div class="col">
@@ -54,7 +71,8 @@
                     <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>
+                                <a class="page-link" href="?page=
+                                        {{ page_obj.previous_page_number }}{% if selected_category != 'all' %}&category={{ selected_category }}{% endif %}">Previous</a>
                             </li>
                         {% else %}
                             <li class="page-item disabled">
@@ -69,14 +87,16 @@
                                 </li>
                             {% else %}
                                 <li class="page-item">
-                                    <a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a>
+                                    <a class="page-link" href="?page=
+                                            {{ page_num }}{% if selected_category != 'all' %}&category={{ selected_category }}{% endif %}">{{ 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>
+                                <a class="page-link" href="?page=
+                                        {{ page_obj.next_page_number }}{% if selected_category != 'all' %}&category={{ selected_category }}{% endif %}">Next</a>
                             </li>
                         {% else %}
                             <li class="page-item disabled">
@@ -88,7 +108,4 @@
             </div>
         </div>
     {% endif %}
-{% else %}
-    <p>There are no resources</p>
-{% endif %}
-{% endblock content %}
\ No newline at end of file
+{% endblock content %}