Add wishlist section with paginated list

lib/music_library/wishlist.ex

@@ -0,0 +1,61 @@
+defmodule MusicLibrary.Wishlist do
+  import Ecto.Query, warn: false
+
+  alias MusicLibrary.Repo
+  alias MusicLibrary.Records.{Record, SearchParser}
+
+  @fields [:id, :type, :artists, :format, :title, :release, :genres, :musicbrainz_id, :cover_hash]
+
+  def search_records(query, opts \\ []) do
+    limit = Keyword.get(opts, :limit, 20)
+    offset = Keyword.get(opts, :offset, 0)
+
+    search =
+      query
+      |> build_search()
+      |> limit(^limit)
+      |> offset(^offset)
+      |> select(^@fields)
+
+    Repo.all(search)
+  end
+
+  def search_records_count(query) do
+    search = build_search(query)
+
+    Repo.aggregate(search, :count)
+  end
+
+  defp build_search(query) do
+    {:ok, parsed_query} = SearchParser.parse(query)
+
+    base_search =
+      from r in Record,
+        where: is_nil(r.purchased_at),
+        order_by: [r.artists[0]["sort_name"], r.title]
+
+    Enum.reduce(parsed_query, base_search, fn
+      {:artist, artist}, search ->
+        search |> where([r], like(r.artists, ^"%#{artist}%"))
+
+      {:album, album}, search ->
+        search |> where([r], like(r.title, ^"%#{album}%"))
+
+      {:mbid, mbid}, search ->
+        search |> where([r], r.musicbrainz_id == ^mbid or like(r.artists, ^"%#{mbid}%"))
+
+      {:format, format}, search ->
+        search |> where([r], r.format == ^format)
+
+      {:type, type}, search ->
+        search |> where([r], r.type == ^type)
+
+      {:query, raw_query}, search ->
+        search
+        |> where(
+          [r],
+          like(r.title, ^"%#{raw_query}%") or like(r.artists, ^"%#{raw_query}%")
+        )
+    end)
+  end
+end

lib/music_library_web/components/layouts/app.html.heex

@@ -9,6 +9,9 @@
           <a href={~p"/records"} class={nav_link_class(assigns[:nav_section], :records)}>
             <%= gettext("Collection") %>
           </a>
+          <a href={~p"/wishlist"} class={nav_link_class(assigns[:nav_section], :wishlist)}>
+            <%= gettext("Wishlist") %>
+          </a>
         </div>
       </div>
       <div class="flex space-x-8">

lib/music_library_web/live/wishlist_live/index.ex

