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

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,
@@ -35,10 +37,15 @@ defmodule PinchflatWeb.CustomComponents.TableComponents do
           <th
             :for={col <- @col}
             class={["px-4 py-4 font-medium text-white xl:pl-11", col[:sort_key] && "cursor-pointer"]}
-            phx-click="sort_update"
+            phx-click={col[:sort_key] && "sort_update"}
             phx-value-sort_key={col[:sort_key]}
           >
             {col[:label]}
+            <.icon
+              name={if @sort_direction == :asc, do: "hero-chevron-up", else: "hero-chevron-down"}
+              class="w-3 h-3 mt-2 ml-1 absolute"
+              :if={to_string(@sort_key) == col[:sort_key]}
+            />
           </th>
         </tr>
       </thead>
@@ -59,11 +66,6 @@ defmodule PinchflatWeb.CustomComponents.TableComponents do
     """
   end
 
-  # attr :
-  # def my_table(assigns) do
-
-  # end
-
   @doc """
   Renders simple pagination controls for a table in a liveview.
 

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

@@ -54,6 +54,7 @@ defmodule PinchflatWeb.Sources.SourceLive.IndexTableLive do
     assign(socket, %{sources: sources})
   end
 
+  defp sort_attr(:pending_count), do: dynamic([s, mp, dl, pe], field(pe, :pending_count))
   defp sort_attr(:downloaded_count), do: dynamic([s, mp, dl], field(dl, :downloaded_count))
   defp sort_attr(:custom_name), do: dynamic([s], field(s, :custom_name))
   defp sort_attr(_), do: sort_attr(:custom_name)
@@ -67,34 +68,28 @@ defmodule PinchflatWeb.Sources.SourceLive.IndexTableLive do
         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),
+      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)
+        downloaded_count: coalesce(d.downloaded_count, 0),
+        pending_count: coalesce(p.pending_count, 0)
       }
-
-    # select_merge: %{
-    #   downloaded_count:
-    #     subquery(
-    #       from m in MediaItem,
-    #         where: m.source_id == parent_as(:source).id,
-    #         where: ^MediaQuery.downloaded(),
-    #         select: count(m.id)
-    #     ),
-    # pending_count:
-    # subquery(
-    #   from m in MediaItem,
-    #     join: s in assoc(m, :source),
-    #     where: m.source_id == parent_as(:source).id,
-    #     where: ^MediaQuery.pending(),
-    #     select: count(m.id)
-    # )
-    # }
   end
 end

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

@@ -1,9 +1,14 @@
-<.table rows={@sources} table_class="text-white">
+<.table rows={@sources} table_class="text-white" sort_key={@sort_key} sort_direction={@sort_direction}>
   <:col :let={source} label="Name" sort_key="custom_name">
     <.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} />