collection table editor stateful infinite scroll with current search …

…/ filter
BioKIC · Dec 5, 2024 · 57e4889 · 57e4889
1 parent f55eb59
commit 57e4889
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git a/resources/views/core/pages/collections/table.blade.php b/resources/views/core/pages/collections/table.blade.php
@@ -171,14 +171,14 @@ class="float-right mr-2 mt-2 hover:ring-4 focus:outline-none focus:ring-4 rounde
                 <x-context-menu-item type='divider' />
 
                 <x-context-menu-item hx-include="#sort"
-                    hx-get="{{url('collections/table') . '?collid='. request('collid') }}" hx-trigger="click"
+                    hx-get="{{url('collections/table') . '?fragment=table&collid='. request('collid')}}" hx-trigger="click"
                     hx-target='#table-container' hx-swap="outerHTML">
                     <input type="hidden" name="sort" id="sort" x-bind:value="column_property" />
                     Sort By&nbsp;<span x-text="column"></span>
                 </x-context-menu-item>
 
                 <x-context-menu-item hx-include="#filter"
-                    hx-get="{{url('collections/table') . '?collid='. request('collid') }}" hx-trigger="click"
+                    hx-get="{{url('collections/table') . '?fragment=table&collid='. request('collid') }}" hx-trigger="click"
                     hx-target='#table-container' hx-swap="outerHTML">
                     <input type="hidden" x-bind:name="column_property" id="filter" x-bind:value="column_value" />
                     Filter By&nbsp;<span x-text="column"></span>
@@ -189,6 +189,7 @@ class="float-right mr-2 mt-2 hover:ring-4 focus:outline-none focus:ring-4 rounde
                     Clear Filters
                 </x-context-menu-item>
             </x-slot:menu>
+            @fragment('table')
             <div id="table-container"
                 class="overflow-x-scroll overflow-y-scroll w-screen h-[calc(100vh-7rem)] relative">
                 <table class="w-full border-seperate">
@@ -236,7 +237,7 @@ class="overflow-x-scroll overflow-y-scroll w-screen h-[calc(100vh-7rem)] relativ
                         @endforeach
 
                         @if(count($occurrences) === 100)
-                                <tr class="h-0 w-full" hx-get="{{ url('/collections/table') . '?partial=1&page='. $page + 1 .'&collid=' . request('collid') }}" hx-indicator="#scroll-loader" hx-trigger="intersect once" hx-swap="afterend"></tr>
+                                <tr class="h-0 w-full" hx-get="{{ url('/collections/table') . '?&fragment=rows&page='. $page + 1 . '&' . http_build_query(request()->except(['page', 'fragment'])) }}" hx-indicator="#scroll-loader" hx-trigger="intersect once" hx-swap="afterend"></tr>
                         @endif
                         @endfragment
                     </tbody>
@@ -245,6 +246,7 @@ class="overflow-x-scroll overflow-y-scroll w-screen h-[calc(100vh-7rem)] relativ
                     Loading more records...
                 </div>
             </div>
+            @endfragment
         </x-context-menu>
     </div>
 </x-layout>
diff --git a/routes/web.php b/routes/web.php
@@ -175,11 +175,21 @@
         }
     }
 
-    if($request->header('HX-Request') && $request->query('partial')) {
-        return view('pages/collections/table', ['occurrences' => $query->paginate(100), 'collection' => $collection, 'page' => $request->query('page') ?? 0])->fragment('rows');
+    $view = view('pages/collections/table', [
+        'occurrences' => $query->paginate(100),
+        'collection' => $collection,
+        'page' => $request->query('page') ?? 0
+    ]);
+
+    if($request->header('HX-Request')) {
+        if($request->query('fragment') === 'rows') {
+            return $view->fragment('rows');
+        } else if ($request->query('fragment') === 'table') {
+            return $view->fragment('table');
+        }
     }
 
-    return view('pages/collections/table', ['occurrences' => $query->paginate(100), 'collection' => $collection, 'page' => 0]);
+    return $view;
 });
 
 // Checklist