Merge branch SearchPR and DeviceLotsList

CHANGELOG.md

@@ -9,6 +9,7 @@ ml).
 
 ## testing
 - [changed] #218 add reactivit to device lots
+- [added] #219 add functionality to searchbar (Lots and devices)
 - [changed] #211 Print DHID-QR label for selected devices.
 - [fixed] #214 Login workflow
 

ereuse_devicehub/static/js/api.js

@@ -0,0 +1,76 @@
+const Api = {
+    /**
+     * get lots id
+     * @returns get lots
+     */
+    async get_lots() {
+        var request = await this.doRequest(API_URLS.lots, "GET", null);
+        if (request != undefined) return request.items;
+        throw request;
+    },
+
+    /**
+     * Get filtered devices info
+     * @param {number[]} ids devices ids
+     * @returns full detailed device list
+     */
+    async get_devices(ids) {
+        var request = await this.doRequest(API_URLS.devices + '?filter={"id": [' + ids.toString() + ']}', "GET", null);
+        if (request != undefined) return request.items;
+        throw request;
+    },
+
+    /**
+         * Get filtered devices info
+         * @param {number[]} ids devices ids
+         * @returns full detailed device list
+         */
+    async search_device(id) {
+        var request = await this.doRequest(API_URLS.devices + '?filter={"devicehub_id": ["' + id + '"]}', "GET", null)
+        if (request != undefined) return request.items
+        throw request
+    },
+
+    /**
+     * Add devices to lot
+     * @param {number} lotID lot id
+     * @param {number[]} listDevices list devices id
+     */
+    async devices_add(lotID, listDevices) {
+        var queryURL = API_URLS.devices_modify.replace("UUID", lotID) + "?" + listDevices.map(deviceID => "id=" + deviceID).join("&");
+        return await Api.doRequest(queryURL, "POST", null);
+    },
+
+    /**
+     * Remove devices from a lot
+     * @param {number} lotID lot id
+     * @param {number[]} listDevices list devices id
+     */
+    async devices_remove(lotID, listDevices) {
+        var queryURL = API_URLS.devices_modify.replace("UUID", lotID) + "?" + listDevices.map(deviceID => "id=" + deviceID).join("&");
+        return await Api.doRequest(queryURL, "DELETE", null);
+    },
+
+    /**
+     * 
+     * @param {string} url URL to be requested
+     * @param {String} type Action type
+     * @param {String | Object} body body content
+     * @returns 
+     */
+    async doRequest(url, type, body) {
+        var result;
+        try {
+            result = await $.ajax({
+                url: url,
+                type: type,
+                headers: { "Authorization": API_URLS.Auth_Token },
+                body: body
+            });
+            return result;
+        } catch (error) {
+            console.error(error);
+            throw error;
+        }
+    }
+}

ereuse_devicehub/static/js/main.js

@@ -252,4 +252,132 @@
     event.stopPropagation();
   })
 
