Merge pull request #103 from tfwright/feat/action-args

Add support for action arguments
tfwright · Feb 16, 2024 · c6209e4 · c6209e4
2 parents 11069a3 + 5966713
commit c6209e4
Show file tree

Hide file tree

Showing 10 changed files with 161 additions and 51 deletions.
diff --git a/assets/css/app.css b/assets/css/app.css
@@ -431,7 +431,6 @@ input[type="submit"] {
   .resource__table tfoot td {
     @apply p-1;
     @apply bottom-0;
-    @apply sticky;
   }
 
   .resource__table dd {
@@ -737,7 +736,7 @@ input[type="submit"] {
   @apply ml-2;
 }
 
-.task__modal {
+.modal {
   @apply fixed;
   @apply hidden;
   @apply inset-0;
@@ -750,7 +749,7 @@ input[type="submit"] {
   @apply m-0;
 }
 
-.task__modal > div {
+.modal > div {
   @apply relative;
   @apply top-20;
   @apply mx-auto;
@@ -763,40 +762,40 @@ input[type="submit"] {
   @apply whitespace-normal;
 }
 
-.task__modal form {
+.modal form {
   @apply flex;
   @apply flex-col;
   @apply mt-3;
 }
 
-.task__modal label {
+.modal label {
   @apply flex;
   @apply h-7;
   @apply w-7;
-  @apply rounded-full; 
+  @apply rounded-full;
   @apply bg-gray-100;
   @apply items-center;
   @apply justify-center;
   @apply mr-2;
 }
 
-.task__modal input {
+.modal input {
   @apply grow;
 }
 
-.task__modal pre {
+.modal pre {
   @apply inline;
   @apply underline;
   @apply decoration-dotted;
   @apply underline-offset-4;
   @apply decoration-2;
 }
 
-.task__modal form > div {
+.modal form > div {
   @apply flex;
   @apply my-1;
 }
 
-.task__modal form > div:last-of-type {
+.modal form > div:last-of-type {
   @apply mb-3;
-}
+}
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -92,7 +92,21 @@ Hooks.MapInput = {
 Hooks.ViewPage = {
   mounted() {
     this.el.addEventListener("live_admin:action", e => {
-      this.pushEventTo(this.el, "action", {action: e.target.dataset.action, ids: this.selected});
+      if (e.target.tagName === "FORM") {
+        const params = [...new FormData(e.target)].reduce((params, [key,val]) => {
+          if (key === "args[]") {
+            return { ...params, args: [...params.args, val] }
+          } else {
+            return { ...params, [key] : val }
+          }
+        }, {args: []}) ;
+
+        e.target.reset();
+
+        this.pushEventTo(this.el, "action", params);
+      } else {
+        this.pushEventTo(this.el, "action", {name: e.target.dataset.action});
+      }
     })
   }
 }
@@ -104,8 +118,18 @@ Hooks.IndexPage = {
     this.el.addEventListener("live_admin:action", e => {
       if (e.target.dataset.action === "delete") {
         this.pushEventTo(this.el, "delete", {ids: this.selected});
+      } else if (e.target.tagName === "FORM") {
+        const params = [...new FormData(e.target)].reduce((params, [key,val]) => {
+          if (key === "args[]") {
+            return { ...params, args: [...params.args, val] }
+          } else {
+            return { ...params, [key] : val }
+          }
+        }, {args: []}) ;
+
+        this.pushEventTo(this.el, "action", {...params, ids: this.selected});
       } else {
-        this.pushEventTo(this.el, "action", {action: e.target.dataset.action, ids: this.selected});
+        this.pushEventTo(this.el, "action", {name: e.target.dataset.action, ids: this.selected});
       }
     })
 

diff --git a/dev/user_admin.ex b/dev/user_admin.ex
@@ -5,12 +5,21 @@ defmodule DemoWeb.UserAdmin do
       immutable_fields: [:encrypted_password, :inserted_at],
       components: [new: DemoWeb.CreateUserForm],
       label_with: :name,
-      actions: [:deactivate, :fake, :fake],
+      actions: [:deactivate, :set_password],
       tasks: [:regenerate_passwords, :aggregate],
       render_with: :render_field
 
   use PhoenixHTMLHelpers
 
+  def set_password(user, _, new_password) do
+    user =
+      user
+      |> Ecto.Changeset.change(encrypted_password: Base.encode16(new_password))
+      |> Demo.Repo.update!()
+
+    {:ok, user}
+  end
+
   def deactivate(user, _) do
     user
     |> Ecto.Changeset.change(active: false)

diff --git a/dist/css/app.css b/dist/css/app.css
@@ -1171,8 +1171,6 @@ tfoot td {
 .resource__table tfoot td {
   padding: 0.25rem;
   bottom: 0px;
-  position: -webkit-sticky;
-  position: sticky;
 }
 
 .resource__table dd {
@@ -1720,7 +1718,7 @@ input[type="submit"] {
   margin-left: 0.5rem;
 }
 
-.task__modal {
+.modal {
   position: fixed;
   display: none;
   inset: 0px;
@@ -1733,7 +1731,7 @@ input[type="submit"] {
   margin: 0px;
 }
 
-.task__modal > div {
+.modal > div {
   position: relative;
   top: 5rem;
   margin-left: auto;
@@ -1750,13 +1748,13 @@ input[type="submit"] {
   white-space: normal;
 }
 
-.task__modal form {
+.modal form {
   display: flex;
   flex-direction: column;
   margin-top: 0.75rem;
 }
 
-.task__modal label {
+.modal label {
   display: flex;
   height: 1.75rem;
   width: 1.75rem;
@@ -1768,11 +1766,11 @@ input[type="submit"] {
   margin-right: 0.5rem;
 }
 
-.task__modal input {
+.modal input {
   flex-grow: 1;
 }
 
-.task__modal pre {
+.modal pre {
   display: inline;
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
@@ -1782,18 +1780,18 @@ input[type="submit"] {
   text-decoration-thickness: 2px;
 }
 
-.task__modal form > div {
+.modal form > div {
   display: flex;
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
 }
 
-.task__modal form > div:last-of-type {
+.modal form > div:last-of-type {
   margin-bottom: 0.75rem;
 }
 
 .focus\:ring:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
+}
diff --git a/dist/js/app.js b/dist/js/app.js
diff --git a/lib/live_admin/components.ex b/lib/live_admin/components.ex
@@ -123,6 +123,76 @@ defmodule LiveAdmin.Components do
     """
   end
 
+  def action_control(assigns) do
+    {m, f, []} =
+      assigns.resource
+      |> LiveAdmin.fetch_config(:actions, assigns.session)
+      |> Enum.find_value(fn
+        {action_name, mfa} -> action_name == assigns.action && mfa
+        action_name -> action_name == assigns.action && {assigns.resource, action_name, []}
+      end)
+
+    extra_arg_count =
+      :functions
+      |> m.__info__()
+      |> Enum.find_value(fn {name, arity} -> name == f && arity - 2 end)
+
+    assigns = assign(assigns, extra_arg_count: extra_arg_count)
+
+    ~H"""
+    <button
+      class="resource__action--link"
+      data-action={@action}
+      phx-click={
+        if @extra_arg_count > 0,
+          do:
+            JS.show(
+              to: "##{@action}-action-modal",
+              transition: {"ease-in duration-300", "opacity-0", "opacity-100"}
+            ),
+          else: JS.dispatch("live_admin:action")
+      }
+      data-confirm={if @extra_arg_count > 0, do: nil, else: "Are you sure?"}
+    >
+      <%= @action |> to_string() |> humanize() %>
+    </button>
+    <%= if @extra_arg_count > 0 do %>
+      <.action_modal id={"#{@action}-action-modal"}>
+        <pre><%= @action %></pre> action requires additional arguments:
+        <.form
+          for={Phoenix.Component.to_form(%{})}
+          phx-submit={JS.dispatch("live_admin:action") |> JS.hide(to: "##{@action}-action-modal")}
+        >
+          <input type="hidden" name="name" value={@action} />
+          <%= for num <- 1..@extra_arg_count do %>
+            <div>
+              <label><%= num %></label>
+              <input type="text" name="args[]" />
+            </div>
+          <% end %>
+          <input type="submit" value="Execute" />
+        </.form>
+      </.action_modal>
+    <% end %>
+    """
+  end
+
+  defp action_modal(assigns) do
+    ~H"""
+    <div
+      id={@id}
+      class="modal"
+      phx-capture-click={
+        JS.hide(to: "##{@id}", transition: {"ease-out duration-300", "opacity-100", "opacity-0"})
+      }
+    >
+      <div>
+        <%= render_slot(@inner_block) %>
+      </div>
+    </div>
+    """
+  end
+
   defp list(assigns) do
     ~H"""
     <div>

diff --git a/lib/live_admin/components/container.ex b/lib/live_admin/components/container.ex
@@ -411,7 +411,7 @@ defmodule LiveAdmin.Components.Container do
     ~H"""
     <div
       id={@id}
-      class="task__modal"
+      class="modal"
       phx-capture-click={
         JS.hide(to: "##{@id}", transition: {"ease-out duration-300", "opacity-100", "opacity-0"})
       }

diff --git a/lib/live_admin/components/resource/index.ex b/lib/live_admin/components/resource/index.ex
@@ -233,14 +233,7 @@ defmodule LiveAdmin.Components.Container.Index do
                     items={LiveAdmin.fetch_config(@resource, :actions, @config)}
                     disabled={Enum.empty?(LiveAdmin.fetch_config(@resource, :actions, @config))}
                   >
-                    <button
-                      class="resource__action--link"
-                      data-action={action}
-                      phx-click={JS.dispatch("live_admin:action")}
-                      data-confirm="Are you sure?"
-                    >
-                      <%= action |> to_string() |> humanize() %>
-                    </button>
+                    <.action_control action={action} session={@session} resource={@resource} />
                   </.dropdown>
                 </div>
               </td>
@@ -343,7 +336,7 @@ defmodule LiveAdmin.Components.Container.Index do
   @impl true
   def handle_event(
         "action",
-        %{"action" => action, "ids" => ids},
+        params = %{"name" => action, "ids" => ids},
         socket = %{assigns: %{resource: resource, prefix: prefix, repo: repo}}
       ) do
     records = Resource.all(ids, resource, prefix, repo)
@@ -360,7 +353,7 @@ defmodule LiveAdmin.Components.Container.Index do
               action_name -> to_string(action_name) == action && {resource, action_name, []}
             end)
 
-          apply(m, f, [record, socket.assigns.session])
+          apply(m, f, [record, socket.assigns.session] ++ Map.get(params, "args", []))
         end)
       end)
       |> Task.await_many()

diff --git a/lib/live_admin/components/resource/view.ex b/lib/live_admin/components/resource/view.ex
@@ -21,7 +21,7 @@ defmodule LiveAdmin.Components.Container.View do
   @impl true
   def render(assigns) do
     ~H"""
-    <div id="view-page" class="view__container" phx-hook="IndexPage" phx-target={@myself}>
+    <div id="view-page" class="view__container" phx-hook="ViewPage" phx-target={@myself}>
       <div class="resource__table">
         <dl>
           <%= for {field, type, _} <- Resource.fields(@resource, @config) do %>
@@ -84,14 +84,7 @@ defmodule LiveAdmin.Components.Container.View do
             items={LiveAdmin.fetch_config(@resource, :actions, @config)}
             disabled={Enum.empty?(LiveAdmin.fetch_config(@resource, :actions, @config))}
           >
-            <button
-              class="resource__action--link"
-              data-action={action}
-              phx-click={JS.dispatch("live_admin:action")}
-              data-confirm="Are you sure?"
-            >
-              <%= action |> to_string() |> humanize() %>
-            </button>
+            <.action_control action={action} session={@session} resource={@resource} />
           </.dropdown>
         </div>
       </div>
@@ -136,7 +129,7 @@ defmodule LiveAdmin.Components.Container.View do
   @impl true
   def handle_event(
         "action",
-        params = %{"action" => action},
+        params = %{"name" => action},
         socket = %{assigns: %{resource: resource, prefix: prefix, repo: repo, session: session}}
       ) do
     record =
@@ -154,7 +147,7 @@ defmodule LiveAdmin.Components.Container.View do
       end)
 
     socket =
-      case apply(m, f, [record, socket.assigns.session]) do
+      case apply(m, f, [record, socket.assigns.session] ++ Map.get(params, "args", [])) do
         {:ok, record} ->
           socket
           |> push_event("success", %{

diff --git a/test/live_admin/components/container_test.exs b/test/live_admin/components/container_test.exs
@@ -57,7 +57,7 @@ defmodule LiveAdmin.Components.ContainerTest do
     test "runs configured action on selected records", %{view: view} do
       view
       |> element("#list")
-      |> render_hook("action", %{action: "user_action", ids: []})
+      |> render_hook("action", %{name: "user_action", ids: []})
 
       assert_redirected(view, "/user")
     end