feat: add confirmation modal to delete redirect action

Author: joaodiaslobo

lib/cesium_link_web/live/redirect_live/index.ex

@@ -20,6 +20,12 @@ defmodule CesiumLinkWeb.RedirectLive.Index do
     |> assign(:redirect, Redirects.get_redirect!(id))
   end
 
+  defp apply_action(socket, :delete, %{"id" => id}) do
+    socket
+    |> assign(:page_title, "Delete Redirect")
+    |> assign(:redirect, Redirects.get_redirect!(id))
+  end
+
   defp apply_action(socket, :new, _params) do
     socket
     |> assign(:page_title, "New Redirect")
@@ -42,7 +48,10 @@ defmodule CesiumLinkWeb.RedirectLive.Index do
     redirect = Redirects.get_redirect!(id)
     {:ok, _} = Redirects.delete_redirect(redirect)
 
-    {:noreply, stream_delete(socket, :redirects, redirect)}
+    {:noreply,
+     stream_delete(socket, :redirects, redirect)
+     |> push_patch(to: ~p"/admin/redirects")
+     |> put_flash(:info, "Redirect deleted successfully")}
   end
 
   defp get_redirect_url(%Redirect{slug: slug, type: type}) do

lib/cesium_link_web/live/redirect_live/index.html.heex

@@ -37,8 +37,8 @@
       <.icon name="hero-pencil" class="w-5 h-5" />
     </.link>
   </:action>
-  <:action :let={{id, redirect}}>
-    <.link phx-click={JS.push("delete", value: %{id: redirect.id}) |> hide("##{id}")} data-confirm="Are you sure?">
+  <:action :let={{_id, redirect}}>
+    <.link patch={~p"/admin/redirects/#{redirect}/delete"}>
       <.icon name="hero-trash" class="w-5 h-5" />
     </.link>
   </:action>
@@ -47,3 +47,24 @@
 <.modal :if={@live_action in [:new, :edit]} id="redirect-modal" show on_cancel={JS.patch(~p"/admin/redirects")}>
   <.live_component module={CesiumLinkWeb.RedirectLive.FormComponent} id={@redirect.id || :new} title={@page_title} action={@live_action} redirect={@redirect} patch={~p"/admin/redirects"} />
 </.modal>
+
+<.modal :if={@live_action == :delete} id="delete-modal" show on_cancel={JS.patch(~p"/admin/redirects")}>
+  <div>
+    <.header>
+      <%= gettext("Delete Redirect") %>
+      <:subtitle>
+        <%= gettext("Are you sure you want to delete this redirect? This action is irreversible.") %>
+      </:subtitle>
+    </.header>
+    <div class="mt-8 w-full gap-2 flex flex-row">
+      <.link patch={~p"/admin/redirects"} class="w-full outline-none">
+        <.button class="w-full">
+          <%= gettext("Cancel") %>
+        </.button>
+      </.link>
+      <.button phx-click="delete" phx-value-id={@redirect.id} class="w-full">
+        <%= gettext("Confirm") %>
+      </.button>
+    </div>
+  </div>
+</.modal>

lib/cesium_link_web/router.ex

@@ -85,6 +85,7 @@ defmodule CesiumLinkWeb.Router do
         live "/redirects", RedirectLive.Index, :index
         live "/redirects/new", RedirectLive.Index, :new
         live "/redirects/:id/edit", RedirectLive.Index, :edit
+        live "/redirects/:id/delete", RedirectLive.Index, :delete
 
         live "/qrcode", QRCodeLive.Index, :index
       end