Fix issue #227 - Improve the case table with sorting and pagination

legal_db/static/listing.js

@@ -21,3 +21,22 @@ 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' });
+    }
+  }
+});
+

legal_db/templates/legal_db/case/index.html

@@ -51,10 +51,49 @@ <h2 class="card-title">{% trans "Contribute" %}</h2>
       <table class="table is-bordered is-striped is-fullwidth">
         <thead>
           <tr>
-            <th>{% trans "Country" %}</th>
-            <th>{% trans "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 %}">
+                {% trans "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 %}">
+                {% trans "Case name" %} 
+                {% if current_sort == 'name' %}
+                  <span class="icon">
+                    {% if direction == 'asc' %}
+                      ↑
+                    {% else %}
+                      ↓
+                    {% endif %}
+                  </span>
+                {% endif %}
+              </a>
+            </th>
             <th>{% trans "License" %}</th>
-            <th>{% trans "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 %}">
+                {% trans "Year of resolution" %} 
+                {% if current_sort == 'decision_year' %}
+                  <span class="icon">
+                    {% if direction == 'asc' %}
+                      ↑
+                    {% else %}
+                      ↓
+                    {% endif %}
+                  </span>
+                {% endif %}
+              </a>
+            </th>
           </tr>
         </thead>
         <tbody>
@@ -74,6 +113,29 @@ <h2 class="card-title">{% trans "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 %}

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
 
 

webpack/sass/styles.scss

@@ -326,3 +326,52 @@ a, a:hover {
 .navbar .navbar-burger {
   height: 40px;
 }
+
+/* Pagination Styles */
+.pagination {
+  display: flex;
+  justify-content: center;
+  padding: 8px 0;
+
+  &-list {
+    display: flex;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  &-link {
+    font-size: 12px;
+    padding: 4px 8px;
+    margin: 0 2px;
+    background-color: white;
+    color: $color-dark-gray;
+    border: 2px solid $color-tomato;
+    border-radius: 3px;
+    text-decoration: none;
+    transition: background-color 0.2s, color 0.2s;
+
+    &:hover {
+      background-color: $color-tomato;
+      color: white;
+      border: 2px solid $color-tomato;
+    }
+
+    &.is-current {
+      background-color: $color-tomato;
+      color: white;
+      border-radius: 15px;
+      border-color: $color-tomato;
+    }
+
+    &.is-rounded {
+      border-radius: 15px;
+    }
+
+    &:disabled {
+      pointer-events: none;
+      color: #ccc;
+      background-color: #f0f0f0;
+    }
+  }
+}