Fix issue creativecommons#227 - Improve the case table with sorting a…

…nd pagination
mailsg · Oct 21, 2024 · 7c1d9e6 · 7c1d9e6
1 parent 475900b
commit 7c1d9e6
Show file tree

Hide file tree

Showing 3 changed files with 152 additions and 4 deletions.
diff --git a/legal_db/static/listing.js b/legal_db/static/listing.js
@@ -21,3 +21,21 @@ tags.forEach(tag => {
         form.submit();
     });
 });
+
+let scrollToPagination = false;
+document.addEventListener('DOMContentLoaded', function() {
+  const paginationLinks = document.querySelectorAll('.pagination-link');
+
+  paginationLinks.forEach(function(link) {
+    link.addEventListener('click', function(event) {
+      scrollToPagination = true;
+    });
+  });
+
+  if (scrollToPagination) {
+    const paginationList = document.querySelector('.pagination-link');
+    if (paginationList) {
+      paginationList.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+  }
+});
diff --git a/legal_db/templates/legal_db/case/index.html b/legal_db/templates/legal_db/case/index.html
@@ -2,6 +2,55 @@
 {% load static %}
 
 {% block body_content %}
+<style>
+  .pagination {
+    display: flex;
+    justify-content: center;
+    padding: 8px 0;
+  }
+
+  .pagination-list {
+    display: flex;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .pagination-link {
+    font-size: 12px;
+    padding: 4px 8px;
+    margin: 0 2px;
+    background-color: #f8f9fa;
+    color: #555;
+    border: 2px solid orangered;
+    border-radius: 3px;
+    text-decoration: none;
+    transition: background-color 0.2s, color 0.2s;
+  }
+
+  .pagination-link:hover {
+    background-color: orangered;
+    color: white;
+    border: 2px solid orangered;
+  }
+
+  .pagination-link.is-current {
+    background-color: orangered;
+    color: #fff;
+    border-radius: 15px;
+    border-color: orangered;
+  }
+
+  .pagination-link.is-rounded {
+    border-radius: 15px;
+  }
+
+  .pagination-link:disabled {
+    pointer-events: none;
+    color: #ccc;
+    background-color: #f0f0f0;
+  }
+</style>
 <section class="hero case">
   <div class="container">
     {% include "legal_db/partials/_breadcrumb.html" %}
@@ -45,10 +94,49 @@ <h2 class="card-title">Contribute</h2>
       <table class="table is-bordered is-striped is-fullwidth">
         <thead>
           <tr>
-            <th>Country</th>
-            <th>Case name</th>
+            <th>
+              <a href="?sort=country&direction={% if current_sort == 'country' and direction == 'asc' %}desc{% else %}asc{% endif %}{% if request.GET.keywords %}&keywords={{ request.GET.keywords }}{% endif %}">
+                Country 
+                {% if current_sort == 'country' %}
+                  <span class="icon">
+                    {% if direction == 'asc' %}
+                      ↑
+                    {% else %}
+                      ↓
+                    {% endif %}
+                  </span>
+                {% endif %}
+              </a>
+            </th>
+            <th>
+              <a href="?sort=name&direction={% if current_sort == 'name' and direction == 'asc' %}desc{% else %}asc{% endif %}{% if request.GET.keywords %}&keywords={{ request.GET.keywords }}{% endif %}">
+                Case Name 
+                {% if current_sort == 'name' %}
+                  <span class="icon">
+                    {% if direction == 'asc' %}
+                      ↑
+                    {% else %}
+                      ↓
+                    {% endif %}
+                  </span>
+                {% endif %}
+              </a>
+            </th>
             <th>License</th>
-            <th>Year of resolution</th>
+            <th>
+              <a href="?sort=decision_year&direction={% if current_sort == 'decision_year' and direction == 'asc' %}desc{% else %}asc{% endif %}{% if request.GET.keywords %}&keywords={{ request.GET.keywords }}{% endif %}">
+                Year of Resolution 
+                {% if current_sort == 'decision_year' %}
+                  <span class="icon">
+                    {% if direction == 'asc' %}
+                      ↑
+                    {% else %}
+                      ↓
+                    {% endif %}
+                  </span>
+                {% endif %}
+              </a>
+            </th>
           </tr>
         </thead>
         <tbody>
@@ -68,6 +156,29 @@ <h2 class="card-title">Contribute</h2>
         </tbody>
       </table>
     </div>
+    <nav class="pagination is-centered" role="navigation" aria-label="pagination">
+      <ul class="pagination-list">
+        {% if page_obj.has_previous %}
+          {% if page_obj.number > 1 %}
+            <li><a class="pagination-link is-rounded" href="?page=1&sort={{ current_sort }}&direction={{ direction }}&keywords={{ request.GET.keywords|urlencode }}">First</a></li>
+            <li><a class="pagination-link is-rounded" href="?page={{ page_obj.previous_page_number }}&sort={{ current_sort }}&direction={{ direction }}&keywords={{ request.GET.keywords|urlencode }}">Previous</a></li>
+          {% endif %}
+        {% endif %}
+
+        {% for num in page_obj.paginator.page_range %}
+          {% if num == page_obj.number %}
+            <li><a class="pagination-link is-current">{{ num }}</a></li>
+          {% else %}
+            <li><a class="pagination-link is-rounded" href="?page={{ num }}&sort={{ current_sort }}&direction={{ direction }}&keywords={{ request.GET.keywords|urlencode }}">{{ num }}</a></li>
+          {% endif %}
+        {% endfor %}
+
+        {% if page_obj.has_next %}
+          <li><a class="pagination-link is-rounded" href="?page={{ page_obj.next_page_number }}&sort={{ current_sort }}&direction={{ direction }}&keywords={{ request.GET.keywords|urlencode }}">Next</a></li>
+          <li><a class="pagination-link is-rounded" href="?page={{ page_obj.paginator.num_pages }}&sort={{ current_sort }}&direction={{ direction }}&keywords={{ request.GET.keywords|urlencode }}">Last</a></li>
+        {% endif %}
+      </ul>
+    </nav>
   </div>
 </section>
 {% endblock %}

diff --git a/legal_db/views.py b/legal_db/views.py
@@ -1,5 +1,6 @@
 # Third-party
 from django.contrib import messages
+from django.core.paginator import Paginator
 from django.db.models import Q
 from django.shortcuts import redirect, render
 from django.views.generic import DetailView, ListView, TemplateView
@@ -24,6 +25,7 @@ def get_context_data(self, **kwargs):
 class CaseListView(ListView):
     template_name = "legal_db/case/index.html"
     context_object_name = "cases"
+    paginate_by = 10
 
     def get_queryset(self):
         """
@@ -34,6 +36,16 @@ def get_queryset(self):
             "country", "name", "license", "decision_year"
         )
 
+        # Sorting
+        sort_by = self.request.GET.get('sort', 'name')  # Default sorting by name
+        direction = self.request.GET.get('direction', 'asc')  # Default direction is ascending
+
+        # Apply sorting
+        if direction == 'desc':
+            qs = qs.order_by(f'-{sort_by}')
+        else:
+            qs = qs.order_by(sort_by)
+
         keywords = self.request.GET.get("keywords")
         if keywords:
             attributes = [
@@ -53,7 +65,7 @@ def get_queryset(self):
         if tags:
             qs = qs.filter(tags__name__in=tags)
 
-        return qs.order_by("country", "name")
+        return qs
 
     def get_context_data(self, **kwargs):
         """
@@ -65,8 +77,15 @@ def get_context_data(self, **kwargs):
         for tag in Tag.objects.exclude(case=None).order_by("name"):
             checked = True if tag.name in selected_tags else False
             tags.append({"name": tag, "checked": checked})
+
+        # Get current sorting parameters
+        current_sort = self.request.GET.get('sort', 'name')  # Default sorting by name
+        direction = self.request.GET.get('direction', 'asc')  # Default direction is ascending
+
         context["tags"] = tags
         context["form"] = SearchForm(self.request.GET)
+        context["current_sort"] = current_sort
+        context["direction"] = direction
         return context