@@ -0,0 +1,99 @@
+defmodule MusicLibraryWeb.WishlistLive.Index do
+  use MusicLibraryWeb, :live_view
+  import MusicLibraryWeb.Pagination
+
+  alias MusicLibrary.Wishlist
+  alias MusicLibrary.Records
+
+  @default_records_list_params %{
+    query: "",
+    page: 1,
+    page_size: 100
+  }
+
+  @impl true
+  def mount(_params, _session, socket) do
+    socket =
+      if static_changed?(socket) do
+        put_flash(socket, :warning, gettext("The application has been updated, please reload."))
+      else
+        socket
+      end
+
+    {:ok, assign(socket, :nav_section, :wishlist)}
+  end
+
+  @impl true
+  def handle_params(params, _url, socket) do
+    {:noreply, apply_action(socket, socket.assigns.live_action, params)}
+  end
+
+  defp apply_action(socket, :index, params) do
+    query = params["query"] || ""
+    total_records = Wishlist.search_records_count(query)
+
+    record_list_params =
+      @default_records_list_params
+      |> merge_query(query)
+      |> merge_pagination(params, total_records)
+
+    offset = page_to_offset(record_list_params.page, record_list_params.page_size)
+    records = Wishlist.search_records(query, limit: record_list_params.page_size, offset: offset)
+
+    socket
+    |> assign(:page_title, gettext("Collection"))
+    |> assign(:record, nil)
+    |> assign(:record_list_params, record_list_params)
+    |> stream(:records, records, reset: true)
+  end
+
+  @impl true
+  def handle_info({MusicLibraryWeb.RecordLive.FormComponent, {:saved, record}}, socket) do
+    {:noreply, stream_insert(socket, :records, record)}
+  end
+
+  @impl true
+  def handle_event("search", %{"query" => query}, socket) do
+    qs =
+      @default_records_list_params
+      |> Map.put(:query, query)
+      |> Map.take([:query, :page, :page_size])
+      |> URI.encode_query()
+
+    {:noreply, push_patch(socket, to: ~s"/records?#{qs}")}
+  end
+
+  defp merge_query(record_list_params, query) do
+    Map.put(record_list_params, :query, query)
+  end
+
+  defp merge_pagination(record_list_params, params, total_records) do
+    record_list_params
+    |> Map.put(:page, parse_int_or_default(params["page"], record_list_params.page))
+    |> Map.put(
+      :page_size,
+      parse_int_or_default(params["page_size"], record_list_params.page_size)
+    )
+    |> Map.put(:total_entries, total_records)
+  end
+
+  defp parse_int_or_default(nil, default), do: default
+
+  defp parse_int_or_default(value, _default) when is_binary(value) do
+    String.to_integer(value)
+  end
+
+  defp musicbrainz_url(record) do
+    "https://musicbrainz.org/release-group/#{record.musicbrainz_id}"
+  end
+
+  defp toggle_actions_menu(record_id) do
+    JS.toggle(to: "#actions-#{record_id}")
+    |> JS.toggle_class("pointer-events-none", to: "#records > li")
+  end
+
+  def close_actions_menu(record_id) do
+    JS.hide(to: "#actions-#{record_id}")
+    |> JS.remove_class("pointer-events-none", to: "#records > li")
+  end
+end

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

