Enable new actions menu on wishlist detail page
This commit is contained in:
Claudio Ortolina
@@ -118,17 +118,6 @@
|
||||
{gettext("Populate genres")}
|
||||
</.link>
|
||||
|
||||
<.link
|
||||
:if={!@record.purchased_at}
|
||||
class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id={"actions-#{@record.id}-purchase"}
|
||||
phx-click={JS.push("purchase", value: %{id: @record.id})}
|
||||
>
|
||||
{gettext("Purchase")}
|
||||
</.link>
|
||||
|
||||
<.link
|
||||
class="block px-3 py-1 text-sm leading-6 text-red-900 hover:bg-red-50 dark:text-red-700 dark:hover:bg-red-900/30 dark:hover:text-red-600"
|
||||
role="menuitem"
|
||||
|
||||
@@ -103,6 +103,22 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
|
||||
end
|
||||
end
|
||||
|
||||
def handle_event("purchase", %{"id" => id}, socket) do
|
||||
record = Records.get_record!(id)
|
||||
current_time = DateTime.utc_now()
|
||||
|
||||
case Records.update_record(record, %{"purchased_at" => current_time}) do
|
||||
{:ok, _} ->
|
||||
{:noreply,
|
||||
socket
|
||||
|> put_flash(:info, gettext("Record updated successfully"))
|
||||
|> push_navigate(to: ~p"/wishlist")}
|
||||
|
||||
{:error, %Ecto.Changeset{} = changeset} ->
|
||||
{:noreply, assign(socket, form: to_form(changeset))}
|
||||
end
|
||||
end
|
||||
|
||||
@impl true
|
||||
def handle_info({MusicLibraryWeb.RecordLive.FormComponent, {:saved, record}}, socket) do
|
||||
{:noreply, assign(socket, :record, record)}
|
||||
@@ -131,4 +147,14 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
|
||||
defp human_datetime(dt) do
|
||||
"#{dt.day}/#{dt.month}/#{dt.year}"
|
||||
end
|
||||
|
||||
defp toggle_actions_menu(record_id) do
|
||||
JS.toggle(to: "#actions-#{record_id}")
|
||||
|> JS.toggle_class("pointer-events-none", to: "#records > li")
|
||||
end
|
||||
|
||||
defp close_actions_menu(record_id) do
|
||||
JS.hide(to: "#actions-#{record_id}")
|
||||
|> JS.remove_class("pointer-events-none", to: "#records > li")
|
||||
end
|
||||
end
|
||||
|
||||
@@ -7,79 +7,152 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 md:mt-0">
|
||||
<h1 class="text-base font-medium leading-6 text-zinc-700">
|
||||
<.link
|
||||
:for={artist <- @record.artists}
|
||||
class="text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
|
||||
navigate={~p"/artists/#{artist.musicbrainz_id}"}
|
||||
<div class="mt-4 md:mt-0 flex justify-between">
|
||||
<div>
|
||||
<h1 class="text-base font-medium leading-6 text-zinc-700">
|
||||
<.link
|
||||
:for={artist <- @record.artists}
|
||||
class="text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
|
||||
navigate={~p"/artists/#{artist.musicbrainz_id}"}
|
||||
>
|
||||
{artist.name}
|
||||
</.link>
|
||||
</h1>
|
||||
<h2 class="mt-1 flex font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
|
||||
{@record.title}
|
||||
</h2>
|
||||
<p class="mt-2 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
|
||||
{Records.Record.format_release(@record.release)} · {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="text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-300"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
phx-click={toggle_actions_menu(@record.id)}
|
||||
>
|
||||
{artist.name}
|
||||
</.link>
|
||||
</h1>
|
||||
<h2 class="mt-1 flex font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
|
||||
{@record.title}
|
||||
</h2>
|
||||
<p class="mt-2 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
|
||||
{Records.Record.format_release(@record.release)} · {Records.Record.format_long_label(
|
||||
@record.format
|
||||
)} · {Records.Record.type_long_label(@record.type)}
|
||||
</p>
|
||||
<!-- TODO: extract to a component -->
|
||||
<nav class="mt-3 sm:mt-5 isolate inline-flex rounded-md shadow-sm">
|
||||
<.link patch={~p"/wishlist/#{@record}/show/edit"} phx-click={JS.push_focus()}>
|
||||
<.button type="button" class="relative inline-flex items-center rounded-r-none">
|
||||
<span class="sr-only">{gettext("Open options")}</span>
|
||||
<.icon
|
||||
name="hero-ellipsis-vertical"
|
||||
class="-mt-1 h-5 w-5"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
</button>
|
||||
<.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 dark:bg-zinc-800 py-2 shadow-lg ring-1 ring-zinc-900/5 focus:outline-none"
|
||||
]}
|
||||
role="menu"
|
||||
aria-orientation="vertical"
|
||||
aria-labelledby="options-menu-0-button"
|
||||
tabindex="-1"
|
||||
phx-click-away={close_actions_menu(@record.id)}
|
||||
>
|
||||
<.link
|
||||
class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id={"actions-#{@record.id}-edit"}
|
||||
patch={~p"/wishlist/#{@record}/show/edit"}
|
||||
>
|
||||
<.icon
|
||||
name="hero-pencil-square"
|
||||
class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
{gettext("Edit")}
|
||||
</.button>
|
||||
</.link>
|
||||
<.link phx-click={JS.push("refresh_cover", value: %{id: @record.id})}>
|
||||
<.button type="button" class="relative -ml-px inline-flex items-center rounded-none">
|
||||
<span class="sr-only">{gettext("Refresh")}</span>
|
||||
</.link>
|
||||
|
||||
<.link
|
||||
class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id={"actions-#{@record.id}-refresh-cover"}
|
||||
phx-click={JS.push("refresh_cover", value: %{id: @record.id})}
|
||||
>
|
||||
<.icon
|
||||
name="hero-photo"
|
||||
class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
{gettext("Refresh cover")}
|
||||
</.link>
|
||||
|
||||
<.link
|
||||
class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id={"actions-#{@record.id}-refresh-mb-data"}
|
||||
phx-click={JS.push("refresh_musicbrainz_data", value: %{id: @record.id})}
|
||||
>
|
||||
<.icon
|
||||
name="hero-arrow-path"
|
||||
class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
{gettext("Cover")}
|
||||
</.button>
|
||||
</.link>
|
||||
<.link phx-click={JS.push("refresh_musicbrainz_data", value: %{id: @record.id})}>
|
||||
<.button type="button" class="relative -ml-px inline-flex items-center rounded-none">
|
||||
<span class="sr-only">{gettext("Refresh")}</span>
|
||||
<.icon
|
||||
name="hero-arrow-path"
|
||||
class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
{gettext("MB Data")}
|
||||
</.button>
|
||||
</.link>
|
||||
<.link phx-click={JS.push("populate_genres", value: %{id: @record.id})}>
|
||||
<.button type="button" class="relative -ml-px inline-flex items-center rounded-none">
|
||||
<span class="sr-only">{gettext("Populate")}</span>
|
||||
{gettext("Refresh MB data")}
|
||||
</.link>
|
||||
|
||||
<.link
|
||||
class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id={"actions-#{@record.id}-populate-genres"}
|
||||
phx-click={JS.push("populate_genres", value: %{id: @record.id})}
|
||||
>
|
||||
<.icon
|
||||
name="hero-sparkles"
|
||||
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
{gettext("Genres")}
|
||||
</.button>
|
||||
</.link>
|
||||
<.link
|
||||
phx-click={JS.push("delete", value: %{id: @record.id})}
|
||||
data-confirm={gettext("Are you sure?")}
|
||||
>
|
||||
<.button
|
||||
type="button"
|
||||
class="relative -ml-px inline-flex items-center rounded-l-none !text-red-600 hover:!text-red-500 dark:!text-red-700 hover:dark:!text-red-500"
|
||||
{gettext("Populate genres")}
|
||||
</.link>
|
||||
|
||||
<.link
|
||||
:if={!@record.purchased_at}
|
||||
class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id={"actions-#{@record.id}-purchase"}
|
||||
phx-click={JS.push("purchase", value: %{id: @record.id})}
|
||||
>
|
||||
<.icon
|
||||
name="hero-banknotes"
|
||||
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
{gettext("Purchase")}
|
||||
</.link>
|
||||
|
||||
<.link
|
||||
class="block px-3 py-1 text-sm leading-6 text-red-900 hover:bg-red-50 dark:text-red-700 dark:hover:bg-red-900/30 dark:hover:text-red-600"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id={"actions-#{@record.id}-delete"}
|
||||
phx-click={JS.push("delete", value: %{id: @record.id})}
|
||||
data-confirm={gettext("Are you sure?")}
|
||||
>
|
||||
<.icon
|
||||
name="hero-trash"
|
||||
class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
{gettext("Delete")}
|
||||
</.button>
|
||||
</.link>
|
||||
</nav>
|
||||
</.link>
|
||||
</.focus_wrap>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user