From 4aa024b04191dc682ebf63f6751edf9d6abc4454 Mon Sep 17 00:00:00 2001
From: RubenPX <rubenmarchante@gmail.com>
Date: Thu, 28 Apr 2022 16:58:44 +0200
Subject: [PATCH 1/5] checkpoint: add confirmation dialog

---
 ereuse_devicehub/static/js/main_inventory.js  | 52 ++++++++++++++++---
 .../inventory/alert_lots_changes.html         | 19 +++++++
 .../templates/inventory/device_list.html      |  3 +-
 3 files changed, 67 insertions(+), 7 deletions(-)
 create mode 100644 ereuse_devicehub/templates/inventory/alert_lots_changes.html

diff --git a/ereuse_devicehub/static/js/main_inventory.js b/ereuse_devicehub/static/js/main_inventory.js
index 6cb71534..69b09138 100644
--- a/ereuse_devicehub/static/js/main_inventory.js
+++ b/ereuse_devicehub/static/js/main_inventory.js
@@ -276,6 +276,7 @@ async function processSelectedDevices() {
                     this.list = [];
                 }
             })
+            $("#confirmLotsModal").modal("hide"); // Hide dialog when click "Save changes"
             document.getElementById("dropDownLotsSelector").classList.remove("show");
         }
 
