Merge branch 'testing' into feature/extend-user-datas-#3016

.eslintignore

@@ -0,0 +1,4 @@
+ereuse_devicehub/static/vendor
+ereuse_devicehub/static/js/print.pdf.js
+ereuse_devicehub/static/js/qrcode.js
+*.min.js

.eslintrc.json

@@ -0,0 +1,36 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true,
+        "jquery": true
+    },
+    "extends": [
+        "airbnb",
+        "prettier"
+    ],
+    "plugins": [
+        "prettier"
+    ],
+    "parserOptions": {
+        "ecmaVersion": "latest"
+    },
+    "rules": {
+        "quotes": ["error","double"],
+        "no-use-before-define": "off",
+        "no-unused-vars": "warn",
+        "no-undef": "warn",
+        "camelcase": "off",
+        "no-console": "off",
+        "no-plusplus": "off",
+        "no-param-reassign": "off",
+        "no-new": "warn",
+        "strict": "off",
+        "class-methods-use-this": "off",
+        "eqeqeq": "warn",
+        "radix": "warn"
+    },
+    "globals": {
+        "API_URLS": true,
+        "Api": true
+    }
+}

.github/workflows/eslint.yml

@@ -0,0 +1,55 @@
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+# ESLint is a tool for identifying and reporting on patterns
+# found in ECMAScript/JavaScript code.
+# More details at https://github.com/eslint/eslint
+# and https://eslint.org
+
+name: ESLint
+
+on:
+  push:
+    branches: [master, testing]
+  pull_request_target:
+    branches: [master, testing]
+
+jobs:
+  build: 
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - uses: actions/setup-node@v1
+      with:
+        node-version: '16'
+    - name: Install dependencies
+      run: npm install
+    - name: Run linters
+      uses: wearerequired/lint-action@v1
+      with:
+        eslint: true
+        prettier: false
+        commit_message: "Fix code style issues with ${linter}"
+        auto_fix: true
+        commit: true
+        github_token: "${{ secrets.GITHUB_TOKEN }}"
+        git_name: "Lint Action"
+    - name: Save Code Linting Report JSON
+      # npm script for ESLint
+      # eslint --output-file eslint_report.json --format json src
+      # See https://eslint.org/docs/user-guide/command-line-interface#options
+      run: npm run lint:report
+      # Continue to the next step even if this fails
+      continue-on-error: true
+    - name: Annotate Code Linting Results
+      uses: ataylorme/eslint-annotate-action@1.2.0
+      with:
+        repo-token: ${{ secrets.GITHUB_TOKEN }}
+        report-json: "eslint_report.json"
+        only-pr-files: true
+    - name: Upload ESLint report
+      uses: actions/upload-artifact@v2
+      with:
+        name: eslint_report.json
+        path: eslint_report.json

.gitignore

@@ -119,3 +119,11 @@ ENV/
 
 # Temporal dir
 tmp/
+
+# NPM modules
+node_modules/
+yarn.lock
+
+# ESLint Report
+eslint_report.json
+

.prettierrc.json

@@ -0,0 +1,3 @@
+{
+    "printWidth": 250
+}

CHANGELOG.md

@@ -8,7 +8,9 @@ ml).
 ## master
 
 ## testing
+- [added] #219 Add functionality to searchbar (Lots and devices).
 - [changed] #211 Print DHID-QR label for selected devices.
+- [changed] #218 Add reactivity to device lots.
 - [fixed] #214 Login workflow
 
 ## [2.0.0] - 2022-03-15

development-setup.md

