checkpoint: add confirmation dialog

This commit is contained in:
RubenPX 2022-04-28 16:58:44 +02:00
parent 1ff0401b38
commit 4aa024b041
3 changed files with 67 additions and 7 deletions

View File

@ -276,6 +276,7 @@ async function processSelectedDevices() {
this.list = []; this.list = [];
} }
}) })
$("#confirmLotsModal").modal("hide"); // Hide dialog when click "Save changes"
document.getElementById("dropDownLotsSelector").classList.remove("show"); document.getElementById("dropDownLotsSelector").classList.remove("show");
} }
@ -302,10 +303,9 @@ async function processSelectedDevices() {
/** /**
* Generates a list item with a correspondient checkbox state * 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) { function templateLot(lot, elementTarget, actions) {
elementTarget.innerHTML = "" elementTarget.innerHTML = ""
@ -357,7 +357,48 @@ async function processSelectedDevices() {
if (eventClickActions) { if (eventClickActions) {
document.getElementById("ApplyDeviceLots").removeEventListener(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"); document.getElementById("ApplyDeviceLots").classList.add("disabled");
try { try {
@ -385,7 +426,6 @@ async function processSelectedDevices() {
return lot; return lot;
}) })
let lotsList = []; 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 == "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 == "indetermined").sort((a,b) => a.name.localeCompare(b.name)));

View File

@ -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>

View File

@ -329,7 +329,7 @@
<td> <td>
<input type="checkbox" class="deviceSelect" data="{{ dev.id }}" <input type="checkbox" class="deviceSelect" data="{{ dev.id }}"
data-device-type="{{ dev.type }}" data-device-manufacturer="{{ dev.manufacturer }}" 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 %} {% if form_new_allocate.type.data and dev.id in list_devices %}
checked="checked" checked="checked"
{% endif %} {% endif %}
@ -408,6 +408,7 @@
{% include "inventory/trade.html" %} {% include "inventory/trade.html" %}
{% include "inventory/alert_export_error.html" %} {% include "inventory/alert_export_error.html" %}
{% include "inventory/alert_unlink_tag_error.html" %} {% include "inventory/alert_unlink_tag_error.html" %}
{% include "inventory/alert_lots_changes.html" %}
<!-- Custom Code --> <!-- Custom Code -->
<script> <script>