From 8b248bad17234ae9115ea8bb25c5d7625c929804 Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Sun, 10 Nov 2024 18:15:33 +1100
Subject: [PATCH] Make endpoints column filter responsive

---
 templates/partials/endpoints_table.html | 91 ++++++++++++++++---------
 1 file changed, 60 insertions(+), 31 deletions(-)

diff --git a/templates/partials/endpoints_table.html b/templates/partials/endpoints_table.html
index 53b2333..d182495 100644
--- a/templates/partials/endpoints_table.html
+++ b/templates/partials/endpoints_table.html
@@ -1,58 +1,87 @@
 <div class="overflow-x-auto">
     <!-- Column Toggle Checkboxes -->
-    <div class="mb-4 flex flex-wrap items-center space-x-4">
-        <label class="inline-flex items-center">
-            <input type="checkbox" checked class="form-checkbox h-5 w-5 text-blue-600" hx-target=".col-endpoint"
-                hx-trigger="change" _="
-                       on change if me.checked then
+    <div class="mb-4 flex flex-col sm:flex-row flex-wrap items-start sm:items-center space-y-2 sm:space-y-0 sm:space-x-6"
+        _="
+         on load
+             let cols = [
+                 { class: 'col-endpoint', checkbox: 'toggle-endpoint' },
+                 { class: 'col-url', checkbox: 'toggle-url' },
+                 { class: 'col-methods', checkbox: 'toggle-methods' },
+                 { class: 'col-view_func', checkbox: 'toggle-view_func' },
+                 { class: 'col-description', checkbox: 'toggle-description' }
+             ]
+             for each col in cols
+                 let state = localStorage[col.class]
+                 if state is 'hidden'
+                     add .hidden to .{col.class}
+                     set checkbox {col.checkbox} to false
+                 else
+                     remove .hidden from .{col.class}
+                     set checkbox {col.checkbox} to true
+     ">
+        <label class="inline-flex items-center space-x-2" for="toggle-endpoint">
+            <input id="toggle-endpoint" type="checkbox" checked class="form-checkbox h-6 w-6 text-blue-600" _="
+                   on change 
+                       if me.checked then
                            remove .hidden from .col-endpoint
+                           set localStorage['col-endpoint'] to 'visible'
                        else
                            add .hidden to .col-endpoint
-                   ">
-            <span class="ml-2 text-gray-700">Endpoint</span>
+                           set localStorage['col-endpoint'] to 'hidden'
+               ">
+            <span class="text-gray-700">Endpoint</span>
         </label>
-        <label class="inline-flex items-center">
-            <input type="checkbox" checked class="form-checkbox h-5 w-5 text-blue-600" hx-target=".col-url"
-                hx-trigger="change" _="
-                       on change if me.checked then
+        <label class="inline-flex items-center space-x-2" for="toggle-url">
+            <input id="toggle-url" type="checkbox" checked class="form-checkbox h-6 w-6 text-blue-600" _="
+                   on change 
+                       if me.checked then
                            remove .hidden from .col-url
+                           set localStorage['col-url'] to 'visible'
                        else
                            add .hidden to .col-url
-                   ">
-            <span class="ml-2 text-gray-700">URL</span>
+                           set localStorage['col-url'] to 'hidden'
+               ">
+            <span class="text-gray-700">URL</span>
         </label>
-        <label class="inline-flex items-center">
-            <input type="checkbox" checked class="form-checkbox h-5 w-5 text-blue-600" hx-target=".col-methods"
-                hx-trigger="change" _="
-                       on change if me.checked then
+        <label class="inline-flex items-center space-x-2" for="toggle-methods">
+            <input id="toggle-methods" type="checkbox" checked class="form-checkbox h-6 w-6 text-blue-600" _="
+                   on change 
+                       if me.checked then
                            remove .hidden from .col-methods
+                           set localStorage['col-methods'] to 'visible'
                        else
                            add .hidden to .col-methods
-                   ">
-            <span class="ml-2 text-gray-700">Methods</span>
+                           set localStorage['col-methods'] to 'hidden'
+               ">
+            <span class="text-gray-700">Methods</span>
         </label>
-        <label class="inline-flex items-center">
-            <input type="checkbox" checked class="form-checkbox h-5 w-5 text-blue-600" hx-target=".col-view_func"
-                hx-trigger="change" _="
-                       on change if me.checked then
+        <label class="inline-flex items-center space-x-2" for="toggle-view_func">
+            <input id="toggle-view_func" type="checkbox" checked class="form-checkbox h-6 w-6 text-blue-600" _="
+                   on change 
+                       if me.checked then
                            remove .hidden from .col-view_func
+                           set localStorage['col-view_func'] to 'visible'
                        else
                            add .hidden to .col-view_func
-                   ">
-            <span class="ml-2 text-gray-700">View Function</span>
+                           set localStorage['col-view_func'] to 'hidden'
+               ">
+            <span class="text-gray-700">View Function</span>
         </label>
-        <label class="inline-flex items-center">
-            <input type="checkbox" checked class="form-checkbox h-5 w-5 text-blue-600" hx-target=".col-description"
-                hx-trigger="change" _="
-                       on change if me.checked then
+        <label class="inline-flex items-center space-x-2" for="toggle-description">
+            <input id="toggle-description" type="checkbox" checked class="form-checkbox h-6 w-6 text-blue-600" _="
+                   on change 
+                       if me.checked then
                            remove .hidden from .col-description
+                           set localStorage['col-description'] to 'visible'
                        else
                            add .hidden to .col-description
-                   ">
-            <span class="ml-2 text-gray-700">Description</span>
+                           set localStorage['col-description'] to 'hidden'
+               ">
+            <span class="text-gray-700">Description</span>
         </label>
     </div>
 
+
     <!-- Endpoints Table -->
     <table class="min-w-full bg-white rounded-lg shadow">
         <thead class="bg-gray-200">