Pagination Updated - Items per page option added

vulnerabilities/forms.py

@@ -3,7 +3,7 @@
 # VulnerableCode is a trademark of nexB Inc.
 # SPDX-License-Identifier: Apache-2.0
 # See http://www.apache.org/licenses/LICENSE-2.0 for the license text.
-# See https://github.com/aboutcode-org/vulnerablecode for support or download.
+# See https://github.com/nexB/vulnerablecode for support or download.
 # See https://aboutcode.org for more information about nexB OSS projects.
 #
 
@@ -12,26 +12,87 @@
 
 from vulnerabilities.models import ApiUser
 
+from .models import *
 
-class PackageSearchForm(forms.Form):
 
+class PaginationForm(forms.Form):
+    """Form to handle page size selection across the application."""
+
+    PAGE_CHOICES = [
+        ("20", "20 per page"),
+        ("50", "50 per page"),
+        ("100", "100 per page"),
+    ]
+
+    page_size = forms.ChoiceField(
+        choices=PAGE_CHOICES,
+        initial="20",
+        required=False,
+        widget=forms.Select(
+            attrs={
+                "class": "select is-small",
+                "onchange": "handlePageSizeChange(this.value)",
+                "id": "page-size-select",
+            }
+        ),
+    )
+
+
+class BaseSearchForm(forms.Form):
+    """Base form for implementing search functionality."""
+
+    search = forms.CharField(required=True)
+
+    def clean_search(self):
+        return self.cleaned_data.get("search", "")
+
+    def get_queryset(self, query=None):
+        """
+        Get queryset with search/filter/ordering applied.
+        Args:
+            query (str, optional): Direct query for testing
+        """
+        if query is not None:
+            return self._search(query)
+
+        if not self.is_valid():
+            return self.model.objects.none()
+
+        return self._search(self.clean_search())
+
+
+class PackageSearchForm(BaseSearchForm):
+    model = Package
     search = forms.CharField(
         required=True,
         widget=forms.TextInput(
             attrs={"placeholder": "Package name, purl or purl fragment"},
         ),
     )
 
+    def _search(self, query):
+        """Execute package-specific search logic."""
+        return (
+            self.model.objects.search(query)
+            .with_vulnerability_counts()
+            .prefetch_related()
+            .order_by("package_url")
+        )
 
-class VulnerabilitySearchForm(forms.Form):
 
+class VulnerabilitySearchForm(BaseSearchForm):
+    model = Vulnerability
     search = forms.CharField(
         required=True,
         widget=forms.TextInput(
             attrs={"placeholder": "Vulnerability id or alias such as CVE or GHSA"}
         ),
     )
 