+  /**
+   * Search form functionality
+   */
+  window.addEventListener("DOMContentLoaded", () => {
+    var searchForm = document.getElementById("SearchForm")
+    var inputSearch = document.querySelector("#SearchForm > input")
+    var doSearch = true
+
+    searchForm.addEventListener("submit", (event) => {
+      event.preventDefault();
+    })
+
+    let timeoutHandler = setTimeout(() => { }, 1)
+    let dropdownList = document.getElementById("dropdown-search-list")
+    let defaultEmptySearch = document.getElementById("dropdown-search-list").innerHTML
+
+
+    inputSearch.addEventListener("input", (e) => {
+      clearTimeout(timeoutHandler)
+      let searchText = e.target.value
+      if (searchText == '') {
+        document.getElementById("dropdown-search-list").innerHTML = defaultEmptySearch;
+        return
+      }
+
+      let resultCount = 0;
+      function searchCompleted() {
+        resultCount++;
+        if (resultCount < 2 && document.getElementById("dropdown-search-list").children.length > 0) {
+          setTimeout(() => {
+            document.getElementById("dropdown-search-list").innerHTML = `
+            <li id="deviceSearchLoader" class="dropdown-item">
+            <i class="bi bi-x-lg"></i>
+                    <span style="margin-right: 10px">Nothing found</span>
+            </li>`
+          }, 100)
+        }
+      }
+
+      timeoutHandler = setTimeout(async () => {
+        dropdownList.innerHTML = `
+        <li id="deviceSearchLoader" class="dropdown-item">
+            <i class="bi bi-laptop"></i>
+            <div class="spinner-border spinner-border-sm" role="status">
+                <span class="visually-hidden">Loading...</span>
+            </div>
+        </li>
+        <li id="lotSearchLoader" class="dropdown-item">
+            <i class="bi bi-folder2"></i>
+            <div class="spinner-border spinner-border-sm" role="status">
+                <span class="visually-hidden">Loading...</span>
+            </div>
+        </li>`;
+
+
+        try {
+          Api.search_device(searchText.toUpperCase()).then(devices => {
+            dropdownList.querySelector("#deviceSearchLoader").style = "display: none"
+
+            for (let i = 0; i < devices.length; i++) {
+              const device = devices[i];
+
+              // See: ereuse_devicehub/resources/device/models.py
+              var verboseName = `${device.type} ${device.manufacturer} ${device.model}`
+
+              const templateString = `
+              <li>
+                  <a class="dropdown-item" href="${API_URLS.devices_detail.replace("ReplaceTEXT", device.devicehubID)}" style="display: flex; align-items: center;" href="#">
+                      <i class="bi bi-laptop"></i>
+                      <span style="margin-right: 10px">${verboseName}</span>
+                      <span class="badge bg-secondary" style="margin-left: auto;">${device.devicehubID}</span>
+                  </a>
+              </li>`;
+              dropdownList.innerHTML += templateString
+              if (i == 4) { // Limit to 4 resullts
+                break;
+              }
+            }
+
+            searchCompleted();
+          })
+        } catch (error) {
+          dropdownList.innerHTML += `
+          <li id="deviceSearchLoader" class="dropdown-item">
+          <i class="bi bi-x"></i>
+              <div class="spinner-border spinner-border-sm" role="status">
+                  <span class="visually-hidden">Error searching devices</span>
+              </div>
+          </li>`;
+          console.log(error);
+        }
+
+        try {
+          Api.get_lots().then(lots => {
+            dropdownList.querySelector("#lotSearchLoader").style = "display: none"
+            for (let i = 0; i < lots.length; i++) {
+              const lot = lots[i];
+              if (lot.name.toUpperCase().includes(searchText.toUpperCase())) {
+                const templateString = `
+                <li>
+                    <a class="dropdown-item" href="${API_URLS.lots_detail.replace("ReplaceTEXT", lot.id)}" style="display: flex; align-items: center;" href="#">
+                        <i class="bi bi-folder2"></i>
+                        <span style="margin-right: 10px">${lot.name}</span>
+                    </a>
+                </li>`;
+                dropdownList.innerHTML += templateString
+                if (i == 4) { // Limit to 4 resullts
+                  break;
+                }
+              }
+            }
+            searchCompleted();
+          })
+
+        } catch (error) {
+          dropdownList.innerHTML += `
+          <li id="deviceSearchLoader" class="dropdown-item">
+          <i class="bi bi-x"></i>
+              <div class="spinner-border spinner-border-sm" role="status">
+                  <span class="visually-hidden">Error searching lots</span>
+              </div>
+          </li>`;
+          console.log(error);
+        }
+      }, 1000)
+    })
+  })
+
 })();

ereuse_devicehub/static/js/main_inventory.js

@@ -182,77 +182,10 @@ function export_file(type_file) {
 }
 
 
