From 0f962624c4a41070e8ab2e49a067316b1c0212f3 Mon Sep 17 00:00:00 2001 From: Anshul Saha Date: Fri, 16 Jun 2023 12:13:47 -0500 Subject: [PATCH 1/5] made tables sortable and filterable --- resources/templates/footer.php | 2 + webroot/admin/pi-mgmt.php | 10 ++-- webroot/admin/user-mgmt.php | 14 +++--- webroot/js/filterable.js | 86 ++++++++++++++++++++++++++++++++++ webroot/js/sortable.js | 73 +++++++++++++++++++++++++++++ 5 files changed, 173 insertions(+), 12 deletions(-) create mode 100644 webroot/js/filterable.js create mode 100644 webroot/js/sortable.js diff --git a/resources/templates/footer.php b/resources/templates/footer.php index 642f6e4..f7908f7 100644 --- a/resources/templates/footer.php +++ b/resources/templates/footer.php @@ -25,6 +25,8 @@ + + diff --git a/webroot/admin/pi-mgmt.php b/webroot/admin/pi-mgmt.php index 1b14565..63bec30 100644 --- a/webroot/admin/pi-mgmt.php +++ b/webroot/admin/pi-mgmt.php @@ -62,7 +62,7 @@

PI Management

- +
Pending PI Requests
@@ -104,11 +104,11 @@
List of PIs
-
+
- - - + + + diff --git a/webroot/admin/user-mgmt.php b/webroot/admin/user-mgmt.php index 56c816a..8992f0a 100644 --- a/webroot/admin/user-mgmt.php +++ b/webroot/admin/user-mgmt.php @@ -23,15 +23,15 @@

User Management

