From d55539192eb80f1a68b15a6640dca7837208aad1 Mon Sep 17 00:00:00 2001
From: Yaro Kasear <git@kasear.net>
Date: Thu, 28 Aug 2025 11:20:18 -0500
Subject: [PATCH] Still trying to work on fixing the pager issues.

---
 crudkit/html/templates/crudkit/_macros.html   | 24 +++++++++----------
 crudkit/html/ui_fragments.py                  |  1 +
 .../templates/fragments/_table_fragment.html  | 24 +++++++++++--------
 inventory/templates/layout.html               |  1 +
 4 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/crudkit/html/templates/crudkit/_macros.html b/crudkit/html/templates/crudkit/_macros.html
index 23dc1c5..ab955fb 100644
--- a/crudkit/html/templates/crudkit/_macros.html
+++ b/crudkit/html/templates/crudkit/_macros.html
@@ -20,9 +20,9 @@
 
 {% macro rows(items, fields, getp=None) -%}
 {%- for obj in items -%}
-<tr id="row-{{ obj.id }}">
+<tr id="row-{{ obj.id }}" style="cursor: pointer;">
     {%- for f in fields -%}
-    <td data-field="{{ f }}">{{ getp(obj, f) }}</td>
+    <td data-field="{{ f }}" class="text-nowrap">{{ getp(obj, f) if getp(obj, f) is not none else '-' }}</td>
     {%- endfor -%}
 </tr>
 {%- else -%}
@@ -55,34 +55,34 @@
         {% endif %}
 </nav>
 #}
-<nav id="pager">
+<nav class="mt-3">
     <ul class="pagination justify-content-center bg-white">
         <li class="page-item {%- if page <= 1 %} disabled{% endif %}">
             <a class="page-link"
-            hx-get="/ui/{{ model }}/frag/rows?page={{ page - 1 }}&per_page={{ per_page }}{% if sort %}&sort={{ sort }}{% endif %}{% if fields_csv %}&fields_csv={{ fields_csv|urlencode }}{% endif %}{% for k,v in filters.items() %}&{{k}}={{ v|urlencode }}{% endfor %}"
-            hx-target="#rows" hx-swap="innerHTML" {%- if page <= 1 %} hx-disable{% endif %}>Prev</a>
+                hx-get="/ui/{{ model }}/frag/rows?page={{ page - 1 }}&per_page={{ per_page }}{% if sort %}&sort={{ sort }}{% endif %}{% if fields_csv %}&fields_csv={{ fields_csv|urlencode }}{% endif %}{% for k,v in filters.items() %}&{{k}}={{ v|urlencode }}{% endfor %}"
+                hx-target="#rows" hx-swap="innerHTML" {%- if page <=1 %} hx-disable{% endif %}
+                hx-on:click="document.querySelector('#pager-state input[name=page]').value='{{ max(1, page-1) }}'">Prev</a>
         </li>
         <li class="page-item {%- if page <= 1 %} disabled{% endif %}">
             <a class="page-link"
-            hx-get="/ui/{{ model }}/frag/rows?page=1&per_page={{ per_page }}{% if sort %}&sort={{ sort }}{% endif %}{% if fields_csv %}&fields_csv={{ fields_csv|urlencode }}{% endif %}{% for k,v in filters.items() %}&{{k}}={{ v|urlencode }}{% endfor %}"
-            hx-target="#rows" hx-swap="innerHTML" {%- if page <= 1 %} hx-disable{% endif %}>1</a>
+                hx-get="/ui/{{ model }}/frag/rows?page=1&per_page={{ per_page }}{% if sort %}&sort={{ sort }}{% endif %}{% if fields_csv %}&fields_csv={{ fields_csv|urlencode }}{% endif %}{% for k,v in filters.items() %}&{{k}}={{ v|urlencode }}{% endfor %}"
+                hx-target="#rows" hx-swap="innerHTML" {%- if page <=1 %} hx-disable{% endif %}>1</a>
         </li>
         {% if pages > 1 %}
         <li class="page-item"><a class="page-link">...</a></li>
         <li class="page-item"><a class="page-link">...</a></li>
         <li class="page-item {%- if page >= pages %} disabled{% endif %}">
             <a class="page-link"
-            hx-get="/ui/{{ model }}/frag/rows?page={{ pages }}&per_page={{ per_page }}{% if sort %}&sort={{ sort }}{% endif %}{% if fields_csv %}&fields_csv={{ fields_csv|urlencode }}{% endif %}{% for k,v in filters.items() %}&{{k}}={{ v|urlencode }}{% endfor %}"
-            hx-target="#rows" hx-swap="innerHTML" {%- if page >= pages %} hx-disable{% endif %}>{{ pages }}</a>
+                hx-get="/ui/{{ model }}/frag/rows?page={{ pages }}&per_page={{ per_page }}{% if sort %}&sort={{ sort }}{% endif %}{% if fields_csv %}&fields_csv={{ fields_csv|urlencode }}{% endif %}{% for k,v in filters.items() %}&{{k}}={{ v|urlencode }}{% endfor %}"
+                hx-target="#rows" hx-swap="innerHTML" {%- if page>= pages %} hx-disable{% endif %}>{{ pages }}</a>
         </li>
         {% endif %}
         <li class="page-item {%- if page >= pages %} disabled{% endif %}">
             <a class="page-link"