-
 /**
  * Reactive lots button
  */
 async function processSelectedDevices() {
-    const Api = {
-        /**
-         * get lots id
-         * @returns get lots
-         */
-        async get_lots() {
-            var request = await this.doRequest(API_URLS.lots, "GET", null);
-            if (request != undefined) return request.items;
-            throw request;
-        },
-
-        /**
-         * Get filtered devices info
-         * @param {number[]} ids devices ids
-         * @returns full detailed device list
-         */
-        async get_devices(ids) {
-            var request = await this.doRequest(API_URLS.devices + '?filter={"id": [' + ids.toString() + ']}', "GET", null);
-            if (request != undefined) return request.items;
-            throw request;
-        },
-
-        /**
-         * Add devices to lot
-         * @param {number} lotID lot id
-         * @param {number[]} listDevices list devices id
-         */
-        async devices_add(lotID, listDevices) {
-            var queryURL = API_URLS.devices_modify.replace("UUID", lotID) + "?" + listDevices.map(deviceID => "id=" + deviceID).join("&");
-            return await Api.doRequest(queryURL, "POST", null);
-        },
-
-        /**
-         * Remove devices from a lot
-         * @param {number} lotID lot id
-         * @param {number[]} listDevices list devices id
-         */
-        async devices_remove(lotID, listDevices) {
-            var queryURL = API_URLS.devices_modify.replace("UUID", lotID) + "?" + listDevices.map(deviceID => "id=" + deviceID).join("&");
-            return await Api.doRequest(queryURL, "DELETE", null);
-        },
-
-        /**
-         * 
-         * @param {string} url URL to be requested
-         * @param {String} type Action type
-         * @param {String | Object} body body content
-         * @returns 
-         */
-        async doRequest(url, type, body) {
-            var result;
-            try {
-                result = await $.ajax({
-                    url: url,
-                    type: type,
-                    headers: { "Authorization": API_URLS.Auth_Token },
-                    body: body
-                });
-                return result;
-            } catch (error) {
-                console.error(error);
-                throw error;
-            }
-        }
-    }
-
     class Actions {
 
         constructor() {

ereuse_devicehub/templates/ereuse_devicehub/base.html

@@ -50,6 +50,20 @@
   <!-- Template Main JS File -->
   <script src="{{ url_for('static', filename='js/main.js') }}"></script>
 
+  <!-- Api backend -->
+  <script>
+    const API_URLS = {
+      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') }}",
+      devices: "{{ url_for('Device.main') }}",
+      devices_modify: "{{ url_for('Lot.lot-device', id='UUID') }}",
+      devices_detail: "{{ url_for('inventory.device_details', id='ReplaceTEXT')}}"
+    }
+  </script>
+  <script src="{{ url_for('static', filename='js/api.js') }}"></script>
+
 </body>
 
 </html>

ereuse_devicehub/templates/ereuse_devicehub/base_site.html

@@ -12,9 +12,21 @@
   </div><!-- End Logo -->
 
   <div class="search-bar">
-    <form class="search-form d-flex align-items-center" method="POST" action="#">
-      <input type="text" name="query" placeholder="Search" title="Enter search keyword">
+    <form class="search-form d-flex align-items-center" method="" id="SearchForm" action="#">
+      <input class="dropdown-toggle" type="text" name="query" placeholder="Search" title="Enter search keyword"
+        autocomplete="off" id="dropdownSearch" data-bs-toggle="dropdown" aria-expanded="false">
       <button type="submit" title="Search"><i class="bi bi-search"></i></button>
+
+      <ul class="dropdown-menu" autoClose="outside" aria-labelledby="dropdownSearch" id="dropdown-search-list"
+        style="min-width: 100px;">
+        <li class="dropdown-header">
+          <h6 class="dropdown-header">You can search:</h6>
+        </li>
+        <li class="dropdown-item"><i class="bi bi-laptop"></i> Devices <span class="badge bg-secondary"
+            style="float: right;">DHID</span></li>
+        <li class="dropdown-item"><i class="bi bi-folder2"></i> lots <span class="badge bg-secondary"
+            style="float: right;">Name</span></li>
+      </ul>
     </form>
   </div><!-- End Search Bar -->
 
@@ -154,7 +166,8 @@
         {% else %}
         <a class="nav-link collapsed" data-bs-target="#temporal-lots-nav" data-bs-toggle="collapse" href="#">
           {% endif %}
-        <i class="bi bi-layout-text-window-reverse"></i><span>Temporary Lots</span><i class="bi bi-chevron-down ms-auto"></i>
+          <i class="bi bi-layout-text-window-reverse"></i><span>Temporary Lots</span><i
+            class="bi bi-chevron-down ms-auto"></i>
         </a>
         {% if lot and lot.is_temporary %}
         <ul id="temporal-lots-nav" class="nav-content collapse show" data-bs-parent="#sidebar-nav">
@@ -197,7 +210,8 @@
   <div class="alert alert-{{ level}} alert-dismissible fade show" role="alert">
     {% if '_message_icon' in session %}
     <i class="bi bi-{{ session['_message_icon'][level]}} me-1"></i>
-        {% else %}<!-- fallback if 3rd party libraries (e.g. flask_login.login_required) -->
+    {% else %}
+    <!-- fallback if 3rd party libraries (e.g. flask_login.login_required) -->
     <i class="bi bi-info-circle me-1"></i>
     {% endif %}
     {{ message }}
@@ -224,14 +238,4 @@
   </div>
 </footer><!-- End Footer -->
 
-<script>
-  const API_URLS = {
-    Auth_Token: `Basic ${btoa("{{ current_user.token }}:")}`, // 
-    currentUserID: "{{ current_user.id }}",
-    lots: "{{ url_for('Lot.main') }}",
-    devices: "{{ url_for('Device.main') }}",
-    devices_modify: "{{ url_for('Lot.lot-device', id='UUID') }}",
-  }
-</script>
-
 {% endblock body %}