add cursor based pagination

evercam · Feb 28, 2024 · b0dbbb1 · b0dbbb1
1 parent 0666d84
commit b0dbbb1
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 28 deletions.
diff --git a/apps/ex_nvr/lib/ex_nvr/model/recording.ex b/apps/ex_nvr/lib/ex_nvr/model/recording.ex
@@ -23,9 +23,8 @@ defmodule ExNVR.Model.Recording do
                ]
              ]
            ],
-           pagination_types: [:page],
-           default_limit: 100,
-           max_limit: 150}
+           pagination_types: [:first, :last],
+           default_pagination_type: :first}
 
   @type t :: %__MODULE__{
           start_date: DateTime.t(),

diff --git a/apps/ex_nvr_web/lib/ex_nvr_web/components/core_components.ex b/apps/ex_nvr_web/lib/ex_nvr_web/components/core_components.ex
@@ -686,7 +686,7 @@ defmodule ExNVRWeb.CoreComponents do
           <a
             href="#"
             phx-click="paginate"
-            phx-value-page={@meta.previous_page}
+            phx-value-before-cursor={@meta.start_cursor}
             class={
               [
                 "flex items-center justify-center px-3 h-8 ml-0 leading-tight bg-white border border-gray-300 rounded-l-lg"
@@ -716,32 +716,11 @@ defmodule ExNVRWeb.CoreComponents do
             </svg>
           </a>
         </li>
-        <li :for={page <- 1..2} :if={@meta.total_pages > 6}>
-          <.pagination_link current_page={@meta.current_page} page={page} />
-        </li>
-        <li :if={@meta.total_pages > 6 && @meta.current_page > 4}>
-          <span class="px-3 h-8 text-gray-500">...</span>
-        </li>
-        <li
-          :for={idx <- 3..(@meta.total_pages - 2)}
-          :if={@meta.total_pages > 6 && abs(@meta.current_page - idx) <= 1}
-        >
-          <.pagination_link current_page={@meta.current_page} page={idx} />
-        </li>
-        <li :if={@meta.total_pages > 6 && @meta.current_page < @meta.total_pages - 3}>
-          <span class="px-3 h-8 text-gray-500">...</span>
-        </li>
-        <li :for={page <- [@meta.total_pages - 1, @meta.total_pages]} :if={@meta.total_pages > 6}>
-          <.pagination_link current_page={@meta.current_page} page={page} />
-        </li>
-        <li :for={idx <- [email protected]_pages} :if={@meta.total_pages <= 6}>
-          <.pagination_link current_page={@meta.current_page} page={idx} />
-        </li>
         <li>
           <a
             href="#"
             phx-click="paginate"
-            phx-value-page={@meta.next_page}
+            phx-value-after-cursor={@meta.end_cursor}
             class={
               [
                 "flex items-center justify-center px-3 h-8 leading-tight border border-gray-300 bg-white rounded-r-lg"
@@ -781,7 +760,6 @@ defmodule ExNVRWeb.CoreComponents do
     <.link
       href="#"
       phx-click="paginate"
-      phx-value-page={@page}
       class={
         [
           "flex items-center justify-center px-3 h-8 leading-tight border dark:border-gray-700"

diff --git a/apps/ex_nvr_web/lib/ex_nvr_web/live/recordings_list_live.ex b/apps/ex_nvr_web/lib/ex_nvr_web/live/recordings_list_live.ex
@@ -143,7 +143,19 @@ defmodule ExNVRWeb.RecordingListLive do
 
   @impl true
   def handle_event("paginate", pagination_params, socket) do
-    pagination_params = Map.merge(socket.assigns.pagination_params, pagination_params)
+    after_cursor = Map.get(pagination_params, "after-cursor", nil)
+    before_cursor = Map.get(pagination_params, "before-cursor", nil)
+
+    cursor_params =
+      if not is_nil(after_cursor) do
+        old_pagination_params = Map.drop(socket.assigns.pagination_params, ["before"])
+        Map.merge(old_pagination_params, %{"after" => after_cursor})
+      else
+        old_pagination_params = Map.drop(socket.assigns.pagination_params, ["after"])
+        Map.merge(old_pagination_params, %{"before" => before_cursor})
+      end
+
+    pagination_params = Map.merge(pagination_params, cursor_params)
 
     params =
       Map.merge(socket.assigns.filter_params, pagination_params)