From 114f63b47a70243de525a4bb2091ee6ecc645a38 Mon Sep 17 00:00:00 2001 From: shibao Date: Mon, 14 Feb 2022 01:26:51 -0500 Subject: [PATCH] use phoenix component modal --- lib/cannery_web/components/modal.ex | 43 --------- .../live/ammo_group_live/index.html.heex | 19 ++-- .../live/ammo_group_live/show.html.heex | 19 ++-- .../live/ammo_type_live/form_component.ex | 10 +- lib/cannery_web/live/ammo_type_live/index.ex | 4 +- .../live/ammo_type_live/index.html.heex | 19 ++-- lib/cannery_web/live/ammo_type_live/show.ex | 1 + .../live/ammo_type_live/show.html.heex | 18 ++-- .../live/container_live/index.html.heex | 19 ++-- .../live/container_live/show.html.heex | 38 ++++---- .../live/invite_live/index.html.heex | 19 ++-- lib/cannery_web/live/live_helpers.ex | 96 +++++++++++++++---- lib/cannery_web/live/tag_live/index.html.heex | 19 ++-- priv/gettext/actions.pot | 6 +- priv/gettext/default.pot | 6 +- priv/gettext/prompts.pot | 7 +- 16 files changed, 193 insertions(+), 150 deletions(-) delete mode 100644 lib/cannery_web/components/modal.ex diff --git a/lib/cannery_web/components/modal.ex b/lib/cannery_web/components/modal.ex deleted file mode 100644 index 28209979..00000000 --- a/lib/cannery_web/components/modal.ex +++ /dev/null @@ -1,43 +0,0 @@ -defmodule CanneryWeb.Components.Modal do - @moduledoc """ - Livecomponent that displays a floating modal window - """ - - use CanneryWeb, :live_component - - @impl true - def render(assigns) do - ~H""" -
-
- <%= live_patch to: @return_to, - class: - "absolute top-8 right-10 text-gray-500 hover:text-gray-800 transition-all duration-500 ease-in-out" do %> - - <% end %> -
- <%= live_component(@component, @opts) %> -
-
-
- """ - end - - @impl true - def handle_event("close", _, socket) do - {:noreply, push_patch(socket, to: socket.assigns.return_to)} - end -end diff --git a/lib/cannery_web/live/ammo_group_live/index.html.heex b/lib/cannery_web/live/ammo_group_live/index.html.heex index 5660f6a3..46b02cf9 100644 --- a/lib/cannery_web/live/ammo_group_live/index.html.heex +++ b/lib/cannery_web/live/ammo_group_live/index.html.heex @@ -79,12 +79,15 @@ <%= if @live_action in [:new, :edit] do %> - <%= live_modal(CanneryWeb.AmmoGroupLive.FormComponent, - id: @ammo_group.id || :new, - title: @page_title, - action: @live_action, - ammo_group: @ammo_group, - return_to: Routes.ammo_group_index_path(@socket, :index), - current_user: @current_user - ) %> + <.modal return_to={Routes.ammo_group_index_path(@socket, :index)}> + <.live_component + module={CanneryWeb.AmmoGroupLive.FormComponent} + id={@ammo_group.id || :new} + title={@page_title} + action={@live_action} + ammo_group={@ammo_group} + return_to={Routes.ammo_group_index_path(@socket, :index)} + current_user={@current_user} + /> + <% end %> diff --git a/lib/cannery_web/live/ammo_group_live/show.html.heex b/lib/cannery_web/live/ammo_group_live/show.html.heex index 5d5f6654..58000e94 100644 --- a/lib/cannery_web/live/ammo_group_live/show.html.heex +++ b/lib/cannery_web/live/ammo_group_live/show.html.heex @@ -53,12 +53,15 @@ <%= if @live_action in [:edit] do %> - <%= live_modal(CanneryWeb.AmmoGroupLive.FormComponent, - id: @ammo_group.id, - title: @page_title, - action: @live_action, - ammo_group: @ammo_group, - return_to: Routes.ammo_group_show_path(@socket, :show, @ammo_group), - current_user: @current_user - ) %> + <.modal return_to={Routes.ammo_group_show_path(@socket, :show, @ammo_group)}> + <.live_component + module={CanneryWeb.AmmoGroupLive.FormComponent} + id={@ammo_group.id} + title={@page_title} + action={@live_action} + ammo_group={@ammo_group} + return_to={Routes.ammo_group_show_path(@socket, :show, @ammo_group)} + current_user={@current_user} + /> + <% end %> diff --git a/lib/cannery_web/live/ammo_type_live/form_component.ex b/lib/cannery_web/live/ammo_type_live/form_component.ex index 72598862..147f290c 100644 --- a/lib/cannery_web/live/ammo_type_live/form_component.ex +++ b/lib/cannery_web/live/ammo_type_live/form_component.ex @@ -13,7 +13,7 @@ defmodule CanneryWeb.AmmoTypeLive.FormComponent do %{:ammo_type => AmmoType.t(), :current_user => User.t(), optional(any) => any}, Socket.t() ) :: {:ok, Socket.t()} - def update(%{ammo_type: ammo_type} = assigns, socket) do + def update(%{ammo_type: ammo_type, current_user: _current_user} = assigns, socket) do {:ok, socket |> assign(assigns) |> assign(:changeset, Ammo.change_ammo_type(ammo_type))} end @@ -186,9 +186,13 @@ defmodule CanneryWeb.AmmoTypeLive.FormComponent do {:noreply, socket} end - defp save_ammo_type(%{assigns: %{return_to: return_to}} = socket, :new, ammo_type_params) do + defp save_ammo_type( + %{assigns: %{current_user: current_user, return_to: return_to}} = socket, + :new, + ammo_type_params + ) do socket = - case Ammo.create_ammo_type(ammo_type_params) do + case Ammo.create_ammo_type(ammo_type_params, current_user) do {:ok, %{name: ammo_type_name}} -> prompt = dgettext("prompts", "%{name} created successfully", name: ammo_type_name) socket |> put_flash(:info, prompt) |> push_redirect(to: return_to) diff --git a/lib/cannery_web/live/ammo_type_live/index.ex b/lib/cannery_web/live/ammo_type_live/index.ex index c2fc8ba5..e2378488 100644 --- a/lib/cannery_web/live/ammo_type_live/index.ex +++ b/lib/cannery_web/live/ammo_type_live/index.ex @@ -5,8 +5,8 @@ defmodule CanneryWeb.AmmoTypeLive.Index do use CanneryWeb, :live_view - alias Cannery.Ammo - alias Cannery.Ammo.AmmoType + alias Cannery.{Ammo, Ammo.AmmoType} + alias CanneryWeb.Endpoint @impl true def mount(_params, session, socket) do diff --git a/lib/cannery_web/live/ammo_type_live/index.html.heex b/lib/cannery_web/live/ammo_type_live/index.html.heex index 1906aec1..174d235e 100644 --- a/lib/cannery_web/live/ammo_type_live/index.html.heex +++ b/lib/cannery_web/live/ammo_type_live/index.html.heex @@ -115,11 +115,16 @@ <%= if @live_action in [:new, :edit] do %> - <%= live_modal(CanneryWeb.AmmoTypeLive.FormComponent, - id: @ammo_type.id || :new, - title: @page_title, - action: @live_action, - ammo_type: @ammo_type, - return_to: Routes.ammo_type_index_path(@socket, :index) - ) %> + <.modal return_to={Routes.ammo_type_index_path(Endpoint, :index)}> + <.live_component + module={CanneryWeb.AmmoTypeLive.FormComponent} + id={@ammo_type.id || :new} + title={@page_title} + action={@live_action} + ammo_type={@ammo_type} + return_to={Routes.ammo_type_index_path(Endpoint, :index)} + current_user={@current_user} + } + /> + <% end %> diff --git a/lib/cannery_web/live/ammo_type_live/show.ex b/lib/cannery_web/live/ammo_type_live/show.ex index 59cad6e3..de312072 100644 --- a/lib/cannery_web/live/ammo_type_live/show.ex +++ b/lib/cannery_web/live/ammo_type_live/show.ex @@ -6,6 +6,7 @@ defmodule CanneryWeb.AmmoTypeLive.Show do use CanneryWeb, :live_view import CanneryWeb.Components.AmmoGroupCard alias Cannery.Ammo + alias CanneryWeb.Endpoint @impl true def mount(_params, session, socket) do diff --git a/lib/cannery_web/live/ammo_type_live/show.html.heex b/lib/cannery_web/live/ammo_type_live/show.html.heex index 9a9ae473..99139cbd 100644 --- a/lib/cannery_web/live/ammo_type_live/show.html.heex +++ b/lib/cannery_web/live/ammo_type_live/show.html.heex @@ -106,11 +106,15 @@ <%= if @live_action in [:edit] do %> - <%= live_modal(CanneryWeb.AmmoTypeLive.FormComponent, - id: @ammo_type.id, - title: @page_title, - action: @live_action, - ammo_type: @ammo_type, - return_to: Routes.ammo_type_show_path(@socket, :show, @ammo_type) - ) %> + <.modal return_to={Routes.ammo_type_show_path(Endpoint, :show, @ammo_type)}> + <.live_component + module={CanneryWeb.AmmoTypeLive.FormComponent} + id={@ammo_type.id} + title={@page_title} + action={@live_action} + ammo_type={@ammo_type} + return_to={Routes.ammo_type_show_path(Endpoint, :show, @ammo_type)} + current_user={@current_user} + /> + <% end %> diff --git a/lib/cannery_web/live/container_live/index.html.heex b/lib/cannery_web/live/container_live/index.html.heex index a8f99e10..4c314ed9 100644 --- a/lib/cannery_web/live/container_live/index.html.heex +++ b/lib/cannery_web/live/container_live/index.html.heex @@ -43,12 +43,15 @@ <%= if @live_action in [:new, :edit] do %> - <%= live_modal(CanneryWeb.ContainerLive.FormComponent, - id: @container.id || :new, - title: @page_title, - action: @live_action, - container: @container, - return_to: Routes.container_index_path(@socket, :index), - current_user: @current_user - ) %> + <.modal return_to={Routes.container_index_path(@socket, :index)}> + <.live_component + module={CanneryWeb.ContainerLive.FormComponent} + id={@container.id || :new} + title={@page_title} + action={@live_action} + container={@container} + return_to={Routes.container_index_path(@socket, :index)} + current_user={@current_user} + /> + <% end %> diff --git a/lib/cannery_web/live/container_live/show.html.heex b/lib/cannery_web/live/container_live/show.html.heex index 4449db0f..5a99191c 100644 --- a/lib/cannery_web/live/container_live/show.html.heex +++ b/lib/cannery_web/live/container_live/show.html.heex @@ -92,23 +92,29 @@ <%= if @live_action in [:edit] do %> - <%= live_modal(CanneryWeb.ContainerLive.FormComponent, - id: @container.id, - title: @page_title, - action: @live_action, - container: @container, - return_to: Routes.container_show_path(Endpoint, :show, @container), - current_user: @current_user - ) %> + <.modal return_to={Routes.container_show_path(Endpoint, :show, @container)}> + <.live_component + module={CanneryWeb.ContainerLive.FormComponent} + id={@container.id} + title={@page_title} + action={@live_action} + container={@container} + return_to={Routes.container_show_path(Endpoint, :show, @container)} + current_user={@current_user} + /> + <% end %> <%= if @live_action == :add_tag do %> - <%= live_modal(CanneryWeb.ContainerLive.AddTagComponent, - id: @container.id, - title: @page_title, - action: @live_action, - container: @container, - return_to: Routes.container_show_path(Endpoint, :show, @container), - current_user: @current_user - ) %> + <.modal return_to={Routes.container_show_path(Endpoint, :show, @container)}> + <.live_component + module={CanneryWeb.ContainerLive.AddTagComponent} + id={@container.id} + title={@page_title} + action={@live_action} + container={@container} + return_to={Routes.container_show_path(Endpoint, :show, @container)} + current_user={@current_user} + /> + <% end %> diff --git a/lib/cannery_web/live/invite_live/index.html.heex b/lib/cannery_web/live/invite_live/index.html.heex index fe977403..7124db2d 100644 --- a/lib/cannery_web/live/invite_live/index.html.heex +++ b/lib/cannery_web/live/invite_live/index.html.heex @@ -125,12 +125,15 @@ <%= if @live_action in [:new, :edit] do %> - <%= live_modal(CanneryWeb.InviteLive.FormComponent, - id: @invite.id || :new, - title: @page_title, - action: @live_action, - invite: @invite, - return_to: Routes.invite_index_path(@socket, :index), - current_user: @current_user - ) %> + <.modal return_to={Routes.invite_index_path(@socket, :index)}> + <.live_component + module={CanneryWeb.InviteLive.FormComponent} + id={@invite.id || :new} + title={@page_title} + action={@live_action} + invite={@invite} + return_to={Routes.invite_index_path(@socket, :index)} + current_user={@current_user} + /> + <% end %> diff --git a/lib/cannery_web/live/live_helpers.ex b/lib/cannery_web/live/live_helpers.ex index 69e80a34..7dd7d32d 100644 --- a/lib/cannery_web/live/live_helpers.ex +++ b/lib/cannery_web/live/live_helpers.ex @@ -3,29 +3,10 @@ defmodule CanneryWeb.LiveHelpers do Contains common helper functions for liveviews """ + import Phoenix.LiveView import Phoenix.LiveView.Helpers - import Phoenix.LiveView, only: [assign_new: 3] alias Cannery.Accounts - alias CanneryWeb.Components.Modal - - @doc """ - Renders a component inside the `Modal` component. - - The rendered modal receives a `:return_to` option to properly update - the URL when the modal is closed. - - ## Examples - - <%= live_modal CanneryWeb.TagLive.FormComponent, - id: @tag.id || :new, - action: @live_action, - tag: @tag, - return_to: Routes.tag_index_path(@socket, :index) %> - """ - def live_modal(component, opts) do - path = Keyword.fetch!(opts, :return_to) - live_component(Modal, id: :modal, return_to: path, component: component, opts: opts) - end + alias Phoenix.LiveView.JS def assign_defaults(socket, %{"user_token" => user_token} = _session) do socket @@ -35,4 +16,77 @@ defmodule CanneryWeb.LiveHelpers do def assign_defaults(socket, _session) do socket end + + @doc """ + Renders a live component inside a modal. + + The rendered modal receives a `:return_to` option to properly update + the URL when the modal is closed. + + ## Examples + + <.modal return_to={Routes.<%= schema.singular %>_index_path(@socket, :index)}> + <.live_component + module={<%= inspect context.web_module %>.<%= inspect Module.concat(schema.web_namespace, schema.alias) %>Live.FormComponent} + id={@<%= schema.singular %>.id || :new} + title={@page_title} + action={@live_action} + return_to={Routes.<%= schema.singular %>_index_path(@socket, :index)} + <%= schema.singular %>: @<%= schema.singular %> + /> + + """ + def modal(assigns) do + assigns = assign_new(assigns, :return_to, fn -> nil end) + + ~H""" +
+
+ <%= if @return_to do %> + <%= live_patch to: @return_to, + id: "close", + class: + "absolute top-8 right-10 text-gray-500 hover:text-gray-800 transition-all duration-500 ease-in-out", + phx_click: hide_modal() do %> + + <% end %> + <% else %> + + + + <% end %> + +
+ <%= render_slot(@inner_block) %> +
+
+
+ """ + end + + def hide_modal(js \\ %JS{}) do + js + |> JS.hide(to: "#modal", transition: "fade-out") + |> JS.hide(to: "#modal-content", transition: "fade-out-scale") + end end diff --git a/lib/cannery_web/live/tag_live/index.html.heex b/lib/cannery_web/live/tag_live/index.html.heex index 6a070cae..324f341c 100644 --- a/lib/cannery_web/live/tag_live/index.html.heex +++ b/lib/cannery_web/live/tag_live/index.html.heex @@ -43,12 +43,15 @@ <%= if @live_action in [:new, :edit] do %> - <%= live_modal(CanneryWeb.TagLive.FormComponent, - id: @tag.id || :new, - title: @page_title, - action: @live_action, - tag: @tag, - return_to: Routes.tag_index_path(@socket, :index), - current_user: @current_user - ) %> + <.modal return_to={Routes.tag_index_path(@socket, :index)}> + <.live_component + module={CanneryWeb.TagLive.FormComponent} + id={@tag.id || :new} + title={@page_title} + action={@live_action} + tag={@tag} + return_to={Routes.tag_index_path(@socket, :index)} + current_user={@current_user} + /> + <% end %> diff --git a/priv/gettext/actions.pot b/priv/gettext/actions.pot index a476a759..2ca00e12 100644 --- a/priv/gettext/actions.pot +++ b/priv/gettext/actions.pot @@ -65,8 +65,7 @@ msgid "Invite someone new!" msgstr "" #, elixir-format, ex-autogen -#: lib/cannery_web/components/topbar.ex:96 -#: lib/cannery_web/templates/layout/topbar.html.heex:36 +#: lib/cannery_web/components/topbar.ex:102 #: lib/cannery_web/templates/user_confirmation/new.html.heex:26 #: lib/cannery_web/templates/user_registration/new.html.heex:39 #: lib/cannery_web/templates/user_reset_password/edit.html.heex:41 @@ -102,8 +101,7 @@ msgid "New Tag" msgstr "" #, elixir-format, ex-autogen -#: lib/cannery_web/components/topbar.ex:89 -#: lib/cannery_web/templates/layout/topbar.html.heex:28 +#: lib/cannery_web/components/topbar.ex:95 #: lib/cannery_web/templates/user_confirmation/new.html.heex:21 #: lib/cannery_web/templates/user_registration/new.html.heex:3 #: lib/cannery_web/templates/user_registration/new.html.heex:34 diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot index 4c94dc2b..4b790335 100644 --- a/priv/gettext/default.pot +++ b/priv/gettext/default.pot @@ -154,7 +154,7 @@ msgstr "" #, elixir-format, ex-autogen #: lib/cannery_web/live/ammo_type_live/index.ex:23 -#: lib/cannery_web/live/ammo_type_live/show.ex:46 +#: lib/cannery_web/live/ammo_type_live/show.ex:47 msgid "Edit Ammo type" msgstr "" @@ -218,7 +218,7 @@ msgid "Invite Only" msgstr "" #, elixir-format, ex-autogen -#: lib/cannery_web/components/topbar.ex:60 +#: lib/cannery_web/components/topbar.ex:66 msgid "Invites" msgstr "" @@ -451,7 +451,7 @@ msgid "Show Ammo group" msgstr "" #, elixir-format, ex-autogen -#: lib/cannery_web/live/ammo_type_live/show.ex:45 +#: lib/cannery_web/live/ammo_type_live/show.ex:46 msgid "Show Ammo type" msgstr "" diff --git a/priv/gettext/prompts.pot b/priv/gettext/prompts.pot index 7bc6dc35..f1670197 100644 --- a/priv/gettext/prompts.pot +++ b/priv/gettext/prompts.pot @@ -11,7 +11,7 @@ msgid "" msgstr "" #, elixir-format, ex-autogen -#: lib/cannery_web/live/ammo_type_live/form_component.ex:193 +#: lib/cannery_web/live/ammo_type_live/form_component.ex:197 #: lib/cannery_web/live/container_live/form_component.ex:126 #: lib/cannery_web/live/invite_live/form_component.ex:98 #: lib/cannery_web/live/tag_live/form_component.ex:101 @@ -20,7 +20,7 @@ msgstr "" #, elixir-format, ex-autogen #: lib/cannery_web/live/ammo_type_live/index.ex:41 -#: lib/cannery_web/live/ammo_type_live/show.ex:39 +#: lib/cannery_web/live/ammo_type_live/show.ex:40 #: lib/cannery_web/live/invite_live/index.ex:54 #: lib/cannery_web/live/invite_live/index.ex:120 #: lib/cannery_web/live/tag_live/index.ex:41 @@ -109,8 +109,7 @@ msgid "Are you sure you want to delete your account?" msgstr "" #, elixir-format, ex-autogen -#: lib/cannery_web/components/topbar.ex:75 -#: lib/cannery_web/templates/layout/topbar.html.heex:21 +#: lib/cannery_web/components/topbar.ex:81 msgid "Are you sure you want to log out?" msgstr ""