improvement: add json editor

assets/js/app.js

@@ -15,6 +15,15 @@ Hooks.JsonEditor = {
     const inputId = this.el.getAttribute("data-input-id")
     const hook = this;
     this.editor = new JSONEditor(this.el, {
+      onChangeText: (json) => {
+        const target = document.getElementById(inputId)
+        try {
+          JSON.parse(json)
+          target.value = json;
+          target.dispatchEvent(new Event('change', { 'bubbles': true }))
+        } catch (_e) {
+        }
+      },
       onChangeJSON: (json) => {
         const target = document.getElementById(inputId)
 
@@ -24,13 +33,32 @@ Hooks.JsonEditor = {
       onModeChange: (newMode) => {
         hook.mode = newMode;
       },
-      modes: ['preview', 'tree']
+      modes: ['text', 'tree']
     }, JSON.parse(document.getElementById(inputId).value));
 
     editors[this.el.id] = this.editor
   }
 }
 
+Hooks.JsonEditorSource = {
+  updated() {
+    try {
+      let editor = editors[this.el.getAttribute("data-editor-id")];
+      if (editor.getMode() === "tree") {
+        editor.update(JSON.parse(this.el.value))
+      } else {
+        if (console.log(editor.get()) !== console.log(JSON.parse(this.el.value))) {
+          editor.setText(this.el.value)
+        } else {
+        }
+      }
+    } catch (_e) {
+
+    }
+  }
+}
+
+
 Hooks.JsonView = {
   updated() {
     const json = JSON.parse(this.el.getAttribute("data-json"));
@@ -46,18 +74,6 @@ Hooks.JsonView = {
   }
 }
 
-Hooks.JsonEditorSource = {
-  updated() {
-    try {
-      editors[this.el.getAttribute("data-editor-id")].update(JSON.parse(response))
-      updateText(this.el.value)
-    } catch (e) {
-
-    }
-  }
-}
-
-
 Hooks.Actor = {
   mounted() {
     this.handleEvent("set_actor", (payload) => {

assets/yarn.lock

@@ -994,14 +994,6 @@
   dependencies:
     "color-convert" "^2.0.1"
 
-"anymatch@^2.0.0":
-  "integrity" "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw=="
-  "resolved" "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz"
-  "version" "2.0.0"
-  dependencies:
-    "micromatch" "^3.1.4"
-    "normalize-path" "^2.1.1"
-
 "anymatch@~3.1.1":
   "integrity" "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg=="
   "resolved" "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz"
@@ -1101,11 +1093,6 @@
   "resolved" "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz"
   "version" "1.0.0"
 
-"async-each@^1.0.1":
-  "integrity" "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ=="
-  "resolved" "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz"
-  "version" "1.0.3"
-
 "async-foreach@^0.1.3":
   "integrity" "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI="
   "resolved" "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz"
@@ -1200,23 +1187,11 @@
   "resolved" "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz"
   "version" "5.2.2"
 
-"binary-extensions@^1.0.0":
-  "integrity" "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw=="
-  "resolved" "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz"
-  "version" "1.13.1"
-
 "binary-extensions@^2.0.0":
   "integrity" "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ=="
   "resolved" "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz"
   "version" "2.1.0"
 
-"bindings@^1.5.0":
-  "integrity" "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ=="
-  "resolved" "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz"
-  "version" "1.5.0"
-  dependencies:
-    "file-uri-to-path" "1.0.0"
-
 "block-stream@*":
   "integrity" "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo="
   "resolved" "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz"
@@ -1247,7 +1222,7 @@
     "balanced-match" "^1.0.0"
     "concat-map" "0.0.1"
 
-"braces@^2.3.1", "braces@^2.3.2":
+"braces@^2.3.1":
   "integrity" "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w=="
   "resolved" "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz"
   "version" "2.3.2"
@@ -1564,24 +1539,6 @@
     "ansi-styles" "^4.1.0"
     "supports-color" "^7.1.0"
 
-"chokidar@^2.1.8":
-  "integrity" "sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg=="
-  "resolved" "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz"
-  "version" "2.1.8"
-  dependencies:
-    "anymatch" "^2.0.0"
-    "async-each" "^1.0.1"
-    "braces" "^2.3.2"
-    "fsevents" "^1.2.7"
-    "glob-parent" "^3.1.0"
-    "inherits" "^2.0.3"
-    "is-binary-path" "^1.0.0"
-    "is-glob" "^4.0.0"
-    "normalize-path" "^3.0.0"
-    "path-is-absolute" "^1.0.0"
-    "readdirp" "^2.2.1"
-    "upath" "^1.1.1"
-
 "chokidar@^3.4.1":
   "integrity" "sha512-IZHaDeBeI+sZJRX7lGcXsdzgvZqKv6sECqsbErJA4mHWfpRrD8B97kSFN4cQz6nGBGiuFia1MKR4d6c1o8Cv7A=="
   "resolved" "https://registry.npmjs.org/chokidar/-/chokidar-3.4.2.tgz"
@@ -2521,11 +2478,6 @@
   "resolved" "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz"
   "version" "3.5.2"
 
-"file-uri-to-path@1.0.0":
-  "integrity" "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw=="
-  "resolved" "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz"
-  "version" "1.0.0"
-
 "fill-range@^4.0.0":
   "integrity" "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc="
   "resolved" "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz"
@@ -2658,14 +2610,6 @@
   "resolved" "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   "version" "1.0.0"
 
-"fsevents@^1.2.7":
-  "integrity" "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw=="
-  "resolved" "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz"
-  "version" "1.2.13"
-  dependencies:
-    "bindings" "^1.5.0"
-    "nan" "^2.12.1"
-
 "fsevents@~2.1.2":
   "integrity" "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ=="
   "resolved" "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz"
@@ -3105,13 +3049,6 @@
   "resolved" "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz"
   "version" "0.3.2"
 
-"is-binary-path@^1.0.0":
-  "integrity" "sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg="
-  "resolved" "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz"
-  "version" "1.0.1"
-  dependencies:
-    "binary-extensions" "^1.0.0"
-
 "is-binary-path@~2.1.0":
   "integrity" "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw=="
   "resolved" "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz"
@@ -3240,7 +3177,7 @@
   dependencies:
     "is-extglob" "^2.1.0"
 
-"is-glob@^4.0.0", "is-glob@^4.0.1", "is-glob@~4.0.1":
+"is-glob@^4.0.1", "is-glob@~4.0.1":
   "integrity" "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg=="
   "resolved" "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz"
   "version" "4.0.1"
@@ -3726,7 +3663,7 @@
   "resolved" "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz"
   "version" "2.0.0"
 
-"micromatch@^3.1.10", "micromatch@^3.1.4":
+"micromatch@^3.1.10":
   "integrity" "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg=="
   "resolved" "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz"
   "version" "3.1.10"
@@ -3893,7 +3830,7 @@
   "resolved" "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz"
   "version" "2.0.0"
 
-"nan@^2.12.1", "nan@^2.13.2":
+"nan@^2.13.2":
   "integrity" "sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg=="
   "resolved" "https://registry.npmjs.org/nan/-/nan-2.14.0.tgz"
   "version" "2.14.0"
@@ -4036,13 +3973,6 @@
     "semver" "2 || 3 || 4 || 5"
     "validate-npm-package-license" "^3.0.1"
 
-"normalize-path@^2.1.1":
-  "integrity" "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk="
-  "resolved" "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz"
-  "version" "2.1.1"
-  dependencies:
-    "remove-trailing-separator" "^1.0.1"
-
 "normalize-path@^3.0.0", "normalize-path@~3.0.0":
   "integrity" "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
   "resolved" "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz"
@@ -5123,15 +5053,6 @@
     "string_decoder" "~1.1.1"
     "util-deprecate" "~1.0.1"
 
-"readdirp@^2.2.1":
-  "integrity" "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ=="
-  "resolved" "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz"
-  "version" "2.2.1"
-  dependencies:
-    "graceful-fs" "^4.1.11"
-    "micromatch" "^3.1.10"
-    "readable-stream" "^2.0.2"
-
 "readdirp@~3.4.0":
   "integrity" "sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ=="
   "resolved" "https://registry.npmjs.org/readdirp/-/readdirp-3.4.0.tgz"
@@ -5213,11 +5134,6 @@
   dependencies:
     "jsesc" "~0.5.0"
 
-"remove-trailing-separator@^1.0.1":
-  "integrity" "sha1-wkvOKig62tW8P1jg1IJJuSN52O8="
-  "resolved" "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz"
-  "version" "1.1.0"
-
 "repeat-element@^1.1.2":
   "integrity" "sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g=="
   "resolved" "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.3.tgz"
@@ -6194,11 +6110,6 @@
     "has-value" "^0.3.1"
     "isobject" "^3.0.0"
 
-"upath@^1.1.1":
-  "integrity" "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg=="
-  "resolved" "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz"
-  "version" "1.2.0"
-
 "uri-js@^4.2.2":
   "integrity" "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ=="
   "resolved" "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz"
@@ -6290,13 +6201,6 @@
   "resolved" "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz"
   "version" "1.1.2"
 
-"watchpack-chokidar2@^2.0.0":
-  "integrity" "sha512-9TyfOyN/zLUbA288wZ8IsMZ+6cbzvsNyEzSBp6e/zkifi6xxbl8SmQ/CxQq32k8NNqrdVEVUVSEf56L4rQ/ZxA=="
-  "resolved" "https://registry.npmjs.org/watchpack-chokidar2/-/watchpack-chokidar2-2.0.0.tgz"
-  "version" "2.0.0"
-  dependencies:
-    "chokidar" "^2.1.8"
-
 "watchpack@^1.6.0":
   "integrity" "sha512-aWAgTW4MoSJzZPAicljkO1hsi1oKj/RRq/OJQh2PKI2UKL04c2Bs+MBOB+BBABHTXJpf9mCwHN7ANCvYsvY2sg=="
   "resolved" "https://registry.npmjs.org/watchpack/-/watchpack-1.7.4.tgz"

lib/ash_admin/components/resource/form.ex

@@ -1019,8 +1019,20 @@ defmodule AshAdmin.Components.Resource.Form do
         socket.assigns.form,
         path,
         fn adding_form ->
+          new_value =
+            adding_form
+            |> Phoenix.HTML.Form.form_for("foo")
+            |> Phoenix.HTML.Form.input_value(String.to_existing_atom(field))
+            |> Kernel.||([])
+            |> indexed_list()
+            |> append_to_and_map(nil)
+
           new_params =
-            Map.update(adding_form.params, field, %{"0" => nil}, &append_to_map(&1, nil))
+            Map.put(
+              adding_form.params,
+              field,
+              new_value
+            )
 
           AshPhoenix.Form.validate(adding_form, new_params)
         end
@@ -1135,6 +1147,19 @@ defmodule AshAdmin.Components.Resource.Form do
     assign(socket, :targets, MapSet.put(old_targets, Enum.map(target, &to_string/1)))
   end
 
+  defp indexed_list(map) when is_map(map) do
+    map
+    |> Map.keys()
+    |> Enum.map(&String.to_integer/1)
+    |> Enum.sort()
+    |> Enum.map(&map[to_string(&1)])
+  rescue
+    _ ->
+      List.wrap(map)
+  end
+
+  defp indexed_list(other), do: List.wrap(other)
+
   defp remove_value(form, field, index) do
     current_value =
       form.source
@@ -1175,17 +1200,13 @@ defmodule AshAdmin.Components.Resource.Form do
     take_targets(params, targets)["form"]
   end
 
-  defp append_to_map(map, value) do
+  defp append_to_and_map(list, value) do
-    key =
+    list
-      map
+    |> Enum.concat([value])
-      |> Kernel.||(%{})
+    |> Enum.with_index()
-      |> Map.keys()
+    |> Map.new(fn {v, i} ->
-      |> Enum.map(&String.to_integer/1)
+      {"#{i}", v}
-      |> Enum.max(fn -> -1 end)
+    end)
-      |> Kernel.+(1)
-      |> to_string()
-
-    Map.put(map || %{}, key, value)
   end
 
   defp take_targets(params, []), do: params

lib/ash_admin/components/resource/show.ex

@@ -282,23 +282,24 @@ defmodule AshAdmin.Components.Resource.Show do
     end
   end
 
-  defp render_attribute(assigns, resource, record, %{type: {:array, Ash.Type.Map}} = attribute, nested?) do
+  defp render_attribute(
-    render_attribute(assigns, resource, record, %{attribute | type: Ash.Type.Map}, nested?) do
+         assigns,
+         resource,
+         record,
+         %{type: {:array, Ash.Type.Map}} = attribute,
+         nested?
+       ) do
+    render_attribute(assigns, resource, record, %{attribute | type: Ash.Type.Map}, nested?)
   end
 
-  defp render_attribute(assigns, resource, record, %{type: Ash.Type.Map} = attribute, nested?) do
+  defp render_attribute(assigns, _resource, record, %{type: Ash.Type.Map} = attribute, _nested?) do
-    render_attribute(assigns, resource, record, %{attribute | type: Ash.Type.Map}, nested?) do
+    encoded = Jason.encode!(Map.get(record, attribute.name))
-  end
-
-  def render_attribute_input(assigns, %{type: Ash.Type.Map} = attribute, form, value, name) do
-    encoded = Jason.encode!(value(value, form, attribute))
 
     ~H"""
       <div
       phx-hook="JsonView"
-      phx-update="ignore"
       data-json={{encoded}}
-      id={{"_#{attribute.name}_json"}}
+      id={{"_#{AshAdmin.Helpers.encode_primary_key(record)}_#{attribute.name}_json"}}
       />
     """
   rescue

mix.exs

@@ -88,7 +88,8 @@ defmodule AshAdmin.MixProject do
     [
       # {:ash, "~> 1.46 and >= 1.46.9"},
       {:ash, path: "../ash", override: true},
-      {:ash_phoenix, "~> 0.5 and >= 0.5.1"},
+      # {:ash_phoenix, "~> 0.5 and >= 0.5.1"},
+      {:ash_phoenix, path: "../ash_phoenix"},
       {:surface, "~> 0.4.1"},
       {:phoenix_live_view, "~> 0.15.4"},
       {:phoenix_html, "~> 2.14.1 or ~> 2.15"},