From 129568222af48417f5230642d6feb914820a9cb5 Mon Sep 17 00:00:00 2001 From: MelchiorKokernoot Date: Thu, 26 Sep 2024 14:29:52 +0200 Subject: [PATCH] feat: add confirmation modal to assignment content switches --- .../frameworks/pixel/components/modal_view.ex | 9 ++- .../gettext/de/LC_MESSAGES/eyra-assignment.po | 8 +++ core/priv/gettext/de/LC_MESSAGES/eyra-ui.po | 4 ++ .../gettext/en/LC_MESSAGES/eyra-assignment.po | 8 +++ core/priv/gettext/en/LC_MESSAGES/eyra-ui.po | 4 ++ core/priv/gettext/eyra-assignment.pot | 8 +++ core/priv/gettext/eyra-ui.pot | 4 ++ .../gettext/nl/LC_MESSAGES/eyra-assignment.po | 8 +++ core/priv/gettext/nl/LC_MESSAGES/eyra-ui.po | 4 ++ core/systems/assignment/confirmation_modal.ex | 56 +++++++++++++++++++ core/systems/assignment/content_page_form.ex | 38 +++++++++++-- 11 files changed, 146 insertions(+), 5 deletions(-) create mode 100644 core/systems/assignment/confirmation_modal.ex diff --git a/core/frameworks/pixel/components/modal_view.ex b/core/frameworks/pixel/components/modal_view.ex index 38ab63520..8ef601c7f 100644 --- a/core/frameworks/pixel/components/modal_view.ex +++ b/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} /> diff --git a/core/priv/gettext/de/LC_MESSAGES/eyra-assignment.po b/core/priv/gettext/de/LC_MESSAGES/eyra-assignment.po index a74f30855..e0b39aba2 100644 --- a/core/priv/gettext/de/LC_MESSAGES/eyra-assignment.po +++ b/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 "" diff --git a/core/priv/gettext/de/LC_MESSAGES/eyra-ui.po b/core/priv/gettext/de/LC_MESSAGES/eyra-ui.po index d4517340a..f31008f05 100644 --- a/core/priv/gettext/de/LC_MESSAGES/eyra-ui.po +++ b/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 "" diff --git a/core/priv/gettext/en/LC_MESSAGES/eyra-assignment.po b/core/priv/gettext/en/LC_MESSAGES/eyra-assignment.po index 0e2ab6890..e783367ec 100644 --- a/core/priv/gettext/en/LC_MESSAGES/eyra-assignment.po +++ b/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?" diff --git a/core/priv/gettext/en/LC_MESSAGES/eyra-ui.po b/core/priv/gettext/en/LC_MESSAGES/eyra-ui.po index 6c153f882..29eabf49c 100644 --- a/core/priv/gettext/en/LC_MESSAGES/eyra-ui.po +++ b/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" diff --git a/core/priv/gettext/eyra-assignment.pot b/core/priv/gettext/eyra-assignment.pot index 8c19fff63..9985fe360 100644 --- a/core/priv/gettext/eyra-assignment.pot +++ b/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 "" diff --git a/core/priv/gettext/eyra-ui.pot b/core/priv/gettext/eyra-ui.pot index e7b873e4f..2c75de1d8 100644 --- a/core/priv/gettext/eyra-ui.pot +++ b/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 "" diff --git a/core/priv/gettext/nl/LC_MESSAGES/eyra-assignment.po b/core/priv/gettext/nl/LC_MESSAGES/eyra-assignment.po index 2bff0e058..195862e71 100644 --- a/core/priv/gettext/nl/LC_MESSAGES/eyra-assignment.po +++ b/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 "" diff --git a/core/priv/gettext/nl/LC_MESSAGES/eyra-ui.po b/core/priv/gettext/nl/LC_MESSAGES/eyra-ui.po index 5151af3a0..31e7c12d2 100644 --- a/core/priv/gettext/nl/LC_MESSAGES/eyra-ui.po +++ b/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" diff --git a/core/systems/assignment/confirmation_modal.ex b/core/systems/assignment/confirmation_modal.ex new file mode 100644 index 000000000..2a7abb07a --- /dev/null +++ b/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""" +
+ + <%= dgettext("eyra-assignment", "confirmation_modal.title") %> + + <.spacing value="M" /> + + <%= dgettext("eyra-assignment", "confirmation_modal.body") %> + + <.spacing value="M" /> + +
+ <%= for button <- @buttons do %> + + <% end %> +
+
+ """ + end +end diff --git a/core/systems/assignment/content_page_form.ex b/core/systems/assignment/content_page_form.ex index efc0bc370..b0e2a9ef9 100644 --- a/core/systems/assignment/content_page_form.ex +++ b/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"""