Expand drag-and-drop array reordering to secondary form contexts

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

REUSE.toml

@@ -5,7 +5,7 @@
 version = 1
 
 [[annotations]]
-path = ["REUSE.toml", "priv/static/assets/app*"]
+path = ["REUSE.toml", ".gitattributes", "priv/static/assets/app*"]
 SPDX-FileCopyrightText = "2020 Zach Daniel"
 SPDX-License-Identifier = "MIT"
 
@@ -14,6 +14,16 @@ path = "assets/vendor/topbar.js"
 SPDX-FileCopyrightText = "2021 Buu Nguyen"
 SPDX-License-Identifier = "MIT"
 
+[[annotations]]
+path = "assets/vendor/sortable.js"
+SPDX-FileCopyrightText = "SortableJS contributors <https://github.com/SortableJS/Sortable>"
+SPDX-License-Identifier = "MIT"
+
+[[annotations]]
+path = ["assets/package.json", "assets/package-lock.json"]
+SPDX-FileCopyrightText = "2020 ash_admin contributors <https://github.com/ash-project/ash_admin/graphs/contributors>"
+SPDX-License-Identifier = "MIT"
+
 [[annotations]]
 path = ["assets/vendor/heroicons/*", "assets/vendor/heroicons/**/*"]
 SPDX-FileCopyrightText = "2020 Refactoring UI Inc"

assets/css/app.css

@@ -21,6 +21,18 @@ main.admin-main::after {
   height: 4rem;
 }
 
