From: Giorgio Ravera Date: Tue, 26 May 2026 19:33:07 +0000 (+0200) Subject: Moved filterData & clearSearch to common.js X-Git-Url: http://git.giorgioravera.it/?a=commitdiff_plain;h=c6a280e3104354448b89494e5244956fa2241c6c;p=network-manager.git Moved filterData & clearSearch to common.js --- diff --git a/frontend/js/aliases.js b/frontend/js/aliases.js index b0c657e..4485258 100644 --- a/frontend/js/aliases.js +++ b/frontend/js/aliases.js @@ -1,5 +1,5 @@ // Import common js -import { loadModals, showToast, sortTable, initSortableTable, resetSorting } from './common.js'; +import { loadModals, showToast, sortTable, initSortableTable, resetSorting, filterData, clearSearch } from './common.js'; import { reloadDNS, reloadDHCP } from './services.js'; import { apiMap, fetchData } from './api.js'; @@ -500,32 +500,6 @@ async function handleDeleteAlias(e, el) { return false; } -// ----------------------------- -// filter aliases in the table -// ----------------------------- -function filterAliases() { - const query = document.getElementById("searchInput").value.toLowerCase(); - const rows = document.querySelectorAll("#dataTable tbody tr"); - - rows.forEach(row => { - const text = row.textContent.toLowerCase(); - row.style.display = text.includes(query) ? "" : "none"; - }); -} - -// ----------------------------- -// Clear search on ESC key -// ----------------------------- -async function clearSearch() { - const input = document.getElementById("searchInput"); - if (input) { - input.value = ""; - input.blur(); - } - viewAliases = [...allAliases]; - await loadAliases(false); -} - // ----------------------------- // Action Handlers // ----------------------------- @@ -617,7 +591,7 @@ function initSearch() { // clean input on load input.value = ""; // live filter for each keystroke - input.addEventListener("input", filterAliases); + input.addEventListener("input", filterData); // Escape management when focus is in the input input.addEventListener("keydown", (e) => { if (e.key === "Escape") { @@ -625,7 +599,9 @@ function initSearch() { e.stopPropagation(); // evita che arrivi al listener globale resetSorting(sortState); clearSearch(); // svuota input e ricarica tabella (come definito nella tua funzione) - filterAliases(''); // ripristina tabella + viewAliases = [...allAliases]; + loadAliases(false); + filterData(''); // ripristina tabella''); } }); } @@ -732,7 +708,9 @@ function handleKeyboard(e) { e.preventDefault(); // evita side-effect (es. chiusure di modali del browser) resetSorting(sortState); clearSearch(); // svuota input e ricarica tabella (come definito nella tua funzione) - filterAliases(''); // ripristina tabella + viewAliases = [...allAliases]; + loadAliases(false); + filterData(''); // ripristina tabella''); } // Button event delegation (Enter, Space) diff --git a/frontend/js/api.js b/frontend/js/api.js index 0b6c4d2..b231567 100644 --- a/frontend/js/api.js +++ b/frontend/js/api.js @@ -57,4 +57,4 @@ export async function fetchData(api) { throw err; } return items; -} \ No newline at end of file +} diff --git a/frontend/js/common.js b/frontend/js/common.js index fad618b..ae2f0bf 100644 --- a/frontend/js/common.js +++ b/frontend/js/common.js @@ -320,7 +320,7 @@ export function resetSorting(state, tableId = 'dataTable') { } /** - * Opzionale: inizializza aria-sort='none' + * Optional: set aria-sort='none' on all headers on page load for better accessibility. */ export function initSortableTable() { const table = document.getElementById("dataTable"); @@ -328,3 +328,27 @@ export function initSortableTable() { const ths = table.querySelectorAll("thead th"); ths.forEach(th => th.setAttribute("aria-sort", "none")); } + +/** + * Live filter: mostra solo le righe che contengono il testo di ricerca (case-insensitive) + */ +export function filterData() { + const query = document.getElementById("searchInput").value.toLowerCase(); + const rows = document.querySelectorAll("#dataTable tbody tr"); + + rows.forEach(row => { + const text = row.textContent.toLowerCase(); + row.style.display = text.includes(query) ? "" : "none"; + }); +} + +/** + * Clear search input and reset table filter + */ +export function clearSearch() { + const input = document.getElementById("searchInput"); + if (input) { + input.value = ""; + input.blur(); + } +} diff --git a/frontend/js/devices.js b/frontend/js/devices.js index 78db81f..72c5a1f 100644 --- a/frontend/js/devices.js +++ b/frontend/js/devices.js @@ -1,5 +1,5 @@ // Import common js -import { loadModals, isValidIPv4, isValidIPv6, isValidMAC, showToast, sortTable, initSortableTable, resetSorting } from './common.js'; +import { loadModals, isValidIPv4, isValidIPv6, isValidMAC, showToast, sortTable, initSortableTable, resetSorting, filterData, clearSearch } from './common.js'; import { reloadDNS, reloadDHCP } from './services.js'; import { apiMap, fetchData } from './api.js'; @@ -617,32 +617,6 @@ async function handleDeleteDevice(e, el) { return false; } -// ----------------------------- -// filter devices in the table -// ----------------------------- -function filterDevices() { - const query = document.getElementById("searchInput").value.toLowerCase(); - const rows = document.querySelectorAll("#dataTable tbody tr"); - - rows.forEach(row => { - const text = row.textContent.toLowerCase(); - row.style.display = text.includes(query) ? "" : "none"; - }); -} - -// ----------------------------- -// Clear search on ESC key -// ----------------------------- -async function clearSearch() { - const input = document.getElementById("searchInput"); - if (input) { - input.value = ""; - input.blur(); - } - viewDevices = [...allDevices]; - await loadDevices(false); -} - // ----------------------------- // Action Handlers // ----------------------------- @@ -734,7 +708,7 @@ function initSearch() { // clean input on load input.value = ""; // live filter for each keystroke - input.addEventListener("input", filterDevices); + input.addEventListener("input", filterData); // Escape management when focus is in the input input.addEventListener("keydown", (e) => { if (e.key === "Escape") { @@ -742,7 +716,9 @@ function initSearch() { e.stopPropagation(); // evita che arrivi al listener globale resetSorting(sortState); clearSearch(); // svuota input e ricarica tabella (come definito nella tua funzione) - filterDevices(''); // ripristina tabella + viewDevices = [...allDevices]; + loadDevices(false); + filterData(''); // ripristina tabella''); } }); } @@ -849,7 +825,9 @@ function handleKeyboard(e) { e.preventDefault(); // evita side-effect (es. chiusure di modali del browser) resetSorting(sortState); clearSearch(); // svuota input e ricarica tabella (come definito nella tua funzione) - filterDevices(''); // ripristina tabella + viewDevices = [...allDevices]; + loadDevices(false); + filterData(''); // ripristina tabella''); } // Button event delegation (Enter, Space) diff --git a/frontend/js/hosts.js b/frontend/js/hosts.js index 2efdd77..408c0d3 100644 --- a/frontend/js/hosts.js +++ b/frontend/js/hosts.js @@ -1,5 +1,5 @@ // Import common js -import { loadModals, isValidIPv4, isValidIPv6, isValidMAC, showToast, sortTable, initSortableTable, resetSorting } from './common.js'; +import { loadModals, isValidIPv4, isValidIPv6, isValidMAC, showToast, sortTable, initSortableTable, resetSorting, filterData, clearSearch } from './common.js'; import { reloadDNS, reloadDHCP } from './services.js'; import { apiMap, fetchData } from './api.js'; @@ -524,32 +524,6 @@ async function handleDeleteHost(e, el) { return false; } -// ----------------------------- -// filter hosts in the table -// ----------------------------- -function filterHosts() { - const query = document.getElementById("searchInput").value.toLowerCase(); - const rows = document.querySelectorAll("#dataTable tbody tr"); - - rows.forEach(row => { - const text = row.textContent.toLowerCase(); - row.style.display = text.includes(query) ? "" : "none"; - }); -} - -// ----------------------------- -// Clear search on ESC key -// ----------------------------- -async function clearSearch() { - const input = document.getElementById("searchInput"); - if (input) { - input.value = ""; - input.blur(); - } - viewHosts = [...allHosts]; - await loadHosts(false); -} - // ----------------------------- // Action Handlers // ----------------------------- @@ -641,7 +615,7 @@ function initSearch() { // clean input on load input.value = ""; // live filter for each keystroke - input.addEventListener("input", filterHosts); + input.addEventListener("input", filterData); // Escape management when focus is in the input input.addEventListener("keydown", (e) => { if (e.key === "Escape") { @@ -649,7 +623,9 @@ function initSearch() { e.stopPropagation(); // evita che arrivi al listener globale resetSorting(sortState); clearSearch(); // svuota input e ricarica tabella (come definito nella tua funzione) - filterHosts(''); // ripristina tabella + viewHosts = [...allHosts]; + loadHosts(false); + filterData(''); // ripristina tabella } }); } @@ -756,7 +732,9 @@ function handleKeyboard(e) { e.preventDefault(); // evita side-effect (es. chiusure di modali del browser) resetSorting(sortState); clearSearch(); // svuota input e ricarica tabella (come definito nella tua funzione) - filterHosts(''); // ripristina tabella + viewHosts = [...allHosts]; + loadHosts(false); + filterData(''); // ripristina tabella } // Button event delegation (Enter, Space) diff --git a/frontend/js/leases.js b/frontend/js/leases.js index dd2db98..0056a38 100644 --- a/frontend/js/leases.js +++ b/frontend/js/leases.js @@ -1,5 +1,5 @@ // Import common js -import { loadModals, isValidIPv4, isValidIPv6, isValidMAC, showToast, sortTable, initSortableTable, resetSorting } from './common.js'; +import { loadModals, isValidIPv4, isValidIPv6, isValidMAC, showToast, sortTable, initSortableTable, resetSorting, filterData, clearSearch } from './common.js'; import { reloadDNS, reloadDHCP } from './services.js'; import { apiMap, fetchData } from './api.js'; @@ -488,32 +488,6 @@ async function handleDeleteLease(e, el) { return false; } -// ----------------------------- -// filter dhcp leases in the table -// ----------------------------- -function filterLeases() { - const query = document.getElementById("searchInput").value.toLowerCase(); - const rows = document.querySelectorAll("#dataTable tbody tr"); - - rows.forEach(row => { - const text = row.textContent.toLowerCase(); - row.style.display = text.includes(query) ? "" : "none"; - }); -} - -// ----------------------------- -// Clear search on ESC key -// ----------------------------- -async function clearSearch() { - const input = document.getElementById("searchInput"); - if (input) { - input.value = ""; - input.blur(); - } - viewLeases = [...allLeases]; - await loadLeases(false); -} - // ----------------------------- // Action Handlers // ----------------------------- @@ -605,7 +579,7 @@ function initSearch() { // clean input on load input.value = ""; // live filter for each keystroke - input.addEventListener("input", filterLeases); + input.addEventListener("input", filterData); // Escape management when focus is in the input input.addEventListener("keydown", (e) => { if (e.key === "Escape") { @@ -613,7 +587,9 @@ function initSearch() { e.stopPropagation(); // evita che arrivi al listener globale resetSorting(sortState); clearSearch(); // svuota input e ricarica tabella (come definito nella tua funzione) - filterLeases(''); // ripristina tabella + viewLeases = [...allLeases]; + loadLeases(false); + filterData(''); // ripristina tabella''); } }); } @@ -712,7 +688,9 @@ function handleKeyboard(e) { e.preventDefault(); // evita side-effect (es. chiusure di modali del browser) resetSorting(sortState); clearSearch(); // svuota input e ricarica tabella (come definito nella tua funzione) - filterLeases(''); // ripristina tabella + viewLeases = [...allLeases]; + loadLeases(false); + filterData(''); // ripristina tabella''); } // Button event delegation (Enter, Space) diff --git a/frontend/modals.html b/frontend/modals.html index 3d4cf70..adcd026 100644 --- a/frontend/modals.html +++ b/frontend/modals.html @@ -211,4 +211,4 @@ - \ No newline at end of file +