From 9d9514e68b66f9596e26924a54fa56af079a0eec Mon Sep 17 00:00:00 2001
From: RubenPX <rubenmarchante@gmail.com>
Date: Tue, 3 May 2022 12:13:15 +0200
Subject: [PATCH] Select full list devices

---
 ereuse_devicehub/static/js/main_inventory.js     | 16 ++++++++++++++++
 .../templates/inventory/device_list.html         |  4 ++++
 2 files changed, 20 insertions(+)

diff --git a/ereuse_devicehub/static/js/main_inventory.js b/ereuse_devicehub/static/js/main_inventory.js
index 9732b5ef..b7b4387c 100644
--- a/ereuse_devicehub/static/js/main_inventory.js
+++ b/ereuse_devicehub/static/js/main_inventory.js
@@ -76,6 +76,7 @@ class TableController {
  */
 window.addEventListener("DOMContentLoaded", () => {
     const btnSelectAll = document.getElementById("SelectAllBTN");
+    const alertInfoDevices = document.getElementById("select-devices-info");
 
     function itemListCheckChanged() {
         const listDevices = TableController.getAllDevicesInCurrentPage()
@@ -84,11 +85,20 @@ window.addEventListener("DOMContentLoaded", () => {
         if (isAllChecked.every(bool => bool == true)) {
             btnSelectAll.checked = true;
             btnSelectAll.indeterminate = false;
+            alertInfoDevices.innerHTML = `Selected devices: ${TableController.getSelectedDevices().length}
+                                            ${
+                                                TableController.getAllDevices().length != TableController.getSelectedDevices().length
+                                                    ? `<a href="#" class="ml-3">Select all devices (${TableController.getAllDevices().length})</a>`
+                                                    : ""
+                                            }`;
+            alertInfoDevices.classList.remove("d-none");
         } else if (isAllChecked.every(bool => bool == false)) {
             btnSelectAll.checked = false;
             btnSelectAll.indeterminate = false;
+            alertInfoDevices.classList.add("d-none")
         } else {
             btnSelectAll.indeterminate = true;
+            alertInfoDevices.classList.add("d-none")
         }
     }
 
@@ -99,6 +109,12 @@ window.addEventListener("DOMContentLoaded", () => {
     btnSelectAll.addEventListener("click", event => {
         const checkedState = event.target.checked;
         TableController.getAllDevicesInCurrentPage().forEach(ckeckbox => { ckeckbox.checked = checkedState });
+        itemListCheckChanged()
+    })
+
+    alertInfoDevices.addEventListener("click", () => {
+        TableController.getAllDevices().forEach(ckeckbox => { ckeckbox.checked = true });
+        itemListCheckChanged()
     })
 
     // https://github.com/fiduswriter/Simple-DataTables/wiki/Events
diff --git a/ereuse_devicehub/templates/inventory/device_list.html b/ereuse_devicehub/templates/inventory/device_list.html
index 827c3b68..c3b910ae 100644
--- a/ereuse_devicehub/templates/inventory/device_list.html
+++ b/ereuse_devicehub/templates/inventory/device_list.html
@@ -297,6 +297,10 @@
               </div>
               {% endif %}
 
+              <div id="select-devices-info" class="alert alert-info mb-0 mt-3 d-none" role="alert">
+                If this text is showing is because there are an error
+              </div>
+
               <div class="tab-content pt-2">
                 <form method="get">
                   <div class="d-flex mt-4 mb-4">