fixed filter input box to left and made it dynamic

Author: sheldor1510

resources/templates/footer.php

@@ -25,8 +25,8 @@
 
 </body>
 
-<script src="<?php echo $CONFIG["site"]["prefix"]; ?>/js/filterable.js"></script>
-<script src="<?php echo $CONFIG["site"]["prefix"]; ?>/js/sortable.js"></script>
+<script src="<?php echo $CONFIG["site"]["prefix"]; ?>/js/filter.js"></script>
+<script src="<?php echo $CONFIG["site"]["prefix"]; ?>/js/sort.js"></script>
 <script src="<?php echo $CONFIG["site"]["prefix"]; ?>/js/global.js"></script>
 <script src="<?php echo $CONFIG["site"]["prefix"]; ?>/js/tables.js"></script>
 

webroot/admin/pi-mgmt.php

@@ -106,11 +106,9 @@
 
 <table class="searchable longTable sortable filterable">
     <tr class="key">
-        <input type="text" placeholder="Filter by Name..." class="filterSearch" id="name-filter">
+        <input type="text" style="margin-right:5px;" placeholder="Filter by..." id="common-filter" class="filterSearch">
         <td id="name"><span class="filter">⫧ </span>Name</td>
-        <input type="text" placeholder="Filter by Unity ID..." class="filterSearch" id="unityID-filter">
         <td id="unityID"><span class="filter">⫧ </span>Unity ID</td>
-        <input type="text" placeholder="Filter by Mail..." class="filterSearch" id="mail-filter">
         <td id="mail"><span class="filter">⫧ </span>Mail</td>
         <td>Actions</td>
     </tr>

webroot/admin/user-mgmt.php

@@ -27,15 +27,11 @@
 
 <table class="searchable longTable sortable filterable">
     <tr class="key">
-        <input type="text"style="margin-right:5px;"placeholder="Filter by Name..."class="filterSearch"id="name-filter">
+        <input type="text" style="margin-right:5px;" placeholder="Filter by..." id="common-filter" class="filterSearch">
         <td id="name"><span class="filter">⫧ </span>Name</td>
-        <input type="text" placeholder="Filter by UID..." class="filterSearch" id="uid-filter">
         <td id="uid"><span class="filter">⫧ </span>UID</td>
-        <input type="text" placeholder="Filter by Org..." class="filterSearch" id="org-filter">
         <td id="org"><span class="filter">⫧ </span>Org</td>
-        <input type="text" placeholder="Filter by Mail..." class="filterSearch" id="mail-filter">
         <td id="mail"><span class="filter">⫧ </span>Mail</td>
-        <input type="text" placeholder="Filter by Groups..." class="filterSearch" id="groups-filter">
         <td id="groups"><span class="filter">⫧ </span>Groups</td>
         <td>Actions</td>
     </tr>

webroot/js/filterable.js renamed to 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();
     });
 });
 

webroot/js/sortable.js renamed to 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)"));