Switch to cursor based pagination

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(),

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"

apps/ex_nvr_web/lib/ex_nvr_web/controllers/api/recording_controller.ex

@@ -28,10 +28,9 @@ defmodule ExNVRWeb.API.RecordingController do
       {:ok, {recordings, meta}} ->
         meta =
           Map.take(meta, [
-            :current_page,
+            :start_cursor,
             :page_size,
-            :total_count,
-            :total_pages
+            :end_cursor
           ])
 
         recordings = Enum.map(recordings, &Map.drop(&1, [:device_name, :timezone]))

apps/ex_nvr_web/lib/ex_nvr_web/live/recordings_list_live.ex

@@ -143,7 +143,21 @@ 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)
+    first = Map.get(pagination_params, "first", 100)
+    before_cursor = Map.get(pagination_params, "before-cursor", nil)
+    last = Map.get(pagination_params, "last", 100)
+
+    cursor_params =
+      if not is_nil(after_cursor) do
+        old_pagination_params = Map.drop(socket.assigns.pagination_params, ["before", "before-cursor", "last"])
+        Map.merge(old_pagination_params, %{"first" => first, "after" => after_cursor})
+      else
+        old_pagination_params = Map.drop(socket.assigns.pagination_params, ["after", "after-cursor", "first"])
+        Map.merge(old_pagination_params, %{"last" => last, "before" => before_cursor})
+      end
+
+    pagination_params = Map.merge(pagination_params, cursor_params)
 
     params =
       Map.merge(socket.assigns.filter_params, pagination_params)

apps/ex_nvr_web/test/ex_nvr_web/controllers/api/recording_controller_test.exs

@@ -88,12 +88,9 @@ defmodule ExNVRWeb.API.RecordingControllerTest do
       assert Enum.map(response["data"], & &1["id"]) |> MapSet.new() ==
                Enum.map(recordings, & &1.id) |> MapSet.new()
 
-      assert %{
-               "total_count" => 4,
-               "total_pages" => 1,
-               "current_page" => 1,
-               "page_size" => 100
-             } = response["meta"]
+      assert Map.get(response["meta"], "page_size") == 100
+      assert Map.has_key?(response["meta"], "start_cursor")
+      assert Map.has_key?(response["meta"], "end_cursor")
     end
 
     test "filter recordings chunks", %{conn: conn, device: device, recordings: recordings} do

apps/ex_nvr_web/test/ex_nvr_web/live/recordings_list_live_test.exs

@@ -63,7 +63,7 @@ defmodule ExNVRWeb.RecordingListLiveTest do
       {:ok, lv, html} =
         conn
         |> log_in_user(user_fixture())
-        |> live(~p"/recordings?page_size=1")
+        |> live(~p"/recordings?first=1")
 
       # check pagination
       assert lv
@@ -74,14 +74,6 @@ defmodule ExNVRWeb.RecordingListLiveTest do
              |> element("a", "Next")
              |> has_element?()
 
-      assert lv
-             |> element("a", "1")
-             |> has_element?()
-
-      for page_label <- ["1", "2", "...", "4", "5", "6", "...", "9", "10"] do
-        assert html =~ page_label
-      end
-
       assert_recording_info(lv, html, device, List.last(recordings))
     end
 
@@ -91,14 +83,10 @@ defmodule ExNVRWeb.RecordingListLiveTest do
         |> log_in_user(user_fixture())
         |> live(~p"/recordings?page_size=1")
 
-      html = element(lv, "a", "2") |> render_click(%{page_size: 1})
-
-      for page_label <- ["1", "2", "...", "4", "5", "6", "...", "9", "10"] do
-        assert html =~ page_label
-      end
+      html = element(lv, "a", "Next") |> render_click(%{last: 1})
 
       # check recording
-      recording = Enum.at(recordings, length(recordings) - 2)
+      recording = Enum.at(recordings, 0)
       assert_recording_info(lv, html, device, recording)
     end
 
@@ -240,7 +228,7 @@ defmodule ExNVRWeb.RecordingListLiveTest do
       {:ok, lv, html} =
         logged_in_conn
         |> live(
-          ~p"/recordings?page_size=1&order_by[]=device_name&order_by[]=start_date&order_by[]=end_date&order_directions[]=asc&order_directions[]=desc"
+          ~p"/recordings?first=1&order_by[]=device_name&order_by[]=start_date&order_by[]=end_date&order_directions[]=asc&order_directions[]=desc"
         )
 
       assert_recording_info(lv, html, device, List.last(recordings))
@@ -249,7 +237,7 @@ defmodule ExNVRWeb.RecordingListLiveTest do
       {:ok, lv, html} =
         logged_in_conn
         |> live(
-          ~p"/recordings?page_size=1&order_by[]=start_date&order_by[]=device_name&order_directions[]=asc&order_directions[]=asc"
+          ~p"/recordings?first=1&order_by[]=start_date&order_by[]=device_name&order_directions[]=asc&order_directions[]=asc"
         )
 
       assert_recording_info(lv, html, new_device, List.first(new_recordings))
@@ -258,7 +246,7 @@ defmodule ExNVRWeb.RecordingListLiveTest do
       {:ok, lv, html} =
         logged_in_conn
         |> live(
-          ~p"/recordings?page_size=1&order_by[]=end_date&order_by[]=device_name&order_directions[]=desc&order_directions[]=desc"
+          ~p"/recordings?first=1&order_by[]=end_date&order_by[]=device_name&order_directions[]=desc&order_directions[]=desc"
         )
 
       assert_recording_info(lv, html, new_device, List.last(new_recordings))