+/* Sortable.js drag-and-drop for array fields */
+
+/* placeholder element is slightly transparent */
+.sortable-ghost {
+  opacity: 0.4;
+}
+
+/* draggable element is styled to indicate it's being dragged */
+.sortable-drag {
+  cursor: grabbing;
+}
+
 /* CodeMirror 6 editor styling */
 .cm-editor {
   min-height: 200px;

assets/js/app.js

@@ -4,6 +4,8 @@
 // SPDX-License-Identifier: MIT
 
 import topbar from "../vendor/topbar";
+// vendored Sortable.js for drag-and-drop reordering of primitive array fields
+import Sortable from "../vendor/sortable";
 import {
   EditorView, keymap, lineNumbers, highlightActiveLineGutter,
   highlightSpecialChars, drawSelection, dropCursor, rectangularSelection,
@@ -345,6 +347,39 @@ Hooks.MaintainAttrs = {
   },
 };
 
+// Sortable.js drag-and-drop for array fields
+Hooks.Sortable = {
+  // initialize Sortable on the array container when the LiveView hook mounts
+  mounted() {
+    this.sortable = new Sortable(this.el, {
+      animation: 150,
+      draggable: '[data-sortable="true"]',
+      handle: '[data-sort-handle="true"]',
+      ghostClass: "sortable-ghost",
+      dragClass: "sortable-drag",
+      forceFallback: true,
+      // after a drop, send the new row order to the server
+      onEnd: () => {
+        const indices = Array.from(
+          this.el.querySelectorAll('[data-sortable="true"]')
+        ).map((el) => el.dataset.sortIndex);
+        if (indices.length < 2) return;
+        this.pushEventTo(this.el, "update_array_sorting", {
+          path: this.el.dataset.path,
+          field: this.el.dataset.field,
+          indices: indices,
+        });
+      },
+    });
+  },
+  // tear down the Sortable instance when the hook is destroyed
+  destroyed() {
+    if (this.sortable) {
+      this.sortable.destroy();
+    }
+  },
+};
+
 Hooks.Typeahead = {
   mounted() {
     this.aborter = new AbortController();

assets/vendor/sortable.js.license

@@ -0,0 +1,3 @@
+SPDX-FileCopyrightText: SortableJS contributors <https://github.com/SortableJS/Sortable>
+
+SPDX-License-Identifier: MIT

dev/resources/accounts/resources/calculator.ex

@@ -37,5 +37,14 @@ defmodule Demo.Accounts.Calculator do
         :ok
       end
     end
+
+    # demo: primitive array arg for drag-and-drop sorting in GenericAction forms
+    action :echo_tags, {:array, :string} do
+      argument :tags, {:array, :string}, allow_nil?: true, public?: true
+
+      run fn input, _ ->
+        {:ok, List.wrap(input.arguments[:tags])}
+      end
+    end
   end
 end

dev/resources/accounts/resources/user.ex

@@ -23,15 +23,14 @@ defmodule Demo.Accounts.User do
     end
 
     show_action :read
-    read_actions [:me, :read, :by_id, :by_name]
+    read_actions [:me, :read, :by_id, :by_name, :filter_by_tags]
 
     table_columns [:id, :first_name, :last_name, :representative, :admin, :full_name, :api_key, :date_of_birth]
     table_filterable_columns [:first_name]
     table_sortable_columns [:first_name, :last_name]
 
-    show_calculations [:multi_arguments, :is_super_admin?, :full_name, :nested_embed]
+    show_calculations [:multi_arguments, :is_super_admin?, :full_name, :nested_embed, :join_tags]
   end
-
   multitenancy do
     strategy :attribute
     attribute :org
@@ -67,6 +66,11 @@ defmodule Demo.Accounts.User do
       filter expr(first_name == ^arg(:first_name) and last_name == ^arg(:last_name))
     end
 
+    # demo: primitive array arg for drag-and-drop sorting in DataTable query forms
+    read :filter_by_tags do
+      argument :tags, {:array, :string}, allow_nil?: true, public?: true
+    end
+
     create :create do
       argument :offices, {:array, :map}
       change manage_relationship(:offices, type: :append)
@@ -126,6 +130,11 @@ defmodule Demo.Accounts.User do
     calculate :nested_embed, :string, expr(tags) do
       argument :nested_embed, Demo.Accounts.NestedEmbed, allow_nil?: false
     end
+
+    # demo: primitive array arg for drag-and-drop sorting on Show calculation forms
+    calculate :join_tags, :string, expr("") do
+      argument :tags, {:array, :string}, allow_nil?: true
+    end
   end
 
   attributes do

lib/ash_admin/components/resource/data_table.ex

@@ -354,7 +354,11 @@ defmodule AshAdmin.Components.Resource.DataTable do
   end
 
   def handle_event("validate", %{"query" => query}, socket) do
-    query = AshPhoenix.Form.validate(socket.assigns.query, query)
+    query =
+      AshPhoenix.Form.validate(
+        socket.assigns.query,
+        AshAdmin.Helpers.sanitize_form_params(query)
+      )
 
     {:noreply, assign(socket, query: query)}
   end
@@ -363,7 +367,10 @@ defmodule AshAdmin.Components.Resource.DataTable do
     {:noreply,
      push_navigate(
        socket,
-       to: self_path(socket.assigns.url_path, socket.assigns.params, %{"args" => query_params})
+       to:
+         self_path(socket.assigns.url_path, socket.assigns.params, %{
+           "args" => AshAdmin.Helpers.sanitize_form_params(query_params)
+         })
      )}
   end
 
@@ -434,6 +441,23 @@ defmodule AshAdmin.Components.Resource.DataTable do
      |> assign(:query, query)}
   end
 
+  def handle_event(
+        "update_array_sorting",
+        %{"path" => path, "field" => field, "indices" => indices},
+        socket
+      ) do
+    query =
+      AshPhoenix.Form.update_form(
+        socket.assigns.query,
+        path,
+        &sort_array_value(&1, field, indices)
+      )
+
+    {:noreply,
+     socket
+     |> assign(:query, query)}
+  end
+
   defp indexed_list(map) when is_map(map) do
     map
     |> Map.keys()
@@ -502,6 +526,17 @@ defmodule AshAdmin.Components.Resource.DataTable do
     AshPhoenix.Form.validate(form, new_params)
   end
 
+  defp sort_array_value(form, field, indices) do
+    new_value =
+      form
+      |> AshPhoenix.Form.value(String.to_existing_atom(field))
+      |> reorder_by_indices(indices)
+
+    new_params = Map.put(form.params, field, new_value)
+
+    AshPhoenix.Form.validate(form, new_params)
+  end
+
   # Field rendering - delegate to existing Table component logic
   defp render_field_value(record, field_name, assigns) do
     attribute = Ash.Resource.Info.field(assigns.resource, field_name)