feat: add confirmation modal to assignment content switches

core/frameworks/pixel/components/modal_view.ex

@@ -34,7 +34,14 @@ defmodule Frameworks.Pixel.ModalView do
   attr(:style, :atom, required: true)
   attr(:live_component, :map, required: true)
 
-  def container(assigns) do
+  def container(%{style: style} = assigns) do
+    allowed_styles = [:page, :sheet, :dialog, :notification]
+
+    unless style in allowed_styles do
+      raise ArgumentError,
+            "Invalid style: #{style}. Allowed styles are: #{Enum.join(allowed_styles, ", ")}"
+    end
+
     ~H"""
     <%= if @style == :page do %>
       <.page live_component={@live_component} />

core/priv/gettext/de/LC_MESSAGES/eyra-assignment.po

@@ -418,3 +418,11 @@ msgstr "Go to storage"
 #, elixir-autogen, elixir-format
 msgid "storage.not_available.warning"
 msgstr ""
+
+#, elixir-autogen, elixir-format
+msgid "confirmation_modal.body"
+msgstr ""
+
+#, elixir-autogen, elixir-format
+msgid "confirmation_modal.title"
+msgstr ""

core/priv/gettext/de/LC_MESSAGES/eyra-ui.po

@@ -194,3 +194,7 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "menu.item.workspace"
 msgstr ""
+
+#, elixir-autogen, elixir-format, fuzzy
+msgid "confirm.button"
+msgstr ""

core/priv/gettext/en/LC_MESSAGES/eyra-assignment.po

@@ -417,3 +417,11 @@ msgstr "Go to data storage"
 #, elixir-autogen, elixir-format
 msgid "storage.not_available.warning"
 msgstr "Please setup connection to a data storage"
+
+#, elixir-autogen, elixir-format
+msgid "confirmation_modal.body"
+msgstr "If you confirm, your current text will be deleted."
+
+#, elixir-autogen, elixir-format
+msgid "confirmation_modal.title"
+msgstr "Are you sure?"

core/priv/gettext/en/LC_MESSAGES/eyra-ui.po

@@ -193,3 +193,7 @@ msgstr "Desktop"
 #, elixir-autogen, elixir-format, fuzzy
 msgid "menu.item.workspace"
 msgstr "My workspace"
+
+#, elixir-autogen, elixir-format, fuzzy
+msgid "confirm.button"
+msgstr "Confirm"

core/priv/gettext/eyra-assignment.pot

@@ -417,3 +417,11 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "storage.not_available.warning"
 msgstr ""
+
+#, elixir-autogen, elixir-format
+msgid "confirmation_modal.body"
+msgstr ""
+
+#, elixir-autogen, elixir-format
+msgid "confirmation_modal.title"
+msgstr ""

core/priv/gettext/eyra-ui.pot

@@ -193,3 +193,7 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "menu.item.workspace"
 msgstr ""
+
+#, elixir-autogen, elixir-format
+msgid "confirm.button"
+msgstr ""

core/priv/gettext/nl/LC_MESSAGES/eyra-assignment.po

@@ -417,3 +417,11 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "storage.not_available.warning"
 msgstr ""
+
+#, elixir-autogen, elixir-format
+msgid "confirmation_modal.body"
+msgstr ""
+
+#, elixir-autogen, elixir-format
+msgid "confirmation_modal.title"
+msgstr ""

core/priv/gettext/nl/LC_MESSAGES/eyra-ui.po

@@ -193,3 +193,7 @@ msgstr "To-do"
 #, elixir-autogen, elixir-format, fuzzy
 msgid "menu.item.workspace"
 msgstr "Mijn werkplek"
+
+#, elixir-autogen, elixir-format, fuzzy
+msgid "confirm.button"
+msgstr "Klaar"

core/systems/assignment/confirmation_modal.ex

@@ -0,0 +1,56 @@
+defmodule Systems.Assignment.ConfirmationModal do
+  use CoreWeb, :live_component
+
+  @impl true
+  def update(_params, socket) do
+    {
+      :ok,
+      update_buttons(socket)
+    }
+  end
+
+  defp update_buttons(%{assigns: %{myself: myself}} = socket) do
+    confirm = %{
+      action: %{type: :send, target: myself, event: "confirm"},
+      face: %{type: :primary, label: dgettext("eyra-ui", "confirm.button")}
+    }
+
+    cancel = %{
+      action: %{type: :send, target: myself, event: "cancel"},
+      face: %{type: :secondary, label: dgettext("eyra-ui", "cancel.button")}
+    }
+
+    assign(socket, buttons: [confirm, cancel])
+  end
+
+  def handle_event("confirm", _, socket) do
+    {:noreply, socket |> send_event(:parent, "confirmed")}
+  end
+
+  def handle_event("cancel", _, socket) do
+    {:noreply, socket |> send_event(:parent, "cancelled")}
+  end
+
+  @impl true
+  @spec render(any()) :: Phoenix.LiveView.Rendered.t()
+  def render(assigns) do
+    ~H"""
+      <div>
+        <Text.title2>
+          <%= dgettext("eyra-assignment", "confirmation_modal.title") %>
+        </Text.title2>
+        <.spacing value="M" />
+        <Text.body_large>
+          <%= dgettext("eyra-assignment", "confirmation_modal.body") %>
+        </Text.body_large>
+        <.spacing value="M" />
+
+        <div class="flex flex-row gap-4">
+        <%= for button <- @buttons do %>
+          <Button.dynamic {button} />
+        <% end %>
+      </div>
+      </div>
+    """
+  end
+end

core/systems/assignment/content_page_form.ex

@@ -64,6 +64,18 @@ defmodule Systems.Assignment.ContentPageForm do
     }
   end
 
+  @impl true
+  def compose(:confirmation_modal, %{page_ref: page_ref}) do
+    %{
+      module: Systems.Assignment.ConfirmationModal,
+      params: %{
+        assigns: %{
+          page_ref: page_ref
+        }
+      }
+    }
+  end
+
   @impl true
   def compose(:content_page_form, %{page_ref: nil}) do
     %{
@@ -99,16 +111,34 @@ defmodule Systems.Assignment.ContentPageForm do
   end
 
   @impl true
-  def handle_event("update", %{status: :off}, %{assigns: %{page_ref: page_ref}} = socket) do
-    {:ok, _} = Assignment.Public.delete_page_ref(page_ref)
-
+  def handle_event("update", %{status: :off}, socket) do
     {
       :noreply,
-      socket |> assign(page_ref: page_ref)
+      socket
+      |> compose_child(:confirmation_modal)
+      |> show_modal(:confirmation_modal, :dialog)
     }
   end
 
   @impl true
+  def handle_event("cancelled", %{source: %{name: :confirmation_modal}}, socket) do
+    {:noreply,
+     socket
+     |> hide_modal(:confirmation_modal)}
+  end
+
+  @impl true
+  def handle_event(
+        "confirmed",
+        %{source: %{name: :confirmation_modal}},
+        %{assigns: %{page_ref: page_ref}} = socket
+      ) do
+    {:ok, _} = Assignment.Public.delete_page_ref(page_ref)
+    {:noreply, socket |> hide_modal(:confirmation_modal)}
+  end
+
+  @impl true
+  @spec render(any()) :: Phoenix.LiveView.Rendered.t()
   def render(assigns) do
     ~H"""
       <div>