@@ -0,0 +1,187 @@
+<div>
+  <header class="gap-6 mb-2">
+    <h1 class="text-lg font-semibold leading-8 text-zinc-800">
+      <%= gettext("All Records") %>
+    </h1>
+    <div class="flex items-center justify-between gap-6 mb-2 mt-2">
+      <form class="w-2/3" for={@record_list_params.query} phx-submit="search" phx-change="search">
+        <input
+          type="search"
+          class="w-full rounded-lg text-zinc-900 border-gray-300 focus:border-zinc-400 focus:ring-0 text-sm leading-6"
+          id={:query}
+          name={:query}
+          value={@record_list_params.query}
+          placeholder={gettext("Search")}
+          phx-debounce="500"
+          autocorrect="off"
+          autocapitalize="none"
+        />
+      </form>
+      <.link patch={~p"/records/import"}>
+        <.button><%= gettext("Import") %></.button>
+      </.link>
+    </div>
+  </header>
+
+  <p class="text-right text-base max-sm:text-xs mt-8">
+    <%= gettext(
+      "Showing <b>%{visible}</b> of <b>%{total}</b> records",
+      %{visible: Enum.count(@streams.records), total: @record_list_params.total_entries}
+    )
+    |> raw() %>
+  </p>
+</div>
+
+<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}")}
+    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}
+  >
+    <div class="flex min-w-0 gap-x-4 items-center">
+      <img
+        class="w-20 flex-none rounded-lg"
+        alt={record.title}
+        src={~p"/covers/#{record.id}?vsn=#{record.cover_hash || ""}"}
+      />
+      <div class="min-w-0 flex-auto">
+        <h1 class="text-sm leading-6 text-zinc-700">
+          <.link
+            :for={artist <- record.artists}
+            class="hover:text-zinc-500"
+            patch={~p"/records?query=mbid:#{artist.musicbrainz_id}"}
+          >
+            <%= artist.name %>
+          </.link>
+        </h1>
+        <h2 class="mt-1 flex font-semibold text-sm sm:text-base leading-5 text-zinc-700 text-wrap">
+          <%= record.title %>
+        </h2>
+        <p class="mt-1 text-xs leading-5 text-gray-500">
+          <%= Records.Record.format_release(record.release) %>
+          <span class="sm:hidden">
+            · <%= Records.Record.format_long_label(record.format) %> · <%= Records.Record.type_long_label(
+              record.type
+            ) %>
+          </span>
+        </p>
+      </div>
+    </div>
+    <div class="flex shrink-0 items-center gap-x-6">
+      <div class="hidden sm:flex sm:flex-col sm:items-end">
+        <p class="text-sm leading-6 text-gray-900">
+          <%= Records.Record.format_long_label(record.format) %>
+          <%= Records.Record.type_long_label(record.type) %>
+        </p>
+      </div>
+      <div class="relative flex-none">
+        <button
+          type="button"
+          class="-m-2.5 block p-2.5 text-gray-500 hover:text-gray-900"
+          aria-expanded="false"
+          aria-haspopup="true"
+          phx-click={toggle_actions_menu(record.id)}
+          phx-click-away={close_actions_menu(record.id)}
+        >
+          <span class="sr-only"><%= gettext("Open options") %></span>
+          <svg
+            class="h-5 w-5"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+            data-slot="icon"
+          >
+            <path d="M10 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM11.5 15.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z" />
+          </svg>
+        </button>
+        <!--
+          Dropdown menu, show/hide based on menu state.
+
+          Entering: "transition ease-out duration-100"
+            From: "transform opacity-0 scale-95"
+            To: "transform opacity-100 scale-100"
+          Leaving: "transition ease-in duration-75"
+            From: "transform opacity-100 scale-100"
+            To: "transform opacity-0 scale-95"
+        -->
+        <.focus_wrap
+          id={"actions-#{record.id}"}
+          class={[
+            "hidden pointer-events-auto absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none"
+          ]}
+          role="menu"
+          aria-orientation="vertical"
+          aria-labelledby="options-menu-0-button"
+          tabindex="-1"
+        >
+          <.link
+            class="block px-3 py-1 text-sm leading-6 text-gray-900 hover:bg-gray-50"
+            role="menuitem"
+            tabindex="-1"
+            id={"actions-#{record.id}-show"}
+            navigate={~p"/records/#{record}"}
+          >
+            <%= gettext("Show") %>
+          </.link>
+          <a
+            href={musicbrainz_url(record)}
+            target=".blank"
+            class="block px-3 py-1 text-sm leading-6 text-gray-900  hover:bg-gray-50"
+            role="menuitem"
+            tabindex="-1"
+            id={"actions-#{record.id}-musicbrainz"}
+          >
+            <%= gettext("View on MusicBrainz") %>
+          </a>
+
+          <.link
+            class="block px-3 py-1 text-sm leading-6 text-gray-900  hover:bg-gray-50"
+            role="menuitem"
+            tabindex="-1"
+            id={"actions-#{record.id}-edit"}
+            patch={~p"/records/#{record}/edit"}
+          >
+            <%= gettext("Edit") %>
+          </.link>
+
+          <.link
+            class="block px-3 py-1 text-sm leading-6 text-red-900  hover:bg-red-50"
+            role="menuitem"
+            tabindex="-1"
+            id={"actions-#{record.id}-delete"}
+            phx-click={JS.push("delete", value: %{id: record.id}) |> hide("##{id}")}
+            data-confirm={gettext("Are you sure?")}
+          >
+            <%= gettext("Delete") %>
+          </.link>
+        </.focus_wrap>
+      </div>
+    </div>
+  </li>
+</ul>
+
+<.modal :if={@live_action == :edit} id="record-modal" show on_cancel={JS.patch(~p"/records")}>
+  <.live_component
+    module={MusicLibraryWeb.RecordLive.FormComponent}
+    id={@record.id}
+    title={@page_title}
+    action={@live_action}
+    record={@record}
+    patch={~p"/records"}
+  />
+</.modal>
+
+<.modal :if={@live_action == :import} id="record-modal" show on_cancel={JS.patch(~p"/records")}>
+  <.live_component
+    module={MusicLibraryWeb.RecordLive.ImportComponent}
+    id={:search}
+    title={@page_title}
+    action={@live_action}
+    record={@record}
+    patch={~p"/records"}
+    initial_query=""
+  />
+</.modal>
+
+<.pagination id={:bottom_pagination} pagination_params={@record_list_params} />

lib/music_library_web/router.ex

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