From 15187272d684a33f8b3c9f3bc59021d0b2ea1445 Mon Sep 17 00:00:00 2001
From: Miguel Camba <miguel.camba@gmail.com>
Date: Sun, 10 Nov 2024 23:43:38 +0100
Subject: [PATCH] Save progress

---
 .../properties_sidebar_component.ex           | 33 ++++++++--
 .../properties_sidebar_section_component.ex   | 61 +++----------------
 2 files changed, 37 insertions(+), 57 deletions(-)

diff --git a/lib/beacon/live_admin/components/properties_sidebar_component.ex b/lib/beacon/live_admin/components/properties_sidebar_component.ex
index ac1834b8..cbeea481 100644
--- a/lib/beacon/live_admin/components/properties_sidebar_component.ex
+++ b/lib/beacon/live_admin/components/properties_sidebar_component.ex
@@ -5,6 +5,25 @@ defmodule Beacon.LiveAdmin.PropertiesSidebarComponent do
   alias Beacon.LiveAdmin.PropertiesSidebarSectionComponent
   require Logger
 
+  defmodule Attribute do
+    use Ecto.Schema
+    import Ecto.Changeset
+
+    # Define an embedded schema (no database backing)
+    embedded_schema do
+      field :name, :string
+      field :value, :string
+    end
+
+    # Function to create and validate changeset
+    def changeset(attrs) do
+      %__MODULE__{}
+      |> cast(attrs, [:name, :value])
+      |> validate_required([:name, :value])
+    end
+  end
+
+
   def mount(socket) do
     socket = assign(socket, :new_attributes, [])
     {:ok, socket}
@@ -44,8 +63,10 @@ defmodule Beacon.LiveAdmin.PropertiesSidebarComponent do
           optional(any()) => any()
         }) :: {:noreply, map()}
   def handle_event("add_attribute", _params, socket) do
-    new_attribute = %{name: "", value: ""}
+    new_attribute = Attribute.changeset(%{"name" => "", "value" => ""})
     new_attributes = socket.assigns.new_attributes ++ [new_attribute]
+    Logger.debug("############################## Adding new attribute")
+    Logger.debug("############################## New attributes: #{inspect(new_attributes)}")
     {:noreply, assign(socket, :new_attributes, new_attributes)}
   end
 
@@ -71,13 +92,13 @@ defmodule Beacon.LiveAdmin.PropertiesSidebarComponent do
 
             <%= if @attributes_editable do %>
               <%!-- Editable attributes --%>
-              <%= for {{name, value}, index} <- Enum.with_index(@selected_ast_element["attrs"]) do %>
-                <.live_component module={PropertiesSidebarSectionComponent} id="class-section" parent={@myself} name={name} value={value} edit_name={false} index={index} />
-              <% end %>
+              <%!-- <%= for {{name, value}, index} <- Enum.with_index(@selected_ast_element["attrs"]) do %>
+                <.live_component module={PropertiesSidebarSectionComponent} id="class-section"  attribute_changeset={changeset} parent={@myself} edit_name={false} index={index} />
+              <% end %> --%>
 
               <%!-- New attributes --%>
-              <%= for {%{name: name, value: value}, index} <- Enum.with_index(@new_attributes) do %>
-                <.live_component module={PropertiesSidebarSectionComponent} id={"new-attribute-section-#{index}"} parent={@myself} name={name} value={value} edit_name={true} index={index} />
+              <%= for {changeset, index} <- Enum.with_index(@new_attributes) do %>
+                <.live_component module={PropertiesSidebarSectionComponent} id={"new-attribute-section-#{index}"} parent={@myself} attribute_changeset={changeset} edit_name={true} index={index} />
               <% end %>
             <% end %>
             <div class="p-4">
