Upgrade HTMX to version 2.0.3 (#198)

Signed-off-by: tdruez <[email protected]>

Author: tdruez

dejacode/static/js/dejacode_main.js

@@ -94,6 +94,37 @@ function setupBackToTop() {
   });
 }
 
+function setupHTMX() {
+  // Triggered after new content has been swapped in
+  document.body.addEventListener('htmx:afterSwap', function(evt) {
+    const loadedContent = evt.detail.elt;
+
+    // Enables all tooltip and popover of the inserted HTML
+    Array.from(loadedContent.querySelectorAll('[data-bs-toggle="tooltip"]')).forEach(element => {
+      new bootstrap.Tooltip(element, { container: 'body' });
+    });
+    Array.from(loadedContent.querySelectorAll('[data-bs-toggle="popover"]')).forEach(element => {
+      new bootstrap.Popover(element, { container: 'body' });
+    });
+
+    // Disable the tab if a "disable-tab" CSS class if found in the loaded content
+    if (loadedContent.querySelectorAll('.disable-tab').length > 0) {
+        const tabPaneElement = loadedContent.closest('.tab-pane');
+        // Find the corresponding button using its aria-controls attribute
+        const buttonId = tabPaneElement.getAttribute('aria-labelledby');
+        const button = document.querySelector(`#${buttonId}`);
+        if (button) {
+            button.disabled = true;
+        }
+    }
+  });
+
+  // Triggered when an HTTP response error (non-200 or 300 response code) occurs
+  document.addEventListener('htmx:responseError', function (event) {
+    event.target.innerHTML = '<div class="h5 ms-4 text-danger">Error fetching</div>';
+  });
+}
+
 document.addEventListener('DOMContentLoaded', () => {
   NEXB = {};
   NEXB.client_data = JSON.parse(document.getElementById("client_data").textContent);
@@ -135,5 +166,5 @@ document.addEventListener('DOMContentLoaded', () => {
   setupPopovers();
   setupSelectionCheckboxes();
   setupBackToTop();
-
+  setupHTMX();
 });

dejacode/static/js/htmx-1.9.8.min.js

@@ -30,7 +30,7 @@
     <script src="{% static 'bootstrap-5.3.2/js/bootstrap.bundle.min.js' %}" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
     <script src="{% static 'js/dejacode_main.js' %}" crossorigin="anonymous"></script>
     <script src="{% static 'js/bootstrap_theme_toggler.js' %}" crossorigin="anonymous"></script>
-    <script defer src="{% static 'js/htmx-1.9.8.min.js' %}" integrity="sha384-rgjA7mptc2ETQqXoYC3/zJvkU7K/aP44Y+z7xQuJiVnB/422P/Ak+F/AqFR7E4Wr" crossorigin="anonymous"></script>
+    <script src="{% static 'js/htmx-2.0.3.min.js' %}" integrity="sha384-0895/pl2MU10Hqc6jd4RvrthNlDiE9U1tWmX7WRESftEDRosgxNsQG/Ze9YMRzHq" crossorigin="anonymous"></script>
     {% include 'bootstrap_base_js.html' %}
     {% block javascripts %}{% endblock %}
   </body>

dejacode/static/js/htmx-2.0.3.min.js

@@ -2,30 +2,4 @@
   <div class="h5 ms-4">
     <i class="fas fa-spinner fa-spin"></i> Fetching {{ values.tab_object_name }}...
   </div>
-</div>
-
-<script>
-  document.body.addEventListener('htmx:afterSwap', function(evt) {
-    const loadedContent = evt.detail.elt;
-
-    // Enables all tooltip and popover of the inserted HTML
-    Array.from(loadedContent.querySelectorAll('[data-bs-toggle="tooltip"]')).forEach(element => {
-      new bootstrap.Tooltip(element, { container: 'body' });
-    });
-    Array.from(loadedContent.querySelectorAll('[data-bs-toggle="popover"]')).forEach(element => {
-      new bootstrap.Popover(element, { container: 'body' });
-    });
-
-    // Disable the tab if a "disable-tab" CSS class if found in the loaded content
-    if (loadedContent.querySelectorAll('.disable-tab').length > 0) {
-        const tabPaneElement = loadedContent.closest('.tab-pane');
-        // Find the corresponding button using its aria-controls attribute
-        const buttonId = tabPaneElement.getAttribute('aria-labelledby');
-        const button = document.querySelector(`#${buttonId}`);
-        if (button) {
-            button.disabled = true;
-        }
-    }
-
-  });
-</script>
+</div>

dje/templates/bootstrap_base.html

@@ -239,7 +239,16 @@
         {% endif %}
       {% endfor %}
     {% empty %}
-      <tr><td colspan="100">No results.</td></tr>
+      <tr>
+        <td colspan="100">
+          No results.
+          {% if filter_productcomponent.is_active %}
+            <a href="#" hx-get="{{ request.path }}?all=true#{{ tab_id }}" hx-target="{{ tab_id_html }}">
+              Clear search and filters
+            </a>
+          {% endif %}
+        </td>
+      </tr>
     {% endfor %}
   </tbody>
 </table>