Merge branch 'testing' into feature/server-side-render-parser-3021

.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
+}

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

@@ -4,7 +4,7 @@ const Api = {
      * @returns get lots
      */
     async get_lots() {
-        var request = await this.doRequest(API_URLS.lots, "GET", null);
+        const request = await this.doRequest(API_URLS.lots, "GET", null);
         if (request != undefined) return request.items;
         throw request;
     },
@@ -15,7 +15,7 @@ const Api = {
      * @returns full detailed device list
      */
     async get_devices(ids) {
-        var request = await this.doRequest(API_URLS.devices + '?filter={"id": [' + ids.toString() + ']}', "GET", null);
+        const request = await this.doRequest(`${API_URLS.devices  }?filter={"id": [${  ids.toString()  }]}`, "GET", null);
         if (request != undefined) return request.items;
         throw request;
     },
@@ -26,7 +26,7 @@ const Api = {
          * @returns full detailed device list
          */
     async search_device(id) {
-        var request = await this.doRequest(API_URLS.devices + '?filter={"devicehub_id": ["' + id + '"]}', "GET", null)
+        const request = await this.doRequest(`${API_URLS.devices  }?filter={"devicehub_id": ["${  id  }"]}`, "GET", null)
         if (request != undefined) return request.items
         throw request
     },
@@ -37,8 +37,8 @@ const Api = {
      * @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("&");
+        const queryURL = `${API_URLS.devices_modify.replace("UUID", lotID)  }?${  listDevices.map(deviceID => `id=${  deviceID}`).join("&")}`;
-        return await Api.doRequest(queryURL, "POST", null);
+        return Api.doRequest(queryURL, "POST", null);
     },
 
     /**
@@ -47,8 +47,8 @@ const Api = {
      * @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("&");
+        const queryURL = `${API_URLS.devices_modify.replace("UUID", lotID)  }?${  listDevices.map(deviceID => `id=${  deviceID}`).join("&")}`;
-        return await Api.doRequest(queryURL, "DELETE", null);
+        return Api.doRequest(queryURL, "DELETE", null);
     },
 
     /**
@@ -59,13 +59,13 @@ const Api = {
      * @returns 
      */
     async doRequest(url, type, body) {
-        var result;
+        let result;
         try {
             result = await $.ajax({
-                url: url,
+                url,
-                type: type,
+                type,
                 headers: { "Authorization": API_URLS.Auth_Token },
-                body: body
+                body
             });
             return result;
         } catch (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

@@ -14,9 +14,9 @@
     el = el.trim()
     if (all) {
       return [...document.querySelectorAll(el)]
-    } else {
-      return document.querySelector(el)
     } 
+      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: [
@@ -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,11 +204,11 @@
   /**
    * 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);
@@ -220,11 +218,11 @@
   /**
    * Select all functionality
    */
-  var btnSelectAll = document.getElementById("SelectAllBTN");
+  const btnSelectAll = document.getElementById("SelectAllBTN");
-  var tableListCheckboxes = document.querySelectorAll(".deviceSelect");
+  const tableListCheckboxes = document.querySelectorAll(".deviceSelect");
 
   function itemListCheckChanged(event) {
-    let isAllChecked = Array.from(tableListCheckboxes).map(itm => itm.checked);
+    const isAllChecked = Array.from(tableListCheckboxes).map(itm => itm.checked);
     if (isAllChecked.every(bool => bool == true)) {
       btnSelectAll.checked = true;
       btnSelectAll.indeterminate = false;
@@ -241,8 +239,8 @@
   })
 
   btnSelectAll.addEventListener("click", event => {
-    let checkedState = event.target.checked;
+    const checkedState = event.target.checked;
-    tableListCheckboxes.forEach(ckeckbox => ckeckbox.checked = checkedState);
+    tableListCheckboxes.forEach(ckeckbox => {ckeckbox.checked = checkedState});
   })
 
   /**
@@ -256,23 +254,23 @@
    * Search form functionality
    */
   window.addEventListener("DOMContentLoaded", () => {
-    var searchForm = document.getElementById("SearchForm")
+    const searchForm = document.getElementById("SearchForm")
-    var inputSearch = document.querySelector("#SearchForm > input")
+    const inputSearch = document.querySelector("#SearchForm > input")
-    var doSearch = true
+    const doSearch = true
 
     searchForm.addEventListener("submit", (event) => {
       event.preventDefault();
     })
 
     let timeoutHandler = setTimeout(() => { }, 1)
-    let dropdownList = document.getElementById("dropdown-search-list")
+    const dropdownList = document.getElementById("dropdown-search-list")
-    let defaultEmptySearch = document.getElementById("dropdown-search-list").innerHTML
+    const defaultEmptySearch = document.getElementById("dropdown-search-list").innerHTML
 
 
     inputSearch.addEventListener("input", (e) => {
       clearTimeout(timeoutHandler)
-      let searchText = e.target.value
+      const searchText = e.target.value
-      if (searchText == '') {
+      if (searchText == "") {
         document.getElementById("dropdown-search-list").innerHTML = defaultEmptySearch;
         return
       }
@@ -315,7 +313,7 @@
               const device = devices[i];
 
               // See: ereuse_devicehub/resources/device/models.py
-              var verboseName = `${device.type} ${device.manufacturer} ${device.model}`
+              const verboseName = `${device.type} ${device.manufacturer} ${device.model}`
 
               const templateString = `
               <li>

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,44 +137,44 @@ 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();
@@ -200,11 +200,12 @@ async function processSelectedDevices() {
          */
         manage(event, lotID, deviceListID) {
             event.preventDefault();
-            const indeterminate = event.srcElement.indeterminate;
+            const srcElement = event.srcElement.parentElement.children[0]
-            const checked = !event.srcElement.checked;
+            const {indeterminate} = srcElement;
+            const checked = !srcElement.checked;
 
-            var found = this.list.filter(list => list.lotID == lotID)[0];
+            const found = this.list.filter(list => list.lotID == lotID)[0];
-            var foundIndex = found != undefined ? this.list.findLastIndex(x => x.lotID == found.lotID) : -1;
+            const foundIndex = found != undefined ? this.list.findLastIndex(x => x.lotID == found.lotID) : -1;
 
             if (checked) {
                 if (found != undefined && found.type == "Remove") {
@@ -215,10 +216,9 @@ async function processSelectedDevices() {
                         this.list = this.list.filter(list => list.lotID != lotID);
                     }
                 } else {
-                    this.list.push({ type: "Add", lotID: lotID, devices: deviceListID, isFromIndeterminate: indeterminate });
+                    this.list.push({ type: "Add", lotID, devices: deviceListID, isFromIndeterminate: indeterminate });
                 }
-            } else {
+            } else if (found != undefined && found.type == "Add") {
-                if (found != undefined && found.type == "Add") {
                     if (found.isFromIndeterminate == true) {
                         found.type = "Remove";
                         this.list[foundIndex] = found;
@@ -226,8 +226,7 @@ async function processSelectedDevices() {
                         this.list = this.list.filter(list => list.lotID != lotID);
                     }
                 } else {
-                    this.list.push({ type: "Remove", lotID: lotID, devices: deviceListID, isFromIndeterminate: indeterminate });
+                    this.list.push({ type: "Remove", lotID, devices: deviceListID, isFromIndeterminate: indeterminate });
-                }
                 }
 
             if (this.list.length > 0) {
@@ -244,10 +243,10 @@ async function processSelectedDevices() {
          * @param {boolean} isError defines if a toast is a error
          */
         notifyUser(title, toastText, isError) {
-            let toast = document.createElement("div");
+            const toast = document.createElement("div");
-            toast.classList = "alert alert-dismissible fade show " + (isError ? "alert-danger" : "alert-success");
+            toast.classList = `alert alert-dismissible fade show ${  isError ? "alert-danger" : "alert-success"}`;
             toast.attributes["data-autohide"] = !isError;
-            toast.attributes["role"] = "alert";
+            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) {
@@ -265,7 +264,7 @@ async function processSelectedDevices() {
          * Get actions and execute call request to add or remove devices from lots
          */
         doActions() {
-            var requestCount = 0; // This is for count all requested api count, to perform reRender of table device list
+            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 {
@@ -295,13 +294,13 @@ async function processSelectedDevices() {
          * Re-render list in table
          */
         async reRenderTable() {
-            var newRequest = await Api.doRequest(window.location)
+            const newRequest = await Api.doRequest(window.location)
 
-            var tmpDiv = document.createElement("div")
+            const tmpDiv = document.createElement("div")
             tmpDiv.innerHTML = newRequest
 
-            var oldTable = Array.from(document.querySelectorAll("table.table > tbody > tr .deviceSelect")).map(x => x.attributes["data-device-dhid"].value)
+            const oldTable = Array.from(document.querySelectorAll("table.table > tbody > tr .deviceSelect")).map(x => x.attributes["data-device-dhid"].value)
-            var newTable = Array.from(tmpDiv.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])) {
@@ -312,7 +311,7 @@ async function processSelectedDevices() {
         }
     }
 
-    var eventClickActions;
+    let eventClickActions;
 
     /**
      * Generates a list item with a correspondient checkbox state
@@ -321,42 +320,47 @@ 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;
 
-        var 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>`;
 
-        var existLotList = selectedDevicesIDs.map(selected => lot.devices.includes(selected));
+        const doc = document.createElement("li");
-
-        var 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;
-        } else if (existLotList.every(value => value == false)) {
+                break;
+            case "false":
                 doc.children[0].checked = false;
-        } else {
+                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, 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);
     }
 
-    var listHTML = $("#LotsSelector")
+    const listHTML = $("#LotsSelector")
 
     // Get selected devices
-    var selectedDevicesIDs = $.map($(".deviceSelect").filter(':checked'), function (x) { return parseInt($(x).attr('data')) });
+    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>');
+        listHTML.html("<li style=\"color: red; text-align: center\">No devices selected</li>");
         return;
     }
 
     // Initialize Actions list, and set checkbox triggers
-    var actions = new Actions();
+    const actions = new Actions();
     if (eventClickActions) {
         document.getElementById("ApplyDeviceLots").removeEventListener(eventClickActions);
     }
@@ -364,21 +368,41 @@ async function processSelectedDevices() {
     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>')
+        listHTML.html("<li style=\"text-align: center\"><div class=\"spinner-border text-info\" style=\"margin: auto\" role=\"status\"></div></li>")
-        var devices = await Api.get_devices(selectedDevicesIDs);
+        const devices = await Api.get_devices(selectedDevicesIDs);
-        var lots = await Api.get_lots();
+        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;
         })
 
-        listHTML.html('');
+
-        lots.forEach(lot => templateLot(lot.id, lot, selectedDevicesIDs, listHTML, actions));
+        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>');
+        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

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,7 +69,7 @@
 
           </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">
@@ -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">
@@ -91,7 +91,7 @@
                   </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
@@ -178,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
@@ -212,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
@@ -246,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
@@ -407,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/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"
+  }
+}