Checkpoint

This commit is contained in:
Chris McCord 2021-11-02 12:24:53 -04:00
parent 1d37ec3c5c
commit aaa89c7c76
3 changed files with 41 additions and 15 deletions

View file

@ -82,7 +82,27 @@ defmodule LiveBeatsWeb.LiveHelpers do
) )
end end
def show_modal(js \\ %JS{}, id) do def show_modal(%JS{} = js, id, opts) when is_binary(id) and is_list(opts) do
on_confirm = Keyword.get(opts, :on_confirm, %JS{}) |> hide_modal(id)
title = Keyword.get(opts, :title, "")
content = Keyword.get(opts, :content, "")
js
|> JS.inner_text(title, to: "##{id}-title")
|> JS.inner_text(content, to: "##{id}-content")
|> JS.set_attribute("phx-click", to: "##{id}-confirm", value: on_confirm)
|> show_modal(id)
end
def show_modal(id) when is_binary(id) do
show_modal(%JS{}, id, [])
end
def show_modal(id, opts) when is_binary(id) and is_list(opts) do
show_modal(%JS{}, id, opts)
end
def show_modal(%JS{} = js, id) when is_binary(id) do
js js
|> JS.show( |> JS.show(
to: "##{id}", to: "##{id}",
@ -90,7 +110,7 @@ defmodule LiveBeatsWeb.LiveHelpers do
transition: {"ease-out duration-300", "opacity-0", "opacity-100"} transition: {"ease-out duration-300", "opacity-0", "opacity-100"}
) )
|> JS.show( |> JS.show(
to: "##{id}-content", to: "##{id}-container",
display: "inline-block", display: "inline-block",
transition: transition:
{"ease-out duration-300", "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95", {"ease-out duration-300", "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
@ -106,7 +126,7 @@ defmodule LiveBeatsWeb.LiveHelpers do
transition: {"ease-in duration-200", "opacity-100", "opacity-0"} transition: {"ease-in duration-200", "opacity-100", "opacity-0"}
) )
|> JS.hide( |> JS.hide(
to: "##{id}-content", to: "##{id}-container",
transition: transition:
{"ease-in duration-200", "opacity-100 translate-y-0 sm:scale-100", {"ease-in duration-200", "opacity-100 translate-y-0 sm:scale-100",
"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"} "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"}
@ -133,7 +153,7 @@ defmodule LiveBeatsWeb.LiveHelpers do
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div> <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span> <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
<div <div
id={"#{@id}-content"} id={"#{@id}-container"}
class={"#{if @show, do: "fade-in-scale", else: "hidden"} sticky inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform sm:my-8 sm:align-middle sm:max-w-xl sm:w-full sm:p-6"} class={"#{if @show, do: "fade-in-scale", else: "hidden"} sticky inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform sm:my-8 sm:align-middle sm:max-w-xl sm:w-full sm:p-6"}
phx-window-keydown={hide_modal(@on_cancel, @id)} phx-key="escape" phx-window-keydown={hide_modal(@on_cancel, @id)} phx-key="escape"
phx-click-away={hide_modal(@on_cancel, @id)} phx-click-away={hide_modal(@on_cancel, @id)}
@ -149,11 +169,11 @@ defmodule LiveBeatsWeb.LiveHelpers do
</svg> </svg>
</div> </div>
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full mr-12"> <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full mr-12">
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title"> <h3 class="text-lg leading-6 font-medium text-gray-900" id={"#{@id}-title"}>
<%= render_slot(@title) %> <%= render_slot(@title) %>
</h3> </h3>
<div class="mt-2"> <div class="mt-2">
<p class={"text-sm text-gray-500 #{if @loading, do: "invisible"}"}> <p id={"#{@id}-content"} class={"text-sm text-gray-500 #{if @loading, do: "invisible"}"}>
<%= render_slot(@inner_block) %> <%= render_slot(@inner_block) %>
</p> </p>
</div> </div>
@ -162,6 +182,7 @@ defmodule LiveBeatsWeb.LiveHelpers do
<div class={"mt-5 sm:mt-4 sm:flex sm:flex-row-reverse #{if @loading, do: "invisible"}"}> <div class={"mt-5 sm:mt-4 sm:flex sm:flex-row-reverse #{if @loading, do: "invisible"}"}>
<%= for confirm <- @confirm do %> <%= for confirm <- @confirm do %>
<button <button
id={"#{@id}-confirm"}
type="button" type="button"
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
phx-click={@on_confirm |> hide_modal(@id)} phx-click={@on_confirm |> hide_modal(@id)}

View file

@ -29,7 +29,11 @@ defmodule LiveBeatsWeb.SongLive.Index do
</.modal> </.modal>
<% end %> <% end %>
<.live_component module={DeleteDialogComponent} id="delete-modal"/>
<.modal id="delete-modal">
<:cancel>Cancel</:cancel>
<:confirm>Delete</:confirm>
</.modal>
<.table rows={@songs} row_id={fn song -> "song-#{song.id}" end}> <.table rows={@songs} row_id={fn song -> "song-#{song.id}" end}>
<:col let={song} label="Title"><%= song.title %></:col> <:col let={song} label="Title"><%= song.title %></:col>
@ -38,7 +42,13 @@ defmodule LiveBeatsWeb.SongLive.Index do
<:col let={song} label=""> <:col let={song} label="">
<.link redirect_to={Routes.song_show_path(@socket, :show, song)}>Show</.link> <.link redirect_to={Routes.song_show_path(@socket, :show, song)}>Show</.link>
<.link patch_to={Routes.song_index_path(@socket, :edit, song)}>Edit</.link> <.link patch_to={Routes.song_index_path(@socket, :edit, song)}>Edit</.link>
<.link phx-click={JS.push("delete", value: %{id: song.id}) |> show_modal("delete-modal")}>Delete</.link> <.link phx-click={
show_modal(
"delete-modal",
content: "Are you sure you want to delete \"#{song.title}\"?",
on_confirm: JS.push("delete", value: %{id: song.id}) |> hide("#song-#{song.id}")
)
}>Delete</.link>
</:col> </:col>
</.table> </.table>
""" """
@ -71,11 +81,6 @@ defmodule LiveBeatsWeb.SongLive.Index do
end end
def handle_event("delete", %{"id" => id}, socket) do def handle_event("delete", %{"id" => id}, socket) do
DeleteDialogComponent.send_show(MediaLibrary.get_song!(id))
{:noreply, socket}
end
def handle_event("confirm-delete", %{"id" => id}, socket) do
song = MediaLibrary.get_song!(id) song = MediaLibrary.get_song!(id)
{:ok, _} = MediaLibrary.delete_song(song) {:ok, _} = MediaLibrary.delete_song(song)
{:noreply, assign(socket, :songs, list_songs())} {:noreply, assign(socket, :songs, list_songs())}

View file

@ -1,9 +1,9 @@
<main> <main>
<p class="alert alert-info" role="alert" <p class="alert alert-info fade-in-scale" role="alert"
phx-click="lv:clear-flash" phx-click="lv:clear-flash"
phx-value-key="info"><%= live_flash(@flash, :info) %></p> phx-value-key="info"><%= live_flash(@flash, :info) %></p>
<p class="alert alert-danger" role="alert" <p class="alert alert-danger fade-in-scale" role="alert"
phx-click="lv:clear-flash" phx-click="lv:clear-flash"
phx-value-key="error"><%= live_flash(@flash, :error) %></p> phx-value-key="error"><%= live_flash(@flash, :error) %></p>