cloud/music_library
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enable new actions menu on wishlist detail page

Browse Source
This commit is contained in:
Claudio Ortolina
2024-12-12 20:23:48 +03:00
parent c3f973b1e1
commit ed86ef7b5a
4 changed files with 187 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/live/collection_live/show.html.heex
-11
View File
@@ -118,17 +118,6 @@
{gettext("Populate genres")} {gettext("Populate genres")}
</.link> </.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 <.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" 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" role="menuitem"
lib/music_library_web/live/wishlist_live/show.ex
+26
View File
@@ -103,6 +103,22 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
end end
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 @impl true
def handle_info({MusicLibraryWeb.RecordLive.FormComponent, {:saved, record}}, socket) do def handle_info({MusicLibraryWeb.RecordLive.FormComponent, {:saved, record}}, socket) do
{:noreply, assign(socket, :record, record)} {:noreply, assign(socket, :record, record)}
@@ -131,4 +147,14 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
defp human_datetime(dt) do defp human_datetime(dt) do
"#{dt.day}/#{dt.month}/#{dt.year}" "#{dt.day}/#{dt.month}/#{dt.year}"
end 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 end
lib/music_library_web/live/wishlist_live/show.html.heex
+130 -57
View File
@@ -7,79 +7,152 @@
/> />
</div> </div>
<div class="mt-4 md:mt-0"> <div class="mt-4 md:mt-0 flex justify-between">
<h1 class="text-base font-medium leading-6 text-zinc-700"> <div>
<.link <h1 class="text-base font-medium leading-6 text-zinc-700">
:for={artist <- @record.artists} <.link
class="text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300" :for={artist <- @record.artists}
navigate={~p"/artists/#{artist.musicbrainz_id}"} 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} <span class="sr-only">{gettext("Open options")}</span>
</.link> <.icon
</h1> name="hero-ellipsis-vertical"
<h2 class="mt-1 flex font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300 text-wrap"> class="-mt-1 h-5 w-5"
{@record.title} aria-hidden="true"
</h2> data-slot="icon"
<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( </button>
@record.format <.focus_wrap
)} · {Records.Record.type_long_label(@record.type)} id={"actions-#{@record.id}"}
</p> class={[
<!-- TODO: extract to a component --> "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"
<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()}> role="menu"
<.button type="button" class="relative inline-flex items-center rounded-r-none"> 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")} {gettext("Edit")}
</.button> </.link>
</.link>
<.link phx-click={JS.push("refresh_cover", value: %{id: @record.id})}> <.link
<.button type="button" class="relative -ml-px inline-flex items-center rounded-none"> 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"
<span class="sr-only">{gettext("Refresh")}</span> 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 <.icon
name="hero-arrow-path" name="hero-arrow-path"
class="h-4 w-4 mr-1 phx-click-loading:animate-spin" class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
aria-hidden="true" aria-hidden="true"
data-slot="icon" data-slot="icon"
/> />
{gettext("Cover")} {gettext("Refresh MB data")}
</.button> </.link>
</.link>
<.link phx-click={JS.push("refresh_musicbrainz_data", value: %{id: @record.id})}> <.link
<.button type="button" class="relative -ml-px inline-flex items-center rounded-none"> 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"
<span class="sr-only">{gettext("Refresh")}</span> role="menuitem"
<.icon tabindex="-1"
name="hero-arrow-path" id={"actions-#{@record.id}-populate-genres"}
class="h-4 w-4 mr-1 phx-click-loading:animate-spin" phx-click={JS.push("populate_genres", value: %{id: @record.id})}
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>
<.icon <.icon
name="hero-sparkles" name="hero-sparkles"
class="h-4 w-4 mr-1 phx-click-loading:animate-shake" class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
aria-hidden="true" aria-hidden="true"
data-slot="icon" data-slot="icon"
/> />
{gettext("Genres")} {gettext("Populate genres")}
</.button> </.link>
</.link>
<.link <.link
phx-click={JS.push("delete", value: %{id: @record.id})} :if={!@record.purchased_at}
data-confirm={gettext("Are you sure?")} 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"
<.button tabindex="-1"
type="button" id={"actions-#{@record.id}-purchase"}
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" 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")} {gettext("Delete")}
</.button> </.link>
</.link> </.focus_wrap>
</nav> </div>
</div> </div>
<div> <div>
priv/gettext/default.pot
+31 -48
View File
@@ -17,8 +17,8 @@ msgid "Actions"
msgstr "" msgstr ""
#: lib/music_library_web/components/record_components.ex:179 #: lib/music_library_web/components/record_components.ex:179
#: lib/music_library_web/live/collection_live/show.html.heex:138 #: lib/music_library_web/live/collection_live/show.html.heex:127
#: lib/music_library_web/live/wishlist_live/show.html.heex:73 #: lib/music_library_web/live/wishlist_live/show.html.heex:144
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Are you sure?" msgid "Are you sure?"
msgstr "" msgstr ""
@@ -28,12 +28,12 @@ msgstr ""
msgid "Attempting to reconnect" msgid "Attempting to reconnect"
msgstr "" msgstr ""
#: lib/music_library_web/live/collection_live/show.html.heex:240 #: lib/music_library_web/live/collection_live/show.html.heex:229
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Back to records" msgid "Back to records"
msgstr "" msgstr ""
#: lib/music_library_web/live/wishlist_live/show.html.heex:166 #: lib/music_library_web/live/wishlist_live/show.html.heex:239
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Back to wishlist" msgid "Back to wishlist"
msgstr "" msgstr ""
@@ -64,8 +64,8 @@ msgid "Cover art"
msgstr "" msgstr ""
#: lib/music_library_web/components/record_components.ex:181 #: lib/music_library_web/components/record_components.ex:181
#: lib/music_library_web/live/collection_live/show.html.heex:146 #: lib/music_library_web/live/collection_live/show.html.heex:135
#: lib/music_library_web/live/wishlist_live/show.html.heex:79 #: lib/music_library_web/live/wishlist_live/show.html.heex:152
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Delete" msgid "Delete"
msgstr "" msgstr ""
@@ -73,8 +73,8 @@ msgstr ""
#: lib/music_library_web/components/record_components.ex:159 #: lib/music_library_web/components/record_components.ex:159
#: lib/music_library_web/live/collection_live/show.ex:148 #: lib/music_library_web/live/collection_live/show.ex:148
#: lib/music_library_web/live/collection_live/show.html.heex:70 #: lib/music_library_web/live/collection_live/show.html.heex:70
#: lib/music_library_web/live/wishlist_live/show.ex:129 #: lib/music_library_web/live/wishlist_live/show.ex:145
#: lib/music_library_web/live/wishlist_live/show.html.heex:32 #: lib/music_library_web/live/wishlist_live/show.html.heex:70
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Edit" msgid "Edit"
msgstr "" msgstr ""
@@ -102,9 +102,8 @@ msgstr ""
msgid "Formats" msgid "Formats"
msgstr "" msgstr ""
#: lib/music_library_web/live/collection_live/show.html.heex:156 #: lib/music_library_web/live/collection_live/show.html.heex:145
#: lib/music_library_web/live/wishlist_live/show.html.heex:68 #: lib/music_library_web/live/wishlist_live/show.html.heex:163
#: lib/music_library_web/live/wishlist_live/show.html.heex:90
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Genres" msgid "Genres"
msgstr "" msgstr ""
@@ -120,8 +119,8 @@ msgstr ""
msgid "Import" msgid "Import"
msgstr "" msgstr ""
#: lib/music_library_web/live/collection_live/show.html.heex:215 #: lib/music_library_web/live/collection_live/show.html.heex:204
#: lib/music_library_web/live/wishlist_live/show.html.heex:141 #: lib/music_library_web/live/wishlist_live/show.html.heex:214
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Inserted at" msgid "Inserted at"
msgstr "" msgstr ""
@@ -147,9 +146,9 @@ msgstr ""
msgid "Logout" msgid "Logout"
msgstr "" msgstr ""
#: lib/music_library_web/live/collection_live/show.html.heex:170 #: lib/music_library_web/live/collection_live/show.html.heex:159
#: lib/music_library_web/live/record_live/form_component.ex:47 #: lib/music_library_web/live/record_live/form_component.ex:47
#: lib/music_library_web/live/wishlist_live/show.html.heex:104 #: lib/music_library_web/live/wishlist_live/show.html.heex:177
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "MusicBrainz ID" msgid "MusicBrainz ID"
msgstr "" msgstr ""
@@ -172,6 +171,7 @@ msgstr ""
#: lib/music_library_web/components/record_components.ex:104 #: lib/music_library_web/components/record_components.ex:104
#: lib/music_library_web/live/collection_live/show.html.heex:38 #: lib/music_library_web/live/collection_live/show.html.heex:38
#: lib/music_library_web/live/wishlist_live/show.html.heex:38
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Open options" msgid "Open options"
msgstr "" msgstr ""
@@ -188,7 +188,7 @@ msgid "Previous"
msgstr "" msgstr ""
#: lib/music_library_web/components/record_components.ex:170 #: lib/music_library_web/components/record_components.ex:170
#: lib/music_library_web/live/collection_live/show.html.heex:129 #: lib/music_library_web/live/wishlist_live/show.html.heex:135
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Purchase" msgid "Purchase"
msgstr "" msgstr ""
@@ -198,7 +198,7 @@ msgstr ""
msgid "Purchased at" msgid "Purchased at"
msgstr "" msgstr ""
#: lib/music_library_web/live/collection_live/show.html.heex:192 #: lib/music_library_web/live/collection_live/show.html.heex:181
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Purchased on" msgid "Purchased on"
msgstr "" msgstr ""
@@ -211,6 +211,7 @@ msgstr ""
#: lib/music_library_web/live/record_live/form_component.ex:123 #: lib/music_library_web/live/record_live/form_component.ex:123
#: lib/music_library_web/live/wishlist_live/index.ex:141 #: lib/music_library_web/live/wishlist_live/index.ex:141
#: lib/music_library_web/live/wishlist_live/show.ex:114
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Record updated successfully" msgid "Record updated successfully"
msgstr "" msgstr ""
@@ -248,7 +249,7 @@ msgstr ""
#: lib/music_library_web/components/record_components.ex:139 #: lib/music_library_web/components/record_components.ex:139
#: lib/music_library_web/live/collection_live/show.ex:147 #: lib/music_library_web/live/collection_live/show.ex:147
#: lib/music_library_web/live/wishlist_live/show.ex:128 #: lib/music_library_web/live/wishlist_live/show.ex:144
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Show" msgid "Show"
msgstr "" msgstr ""
@@ -303,8 +304,8 @@ msgstr ""
msgid "Types" msgid "Types"
msgstr "" msgstr ""
#: lib/music_library_web/live/collection_live/show.html.heex:223 #: lib/music_library_web/live/collection_live/show.html.heex:212
#: lib/music_library_web/live/wishlist_live/show.html.heex:149 #: lib/music_library_web/live/wishlist_live/show.html.heex:222
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Updated at" msgid "Updated at"
msgstr "" msgstr ""
@@ -327,7 +328,7 @@ msgstr ""
#: lib/music_library_web/components/layouts/app.html.heex:20 #: lib/music_library_web/components/layouts/app.html.heex:20
#: lib/music_library_web/live/artist_live/show.html.heex:100 #: lib/music_library_web/live/artist_live/show.html.heex:100
#: lib/music_library_web/live/wishlist_live/index.ex:76 #: lib/music_library_web/live/wishlist_live/index.ex:76
#: lib/music_library_web/live/wishlist_live/show.ex:122 #: lib/music_library_web/live/wishlist_live/show.ex:138
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Wishlist" msgid "Wishlist"
msgstr "" msgstr ""
@@ -343,14 +344,14 @@ msgstr ""
msgid "close" msgid "close"
msgstr "" msgstr ""
#: lib/music_library_web/live/collection_live/show.html.heex:180 #: lib/music_library_web/live/collection_live/show.html.heex:169
#: lib/music_library_web/live/wishlist_live/show.html.heex:114 #: lib/music_library_web/live/wishlist_live/show.html.heex:187
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Copy MusicBrainz ID to clipboard" msgid "Copy MusicBrainz ID to clipboard"
msgstr "" msgstr ""
#: lib/music_library_web/live/collection_live/show.html.heex:234 #: lib/music_library_web/live/collection_live/show.html.heex:223
#: lib/music_library_web/live/wishlist_live/show.html.heex:160 #: lib/music_library_web/live/wishlist_live/show.html.heex:233
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "MusicBrainz data" msgid "MusicBrainz data"
msgstr "" msgstr ""
@@ -382,8 +383,8 @@ msgstr ""
msgid "Number of included records" msgid "Number of included records"
msgstr "" msgstr ""
#: lib/music_library_web/live/collection_live/show.html.heex:203 #: lib/music_library_web/live/collection_live/show.html.heex:192
#: lib/music_library_web/live/wishlist_live/show.html.heex:129 #: lib/music_library_web/live/wishlist_live/show.html.heex:202
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Includes" msgid "Includes"
msgstr "" msgstr ""
@@ -411,22 +412,6 @@ msgstr ""
msgid "Cover refreshed successfully" msgid "Cover refreshed successfully"
msgstr "" msgstr ""
#: lib/music_library_web/live/wishlist_live/show.html.heex:44
#, elixir-autogen, elixir-format
msgid "Cover"
msgstr ""
#: lib/music_library_web/live/wishlist_live/show.html.heex:56
#, elixir-autogen, elixir-format
msgid "MB Data"
msgstr ""
#: lib/music_library_web/live/wishlist_live/show.html.heex:37
#: lib/music_library_web/live/wishlist_live/show.html.heex:49
#, elixir-autogen, elixir-format
msgid "Refresh"
msgstr ""
#: lib/music_library_web/live/wishlist_live/show.ex:81 #: lib/music_library_web/live/wishlist_live/show.ex:81
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Error refreshing Cover" msgid "Error refreshing Cover"
@@ -516,22 +501,20 @@ msgstr ""
msgid "Genres populated successfully" msgid "Genres populated successfully"
msgstr "" msgstr ""
#: lib/music_library_web/live/wishlist_live/show.html.heex:61
#, elixir-autogen, elixir-format
msgid "Populate"
msgstr ""
#: lib/music_library_web/live/collection_live/show.html.heex:118 #: lib/music_library_web/live/collection_live/show.html.heex:118
#: lib/music_library_web/live/wishlist_live/show.html.heex:118
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Populate genres" msgid "Populate genres"
msgstr "" msgstr ""
#: lib/music_library_web/live/collection_live/show.html.heex:102 #: lib/music_library_web/live/collection_live/show.html.heex:102
#: lib/music_library_web/live/wishlist_live/show.html.heex:102
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Refresh MB data" msgid "Refresh MB data"
msgstr "" msgstr ""
#: lib/music_library_web/live/collection_live/show.html.heex:86 #: lib/music_library_web/live/collection_live/show.html.heex:86
#: lib/music_library_web/live/wishlist_live/show.html.heex:86
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Refresh cover" msgid "Refresh cover"
msgstr "" msgstr ""