Merge pull request #230 from RubenPX/bugfix/fix-lots

[Bugfix] fix lots component issues

ereuse_devicehub/static/css/devicehub.css

@@ -0,0 +1,25 @@
+/**
+* eReuse CSS
+*/
+
+/*--------------------------------------------------------------
+# LotsSelector
+--------------------------------------------------------------*/
+
+#dropDownLotsSelector {
+    max-height: 500px;
+}
+
+#dropDownLotsSelector>ul#LotsSelector {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    min-width: max-content;
+    max-height: 380px;
+    overflow-y: auto;
+}
+
+#dropDownLotsSelector #ApplyDeviceLots {
+    padding-top: 0px;
+    padding-bottom: 5px;
+}

ereuse_devicehub/static/css/style.css

@@ -1,10 +1,10 @@
-/**
+/**
-* Template Name: NiceAdmin - v2.2.0
+* Template Name: NiceAdmin - v2.2.0
-* Template URL: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/
+* Template URL: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/
-* Author: BootstrapMade.com
+* Author: BootstrapMade.com
-* License: https://bootstrapmade.com/license/
+* License: https://bootstrapmade.com/license/
-*/
+*/
-
+
 /*--------------------------------------------------------------
 # General
 --------------------------------------------------------------*/
@@ -1081,4 +1081,4 @@ h1, h2, h3, h4, h5, h6 {
   text-align: center;
   font-size: 13px;
   color: #012970;
-}
+}

ereuse_devicehub/static/js/main_inventory.js

@@ -320,28 +320,33 @@ async function processSelectedDevices() {
      * @param {Array<number>} selectedDevicesIDs
      * @param {HTMLElement} target
      */
-    function templateLot(lotID, lot, selectedDevicesIDs, elementTarget, actions) {
+    function templateLot(lot, elementTarget, actions) {
         elementTarget.innerHTML = ""
+        const {id, name, state} = lot;
 
-        const htmlTemplate = `<input class="form-check-input" type="checkbox" id="${lotID}" style="width: 20px; height: 20px; margin-right: 7px;">
+        const htmlTemplate = `<input class="form-check-input" type="checkbox" id="${id}" style="width: 20px; height: 20px; margin-right: 7px;">
-            <label class="form-check-label" for="${lotID}">${lot.name}</label>`;
+            <label class="form-check-label" for="${id}">${name}</label>`;
-
-        const existLotList = selectedDevicesIDs.map(selected => lot.devices.includes(selected));
 
         const doc = document.createElement("li");
         doc.innerHTML = htmlTemplate;
 
-        if (selectedDevicesIDs.length <= 0) {
+        switch (state) {
-            doc.children[0].disabled = true;
+            case "true":
-        } else if (existLotList.every(value => value == true)) {
+                doc.children[0].checked = true;
-            doc.children[0].checked = true;
+                break;
-        } else if (existLotList.every(value => value == false)) {
+            case "false":
-            doc.children[0].checked = false;
+                doc.children[0].checked = false;
-        } else {
+                break;
-            doc.children[0].indeterminate = true;
+            case "indetermined":
+                doc.children[0].indeterminate = true;
+                break;
+            default:
+                console.warn("This shouldn't be happend: Lot without state: ", lot);
+                break;
         }
-        doc.children[0].addEventListener("mouseup", (ev) => actions.manage(ev, lotID, selectedDevicesIDs));
+
-        doc.children[1].addEventListener("mouseup", (ev) => actions.manage(ev, lotID, selectedDevicesIDs));
+        doc.children[0].addEventListener("mouseup", (ev) => actions.manage(ev, id, selectedDevicesIDs));
+        doc.children[1].addEventListener("mouseup", (ev) => actions.manage(ev, id, selectedDevicesIDs));
         elementTarget.append(doc);
     }
 
@@ -371,11 +376,31 @@ async function processSelectedDevices() {
             lot.devices = devices
                 .filter(device => device.lots.filter(devicelot => devicelot.id == lot.id).length > 0)
                 .map(device => parseInt(device.id));
+
+             switch (lot.devices.length) {
+                case 0:
+                    lot.state = "false";
+                    break;
+                case selectedDevicesIDs.length:
+                    lot.state = "true";
+                    break;
+                default:
+                    lot.state = "indetermined";
+                    break;
+            }
+
             return lot;
         })
 
+
+        let lotsList = [];
+        lotsList.push(lots.filter(lot => lot.state == "true").sort((a,b) => a.name.localeCompare(b.name)));
+        lotsList.push(lots.filter(lot => lot.state == "indetermined").sort((a,b) => a.name.localeCompare(b.name)));
+        lotsList.push(lots.filter(lot => lot.state == "false").sort((a,b) => a.name.localeCompare(b.name)));
+        lotsList = lotsList.flat(); // flat array
+
         listHTML.html("");
-        lots.forEach(lot => templateLot(lot.id, lot, selectedDevicesIDs, listHTML, actions));
+        lotsList.forEach(lot => templateLot(lot, listHTML, actions));
     } catch (error) {
         console.log(error);
         listHTML.html("<li style=\"color: red; text-align: center\">Error feching devices and lots<br>(see console for more details)</li>");

ereuse_devicehub/templates/ereuse_devicehub/base.html

@@ -29,6 +29,7 @@
 
   <!-- Template Main CSS File -->
   <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
+  <link href="{{ url_for('static', filename='css/devicehub.css') }}" rel="stylesheet">
 
   <!-- =======================================================
   * Template Name: NiceAdmin - v2.2.0
@@ -53,7 +54,7 @@
   <!-- Api backend -->
   <script>
     const API_URLS = {
-      Auth_Token: `Basic ${btoa("{{ current_user.token }}:")}`, // 
+      Auth_Token: `Basic ${btoa("{{ current_user.token }}:")}`, //
       currentUserID: "{{ current_user.id }}",
       lots: "{{ url_for('Lot.main') }}",
       lots_detail: "{{ url_for('inventory.lotdevicelist', lot_id='ReplaceTEXT') }}",

ereuse_devicehub/templates/inventory/device_list.html

@@ -79,9 +79,9 @@
                   <span class="caret"></span>
                 </button>
                 <span class="d-none" id="activeTradeModal" data-bs-toggle="modal" data-bs-target="#tradeLotModal"></span>
-                <ul class="dropdown-menu" aria-labelledby="btnLots" style="width: 300px;" id="dropDownLotsSelector">
+                <ul class="dropdown-menu" aria-labelledby="btnLots" id="dropDownLotsSelector">
                   <h6 class="dropdown-header">Select some devices to manage lots</h6>
-                  <ul style="list-style-type: none; margin: 0; padding: 0;" class="mx-3" id="LotsSelector"></ul>
+                  <ul class="mx-3" id="LotsSelector"></ul>
                   <li><hr /></li>
                   <li>
                     <a href="#" class="dropdown-item" id="ApplyDeviceLots">