Display records in artist page

lib/music_library_web/live/artist_live/show.ex

@@ -11,13 +11,22 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
   @impl true
   def handle_params(%{"musicbrainz_id" => musicbrainz_id}, _, socket) do
     artist = Records.get_artist!(musicbrainz_id)
-    {:ok, artist_info}  = Records.get_artist_info(musicbrainz_id)
+
+    grouped_artist_records =
+      musicbrainz_id
+      |> Records.get_artist_records()
+      |> group_and_sort()
 
     {:noreply,
      socket
      |> assign(:nav_section, :artists)
      |> assign(:artist, artist)
-     |> assign(:artist_info, artist_info)
+     |> assign(:artist_records, grouped_artist_records)
+     |> assign_async(:artist_info, fn ->
+       with {:ok, artist_info} <- Records.get_artist_info(musicbrainz_id) do
+         {:ok, %{artist_info: artist_info}}
+       end
+     end)
      |> assign(:page_title, page_title(socket.assigns.live_action, artist))}
   end
 
@@ -31,4 +40,13 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
       " "
     )
   end
+
+  defp group_and_sort(records) do
+    {collection, wishlist} = Enum.split_with(records, fn r -> r.purchased_at end)
+
+    %{
+      collection: Enum.sort_by(collection, fn r -> r.release end, :desc),
+      wishlist: Enum.sort_by(wishlist, fn r -> r.release end, :desc)
+    }
+  end
 end

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

@@ -1,8 +1,87 @@
-<div class="mt-4 px-4">
+<div class="mt-4 px-4 sm:px-6 lg:px-8">
-  <h1 class="mt-1 flex font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
+  <h1 class="mt-1 flex font-semibold text-base lg:text-2xl leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
     <%= @artist.name %>
   </h1>
-  <p class="bio mt-2 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
+  <p
-    <%= (@artist_info.bio || gettext("Biography not available")) |> raw() %>
+    :if={artist_info = @artist_info.ok? && @artist_info.result}
+    class="bio mt-2 text-sm leading-5 text-zinc-500 dark:text-zinc-400"
+  >
+    <%= (artist_info.bio || gettext("Biography not available")) |> raw() %>
   </p>
+
+  <div :if={@artist_records.collection !== []} class="mt-4">
+    <h2 class="font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
+      <%= gettext("Collection") %>
+    </h2>
+    <ul
+      role="list"
+      class="mt-4 grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8"
+    >
+      <li :for={record <- @artist_records.collection} class="relative">
+        <div class="group overflow-hidden rounded-lg bg-zinc-100 focus-within:ring-2 focus-within:ring-zinc-500 focus-within:ring-offset-2 focus-within:ring-offset-zinc-100">
+          <img
+            alt={record.title}
+            src={~p"/covers/#{record.id}?vsn=#{record.cover_hash || ""}"}
+            class="pointer-events-none aspect-square object-cover group-hover:opacity-75"
+          />
+          <button
+            type="button"
+            class="absolute inset-0 focus:outline-none"
+            phx-click={JS.navigate(~p"/collection/#{record}")}
+          >
+            <span class="sr-only"><%= gettext("View details") %></span>
+          </button>
+        </div>
+        <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-zinc-900 dark:text-zinc-300">
+          <%= record.title %>
+        </p>
+        <p class="pointer-events-none block text-sm font-medium text-zinc-500">
+          <%= Records.Record.format_long_label(record.format) %> · <%= Records.Record.type_long_label(
+            record.type
+          ) %>
+        </p>
+        <p class="pointer-events-none block text-sm font-medium text-zinc-500">
+          <%= Records.Record.format_release(record.release) %>
+        </p>
+      </li>
+    </ul>
+  </div>
+
+  <div :if={@artist_records.wishlist !== []} class="mt-4">
+    <h2 class="font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
+      <%= gettext("Wishlist") %>
+    </h2>
+    <ul
+      role="list"
+      class="mt-4 grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8"
+    >
+      <li :for={record <- @artist_records.wishlist} class="relative">
+        <div class="group overflow-hidden rounded-lg bg-zinc-100 focus-within:ring-2 focus-within:ring-zing-500 focus-within:ring-offset-2 focus-within:ring-offset-zinc-100">
+          <img
+            alt={record.title}
+            src={~p"/covers/#{record.id}?vsn=#{record.cover_hash || ""}"}
+            class="pointer-events-none aspect-square object-cover group-hover:opacity-75"
+          />
+          <button
+            type="button"
+            class="absolute inset-0 focus:outline-none"
+            phx-click={JS.navigate(~p"/wishlist/#{record}")}
+          >
+            <span class="sr-only"><%= gettext("View details") %></span>
+          </button>
+        </div>
+        <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-zinc-900 dark:text-zinc-300">
+          <%= record.title %>
+        </p>
+        <p class="pointer-events-none block text-sm font-medium text-zinc-500">
+          <%= Records.Record.format_long_label(record.format) %> · <%= Records.Record.type_long_label(
+            record.type
+          ) %>
+        </p>
+        <p class="pointer-events-none block text-sm font-medium text-zinc-500">
+          <%= Records.Record.format_release(record.release) %>
+        </p>
+      </li>
+    </ul>
+  </div>
 </div>

priv/gettext/default.pot

@@ -51,6 +51,7 @@ msgid "Choose a value"
 msgstr ""
 
 #: lib/music_library_web/components/layouts/app.html.heex:13
+#: lib/music_library_web/live/artist_live/show.html.heex:14
 #: lib/music_library_web/live/collection_live/index.ex:77
 #: lib/music_library_web/live/collection_live/show.ex:102
 #: lib/music_library_web/live/collection_live/show.ex:119
@@ -327,6 +328,7 @@ msgid "Welcome to your Music Library"
 msgstr ""
 
 #: lib/music_library_web/components/layouts/app.html.heex:19
+#: lib/music_library_web/live/artist_live/show.html.heex:52
 #: lib/music_library_web/live/wishlist_live/index.ex:75
 #: lib/music_library_web/live/wishlist_live/show.ex:102
 #, elixir-autogen, elixir-format
@@ -449,6 +451,7 @@ msgstr ""
 msgid "No MB ID"
 msgstr ""
 
+#: lib/music_library_web/live/artist_live/show.ex:38
 #: lib/music_library_web/live/collection_live/show.ex:100
 #, elixir-autogen, elixir-format
 msgid "Details"
@@ -473,3 +476,14 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Dev dashboard"
 msgstr ""
+
+#: lib/music_library_web/live/artist_live/show.html.heex:9
+#, elixir-autogen, elixir-format
+msgid "Biography not available"
+msgstr ""
+
+#: lib/music_library_web/live/artist_live/show.html.heex:32
+#: lib/music_library_web/live/artist_live/show.html.heex:70
+#, elixir-autogen, elixir-format
+msgid "View details"
+msgstr ""