Fix tech report pagination: Hide next/prev links based on actual data, reset to page 1 on filter changes (#1094)

* Initial plan

* Fix tech report pagination: Hide next/prev links based on actual data, reset to page 1 on filter changes

Co-authored-by: max-ostapenko <1611259+max-ostapenko@users.noreply.github.com>

* Fix linting errors: Remove whitespace from blank lines in test file

Co-authored-by: max-ostapenko <1611259+max-ostapenko@users.noreply.github.com>

* fix positioning

* cleanup

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: max-ostapenko <1611259+max-ostapenko@users.noreply.github.com>

Author: Copilot

src/js/components/filters.js

@@ -71,6 +71,10 @@ class Filters {
       url.searchParams.append('category', categories);
     }
 
+    // Reset to page 1 when filters change
+    url.searchParams.delete('page');
+    url.searchParams.append('page', '1');
+
     // /* Scroll to the report content */
     // url.hash = '#report-content';
 

src/js/techreport/utils/data.js

@@ -239,8 +239,27 @@ const fetchCategoryData = (rows, filters, callback) => {
         /* Update the pagination info */
         const current = document.querySelectorAll('[data-page="current"]');
         const total = document.querySelectorAll('[data-page="total"]');
+        const totalPages = Math.ceil(category?.technologies?.length / rows);
         current.forEach(c => c.textContent = pageNr);
-        total.forEach(t => t.textContent = Math.ceil(category?.technologies?.length / rows));
+        total.forEach(t => t.textContent = totalPages);
+
+        /* Update pagination links visibility */
+        const nextPageLink = document.querySelector('[data-pagination="next"]');
+        const prevPageLink = document.querySelector('[data-pagination="previous"]');
+        if (prevPageLink) {
+          if (pageNr <= 1) {
+            prevPageLink.style.display = 'none';
+          } else {
+            prevPageLink.style.display = 'block';
+          }
+        }
+        if (nextPageLink) {
+          if (pageNr >= totalPages) {
+            nextPageLink.style.display = 'none';
+          } else {
+            nextPageLink.style.display = 'block';
+          }
+        }
 
         /* Update components */
         callback(category);

static/css/techreport/techreport.css

@@ -1458,6 +1458,11 @@ select {
   border-top: 1px solid var(--color-separator);
 }
 
+.table-page-info {
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .table-page-info p {
   text-align: center;
 }

templates/techreport/category.html

@@ -135,7 +135,7 @@ <h2><a href="#comparison-summary" class="anchor">Technologies</a></h2>
 
         <div class="table-pagination">
           {% set filters = tech_report_page.filters %}
-          <p data-pagination="previous">
+          <p data-pagination="previous" style="display: none;">
             {% if filters.page and filters.page > 1 %}
               <a href="/reports/techreport/category?geo={{ filters.geo }}&rank={{ filters.rank }}&category={{ filters.category }}&page={{ filters.page - 1 }}{%if filters.selected %}&selected={{ filters.selected }}{% endif %}{%if filters.rows %}&rows={{ filters.rows }}{% endif %}">Previous page </a>
             {% endif %}
@@ -170,8 +170,8 @@ <h2><a href="#comparison-summary" class="anchor">Technologies</a></h2>
               <span id="rows-announcement"></span>
             </p>
           </div>
-          <p data-pagination="next">
-            {% if not filters.last_page and filters.last_page == False  %}
+          <p data-pagination="next" style="display: none;">
+            {% if not filters.last_page %}
               <a href="/reports/techreport/category?geo={{ filters.geo }}&rank={{ filters.rank }}&category={{ filters.category }}&page={{ filters.page + 1 }}{%if filters.selected %}&selected={{ filters.selected }}{% endif %}{%if filters.rows %}&rows={{ filters.rows }}{% endif %}">Next page</a>
             {% endif %}
           </p>