add Search functionality

This commit is contained in:
RubenPX 2022-05-13 21:29:15 +02:00
parent adde4f88e4
commit a10fb5a212
1 changed files with 27 additions and 5 deletions

View File

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