diff --git a/lib/beacon/live_admin/components/properties_sidebar_section_component.ex b/lib/beacon/live_admin/components/properties_sidebar_section_component.ex
index dea051a1..410abde9 100644
--- a/lib/beacon/live_admin/components/properties_sidebar_section_component.ex
+++ b/lib/beacon/live_admin/components/properties_sidebar_section_component.ex
@@ -4,58 +4,25 @@ defmodule Beacon.LiveAdmin.PropertiesSidebarSectionComponent do
   use Beacon.LiveAdmin.Web, :live_component
   require Logger
 
-  # def handle_event("update_attribute_name", %{"index" => index, "name" => name}, socket) do
-  #   Logger.debug("Updating attribute name: #{index} - #{name}")
-  #   index = String.to_integer(index)
-  #   new_attributes = Enum.map(socket.assigns.new_attributes, fn
-  #     {attr, i} when i == index -> %{attr | name: name}
-  #     attr -> attr
-  #   end)
-  #   {:noreply, assign(socket, :new_attributes, new_attributes)}
-  # end
-
-  # def handle_event("update_attribute_value", %{"index" => index, "value" => value}, socket) do
-  #   Logger.debug("Updating attribute value: #{index} - #{value}")
-  #   index = String.to_integer(index)
-  #   new_attributes = Enum.map(socket.assigns.new_attributes, fn
-  #     {attr, i} when i == index -> %{attr | value: value}
-  #     attr -> attr
-  #   end)
-  #   {:noreply, assign(socket, :new_attributes, new_attributes)}
-  # end
-
-  def handle_event("update_attribute", %{ "name" => name, "value" => value}, socket) do
-    Logger.debug("Updating attribute: #{name} - #{value}")
-    Logger.debug("Assigns: #{inspect(socket.assigns)}")
-    index = socket.assigns.index
-    # new_attributes = Enum.map(socket.assigns.new_attributes, fn
-    #   {attr, i} when i == index -> %{attr | name: name, value: value}
-    #   attr -> attr
-    # end)
-    # {:noreply, assign(socket, :new_attributes, new_attributes)}
-    {:noreply, socket}
+  def update(assigns, socket) do
+    Logger.debug("########## PropertiesSidebarSectionComponent update assigns: #{inspect(assigns)}")
+    {:ok,
+      assign(socket, assigns) |> assign(:form, to_form(assigns.attribute_changeset))
+    }
   end
 
   def render(assigns) do
     ~H"""
     <section class="p-4 border-b border-b-gray-100 border-solid">
-      <form phx-change="update_attribute" phx-blur="check_and_save" phx-target={@myself}>
+      <.form for={@form} phx-submit="check_and_save">
         <header class="flex items-center text-sm mb-2 font-medium">
           <div class="w-full flex items-center justify-between gap-x-1 p-1 font-semibold group">
             <span class="flex-grow">
               <span class="hover:text-blue-700 active:text-blue-900">
                 <%= if @edit_name do %>
-                  <input
-                    type="text"
-                    class="w-full py-1 px-2 bg-gray-100 border-gray-100 rounded-md leading-6 text-sm"
-                    value={@name}
-                    name="name"
-                    phx-input="update_attribute_name"
-                    phx-value-index={@index}
-                    phx-target={@parent}
-                  />
+                  <.input field={@form[:name]} type="text" class="w-full py-1 px-2 bg-gray-100 border-gray-100 rounded-md leading-6 text-sm"/>
                 <% else %>
-                  <%= @name %>
+                  <%= @attribute_changeset[:name] %>
                 <% end %>
               </span>
             </span>
@@ -63,16 +30,8 @@ defmodule Beacon.LiveAdmin.PropertiesSidebarSectionComponent do
             <.toggle_button/>
           </div>
         </header>
-        <input
-          type="text"
-          class="w-full py-1 px-2 bg-gray-100 border-gray-100 rounded-md leading-6 text-sm"
-          value={@value}
-          name="value"
-          phx-input="update_attribute_value"
-          phx-value-index={@index}
-          phx-target={@parent}
-        />
-      </form>
+        <.input field={@form[:value]} type="text" class="w-full py-1 px-2 bg-gray-100 border-gray-100 rounded-md leading-6 text-sm" />
+      </.form>
     </section>
     """
   end