Adding pervasive column sorting

app/templates/admin/_attachment_point_names_table.html

@@ -1,5 +1,5 @@
 <div id="attachment-point-name-list" class="card">
-  <table class="table">
+  <table class="table sortable">
     <thead>
       <tr>
         <th>ID</th>

app/templates/admin/_attachment_point_row.html

@@ -20,7 +20,6 @@
 {% endif %}
 <tr id="attachment-point-{{ ap.id }}">
   <td>{{ ap.id }}</td>
-  <td>{{ ap.augmented_part.description | truncate(40) }}</td>
   <td>{{ ap.attachment_point_name.name }}</td>
   <td>{{ conn_type }}</td>
   <td><code>{{ conn_label }}</code></td>

app/templates/admin/_attachment_points_table.html

@@ -1,9 +1,8 @@
 <div id="attachment-point-list" class="card" style="overflow-x:auto">
-  <table class="table">
+  <table class="table sortable">
     <thead>
       <tr>
         <th>ID</th>
-        <th>Augmented Part</th>
         <th>Point Name</th>
         <th>Connection Type</th>
         <th>Connection</th>

app/templates/admin/_augmented_parts_table.html

@@ -10,6 +10,8 @@
         hx-target="#augmented-parts-table-card"
         hx-trigger="input delay:300ms, change"
         hx-swap="outerHTML">
+    <input type="hidden" name="sort" value="{{ sort }}">
+    <input type="hidden" name="dir" value="{{ dir }}">
     <input type="text" name="description" placeholder="Filter by description…" value="{{ filter_description or '' }}">
     <select name="colour_id">
       <option value="">All colours</option>

app/templates/admin/_augmented_parts_table_card.html

@@ -1,16 +1,17 @@
+{% from "admin/_sort_macros.html" import sort_th %}
 <div id="augmented-parts-table-card" class="card">
   {% include "admin/_pagination.html" %}
   <table class="table">
     <thead>
       <tr>
-        <th>ID</th>
-        <th>SKU</th>
-        <th>Description</th>
-        <th>Colour</th>
-        <th>Manufacturer</th>
-        <th>Model</th>
-        <th>Type</th>
-        <th>Sub Type</th>
+        {{ sort_th("id", "ID", sort_headers) }}
+        {{ sort_th("sku", "SKU", sort_headers) }}
+        {{ sort_th("description", "Description", sort_headers) }}
+        {{ sort_th("colour", "Colour", sort_headers) }}
+        {{ sort_th("manufacturer", "Manufacturer", sort_headers) }}
+        {{ sort_th("scope_model", "Model", sort_headers) }}
+        {{ sort_th("part_type", "Type", sort_headers) }}
+        {{ sort_th("sub_part_type", "Sub Type", sort_headers) }}
         <th></th>
       </tr>
     </thead>

app/templates/admin/_clamp_connections_table.html

@@ -1,5 +1,5 @@
 <div id="clamp-connection-list" class="card">
-  <table class="table">
+  <table class="table sortable">
     <thead>
       <tr>
         <th>ID</th>

app/templates/admin/_imported_parts_table.html

@@ -11,6 +11,8 @@
           hx-target="#imported-parts-table-card"
           hx-trigger="input delay:300ms, change"
           hx-swap="outerHTML">
+      <input type="hidden" name="sort" value="{{ sort }}">
+      <input type="hidden" name="dir" value="{{ dir }}">
       <input type="text" name="description" placeholder="Filter by description…" value="{{ filter_description or '' }}">
     </form>
   </div>

app/templates/admin/_imported_parts_table_card.html

@@ -1,16 +1,17 @@
+{% from "admin/_sort_macros.html" import sort_th %}
 <div id="imported-parts-table-card" class="card" style="overflow-x:auto">
   {% include "admin/_pagination.html" %}
   <table class="table">
     <thead>
       <tr>
-        <th>InventoryID</th>
-        <th>Description</th>
-        <th>TBX Colour</th>
-        <th>Max Thread Depth (mm)</th>
-        <th>Max Thread Depth (in)</th>
-        <th>OD (mm)</th>
-        <th>OD (in)</th>
-        <th>Thread Attribute</th>
+        {{ sort_th("InventoryID", "InventoryID", sort_headers) }}
+        {{ sort_th("Description", "Description", sort_headers) }}
+        {{ sort_th("TBXColour", "TBX Colour", sort_headers) }}
+        {{ sort_th("ProductMaxThreadDepthmm", "Max Thread Depth (mm)", sort_headers) }}
+        {{ sort_th("ProductMaxThreadDepthin", "Max Thread Depth (in)", sort_headers) }}
+        {{ sort_th("ProductODmm", "OD (mm)", sort_headers) }}
+        {{ sort_th("ProductODin", "OD (in)", sort_headers) }}
+        {{ sort_th("TBXThreadAttribute", "Thread Attribute", sort_headers) }}
       </tr>
     </thead>
     <tbody>