-            hx-get="/ui/{{ model }}/frag/rows?page={{ page + 1 }}&per_page={{ per_page }}{% if sort %}&sort={{ sort }}{% endif %}{% if fields_csv %}&fields_csv={{ fields_csv|urlencode }}{% endif %}{% for k,v in filters.items() %}&{{k}}={{ v|urlencode }}{% endfor %}"
-            hx-target="#rows" hx-swap="innerHTML" {%- if page >= pages %} hx-disable{% endif %}>Next</a>
+                hx-get="/ui/{{ model }}/frag/rows?page={{ page + 1 }}&per_page={{ per_page }}{% if sort %}&sort={{ sort }}{% endif %}{% if fields_csv %}&fields_csv={{ fields_csv|urlencode }}{% endif %}{% for k,v in filters.items() %}&{{k}}={{ v|urlencode }}{% endfor %}"
+                hx-target="#rows" hx-swap="innerHTML" {%- if page>= pages %} hx-disable{% endif %}>Next</a>
         </li>
     </ul>
-    <span>Page {{ page }} / {{ pages }}</span>
 </nav>
 {%- endmacro %}
 
diff --git a/crudkit/html/ui_fragments.py b/crudkit/html/ui_fragments.py
index c356611..409b7fa 100644
--- a/crudkit/html/ui_fragments.py
+++ b/crudkit/html/ui_fragments.py
@@ -116,6 +116,7 @@ def make_fragments_blueprint(db_session_factory, registry: Dict[str, Any], *, na
     def pager(model):
         Model = registry.get(model) or abort(404)
         page = request.args.get("page", type=int) or 1
+        print(page)
         per_page = request.args.get("per_page", type=int) or 20
         filters = _parse_filters(request.args)
         sort = request.args.get("sort")
diff --git a/inventory/templates/fragments/_table_fragment.html b/inventory/templates/fragments/_table_fragment.html
index 2ba1762..6b3fa94 100644
--- a/inventory/templates/fragments/_table_fragment.html
+++ b/inventory/templates/fragments/_table_fragment.html
@@ -52,7 +52,7 @@
 {% endmacro %}
 
 {% macro dynamic_table(id, headers=none, fields=none, entry_route=None, title=None, page=1, per_page=15, offset=0,
-refresh_url=none, model=none) %}
+refresh_url=none, model=none, sort=none) %}
 <!-- Table Fragment -->
 
 {% if title %}
@@ -76,16 +76,20 @@ refresh_url=none, model=none) %}
             </tr>
         </thead>
         <tbody id="rows"
-            hx-get="/ui/{{ model }}/frag/rows?page={{ page }}&per_page{{ per_page }}&fields_csv={{ fields|join(',') }}"
-            hx-trigger="load"
-            hx-target="#rows"
-            hx-swap="innerHTML">
+            hx-get="/ui/{{ model }}/frag/rows?page={{ page }}&per_page={{ per_page }}&fields_csv={{ fields|join(',') }}"
+            hx-trigger="load" hx-target="#rows" hx-swap="innerHTML">
         </tbody>
     </table>
-    <div id="pager"
-        hx-get="/ui/{{ model }}/frag/pager?page={{ page }}&per_page={{ per_page }}&fields_csv={{ fields|join(',') }}"
-        hx-trigger="load, htmx:afterSwap from:#rows"
-        hx-target="#pager"
-        hx-swap="outerHTML"></div>
+    <div id="pager-state">
+        <input type="hidden" name="page" value="{{ page }}">
+        <input type="hidden" name="per_page" value="{{ per_page }}">
+        <input type="hidden" name="fields_csv" value="{{ fields|join(',') }}">
+        {% if sort %}<input type="hidden" name="sort" value="{{ sort }}">{% endif %}
+        {% for k,v in (filters or {}).items() %}
+        <input type="hidden" name="{{ k }}" value="{{ v }}">
+        {% endfor %}
+    </div>
 </div>
+<div id="pager" hx-get="/ui/{{ model }}/frag/pager" hx-include="#pager-state"
+    hx-trigger="load, htmx:afterSwap from:#rows" hx-target="#pager" hx-swap="innerHTML"></div>
 {% endmacro %}
\ No newline at end of file
diff --git a/inventory/templates/layout.html b/inventory/templates/layout.html
index bffff99..b6cb157 100644
--- a/inventory/templates/layout.html
+++ b/inventory/templates/layout.html
@@ -87,6 +87,7 @@
         crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.min.js"></script>
+    <script src="https://unpkg.com/htmx.org@1.9.12/dist/ext/debug.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
     <script>
         const searchInput = document.querySelector('#search');