[Enhancement] Add pagination for a source's media (#190)

* [WIP] added first attempt at pagination component

* Hooked up pagination for downloaded media

lib/pinchflat_web/controllers/sources/source_controller.ex

@@ -6,9 +6,7 @@ defmodule PinchflatWeb.Sources.SourceController do
   alias Pinchflat.Repo
   alias Pinchflat.Tasks
   alias Pinchflat.Sources
-  alias Pinchflat.MediaQuery
   alias Pinchflat.Sources.Source
-  alias Pinchflat.Media.MediaQuery
   alias Pinchflat.Profiles.MediaProfile
   alias Pinchflat.Downloading.DownloadingHelpers
   alias Pinchflat.SlowIndexing.SlowIndexingHelpers
@@ -60,29 +58,7 @@ defmodule PinchflatWeb.Sources.SourceController do
       |> Tasks.list_tasks_for(nil, [:executing, :available, :scheduled, :retryable])
       |> Repo.preload(:job)
 
-    pending_media =
-      MediaQuery.new()
-      |> MediaQuery.for_source(source)
-      |> MediaQuery.where_pending_download()
-      |> order_by(desc: :id)
-      |> limit(100)
-      |> Repo.all()
-
-    downloaded_media =
-      MediaQuery.new()
-      |> MediaQuery.for_source(source)
-      |> MediaQuery.with_media_filepath()
-      |> order_by(desc: :id)
-      |> limit(100)
-      |> Repo.all()
-
-    render(conn, :show,
-      source: source,
-      pending_tasks: pending_tasks,
-      pending_media: pending_media,
-      downloaded_media: downloaded_media,
-      total_downloaded: total_downloaded_for(source)
-    )
+    render(conn, :show, source: source, pending_tasks: pending_tasks)
   end
 
   def edit(conn, %{"id" => id}) do
@@ -151,13 +127,6 @@ defmodule PinchflatWeb.Sources.SourceController do
     |> Repo.all()
   end
 
-  defp total_downloaded_for(source) do
-    MediaQuery.new()
-    |> MediaQuery.for_source(source)
-    |> MediaQuery.with_media_filepath()
-    |> Repo.aggregate(:count, :id)
-  end
-
   defp get_onboarding_layout do
     if Settings.get!(:onboarding) do
       {Layouts, :onboarding}

lib/pinchflat_web/controllers/sources/source_html/media_item_table_live.ex

@@ -0,0 +1,91 @@
+defmodule Pinchflat.Sources.MediaItemTableLive do
+  use PinchflatWeb, :live_view
+  import Ecto.Query, warn: false
+
+  alias Pinchflat.Repo
+  alias Pinchflat.Sources
+  alias Pinchflat.Media.MediaQuery
+  alias Pinchflat.Utils.NumberUtils
+
+  @limit 10
+
+  def render(%{records: []} = assigns) do
+    ~H"""
+    <p class="text-black dark:text-white">Nothing Here!</p>
+    """
+  end
+
+  def render(assigns) do
+    ~H"""
+    <div>
+      <span class="mb-4 inline-block">
+        Showing <%= length(@records) %> of <%= @total_record_count %>
+      </span>
+      <.table rows={@records} table_class="text-black dark:text-white">
+        <:col :let={media_item} label="Title">
+          <.subtle_link href={~p"/sources/#{@source.id}/media/#{media_item.id}"}>
+            <%= StringUtils.truncate(media_item.title, 50) %>
+          </.subtle_link>
+        </:col>
+        <:col :let={media_item} label="" class="flex place-content-evenly">
+          <.icon_link href={~p"/sources/#{@source.id}/media/#{media_item.id}"} icon="hero-eye" class="mx-1" />
+          <.icon_link href={~p"/sources/#{@source.id}/media/#{media_item.id}/edit"} icon="hero-pencil-square" class="mx-1" />
+        </:col>
+      </.table>
+      <section class="flex justify-center mt-5">
+        <.live_pagination_controls page_number={@page} total_pages={@total_pages} />
+      </section>
+    </div>
+    """
+  end
+
+  def mount(_params, session, socket) do
+    page = 1
+    media_state = session["media_state"]
+    source = Sources.get_source!(session["source_id"])
+    base_query = generate_base_query(source, media_state)
+    pagination_attrs = fetch_pagination_attributes(base_query, page)
+
+    {:ok, assign(socket, Map.merge(pagination_attrs, %{base_query: base_query, source: source}))}
+  end
+
+  def handle_event("page_change", %{"direction" => direction}, %{assigns: assigns} = socket) do
+    direction = if direction == "inc", do: 1, else: -1
+    new_page = assigns.page + direction
+    new_assigns = fetch_pagination_attributes(assigns.base_query, new_page)
+
+    {:noreply, assign(socket, new_assigns)}
+  end
+
+  defp fetch_pagination_attributes(base_query, page) do
+    total_record_count = Repo.aggregate(base_query, :count, :id)
+    total_pages = max(ceil(total_record_count / @limit), 1)
+    page = NumberUtils.clamp(page, 1, total_pages)
+    records = fetch_records(base_query, page)
+
+    %{page: page, total_pages: total_pages, records: records, total_record_count: total_record_count}
+  end
+
+  defp fetch_records(base_query, page) do
+    offset = (page - 1) * @limit
+
+    base_query
+    |> limit(^@limit)
+    |> offset(^offset)
+    |> Repo.all()
+  end
+
+  defp generate_base_query(source, "pending") do
+    MediaQuery.new()
+    |> MediaQuery.for_source(source)
+    |> MediaQuery.where_pending_download()
+    |> order_by(desc: :id)
+  end
+
+  defp generate_base_query(source, "downloaded") do
+    MediaQuery.new()
+    |> MediaQuery.for_source(source)
+    |> MediaQuery.with_media_filepath()
+    |> order_by(desc: :id)
+  end
+end

