From ad35eba0136f27529448e6b78ec7b299708eed8e Mon Sep 17 00:00:00 2001
From: Isaac Connor <isaac@zoneminder.com>
Date: Wed, 11 Oct 2023 13:34:38 -0400
Subject: [PATCH] Use bootstrap table for user list, giving us sortable columns
 and we can use mobile table/card

---
 web/skins/classic/views/_options_users.php | 44 ++++++++++++++--------
 1 file changed, 28 insertions(+), 16 deletions(-)

diff --git a/web/skins/classic/views/_options_users.php b/web/skins/classic/views/_options_users.php
index 270be1113..3eacaadf0 100644
--- a/web/skins/classic/views/_options_users.php
+++ b/web/skins/classic/views/_options_users.php
@@ -7,23 +7,30 @@
     <button type="submit" class="btn-danger" name="deleteBtn" value="Delete" disabled="disabled"><?php echo translate('Delete') ?></button>
   </div>
   <div id="options">
-    <table id="contentTable" class="table table-striped">
+    <table id="contentTable"
+       class="table-sm table-striped"
+       style="display:none;"
+       data-click-to-select="true"
+       data-check-on-init="true"
+       data-mobile-responsive="true"
+       data-min-width="562"
+     >
       <thead class="thead-highlight">
         <tr>
-          <th class="colUsername"><?php echo translate('Username') ?></th>
-          <th class="colLanguage"><?php echo translate('Language') ?></th>
-          <th class="colEnabled"><?php echo translate('Enabled') ?></th>
-          <th class="colStream"><?php echo translate('Stream') ?></th>
-          <th class="colEvents"><?php echo translate('Events') ?></th>
-          <th class="colControl"><?php echo translate('Control') ?></th>
-          <th class="colMonitors"><?php echo translate('Monitors') ?></th>
-          <th class="colGroups"><?php echo translate('Groups') ?></th>
-          <th class="colSnapshots"><?php echo translate('Snapshots') ?></th>
-          <th class="colSystem"><?php echo translate('System') ?></th>
-          <th class="colDevices"><?php echo translate('Devices') ?></th>
-          <th class="colBandwidth"><?php echo translate('Bandwidth') ?></th>
-          <?php if ( ZM_OPT_USE_API ) { ?><th class="colAPIEnabled"><?php echo translate('APIEnabled') ?></th><?php } ?>
           <th class="colMark"><?php echo translate('Mark') ?></th>
+          <th data-sortable="true" class="colUsername"><?php echo translate('Username') ?></th>
+          <th data-sortable="true" class="colLanguage"><?php echo translate('Language') ?></th>
+          <th data-sortable="true" class="colEnabled"><?php echo translate('Enabled') ?></th>
+          <th data-sortable="true" class="colStream"><?php echo translate('Stream') ?></th>
+          <th data-sortable="true" class="colEvents"><?php echo translate('Events') ?></th>
+          <th data-sortable="true" class="colControl"><?php echo translate('Control') ?></th>
+          <th data-sortable="true" class="colMonitors"><?php echo translate('Monitors') ?></th>
+          <th data-sortable="true" class="colGroups"><?php echo translate('Groups') ?></th>
+          <th data-sortable="true" class="colSnapshots"><?php echo translate('Snapshots') ?></th>
+          <th data-sortable="true" class="colSystem"><?php echo translate('System') ?></th>
+          <th data-sortable="true" class="colDevices"><?php echo translate('Devices') ?></th>
+          <th data-sortable="true" class="colBandwidth"><?php echo translate('Bandwidth') ?></th>
+          <?php if ( ZM_OPT_USE_API ) { ?><th class="colAPIEnabled"><?php echo translate('APIEnabled') ?></th><?php } ?>
         </tr>
       </thead>
       <tbody>
@@ -31,6 +38,7 @@
     foreach (ZM\User::find([], ['order'=>'Username']) as $user_row) {
       ?>
         <tr>
+          <td class="colMark"><input type="checkbox" name="markUids[]" value="<?php echo $user_row->Id() ?>" data-on-click-this="configureDeleteButton"<?php echo (!$canEdit) ? ' disabled="disabled"' : '' ?>/></td>
           <td class="colUsername"><?php echo makeLink('?view=user&amp;uid='.$user_row->Id(), validHtmlStr($user_row->Username()).($user->Username()==$user_row->Username()?'*':''), $canEdit) ?></td>
           <td class="colLanguage"><?php echo $user_row->Language()?validHtmlStr($user_row->Language()):'default' ?></td>
           <td class="colEnabled"><?php echo translate($user_row->Enabled()?'Yes':'No') ?></td>
@@ -44,7 +52,6 @@
           <td class="colDevices"><?php echo validHtmlStr($user_row->Devices()) ?></td>
           <td class="colBandwidth"><?php echo $user_row->MaxBandwidth()?$bandwidth_options[$user_row->MaxBandwidth()]:'&nbsp;' ?></td>
           <?php if ( ZM_OPT_USE_API ) { ?><td class="colAPIEnabled"><?php echo translate($user_row->APIEnabled()?'Yes':'No') ?></td><?php } ?>
-          <td class="colMark"><input type="checkbox" name="markUids[]" value="<?php echo $user_row->Id() ?>" data-on-click-this="configureDeleteButton"<?php echo (!$canEdit) ? ' disabled="disabled"' : '' ?>/></td>
         </tr>
   <?php
   }
@@ -52,4 +59,9 @@
       </tbody>
     </table>
   </div>
-</form>
+<script nonce="<?php echo $cspNonce ?>">
+window.addEventListener("DOMContentLoaded",
+ function() {
+   $j('#contentTable').bootstrapTable({icons: icons}).show();
+});
+</script></form>