+    def _search(self, query):
+        """Execute vulnerability-specific search logic."""
+        return self.model.objects.search(query=query).with_package_counts()
+
 
 class ApiUserCreationForm(forms.ModelForm):
     """

vulnerabilities/templates/includes/pagination.html

@@ -1,39 +1,56 @@
-<nav class="pagination is-centered is-small" aria-label="pagination">
-  {% if page_obj.has_previous %}
-  <a href="?page={{ page_obj.previous_page_number }}&search={{ search|urlencode }}" class="pagination-previous">Previous</a>
-  {% else %}
-    <a class="pagination-previous" disabled>Previous</a>
-  {% endif %}
-
-  {% if page_obj.has_next %}
-    <a href="?page={{ page_obj.next_page_number }}&search={{ search|urlencode }}" class="pagination-next">Next</a>
-  {% else %}
-    <a class="pagination-next" disabled>Next</a>
-  {% endif %}
-
-  <ul class="pagination-list">
-    {% if page_obj.number != 1%}
-      <li>
-        <a href="?page=1&search={{ search|urlencode }}" class="pagination-link" aria-label="Goto page 1">1</a>
-      </li>
-      {% if page_obj.number > 2 %}
-        <li>
-          <span class="pagination-ellipsis">&hellip;</span>
-        </li>
-      {% endif %}
+{% if is_paginated %}
+<nav class="pagination is-centered" role="navigation" aria-label="pagination">
+    {% if page_obj.has_previous %}
+        <a href="?page={{ page_obj.previous_page_number }}&search={{ search|urlencode }}&page_size={{ page_obj.paginator.per_page }}" 
+           class="pagination-previous">Previous</a>
+    {% else %}
+        <span class="pagination-previous" disabled>Previous</span>
     {% endif %}
-    <li>
-      <a class="pagination-link is-current" aria-label="Page {{ page_obj.number }}" aria-current="page">{{ page_obj.number }}</a>
-    </li>
-    {% if page_obj.number != page_obj.paginator.num_pages %}
-      {% if page_obj.next_page_number != page_obj.paginator.num_pages %}
-        <li>
-          <span class="pagination-ellipsis">&hellip;</span>
-        </li>
-      {% endif %}
-      <li>
-        <a href="?page={{ page_obj.paginator.num_pages }}&search={{ search|urlencode }}" class="pagination-link" aria-label="Goto page {{ page_obj.paginator.num_pages }}">{{ page_obj.paginator.num_pages }}</a>
-      </li>
+
+    {% if page_obj.has_next %}
+        <a href="?page={{ page_obj.next_page_number }}&search={{ search|urlencode }}&page_size={{ page_obj.paginator.per_page }}" 
+           class="pagination-next">Next</a>
+    {% else %}
+        <span class="pagination-next" disabled>Next</span>
     {% endif %}
-  </ul>
-</nav>
+
+    <ul class="pagination-list">
+        {% if page_obj.number > 1 %}
+            <li>
+                <a href="?page=1&search={{ search|urlencode }}&page_size={{ page_obj.paginator.per_page }}" 
+                   class="pagination-link" aria-label="Page 1">1</a>
+            </li>
+            {% if page_obj.number > 4 %}
+                <li><span class="pagination-ellipsis">&hellip;</span></li>
+            {% endif %}
+        {% endif %}
+
+        {% for i in page_obj.paginator.page_range %}
+            {% if i > 1 and i < page_obj.paginator.num_pages %}
+                {% if i >= page_obj.number|add:"-3" and i <= page_obj.number|add:"3" %}
+                    <li>
+                        {% if page_obj.number == i %}
+                            <span class="pagination-link is-current" aria-current="page">{{ i }}</span>
+                        {% else %}
+                            <a href="?page={{ i }}&search={{ search|urlencode }}&page_size={{ page_obj.paginator.per_page }}" 
+                               class="pagination-link" aria-label="Goto page {{ i }}">{{ i }}</a>
+                        {% endif %}
+                    </li>
+                {% endif %}
+            {% endif %}
+        {% endfor %}
+
+        {% if page_obj.number < page_obj.paginator.num_pages %}
+            {% if page_obj.number < page_obj.paginator.num_pages|add:"-3" %}
+                <li><span class="pagination-ellipsis">&hellip;</span></li>
+            {% endif %}
+            <li>
+                <a href="?page={{ page_obj.paginator.num_pages }}&search={{ search|urlencode }}&page_size={{ page_obj.paginator.per_page }}" 
+                   class="pagination-link" aria-label="Goto page {{ page_obj.paginator.num_pages }}">
+                    {{ page_obj.paginator.num_pages }}
+                </a>
+            </li>
+        {% endif %}
+    </ul>
+</nav>
+{% endif %}

vulnerabilities/templates/packages.html

@@ -1,4 +1,5 @@
 {% extends "base.html" %}
+{% load static %}
 {% load humanize %}
 {% load widget_tweaks %}
 
@@ -18,6 +19,11 @@
                 <div>
                     {{ page_obj.paginator.count|intcomma }} results
                 </div>
+                <div class="is-flex is-justify-content-center mb-2">
+                    <div class="select is-small">
+                        {{ pagination_form.page_size }}
+                    </div>
+                </div>
                 {% if is_paginated %}
                     {% include 'includes/pagination.html' with page_obj=page_obj %}
                 {% endif %}
@@ -58,27 +64,27 @@
                         <tr>
                             <td style="word-break: break-all;">
                                 <a
-                                    href="{{ package.get_absolute_url }}?search={{ search }}"
-                                    target="_self">{{ package.purl }}</a>
+                                 href="{{ package.get_absolute_url }}?search={{ search }}"
+                                   target="_self">{{ package.purl }}</a>
                             </td>
                             <td>{{ package.vulnerability_count }}</td>
                             <td>{{ package.patched_vulnerability_count }}</td>
                         </tr>
                     {% empty %}
                         <tr>
                             <td colspan="3" style="word-break: break-all;">
-                            No Package found.
+                                No Package found.
                             </td>
                         </tr>
                     {% endfor %}
                 </tbody>
             </table>
         </div>
 
-    {% if is_paginated %}
-        {% include 'includes/pagination.html' with page_obj=page_obj %}
-    {% endif %}
-
+        {% if is_paginated %}
+            {% include 'includes/pagination.html' with page_obj=page_obj %}
+        {% endif %}
     </section>
 {% endif %}
-{% endblock %}
+<script src="{% static 'js/pagination.js' %}"></script>
+{% endblock %}

vulnerabilities/templates/vulnerabilities.html

@@ -1,4 +1,5 @@
 {% extends "base.html" %}
+{% load static %}
 {% load humanize %}
 {% load widget_tweaks %}
 
@@ -18,9 +19,14 @@
                 <div>
                     {{ page_obj.paginator.count|intcomma }} results
                 </div>
-              {% if is_paginated %}
-                {% include 'includes/pagination.html' with page_obj=page_obj %}
-              {% endif %}
+                <div class="is-flex is-justify-content-center mb-2">
+                    <div class="select is-small">
+                        {{ pagination_form.page_size }}
+                    </div>
+                </div>
+                {% if is_paginated %}
+                    {% include 'includes/pagination.html' with page_obj=page_obj %}
+                {% endif %}
             </div>
         </section>
     </div>
@@ -40,9 +46,9 @@
                     {% for vulnerability in page_obj %}
                         <tr class="is-clipped-list">
                             <td style="word-break: break-all;">
-                                <a
-                                    href="{{ vulnerability.get_absolute_url }}?search={{ search }}"
-                                    target="_self">{{ vulnerability.vulnerability_id }}
+                                <a 
+                                href="{{ vulnerability.get_absolute_url }}?search={{ search }}"
+                                   target="_self">{{ vulnerability.vulnerability_id }}
                                 </a>
                             </td>
                             <td>
@@ -63,19 +69,18 @@
                     {% empty %}
                         <tr class="is-clipped-list">
                             <td colspan="3" style="word-break: break-all;">
-                            No vulnerability found.
+                                No vulnerability found.
                             </td>
                         </tr>
                     {% endfor %}
                 </tbody>
             </table>
         </div>
 
-
-      {% if is_paginated %}
-        {% include 'includes/pagination.html' with page_obj=page_obj %}
-      {% endif %}
+        {% if is_paginated %}
+            {% include 'includes/pagination.html' with page_obj=page_obj %}
+        {% endif %}
     </section>
 {% endif %}
-
-{% endblock %}
+<script src="{% static 'js/pagination.js' %}"></script>
+{% endblock %}