add Search functionality
This commit is contained in:
parent
adde4f88e4
commit
a10fb5a212
|
@ -93,7 +93,7 @@ const selectorController = (action) => {
|
||||||
table.on("datatable.perpage", () => itemListCheckChanged());
|
table.on("datatable.perpage", () => itemListCheckChanged());
|
||||||
table.on("datatable.update", () => itemListCheckChanged());
|
table.on("datatable.update", () => itemListCheckChanged());
|
||||||
}
|
}
|
||||||
|
|
||||||
if (action == "softInit") {
|
if (action == "softInit") {
|
||||||
softInit();
|
softInit();
|
||||||
itemListCheckChanged();
|
itemListCheckChanged();
|
||||||
|
@ -103,8 +103,8 @@ const selectorController = (action) => {
|
||||||
function itemListCheckChanged() {
|
function itemListCheckChanged() {
|
||||||
alertInfoDevices.innerHTML = `Selected devices: ${TableController.getSelectedDevices().length}
|
alertInfoDevices.innerHTML = `Selected devices: ${TableController.getSelectedDevices().length}
|
||||||
${TableController.getAllDevices().length != TableController.getSelectedDevices().length
|
${TableController.getAllDevices().length != TableController.getSelectedDevices().length
|
||||||
? `<a href="#" class="ml-3">Select all devices (${TableController.getAllDevices().length})</a>`
|
? `<a href="#" class="ml-3">Select all devices (${TableController.getAllDevices().length})</a>`
|
||||||
: "<a href=\"#\" class=\"ml-3\">Cancel selection</a>"
|
: "<a href=\"#\" class=\"ml-3\">Cancel selection</a>"
|
||||||
}`;
|
}`;
|
||||||
|
|
||||||
if (TableController.getSelectedDevices().length <= 0) {
|
if (TableController.getSelectedDevices().length <= 0) {
|
||||||
|
@ -132,7 +132,7 @@ const selectorController = (action) => {
|
||||||
|
|
||||||
get_device_list();
|
get_device_list();
|
||||||
}
|
}
|
||||||
|
|
||||||
btnSelectAll.addEventListener("click", event => {
|
btnSelectAll.addEventListener("click", event => {
|
||||||
const checkedState = event.target.checked;
|
const checkedState = event.target.checked;
|
||||||
TableController.getAllDevicesInCurrentPage().forEach(ckeckbox => { ckeckbox.checked = checkedState });
|
TableController.getAllDevicesInCurrentPage().forEach(ckeckbox => { ckeckbox.checked = checkedState });
|
||||||
|
@ -317,6 +317,26 @@ function export_file(type_file) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
class lotsSearcher {
|
||||||
|
static lots = [];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* do search when lot change in the search input
|
||||||
|
*/
|
||||||
|
static doSearch(inputSearch) {
|
||||||
|
lotsSearcher.lots.map((lot) => {
|
||||||
|
if (lot.querySelector("label").innerText.toLowerCase().includes(inputSearch.toLowerCase())) {
|
||||||
|
lot.style.display = "block";
|
||||||
|
} else {
|
||||||
|
lot.style.display = "none";
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
document.getElementById("lots-search").addEventListener("input", (e) => { lotsSearcher.doSearch(e.target.value) })
|
||||||
|
})
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Reactive lots button
|
* Reactive lots button
|
||||||
|
@ -438,7 +458,7 @@ async function processSelectedDevices() {
|
||||||
const tmpDiv = document.createElement("div")
|
const tmpDiv = document.createElement("div")
|
||||||
tmpDiv.innerHTML = newRequest
|
tmpDiv.innerHTML = newRequest
|
||||||
|
|
||||||
|
|
||||||
const newTable = document.createElement("table")
|
const newTable = document.createElement("table")
|
||||||
newTable.innerHTML = tmpDiv.querySelector("table").innerHTML
|
newTable.innerHTML = tmpDiv.querySelector("table").innerHTML
|
||||||
newTable.classList = "table"
|
newTable.classList = "table"
|
||||||
|
@ -495,6 +515,7 @@ async function processSelectedDevices() {
|
||||||
doc.children[0].addEventListener("mouseup", (ev) => actions.manage(ev, lot, selectedDevices));
|
doc.children[0].addEventListener("mouseup", (ev) => actions.manage(ev, lot, selectedDevices));
|
||||||
doc.children[1].addEventListener("mouseup", (ev) => actions.manage(ev, lot, selectedDevices));
|
doc.children[1].addEventListener("mouseup", (ev) => actions.manage(ev, lot, selectedDevices));
|
||||||
elementTarget.append(doc);
|
elementTarget.append(doc);
|
||||||
|
lotsSearcher.lots.push(doc);
|
||||||
}
|
}
|
||||||
|
|
||||||
const listHTML = $("#LotsSelector")
|
const listHTML = $("#LotsSelector")
|
||||||
|
@ -588,6 +609,7 @@ async function processSelectedDevices() {
|
||||||
lotsList = lotsList.flat(); // flat array
|
lotsList = lotsList.flat(); // flat array
|
||||||
|
|
||||||
listHTML.html("");
|
listHTML.html("");
|
||||||
|
lotsSearcher.lots = [];
|
||||||
lotsList.forEach(lot => templateLot(lot, selectedDevices, listHTML, actions));
|
lotsList.forEach(lot => templateLot(lot, selectedDevices, listHTML, actions));
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.log(error);
|
console.log(error);
|
||||||
|
|
Reference in New Issue