- + -
NameUnity IDMail⫧ Name⫧ Unity ID⫧ Mail Actions
+
- - - - - + + + + + diff --git a/webroot/js/filterable.js b/webroot/js/filterable.js new file mode 100644 index 0000000..a1ea078 --- /dev/null +++ b/webroot/js/filterable.js @@ -0,0 +1,86 @@ +function getQueryVariable(variable) { + var query = window.location.search.substring(1); + var vars = query.split("&"); + for (var i = 0; i < vars.length; i++) { + var pair = vars[i].split("="); + + if (pair[0] == variable) { + return pair[1]; + } + } + return false; +} + +function updateQueryStringParameter(uri, key, value) { + let currentURL = new URL(window.location.href); + let params = currentURL.searchParams; + if (params.has(key)) { + params.delete(key); + } + params.append(key, value); + window.history.pushState("object or string", "Title", currentURL.href); +} + +function updateFilterInputs() { + $(".filterSearch").each(function() { + if (getQueryVariable("filter") != false) { + if (this.id == getQueryVariable("filter")+"-filter") { + if ($(this).css("display") == "inline-block" && $(this).css("visibility") == "visible" && getQueryVariable("value") == false) { + updateQueryStringParameter(window.location.href, "filter", ""); + updateQueryStringParameter(window.location.href, "value", ""); + updateFilterInputs(); + return; + } + $(this).css("display", "inline-block"); + $(this).css("visibility", "visible"); + } else { + $(this).css("display", "inline-block"); + $(this).css("visibility", "hidden"); + } + } else { + $(this).css("display", "none"); + } + + if (getQueryVariable("value") != false) { + $(this).val(getQueryVariable("value")); + } else { + $(this).val(""); + } + + $(this).on("keyup", function(e) { + updateQueryStringParameter(window.location.href, "value", $(this).val()); + filterRows(); + }) + }); +} + +updateFilterInputs(); + +var filters = document.querySelectorAll("span.filter"); +filters.forEach(function(filter) { + filter.addEventListener("click", function(e) { + e.preventDefault(); + e.stopPropagation(); + updateQueryStringParameter(window.location.href, "filter", e.target.parentElement.id); + updateFilterInputs(); + }); +}); + +function filterRows() { + var filter = getQueryVariable("filter"); + var filterValue = getQueryVariable("value"); + + if (filter) { + var table = document.querySelector("table.filterable"); + var rows = Array.from(table.querySelectorAll("tr:nth-child(n+2)")); + var column = table.querySelector("tr.key").querySelector("td#" + filter).cellIndex; + rows.forEach(function(row) { + if (row.cells[column].textContent.trim().toLowerCase().indexOf(filterValue.toLowerCase()) == -1) { + row.style.display = "none"; + } else { + row.style.display = ""; + } + } + ); + } +} \ No newline at end of file diff --git a/webroot/js/sortable.js b/webroot/js/sortable.js new file mode 100644 index 0000000..51fbe7b --- /dev/null +++ b/webroot/js/sortable.js @@ -0,0 +1,73 @@ +var table = document.querySelector("table.sortable"); +table.querySelectorAll("td").forEach(function(td) { + td.addEventListener("click", function(e) { + if (td.parentElement.classList.contains("key") && td.innerHTML != "Actions") { + if (e.target.classList.contains("filter")) { + updateQueryStringParameter(window.location.href, "filter", e.target.parentElement.id); + updateFilterInputs(); + } else { + var column = td.cellIndex; + var rows = Array.from(table.querySelectorAll("tr:nth-child(n+2)")); + var order = td.classList.toggle("asc") ? 1 : -1; + rows.sort(function(a, b) { + return order * (a.cells[column].textContent.trim().localeCompare(b.cells[column].textContent.trim(), undefined, { + numeric: true + })); + }); + rows.forEach(function(row) { + table.appendChild(row); + }); + var keys = document.querySelectorAll("tr.key"); + keys.forEach(function(key) { + key.querySelectorAll("td").forEach(function(td) { + td.innerHTML = td.innerHTML.replace(/ ▲| ▼/, ""); + }); + }); + var orderSymbol = order == 1 ? "▲" : "▼"; + td.innerHTML = td.innerHTML + " " + orderSymbol; + updateQueryStringParameter(window.location.href, "sort", td.id); + updateQueryStringParameter(window.location.href, "order", order == 1 ? "asc" : "desc"); + } + } + }); +}); + +function getQueryVariable(variable) { + var query = window.location.search.substring(1); + var vars = query.split("&"); + for (var i = 0; i < vars.length; i++) { + var pair = vars[i].split("="); + + if (pair[0] == variable) { + return pair[1]; + } + } + return false; +} + +function updateQueryStringParameter(uri, key, value) { + let currentURL = new URL(window.location.href); + let params = currentURL.searchParams; + if (params.has(key)) { + params.delete(key); + } + params.append(key, value); + window.history.pushState("object or string", "Title", currentURL.href); +} + +window.onload = function() { + var sort = getQueryVariable("sort"); + var order = getQueryVariable("order"); + if (sort) { + var sortElement = document.getElementById(sort); + if (sortElement) { + if (order == "asc") { + sortElement.click(); + } else if (order == "desc") { + sortElement.click(); + sortElement.click(); + } + } + } + filterRows(); +} \ No newline at end of file From e037eadbbcf1911775e907725a4f5612aba02072 Mon Sep 17 00:00:00 2001 From: Anshul Saha Date: Fri, 16 Jun 2023 12:46:12 -0500 Subject: [PATCH 2/5] cs fix --- resources/templates/header.php | 1 + webroot/admin/pi-mgmt.php | 9 ++++++--- webroot/admin/user-mgmt.php | 15 ++++++++++----- webroot/css/filters.css | 3 +++ 4 files changed, 20 insertions(+), 8 deletions(-) create mode 100644 webroot/css/filters.css diff --git a/resources/templates/header.php b/resources/templates/header.php index ac76566..b0f3d58 100644 --- a/resources/templates/header.php +++ b/resources/templates/header.php @@ -32,6 +32,7 @@ /css/navbar.css"> /css/modal.css"> /css/tables.css"> + /css/filters.css"> "> diff --git a/webroot/admin/pi-mgmt.php b/webroot/admin/pi-mgmt.php index 63bec30..2bff169 100644 --- a/webroot/admin/pi-mgmt.php +++ b/webroot/admin/pi-mgmt.php @@ -106,9 +106,12 @@
NameUIDOrgMailGroups⫧ Name⫧ UID⫧ Org⫧ Mail⫧ Groups Actions
- - - + + + + + + diff --git a/webroot/admin/user-mgmt.php b/webroot/admin/user-mgmt.php index 8992f0a..a3629fb 100644 --- a/webroot/admin/user-mgmt.php +++ b/webroot/admin/user-mgmt.php @@ -27,11 +27,16 @@
⫧ Name⫧ Unity ID⫧ Mail⫧ Name⫧ Unity ID⫧ Mail Actions
- - - - - + + + + + + + + + + diff --git a/webroot/css/filters.css b/webroot/css/filters.css new file mode 100644 index 0000000..933a8a3 --- /dev/null +++ b/webroot/css/filters.css @@ -0,0 +1,3 @@ +.filterSearch { + max-width: fit-content !important; +} \ No newline at end of file From 897b84d6fdf504be30838a1ec424ac1a0e695117 Mon Sep 17 00:00:00 2001 From: Anshul Saha Date: Fri, 16 Jun 2023 13:04:13 -0500 Subject: [PATCH 3/5] cs fix(2) --- webroot/admin/pi-mgmt.php | 6 +++--- webroot/admin/user-mgmt.php | 10 +++++----- webroot/css/filters.css | 10 +++++++++- 3 files changed, 17 insertions(+), 9 deletions(-) diff --git a/webroot/admin/pi-mgmt.php b/webroot/admin/pi-mgmt.php index 2bff169..54d7295 100644 --- a/webroot/admin/pi-mgmt.php +++ b/webroot/admin/pi-mgmt.php @@ -106,11 +106,11 @@
⫧ Name⫧ UID⫧ Org⫧ Mail⫧ Groups⫧ Name⫧ UID⫧ Org⫧ Mail⫧ Groups Actions
- + - + - + diff --git a/webroot/admin/user-mgmt.php b/webroot/admin/user-mgmt.php index a3629fb..92327c5 100644 --- a/webroot/admin/user-mgmt.php +++ b/webroot/admin/user-mgmt.php @@ -27,15 +27,15 @@
⫧ Name ⫧ Unity ID ⫧ Mail Actions
- + - + - + - + - + diff --git a/webroot/css/filters.css b/webroot/css/filters.css index 933a8a3..922cafe 100644 --- a/webroot/css/filters.css +++ b/webroot/css/filters.css @@ -1,3 +1,11 @@ .filterSearch { max-width: fit-content !important; -} \ No newline at end of file +} + +#uid-filter, #org-filter, #mail-filter, #groups-filter { + margin-right: 5px; +} + +#name-filter, #unityID-filter { + margin-right: 100px; +} From 4721f989e51367f4811878aacf141891c9ae7488 Mon Sep 17 00:00:00 2001 From: Anshul Saha Date: Mon, 17 Jul 2023 11:12:49 -0500 Subject: [PATCH 4/5] added cursor: pointer --- webroot/css/filters.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/webroot/css/filters.css b/webroot/css/filters.css index 922cafe..94f70ff 100644 --- a/webroot/css/filters.css +++ b/webroot/css/filters.css @@ -9,3 +9,7 @@ #name-filter, #unityID-filter { margin-right: 100px; } + +.key td:hover { + cursor: pointer; +} \ No newline at end of file From 58af24ccb767ff8f00bd9e2347ed56147f1fd687 Mon Sep 17 00:00:00 2001 From: Anshul Saha Date: Mon, 25 Dec 2023 12:16:24 +0530 Subject: [PATCH 5/5] fixed filter input box to left and made it dynamic --- resources/templates/footer.php | 4 +- webroot/admin/pi-mgmt.php | 4 +- webroot/admin/user-mgmt.php | 6 +-- webroot/js/{filterable.js => filter.js} | 58 +++++++++++++------------ webroot/js/{sortable.js => sort.js} | 2 +- 5 files changed, 36 insertions(+), 38 deletions(-) rename webroot/js/{filterable.js => filter.js} (55%) rename webroot/js/{sortable.js => sort.js} (98%) diff --git a/resources/templates/footer.php b/resources/templates/footer.php index f7908f7..cb8e8ac 100644 --- a/resources/templates/footer.php +++ b/resources/templates/footer.php @@ -25,8 +25,8 @@ - - + + diff --git a/webroot/admin/pi-mgmt.php b/webroot/admin/pi-mgmt.php index 54d7295..f99faae 100644 --- a/webroot/admin/pi-mgmt.php +++ b/webroot/admin/pi-mgmt.php @@ -106,11 +106,9 @@
⫧ Name ⫧ UID ⫧ Org ⫧ Mail ⫧ Groups Actions
- + - - diff --git a/webroot/admin/user-mgmt.php b/webroot/admin/user-mgmt.php index 92327c5..a971ab4 100644 --- a/webroot/admin/user-mgmt.php +++ b/webroot/admin/user-mgmt.php @@ -27,15 +27,11 @@
⫧ Name ⫧ Unity ID ⫧ Mail Actions
- + - - - - diff --git a/webroot/js/filterable.js b/webroot/js/filter.js similarity index 55% rename from webroot/js/filterable.js rename to webroot/js/filter.js index a1ea078..4614bba 100644 --- a/webroot/js/filterable.js +++ b/webroot/js/filter.js @@ -21,48 +21,52 @@ function updateQueryStringParameter(uri, key, value) { window.history.pushState("object or string", "Title", currentURL.href); } -function updateFilterInputs() { - $(".filterSearch").each(function() { - if (getQueryVariable("filter") != false) { - if (this.id == getQueryVariable("filter")+"-filter") { - if ($(this).css("display") == "inline-block" && $(this).css("visibility") == "visible" && getQueryVariable("value") == false) { - updateQueryStringParameter(window.location.href, "filter", ""); - updateQueryStringParameter(window.location.href, "value", ""); - updateFilterInputs(); - return; - } - $(this).css("display", "inline-block"); - $(this).css("visibility", "visible"); - } else { - $(this).css("display", "inline-block"); - $(this).css("visibility", "hidden"); - } +function updateFilterInput() { + const commonFilterInputBox = document.querySelector(".filterSearch"); + commonFilterInputBox.style.display = "none"; + commonFilterInputBox.style.visibility = "hidden"; + commonFilterInputBox.value = ""; + + var filter = getQueryVariable("filter"); + if (filter) { + commonFilterInputBox.style.display = "inline-block"; + commonFilterInputBox.style.visibility = "visible"; + + if (filter == "uid") { + commonFilterInputBox.placeholder = "Filter by " + filter.toUpperCase() + '...'; } else { - $(this).css("display", "none"); + commonFilterInputBox.placeholder = "Filter by " + filter.charAt(0).toUpperCase() + filter.slice(1) + '...'; } if (getQueryVariable("value") != false) { - $(this).val(getQueryVariable("value")); - } else { - $(this).val(""); + commonFilterInputBox.value = getQueryVariable("value"); + filterRows(); } - $(this).on("keyup", function(e) { - updateQueryStringParameter(window.location.href, "value", $(this).val()); + commonFilterInputBox.addEventListener("keyup", function(e) { + updateQueryStringParameter(window.location.href, "value", e.target.value); filterRows(); - }) - }); + }); + } } -updateFilterInputs(); +updateFilterInput(); var filters = document.querySelectorAll("span.filter"); filters.forEach(function(filter) { filter.addEventListener("click", function(e) { e.preventDefault(); e.stopPropagation(); - updateQueryStringParameter(window.location.href, "filter", e.target.parentElement.id); - updateFilterInputs(); + if (e.target.parentElement.id != getQueryVariable("filter")) { + updateQueryStringParameter(window.location.href, "filter", e.target.parentElement.id); + updateQueryStringParameter(window.location.href, "value", ""); + filterRows(); + } else { + updateQueryStringParameter(window.location.href, "filter", ""); + updateQueryStringParameter(window.location.href, "value", ""); + filterRows(); + } + updateFilterInput(); }); }); diff --git a/webroot/js/sortable.js b/webroot/js/sort.js similarity index 98% rename from webroot/js/sortable.js rename to webroot/js/sort.js index 51fbe7b..1151cf1 100644 --- a/webroot/js/sortable.js +++ b/webroot/js/sort.js @@ -4,7 +4,7 @@ table.querySelectorAll("td").forEach(function(td) { if (td.parentElement.classList.contains("key") && td.innerHTML != "Actions") { if (e.target.classList.contains("filter")) { updateQueryStringParameter(window.location.href, "filter", e.target.parentElement.id); - updateFilterInputs(); + updateFilterInput(); } else { var column = td.cellIndex; var rows = Array.from(table.querySelectorAll("tr:nth-child(n+2)"));
⫧ Name ⫧ UID ⫧ Org ⫧ Mail ⫧ Groups Actions