diff --git a/resources/templates/footer.php b/resources/templates/footer.php index 642f6e48..cb8e8aca 100644 --- a/resources/templates/footer.php +++ b/resources/templates/footer.php @@ -25,6 +25,8 @@ + + diff --git a/resources/templates/header.php b/resources/templates/header.php index ac765663..b0f3d585 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 1b145656..f99faae1 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,12 @@
List of PIs
-
+
- - - + + + + diff --git a/webroot/admin/user-mgmt.php b/webroot/admin/user-mgmt.php index 56c816ad..a971ab46 100644 --- a/webroot/admin/user-mgmt.php +++ b/webroot/admin/user-mgmt.php @@ -23,15 +23,16 @@

User Management

- + -
NameUnity IDMail⫧ Name⫧ Unity ID⫧ Mail Actions
+
- - - - - + + + + + + diff --git a/webroot/css/filters.css b/webroot/css/filters.css new file mode 100644 index 00000000..94f70ffc --- /dev/null +++ b/webroot/css/filters.css @@ -0,0 +1,15 @@ +.filterSearch { + max-width: fit-content !important; +} + +#uid-filter, #org-filter, #mail-filter, #groups-filter { + margin-right: 5px; +} + +#name-filter, #unityID-filter { + margin-right: 100px; +} + +.key td:hover { + cursor: pointer; +} \ No newline at end of file diff --git a/webroot/js/filter.js b/webroot/js/filter.js new file mode 100644 index 00000000..4614bba6 --- /dev/null +++ b/webroot/js/filter.js @@ -0,0 +1,90 @@ +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 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 { + commonFilterInputBox.placeholder = "Filter by " + filter.charAt(0).toUpperCase() + filter.slice(1) + '...'; + } + + if (getQueryVariable("value") != false) { + commonFilterInputBox.value = getQueryVariable("value"); + filterRows(); + } + + commonFilterInputBox.addEventListener("keyup", function(e) { + updateQueryStringParameter(window.location.href, "value", e.target.value); + filterRows(); + }); + } +} + +updateFilterInput(); + +var filters = document.querySelectorAll("span.filter"); +filters.forEach(function(filter) { + filter.addEventListener("click", function(e) { + e.preventDefault(); + e.stopPropagation(); + 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(); + }); +}); + +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/sort.js b/webroot/js/sort.js new file mode 100644 index 00000000..1151cf1d --- /dev/null +++ b/webroot/js/sort.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); + updateFilterInput(); + } 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
NameUIDOrgMailGroups⫧ Name⫧ UID⫧ Org⫧ Mail⫧ Groups Actions