[Enhancement] Add sorting, pagination, and new attributes to sources index table (#510)

* WIP - started improving handling of sorting for sources index table

* WIP - Added UI to table to indicate sort column and direction

* Refactored toggle liveview into a livecomponent

* Added sorting for all table attrs

* Added pagination to the sources table

* Added tests for updated liveviews and live components

* Add tests for new helper methods

* Added fancy new CSS to my sources table

* Added size to sources table

* Adds relative div to ensure that sorting arrow doesn't run away

* Fixed da tests

lib/pinchflat_web/components/custom_components/table_components.ex

@@ -16,6 +16,8 @@ defmodule PinchflatWeb.CustomComponents.TableComponents do
   """
   attr :rows, :list, required: true
   attr :table_class, :string, default: ""
+  attr :sort_key, :string, default: nil
+  attr :sort_direction, :string, default: nil
 
   attr :row_item, :any,
     default: &Function.identity/1,
@@ -24,6 +26,7 @@ defmodule PinchflatWeb.CustomComponents.TableComponents do
   slot :col, required: true do
     attr :label, :string
     attr :class, :string
+    attr :sort_key, :string
   end
 
   def table(assigns) do
@@ -31,8 +34,20 @@ defmodule PinchflatWeb.CustomComponents.TableComponents do
     <table class={["w-full table-auto bg-boxdark", @table_class]}>
       <thead>
         <tr class="text-left bg-meta-4">
-          <th :for={col <- @col} class="px-4 py-4 font-medium text-white xl:pl-11">
-            {col[:label]}
+          <th
+            :for={col <- @col}
+            class={["px-4 py-4 font-medium text-white xl:pl-11", col[:sort_key] && "cursor-pointer"]}
+            phx-click={col[:sort_key] && "sort_update"}
+            phx-value-sort_key={col[:sort_key]}
+          >
+            <div class="relative">
+              {col[:label]}
+              <.icon
+                :if={to_string(@sort_key) == col[:sort_key]}
+                name={if @sort_direction == :asc, do: "hero-chevron-up", else: "hero-chevron-down"}
+                class="w-3 h-3 mt-2 ml-1 absolute"
+              />
+            </div>
           </th>
         </tr>
       </thead>
@@ -70,9 +85,9 @@ defmodule PinchflatWeb.CustomComponents.TableComponents do
         <li>
           <span
             class={[
-              "flex h-8 w-8 items-center justify-center rounded",
+              "pagination-prev h-8 w-8 items-center justify-center rounded",
               @page_number != 1 && "cursor-pointer hover:bg-primary hover:text-white",
-              @page_number == 1 && "cursor-not-allowed"
+              @page_number <= 1 && "cursor-not-allowed"
             ]}
             phx-click={@page_number != 1 && "page_change"}
             phx-value-direction="dec"
@@ -88,9 +103,9 @@ defmodule PinchflatWeb.CustomComponents.TableComponents do
         <li>
           <span
             class={[
-              "flex h-8 w-8 items-center justify-center rounded",
+              "pagination-next flex h-8 w-8 items-center justify-center rounded",
               @page_number != @total_pages && "cursor-pointer hover:bg-primary hover:text-white",
-              @page_number == @total_pages && "cursor-not-allowed"
+              @page_number >= @total_pages && "cursor-not-allowed"
             ]}
             phx-click={@page_number != @total_pages && "page_change"}
             phx-value-direction="inc"

lib/pinchflat_web/components/custom_components/text_components.ex

@@ -2,6 +2,7 @@ defmodule PinchflatWeb.CustomComponents.TextComponents do
   @moduledoc false
   use Phoenix.Component
 
+  alias Pinchflat.Utils.NumberUtils
   alias PinchflatWeb.CoreComponents
 
   @doc """
@@ -125,4 +126,24 @@ defmodule PinchflatWeb.CustomComponents.TextComponents do
     {@word}{if @count == 1, do: "", else: @suffix}
     """
   end
+
+  @doc """
+  Renders a human-readable byte size
+  """
+
+  attr :byte_size, :integer, required: true
+
+  def readable_filesize(assigns) do
+    {num, suffix} = NumberUtils.human_byte_size(assigns.byte_size, precision: 2)
+
+    assigns =
+      Map.merge(assigns, %{
+        num: num,
+        suffix: suffix
+      })
+
+    ~H"""
+    <.localized_number number={@num} /> {@suffix}
+    """
+  end
 end

lib/pinchflat_web/controllers/pages/page_html.ex

@@ -1,23 +1,5 @@
 defmodule PinchflatWeb.Pages.PageHTML do
   use PinchflatWeb, :html
 
-  alias Pinchflat.Utils.NumberUtils
-
   embed_templates "page_html/*"
-
-  attr :media_filesize, :integer, required: true
-
-  def readable_media_filesize(assigns) do
-    {num, suffix} = NumberUtils.human_byte_size(assigns.media_filesize, precision: 2)
-
-    assigns =
-      Map.merge(assigns, %{
-        num: num,
-        suffix: suffix
-      })
-
-    ~H"""
-    <.localized_number number={@num} /> {@suffix}
-    """
-  end
 end

lib/pinchflat_web/controllers/pages/page_html/home.html.heex

@@ -33,7 +33,7 @@
     <span class="flex flex-col items-center py-2">
       <span class="text-md font-medium">Library Size</span>
       <h4 class="text-title-md font-bold text-white">
-        <.readable_media_filesize media_filesize={@media_item_size} />
+        <.readable_filesize byte_size={@media_item_size} />
       </h4>
     </span>
   </div>

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

@@ -11,8 +11,12 @@
 
 <div class="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
   <div class="max-w-full overflow-x-auto">
-    <div class="flex flex-col gap-10 min-w-max">
-      {live_render(@conn, PinchflatWeb.Sources.IndexTableLive)}
-    </div>
+    {live_render(@conn, PinchflatWeb.Sources.SourceLive.IndexTableLive,
+      session: %{
+        "initial_sort_key" => :custom_name,
+        "initial_sort_direction" => :asc,
+        "results_per_page" => 10
+      }
+    )}
   </div>
 </div>

lib/pinchflat_web/controllers/sources/source_live/index_table_live.ex

@@ -0,0 +1,108 @@
+defmodule PinchflatWeb.Sources.SourceLive.IndexTableLive do
+  use PinchflatWeb, :live_view
+  use Pinchflat.Media.MediaQuery
+  use Pinchflat.Sources.SourcesQuery
+
+  import PinchflatWeb.Helpers.SortingHelpers
+  import PinchflatWeb.Helpers.PaginationHelpers
+
+  alias Pinchflat.Repo
+  alias Pinchflat.Sources.Source
+  alias Pinchflat.Media.MediaItem
+
+  def mount(_params, session, socket) do
+    limit = session["results_per_page"]
+
+    initial_params =
+      Map.merge(
+        %{
+          sort_key: session["initial_sort_key"],
+          sort_direction: session["initial_sort_direction"]
+        },
+        get_pagination_attributes(sources_query(), 1, limit)
+      )
+
+    socket
+    |> assign(initial_params)
+    |> set_sources()
+    |> then(&{:ok, &1})
+  end
+
+  def handle_event("page_change", %{"direction" => direction}, %{assigns: assigns} = socket) do
+    new_page = update_page_number(assigns.page, direction, assigns.total_pages)
+
+    socket
+    |> assign(get_pagination_attributes(sources_query(), new_page, assigns.limit))
+    |> set_sources()
+    |> then(&{:noreply, &1})
+  end
+
+  def handle_event("sort_update", %{"sort_key" => sort_key}, %{assigns: assigns} = socket) do
+    new_sort_key = String.to_existing_atom(sort_key)
+
+    new_params = %{
+      sort_key: new_sort_key,
+      sort_direction: get_sort_direction(assigns.sort_key, new_sort_key, assigns.sort_direction)
+    }
+
+    socket
+    |> assign(new_params)
+    |> set_sources()
+    |> then(&{:noreply, &1})
+  end
+
+  defp sort_attr(:pending_count), do: dynamic([s, mp, dl, pe], pe.pending_count)
+  defp sort_attr(:downloaded_count), do: dynamic([s, mp, dl], dl.downloaded_count)
+  defp sort_attr(:media_size_bytes), do: dynamic([s, mp, dl], dl.media_size_bytes)
+  defp sort_attr(:media_profile_name), do: dynamic([s, mp], mp.name)
+  defp sort_attr(:custom_name), do: dynamic([s], s.custom_name)
+  defp sort_attr(:enabled), do: dynamic([s], s.enabled)
+
+  defp set_sources(%{assigns: assigns} = socket) do
+    sources =
+      sources_query()
+      |> order_by(^[{assigns.sort_direction, sort_attr(assigns.sort_key)}, asc: :id])
+      |> limit(^assigns.limit)
+      |> offset(^assigns.offset)
+      |> Repo.all()
+
+    assign(socket, %{sources: sources})
+  end
+
+  defp sources_query do
+    downloaded_subquery =
+      from(
+        m in MediaItem,
+        select: %{downloaded_count: count(m.id), source_id: m.source_id, media_size_bytes: sum(m.media_size_bytes)},
+        where: ^MediaQuery.downloaded(),
+        group_by: m.source_id
+      )
+
+    pending_subquery =
+      from(
+        m in MediaItem,
+        inner_join: s in assoc(m, :source),
+        inner_join: mp in assoc(s, :media_profile),
+        select: %{pending_count: count(m.id), source_id: m.source_id},
+        where: ^MediaQuery.pending(),
+        group_by: m.source_id
+      )
+
+    from s in Source,
+      as: :source,
+      inner_join: mp in assoc(s, :media_profile),
+      left_join: d in subquery(downloaded_subquery),
+      on: d.source_id == s.id,
+      left_join: p in subquery(pending_subquery),
+      on: p.source_id == s.id,
+      on: d.source_id == s.id,
+      where: is_nil(s.marked_for_deletion_at) and is_nil(mp.marked_for_deletion_at),
+      preload: [media_profile: mp],
+      select: map(s, ^Source.__schema__(:fields)),
+      select_merge: %{
+        downloaded_count: coalesce(d.downloaded_count, 0),
+        pending_count: coalesce(p.pending_count, 0),
+        media_size_bytes: coalesce(d.media_size_bytes, 0)
+      }
+  end
+end

lib/pinchflat_web/controllers/sources/source_live/index_table_live.html.heex

@@ -0,0 +1,41 @@
+<div class="flex flex-col min-w-max">
+  <.table rows={@sources} table_class="text-white" sort_key={@sort_key} sort_direction={@sort_direction}>
+    <:col :let={source} label="Name" sort_key="custom_name" class="truncate max-w-xs">
+      <.subtle_link href={~p"/sources/#{source.id}"}>
+        {source.custom_name}
+      </.subtle_link>
+    </:col>
+    <:col :let={source} label="Pending" sort_key="pending_count">
+      <.subtle_link href={~p"/sources/#{source.id}/#tab-pending"}>
+        <.localized_number number={source.pending_count} />
+      </.subtle_link>
+    </:col>
+    <:col :let={source} label="Downloaded" sort_key="downloaded_count">
+      <.subtle_link href={~p"/sources/#{source.id}/#tab-downloaded"}>
+        <.localized_number number={source.downloaded_count} />
+      </.subtle_link>
+    </:col>
+    <:col :let={source} label="Size" sort_key="media_size_bytes">
+      <.readable_filesize byte_size={source.media_size_bytes} />
+    </:col>
+    <:col :let={source} label="Media Profile" sort_key="media_profile_name">
+      <.subtle_link href={~p"/media_profiles/#{source.media_profile_id}"}>
+        {source.media_profile.name}
+      </.subtle_link>
+    </:col>
+    <:col :let={source} label="Enabled?" sort_key="enabled">
+      <.live_component
+        module={PinchflatWeb.Sources.SourceLive.SourceEnableToggle}
+        source={source}
+        id={"source_#{source.id}_enabled"}
+      />
+    </:col>
+    <:col :let={source} label="" class="flex place-content-evenly">
+      <.icon_link href={~p"/sources/#{source.id}/edit"} icon="hero-pencil-square" class="mx-1" />
+    </:col>
+  </.table>
+
+  <section class="flex justify-center my-5">
+    <.live_pagination_controls page_number={@page} total_pages={@total_pages} />
+  </section>
+</div>

lib/pinchflat_web/controllers/sources/source_live/source_enable_toggle.ex

@@ -0,0 +1,35 @@
+defmodule PinchflatWeb.Sources.SourceLive.SourceEnableToggle do
+  use PinchflatWeb, :live_component
+
+  alias Pinchflat.Sources
+  alias Pinchflat.Sources.Source
+
+  def render(assigns) do
+    ~H"""
+    <div>
+      <.form :let={f} for={@form} phx-change="update" phx-target={@myself} class="enabled_toggle_form">
+        <.input id={"source_#{@source_id}_enabled_input"} field={f[:enabled]} type="toggle" />
+      </.form>
+    </div>
+    """
+  end
+
+  def update(assigns, socket) do
+    initial_data = %{
+      source_id: assigns.source.id,
+      form: Sources.change_source(%Source{}, assigns.source)
+    }
+
+    socket
+    |> assign(initial_data)
+    |> then(&{:ok, &1})
+  end
+
+  def handle_event("update", %{"source" => source_params}, %{assigns: assigns} = socket) do
+    assigns.source_id
+    |> Sources.get_source!()
+    |> Sources.update_source(source_params)
+
+    {:noreply, socket}
+  end
+end

lib/pinchflat_web/helpers/pagination_helpers.ex

@@ -0,0 +1,45 @@
+defmodule PinchflatWeb.Helpers.PaginationHelpers do
+  @moduledoc """
+  Methods for working with pagination, usually in the context of LiveViews or LiveComponents.
+
+  These methods are fairly simple, but they're commonly repeated across different Live entities
+  """
+
+  alias Pinchflat.Repo
+  alias Pinchflat.Utils.NumberUtils
+
+  @doc """
+  Given a query, a page number, and a number of records per page, returns a map of pagination attributes.
+
+  Returns map()
+  """
+  def get_pagination_attributes(query, page, records_per_page) do
+    total_record_count = Repo.aggregate(query, :count, :id)
+    total_pages = max(ceil(total_record_count / records_per_page), 1)
+    clamped_page = NumberUtils.clamp(page, 1, total_pages)
+
+    %{
+      page: clamped_page,
+      total_pages: total_pages,
+      total_record_count: total_record_count,
+      limit: records_per_page,
+      offset: (clamped_page - 1) * records_per_page
+    }
+  end
+
+  @doc """
+  Given a current page number, a direction to move in, and the total number of pages, returns the updated page number.
+  The updated page number is clamped to the range [1, total_pages].
+
+  Returns integer()
+  """
+  def update_page_number(current_page, direction, total_pages) do
+    updated_page =
+      case to_string(direction) do
+        "inc" -> current_page + 1
+        "dec" -> current_page - 1
+      end
+
+    NumberUtils.clamp(updated_page, 1, total_pages)
+  end
+end

lib/pinchflat_web/helpers/sorting_helpers.ex

@@ -0,0 +1,20 @@
+defmodule PinchflatWeb.Helpers.SortingHelpers do
+  @moduledoc """
+  Methods for working with sorting, usually in the context of LiveViews or LiveComponents.
+
+  These methods are fairly simple, but they're commonly repeated across different Live entities
+  """
+
+  @doc """
+  Given the old sort attribute, the new sort attribute, and the old sort direction, returns the new sort direction.
+
+  Returns :asc | :desc
+  """
+  def get_sort_direction(old_sort_attr, new_sort_attr, old_sort_direction) do
+    case {new_sort_attr, old_sort_direction} do
+      {^old_sort_attr, :desc} -> :asc
+      {^old_sort_attr, _} -> :desc
+      _ -> :asc
+    end
+  end
+end