@@ -302,10 +303,9 @@ async function processSelectedDevices() {
 
     /**
      * Generates a list item with a correspondient checkbox state
-     * @param {String} lotID 
-     * @param {String} lotName 
-     * @param {Array<number>} selectedDevicesIDs
-     * @param {HTMLElement} target
+     * @param {Object} lot Lot model server
+     * @param {HTMLElement} elementTarget 
+     * @param {Array<Action>} actions
      */
     function templateLot(lot, elementTarget, actions) {
         elementTarget.innerHTML = ""
@@ -357,7 +357,48 @@ async function processSelectedDevices() {
     if (eventClickActions) {
         document.getElementById("ApplyDeviceLots").removeEventListener(eventClickActions);
     }
-    eventClickActions = document.getElementById("ApplyDeviceLots").addEventListener("click", () => actions.doActions());
+    eventClickActions = document.getElementById("ApplyDeviceLots").addEventListener("click", () => {
+        const modal = $("#confirmLotsModal")
+        modal.modal({ keyboard: false })
+
+        let list_changes_html = "";
+        //  {type: ["Remove" | "Add"], "LotID": string, "devices": number[]}
+        actions.list.forEach(action => {
+            let type;
+            let devices;
+            if (action.type == "Add") {
+                type = "success";
+                devices = action.devices.filter(dev => !action.lot.devices.includes(dev)) // Only show affected devices
+            } else {
+                type = "danger";
+                devices = action.devices.filter(dev => action.lot.devices.includes(dev)) // Only show affected devices
+            }
+            list_changes_html += `
+            <div class="card border-primary mb-3 w-100">
+            <div class="card-header" title="${action.lotID}">${action.lot.name}</div>
+            <div class="card-body pt-3">
+              <p class="card-text">
+                ${devices.map(item => {
+                    const dhid = $(".deviceSelect").filter(`[data=${item}]`)[0].attributes["data-device-dhid"].value;
+                    const name = $(".deviceSelect").filter(`[data=${item}]`)[0].attributes["data-device-vname"].value;
+                    return `<span class="badge bg-${type}" title="${name}">${dhid}</span>`
+                }).join(" ")}
+              </p>
+            </div>
+          </div>`;
+        })
+
+        modal.find(".modal-body").html(list_changes_html)
+
+        const el = document.getElementById("SaveAllActions")
+        const elClone = el.cloneNode(true);
+        el.parentNode.replaceChild(elClone, el);
+        elClone.addEventListener("click", () => actions.doActions())
+        
+        modal.modal("show")
+
+        // actions.doActions();
+    });
     document.getElementById("ApplyDeviceLots").classList.add("disabled");
 
     try {
@@ -385,7 +426,6 @@ async function processSelectedDevices() {
             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)));
diff --git a/ereuse_devicehub/templates/inventory/alert_lots_changes.html b/ereuse_devicehub/templates/inventory/alert_lots_changes.html
new file mode 100644
index 00000000..fa2613c9
--- /dev/null
+++ b/ereuse_devicehub/templates/inventory/alert_lots_changes.html
@@ -0,0 +1,19 @@
+<!-- Modal -->
+<div class="modal fade" id="confirmLotsModal" tabindex="-1" role="dialog" aria-labelledby="confirmLotsModal"
+    aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="exampleModalLabel">Confirm lots changes</h5>
+            </div>
+            <div class="modal-body">
+                IF THIS TEXT APEARS THERE HAS AN ERROR
+            </div>
+            <div class="modal-footer">
+                <button type="button" onclick="$('#confirmLotsModal').modal('hide');" class="btn btn-secondary"
+                    style="margin-right: auto;" data-dismiss="#confirmLotsModal">Cancel</button>
+                <button type="button" class="btn btn-primary" id="SaveAllActions">Save changes</button>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/ereuse_devicehub/templates/inventory/device_list.html b/ereuse_devicehub/templates/inventory/device_list.html
index 827c3b68..79a25330 100644
--- a/ereuse_devicehub/templates/inventory/device_list.html
+++ b/ereuse_devicehub/templates/inventory/device_list.html
@@ -329,7 +329,7 @@
                       <td>
                           <input type="checkbox" class="deviceSelect" data="{{ dev.id }}"
                                data-device-type="{{ dev.type }}" data-device-manufacturer="{{ dev.manufacturer }}"
-                               data-device-dhid="{{ dev.devicehub_id }}"
+                               data-device-dhid="{{ dev.devicehub_id }}" data-device-vname="{{ dev.verbose_name }}"
                                {% if form_new_allocate.type.data and dev.id in list_devices %}
                                  checked="checked"
                                {% endif %}
@@ -408,6 +408,7 @@
 {% include "inventory/trade.html" %}
 {% include "inventory/alert_export_error.html" %}
 {% include "inventory/alert_unlink_tag_error.html" %}
+{% include "inventory/alert_lots_changes.html" %}
 
 <!-- Custom Code -->
 <script>

From 1727ab70a37013ec4ed1619d4c56ccc9f329fffc Mon Sep 17 00:00:00 2001
From: RubenPX <rubenmarchante@gmail.com>
Date: Thu, 28 Apr 2022 17:00:23 +0200
Subject: [PATCH 2/5] lint

---
 ereuse_devicehub/static/js/main_inventory.js | 36 ++++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/ereuse_devicehub/static/js/main_inventory.js b/ereuse_devicehub/static/js/main_inventory.js
index 69b09138..96d383ab 100644
--- a/ereuse_devicehub/static/js/main_inventory.js
+++ b/ereuse_devicehub/static/js/main_inventory.js
@@ -163,7 +163,7 @@ function get_device_list() {
         if (computer[typ]) {
             typ = computer[typ];
         };
-        return `${typ  } ${  manuf  } ${  dhid}`;
+        return `${typ} ${manuf} ${dhid}`;
     });
 
     description = $.map(list_devices, (x) => x).join(", ");
@@ -173,7 +173,7 @@ function get_device_list() {
 function export_file(type_file) {
     const devices = $(".deviceSelect").filter(":checked");
     const devices_id = $.map(devices, (x) => $(x).attr("data-device-dhid")).join(",");
-    if (devices_id){
+    if (devices_id) {
         const url = `/inventory/export/${type_file}/?ids=${devices_id}`;
         window.location.href = url;
     } else {
@@ -198,7 +198,7 @@ async function processSelectedDevices() {
          * @param {Lot} lot lot id
          * @param {Device[]} deviceList device id
          */
-         manage(event, lot, deviceListID) {
+        manage(event, lot, deviceListID) {
             event.preventDefault();
             const lotID = lot.id;
             const srcElement = event.srcElement.parentElement.children[0]
@@ -210,13 +210,13 @@ async function processSelectedDevices() {
                 if (found && found.type == "Remove") {
                     found.type = "Add";
                 } else {
-                    this.list.push({ type: "Add", lot, devices: deviceListID});
+                    this.list.push({ type: "Add", lot, devices: deviceListID });
                 }
             } else if (found && found.type == "Add") {
-                    found.type = "Remove";
-                } else {
-                    this.list.push({ type: "Remove", lot, devices: deviceListID});
-                }
+                found.type = "Remove";
+            } else {
+                this.list.push({ type: "Remove", lot, devices: deviceListID });
+            }
 
             if (this.list.length > 0) {
                 document.getElementById("ApplyDeviceLots").classList.remove("disabled");
@@ -233,7 +233,7 @@ async function processSelectedDevices() {
          */
         notifyUser(title, toastText, isError) {
             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.style = "margin-left: auto; width: fit-content;";
@@ -309,7 +309,7 @@ async function processSelectedDevices() {
      */
     function templateLot(lot, elementTarget, actions) {
         elementTarget.innerHTML = ""
-        const {id, name, state} = lot;
+        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>`;
@@ -379,10 +379,10 @@ async function processSelectedDevices() {
             <div class="card-body pt-3">
               <p class="card-text">
                 ${devices.map(item => {
-                    const dhid = $(".deviceSelect").filter(`[data=${item}]`)[0].attributes["data-device-dhid"].value;
-                    const name = $(".deviceSelect").filter(`[data=${item}]`)[0].attributes["data-device-vname"].value;
-                    return `<span class="badge bg-${type}" title="${name}">${dhid}</span>`
-                }).join(" ")}
+                const dhid = $(".deviceSelect").filter(`[data=${item}]`)[0].attributes["data-device-dhid"].value;
+                const name = $(".deviceSelect").filter(`[data=${item}]`)[0].attributes["data-device-vname"].value;
+                return `<span class="badge bg-${type}" title="${name}">${dhid}</span>`
+            }).join(" ")}
               </p>
             </div>
           </div>`;
@@ -394,7 +394,7 @@ async function processSelectedDevices() {
         const elClone = el.cloneNode(true);
         el.parentNode.replaceChild(elClone, el);
         elClone.addEventListener("click", () => actions.doActions())
-        
+
         modal.modal("show")
 
         // actions.doActions();
@@ -427,9 +427,9 @@ async function processSelectedDevices() {
         })
 
         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.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("");

From 8d43128e687553123c5b5557ca87bb0f5658ce9a Mon Sep 17 00:00:00 2001
From: RubenPX <rubenmarchante@gmail.com>
Date: Thu, 28 Apr 2022 18:43:38 +0200
Subject: [PATCH 3/5] fix render item in confirmation dialog

---
 ereuse_devicehub/static/js/main_inventory.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/ereuse_devicehub/static/js/main_inventory.js b/ereuse_devicehub/static/js/main_inventory.js
index a94bc8a7..9e29b51d 100644
--- a/ereuse_devicehub/static/js/main_inventory.js
+++ b/ereuse_devicehub/static/js/main_inventory.js
@@ -353,6 +353,7 @@ async function processSelectedDevices() {
     if (eventClickActions) {
         document.getElementById("ApplyDeviceLots").removeEventListener(eventClickActions);
     }
+
     eventClickActions = document.getElementById("ApplyDeviceLots").addEventListener("click", () => {
         const modal = $("#confirmLotsModal")
         modal.modal({ keyboard: false })
@@ -364,10 +365,10 @@ async function processSelectedDevices() {
             let devices;
             if (action.type == "Add") {
                 type = "success";
-                devices = action.devices.filter(dev => !action.lot.devices.includes(dev)) // Only show affected devices
+                devices = action.devices.filter(dev => !action.lot.devices.includes(dev.id)) // Only show affected devices
             } else {
                 type = "danger";
-                devices = action.devices.filter(dev => action.lot.devices.includes(dev)) // Only show affected devices
+                devices = action.devices.filter(dev => action.lot.devices.includes(dev.id)) // Only show affected devices
             }
             list_changes_html += `
             <div class="card border-primary mb-3 w-100">
@@ -375,9 +376,8 @@ async function processSelectedDevices() {
             <div class="card-body pt-3">
               <p class="card-text">
                 ${devices.map(item => {
-                const dhid = $(".deviceSelect").filter(`[data=${item}]`)[0].attributes["data-device-dhid"].value;
-                const name = $(".deviceSelect").filter(`[data=${item}]`)[0].attributes["data-device-vname"].value;
-                return `<span class="badge bg-${type}" title="${name}">${dhid}</span>`
+                const name = `${item.type} ${item.manufacturer} ${item.model}`
+                return `<span class="badge bg-${type}" title="${name}">${item.devicehubID}</span>`;
             }).join(" ")}
               </p>
             </div>

From 6575e418e78f5d79ed15f85ed14be304d022c207 Mon Sep 17 00:00:00 2001
From: RubenPX <rubenmarchante@gmail.com>
Date: Fri, 29 Apr 2022 14:39:56 +0200
Subject: [PATCH 4/5] fix undefined

This will fix when you select all lots and you make change that clears list
---
 ereuse_devicehub/static/js/main_inventory.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/ereuse_devicehub/static/js/main_inventory.js b/ereuse_devicehub/static/js/main_inventory.js
index 13396a46..30c56c03 100644
--- a/ereuse_devicehub/static/js/main_inventory.js
+++ b/ereuse_devicehub/static/js/main_inventory.js
@@ -18,7 +18,7 @@ $(document).ready(() => {
 })
 
 class TableController {
-    static #tableRows = table.activeRows;
+    static #tableRows = () => table.activeRows.length > 0 ? table.activeRows : [];
 
     static #tableRowsPage = () => table.pages[table.rows().dt.currentPage - 1];
 
@@ -26,7 +26,8 @@ class TableController {
      * @returns Selected inputs from device list
      */
     static getSelectedDevices() {
-        return this.#tableRows
+        if (this.#tableRows() == undefined) return [];
+        return this.#tableRows()
             .filter(element => element.querySelector("input").checked)
             .map(element => element.querySelector("input"))
     }
@@ -35,6 +36,7 @@ class TableController {
      * @returns Selected inputs in current page from device list
      */
     static getAllSelectedDevicesInCurrentPage() {
+        if (this.#tableRowsPage() == undefined) return [];
         return this.#tableRowsPage()
             .filter(element => element.querySelector("input").checked)
             .map(element => element.querySelector("input"))
@@ -44,7 +46,8 @@ class TableController {
      * @returns All inputs from device list
      */
     static getAllDevices() {
-        return this.#tableRows
+        if (this.#tableRows() == undefined) return [];
+        return this.#tableRows()
             .map(element => element.querySelector("input"))
     }
 
@@ -52,6 +55,7 @@ class TableController {
      * @returns All inputs from current page in device list
      */
     static getAllDevicesInCurrentPage() {
+        if (this.#tableRowsPage() == undefined) return [];
         return this.#tableRowsPage()
             .map(element => element.querySelector("input"))
     }

From e1513e2ccfcb1aedeeb6014c6749facdb7d4e07a Mon Sep 17 00:00:00 2001
From: Santiago Lamora <santiago@ribaguifi.com>
Date: Fri, 6 May 2022 19:44:59 +0200
Subject: [PATCH 5/5] Fix typos

---
 ereuse_devicehub/static/js/main_inventory.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/ereuse_devicehub/static/js/main_inventory.js b/ereuse_devicehub/static/js/main_inventory.js
index 49e16b3b..848c72e4 100644
--- a/ereuse_devicehub/static/js/main_inventory.js
+++ b/ereuse_devicehub/static/js/main_inventory.js
@@ -61,8 +61,8 @@ class TableController {
     }
 
     /**
-     * 
-     * @param {HTMLElement} DOMElements 
+     *
+     * @param {HTMLElement} DOMElements
      * @returns Procesed input atributes to an Object class
      */
     static ProcessTR(DOMElements) {
@@ -371,7 +371,7 @@ async function processSelectedDevices() {
                     try {
                         const devicesIDs = action.devices.filter(dev => !action.lot.devices.includes(dev.id)).map(dev => dev.id)
                         await Api.devices_add(action.lot.id, devicesIDs);
-                        this.notifyUser("Devices sucefully aded to selected lot/s", "", false);
+                        this.notifyUser("Devices sucefully added to selected lot/s", "", false);
                     } catch (error) {
                         this.notifyUser("Failed to add devices to selected lot/s", error.responseJSON.message, true);
                     }
@@ -381,7 +381,7 @@ async function processSelectedDevices() {
                         await Api.devices_remove(action.lot.id, devicesIDs);
                         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);
+                        this.notifyUser("Failed to remove devices from selected lot/s", error.responseJSON.message, true);
                     }
                 }
                 requestCount += 1
@@ -428,7 +428,7 @@ async function processSelectedDevices() {
      * Generates a list item with a correspondient checkbox state
      * @param {Object} lot Lot model server
      * @param {Device[]} selectedDevices list selected devices
-     * @param {HTMLElement} elementTarget 
+     * @param {HTMLElement} elementTarget
      * @param {Action[]} actions
      */
     function templateLot(lot, selectedDevices, elementTarget, actions) {