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

Extract shared record action menu component

Browse Source 
Closes #155
This commit is contained in:
Claudio Ortolina
2026-04-12 23:23:11 +01:00
parent 88906e10ad
commit 035b4e7197
1 changed files with 60 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/components/record_components.ex
+58 -85
View File
@@ -199,49 +199,11 @@ defmodule MusicLibraryWeb.RecordComponents do
</.button> </.button>
</:toggle> </:toggle>
<.focus_wrap id={"actions-#{record.id}-focus-wrap"} class="pointer-events-auto"> <.focus_wrap id={"actions-#{record.id}-focus-wrap"} class="pointer-events-auto">
<.dropdown_link id={"actions-#{record.id}-edit"} patch={@record_edit_path.(record)}> <.record_action_links
<.icon record={record}
name="hero-pencil-square" edit_path={@record_edit_path.(record)}
class="phx-click-loading:animate-bounce mr-1 size-4" hide_target={"##{id}"}
aria-hidden="true"
data-slot="icon"
/> />
{gettext("Edit")}
</.dropdown_link>
<.dropdown_link
:if={!record.purchased_at}
id={"actions-#{record.id}-purchase"}
phx-click={
JS.dispatch("music_library:confetti")
|> JS.push("add-to-collection", value: %{id: record.id})
}
>
<.icon
name="hero-banknotes"
class="phx-click-loading:animate-shake mr-1 size-4"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Purchased")}
</.dropdown_link>
<.dropdown_separator />
<.dropdown_link
id={"actions-#{record.id}-delete"}
phx-click={JS.push("delete", value: %{id: record.id}) |> hide("##{id}")}
data-confirm={gettext("Are you sure?")}
class={[
"text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
]}
>
<.icon
name="hero-trash"
class="phx-click-loading:animate-spin mr-1 size-4"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Delete")}
</.dropdown_link>
</.focus_wrap> </.focus_wrap>
</.dropdown> </.dropdown>
</div> </div>
@@ -320,50 +282,11 @@ defmodule MusicLibraryWeb.RecordComponents do
/> />
</:toggle> </:toggle>
<.focus_wrap id={"actions-#{record.id}-focus-wrap"}> <.focus_wrap id={"actions-#{record.id}-focus-wrap"}>
<.dropdown_link <.record_action_links
id={"actions-#{record.id}-edit"} record={record}
patch={@record_edit_path.(record)} edit_path={@record_edit_path.(record)}
> hide_target={"##{id}"}
<.icon
name="hero-pencil-square"
class="phx-click-loading:animate-bounce mr-1 size-4"
aria-hidden="true"
data-slot="icon"
/> />
{gettext("Edit")}
</.dropdown_link>
<.dropdown_link
:if={!record.purchased_at}
id={"actions-#{record.id}-purchase"}
phx-click={
JS.dispatch("music_library:confetti")
|> JS.push("add-to-collection", value: %{id: record.id})
}
>
<.icon
name="hero-banknotes"
class="phx-click-loading:animate-shake mr-1 size-4"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Purchased")}
</.dropdown_link>
<.dropdown_separator />
<.dropdown_link
id={"actions-#{record.id}-delete"}
phx-click={JS.push("delete", value: %{id: record.id}) |> hide("##{id}")}
data-confirm={gettext("Are you sure?")}
class="text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
>
<.icon
name="hero-trash"
class="phx-click-loading:animate-spin mr-1 size-4"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Delete")}
</.dropdown_link>
</.focus_wrap> </.focus_wrap>
</.dropdown> </.dropdown>
</div> </div>
@@ -747,6 +670,56 @@ defmodule MusicLibraryWeb.RecordComponents do
""" """
end end
attr :record, :map, required: true
attr :edit_path, :string, required: true
attr :hide_target, :string, required: true
defp record_action_links(assigns) do
~H"""
<.dropdown_link id={"actions-#{@record.id}-edit"} patch={@edit_path}>
<.icon
name="hero-pencil-square"
class="phx-click-loading:animate-bounce mr-1 size-4"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Edit")}
</.dropdown_link>
<.dropdown_link
:if={!@record.purchased_at}
id={"actions-#{@record.id}-purchase"}
phx-click={
JS.dispatch("music_library:confetti")
|> JS.push("add-to-collection", value: %{id: @record.id})
}
>
<.icon
name="hero-banknotes"
class="phx-click-loading:animate-shake mr-1 size-4"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Purchased")}
</.dropdown_link>
<.dropdown_separator />
<.dropdown_link
id={"actions-#{@record.id}-delete"}
phx-click={JS.push("delete", value: %{id: @record.id}) |> hide(@hide_target)}
data-confirm={gettext("Are you sure?")}
class="text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
>
<.icon
name="hero-trash"
class="phx-click-loading:animate-spin mr-1 size-4"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Delete")}
</.dropdown_link>
"""
end
defp genre_search_path(:collection, genre), defp genre_search_path(:collection, genre),
do: ~p"/collection?#{%{query: ~s(genre:"#{genre}")}}" do: ~p"/collection?#{%{query: ~s(genre:"#{genre}")}}"