Merge pull request #272 from RubenPX/Show-device-labels

Show lots on deviceList

ereuse_devicehub/static/js/main_inventory.build.js

@@ -2,7 +2,7 @@
 
 function _classStaticPrivateFieldSpecGet(receiver, classConstructor, descriptor) { _classCheckPrivateStaticAccess(receiver, classConstructor); _classCheckPrivateStaticFieldDescriptor(descriptor, "get"); return _classApplyDescriptorGet(receiver, descriptor); }
 
-function _classCheckPrivateStaticFieldDescriptor(descriptor, action) { if (descriptor === undefined) { throw new TypeError(`attempted to ${  action  } private static field before its declaration`); } }
+function _classCheckPrivateStaticFieldDescriptor(descriptor, action) { if (descriptor === undefined) { throw new TypeError("attempted to " + action + " private static field before its declaration"); } }
 
 function _classCheckPrivateStaticAccess(receiver, classConstructor) { if (receiver !== classConstructor) { throw new TypeError("Private static access of wrong provenance"); } }
 
@@ -95,32 +95,56 @@ var _tableRowsPage = {
   writable: true,
   value: () => table.pages[table.rows().dt.currentPage - 1]
 };
-window.addEventListener("DOMContentLoaded", () => {
+
+const selectorController = action => {
   const btnSelectAll = document.getElementById("SelectAllBTN");
   const alertInfoDevices = document.getElementById("select-devices-info");
 
-  function itemListCheckChanged() {
+  function softInit() {
-    const listDevices = TableController.getAllDevicesInCurrentPage();
-    const isAllChecked = listDevices.map(itm => itm.checked);
-
-    if (isAllChecked.every(bool => bool == true)) {
-      btnSelectAll.checked = true;
-      btnSelectAll.indeterminate = false;
-      alertInfoDevices.innerHTML = "Selected devices: ".concat(TableController.getSelectedDevices().length, "\n                                            ").concat(TableController.getAllDevices().length != TableController.getSelectedDevices().length ? "<a href=\"#\" class=\"ml-3\">Select all devices (".concat(TableController.getAllDevices().length, ")</a>") : "<a href=\"#\" class=\"ml-3\">Cancel selection</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");
-    }
-  }
-
     TableController.getAllDevices().forEach(item => {
       item.addEventListener("click", itemListCheckChanged);
-  });
+    }); // https://github.com/fiduswriter/Simple-DataTables/wiki/Events
+
+    table.on("datatable.page", () => itemListCheckChanged());
+    table.on("datatable.perpage", () => itemListCheckChanged());
+    table.on("datatable.update", () => itemListCheckChanged());
+  }
+
+  if (action == "softInit") {
+    softInit();
+    itemListCheckChanged();
+    return;
+  }
+
+  function itemListCheckChanged() {
+    alertInfoDevices.innerHTML = "Selected devices: ".concat(TableController.getSelectedDevices().length, "\n            ").concat(TableController.getAllDevices().length != TableController.getSelectedDevices().length ? "<a href=\"#\" class=\"ml-3\">Select all devices (".concat(TableController.getAllDevices().length, ")</a>") : "<a href=\"#\" class=\"ml-3\">Cancel selection</a>");
+
+    if (TableController.getSelectedDevices().length <= 0) {
+      alertInfoDevices.classList.add("d-none");
+    } else {
+      alertInfoDevices.classList.remove("d-none");
+    }
+
+    if (TableController.getAllDevices().length == TableController.getSelectedDevices().length) {
+      btnSelectAll.checked = true;
+      btnSelectAll.indeterminate = false;
+    } else if (TableController.getAllSelectedDevicesInCurrentPage().length > 0) {
+      btnSelectAll.indeterminate = true;
+    } else {
+      btnSelectAll.checked = false;
+      btnSelectAll.indeterminate = false;
+    }
+
+    if (TableController.getAllDevices().length == 0) {
+      btnSelectAll.checked = false;
+      btnSelectAll.disabled = true;
+    } else {
+      btnSelectAll.disabled = false;
+    }
+
+    get_device_list();
+  }
+
   btnSelectAll.addEventListener("click", event => {
     const checkedState = event.target.checked;
     TableController.getAllDevicesInCurrentPage().forEach(ckeckbox => {
@@ -134,12 +158,12 @@ window.addEventListener("DOMContentLoaded", () => {
       ckeckbox.checked = !checkState;
     });
     itemListCheckChanged();
-  }); // https://github.com/fiduswriter/Simple-DataTables/wiki/Events
-
-  table.on("datatable.page", () => itemListCheckChanged());
-  table.on("datatable.perpage", () => itemListCheckChanged());
-  table.on("datatable.update", () => itemListCheckChanged());
   });
+  softInit();
+  itemListCheckChanged();
+};
+
+window.addEventListener("DOMContentLoaded", () => selectorController());
 
 function deviceSelect() {
   const devices_count = TableController.getSelectedDevices().length;
@@ -327,25 +351,44 @@ async function processSelectedDevices() {
       const lotID = lot.id;
       const srcElement = event.srcElement.parentElement.children[0];
       const checked = !srcElement.checked;
+      const {
+        indeterminate
+      } = srcElement;
       const found = this.list.filter(list => list.lot.id == lotID)[0];
 
       if (checked) {
         if (found && found.type == "Remove") {
+          const affectedDevices = found.devices.filter(dev => found.lot.devices.includes(dev.id));
+
+          if (affectedDevices.length > 0 && found.indeterminate == false) {
+            // Remove action from list
+            actions.list = actions.list.filter(x => x.lot.id != found.lot.id);
+          } else {
             found.type = "Add";
+          }
         } else {
           this.list.push({
             type: "Add",
             lot,
-            devices: selectedDevices
+            devices: selectedDevices,
+            indeterminate
           });
         }
       } else if (found && found.type == "Add") {
+        const affectedDevices = found.devices.filter(dev => !found.lot.devices.includes(dev.id));
+
+        if (affectedDevices.length > 0 && found.indeterminate == false) {
+          // Remove action from list
+          actions.list = actions.list.filter(x => x.lot.id != found.lot.id);
+        } else {
           found.type = "Remove";
+        }
       } else {
         this.list.push({
           type: "Remove",
           lot,
-          devices: selectedDevices
+          devices: selectedDevices,
+          indeterminate
         });
       }
 
@@ -430,23 +473,20 @@ async function processSelectedDevices() {
       const newRequest = await Api.doRequest(window.location);
       const tmpDiv = document.createElement("div");
       tmpDiv.innerHTML = newRequest;
-      const newTable = Array.from(tmpDiv.querySelectorAll("table.table > tbody > tr .deviceSelect")).map(x => x.attributes["data-device-dhid"].value); // https://github.com/fiduswriter/Simple-DataTables/wiki/rows()#removeselect-arraynumber
+      const newTable = document.createElement("table");
-
+      newTable.innerHTML = tmpDiv.querySelector("table").innerHTML;
-      const rowsToRemove = [];
+      newTable.classList = "table";
-
+      const oldTable = document.querySelector(".dataTable-wrapper");
-      for (let i = 0; i < table.activeRows.length; i++) {
+      oldTable.parentElement.replaceChild(newTable, oldTable);
-        const row = table.activeRows[i];
+      table = new simpleDatatables.DataTable(newTable, {
-
+        perPage: 20
-        if (!newTable.includes(row.querySelector("input").attributes["data-device-dhid"].value)) {
+      }); // // Restore state of checkbox
-          rowsToRemove.push(i);
-        }
-      }
-
-      table.rows().remove(rowsToRemove); // Restore state of checkbox
 
       const selectAllBTN = document.getElementById("SelectAllBTN");
       selectAllBTN.checked = false;
-      selectAllBTN.indeterminate = false;
+      selectAllBTN.indeterminate = false; // Re-init SelectorController
+
+      selectorController("softInit");
     }
 
   }

ereuse_devicehub/static/js/main_inventory.js

@@ -78,10 +78,28 @@ class TableController {
 /**
  * Select all functionality
  */
-window.addEventListener("DOMContentLoaded", () => {
+
+const selectorController = (action) => {
     const btnSelectAll = document.getElementById("SelectAllBTN");
     const alertInfoDevices = document.getElementById("select-devices-info");
 
+    function softInit() {
+        TableController.getAllDevices().forEach(item => {
+            item.addEventListener("click", itemListCheckChanged);
+        })
+
+        // https://github.com/fiduswriter/Simple-DataTables/wiki/Events
+        table.on("datatable.page", () => itemListCheckChanged());
+        table.on("datatable.perpage", () => itemListCheckChanged());
+        table.on("datatable.update", () => itemListCheckChanged());
+    }
+    
+    if (action == "softInit") {
+        softInit();
+        itemListCheckChanged();
+        return;
+    }
+
     function itemListCheckChanged() {
         alertInfoDevices.innerHTML = `Selected devices: ${TableController.getSelectedDevices().length}
             ${TableController.getAllDevices().length != TableController.getSelectedDevices().length
@@ -115,10 +133,6 @@ window.addEventListener("DOMContentLoaded", () => {
         get_device_list();
     }
     
-    TableController.getAllDevices().forEach(item => {
-        item.addEventListener("click", itemListCheckChanged);
-    })
-
     btnSelectAll.addEventListener("click", event => {
         const checkedState = event.target.checked;
         TableController.getAllDevicesInCurrentPage().forEach(ckeckbox => { ckeckbox.checked = checkedState });
@@ -131,13 +145,12 @@ window.addEventListener("DOMContentLoaded", () => {
         itemListCheckChanged()
     })
 
-    // https://github.com/fiduswriter/Simple-DataTables/wiki/Events
+    softInit();
-    table.on("datatable.page", () => itemListCheckChanged());
-    table.on("datatable.perpage", () => itemListCheckChanged());
-    table.on("datatable.update", () => itemListCheckChanged());
 
     itemListCheckChanged();
-})
+}
+
+window.addEventListener("DOMContentLoaded", () => selectorController());
 
 function deviceSelect() {
     const devices_count = TableController.getSelectedDevices().length;
@@ -425,22 +438,23 @@ async function processSelectedDevices() {
             const tmpDiv = document.createElement("div")
             tmpDiv.innerHTML = newRequest
 
-            const newTable = Array.from(tmpDiv.querySelectorAll("table.table > tbody > tr .deviceSelect")).map(x => x.attributes["data-device-dhid"].value)
             
-            // https://github.com/fiduswriter/Simple-DataTables/wiki/rows()#removeselect-arraynumber
+            const newTable = document.createElement("table")
-            const rowsToRemove = []
+            newTable.innerHTML = tmpDiv.querySelector("table").innerHTML
-            for (let i = 0; i < table.activeRows.length; i++) {
+            newTable.classList = "table"
-                const row = table.activeRows[i];
-                if (!newTable.includes(row.querySelector("input").attributes["data-device-dhid"].value)) {
-                    rowsToRemove.push(i)
-                }
-            }
-            table.rows().remove(rowsToRemove);
 
-            // Restore state of checkbox
+            const oldTable = document.querySelector(".dataTable-wrapper")
+            oldTable.parentElement.replaceChild(newTable, oldTable)
+
+            table = new simpleDatatables.DataTable(newTable, {perPage: 20})
+
+            // // Restore state of checkbox
             const selectAllBTN = document.getElementById("SelectAllBTN");
             selectAllBTN.checked = false;
             selectAllBTN.indeterminate = false;
+
+            // Re-init SelectorController
+            selectorController("softInit");
         }
     }
 

ereuse_devicehub/templates/inventory/device_list.html

@@ -361,6 +361,13 @@
                         <a href="{{ url_for('inventory.device_details', id=dev.devicehub_id)}}">
                           {{ dev.verbose_name }}
                         </a>
+                        {% if dev.lots | length > 0 %}
+                        <h6 class="d-inline">
+                          {% for lot in dev.lots %}
+                            <span class="badge rounded-pill bg-light text-dark">{{ lot.name }}</span>
+                          {% endfor %}
+                        </h6>
+                        {% endif %}
                       </td>
                       <td>
                         <a href="{{ url_for('inventory.device_details', id=dev.devicehub_id)}}">
@@ -434,7 +441,7 @@
 
 <!-- Custom Code -->
 <script>
-  const table = new simpleDatatables.DataTable("table", {
+  let table = new simpleDatatables.DataTable("table", {
     perPage: 20
   })
 </script>