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_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>