From 8bbca0301b9ccf14d060347de0531cdf253a49c8 Mon Sep 17 00:00:00 2001
From: RubenPX <rubenmarchante@gmail.com>
Date: Fri, 29 Apr 2022 14:06:09 +0200
Subject: [PATCH] Selection devices by page

---
 ereuse_devicehub/static/js/main.js           | 28 ---------------
 ereuse_devicehub/static/js/main_inventory.js | 38 +++++++++++++++++++-
 2 files changed, 37 insertions(+), 29 deletions(-)

diff --git a/ereuse_devicehub/static/js/main.js b/ereuse_devicehub/static/js/main.js
index 55a4951c..1dbaaeb0 100644
--- a/ereuse_devicehub/static/js/main.js
+++ b/ereuse_devicehub/static/js/main.js
@@ -215,34 +215,6 @@
     }, 200);
   }
 
-  /**
-   * Select all functionality
-   */
-  const btnSelectAll = document.getElementById("SelectAllBTN");
-  const tableListCheckboxes = document.querySelectorAll(".deviceSelect");
-
-  function itemListCheckChanged(event) {
-    const 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 => {
-    const checkedState = event.target.checked;
-    tableListCheckboxes.forEach(ckeckbox => {ckeckbox.checked = checkedState});
-  })
-
   /**
    * Avoid hide dropdown when user clicked inside
    */
diff --git a/ereuse_devicehub/static/js/main_inventory.js b/ereuse_devicehub/static/js/main_inventory.js
index b9e2c5ff..7bccb247 100644
--- a/ereuse_devicehub/static/js/main_inventory.js
+++ b/ereuse_devicehub/static/js/main_inventory.js
@@ -34,7 +34,7 @@ class TableController {
     /**
      * @returns Selected inputs in current page from device list
      */
-     static getAllSelectedDevicesInCurrentPage() {
+    static getAllSelectedDevicesInCurrentPage() {
         return this.#tableRowsPage()
             .filter(element => element.querySelector("input").checked)
             .map(element => element.querySelector("input"))
@@ -71,6 +71,42 @@ class TableController {
     }
 }
 
+/**
+ * Select all functionality
+ */
+window.addEventListener("DOMContentLoaded", () => {
+    const btnSelectAll = document.getElementById("SelectAllBTN");
+
+    function itemListCheckChanged() {
+        const listDevices = TableController.getAllDevicesInCurrentPage()
+        const isAllChecked = listDevices.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;
+        }
+    }
+
+    TableController.getAllDevices().forEach(item => {
+        item.addEventListener("click", itemListCheckChanged);
+    })
+
+    btnSelectAll.addEventListener("click", event => {
+        const checkedState = event.target.checked;
+        TableController.getAllDevicesInCurrentPage().forEach(ckeckbox => { ckeckbox.checked = checkedState });
+    })
+
+    // https://github.com/fiduswriter/Simple-DataTables/wiki/Events
+    table.on("datatable.page", () => itemListCheckChanged());
+    table.on("datatable.perpage", () => itemListCheckChanged());
+    table.on("datatable.update", () => itemListCheckChanged());
+})
+
 function deviceSelect() {
     const devices_count = TableController.getSelectedDevices().length;
     get_device_list();