@@ -30,11 +30,6 @@ Create a demo table
 export dhi=dbtest; dh dummy
 ```
 
-copy `examples/app.py` to project directory:
-```bash
-copy examples/app.py .
-```
-
 ## Run project
 
 Run the app

ereuse_devicehub/inventory/forms.py

@@ -97,62 +97,6 @@ class FilterForm(FlaskForm):
         return ['Desktop', 'Laptop', 'Server']
 
 
-class LotDeviceForm(FlaskForm):
-    lot = StringField('Lot', [validators.UUID()])
-    devices = StringField('Devices', [validators.length(min=1)])
-
-    def validate(self, extra_validators=None):
-        is_valid = super().validate(extra_validators)
-
-        if not is_valid:
-            return False
-
-        self._lot = (
-            Lot.query.outerjoin(Trade)
-            .filter(Lot.id == self.lot.data)
-            .filter(
-                or_(
-                    Trade.user_from == g.user,
-                    Trade.user_to == g.user,
-                    Lot.owner_id == g.user.id,
-                )
-            )
-            .one()
-        )
-
-        devices = set(self.devices.data.split(","))
-        self._devices = (
-            Device.query.filter(Device.id.in_(devices))
-            .filter(Device.owner_id == g.user.id)
-            .distinct()
-            .all()
-        )
-
-        return bool(self._devices)
-
-    def save(self, commit=True):
-        trade = self._lot.trade
-        if trade:
-            for dev in self._devices:
-                if trade not in dev.actions:
-                    trade.devices.add(dev)
-
-        if self._devices:
-            self._lot.devices.update(self._devices)
-            db.session.add(self._lot)
-
-        if commit:
-            db.session.commit()
-
-    def remove(self, commit=True):
-        if self._devices:
-            self._lot.devices.difference_update(self._devices)
-            db.session.add(self._lot)
-
-        if commit:
-            db.session.commit()
-
-
 class LotForm(FlaskForm):
     name = StringField('Name', [validators.length(min=1)])
 

ereuse_devicehub/inventory/views.py

@@ -16,7 +16,6 @@ from ereuse_devicehub.inventory.forms import (
     AllocateForm,
     DataWipeForm,
     FilterForm,
-    LotDeviceForm,
     LotForm,
     NewActionForm,
     NewDeviceForm,
@@ -109,7 +108,6 @@ class DeviceListMix(GenericMixView):
         self.context = {
             'devices': devices,
             'lots': lots,
-            'form_lot_device': LotDeviceForm(),
             'form_tag_device': TagDeviceForm(),
             'form_new_action': form_new_action,
             'form_new_allocate': form_new_allocate,
@@ -153,46 +151,6 @@ class DeviceDetailView(GenericMixView):
         return flask.render_template(self.template_name, **context)
 
 
-class LotDeviceAddView(View):
-    methods = ['POST']
-    decorators = [login_required]
-    template_name = 'inventory/device_list.html'
-
-    def dispatch_request(self):
-        form = LotDeviceForm()
-        if form.validate_on_submit():
-            form.save(commit=False)
-            messages.success(
-                'Add devices to lot "{}" successfully!'.format(form._lot.name)
-            )
-            db.session.commit()
-        else:
-            messages.error('Error adding devices to lot!')
-
-        next_url = request.referrer or url_for('inventory.devicelist')
-        return flask.redirect(next_url)
-
-
-class LotDeviceDeleteView(View):
-    methods = ['POST']
-    decorators = [login_required]
-    template_name = 'inventory/device_list.html'
-
-    def dispatch_request(self):
-        form = LotDeviceForm()
-        if form.validate_on_submit():
-            form.remove(commit=False)
-            messages.success(
-                'Remove devices from lot "{}" successfully!'.format(form._lot.name)
-            )
-            db.session.commit()
-        else:
-            messages.error('Error removing devices from lot!')
-
-        next_url = request.referrer or url_for('inventory.devicelist')
-        return flask.redirect(next_url)
-
-
 class LotCreateView(GenericMixView):
     methods = ['GET', 'POST']
     decorators = [login_required]
@@ -607,12 +565,6 @@ devices.add_url_rule(
 devices.add_url_rule(
     '/lot/<string:lot_id>/device/', view_func=DeviceListView.as_view('lotdevicelist')
 )
-devices.add_url_rule(
-    '/lot/devices/add/', view_func=LotDeviceAddView.as_view('lot_devices_add')
-)
-devices.add_url_rule(
-    '/lot/devices/del/', view_func=LotDeviceDeleteView.as_view('lot_devices_del')
-)
 devices.add_url_rule('/lot/add/', view_func=LotCreateView.as_view('lot_add'))
 devices.add_url_rule(
     '/lot/<string:id>/del/', view_func=LotDeleteView.as_view('lot_del')

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/api.js

@@ -0,0 +1,76 @@
+const Api = {
+    /**
+     * get lots id
+     * @returns get lots
+     */
+    async get_lots() {
+        const 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) {
+        const 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) {
+        const 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) {
+        const queryURL = `${API_URLS.devices_modify.replace("UUID", lotID)  }?${  listDevices.map(deviceID => `id=${  deviceID}`).join("&")}`;
+        return 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) {
+        const queryURL = `${API_URLS.devices_modify.replace("UUID", lotID)  }?${  listDevices.map(deviceID => `id=${  deviceID}`).join("&")}`;
+        return 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) {
+        let result;
+        try {
+            result = await $.ajax({
+                url,
+                type,
+                headers: { "Authorization": API_URLS.Auth_Token },
+                body
+            });
+            return result;
+        } catch (error) {
+            console.error(error);
+            throw error;
+        }
+    }
+}

ereuse_devicehub/static/js/create_device.js

@@ -1,15 +1,15 @@
-$(document).ready(function() {
+$(document).ready(() => {
    $("#type").on("change", deviceInputs);
    deviceInputs();
 })
 
 function deviceInputs() {
-    if ($("#type").val() == 'Monitor') {
+    if ($("#type").val() == "Monitor") {
         $("#screen").show();
         $("#resolution").show();
         $("#imei").hide();
         $("#meid").hide();
-    } else if (['Smartphone', 'Cellphone', 'Tablet'].includes($("#type").val())) {
+    } else if (["Smartphone", "Cellphone", "Tablet"].includes($("#type").val())) {
         $("#screen").hide();
         $("#resolution").hide();
         $("#imei").show();

ereuse_devicehub/static/js/main.js

@@ -4,7 +4,7 @@
 * Author: BootstrapMade.com
 * License: https://bootstrapmade.com/license/
 */
-(function() {
+(function () {
   "use strict";
 
   /**
@@ -14,9 +14,9 @@
     el = el.trim()
     if (all) {
       return [...document.querySelectorAll(el)]
-    } else {
+    } 
       return document.querySelector(el)
-    }
+    
   }
 
   /**
@@ -34,103 +34,101 @@
    * Easy on scroll event listener
    */
   const onscroll = (el, listener) => {
-    el.addEventListener('scroll', listener)
+    el.addEventListener("scroll", listener)
   }
 
   /**
    * Sidebar toggle
    */
-  if (select('.toggle-sidebar-btn')) {
+  if (select(".toggle-sidebar-btn")) {
-    on('click', '.toggle-sidebar-btn', function(e) {
+    on("click", ".toggle-sidebar-btn", (e) => {
-      select('body').classList.toggle('toggle-sidebar')
+      select("body").classList.toggle("toggle-sidebar")
     })
   }
 
   /**
    * Search bar toggle
    */
-  if (select('.search-bar-toggle')) {
+  if (select(".search-bar-toggle")) {
-    on('click', '.search-bar-toggle', function(e) {
+    on("click", ".search-bar-toggle", (e) => {
-      select('.search-bar').classList.toggle('search-bar-show')
+      select(".search-bar").classList.toggle("search-bar-show")
     })
   }
 
   /**
    * Navbar links active state on scroll
    */
-  let navbarlinks = select('#navbar .scrollto', true)
+  const navbarlinks = select("#navbar .scrollto", true)
   const navbarlinksActive = () => {
-    let position = window.scrollY + 200
+    const position = window.scrollY + 200
     navbarlinks.forEach(navbarlink => {
       if (!navbarlink.hash) return
-      let section = select(navbarlink.hash)
+      const section = select(navbarlink.hash)
       if (!section) return
       if (position >= section.offsetTop && position <= (section.offsetTop + section.offsetHeight)) {
-        navbarlink.classList.add('active')
+        navbarlink.classList.add("active")
       } else {
-        navbarlink.classList.remove('active')
+        navbarlink.classList.remove("active")
       }
     })
   }
-  window.addEventListener('load', navbarlinksActive)
+  window.addEventListener("load", navbarlinksActive)
   onscroll(document, navbarlinksActive)
 
   /**
    * Toggle .header-scrolled class to #header when page is scrolled
    */
-  let selectHeader = select('#header')
+  const selectHeader = select("#header")
   if (selectHeader) {
     const headerScrolled = () => {
       if (window.scrollY > 100) {
-        selectHeader.classList.add('header-scrolled')
+        selectHeader.classList.add("header-scrolled")
       } else {
-        selectHeader.classList.remove('header-scrolled')
+        selectHeader.classList.remove("header-scrolled")
       }
     }
-    window.addEventListener('load', headerScrolled)
+    window.addEventListener("load", headerScrolled)
     onscroll(document, headerScrolled)
   }
 
   /**
    * Back to top button
    */
-  let backtotop = select('.back-to-top')
+  const backtotop = select(".back-to-top")
   if (backtotop) {
     const toggleBacktotop = () => {
       if (window.scrollY > 100) {
-        backtotop.classList.add('active')
+        backtotop.classList.add("active")
       } else {
-        backtotop.classList.remove('active')
+        backtotop.classList.remove("active")
       }
     }
-    window.addEventListener('load', toggleBacktotop)
+    window.addEventListener("load", toggleBacktotop)
     onscroll(document, toggleBacktotop)
   }
 
   /**
    * Initiate tooltips
    */
-  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+  const tooltipTriggerList = [].slice.call(document.querySelectorAll("[data-bs-toggle=\"tooltip\"]"))
-  var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
+  const tooltipList = tooltipTriggerList.map((tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl))
-    return new bootstrap.Tooltip(tooltipTriggerEl)
-  })
 
   /**
    * Initiate quill editors
    */
-  if (select('.quill-editor-default')) {
+  if (select(".quill-editor-default")) {
-    new Quill('.quill-editor-default', {
+    new Quill(".quill-editor-default", {
-      theme: 'snow'
+      theme: "snow"
     });
   }
 
-  if (select('.quill-editor-bubble')) {
+  if (select(".quill-editor-bubble")) {
-    new Quill('.quill-editor-bubble', {
+    new Quill(".quill-editor-bubble", {
-      theme: 'bubble'
+      theme: "bubble"
     });
   }
 
-  if (select('.quill-editor-full')) {
+  if (select(".quill-editor-full")) {
     new Quill(".quill-editor-full", {
       modules: {
         toolbar: [
@@ -141,31 +139,31 @@
           }],
           ["bold", "italic", "underline", "strike"],
           [{
-              color: []
+            color: []
-            },
+          },
-            {
+          {
-              background: []
+            background: []
-            }
+          }
           ],
           [{
-              script: "super"
+            script: "super"
-            },
+          },
-            {
+          {
-              script: "sub"
+            script: "sub"
-            }
+          }
           ],
           [{
-              list: "ordered"
+            list: "ordered"
-            },
+          },
-            {
+          {
-              list: "bullet"
+            list: "bullet"
-            },
+          },
-            {
+          {
-              indent: "-1"
+            indent: "-1"
-            },
+          },
-            {
+          {
-              indent: "+1"
+            indent: "+1"
-            }
+          }
           ],
           ["direction", {
             align: []
@@ -181,24 +179,24 @@
   /**
    * Initiate Bootstrap validation check
    */
-  var needsValidation = document.querySelectorAll('.needs-validation')
+  const needsValidation = document.querySelectorAll(".needs-validation")
 
   Array.prototype.slice.call(needsValidation)
-    .forEach(function(form) {
+    .forEach((form) => {
-      form.addEventListener('submit', function(event) {
+      form.addEventListener("submit", (event) => {
         if (!form.checkValidity()) {
           event.preventDefault()
           event.stopPropagation()
         }
 
-        form.classList.add('was-validated')
+        form.classList.add("was-validated")
       }, false)
     })
 
   /**
    * Initiate Datatables
    */
-  const datatables = select('.datatable', true)
+  const datatables = select(".datatable", true)
   datatables.forEach(datatable => {
     new simpleDatatables.DataTable(datatable);
   })
@@ -206,15 +204,178 @@
   /**
    * Autoresize echart charts
    */
-  const mainContainer = select('#main');
+  const mainContainer = select("#main");
   if (mainContainer) {
     setTimeout(() => {
-      new ResizeObserver(function() {
+      new ResizeObserver(() => {
-        select('.echart', true).forEach(getEchart => {
+        select(".echart", true).forEach(getEchart => {
           echarts.getInstanceByDom(getEchart).resize();
         })
       }).observe(mainContainer);
     }, 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
+   */
+  document.getElementById("dropDownLotsSelector").addEventListener("click", event => {
+    event.stopPropagation();
+  })
+
+  /**
+   * Search form functionality
+   */
+  window.addEventListener("DOMContentLoaded", () => {
+    const searchForm = document.getElementById("SearchForm")
+    const inputSearch = document.querySelector("#SearchForm > input")
+    const doSearch = true
+
+    searchForm.addEventListener("submit", (event) => {
+      event.preventDefault();
+    })
+
+    let timeoutHandler = setTimeout(() => { }, 1)
+    const dropdownList = document.getElementById("dropdown-search-list")
+    const defaultEmptySearch = document.getElementById("dropdown-search-list").innerHTML
+
+
+    inputSearch.addEventListener("input", (e) => {
+      clearTimeout(timeoutHandler)
+      const searchText = e.target.value
+      if (searchText == "") {
+        document.getElementById("dropdown-search-list").innerHTML = defaultEmptySearch;
+        return
+      }
+
+      let resultCount = 0;
+      function searchCompleted() {
+        resultCount++;
+        setTimeout(() => {
+          if (resultCount == 2 && document.getElementById("dropdown-search-list").children.length == 2) {
+            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
+              const 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

@@ -1,7 +1,7 @@
-$(document).ready(function() {
+$(document).ready(() => {
-    var show_allocate_form = $("#allocateModal").data('show-action-form');
+    const show_allocate_form = $("#allocateModal").data("show-action-form");
-    var show_datawipe_form = $("#datawipeModal").data('show-action-form');
+    const show_datawipe_form = $("#datawipeModal").data("show-action-form");
-    var show_trade_form = $("#tradeLotModal").data('show-action-form');
+    const show_trade_form = $("#tradeLotModal").data("show-action-form");
     if (show_allocate_form != "None") {
         $("#allocateModal .btn-primary").show();
         newAllocate(show_allocate_form);
@@ -18,7 +18,7 @@ $(document).ready(function() {
 })
 
 function deviceSelect() {
-    var devices_count = $(".deviceSelect").filter(':checked').length;
+    const devices_count = $(".deviceSelect").filter(":checked").length;
     get_device_list();
     if (devices_count == 0) {
         $("#addingLotModal .pol").show();
@@ -60,7 +60,7 @@ function deviceSelect() {
 }
 
 function removeLot() {
-    var devices = $(".deviceSelect");
+    const devices = $(".deviceSelect");
     if (devices.length > 0) {
         $("#btnRemoveLots .text-danger").show();
     } else {
@@ -70,10 +70,10 @@ function removeLot() {
 }
 
 function removeTag() {
-    var devices = $(".deviceSelect").filter(':checked');
+    const devices = $(".deviceSelect").filter(":checked");
-    var devices_id = $.map(devices, function(x) { return $(x).attr('data')});
+    const devices_id = $.map(devices, (x) => $(x).attr("data"));
     if (devices_id.length == 1) {
-        var url = "/inventory/tag/devices/"+devices_id[0]+"/del/";
+        const url = `/inventory/tag/devices/${devices_id[0]}/del/`;
         window.location.href = url;
     } else {
         $("#unlinkTagAlertModal").click();
@@ -81,8 +81,8 @@ function removeTag() {
 }
 
 function addTag() {
-    var devices = $(".deviceSelect").filter(':checked');
+    const devices = $(".deviceSelect").filter(":checked");
-    var devices_id = $.map(devices, function(x) { return $(x).attr('data')});
+    const devices_id = $.map(devices, (x) => $(x).attr("data"));
     if (devices_id.length == 1) {
         $("#addingTagModal .pol").hide();
         $("#addingTagModal .btn-primary").show();
@@ -95,20 +95,20 @@ function addTag() {
 }
 
 function newTrade(action) {
-    var title = "Trade "
+    let title = "Trade "
-    var user_to = $("#user_to").data("email");
+    const user_to = $("#user_to").data("email");
-    var user_from = $("#user_from").data("email");
+    const user_from = $("#user_from").data("email");
-    if (action == 'user_from') {
+    if (action == "user_from") {
-        title = 'Trade Incoming';
+        title = "Trade Incoming";
-        $("#user_to").attr('readonly', 'readonly');
+        $("#user_to").attr("readonly", "readonly");
-        $("#user_from").prop('readonly', false);
+        $("#user_from").prop("readonly", false);
-        $("#user_from").val('');
+        $("#user_from").val("");
         $("#user_to").val(user_to);
-    } else if (action == 'user_to') {
+    } else if (action == "user_to") {
-        title = 'Trade Outgoing';
+        title = "Trade Outgoing";
-        $("#user_from").attr('readonly', 'readonly');
+        $("#user_from").attr("readonly", "readonly");
-        $("#user_to").prop('readonly', false);
+        $("#user_to").prop("readonly", false);
-        $("#user_to").val('');
+        $("#user_to").val("");
         $("#user_from").val(user_from);
     }
     $("#tradeLotModal #title-action").html(title);
@@ -137,46 +137,272 @@ function newDataWipe(action) {
 }
 
 function get_device_list() {
-    var devices = $(".deviceSelect").filter(':checked');
+    const devices = $(".deviceSelect").filter(":checked");
 
     /* Insert the correct count of devices in actions form */
-    var devices_count = devices.length;
+    const devices_count = devices.length;
     $("#datawipeModal .devices-count").html(devices_count);
     $("#allocateModal .devices-count").html(devices_count);
     $("#actionModal .devices-count").html(devices_count);
 
     /* Insert the correct value in the input devicesList */
-    var devices_id = $.map(devices, function(x) { return $(x).attr('data')}).join(",");
+    const devices_id = $.map(devices, (x) => $(x).attr("data")).join(",");
-    $.map($(".devicesList"), function(x) {
+    $.map($(".devicesList"), (x) => {
         $(x).val(devices_id);
     });
 
     /* Create a list of devices for human representation */
-    var computer = {
+    const computer = {
         "Desktop": "<i class='bi bi-building'></i>",
         "Laptop": "<i class='bi bi-laptop'></i>",
     };
-    list_devices = devices.map(function (x) {
+    list_devices = devices.map((x) => {
-        var typ = $(devices[x]).data("device-type");
+        let typ = $(devices[x]).data("device-type");
-        var manuf = $(devices[x]).data("device-manufacturer");
+        const manuf = $(devices[x]).data("device-manufacturer");
-        var dhid = $(devices[x]).data("device-dhid");
+        const dhid = $(devices[x]).data("device-dhid");
         if (computer[typ]) {
             typ = computer[typ];
         };
-        return typ + " " + manuf + " " + dhid;
+        return `${typ  } ${  manuf  } ${  dhid}`;
     });
 
-    description = $.map(list_devices, function(x) { return x }).join(", ");
+    description = $.map(list_devices, (x) => x).join(", ");
     $(".enumeration-devices").html(description);
 }
 
 function export_file(type_file) {
-    var devices = $(".deviceSelect").filter(':checked');
+    const devices = $(".deviceSelect").filter(":checked");
-    var devices_id = $.map(devices, function(x) { return $(x).attr('data-device-dhid')}).join(",");
+    const devices_id = $.map(devices, (x) => $(x).attr("data-device-dhid")).join(",");
     if (devices_id){
-        var url = "/inventory/export/"+type_file+"/?ids="+devices_id;
+        const url = `/inventory/export/${type_file}/?ids=${devices_id}`;
         window.location.href = url;
     } else {
         $("#exportAlertModal").click();
     }
 }
+
+
+/**
+ * Reactive lots button
+ */
+async function processSelectedDevices() {
+    class Actions {
+
+        constructor() {
+            this.list = []; // list of petitions of requests @item --> {type: ["Remove" | "Add"], "LotID": string, "devices": number[]}
+        }
+
+        /**
+         * Manage the actions that will be performed when applying the changes
+         * @param {*} ev event (Should be a checkbox type)
+         * @param {string} lotID lot id
+         * @param {number} deviceID device id
+         */
+        manage(event, lotID, deviceListID) {
+            event.preventDefault();
+            const srcElement = event.srcElement.parentElement.children[0]
+            const {indeterminate} = srcElement;
+            const checked = !srcElement.checked;
+
+            const found = this.list.filter(list => list.lotID == lotID)[0];
+            const foundIndex = found != undefined ? this.list.findLastIndex(x => x.lotID == found.lotID) : -1;
+
+            if (checked) {
+                if (found != undefined && found.type == "Remove") {
+                    if (found.isFromIndeterminate == true) {
+                        found.type = "Add";
+                        this.list[foundIndex] = found;
+                    } else {
+                        this.list = this.list.filter(list => list.lotID != lotID);
+                    }
+                } else {
+                    this.list.push({ type: "Add", lotID, devices: deviceListID, isFromIndeterminate: indeterminate });
+                }
+            } else if (found != undefined && found.type == "Add") {
+                    if (found.isFromIndeterminate == true) {
+                        found.type = "Remove";
+                        this.list[foundIndex] = found;
+                    } else {
+                        this.list = this.list.filter(list => list.lotID != lotID);
+                    }
+                } else {
+                    this.list.push({ type: "Remove", lotID, devices: deviceListID, isFromIndeterminate: indeterminate });
+                }
+
+            if (this.list.length > 0) {
+                document.getElementById("ApplyDeviceLots").classList.remove("disabled");
+            } else {
+                document.getElementById("ApplyDeviceLots").classList.add("disabled");
+            }
+        }
+
+        /**
+         * Creates notification to give feedback to user
+         * @param {string} title notification title
+         * @param {string | null} toastText notification text
+         * @param {boolean} isError defines if a toast is a error
+         */
+        notifyUser(title, toastText, isError) {
+            const toast = document.createElement("div");
+            toast.classList = `alert alert-dismissible fade show ${  isError ? "alert-danger" : "alert-success"}`;
+            toast.attributes["data-autohide"] = !isError;
+            toast.attributes.role = "alert";
+            toast.style = "margin-left: auto; width: fit-content;";
+            toast.innerHTML = `<strong>${title}</strong><button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>`;
+            if (toastText && toastText.length > 0) {
+                toast.innerHTML += `<br>${toastText}`;
+            }
+
+            document.getElementById("NotificationsContainer").appendChild(toast);
+            if (!isError) {
+                setTimeout(() => toast.classList.remove("show"), 3000);
+            }
+            setTimeout(() => document.getElementById("NotificationsContainer").innerHTML == "", 3500);
+        }
+
+        /**
+         * Get actions and execute call request to add or remove devices from lots
+         */
+        doActions() {
+            let requestCount = 0; // This is for count all requested api count, to perform reRender of table device list
+            this.list.forEach(async action => {
+                if (action.type == "Add") {
+                    try {
+                        await Api.devices_add(action.lotID, action.devices);
+                        this.notifyUser("Devices sucefully aded to selected lot/s", "", false);
+                    } catch (error) {
+                        this.notifyUser("Failed to add devices to selected lot/s", error.responseJSON.message, true);
+                    }
+                } else if (action.type == "Remove") {
+                    try {
+                        await Api.devices_remove(action.lotID, action.devices);
+                        this.notifyUser("Devices sucefully removed from selected lot/s", "", false);
+                    } catch (error) {
+                        this.notifyUser("Fail to remove devices from selected lot/s", error.responseJSON.message, true);
+                    }
+                }
+                requestCount += 1
+                if (requestCount == this.list.length) {
+                    this.reRenderTable();
+                    this.list = [];
+                }
+            })
+            document.getElementById("dropDownLotsSelector").classList.remove("show");
+        }
+
+        /**
+         * Re-render list in table
+         */
+        async reRenderTable() {
+            const newRequest = await Api.doRequest(window.location)
+
+            const tmpDiv = document.createElement("div")
+            tmpDiv.innerHTML = newRequest
+
+            const oldTable = Array.from(document.querySelectorAll("table.table > tbody > tr .deviceSelect")).map(x => x.attributes["data-device-dhid"].value)
+            const newTable = Array.from(tmpDiv.querySelectorAll("table.table > tbody > tr .deviceSelect")).map(x => x.attributes["data-device-dhid"].value)
+
+            for (let i = 0; i < oldTable.length; i++) {
+                if (!newTable.includes(oldTable[i])) {
+                    // variable from device_list.html --> See: ereuse_devicehub\templates\inventory\device_list.html (Ln: 411)
+                    table.rows().remove(i)
+                }
+            }
+        }
+    }
+
+    let eventClickActions;
+
+    /**
+     * Generates a list item with a correspondient checkbox state
+     * @param {String} lotID 
+     * @param {String} lotName 
+     * @param {Array<number>} selectedDevicesIDs
+     * @param {HTMLElement} target
+     */
+    function templateLot(lot, elementTarget, actions) {
+        elementTarget.innerHTML = ""
+        const {id, name, state} = lot;
+
+        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="${id}">${name}</label>`;
+
+        const doc = document.createElement("li");
+        doc.innerHTML = htmlTemplate;
+
+        switch (state) {
+            case "true":
+                doc.children[0].checked = true;
+                break;
+            case "false":
+                doc.children[0].checked = false;
+                break;
+            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, id, selectedDevicesIDs));
+        doc.children[1].addEventListener("mouseup", (ev) => actions.manage(ev, id, selectedDevicesIDs));
+        elementTarget.append(doc);
+    }
+
+    const listHTML = $("#LotsSelector")
+
+    // Get selected devices
+    const selectedDevicesIDs = $.map($(".deviceSelect").filter(":checked"), (x) => parseInt($(x).attr("data")));
+    if (selectedDevicesIDs.length <= 0) {
+        listHTML.html("<li style=\"color: red; text-align: center\">No devices selected</li>");
+        return;
+    }
+
+    // Initialize Actions list, and set checkbox triggers
+    const actions = new Actions();
+    if (eventClickActions) {
+        document.getElementById("ApplyDeviceLots").removeEventListener(eventClickActions);
+    }
+    eventClickActions = document.getElementById("ApplyDeviceLots").addEventListener("click", () => actions.doActions());
+    document.getElementById("ApplyDeviceLots").classList.add("disabled");
+
+    try {
+        listHTML.html("<li style=\"text-align: center\"><div class=\"spinner-border text-info\" style=\"margin: auto\" role=\"status\"></div></li>")
+        const devices = await Api.get_devices(selectedDevicesIDs);
+        let lots = await Api.get_lots();
+
+        lots = lots.map(lot => {
+            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("");
+        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
@@ -50,6 +51,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="#">
+    <form class="search-form d-flex align-items-center" method="" id="SearchForm" action="#">
-      <input type="text" name="query" placeholder="Search" title="Enter search keyword">
+      <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 -->
 
@@ -101,81 +113,82 @@
     <li class="nav-item">
       {% if lot and lot.is_incoming %}
       <a class="nav-link" data-bs-target="#incoming-lots-nav" data-bs-toggle="collapse" href="#">
-      {% else %}
+        {% else %}
-      <a class="nav-link collapsed" data-bs-target="#incoming-lots-nav" data-bs-toggle="collapse" href="#">
+        <a class="nav-link collapsed" data-bs-target="#incoming-lots-nav" data-bs-toggle="collapse" href="#">
-      {% endif %}
+          {% endif %}
-        <i class="bi bi-arrow-down-right"></i><span>Incoming Lots</span><i class="bi bi-chevron-down ms-auto"></i>
+          <i class="bi bi-arrow-down-right"></i><span>Incoming Lots</span><i class="bi bi-chevron-down ms-auto"></i>
-      </a>
+        </a>
-      {% if lot and lot.is_incoming %}
+        {% if lot and lot.is_incoming %}
-      <ul id="incoming-lots-nav" class="nav-content collapse show" data-bs-parent="#sidebar-nav">
+        <ul id="incoming-lots-nav" class="nav-content collapse show" data-bs-parent="#sidebar-nav">
-      {% else %}
+          {% else %}
-      <ul id="incoming-lots-nav" class="nav-content collapse" data-bs-parent="#sidebar-nav">
+          <ul id="incoming-lots-nav" class="nav-content collapse" data-bs-parent="#sidebar-nav">
-      {% endif %}
+            {% endif %}
-        {% for lot in lots %}
+            {% for lot in lots %}
-        {% if lot.is_incoming %}
+            {% if lot.is_incoming %}
-        <li>
+            <li>
-          <a href="{{ url_for('inventory.lotdevicelist', lot_id=lot.id) }}">
+              <a href="{{ url_for('inventory.lotdevicelist', lot_id=lot.id) }}">
-            <i class="bi bi-circle"></i><span>{{ lot.name }}</span>
+                <i class="bi bi-circle"></i><span>{{ lot.name }}</span>
-          </a>
+              </a>
-        </li>
+            </li>
-        {% endif %}
+            {% endif %}
-        {% endfor %}
+            {% endfor %}
-      </ul>
+          </ul>
     </li><!-- End Incoming Lots Nav -->
 
     <li class="nav-item">
       {% if lot and lot.is_outgoing %}
       <a class="nav-link" data-bs-target="#outgoing-lots-nav" data-bs-toggle="collapse" href="#">
-      {% else %}
+        {% else %}
-      <a class="nav-link collapsed" data-bs-target="#outgoing-lots-nav" data-bs-toggle="collapse" href="#">
+        <a class="nav-link collapsed" data-bs-target="#outgoing-lots-nav" data-bs-toggle="collapse" href="#">
-      {% endif %}
+          {% endif %}
-        <i class="bi bi-arrow-up-right"></i><span>Outgoing Lots</span><i class="bi bi-chevron-down ms-auto"></i>
+          <i class="bi bi-arrow-up-right"></i><span>Outgoing Lots</span><i class="bi bi-chevron-down ms-auto"></i>
-      </a>
+        </a>
-      {% if lot and lot.is_outgoing %}
+        {% if lot and lot.is_outgoing %}
-      <ul id="outgoing-lots-nav" class="nav-content collapse show" data-bs-parent="#sidebar-nav">
+        <ul id="outgoing-lots-nav" class="nav-content collapse show" data-bs-parent="#sidebar-nav">
-      {% else %}
+          {% else %}
-      <ul id="outgoing-lots-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
+          <ul id="outgoing-lots-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
-      {% endif %}
+            {% endif %}
-        {% for lot in lots %}
+            {% for lot in lots %}
-        {% if lot.is_outgoing %}
+            {% if lot.is_outgoing %}
-        <li>
+            <li>
-          <a href="{{ url_for('inventory.lotdevicelist', lot_id=lot.id) }}">
+              <a href="{{ url_for('inventory.lotdevicelist', lot_id=lot.id) }}">
-            <i class="bi bi-circle"></i><span>{{ lot.name }}</span>
+                <i class="bi bi-circle"></i><span>{{ lot.name }}</span>
-          </a>
+              </a>
-        </li>
+            </li>
-        {% endif %}
+            {% endif %}
-        {% endfor %}
+            {% endfor %}
-      </ul>
+          </ul>
     </li><!-- End Outgoing Lots Nav -->
 
     <li class="nav-item">
       {% if lot and lot.is_temporary %}
       <a class="nav-link" data-bs-target="#temporal-lots-nav" data-bs-toggle="collapse" href="#">
-      {% else %}
+        {% else %}
-      <a class="nav-link collapsed"  data-bs-target="#temporal-lots-nav" data-bs-toggle="collapse" href="#">
+        <a class="nav-link collapsed" data-bs-target="#temporal-lots-nav" data-bs-toggle="collapse" href="#">
-      {% endif %}
+          {% 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
-      </a>
+            class="bi bi-chevron-down ms-auto"></i>
-      {% if lot and lot.is_temporary %}
+        </a>
-      <ul id="temporal-lots-nav" class="nav-content collapse show" data-bs-parent="#sidebar-nav">
+        {% if lot and lot.is_temporary %}
-      {% else %}
+        <ul id="temporal-lots-nav" class="nav-content collapse show" data-bs-parent="#sidebar-nav">
-      <ul id="temporal-lots-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
+          {% else %}
-      {% endif %}
+          <ul id="temporal-lots-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
-        <li>
+            {% endif %}
-          <a href="{{ url_for('inventory.lot_add')}}">
+            <li>
-            <i class="bi bi-plus" style="font-size: larger;"></i><span>New temporary lot</span>
+              <a href="{{ url_for('inventory.lot_add')}}">
-          </a>
+                <i class="bi bi-plus" style="font-size: larger;"></i><span>New temporary lot</span>
-        </li>
+              </a>
-        {% for lot in lots %}
+            </li>
-        {% if lot.is_temporary %}
+            {% for lot in lots %}
-        <li>
+            {% if lot.is_temporary %}
-          <a href="{{ url_for('inventory.lotdevicelist', lot_id=lot.id) }}">
+            <li>
-            <i class="bi bi-circle"></i><span>{{ lot.name }}</span>
+              <a href="{{ url_for('inventory.lotdevicelist', lot_id=lot.id) }}">
-          </a>
+                <i class="bi bi-circle"></i><span>{{ lot.name }}</span>
-        </li>
+              </a>
-        {% endif %}
+            </li>
-        {% endfor %}
+            {% endif %}
-      </ul>
+            {% endfor %}
+          </ul>
     </li><!-- End Temporal Lots Nav -->
 
     <li class="nav-heading">Utils</li>
@@ -193,17 +206,18 @@
 
 <main id="main" class="main">
   {% block messages %}
-    {% for level, message in get_flashed_messages(with_categories=true) %}
+  {% for level, message in get_flashed_messages(with_categories=true) %}
-      <div class="alert alert-{{ level}} alert-dismissible fade show" role="alert">
+  <div class="alert alert-{{ level}} alert-dismissible fade show" role="alert">
-        {% if '_message_icon' in session %}
+    {% if '_message_icon' in session %}
-          <i class="bi bi-{{ session['_message_icon'][level]}} me-1"></i>
+    <i class="bi bi-{{ session['_message_icon'][level]}} me-1"></i>
-        {% else %}<!-- fallback if 3rd party libraries (e.g. flask_login.login_required) -->
+    {% else %}
-          <i class="bi bi-info-circle me-1"></i>
+    <!-- fallback if 3rd party libraries (e.g. flask_login.login_required) -->
-        {% endif %}
+    <i class="bi bi-info-circle me-1"></i>
-        {{ message }}
+    {% endif %}
-        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+    {{ message }}
-      </div>
+    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-    {% endfor %}
+  </div>
+  {% endfor %}
   {% endblock %}
   {% block main %}
 
@@ -224,4 +238,4 @@
   </div>
 </footer><!-- End Footer -->
 
-{% endblock body %}
+{% endblock body %}

ereuse_devicehub/templates/inventory/addDeviceslot.html

@@ -1,33 +0,0 @@
-<div class="modal fade" id="addingLotModal" tabindex="-1" style="display: none;" aria-hidden="true">
-  <div class="modal-dialog">
-    <div class="modal-content">
-
-      <div class="modal-header">
-        <h5 class="modal-title">Adding to a lot</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-      </div>
-
-      <form action="{{ url_for('inventory.lot_devices_add') }}" method="post">
-      {{ form_lot_device.csrf_token }}
-        <div class="modal-body">
-          Please write a name of a lot
-          <select class="form-control selectpicker" id="selectLot" name="lot" data-live-search="true">
-            {% for lot in lots %}
-            <option value="{{ lot.id }}">{{ lot.name }}</option>
-            {% endfor %}
-          </select>
-          <input class="devicesList" type="hidden" name="devices" />
-          <p class="text-danger pol">
-              You need select first some device for adding this in a lot
-          </p>
-        </div>
-
-        <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-          <input type="submit" class="btn btn-primary" style="display: none;" value="Save changes" />
-        </div>
-      </form>
-
-    </div>
-  </div>
-</div>

ereuse_devicehub/templates/inventory/device_list.html

@@ -32,10 +32,10 @@
         <div class="card-body pt-3">
           <!-- Bordered Tabs -->
 
-          <div class="d-flex align-items-center justify-content-between">
+          <div class="d-flex align-items-center justify-content-between row">
-            <h3><a href="{{ url_for('inventory.lot_edit', id=lot.id) }}">{{ lot.name }}</a></h3>
+            <h3 class="col-sm-12 col-md-5"><a href="{{ url_for('inventory.lot_edit', id=lot.id) }}">{{ lot.name }}</a></h3>
 
-            <div><!-- lot actions -->
+            <div class="col-sm-12 col-md-7 d-md-flex justify-content-md-end"><!-- lot actions -->
               {% if lot.is_temporary %}
                 <span class="d-none" id="activeRemoveLotModal" data-bs-toggle="modal" data-bs-target="#btnRemoveLots"></span>
                 <a class="me-2" href="javascript:newTrade('user_from')">
@@ -69,32 +69,29 @@
 
           </ul>
           {% endif %}
-          <div class="tab-content pt-5">
+          <div class="tab-content pt-1">
             <div id="devices-list" class="tab-pane fade devices-list active show">
-
+              <label class="btn btn-primary " for="SelectAllBTN"><input type="checkbox" id="SelectAllBTN" autocomplete="off"></label>
               <div class="btn-group dropdown ml-1">
-                <button id="btnLots" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+                <button id="btnLots" type="button" onclick="processSelectedDevices()" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                   <i class="bi bi-folder2"></i>
                   Lots
                   <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">
+                <ul class="dropdown-menu" aria-labelledby="btnLots" id="dropDownLotsSelector">
+                  <h6 class="dropdown-header">Select some devices to manage lots</h6>
+                  <ul class="mx-3" id="LotsSelector"></ul>
+                  <li><hr /></li>
                   <li>
-                    <a href="javascript:void()" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#addingLotModal">
+                    <a href="#" class="dropdown-item" id="ApplyDeviceLots">
-                      <i class="bi bi-plus"></i>
+                      <i class="bi bi-check"></i>
-                      Add selected Devices to a lot
+                      Apply
-                    </a>
-                  </li>
-                  <li>
-                    <a href="javascript:void()" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#removeLotModal">
-                      <i class="bi bi-x"></i>
-                      Remove selected devices from a lot
                     </a>
                   </li>
                 </ul>
               </div>
-              <div class="btn-group dropdown ml-1" uib-dropdown="">
+              <div class="btn-group dropdown m-1" uib-dropdown="">
                 <button id="btnActions" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                     <i class="bi bi-plus"></i>
                     New Actions
@@ -181,7 +178,7 @@
                 </ul>
               </div>
 
-              <div class="btn-group dropdown ml-1" uib-dropdown="">
+              <div class="btn-group dropdown m-1" uib-dropdown="">
                 <button id="btnExport" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                     <i class="bi bi-reply"></i>
                     Exports
@@ -215,7 +212,7 @@
                 </ul>
               </div>
 
-              <div class="btn-group dropdown ml-1" uib-dropdown="">
+              <div class="btn-group dropdown m-1" uib-dropdown="">
                 <button id="btnTags" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                     <i class="bi bi-tag"></i>
                     Tags
@@ -249,7 +246,7 @@
                 </ul>
               </div>
 
-              <div class="btn-group dropdown ml-1" uib-dropdown="">
+              <div class="btn-group dropdown m-1" uib-dropdown="">
                 <button id="btnSnapshot" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                     <i class="bi bi-laptop"></i>
                     New Device
@@ -394,12 +391,12 @@
         </div>
       </div>
 
+      <div id="NotificationsContainer" style="position: absolute; bottom: 0; right: 0; margin: 10px; margin-top: 70px; width: calc(100% - 310px);"></div>
+
     </div>
   </div>
 </section>
-{% include "inventory/addDeviceslot.html" %}
 {% include "inventory/addDevicestag.html" %}
-{% include "inventory/removeDeviceslot.html" %}
 {% include "inventory/lot_delete_modal.html" %}
 {% include "inventory/actions.html" %}
 {% include "inventory/allocate.html" %}
@@ -410,7 +407,9 @@
 
 <!-- Custom Code -->
 <script>
-  const table = new simpleDatatables.DataTable("table")
+  const table = new simpleDatatables.DataTable("table", {
+    perPage: 20
+  })
 </script>
 <script src="{{ url_for('static', filename='js/main_inventory.js') }}"></script>
 {% endblock main %}

ereuse_devicehub/templates/inventory/removeDeviceslot.html

@@ -1,32 +0,0 @@
-<div class="modal fade" id="removeLotModal" tabindex="-1" style="display: none;" aria-hidden="true">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title">Remove from lot</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-      </div>
-
-      <form action="{{ url_for('inventory.lot_devices_del') }}" method="post">
-      {{ form_lot_device.csrf_token }}
-        <div class="modal-body">
-          Please write a name of a lot
-          <select class="form-control selectpicker" id="selectLot" name="lot" data-live-search="true">
-            {% for lot in lots %}
-            <option value="{{ lot.id }}">{{ lot.name }}</option>
-            {% endfor %}
-          </select>
-          <input class="devicesList" type="hidden" name="devices" />
-          <p class="text-danger pol">
-              You need select first some device for remove this from a lot
-          </p>
-        </div>
-
-        <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-          <input type="submit" class="btn btn-primary" style="display: none;" value="Save changes" />
-        </div>
-      </form>
-
-    </div>
-  </div>
-</div>

ereuse_devicehub/templates/labels/label_list.html

@@ -19,7 +19,7 @@
         <div class="card-body pt-3">
           <!-- Bordered Tabs -->
 
-            <div class="btn-group dropdown ml-1">
+            <div class="btn-group dropdown m-1">
               <a href="{{ url_for('labels.tag_add')}}" type="button" class="btn btn-primary">
                 <i class="bi bi-plus"></i>
                 Create Named Tag
@@ -27,7 +27,7 @@
               </a>
             </div>
 
-            <div class="btn-group dropdown ml-1" uib-dropdown="">
+            <div class="btn-group dropdown m-1" uib-dropdown="">
               <a href="{{ url_for('labels.tag_unnamed_add')}}" type="button" class="btn btn-primary">
                 <i class="bi bi-plus"></i>
                 Create UnNamed Tag
@@ -57,7 +57,7 @@
                       <td>{{ tag.get_provider }}</td>
                       <td>
                         {% if tag.device %}
-                        <a href={{ url_for('inventory.device_details', id=tag.device.devicehub_id)}}>
+                        <a href="{{ url_for('inventory.device_details', id=tag.device.devicehub_id)}}">
                           {{ tag.device.verbose_name }}
                         </a>
                         {% endif %}

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "workspace",
+  "version": "1.0.0",
+  "description": "Devicehub is a distributed IT Asset Management System focused in reusing devices, created under the project [eReuse.org](https://www.ereuse.org)",
+  "main": "index.js",
+  "directories": {
+    "doc": "docs",
+    "example": "examples",
+    "test": "tests"
+  },
+  "devDependencies": {
+    "eslint": "^8.13.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-prettier": "^4.0.0"
+  },
+  "scripts": {
+    "lint:report": "eslint ereuse_devicehub --ext .js --output-file eslint_report.json --format json",
+    "lint:fix": "eslint ereuse_devicehub --ext .js --fix"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.4.0"
+  }
+}