app/templates/admin/_manufacturers_table.html

@@ -1,8 +1,8 @@
 <div id="manufacturer-list" class="card">
-  <table class="table">
+  <table class="table sortable">
     <thead>
       <tr>
-        <th>ID</th><th>Name</th><th>Homepage</th><th>Logo</th><th></th>
+        <th>ID</th><th>Name</th><th>Homepage</th><th data-sort-off>Logo</th><th></th>
       </tr>
     </thead>
     <tbody>

app/templates/admin/_part_colours_table.html

@@ -1,5 +1,5 @@
 <div id="part-colour-list" class="card">
-  <table class="table">
+  <table class="table sortable">
     <thead>
       <tr>
         <th>ID</th>

app/templates/admin/_part_types_table.html

@@ -1,5 +1,5 @@
 <div id="part-type-list" class="card">
-  <table class="table">
+  <table class="table sortable">
     <thead>
       <tr>
         <th>ID</th><th>Name</th><th></th>

app/templates/admin/_roles_table.html

@@ -1,7 +1,7 @@
 <div id="role-list" class="card">
-  <table class="table">
+  <table class="table sortable">
     <thead>
-      <tr><th>ID</th><th>Name</th><th>Description</th><th>Permissions</th><th>Default</th><th></th></tr>
+      <tr><th>ID</th><th>Name</th><th>Description</th><th data-sort-off>Permissions</th><th data-sort-off>Default</th><th></th></tr>
     </thead>
     <tbody>
       {% for r in roles %}

app/templates/admin/_scope_models_table.html

@@ -1,5 +1,5 @@
 <div id="scope-model-list" class="card">
-  <table class="table">
+  <table class="table sortable">
     <thead>
       <tr>
         <th>ID</th><th>Name</th><th>Manufacturer</th><th>Product Page</th><th></th>

app/templates/admin/_sort_macros.html

@@ -0,0 +1,13 @@
+{% macro sort_th(key, label, sort_headers) %}
+  {% if sort_headers and key in sort_headers %}
+    {% set h = sort_headers[key] %}
+    <th>
+      <a href="#" class="sort-link{{ ' active' if h.active else '' }}"
+         hx-get="{{ h.url }}"
+         hx-target="{{ h.target_id }}"
+         hx-swap="outerHTML">{{ label }}{% if h.active %}<span aria-hidden="true">{{ ' ▲' if h.dir == 'asc' else ' ▼' }}</span>{% endif %}</a>
+    </th>
+  {% else %}
+    <th>{{ label }}</th>
+  {% endif %}
+{% endmacro %}

app/templates/admin/_static_connections_table.html

@@ -1,5 +1,5 @@
 <div id="static-connection-list" class="card">
-  <table class="table">
+  <table class="table sortable">
     <thead>
       <tr>
         <th>ID</th>

app/templates/admin/_sub_part_types_table.html

@@ -1,5 +1,5 @@
 <div id="sub-part-type-list" class="card">
-  <table class="table">
+  <table class="table sortable">
     <thead>
       <tr>
         <th>ID</th><th>Name</th><th>Parent Type</th><th></th>

app/templates/admin/_users_table.html

@@ -1,8 +1,8 @@
 <div id="user-list" class="card">
-  <table class="table">
+  <table class="table sortable">
     <thead>
       <tr>
-        <th>ID</th><th>Email</th><th>Name</th><th>Active</th><th>Superuser</th><th>Roles</th><th></th>
+        <th>ID</th><th>Email</th><th>Name</th><th>Active</th><th>Superuser</th><th data-sort-off>Roles</th><th></th>
       </tr>
     </thead>
     <tbody>

app/templates/admin/audit_log.html

@@ -7,7 +7,7 @@
 
   <div class="card">
     {% if entries %}
-    <table class="table">
+    <table class="table sortable">
       <thead>
         <tr>
           <th>Time</th>