Merge pull request #273 from RubenPX/feature/lots-search

Feature: lots-search US 3334

.eslintrc.json

@@ -28,7 +28,7 @@
         "class-methods-use-this": "off",
         "eqeqeq": "warn",
         "radix": "warn",
-        "max-classes-per-file": ["error", 2]
+        "max-classes-per-file": "warn"
     },
     "globals": {
         "API_URLS": true,

CHANGELOG.md

@@ -8,6 +8,7 @@ ml).
 ## master
 
 ## testing
+- [added] #273 Allow search/filter lots on lots management component.
 
 ## [2.1.1] - 2022-05-11
 Hot fix release.

ereuse_devicehub/static/js/main.js

@@ -218,9 +218,13 @@
   /**
    * Avoid hide dropdown when user clicked inside
    */
-  document.getElementById("dropDownLotsSelector").addEventListener("click", event => {
-    event.stopPropagation();
-  })
+  const dropdownLotSelector = document.getElementById("dropDownLotsSelector")
+  if (dropdownLotSelector != null) { // If exists selector it will set click event
+    dropdownLotSelector.addEventListener("click", event => {
+      event.stopPropagation();
+    })
+  }
+
 
   /**
    * Search form functionality

ereuse_devicehub/static/js/main_inventory.build.js

@@ -1,5 +1,7 @@
 "use strict";
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 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"); } }
@@ -328,11 +330,59 @@ function export_file(type_file) {
     $("#exportAlertModal").click();
   }
 }
+
+class lotsSearcher {
+  static enable() {
+    if (this.lotsSearchElement) this.lotsSearchElement.disabled = false;
+  }
+
+  static disable() {
+    if (this.lotsSearchElement) this.lotsSearchElement.disabled = true;
+  }
+  /**
+   * do search when lot change in the search input
+   */
+
+
+  static doSearch(inputSearch) {
+    const lots = this.getListLots();
+
+    for (let i = 0; i < lots.length; i++) {
+      if (lot.innerText.toLowerCase().includes(inputSearch.toLowerCase())) {
+        lot.parentElement.style.display = "";
+      } else {
+        lot.parentElement.style.display = "none";
+      }
+    }
+  }
+
+}
+
+_defineProperty(lotsSearcher, "lots", []);
+
+_defineProperty(lotsSearcher, "lotsSearchElement", null);
+
+_defineProperty(lotsSearcher, "getListLots", () => {
+  let lotsList = document.getElementById("LotsSelector");
+
+  if (lotsList) {
+    // Apply filter to get only labels
+    return Array.from(lotsList.children).filter(item => item.querySelector("label"));
+  }
+
+  return [];
+});
+
+document.addEventListener("DOMContentLoaded", () => {
+  lotsSearcher.lotsSearchElement = document.getElementById("lots-search");
+  lotsSearcher.lotsSearchElement.addEventListener("input", e => {
+    lotsSearcher.doSearch(e.target.value);
+  });
+});
 /**
  * Reactive lots button
  */
 
-
 async function processSelectedDevices() {
   class Actions {
     constructor() {
@@ -584,6 +634,7 @@ async function processSelectedDevices() {
   document.getElementById("ApplyDeviceLots").classList.add("disabled");
 
   try {
+    lotsSearcher.disable();
     listHTML.html("<li style=\"text-align: center\"><div class=\"spinner-border text-info\" style=\"margin: auto\" role=\"status\"></div></li>");
     const selectedDevices = await Api.get_devices(selectedDevicesID);
     let lots = await Api.get_lots();
@@ -614,6 +665,7 @@ async function processSelectedDevices() {
 
     listHTML.html("");
     lotsList.forEach(lot => templateLot(lot, selectedDevices, listHTML, actions));
+    lotsSearcher.enable();
   } 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/static/js/main_inventory.js

@@ -103,8 +103,8 @@ const selectorController = (action) => {
     function itemListCheckChanged() {
         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>`
-                    : "<a href=\"#\" class=\"ml-3\">Cancel selection</a>"
+                ? `<a href="#" class="ml-3">Select all devices (${TableController.getAllDevices().length})</a>`
+                : "<a href=\"#\" class=\"ml-3\">Cancel selection</a>"
             }`;
 
         if (TableController.getSelectedDevices().length <= 0) {
@@ -317,6 +317,47 @@ function export_file(type_file) {
     }
 }
 
+class lotsSearcher {
+    static lots = [];
+
+    static lotsSearchElement = null;
+    
+    static getListLots = () => {
+        const lotsList = document.getElementById("LotsSelector")
+        if (lotsList) {
+                                                 // Apply filter to get only labels
+            return Array.from(lotsList.children).filter(item => item.querySelector("label"));
+        }
+        return [];
+    }
+
+    static enable() {
+        if (this.lotsSearchElement) this.lotsSearchElement.disabled = false;
+    }
+
+    static disable() {
+        if (this.lotsSearchElement) this.lotsSearchElement.disabled = true;
+    }
+
+    /**
+     * do search when lot change in the search input
+     */
+    static doSearch(inputSearch) {
+        const lots = this.getListLots();
+        for (let i = 0; i < lots.length; i++) {
+            if (lot.innerText.toLowerCase().includes(inputSearch.toLowerCase())) {
+                lot.parentElement.style.display = "";
+            } else {
+                lot.parentElement.style.display = "none";
+            }
+        }
+    }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    lotsSearcher.lotsSearchElement = document.getElementById("lots-search");
+    lotsSearcher.lotsSearchElement.addEventListener("input", (e) => { lotsSearcher.doSearch(e.target.value) })
+})
 
 /**
  * Reactive lots button
@@ -557,6 +598,7 @@ async function processSelectedDevices() {
     document.getElementById("ApplyDeviceLots").classList.add("disabled");
 
     try {
+        lotsSearcher.disable()
         listHTML.html("<li style=\"text-align: center\"><div class=\"spinner-border text-info\" style=\"margin: auto\" role=\"status\"></div></li>")
         const selectedDevices = await Api.get_devices(selectedDevicesID);
         let lots = await Api.get_lots();
@@ -589,6 +631,7 @@ async function processSelectedDevices() {
 
         listHTML.html("");
         lotsList.forEach(lot => templateLot(lot, selectedDevices, listHTML, actions));
+        lotsSearcher.enable();
     } 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/inventory/device_list.html

@@ -87,7 +87,16 @@
                   <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" id="dropDownLotsSelector">
+                  <div class="row w-100">
+                    <div class="input-group mb-3 mx-2">
+                      <div class="input-group-prepend">
+                        <span class="input-group-text" id="basic-addon1"><i class="bi bi-search"></i></span>
+                      </div>
+                      <input type="text" class="form-control" id="lots-search" placeholder="search" aria-label="search" aria-describedby="basic-addon1">
+                    </div>
+                  </div>
                   <h6 class="dropdown-header">Select lots where to store the selected devices</h6>
                   <ul class="mx-3" id="LotsSelector"></ul>
                   <li><hr /></li>