Checkpoint

lib/live_beats_web/live/live_helpers.ex

@@ -82,7 +82,27 @@ defmodule LiveBeatsWeb.LiveHelpers do
     )
   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.show(
       to: "##{id}",
@@ -90,7 +110,7 @@ defmodule LiveBeatsWeb.LiveHelpers do
       transition: {"ease-out duration-300", "opacity-0", "opacity-100"}
     )
     |> JS.show(
-      to: "##{id}-content",
+      to: "##{id}-container",
       display: "inline-block",
       transition:
         {"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"}
     )
     |> JS.hide(
-      to: "##{id}-content",
+      to: "##{id}-container",
       transition:
         {"ease-in duration-200", "opacity-100 translate-y-0 sm:scale-100",
          "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>
         <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
         <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"}
           phx-window-keydown={hide_modal(@on_cancel, @id)} phx-key="escape"
           phx-click-away={hide_modal(@on_cancel, @id)}
@@ -149,11 +169,11 @@ defmodule LiveBeatsWeb.LiveHelpers do
               </svg>
             </div>
             <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) %>
               </h3>
               <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) %>
                 </p>
               </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"}"}>
             <%= for confirm <- @confirm do %>
               <button
+                id={"#{@id}-confirm"}
                 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"
                 phx-click={@on_confirm |> hide_modal(@id)}

lib/live_beats_web/live/song_live/index.ex

@@ -29,7 +29,11 @@ defmodule LiveBeatsWeb.SongLive.Index do
       </.modal>
     <% 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}>
       <:col let={song} label="Title"><%= song.title %></:col>
@@ -38,7 +42,13 @@ defmodule LiveBeatsWeb.SongLive.Index do
       <:col let={song} label="">
         <.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 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>
     </.table>
     """
@@ -71,11 +81,6 @@ defmodule LiveBeatsWeb.SongLive.Index do
   end
 
   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)
     {:ok, _} = MediaLibrary.delete_song(song)
     {:noreply, assign(socket, :songs, list_songs())}

lib/live_beats_web/templates/layout/live.html.heex

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