Fix for filters not working with pagination (#469)

dgvirtual · web-flow · commit cddf698037fb · 2024-12-26T22:18:56.000-06:00
Targets bug #437 Easy testing with the concurrent userSeeder
diff --git a/docs/building_admin_modules/filters.md b/docs/building_admin_modules/filters.md
@@ -95,11 +95,11 @@ There are 4 parts that are needed to get a working, filterable list of resources
 The main route for your resource list page must support both GET and POST methods.
 
 ```php
-$routes->match(['get', 'post'], 'users', 'UserController::list', ['as' => 'user-list']);
+$routes->match(['GET', 'POST'], 'users', 'UserController::list', ['as' => 'user-list']);
 ```
 
-The controller should then choose between sending either a full HTML page for a GET request, or just
-sending back the table for POST requests. You might do it something like:
+The controller should then choose between sending either a full HTML page for a regular GET request, 
+or just sending back the table for ajax requests issued via HTMX. You might do it something like:
 
 ```php
 public function list()
@@ -109,7 +109,7 @@ public function list()
     // Performs the actual filtering of the results.
     $userModel->filter($this->request->getPost('filters'));
 
-    $view = $this->request->getMethod() == 'post'
+    $view = $this->request->hasHeader('HX-Request')
         ? $this->viewPrefix .'_table'
         : $this->viewPrefix .'list';
 
@@ -151,14 +151,17 @@ Here's how this is used for the list of users within Bonfire.
 
     <div class="row">
         <!-- List Users -->
-        <div class="col" id="user-list">
+        <div class="col" id="content-list">
             <?= $this->include('Bonfire\Users\Views\_table') ?>
         </div>
 
         <!-- Filters -->
         <div class="col-auto" x-show="filtered" x-transition.duration.240ms>
-            <?= view_cell('Bonfire\Libraries\Cells\Filters::renderList', 'model=UserFilter target=#user-list') ?>
+            <?= view_cell('Bonfire\Libraries\Cells\Filters::renderList 'model=UserFilter target=#content-list') ?>
         </div>
     </div>
 </div>
 ```
+
+Note that the id of the eleent that contains the included table should be with `id="content-list"` as it this `id` is
+the default target for content replacements by the pager and the filter.
diff --git a/src/Users/Controllers/UserController.php b/src/Users/Controllers/UserController.php
@@ -39,9 +39,9 @@ public function list()
         /** @var UserFilter $userModel */
         $userModel = model(UserFilter::class);
 
-        $userModel->filter($this->request->getPost('filters'));
+        $userModel->filter($this->request->getGet('filters'));
 
-        $view = $this->request->getMethod() === 'post'
+        $view = $this->request->hasHeader('HX-Request')
             ? $this->viewPrefix . '_table'
             : $this->viewPrefix . 'list';
 
@@ -70,6 +70,8 @@ public function create()
         $groups = setting('AuthGroups.groups');
         asort($groups);
 
+        helper('form');
+
         return $this->render($this->viewPrefix . 'form', [
             'groups' => $groups,
         ]);
diff --git a/src/Users/Views/_table.php b/src/Users/Views/_table.php
@@ -1,26 +1,29 @@
-<div class="table-responsive">
-    <table class="table table-hover">
-        <?= $this->include('_table_head') ?>
-        <tbody>
-        <?php if (isset($users) && count($users)) : ?>
-            <?php foreach ($users as $user) : ?>
-                <tr>
-                    <?php if (auth()->user()->can('users.delete')) : ?>
-                        <td>
-                            <input type="checkbox" name="selects[<?= $user->id ?>]" class="form-check">
-                        </td>
-                    <?php endif ?>
-                    <?= view('Bonfire\Users\Views\_row_info', ['user' => $user]) ?>
-                </tr>
-            <?php endforeach ?>
-        <?php endif ?>
-        </tbody>
-    </table>
-</div>
+<form action="<?= site_url(ADMIN_AREA . '/users/delete-batch') ?>" method="post">
+    <?= csrf_field() ?>
+    <div class="table-responsive">
+        <table class="table table-hover">
+            <?= $this->include('_table_head') ?>
+            <tbody>
+            <?php if (isset($users) && count($users)) : ?>
+                <?php foreach ($users as $user) : ?>
+                    <tr>
+                        <?php if (auth()->user()->can('users.delete')) : ?>
+                            <td>
+                                <input type="checkbox" name="selects[<?= $user->id ?>]" class="form-check">
+                            </td>
+                        <?php endif ?>
+                        <?= view('Bonfire\Users\Views\_row_info', ['user' => $user]) ?>
+                    </tr>
+                <?php endforeach ?>
+            <?php endif ?>
+            </tbody>
+        </table>
+    </div>
 
-<?php if (auth()->user()->can('users.delete')) : ?>
-    <input type="submit" value="Delete Selected" class="btn btn-sm btn-outline-danger" />
-<?php endif ?>
+    <?php if (auth()->user()->can('users.delete')) : ?>
+        <input type="submit" value="Delete Selected" class="btn btn-sm btn-outline-danger" />
+    <?php endif ?>
+</form>
 
 <div class="text-center">
     <?= $pager->links('default', 'bonfire_full') ?>
diff --git a/src/Users/Views/list.php b/src/Users/Views/list.php
@@ -20,17 +20,13 @@
 
             <div class="row">
                 <!-- List Users -->
-                <div class="col" id="user-list">
-                    <form action="<?= site_url(ADMIN_AREA . '/users/delete-batch') ?>" method="post">
-                        <?= csrf_field() ?>
-
-                        <?= $this->include('Bonfire\Users\Views\_table') ?>
-                    </form>
+                <div class="col" id="content-list">
+                    <?= $this->include('Bonfire\Users\Views\_table') ?>
                 </div>
 
                 <!-- Filters -->
                 <div class="col-auto" x-show="filtered" x-transition.duration.240ms>
-                    <?= view_cell('Bonfire\Core\Cells\Filters::renderList', 'model=UserFilter target=#user-list') ?>
+                    <?= view_cell('Bonfire\Core\Cells\Filters::renderList', 'model=UserFilter target=#content-list') ?>
                 </div>
             </div>
         </div>
diff --git a/src/Views/_filter_list.php b/src/Views/_filter_list.php
@@ -1,7 +1,7 @@
 <section class="filters">
     <?php if (isset($filters) && count($filters)): ?>
-    <form action="<?= current_url() ?>" method="post"
-          hx-post="<?= current_url() ?>"
+    <form action="<?= current_url() ?>" method="get"
+          hx-get="<?= current_url() ?>"
           hx-trigger="change delay:400ms from:.filter-check"
           hx-target="<?= $target ?>"
     >
diff --git a/src/Views/_pager_full.php b/src/Views/_pager_full.php
@@ -10,36 +10,36 @@
 
 <?php if ($pager->getPageCount() > 1) : ?>
 <nav aria-label="<?= lang('Pager.pageNavigation') ?>" class="d-flex justify-content-center">
-    <ul class="pagination">
+    <ul class="pagination" hx-target="#content-list">
         <?php if ($pager->hasPrevious()) : ?>
             <li class="page-item">
-                <a href="<?= $pager->getFirst() ?>" aria-label="<?= lang('Pager.first') ?>" class="page-link">
+                <a href="<?= $pager->getFirst() ?>" hx-get="<?= $pager->getFirst() ?>" aria-label="<?= lang('Pager.first') ?>" class="page-link">
                     <span aria-hidden="true"><?= lang('Pager.first') ?></span>
                 </a>
             </li>
             <li class="page-item">
-                <a href="<?= $pager->getPrevious() ?>" aria-label="<?= lang('Pager.previous') ?>" class="page-link">
+                <a href="<?= $pager->getPrevious() ?>" hx-get="<?= $pager->getPrevious() ?>" aria-label="<?= lang('Pager.previous') ?>" class="page-link">
                     <span aria-hidden="true"><?= lang('Pager.previous') ?></span>
                 </a>
             </li>
         <?php endif ?>
 
         <?php foreach ($pager->links() as $link) : ?>
             <li class="page-item <?= $link['active'] ? 'active' : '' ?>">
-                <a href="<?= $link['uri'] ?>" class="page-link">
+                <a href="<?= $link['uri'] ?>" hx-get="<?= $link['uri'] ?>" class="page-link">
                     <?= $link['title'] ?>
                 </a>
             </li>
         <?php endforeach ?>
 
         <?php if ($pager->hasNext()) : ?>
             <li class="page-item">
-                <a href="<?= $pager->getNext() ?>" aria-label="<?= lang('Pager.next') ?>" class="page-link">
+                <a href="<?= $pager->getNext() ?>" hx-get="<?= $pager->getNext() ?>" aria-label="<?= lang('Pager.next') ?>" class="page-link">
                     <span aria-hidden="true"><?= lang('Pager.next') ?></span>
                 </a>
             </li>
             <li class="page-item">
-                <a href="<?= $pager->getLast() ?>" aria-label="<?= lang('Pager.last') ?>" class="page-link">
+                <a href="<?= $pager->getLast() ?>" hx-get="<?= $pager->getLast() ?>" aria-label="<?= lang('Pager.last') ?>" class="page-link">
                     <span aria-hidden="true"><?= lang('Pager.last') ?></span>
                 </a>
             </li>
diff --git a/themes/Admin/js/admin.js b/themes/Admin/js/admin.js
@@ -13,16 +13,25 @@ function toggleSelectAll(checkbox) {
     }
 }
 
-// Check if there is a .select-all element on the page
-const selectAllElement = document.querySelector('.select-all');
+// Function to attach the event listener
+function attachSelectAllListener() {
+    const selectAllElement = document.querySelector('.select-all');
 
-// Attach the event listener only if the element exists
-if (selectAllElement) {
-    selectAllElement.addEventListener('click', function (e) {
-        toggleSelectAll(e.target);
-    });
+    // Attach the event listener only if the element exists
+    if (selectAllElement) {
+        selectAllElement.addEventListener('click', function (e) {
+            toggleSelectAll(e.target);
+        });
+    }
 }
 
+// Initial attachment
+attachSelectAllListener();
+
+// Re-attach the event listener after each htmx request
+document.body.addEventListener('htmx:afterSettle', function () {
+    attachSelectAllListener();
+});
 
 // function for recycler get requests issued directly from select box
 function sendRecyclerGetRequest(selectedValue) {
