checkpoint: add confirmation dialog

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 {Object} lot Lot model server
-     * @param {String} lotName 
+     * @param {HTMLElement} elementTarget 
-     * @param {Array<number>} selectedDevicesIDs
+     * @param {Array<Action>} actions
-     * @param {HTMLElement} target
      */
     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)));

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>

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>