From 26275552c5a6951b80f8745b7d376fa940a9fd59 Mon Sep 17 00:00:00 2001
From: RubenPX <rubenmarchante@gmail.com>
Date: Fri, 8 Apr 2022 12:40:50 +0200
Subject: [PATCH] Select all functionality

---
 ereuse_devicehub/static/js/main.js            | 28 +++++++++++++++++++
 .../templates/inventory/device_list.html      |  1 +
 2 files changed, 29 insertions(+)

diff --git a/ereuse_devicehub/static/js/main.js b/ereuse_devicehub/static/js/main.js
index 695378db..fe2401ba 100644
--- a/ereuse_devicehub/static/js/main.js
+++ b/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);
+   })
+
 })();
diff --git a/ereuse_devicehub/templates/inventory/device_list.html b/ereuse_devicehub/templates/inventory/device_list.html
index 0bc8bd6b..8fba75ec 100644
--- a/ereuse_devicehub/templates/inventory/device_list.html
+++ b/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>