Add wishlist show

lib/music_library_web/live/wishlist_live/index.ex

@@ -60,7 +60,7 @@ defmodule MusicLibraryWeb.WishlistLive.Index do
       |> Map.take([:query, :page, :page_size])
       |> URI.encode_query()
 
-    {:noreply, push_patch(socket, to: ~s"/records?#{qs}")}
+    {:noreply, push_patch(socket, to: ~s"/wishlist?#{qs}")}
   end
 
   defp merge_query(record_list_params, query) do

lib/music_library_web/live/wishlist_live/index.html.heex

@@ -17,7 +17,7 @@
           autocapitalize="none"
         />
       </form>
-      <.link patch={~p"/records/import"}>
+      <.link patch={~p"/wishlist/import"}>
         <.button><%= gettext("Import") %></.button>
       </.link>
     </div>
@@ -35,7 +35,7 @@
 <ul class="divide-y divide-gray-100" role="list" id="records" phx-update="stream">
   <li
     :for={{id, record} <- @streams.records}
-    phx-click={JS.navigate(~p"/records/#{record}")}
+    phx-click={JS.navigate(~p"/wishlist/#{record}")}
     class="flex justify-between gap-x-6 py-5 hover:bg-gray-50 px-2 -mx-2 md:px-4 md:-mx-4 rounded-lg cursor-pointer"
     id={id}
   >
@@ -50,7 +50,7 @@
           <.link
             :for={artist <- record.artists}
             class="hover:text-zinc-500"
-            patch={~p"/records?query=mbid:#{artist.musicbrainz_id}"}
+            patch={~p"/wishlist?query=mbid:#{artist.musicbrainz_id}"}
           >
             <%= artist.name %>
           </.link>
@@ -120,7 +120,7 @@
             role="menuitem"
             tabindex="-1"
             id={"actions-#{record.id}-show"}
-            navigate={~p"/records/#{record}"}
+            navigate={~p"/wishlist/#{record}"}
           >
             <%= gettext("Show") %>
           </.link>
@@ -140,7 +140,7 @@
             role="menuitem"
             tabindex="-1"
             id={"actions-#{record.id}-edit"}
-            patch={~p"/records/#{record}/edit"}
+            patch={~p"/wishlist/#{record}/edit"}
           >
             <%= gettext("Edit") %>
           </.link>
@@ -161,25 +161,25 @@
   </li>
 </ul>
 
-<.modal :if={@live_action == :edit} id="record-modal" show on_cancel={JS.patch(~p"/records")}>
+<.modal :if={@live_action == :edit} id="record-modal" show on_cancel={JS.patch(~p"/wishlist")}>
   <.live_component
     module={MusicLibraryWeb.RecordLive.FormComponent}
     id={@record.id}
     title={@page_title}
     action={@live_action}
     record={@record}
-    patch={~p"/records"}
+    patch={~p"/wishlist"}
   />
 </.modal>
 
-<.modal :if={@live_action == :import} id="record-modal" show on_cancel={JS.patch(~p"/records")}>
+<.modal :if={@live_action == :import} id="record-modal" show on_cancel={JS.patch(~p"/wishlist")}>
   <.live_component
     module={MusicLibraryWeb.RecordLive.ImportComponent}
     id={:search}
     title={@page_title}
     action={@live_action}
     record={@record}
-    patch={~p"/records"}
+    patch={~p"/wishlist"}
     initial_query=""
   />
 </.modal>

lib/music_library_web/live/wishlist_live/show.ex

