basic infinite scroll for collections editor table

BioKIC · Dec 5, 2024 · f55eb59 · f55eb59
1 parent a46e397
commit f55eb59
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git a/resources/views/core/pages/collections/table.blade.php b/resources/views/core/pages/collections/table.blade.php
@@ -1,4 +1,4 @@
-@props(['collection', 'occurrences' => []])
+@props(['collection', 'occurrences' => [], 'page' => 0])
 <x-layout class="p-0 h-[100vh] relative" x-data="{ menu_open: false}" :hasFooter="false" :hasHeader="false"
     :hasNavbar="false">
     <div class="pt-4 px-4 flex flex-col gap-2 h-[7rem] relative">
@@ -189,7 +189,6 @@ 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">
@@ -205,6 +204,7 @@ class="overflow-x-scroll overflow-y-scroll w-screen h-[calc(100vh-7rem)] relativ
                         </tr>
                     </thead>
                     <tbody>
+                        @fragment('rows')
                         @foreach ($occurrences as $occurrence)
                         <tr @contextmenu="occid = {{$occurrence->occid}}" @class([ 'bg-base-200'=> $loop->even,
                             'bg-base-300' => $loop->odd,
@@ -234,10 +234,17 @@ class="overflow-x-scroll overflow-y-scroll w-screen h-[calc(100vh-7rem)] relativ
                             @endforeach
                         </tr>
                         @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>
+                        @endif
+                        @endfragment
                     </tbody>
                 </table>
+                <div id="scroll-loader" class="htmx-indicator">
+                    Loading more records...
+                </div>
             </div>
-            @endfragment
         </x-context-menu>
     </div>
 </x-layout>
diff --git a/routes/web.php b/routes/web.php
@@ -104,8 +104,7 @@
         ->join('omcollections as c', 'c.collid', '=', 'o.collid')
         ->where('c.collid', '=', $request->query('collid'))
        // ->where('o.family', '=', 'Apiaceae')
-        ->select('*')
-        ->limit(100);
+        ->select('*');
 
     $sortables = [
         'occid',
@@ -176,11 +175,11 @@
         }
     }
 
-    if($request->header('HX-Request')) {
-        return view('pages/collections/table', ['occurrences' => $query->get(), 'collection' => $collection])->fragment('table');
+    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');
     }
 
-    return view('pages/collections/table', ['occurrences' => $query->get(), 'collection' => $collection]);
+    return view('pages/collections/table', ['occurrences' => $query->paginate(100), 'collection' => $collection, 'page' => 0]);
 });
 
 // Checklist