replace custom tables with datatables.net (#456)

Co-authored-by: Copilot <[email protected]>

Author: simonLeary42

.gitignore

@@ -28,4 +28,9 @@ node_modules
 # copied from node_modules using the copy-files-from-to NPM package
 webroot/js/jquery.min.js
 webroot/js/ckeditor5.umd.js
+webroot/js/*dataTables*.js
+webroot/js/buttons.colVis.min.js
+webroot/js/buttons.html5.min.js
+webroot/js/buttons.print.min.js
 webroot/css/ckeditor5.css
+webroot/css/*dataTables*.css

README.md

@@ -25,6 +25,7 @@ Admin Features:
 - Cluster notices
   - Added to front page, mailed, and exposed via REST API
 - WYSIWYG HTML editor ([ckeditor5](https://github.com/ckeditor/ckeditor5)) for webpage contents, cluster notices
+- Responsive Tables ([datatables.net](https://datatables.net)) for filtering, sorting, pagination, etc.
 - Branding customization for multiple domains simultaneously
 - Custom UIDNumber / GIDNumber mappings for specific users
 - Login as another user

package-lock.json

@@ -6,6 +6,10 @@
   "dependencies": {
     "ckeditor5": "^47.3.0",
     "copy-files-from-to": "^3.13.0",
+    "datatables.net-buttons-dt": "^3.2.6",
+    "datatables.net-columncontrol-dt": "^1.2.0",
+    "datatables.net-dt": "^2.3.6",
+    "datatables.net-responsive-dt": "^3.0.7",
     "jquery": "^3.7.1"
   },
   "copyFiles": [
@@ -20,6 +24,50 @@
     {
       "from": "node_modules/ckeditor5/dist/browser/ckeditor5.css",
       "to": "webroot/css/ckeditor5.css"
+    },
+    {
+      "from": "node_modules/datatables.net-responsive/js/dataTables.responsive.min.js",
+      "to": "webroot/js/dataTables.responsive.min.js"
+    },
+    {
+      "from": "node_modules/datatables.net-columncontrol/js/dataTables.columnControl.min.js",
+      "to": "webroot/js/dataTables.columnControl.min.js"
+    },
+    {
+      "from": "node_modules/datatables.net-buttons/js/buttons.print.min.js",
+      "to": "webroot/js/buttons.print.min.js"
+    },
+    {
+      "from": "node_modules/datatables.net-buttons/js/buttons.colVis.min.js",
+      "to": "webroot/js/buttons.colVis.min.js"
+    },
+    {
+      "from": "node_modules/datatables.net-buttons/js/dataTables.buttons.min.js",
+      "to": "webroot/js/dataTables.buttons.min.js"
+    },
+    {
+      "from": "node_modules/datatables.net-buttons/js/buttons.html5.min.js",
+      "to": "webroot/js/buttons.html5.min.js"
+    },
+    {
+      "from": "node_modules/datatables.net/js/dataTables.min.js",
+      "to": "webroot/js/dataTables.min.js"
+    },
+    {
+      "from": "node_modules/datatables.net-responsive-dt/css/responsive.dataTables.min.css",
+      "to": "webroot/css/responsive.dataTables.min.css"
+    },
+    {
+      "from": "node_modules/datatables.net-dt/css/dataTables.dataTables.min.css",
+      "to": "webroot/css/dataTables.dataTables.min.css"
+    },
+    {
+      "from": "node_modules/datatables.net-columncontrol-dt/css/columnControl.dataTables.min.css",
+      "to": "webroot/css/columnControl.dataTables.min.css"
+    },
+    {
+      "from": "node_modules/datatables.net-buttons-dt/css/buttons.dataTables.min.css",
+      "to": "webroot/css/buttons.dataTables.min.css"
     }
   ]
 }

package.json

@@ -231,6 +231,19 @@ public function getAllPIGroupOwnerUIDs(): array
         );
     }
 
+    public function getPIGroupAttributesWithMemberUID(
+        string $uid,
+        array $attributes,
+        array $default_values = [],
+    ) {
+        return $this->pi_groupOU->getChildrenArrayStrict(
+            $attributes,
+            recursive: false,
+            filter: sprintf("(memberuid=%s)", ldap_escape($uid, "", LDAP_ESCAPE_FILTER)),
+            default_values: $default_values,
+        );
+    }
+
     /**
      * Returns an associative array where keys are UIDs and values are arrays of PI GIDs
      */

resources/lib/UnityLDAP.php

@@ -30,7 +30,7 @@
 
 </body>
 <?php
-foreach (["filter", "sort", "global-late", "tables", "messages"] as $x) {
+foreach (["global-late", "messages"] as $x) {
     $url = getURL("js/$x.js?cache_bust_increment_me=" . CONFIG["upstream"]["version"]);
     echo "<script src='$url'></script>";
 }

resources/templates/footer.php

@@ -37,7 +37,12 @@
 
 <head>
   <?php
-    foreach (["jquery.min", "global-early", "ckeditor5.umd"] as $x) {
+    $scripts = [
+      "jquery.min", "global-early", "ckeditor5.umd", "dataTables.min", "dataTables.responsive.min",
+      "dataTables.buttons.min", "dataTables.columnControl.min", "buttons.print.min",
+      "buttons.colVis.min", "buttons.html5.min",
+    ];
+    foreach ($scripts as $x) {
         $url = getURL("js/$x.js?cache_bust_increment_me=" . CONFIG["upstream"]["version"]);
         echo "<script src='$url'></script>";
     }
@@ -54,7 +59,11 @@
   </style>
 
   <?php
-    foreach (["global", "navbar", "modal", "tables", "filters", "messages", "ckeditor5"] as $x) {
+    $stylesheets = [
+      "global", "navbar", "modal", "messages", "ckeditor5", "responsive.dataTables.min",
+      "dataTables.dataTables.min", "columnControl.dataTables.min", "buttons.dataTables.min",
+    ];
+    foreach ($stylesheets as $x) {
         $url = getURL("css/$x.css?cache_bust_increment_me=" . CONFIG["upstream"]["version"]);
         echo "<link rel='stylesheet' type='text/css' href='$url' />";
     }

resources/templates/header.php

@@ -1,5 +1,7 @@
 <?php
 
+/* pi-mgmt.php uses ajax to get this output and then uses it to insert new rows to the PI table */
+
 require_once __DIR__ . "/../../../resources/autoload.php";
 
 use UnityWebPortal\lib\UnityGroup;
@@ -15,25 +17,19 @@
 $members = $group->getGroupMembersAttributes(["gecos", "mail"]);
 $requests = $group->getRequests();
 
-$CSRFTokenHiddenFormInput = UnityHTTPD::getCSRFTokenHiddenFormInput();
-
-$i = 0;
 $count = count($members) + count($requests);
 foreach ($members as $uid => $attributes) {
     if ($uid == $group->getOwner()->uid) {
         continue;
     }
-    if ($i >= $count - 1) {
-        echo "<tr class='expanded $i last'>";
-    } else {
-        echo "<tr class='expanded $i'>";
-    }
+    echo "<tr style='background: var(--light_panel_background);'>";
     $fullname = $attributes["gecos"][0];
     $mail = $attributes["mail"][0];
     echo "<td>$fullname</td>";
     echo "<td>$uid</td>";
-    echo "<td><a href='mailto:$mail'>$mail</a></td>";
+    echo "<td>$mail</td>";
     echo "<td>";
+    $CSRFTokenHiddenFormInput = UnityHTTPD::getCSRFTokenHiddenFormInput();
     echo "
         <form
             action=''
@@ -51,21 +47,17 @@
     ";
     echo "</td>";
     echo "</tr>";
-    $i++;
 }
 
-foreach ($requests as $i => [$user, $timestamp]) {
-    if ($i >= $count - 1) {
-        echo "<tr class='expanded $i last'>";
-    } else {
-        echo "<tr class='expanded $i'>";
-    }
+foreach ($requests as [$user, $timestamp]) {
+    echo "<tr style='background: var(--light_panel_background);'>";
     $name = $user->getFullName();
     $email = $user->getMail();
     echo "<td>$name</td>";
     echo "<td>$user->uid</td>";
-    echo "<td><a href='mailto:$email'>$email</a></td>";
+    echo "<td>$email</td>";
     echo "<td>";
+    $CSRFTokenHiddenFormInput = UnityHTTPD::getCSRFTokenHiddenFormInput();
     echo
         "<form action='' method='POST'
     onsubmit='return confirm(\"Are you sure you want to approve $user->uid ?\");'>
@@ -77,5 +69,4 @@
     <input type='submit' name='action' value='Deny'></form>";
     echo "</td>";
     echo "</tr>";
-    $i++;
 }