Save progress towards showing validation errors

lib/beacon/live_admin/components/visual_editor/key_value_control.ex

@@ -1,6 +1,7 @@
 defmodule Beacon.LiveAdmin.VisualEditor.KeyValueControl do
   @moduledoc false
 
+require IEx
   use Beacon.LiveAdmin.Web, :live_component
   alias Beacon.LiveAdmin.VisualEditor.ControlSection
 
@@ -29,12 +30,16 @@ defmodule Beacon.LiveAdmin.VisualEditor.KeyValueControl do
           </button>
         </:header_buttons>
         <%= if @editing do %>
-          <.form :let={f} for={@form} phx-submit="save" phx-change="handle_change" phx-target={@myself}>
+          <.form :let={f} for={@changeset} phx-submit="save" phx-change="handle_change" phx-target={@myself}>
             <%!-- <form phx-submit="save" phx-change="handle_change" phx-target={@myself}> --%>
-            <.input field={f[:name]} placeholder="Name" name="name" class="w-full py-1 px-2 bg-gray-100 border-gray-100 rounded-md leading-6 text-sm" />
-
-            <.input field={f[:value]} placeholder="Value" name="value" class="mt-3 w-full py-1 px-2 bg-gray-100 border-gray-100 rounded-md leading-6 text-sm" />
-
+            <.input field={f[:name]} placeholder="Name" class="w-full py-1 px-2 bg-gray-100 border-gray-100 rounded-md leading-6 text-sm" />
+            <%!-- <%= inspect(f[:value]) %> --%>
+            <.input field={f[:value]} errors={["error 1", "error 2"]} placeholder="Value" class="mt-3 w-full py-1 px-2 bg-gray-100 border-gray-100 rounded-md leading-6 text-sm" />
+              <div class="error-messages">
+                <%= for {field, {message, _}} <- @changeset.errors do %>
+                  <p><%= field %> <%= message %></p>
+                <% end %>
+              </div>
             <%!-- <input class="w-full py-1 px-2 bg-gray-100 border-gray-100 rounded-md leading-6 text-sm" placeholder="Name" name="name" value={@name} /> --%>
             <%!-- <input class="mt-3 w-full py-1 px-2 bg-gray-100 border-gray-100 rounded-md leading-6 text-sm" placeholder="Value" name="value" value={@value} /> --%>
             <div class="mt-3 grid grid-cols-2 gap-x-2">
@@ -67,11 +72,11 @@ defmodule Beacon.LiveAdmin.VisualEditor.KeyValueControl do
     name = Map.get(assigns, :name, "")
     value = Map.get(assigns, :value, "")
     form_data = %FormData{name: name, value: value}
-    changeset = changeset(form_data)
+    changeset = changeset(Ecto.Changeset.change(form_data), %{})
 
     {:ok,
      assign(socket, assigns)
-     |> assign(form: to_form(changeset), name: name, value: value)}
+     |> assign(changeset: changeset, name: name, value: value)}
   end
 
   def handle_event("add_new_attribute", _params, socket) do
@@ -86,36 +91,15 @@ defmodule Beacon.LiveAdmin.VisualEditor.KeyValueControl do
     {:noreply, assign(socket, :editing, false)}
   end
 
-  # def handle_event("handle_change", %{"new_attribute" => params}, socket) do
-  #   existing_attrs = socket.assigns.element["attrs"] || %{}
-  #   form_data = %FormData{name: params["name"], value: params["value"]}
-  #   changeset = changeset(form_data, existing_attrs)
-  #   {:noreply, assign(socket, changeset: changeset)}
-  # end
-
   def handle_event("handle_change", _attrs, socket) do
     {:noreply, socket}
   end
 
-  # def handle_event("save", %{"name" => name, "value" => value}, socket) do
-  #   name = String.trim(name)
-  #   value = String.trim(value)
-  #   if can_save(name, socket) do
-  #     changes = %{updated: %{"attrs" => %{name => value}}}
-  #     changes = if name != socket.assigns.name, do: Map.put_new(changes, :deleted, [socket.assigns.name])
-  #     send(self(), {:element_changed, {socket.assigns.element["path"], changes}})
-  #     {:noreply, socket |> assign(:editing, false)}
-  #   else
-  #     {:noreply, socket}
-  #   end
-  # end
-
-  def handle_event("save", params, socket) do
+  def handle_event("save", %{"form_data" => params }, socket) do
     existing_attrs = socket.assigns.element["attrs"] || %{}
-    changeset = changeset(%FormData{name: params["name"], value: params["value"]}, existing_attrs)
+    changeset = changeset(socket.assigns.changeset, %{name: params["name"], value: params["value"]}, existing_attrs)
 
     if changeset.valid? do
-      dbg("Changeset is valid. #{inspect(changeset)}")
       %{name: name, value: value} = changeset.data
       changes = %{updated: %{"attrs" => %{name => value}}}
 
@@ -127,23 +111,18 @@ defmodule Beacon.LiveAdmin.VisualEditor.KeyValueControl do
         end
 
       send(self(), {:element_changed, {socket.assigns.element["path"], changes}})
-      {:noreply, assign(socket, editing: false, name: name, value: value, form: to_form(changeset))}
+      {:noreply, assign(socket, editing: false, name: name, value: value, changeset: changeset)}
     else
-      dbg(changeset.errors)
-      {:noreply, assign(socket, form: to_form(changeset))}
+      {:noreply, assign(socket, changeset: changeset)}
     end
   end
 
-  # defp can_save(name, socket) do
-  #   name != "" && !Map.has_key?(socket.assigns.element["attrs"], name)
-  # end
-
-  defp changeset(form_data, existing_attrs \\ %{}) do
-    form_data
-    |> Ecto.Changeset.cast(Map.from_struct(form_data), [:name, :value])
+  defp changeset(changeset, params, existing_attrs \\ %{}) do
+    %FormData{}
+    |> Ecto.Changeset.cast(params, [:name, :value])
     |> Ecto.Changeset.validate_required([:name, :value])
     |> Ecto.Changeset.validate_change(:name, fn :name, name ->
-      if Map.has_key?(existing_attrs, name) && name != form_data.name do
+      if Map.has_key?(existing_attrs, name) && name != changeset.data.name do
         [name: "Attribute name already exists"]
       else
         []

lib/beacon/live_admin/live/page_editor_live/edit.ex

@@ -77,7 +77,6 @@ defmodule Beacon.LiveAdmin.PageEditorLive.Edit do
   end
 
   def handle_event("select_element", %{"path" => path}, socket) do
-    dbg("################ select_element: #{inspect(path)}")
     {:noreply, assign(socket, selected_element_path: path)}
   end