From f26b441fef491955ed08f232bd406bd180ba5d52 Mon Sep 17 00:00:00 2001 From: RubenPX Date: Fri, 29 Apr 2022 11:36:55 +0200 Subject: [PATCH 1/8] create TableController to access more easy to table info --- .eslintrc.json | 3 +- ereuse_devicehub/static/js/main_inventory.js | 34 +++++++++++++++++++- 2 files changed, 35 insertions(+), 2 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 0d9213bb..56f4296d 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -27,7 +27,8 @@ "strict": "off", "class-methods-use-this": "off", "eqeqeq": "warn", - "radix": "warn" + "radix": "warn", + "max-classes-per-file": ["error", 2] }, "globals": { "API_URLS": true, diff --git a/ereuse_devicehub/static/js/main_inventory.js b/ereuse_devicehub/static/js/main_inventory.js index 380bb962..1bddad27 100644 --- a/ereuse_devicehub/static/js/main_inventory.js +++ b/ereuse_devicehub/static/js/main_inventory.js @@ -17,6 +17,38 @@ $(document).ready(() => { // $('#selectLot').selectpicker(); }) +class TableController { + static #tableRows = table.rows().dt.activeRows; + + /** + * @returns This will return all input attributes from selected devices + */ + static getSelectedDevices() { + return this.#ProcessTR(this.#tableRows.filter(element => element.querySelector("input").checked)) + } + + /** + * @returns This will return all input attributes from all devices in list + */ + static getAllDevices() { + return this.#ProcessTR(this.#tableRows) + } + + /** + * + * @param {HTMLElement} DOMElements + * @returns Procesed input atributes to an Object class + */ + static #ProcessTR(DOMElements) { + return DOMElements.map(element => { + const info = {} + info.checked = element.querySelector("input").checked + Object.values(element.querySelector("input").attributes).forEach(attrib => {info[attrib.nodeName] = attrib.nodeValue}) + return info + }) + } +} + function deviceSelect() { const devices_count = $(".deviceSelect").filter(":checked").length; get_device_list(); @@ -340,7 +372,7 @@ async function processSelectedDevices() { const listHTML = $("#LotsSelector") // Get selected devices - const selectedDevicesID = table.rows().dt.activeRows.filter(item => item.querySelector("input").checked).map(item => item.querySelector("input").attributes.data.value) + const selectedDevicesID = TableController.getSelectedDevices().map(item => item.data) if (selectedDevicesID.length <= 0) { listHTML.html("
  • No devices selected
    • "); From 0fd12ee37cd754c523a13c6bfe3c2f65c445af45 Mon Sep 17 00:00:00 2001 From: RubenPX Date: Fri, 29 Apr 2022 12:36:42 +0200 Subject: [PATCH 2/8] Use TableController to check all devices list --- ereuse_devicehub/static/js/main_inventory.js | 38 +++++++++++--------- 1 file changed, 21 insertions(+), 17 deletions(-) diff --git a/ereuse_devicehub/static/js/main_inventory.js b/ereuse_devicehub/static/js/main_inventory.js index 1bddad27..ccb34a05 100644 --- a/ereuse_devicehub/static/js/main_inventory.js +++ b/ereuse_devicehub/static/js/main_inventory.js @@ -24,14 +24,17 @@ class TableController { * @returns This will return all input attributes from selected devices */ static getSelectedDevices() { - return this.#ProcessTR(this.#tableRows.filter(element => element.querySelector("input").checked)) + return this.#tableRows + .filter(element => element.querySelector("input").checked) + .map(element => element.querySelector("input")) } /** * @returns This will return all input attributes from all devices in list */ static getAllDevices() { - return this.#ProcessTR(this.#tableRows) + return this.#tableRows + .map(element => element.querySelector("input")) } /** @@ -39,18 +42,18 @@ class TableController { * @param {HTMLElement} DOMElements * @returns Procesed input atributes to an Object class */ - static #ProcessTR(DOMElements) { + static ProcessTR(DOMElements) { return DOMElements.map(element => { const info = {} - info.checked = element.querySelector("input").checked - Object.values(element.querySelector("input").attributes).forEach(attrib => {info[attrib.nodeName] = attrib.nodeValue}) + info.checked = element.checked + Object.values(element.attributes).forEach(attrib => {info[attrib.nodeName.replace(/-/g, "_")] = attrib.nodeValue}) return info }) } } function deviceSelect() { - const devices_count = $(".deviceSelect").filter(":checked").length; + const devices_count = TableController.getSelectedDevices().length; get_device_list(); if (devices_count == 0) { $("#addingLotModal .pol").show(); @@ -92,7 +95,7 @@ function deviceSelect() { } function removeLot() { - const devices = $(".deviceSelect"); + const devices = TableController.getAllDevices(); if (devices.length > 0) { $("#btnRemoveLots .text-danger").show(); } else { @@ -102,8 +105,8 @@ function removeLot() { } function removeTag() { - const devices = $(".deviceSelect").filter(":checked"); - const devices_id = $.map(devices, (x) => $(x).attr("data")); + const devices = TableController.getSelectedDevices(); + const devices_id = devices.map(dev => dev.data); if (devices_id.length == 1) { const url = `/inventory/tag/devices/${devices_id[0]}/del/`; window.location.href = url; @@ -113,8 +116,8 @@ function removeTag() { } function addTag() { - const devices = $(".deviceSelect").filter(":checked"); - const devices_id = $.map(devices, (x) => $(x).attr("data")); + const devices = TableController.getSelectedDevices(); + const devices_id = devices.map(dev => dev.data); if (devices_id.length == 1) { $("#addingTagModal .pol").hide(); $("#addingTagModal .btn-primary").show(); @@ -169,7 +172,7 @@ function newDataWipe(action) { } function get_device_list() { - const devices = $(".deviceSelect").filter(":checked"); + const devices = TableController.getSelectedDevices(); /* Insert the correct count of devices in actions form */ const devices_count = devices.length; @@ -188,10 +191,11 @@ function get_device_list() { "Desktop": "", "Laptop": "", }; + list_devices = devices.map((x) => { - let typ = $(devices[x]).data("device-type"); - const manuf = $(devices[x]).data("device-manufacturer"); - const dhid = $(devices[x]).data("device-dhid"); + let typ = $(x).data("device-type"); + const manuf = $(x).data("device-manufacturer"); + const dhid = $(x).data("device-dhid"); if (computer[typ]) { typ = computer[typ]; }; @@ -203,7 +207,7 @@ function get_device_list() { } function export_file(type_file) { - const devices = $(".deviceSelect").filter(":checked"); + const devices = TableController.getSelectedDevices(); const devices_id = $.map(devices, (x) => $(x).attr("data-device-dhid")).join(","); if (devices_id) { const url = `/inventory/export/${type_file}/?ids=${devices_id}`; @@ -372,7 +376,7 @@ async function processSelectedDevices() { const listHTML = $("#LotsSelector") // Get selected devices - const selectedDevicesID = TableController.getSelectedDevices().map(item => item.data) + const selectedDevicesID = TableController.ProcessTR(TableController.getSelectedDevices()).map(item => item.data) if (selectedDevicesID.length <= 0) { listHTML.html("
  • No devices selected
    • "); From e238fb287a1cb0949849ee503eb2285d79fa5411 Mon Sep 17 00:00:00 2001 From: RubenPX Date: Fri, 29 Apr 2022 13:27:46 +0200 Subject: [PATCH 3/8] Fix remove rows using library API --- 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 ccb34a05..f7f2531b 100644 --- a/ereuse_devicehub/static/js/main_inventory.js +++ b/ereuse_devicehub/static/js/main_inventory.js @@ -326,11 +326,15 @@ async function processSelectedDevices() { const newTable = Array.from(tmpDiv.querySelectorAll("table.table > tbody > tr .deviceSelect")).map(x => x.attributes["data-device-dhid"].value) - table.rows().dt.activeRows.forEach(row => { + // https://github.com/fiduswriter/Simple-DataTables/wiki/rows()#removeselect-arraynumber + const rowsToRemove = [] + for (let i = 0; i < table.activeRows.length; i++) { + const row = table.activeRows[i]; if (!newTable.includes(row.querySelector("input").attributes["data-device-dhid"].value)) { - row.remove() + rowsToRemove.push(i) } - }) + } + table.rows().remove(rowsToRemove); } } From f8f4e10f9f8ac4a2eb61e6a459539f55d66ac769 Mon Sep 17 00:00:00 2001 From: RubenPX Date: Fri, 29 Apr 2022 13:33:44 +0200 Subject: [PATCH 4/8] Restore state of checkbox before apply lots changes --- ereuse_devicehub/static/js/main_inventory.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/ereuse_devicehub/static/js/main_inventory.js b/ereuse_devicehub/static/js/main_inventory.js index f7f2531b..74ef3196 100644 --- a/ereuse_devicehub/static/js/main_inventory.js +++ b/ereuse_devicehub/static/js/main_inventory.js @@ -335,6 +335,11 @@ async function processSelectedDevices() { } } table.rows().remove(rowsToRemove); + + // Restore state of checkbox + const selectAllBTN = document.getElementById("SelectAllBTN"); + selectAllBTN.checked = false; + selectAllBTN.indeterminate = false; } } From 7503895a4fea65bb7f97b94a9336aca045e21034 Mon Sep 17 00:00:00 2001 From: RubenPX Date: Fri, 29 Apr 2022 13:34:45 +0200 Subject: [PATCH 5/8] Adds selector by pages --- ereuse_devicehub/static/js/main_inventory.js | 23 ++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/ereuse_devicehub/static/js/main_inventory.js b/ereuse_devicehub/static/js/main_inventory.js index 74ef3196..0d902a0b 100644 --- a/ereuse_devicehub/static/js/main_inventory.js +++ b/ereuse_devicehub/static/js/main_inventory.js @@ -19,9 +19,11 @@ $(document).ready(() => { class TableController { static #tableRows = table.rows().dt.activeRows; + + static #tableRowsPage = table.rows().dt.pages[table.rows().dt.currentPage - 1]; /** - * @returns This will return all input attributes from selected devices + * @returns Selected inputs from device list */ static getSelectedDevices() { return this.#tableRows @@ -30,13 +32,30 @@ class TableController { } /** - * @returns This will return all input attributes from all devices in list + * @returns Selected inputs in current page from device list + */ + static getAllSelectedDevicesInCurrentPage() { + return this.#tableRowsPage + .filter(element => element.querySelector("input").checked) + .map(element => element.querySelector("input")) + } + + /** + * @returns All inputs from device list */ static getAllDevices() { return this.#tableRows .map(element => element.querySelector("input")) } + /** + * @returns All inputs from current page in device list + */ + static getAllDevicesInCurrentPage() { + return this.#tableRows + .map(element => element.querySelector("input")) + } + /** * * @param {HTMLElement} DOMElements From b88a514edf95f1b7001e8893c6c41c7fa5c678f2 Mon Sep 17 00:00:00 2001 From: RubenPX Date: Fri, 29 Apr 2022 13:58:48 +0200 Subject: [PATCH 6/8] Fix reactivity un variables avoid outdated data variable --- 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 0d902a0b..b9e2c5ff 100644 --- a/ereuse_devicehub/static/js/main_inventory.js +++ b/ereuse_devicehub/static/js/main_inventory.js @@ -18,9 +18,9 @@ $(document).ready(() => { }) class TableController { - static #tableRows = table.rows().dt.activeRows; - - static #tableRowsPage = table.rows().dt.pages[table.rows().dt.currentPage - 1]; + static #tableRows = table.activeRows; + + static #tableRowsPage = () => table.pages[table.rows().dt.currentPage - 1]; /** * @returns Selected inputs from device list @@ -35,7 +35,7 @@ class TableController { * @returns Selected inputs in current page from device list */ static getAllSelectedDevicesInCurrentPage() { - return this.#tableRowsPage + return this.#tableRowsPage() .filter(element => element.querySelector("input").checked) .map(element => element.querySelector("input")) } @@ -52,7 +52,7 @@ class TableController { * @returns All inputs from current page in device list */ static getAllDevicesInCurrentPage() { - return this.#tableRows + return this.#tableRowsPage() .map(element => element.querySelector("input")) } From 8bbca0301b9ccf14d060347de0531cdf253a49c8 Mon Sep 17 00:00:00 2001 From: RubenPX Date: Fri, 29 Apr 2022 14:06:09 +0200 Subject: [PATCH 7/8] Selection devices by page --- ereuse_devicehub/static/js/main.js | 28 --------------- ereuse_devicehub/static/js/main_inventory.js | 38 +++++++++++++++++++- 2 files changed, 37 insertions(+), 29 deletions(-) diff --git a/ereuse_devicehub/static/js/main.js b/ereuse_devicehub/static/js/main.js index 55a4951c..1dbaaeb0 100644 --- a/ereuse_devicehub/static/js/main.js +++ b/ereuse_devicehub/static/js/main.js @@ -215,34 +215,6 @@ }, 200); } - /** - * Select all functionality - */ - const btnSelectAll = document.getElementById("SelectAllBTN"); - const tableListCheckboxes = document.querySelectorAll(".deviceSelect"); - - function itemListCheckChanged(event) { - const isAllChecked = Array.from(tableListCheckboxes).map(itm => itm.checked); - if (isAllChecked.every(bool => bool == true)) { - btnSelectAll.checked = true; - btnSelectAll.indeterminate = false; - } else if (isAllChecked.every(bool => bool == false)) { - btnSelectAll.checked = false; - btnSelectAll.indeterminate = false; - } else { - btnSelectAll.indeterminate = true; - } - } - - tableListCheckboxes.forEach(item => { - item.addEventListener("click", itemListCheckChanged); - }) - - btnSelectAll.addEventListener("click", event => { - const checkedState = event.target.checked; - tableListCheckboxes.forEach(ckeckbox => {ckeckbox.checked = checkedState}); - }) - /** * Avoid hide dropdown when user clicked inside */ diff --git a/ereuse_devicehub/static/js/main_inventory.js b/ereuse_devicehub/static/js/main_inventory.js index b9e2c5ff..7bccb247 100644 --- a/ereuse_devicehub/static/js/main_inventory.js +++ b/ereuse_devicehub/static/js/main_inventory.js @@ -34,7 +34,7 @@ class TableController { /** * @returns Selected inputs in current page from device list */ - static getAllSelectedDevicesInCurrentPage() { + static getAllSelectedDevicesInCurrentPage() { return this.#tableRowsPage() .filter(element => element.querySelector("input").checked) .map(element => element.querySelector("input")) @@ -71,6 +71,42 @@ class TableController { } } +/** + * Select all functionality + */ +window.addEventListener("DOMContentLoaded", () => { + const btnSelectAll = document.getElementById("SelectAllBTN"); + + function itemListCheckChanged() { + const listDevices = TableController.getAllDevicesInCurrentPage() + const isAllChecked = listDevices.map(itm => itm.checked); + + if (isAllChecked.every(bool => bool == true)) { + btnSelectAll.checked = true; + btnSelectAll.indeterminate = false; + } else if (isAllChecked.every(bool => bool == false)) { + btnSelectAll.checked = false; + btnSelectAll.indeterminate = false; + } else { + btnSelectAll.indeterminate = true; + } + } + + TableController.getAllDevices().forEach(item => { + item.addEventListener("click", itemListCheckChanged); + }) + + btnSelectAll.addEventListener("click", event => { + const checkedState = event.target.checked; + TableController.getAllDevicesInCurrentPage().forEach(ckeckbox => { ckeckbox.checked = checkedState }); + }) + + // https://github.com/fiduswriter/Simple-DataTables/wiki/Events + table.on("datatable.page", () => itemListCheckChanged()); + table.on("datatable.perpage", () => itemListCheckChanged()); + table.on("datatable.update", () => itemListCheckChanged()); +}) + function deviceSelect() { const devices_count = TableController.getSelectedDevices().length; get_device_list(); From c78c9c5d7da8a88a143df2f7bd0580f27b0876f2 Mon Sep 17 00:00:00 2001 From: RubenPX Date: Fri, 29 Apr 2022 14:07:04 +0200 Subject: [PATCH 8/8] Lint --- ereuse_devicehub/static/js/main.js | 6 +++--- ereuse_devicehub/static/js/main_inventory.js | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/ereuse_devicehub/static/js/main.js b/ereuse_devicehub/static/js/main.js index 1dbaaeb0..996d8b23 100644 --- a/ereuse_devicehub/static/js/main.js +++ b/ereuse_devicehub/static/js/main.js @@ -14,9 +14,9 @@ el = el.trim() if (all) { return [...document.querySelectorAll(el)] - } - return document.querySelector(el) - + } + return document.querySelector(el) + } /** diff --git a/ereuse_devicehub/static/js/main_inventory.js b/ereuse_devicehub/static/js/main_inventory.js index 7bccb247..5d4fedf3 100644 --- a/ereuse_devicehub/static/js/main_inventory.js +++ b/ereuse_devicehub/static/js/main_inventory.js @@ -51,7 +51,7 @@ class TableController { /** * @returns All inputs from current page in device list */ - static getAllDevicesInCurrentPage() { + static getAllDevicesInCurrentPage() { return this.#tableRowsPage() .map(element => element.querySelector("input")) } @@ -65,7 +65,7 @@ class TableController { return DOMElements.map(element => { const info = {} info.checked = element.checked - Object.values(element.attributes).forEach(attrib => {info[attrib.nodeName.replace(/-/g, "_")] = attrib.nodeValue}) + Object.values(element.attributes).forEach(attrib => { info[attrib.nodeName.replace(/-/g, "_")] = attrib.nodeValue }) return info }) }