Select all functionality

ereuse_devicehub/static/js/main.js

@@ -217,4 +217,32 @@
     }, 200);
   }
 
+  /**
+   * Select all functionality
+   */
+   var btnSelectAll = document.getElementById("SelectAllBTN");
+   var tableListCheckboxes = document.querySelectorAll(".deviceSelect");
+
+   function itemListCheckChanged(event) {
+       let isAllChecked = Array.from(tableListCheckboxes).map(itm => itm.checked);
+       if (isAllChecked.every(bool => bool == true)) {
+           btnSelectAll.checked = true;
+           btnSelectAll.indeterminate = false;
+       } else if (isAllChecked.every(bool => bool == false)) {
+           btnSelectAll.checked = false;
+           btnSelectAll.indeterminate = false;
+       } else {
+           btnSelectAll.indeterminate = true;
+       }
+   }
+   
+   tableListCheckboxes.forEach(item => {
+       item.addEventListener("click", itemListCheckChanged);
+   })
+
+   btnSelectAll.addEventListener("click", event => {
+       let checkedState = event.target.checked;
+       tableListCheckboxes.forEach(ckeckbox => ckeckbox.checked = checkedState);
+   })
+
 })();

ereuse_devicehub/templates/inventory/device_list.html

@@ -71,6 +71,7 @@
           {% endif %}
           <div class="tab-content pt-5">
             <div id="devices-list" class="tab-pane fade devices-list active show">
+              <label class="btn btn-primary " for="SelectAllBTN"><input type="checkbox" id="SelectAllBTN" autocomplete="off"></label>
               <div class="btn-group dropdown ml-1">
                 <button id="btnLots" type="button" onclick="processSelectedDevices()" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                   <i class="bi bi-folder2"></i>