@@ -0,0 +1,55 @@
+defmodule MusicLibraryWeb.WishlistLive.Show do
+  use MusicLibraryWeb, :live_view
+
+  alias MusicLibrary.Records
+
+  @impl true
+  def mount(_params, _session, socket) do
+    back_url =
+      if connected?(socket) do
+        socket
+        |> get_connect_params()
+        |> Map.get("_live_referer", ~p"/records")
+      else
+        ~p"/records"
+      end
+
+    socket =
+      if static_changed?(socket) do
+        put_flash(socket, :warning, gettext("The application has been updated, please reload."))
+      else
+        socket
+      end
+
+    {:ok, assign(socket, :back_url, back_url)}
+  end
+
+  @impl true
+  def handle_params(%{"id" => id}, _, socket) do
+    {:noreply,
+     socket
+     |> assign(:nav_section, :records)
+     |> assign(:page_title, page_title(socket.assigns.live_action))
+     |> assign(:record, Records.get_record!(id))}
+  end
+
+  @impl true
+  def handle_event("delete", %{"id" => id}, socket) do
+    record = Records.get_record!(id)
+    {:ok, _} = Records.delete_record(record)
+
+    {:noreply, push_navigate(socket, to: ~p"/records")}
+  end
+
+  @impl true
+  def handle_info({MusicLibraryWeb.RecordLive.FormComponent, {:saved, record}}, socket) do
+    {:noreply, assign(socket, :record, record)}
+  end
+
+  defp page_title(:show), do: gettext("Show")
+  defp page_title(:edit), do: gettext("Edit")
+
+  defp musicbrainz_url(record) do
+    "https://musicbrainz.org/release-group/#{record.musicbrainz_id}"
+  end
+end

lib/music_library_web/live/wishlist_live/show.html.heex

@@ -0,0 +1,88 @@
+<.header>
+  <.link
+    :for={artist <- @record.artists}
+    class=" hover:text-gray-500"
+    patch={~p"/wishlist?query=mbid:#{artist.musicbrainz_id}"}
+  >
+    <%= artist.name %>
+  </.link>
+  <:subtitle>
+    <%= @record.title %>
+  </:subtitle>
+  <:actions>
+    <.link patch={~p"/wishlist/#{@record}/show/edit"} phx-click={JS.push_focus()}>
+      <.button>
+        <%= gettext("Edit") %>
+      </.button>
+    </.link>
+    <.link
+      phx-click={JS.push("delete", value: %{id: @record.id})}
+      data-confirm={gettext("Are you sure?")}
+    >
+      <.button class="!bg-red-900 hover:!bg-red-700">
+        <%= gettext("Delete") %>
+      </.button>
+    </.link>
+  </:actions>
+</.header>
+
+<div class="md:columns-2 mt-4">
+  <div class="relative block md:inline-block drop-shadow">
+    <img
+      class="w-full rounded-lg shadow"
+      src={~p"/covers/#{@record.id}?vsn=#{@record.cover_hash || ""}"}
+      alt={@record.title}
+    />
+    <span class="absolute right-2 bottom-1 block text-white drop-shadow-md">
+      <%= Records.Record.format_short_label(@record.format) %>
+    </span>
+  </div>
+
+  <.list>
+    <:item title={gettext("Type")}>
+      <span class="inline-flex items-center mr-2 rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10">
+        <%= @record.type %>
+      </span>
+    </:item>
+    <:item title={gettext("Musicbrainz ID")}>
+      <a href={musicbrainz_url(@record)}>
+        <code><%= @record.musicbrainz_id %></code>
+      </a>
+    </:item>
+    <:item title={gettext("Release")}>
+      <%= Records.Record.format_release(@record.release) %>
+    </:item>
+    <:item title={gettext("Genres")}>
+      <span
+        :for={genre <- @record.genres}
+        class="inline-flex items-center mr-2 mb-2 rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"
+      >
+        <%= genre %>
+      </span>
+    </:item>
+    <:item title={gettext("Inserted at")}><%= @record.inserted_at %></:item>
+    <:item title={gettext("Updated at")}><%= @record.updated_at %></:item>
+  </.list>
+</div>
+
+<div class="mt-8">
+  <.back navigate={@back_url}>
+    <%= gettext("Back to wishlist") %>
+  </.back>
+</div>
+
+<.modal
+  :if={@live_action == :edit}
+  id="record-modal"
+  show
+  on_cancel={JS.patch(~p"/wishlist/#{@record}")}
+>
+  <.live_component
+    module={MusicLibraryWeb.RecordLive.FormComponent}
+    id={@record.id}
+    title={@page_title}
+    action={@live_action}
+    record={@record}
+    patch={~p"/wishlist/#{@record}"}
+  />
+</.modal>

lib/music_library_web/router.ex

@@ -39,6 +39,7 @@ defmodule MusicLibraryWeb.Router do
       live "/records/:id/show/edit", RecordLive.Show, :edit
 
       live "/wishlist", WishlistLive.Index, :index
+      live "/wishlist/:id", WishlistLive.Show, :show
     end
   end