Use htmx to load only the tab content on page change #138

Signed-off-by: tdruez <tdruez@nexb.com>
aboutcode-org · Jul 17, 2024 · a8b79f9 · a8b79f9
1 parent 984ecdd
commit a8b79f9
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 9 deletions.
diff --git a/dje/templates/pagination/object_list_pagination.html b/dje/templates/pagination/object_list_pagination.html
@@ -3,7 +3,11 @@
   <ul class="pagination pagination-sm">
     {% if page_obj.has_previous %}
       <li class="page-item">
-        <a class="page-link" href="?{{ previous_url }}" aria-label="Previous">
+        <a class="page-link"
+           aria-label="Previous"
+           href="?{{ previous_url }}"
+           {% if hx_target %}hx-get="{{ request.path }}?{{ previous_url }}" hx-target="{{ hx_target }}"{% endif %}
+        >
           <span aria-hidden="true">&laquo;</span>
           <span class="sr-only">Previous</span>
         </a>
@@ -18,10 +22,14 @@
     </li>
     {% if page_obj.has_next %}
       <li class="page-item">
-        <a class="page-link" href="?{{ next_url }}" aria-label="Next">
-          <span aria-hidden="true">&raquo;</span>
-          <span class="sr-only">Next</span>
-        </a>
+        <a class="page-link"
+           aria-label="Next"
+           href="?{{ next_url }}"
+           {% if hx_target %}hx-get="{{ request.path }}?{{ next_url }}" hx-target="{{ hx_target }}"{% endif %}
+        >
+            <span aria-hidden="true">&raquo;</span>
+            <span class="sr-only">Next</span>
+          </a>
       </li>
     {% else %}
       <li class="page-item disabled">

diff --git a/dje/views.py b/dje/views.py
@@ -583,7 +583,14 @@ class TabContentView(
     DataspaceScopeMixin,
     DetailView,
 ):
-    pass
+    tab_id = None
+
+    def get_context_data(self, **kwargs):
+        context_data = super().get_context_data(**kwargs)
+        if self.tab_id:
+            context_data["tab_id"] = self.tab_id
+            context_data["tab_id_html"] = f"#tab_{self.tab_id}"
+        return context_data
 
 
 class SendAboutFilesMixin:

diff --git a/product_portfolio/templates/product_portfolio/tabs/tab_dependencies.html b/product_portfolio/templates/product_portfolio/tabs/tab_dependencies.html
@@ -15,7 +15,9 @@
         <div class="h6 mt-2 mb-0 smaller">
           {% if page_obj.paginator.count != total_count %}
             {{ page_obj.paginator.count|intcomma }} of
-            <a href="?all=true#inventory">{{ total_count }} results</a>
+            <a href="#" hx-get="{{ request.path }}?all=true#inventory" hx-target="{{ tab_id_html }}">
+              {{ total_count }} results
+            </a>
           {% else %}
             {{ page_obj.paginator.count|intcomma }} results
           {% endif %}
@@ -24,7 +26,7 @@
     </ul>
   </div>
   <div class="col-auto">
-    {% include 'pagination/object_list_pagination.html' %}
+    {% include 'pagination/object_list_pagination.html' with hx_target=tab_id_html %}
   </div>
 </div>
 
@@ -110,6 +112,6 @@
   </tbody>
 </table>
 <div class="d-flex justify-content-center">
-  {% include 'pagination/object_list_pagination.html' %}
+  {% include 'pagination/object_list_pagination.html' with hx_target=tab_id_html %}
 </div>
 {% endspaceless %}