lib/pinchflat_web/controllers/sources/source_html/show.html.heex

@@ -37,48 +37,18 @@
         </div>
       </:tab>
       <:tab title="Pending Media">
-        <%= if match?([_|_], @pending_media) do %>
-          <h4 class="text-white text-lg mb-6">Shows a maximum of 100 media items</h4>
-          <.table rows={@pending_media} table_class="text-black dark:text-white">
-            <:col :let={media_item} label="Title">
-              <.subtle_link href={~p"/sources/#{@source.id}/media/#{media_item.id}"}>
-                <%= StringUtils.truncate(media_item.title, 50) %>
-              </.subtle_link>
-            </:col>
-            <:col :let={media_item} label="" class="flex place-content-evenly">
-              <.icon_link href={~p"/sources/#{@source.id}/media/#{media_item.id}"} icon="hero-eye" class="mx-1" />
-              <.icon_link
-                href={~p"/sources/#{@source.id}/media/#{media_item.id}/edit"}
-                icon="hero-pencil-square"
-                class="mx-1"
-              />
-            </:col>
-          </.table>
-        <% else %>
-          <p class="text-black dark:text-white">Nothing Here!</p>
-        <% end %>
+        <%= live_render(
+          @conn,
+          Pinchflat.Sources.MediaItemTableLive,
+          session: %{"source_id" => @source.id, "media_state" => "pending"}
+        ) %>
       </:tab>
       <:tab title="Downloaded Media">
-        <%= if match?([_|_], @downloaded_media) do %>
-          <h4 class="text-white text-lg mb-6">Shows a maximum of 100 media items (<%= @total_downloaded %> total)</h4>
-          <.table rows={@downloaded_media} table_class="text-black dark:text-white">
-            <:col :let={media_item} label="Title">
-              <.subtle_link href={~p"/sources/#{@source.id}/media/#{media_item.id}"}>
-                <%= StringUtils.truncate(media_item.title, 50) %>
-              </.subtle_link>
-            </:col>
-            <:col :let={media_item} label="" class="flex place-content-evenly">
-              <.icon_link href={~p"/sources/#{@source.id}/media/#{media_item.id}"} icon="hero-eye" class="mx-1" />
-              <.icon_link
-                href={~p"/sources/#{@source.id}/media/#{media_item.id}/edit"}
-                icon="hero-pencil-square"
-                class="mx-1"
-              />
-            </:col>
-          </.table>
-        <% else %>
-          <p class="text-black dark:text-white">Nothing Here!</p>
-        <% end %>
+        <%= live_render(
+          @conn,
+          Pinchflat.Sources.MediaItemTableLive,
+          session: %{"source_id" => @source.id, "media_state" => "downloaded"}
+        ) %>
       </:tab>
       <:tab title="Pending Tasks">
         <%= if match?([_|_], @pending_tasks) do %>