Add multi-selection using shift key in the table list views

component_catalog/templates/component_catalog/base_component_package_list.html

@@ -2,9 +2,11 @@
 {% load i18n %}
 
 {% block top-right-buttons %}
-  <button class="btn btn-outline-dark disabled" id="download-aboutcode-files" href="{% if opts.model_name == 'package' %}{% url 'component_catalog:package_multi_about_files' %}{% elif opts.model_name == 'component' %}{% url 'component_catalog:component_multi_about_files' %}{% endif %}" data-bs-toggle="tooltip">
-    <i class="fas fa-download"></i> AboutCode
-  </button>
+  <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip">
+    <button class="btn btn-outline-dark disabled" id="download-aboutcode-files" href="{% if opts.model_name == 'package' %}{% url 'component_catalog:package_multi_about_files' %}{% elif opts.model_name == 'component' %}{% url 'component_catalog:component_multi_about_files' %}{% endif %}">
+      <i class="fas fa-download"></i> AboutCode
+    </button>
+  </span>
   {% if form or add_to_component_form %}
     <div class="btn-group">
       <div class="dropdown" data-bs-toggle="tooltip" title="{% trans 'Select objects first' %}">
@@ -47,16 +49,17 @@
   <script>
     $(document).ready(function () {
       let download_aboutcode_btn = $('#download-aboutcode-files');
+      let download_aboutcode_wrapper = download_aboutcode_btn.parent();
 
       let handle_button_display = function() {
-        let count = $('main input[type="checkbox"]:checked').length;
+        let count = $('table input[type="checkbox"]:checked').length;
         if (count >= 1) {
           download_aboutcode_btn.removeClass('disabled');
-          download_aboutcode_btn.attr('data-bs-title', 'Download AboutCode files');
+          download_aboutcode_wrapper.attr('data-bs-original-title', 'Download AboutCode files');
         }
         else {
           download_aboutcode_btn.addClass('disabled');
-          download_aboutcode_btn.attr('data-bs-title', 'Select objects first');
+          download_aboutcode_wrapper.attr('data-bs-original-title', 'Select objects first');
         }
       };
 

component_catalog/templates/component_catalog/includes/add_to.js.html

@@ -1,16 +1,17 @@
 <script>
   $(document).ready(function () {
     let add_to_btn = $('#add-to-btn');
+    let add_to_btn_wrapper = add_to_btn.parent();
 
     let handle_button_display = function () {
       let count = $('main input[type="checkbox"]:checked').length;
       if (count >= 1) {
         add_to_btn.removeClass('disabled');
-        add_to_btn.parent().attr('data-bs-title', '');
+        add_to_btn_wrapper.attr('data-bs-original-title', '');
     }
       else {
         add_to_btn.addClass('disabled');
-        add_to_btn.parent().attr('data-bs-title', 'Select objects first');
+        add_to_btn_wrapper.attr('data-bs-original-title', 'Select objects first');
       }
     };
 

dejacode/static/css/dejacode_bootstrap.css

@@ -341,7 +341,7 @@ table.products-table .column-owner {
   min-width: 75px;
 }
 table.products-table .column-productinventoryitem_count {
-  max-width:80px;
+  width: 100px;
 }
 
 /* -- Package List -- */

dejacode/static/js/dejacode_main.js

@@ -8,6 +8,92 @@
 #
 */
 
+function setupTooltips() {
+  // Enables all tooltips
+  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+  const tooltips = Array.from(tooltipTriggerList).map(element => {
+    return new bootstrap.Tooltip(element, {
+      container: 'body'
+    });
+  });
+}
+
+function setupPopovers() {
+  // Enables all popovers
+  const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
+  const popovers = Array.from(popoverTriggerList).map(element => {
+    return new bootstrap.Popover(element, {
+      container: 'body',
+      html: true
+    });
+  });
+}
+
+function setupSelectionCheckboxes() {
+  const selectAllCheckbox = document.getElementById("checkbox-select-all");
+  const rowCheckboxes = document.querySelectorAll("table#object-list-table tbody input[type='checkbox']");
+  let lastChecked; // Store the last checked checkbox
+
+  if (!rowCheckboxes) return;
+
+  // Select-all checkboxes
+  if (selectAllCheckbox) {
+    selectAllCheckbox.addEventListener("click", function() {
+      rowCheckboxes.forEach(function(checkbox) {
+        checkbox.checked = selectAllCheckbox.checked;
+      });
+    });
+  }
+
+  // Add a click event listener to each row checkbox to handle individual selections
+  rowCheckboxes.forEach((checkbox) => {
+    checkbox.addEventListener("click", function (event) {
+      if (event.shiftKey && lastChecked) {
+        // Determine the index of the clicked checkbox
+        const currentCheckboxIndex = Array.from(rowCheckboxes).indexOf(checkbox);
+        const lastCheckedIndex = Array.from(rowCheckboxes).indexOf(lastChecked);
+
+        // Determine the range of checkboxes to check/uncheck
+        const startIndex = Math.min(currentCheckboxIndex, lastCheckedIndex);
+        const endIndex = Math.max(currentCheckboxIndex, lastCheckedIndex);
+
+        // Toggle the checkboxes within the range
+        for (let i = startIndex; i <= endIndex; i++) {
+          rowCheckboxes[i].checked = checkbox.checked;
+        }
+      }
+
+      // Update the last checked checkbox
+      lastChecked = checkbox;
+
+      // Check if all row checkboxes are checked and update the "Select All" checkbox accordingly
+      if (selectAllCheckbox) {
+        selectAllCheckbox.checked = Array.from(rowCheckboxes).every((cb) => cb.checked);
+      }
+
+    });
+  });
+}
+
+function setupBackToTop() {
+  // Get the back-to-top button element
+  const backToTopButton = document.getElementById('back-to-top');
+
+  // Add a scroll event listener
+  window.addEventListener('scroll', function () {
+    if (window.scrollY >= 250) { // Page is scrolled more than 250px
+      backToTopButton.style.display = 'block';
+    } else {
+      backToTopButton.style.display = 'none';
+    }
+  });
+
+  // Add a click event listener to scroll back to the top
+  backToTopButton.addEventListener('click', function () {
+    window.scrollTo(0, 0);
+  });
+}
+
 document.addEventListener('DOMContentLoaded', () => {
   NEXB = {};
   NEXB.client_data = JSON.parse(document.getElementById("client_data").textContent);
@@ -37,23 +123,6 @@ document.addEventListener('DOMContentLoaded', () => {
     document.body.appendChild(overlay);
   }
 
-  // Enables all tooltips
-  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
-  const tooltips = Array.from(tooltipTriggerList).map(element => {
-    return new bootstrap.Tooltip(element, {
-      container: 'body'
-    });
-  });
-
-  // Enables all popovers
-  const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
-  const popovers = Array.from(popoverTriggerList).map(element => {
-    return new bootstrap.Popover(element, {
-      container: 'body',
-      html: true
-    });
-  });
-
   // Search selection in the header
   $('#search-selector-list a').click(function(event) {
     event.preventDefault();
@@ -62,21 +131,9 @@ document.addEventListener('DOMContentLoaded', () => {
     $('#search-input').focus();
   });
 
-  // Get the back-to-top button element
-  const backToTopButton = document.getElementById('back-to-top');
-
-  // Add a scroll event listener
-  window.addEventListener('scroll', function () {
-    if (window.scrollY >= 250) { // Page is scrolled more than 250px
-      backToTopButton.style.display = 'block';
-    } else {
-      backToTopButton.style.display = 'none';
-    }
-  });
-
-  // Add a click event listener to scroll back to the top
-  backToTopButton.addEventListener('click', function () {
-    window.scrollTo(0, 0);
-  });
+  setupTooltips();
+  setupPopovers();
+  setupSelectionCheckboxes();
+  setupBackToTop();
 
 });

dje/templates/object_list_base.html

@@ -96,34 +96,28 @@
             $('.h-link').tooltip({placement: 'bottom', title: 'Hierarchy view', container: 'body'});
             $('.r-link').tooltip({placement: 'bottom', title: 'Request view', container: 'body'});
 
-            /* Select all checkboxes */
-            let checkbox_select_all = $("thead th #checkbox-select-all");
-            checkbox_select_all.click(function() {
-              let checkboxes = $("table#object-list-table tbody td input[type='checkbox']");
-              checkboxes.prop("checked", $(this).prop("checked"));
-              // Fire the `change` event on the first item to trigger the `handle_button_display`
-              // There's no need to trigger that event for each checkbox in this "select all" action
-              checkboxes.first().change();
-            });
-
-            // Left and Right keys navigation
+            /* Left and Right keys navigation */
             {% if is_paginated %}
-                $(document).keydown(function(e) {
-                    // Do not trigger the navigation if an <input> or <textarea> currently has the focus
-                    var any_input_has_focus = (function() {return ($("input,textarea").is(":focus"))});
-                    {% if page_obj.has_previous %}
-                        if (e.keyCode == 37 && !any_input_has_focus()) {
-                            e.preventDefault();
-                            window.location.href = window.location.href.replace( /[\?#].*|$/, "?{{ previous_url }}" );
-                        }
-                    {% endif %}
-                    {% if page_obj.has_next %}
-                        if (e.keyCode == 39 && !any_input_has_focus()) {
-                            e.preventDefault();
-                            window.location.href = window.location.href.replace( /[\?#].*|$/, "?{{ next_url }}" );
-                        }
-                    {% endif %}
-                });
+              document.addEventListener("keydown", function(e) {
+                // Do not trigger the navigation if an <input> or <textarea> currently has the focus
+                var anyInputHasFocus = function() {
+                  return document.querySelector("input:focus, textarea:focus") !== null;
+                };
+
+                {% if page_obj.has_previous %}
+                  if (e.keyCode === 37 && !anyInputHasFocus()) {
+                    e.preventDefault();
+                    window.location.href = window.location.href.replace(/[\?#].*|$/, "?{{ previous_url }}");
+                  }
+                {% endif %}
+
+                {% if page_obj.has_next %}
+                  if (e.keyCode === 39 && !anyInputHasFocus()) {
+                    e.preventDefault();
+                    window.location.href = window.location.href.replace(/[\?#].*|$/, "?{{ next_url }}");
+                  }
+                {% endif %}
+              });
             {% endif %}
 
             $('select.bootstrap-select-filter')
@@ -162,7 +156,7 @@
                     });
                   }
 
-                  /// If there are no active search/filters, add 'all=true' to the parameters
+                  // If there are no active search/filters, add 'all=true' to the parameters
                   if (params.toString() === "") {
                       params.set('all', 'true');
                   }

product_portfolio/templates/product_portfolio/product_list.html

@@ -3,7 +3,9 @@
 
 {% block top-right-buttons %}
   <div class="btn-group">
-    <button id="compare_button" href="/products/compare/" class="btn btn-outline-dark disabled" data-bs-toggle="tooltip"><i class="far fa-clone"></i> {% trans "Compare" %}</button>
+    <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip">
+      <button id="compare_button" href="/products/compare/" class="btn btn-outline-dark disabled"><i class="far fa-clone"></i> {% trans "Compare" %}</button>
+    </span>
   </div>
   {{ block.super }}
 {% endblock %}
@@ -13,16 +15,17 @@
     <script>
     $(document).ready(function () {
         let compare_button = $('#compare_button');
+        let compare_button_wrapper = compare_button.parent();
 
         let handle_compare_button_display = function () {
             let count = $('tbody input[type="checkbox"]:checked').length;
             if (count === 2) {
                 compare_button.removeClass('disabled');
-                compare_button.attr('data-bs-title', '');
+                compare_button_wrapper.attr('data-bs-original-title', '');
             }
             else {
                 compare_button.addClass('disabled');
-                compare_button.attr('data-bs-title', 'Select first two products to compare, then click this button');
+                compare_button_wrapper.attr('data-bs-original-title', 'Select first two products to compare, then click this button');
             }
         };
 

product_portfolio/tests/test_views.py

@@ -1054,8 +1054,7 @@ def test_product_portfolio_list_view_compare_button(self):
         url = resolve_url("product_portfolio:product_list")
         response = self.client.get(url)
         expected = """
-        <button id="compare_button" href="/products/compare/"
-                class="btn btn-outline-dark disabled" data-bs-toggle="tooltip">
+        <button id="compare_button" href="/products/compare/" class="btn btn-outline-dark disabled">
           <i class="far fa-clone"></i> Compare
         </button>
         """