Improve relationship UI handling (#42)

* Added tabbed view; improved relationships for media profile

* Adds new maybe_limit method for queries

* Improves UI for media items, associated tasks

lib/pinchflat/media.ex

@@ -41,12 +41,14 @@ defmodule Pinchflat.Media do
 
   Returns [%MediaItem{}, ...].
   """
-  def list_pending_media_items_for(%Source{} = source) do
+  def list_pending_media_items_for(%Source{} = source, opts \\ []) do
+    limit = Keyword.get(opts, :limit, nil)
     media_profile = Repo.preload(source, :media_profile).media_profile
 
     MediaItem
     |> where([mi], mi.source_id == ^source.id and is_nil(mi.media_filepath))
     |> where(^build_format_clauses(media_profile))
+    |> Repo.maybe_limit(limit)
     |> Repo.all()
   end
 
@@ -55,9 +57,12 @@ defmodule Pinchflat.Media do
 
   Returns [%MediaItem{}, ...].
   """
-  def list_downloaded_media_items_for(%Source{} = source) do
+  def list_downloaded_media_items_for(%Source{} = source, opts \\ []) do
+    limit = Keyword.get(opts, :limit, nil)
+
     MediaItem
     |> where([mi], mi.source_id == ^source.id and not is_nil(mi.media_filepath))
+    |> Repo.maybe_limit(limit)
     |> Repo.all()
   end
 

lib/pinchflat/media_source/source.ex

@@ -7,6 +7,7 @@ defmodule Pinchflat.Sources.Source do
   import Ecto.Changeset
   import Pinchflat.Utils.ChangesetUtils
 
+  alias Pinchflat.Tasks.Task
   alias Pinchflat.Media.MediaItem
   alias Pinchflat.Profiles.MediaProfile
 
@@ -47,6 +48,7 @@ defmodule Pinchflat.Sources.Source do
 
     belongs_to :media_profile, MediaProfile
 
+    has_many :tasks, Task
     has_many :media_items, MediaItem, foreign_key: :source_id
 
     timestamps(type: :utc_datetime)

lib/pinchflat/repo.ex

@@ -3,6 +3,8 @@ defmodule Pinchflat.Repo do
     otp_app: :pinchflat,
     adapter: Ecto.Adapters.SQLite3
 
+  import Ecto.Query, warn: false
+
   @doc """
   It's not immediately obvious if an Oban job qualifies as unique, so this method
   attempts creating a job and checks for the `conflict?` field in the returned job.
@@ -16,4 +18,13 @@ defmodule Pinchflat.Repo do
       err -> err
     end
   end
+
+  @doc """
+  Applies a limit to a query if provided, otherwise returns the query as-is.
+
+  Returns %Ecto.Query{}.
+  """
+  def maybe_limit(query, limit) do
+    if limit, do: limit(query, ^limit), else: query
+  end
 end

lib/pinchflat_web.ex

@@ -88,6 +88,7 @@ defmodule PinchflatWeb do
       # Core UI components and translation
       import PinchflatWeb.Gettext
       import PinchflatWeb.CoreComponents
+      import PinchflatWeb.CustomComponents.TabComponents
       import PinchflatWeb.CustomComponents.TextComponents
       import PinchflatWeb.CustomComponents.TableComponents
       import PinchflatWeb.CustomComponents.ButtonComponents

lib/pinchflat_web/components/core_components.ex

@@ -587,6 +587,7 @@ defmodule PinchflatWeb.CoreComponents do
     attrs =
       Enum.filter(assigns.map, fn
         {_, %{__struct__: _}} -> false
+        {_, [%{__meta__: _} | _]} -> false
         _ -> true
       end)
 

lib/pinchflat_web/components/custom_components/tab_components.ex

@@ -0,0 +1,37 @@
+defmodule PinchflatWeb.CustomComponents.TabComponents do
+  @moduledoc false
+  use Phoenix.Component
+
+  @doc """
+  Takes a list of tabs and renders them in a tabbed layout.
+  """
+  slot :tab, required: true do
+    attr :title, :string, required: true
+  end
+
+  def tabbed_layout(assigns) do
+    ~H"""
+    <div
+      x-data="{ openTab: 0, activeClasses: 'text-meta-5 border-meta-5', inactiveClasses: 'border-transparent' }"
+      class="w-full"
+    >
+      <div class="mb-6 flex flex-wrap gap-5 border-b border-strokedark sm:gap-10">
+        <a
+          :for={{tab, idx} <- Enum.with_index(@tab)}
+          href="#"
+          @click.prevent={"openTab = #{idx}"}
+          x-bind:class={"openTab === #{idx} ? activeClasses : inactiveClasses"}
+          class="border-b-2 py-4 text-sm font-medium hover:text-meta-5 md:text-base"
+        >
+          <span class="text-xl"><%= tab.title %></span>
+        </a>
+      </div>
+      <div>
+        <div :for={{tab, idx} <- Enum.with_index(@tab)} x-show={"openTab === #{idx}"} class="font-medium leading-relaxed">
+          <%= render_slot(tab) %>
+        </div>
+      </div>
+    </div>
+    """
+  end
+end

lib/pinchflat_web/components/custom_components/text_components.ex

@@ -23,7 +23,7 @@ defmodule PinchflatWeb.CustomComponents.TextComponents do
   attr :href, :string, required: true
   slot :inner_block
 
-  def reference_link(assigns) do
+  def inline_link(assigns) do
     ~H"""
     <.link href={@href} target="_blank" class="text-blue-500 hover:text-blue-300">
       <%= render_slot(@inner_block) %>

lib/pinchflat_web/controllers/media_items/media_item_controller.ex

@@ -1,10 +1,14 @@
 defmodule PinchflatWeb.MediaItems.MediaItemController do
   use PinchflatWeb, :controller
 
+  alias Pinchflat.Repo
   alias Pinchflat.Media
 
   def show(conn, %{"id" => id}) do
-    media_item = Media.get_media_item!(id)
+    media_item =
+      id
+      |> Media.get_media_item!()
+      |> Repo.preload([:source, tasks: [:job]])
 
     render(conn, :show, media_item: media_item)
   end

lib/pinchflat_web/controllers/media_items/media_item_html/show.html.heex

@@ -8,23 +8,51 @@
     </h2>
   </div>
 </div>
-<div class="rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
+<div class="rounded-sm border border-stroke bg-white py-5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5">
   <div class="max-w-full overflow-x-auto">
-    <div class="flex flex-col gap-10 dark:text-white">
-      <h3 class="font-bold text-xl">Attributes</h3>
-      <.list_items_from_map map={Map.from_struct(@media_item)} />
-    </div>
+    <.tabbed_layout>
+      <:tab title="Attributes">
+        <div class="flex flex-col gap-10 dark:text-white">
+          <h3 class="font-bold text-xl">Attributes</h3>
+          <section>
+            <strong>Source:</strong>
+            <.inline_link href={~p"/sources/#{@media_item.source_id}"}>
+              <%= @media_item.source.friendly_name %>
+            </.inline_link>
+          </section>
 
-    <section class="flex justify-center my-10">
-      <.link
-        href={~p"/sources/#{@media_item.source_id}/media/#{@media_item}?delete_files=true"}
-        method="delete"
-        data-confirm="Are you sure you want to delete this record and all associated files on disk? This cannot be undone."
-      >
-        <.button color="bg-meta-1" rounding="rounded-full">
-          Delete Files
-        </.button>
-      </.link>
-    </section>
+          <.list_items_from_map map={Map.from_struct(@media_item)} />
+        </div>
+
+        <section class="flex justify-center my-10">
+          <.link
+            href={~p"/sources/#{@media_item.source_id}/media/#{@media_item}?delete_files=true"}
+            method="delete"
+            data-confirm="Are you sure you want to delete this record and all associated files on disk? This cannot be undone."
+          >
+            <.button color="bg-meta-1" rounding="rounded-full">
+              Delete Files
+            </.button>
+          </.link>
+        </section>
+      </:tab>
+      <:tab title="Tasks">
+        <%= if match?([_|_], @media_item.tasks) do %>
+          <.table rows={@media_item.tasks} table_class="text-black dark:text-white">
+            <:col :let={task} label="Worker">
+              <%= task.job.worker %>
+            </:col>
+            <:col :let={task} label="State">
+              <%= task.job.state %>
+            </:col>
+            <:col :let={task} label="Scheduled At">
+              <%= Calendar.strftime(task.job.scheduled_at, "%y-%m-%d %I:%M:%S %p %Z") %>
+            </:col>
+          </.table>
+        <% else %>
+          <p class="text-black dark:text-white">Nothing Here!</p>
+        <% end %>
+      </:tab>
+    </.tabbed_layout>
   </div>
 </div>

lib/pinchflat_web/controllers/media_profiles/media_profile_controller.ex

@@ -1,6 +1,7 @@
 defmodule PinchflatWeb.MediaProfiles.MediaProfileController do
   use PinchflatWeb, :controller
 
+  alias Pinchflat.Repo
   alias Pinchflat.Profiles
   alias Pinchflat.Profiles.MediaProfile
 
@@ -39,7 +40,11 @@ defmodule PinchflatWeb.MediaProfiles.MediaProfileController do
   end
 
   def show(conn, %{"id" => id}) do
-    media_profile = Profiles.get_media_profile!(id)
+    media_profile =
+      id
+      |> Profiles.get_media_profile!()
+      |> Repo.preload(:sources)
+
     render(conn, :show, media_profile: media_profile)
   end
 

lib/pinchflat_web/controllers/media_profiles/media_profile_html/output_template_help.html.heex

@@ -10,9 +10,9 @@
       </li>
       <li>
         <code class="text-sm">yt-dlp</code>-style
-        <.reference_link href="https://github.com/yt-dlp/yt-dlp?tab=readme-ov-file#output-template">
+        <.inline_link href="https://github.com/yt-dlp/yt-dlp?tab=readme-ov-file#output-template">
           <.icon name="hero-arrow-top-right-on-square" class="h-4 w-4" />
-        </.reference_link>:
+        </.inline_link>:
         <.inline_code>/%(channel)s/%(duration>%H-%M-%S)s-%(id)s.%(ext)s</.inline_code>
       </li>
       <li>
@@ -50,9 +50,9 @@
     <p>
       Any single-word <code class="text-sm">yt-dlp</code>
       option
-      <.reference_link href="https://github.com/yt-dlp/yt-dlp?tab=readme-ov-file#output-template">
+      <.inline_link href="https://github.com/yt-dlp/yt-dlp?tab=readme-ov-file#output-template">
         <.icon name="hero-arrow-top-right-on-square" class="h-4 w-4" />
-      </.reference_link>
+      </.inline_link>
       can be used with the curly braced liquid-style syntax.
       This is just a list of the most common options as well as some custom aliases
     </p>

lib/pinchflat_web/controllers/media_profiles/media_profile_html/show.html.heex

@@ -18,31 +18,50 @@
 </div>
 <div class="rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
   <div class="max-w-full overflow-x-auto">
-    <div class="flex flex-col gap-10 dark:text-white">
-      <h3 class="font-bold text-xl">Attributes for "<%= @media_profile.name %>"</h3>
-      <.list_items_from_map map={Map.from_struct(@media_profile)} />
-    </div>
+    <.tabbed_layout>
+      <:tab title="Attributes">
+        <div class="flex flex-col gap-10 text-white">
+          <h3 class="font-bold text-xl">Attributes for "<%= @media_profile.name %>"</h3>
+          <.list_items_from_map map={Map.from_struct(@media_profile)} />
+        </div>
 
-    <section class="flex flex-col md:flex-row items-center md:justify-around my-10">
-      <.link
-        href={~p"/media_profiles/#{@media_profile}"}
-        method="delete"
-        data-confirm="Are you sure you want to delete this profile and all its sources (leaving files in place)? This cannot be undone."
-      >
-        <.button color="bg-meta-1" rounding="rounded-full">
-          Delete Profile and its Sources
-        </.button>
-      </.link>
-      <.link
-        href={~p"/media_profiles/#{@media_profile}?delete_files=true"}
-        method="delete"
-        data-confirm="Are you sure you want to delete this profile, all its sources, and its files on disk? This cannot be undone."
-        class="mt-5 md:mt-0"
-      >
-        <.button color="bg-meta-1" rounding="rounded-full">
-          Delete Profile, Sources, and Files
-        </.button>
-      </.link>
-    </section>
+        <section class="flex flex-col md:flex-row items-center md:justify-around my-10">
+          <.link
+            href={~p"/media_profiles/#{@media_profile}"}
+            method="delete"
+            data-confirm="Are you sure you want to delete this profile and all its sources (leaving files in place)? This cannot be undone."
+          >
+            <.button color="bg-meta-1" rounding="rounded-full">
+              Delete Profile and its Sources
+            </.button>
+          </.link>
+          <.link
+            href={~p"/media_profiles/#{@media_profile}?delete_files=true"}
+            method="delete"
+            data-confirm="Are you sure you want to delete this profile, all its sources, and its files on disk? This cannot be undone."
+            class="mt-5 md:mt-0"
+          >
+            <.button color="bg-meta-1" rounding="rounded-full">
+              Delete Profile, Sources, and Files
+            </.button>
+          </.link>
+        </section>
+      </:tab>
+      <:tab title="Sources">
+        <.table rows={@media_profile.sources} table_class="text-black dark:text-white">
+          <:col :let={source} label="Name">
+            <%= source.friendly_name || source.collection_name %>
+          </:col>
+          <:col :let={source} label="Type"><%= source.collection_type %></:col>
+          <:col :let={source} label="Should Download?">
+            <.icon name={if source.download_media, do: "hero-check", else: "hero-x-mark"} />
+          </:col>
+          <:col :let={source} label="" class="flex place-content-evenly">
+            <.icon_link href={~p"/sources/#{source.id}"} icon="hero-eye" class="mx-1" />
+            <.icon_link href={~p"/sources/#{source.id}/edit"} icon="hero-pencil-square" class="mx-1" />
+          </:col>
+        </.table>
+      </:tab>
+    </.tabbed_layout>
   </div>
 </div>

lib/pinchflat_web/controllers/sources/source_controller.ex

@@ -54,10 +54,10 @@ defmodule PinchflatWeb.Sources.SourceController do
     source =
       id
       |> Sources.get_source!()
-      |> Repo.preload(:media_profile)
+      |> Repo.preload([:media_profile, tasks: [:job]])
 
-    pending_media = Media.list_pending_media_items_for(source)
-    downloaded_media = Media.list_downloaded_media_items_for(source)
+    pending_media = Media.list_pending_media_items_for(source, limit: 100)
+    downloaded_media = Media.list_downloaded_media_items_for(source, limit: 100)
 
     render(conn, :show, source: source, pending_media: pending_media, downloaded_media: downloaded_media)
   end

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

@@ -18,83 +18,89 @@
 </div>
 <div class="rounded-sm border border-stroke bg-white px-5 py-5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5">
   <div class="max-w-full overflow-x-auto">
-    <div class="flex flex-col gap-10 dark:text-white">
-      <h3 class="font-bold text-xl">Attributes for "<%= @source.friendly_name %>"</h3>
+    <.tabbed_layout>
+      <:tab title="Attributes">
+        <div class="flex flex-col gap-10 text-white">
+          <h3 class="font-bold text-lg">Attributes</h3>
+          <section>
+            <strong>Media Profile:</strong>
+            <.inline_link href={~p"/media_profiles/#{@source.media_profile_id}"}>
+              <%= @source.media_profile.name %>
+            </.inline_link>
+          </section>
 
-      <h3 class="font-bold text-lg">Relationships</h3>
-      <.list>
-        <:item title="media_profile">
+          <.list_items_from_map map={Map.from_struct(@source)} />
+        </div>
+
+        <section class="flex flex-col md:flex-row items-center md:justify-around mt-10">
           <.link
-            navigate={~p"/media_profiles/#{@source.media_profile_id}"}
-            class="hover:text-secondary duration-200 ease-in-out"
+            href={~p"/sources/#{@source}"}
+            method="delete"
+            data-confirm="Are you sure you want to delete this source (leaving files in place)? This cannot be undone."
           >
-            <%= @source.media_profile.name %>
+            <.button color="bg-meta-1" rounding="rounded-full">
+              Delete Source
+            </.button>
           </.link>
-        </:item>
-      </.list>
-
-      <h3 class="font-bold text-lg">Attributes</h3>
-      <.list_items_from_map map={Map.from_struct(@source)} />
-
-      <h3 class="font-bold text-xl">Downloaded Media</h3>
-      <%= if match?([_|_], @downloaded_media) do %>
-        <.table rows={@downloaded_media} table_class="text-black dark:text-white">
-          <:col :let={media_item} label="Title">
-            <%= StringUtils.truncate(media_item.title, 50) %>
-          </:col>
-          <:col :let={media_item} label="" class="flex place-content-evenly">
-            <.link
-              navigate={~p"/sources/#{@source.id}/media/#{media_item.id}"}
-              class="hover:text-secondary duration-200 ease-in-out mx-0.5"
-            >
-              <.icon name="hero-eye" />
-            </.link>
-          </:col>
-        </.table>
-      <% else %>
-        <p class="text-black dark:text-white">Nothing Here!</p>
-      <% end %>
-
-      <h3 class="font-bold text-xl">Pending Media</h3>
-      <%= if match?([_|_], @pending_media) do %>
-        <.table rows={@pending_media} table_class="text-black dark:text-white">
-          <:col :let={media_item} label="Title">
-            <%= StringUtils.truncate(media_item.title, 50) %>
-          </:col>
-          <:col :let={media_item} label="" class="flex place-content-evenly">
-            <.link
-              navigate={~p"/sources/#{@source.id}/media/#{media_item.id}"}
-              class="hover:text-secondary duration-200 ease-in-out mx-0.5"
-            >
-              <.icon name="hero-eye" />
-            </.link>
-          </:col>
-        </.table>
-      <% else %>
-        <p class="text-black dark:text-white">Nothing Here!</p>
-      <% end %>
-    </div>
-
-    <section class="flex flex-col md:flex-row items-center md:justify-around mt-10">
-      <.link
-        href={~p"/sources/#{@source}"}
-        method="delete"
-        data-confirm="Are you sure you want to delete this source (leaving files in place)? This cannot be undone."
-      >
-        <.button color="bg-meta-1" rounding="rounded-full">
-          Delete Source
-        </.button>
-      </.link>
-      <.link
-        href={~p"/sources/#{@source}?delete_files=true"}
-        method="delete"
-        data-confirm="Are you sure you want to delete this source and it's files on disk? This cannot be undone."
-        class="mt-5 md:mt-0"
-      >
-        <.button color="bg-meta-1" rounding="rounded-full">
-          Delete Source and Files
-        </.button>
-      </.link>
-    </section>
+          <.link
+            href={~p"/sources/#{@source}?delete_files=true"}
+            method="delete"
+            data-confirm="Are you sure you want to delete this source and it's files on disk? This cannot be undone."
+            class="mt-5 md:mt-0"
+          >
+            <.button color="bg-meta-1" rounding="rounded-full">
+              Delete Source and Files
+            </.button>
+          </.link>
+        </section>
+      </: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">
+              <%= StringUtils.truncate(media_item.title, 50) %>
+            </: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" />
+            </:col>
+          </.table>
+        <% else %>
+          <p class="text-black dark:text-white">Nothing Here!</p>
+        <% end %>
+      </: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</h4>
+          <.table rows={@downloaded_media} table_class="text-black dark:text-white">
+            <:col :let={media_item} label="Title">
+              <%= StringUtils.truncate(media_item.title, 50) %>
+            </: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" />
+            </:col>
+          </.table>
+        <% else %>
+          <p class="text-black dark:text-white">Nothing Here!</p>
+        <% end %>
+      </:tab>
+      <:tab title="Tasks">
+        <%= if match?([_|_], @source.tasks) do %>
+          <.table rows={@source.tasks} table_class="text-black dark:text-white">
+            <:col :let={task} label="Worker">
+              <%= task.job.worker %>
+            </:col>
+            <:col :let={task} label="State">
+              <%= task.job.state %>
+            </:col>
+            <:col :let={task} label="Scheduled At">
+              <%= Calendar.strftime(task.job.scheduled_at, "%y-%m-%d %I:%M:%S %p %Z") %>
+            </:col>
+          </.table>
+        <% else %>
+          <p class="text-black dark:text-white">Nothing Here!</p>
+        <% end %>
+      </:tab>
+    </.tabbed_layout>
   </div>
 </div>

test/pinchflat/media_test.exs

@@ -64,6 +64,14 @@ defmodule Pinchflat.MediaTest do
 
       assert Media.list_pending_media_items_for(source) == []
     end
+
+    test "optionally accepts a limit" do
+      source = source_fixture()
+      media_item = media_item_fixture(%{source_id: source.id, media_filepath: nil})
+
+      assert Media.list_pending_media_items_for(source, limit: 1) == [media_item]
+      assert Media.list_pending_media_items_for(source, limit: 0) == []
+    end
   end
 
   describe "list_pending_media_items_for/1 when testing shorts" do
@@ -196,6 +204,15 @@ defmodule Pinchflat.MediaTest do
 
       assert Media.list_downloaded_media_items_for(source) == [media_item]
     end
+
+    test "optionally accepts a limit" do
+      source = source_fixture()
+      _media_item = media_item_fixture(%{source_id: source.id, media_filepath: nil})
+      media_item = media_item_fixture(%{source_id: source.id, media_filepath: "/video/#{Faker.File.file_name(:video)}"})
+
+      assert Media.list_downloaded_media_items_for(source, limit: 1) == [media_item]
+      assert Media.list_downloaded_media_items_for(source, limit: 0) == []
+    end
   end
 
   describe "search/1" do

test/pinchflat/repo_test.exs

@@ -1,6 +1,9 @@
 defmodule Pinchflat.RepoTest do
   use Pinchflat.DataCase
+  import Pinchflat.ProfilesFixtures
 
+  alias Pinchflat.Repo
+  alias Pinchflat.Profiles.MediaProfile
   alias Pinchflat.JobFixtures.TestJobWorker
 
   describe "insert_unique_job/1" do
@@ -23,4 +26,30 @@ defmodule Pinchflat.RepoTest do
       assert {:error, _} = Pinchflat.Repo.insert_unique_job(%Ecto.Changeset{})
     end
   end
+
+  describe "maybe_limit/2" do
+    test "applies a limit if provided" do
+      media_profile_fixture()
+      media_profile_fixture()
+
+      result =
+        MediaProfile
+        |> Repo.maybe_limit(1)
+        |> Repo.aggregate(:count, :id)
+
+      assert result == 1
+    end
+
+    test "does not apply a limit if not provided" do
+      media_profile_fixture()
+      media_profile_fixture()
+
+      result =
+        MediaProfile
+        |> Repo.maybe_limit(nil)
+        |> Repo.aggregate(:count, :id)
+
+      assert result == 2
+    end
+  end
 end