From 9dabb8e7c870b3b066fc6ec2238b86bafeff3afd Mon Sep 17 00:00:00 2001
From: Miguel Camba <miguel.camba@gmail.com>
Date: Fri, 8 Nov 2024 14:39:24 +0100
Subject: [PATCH] Save progress

---
 .../properties_sidebar_component.ex           |   4 +-
 .../properties_sidebar_section_component.ex   | 110 ++++++++++--------
 2 files changed, 64 insertions(+), 50 deletions(-)

diff --git a/lib/beacon/live_admin/components/properties_sidebar_component.ex b/lib/beacon/live_admin/components/properties_sidebar_component.ex
index 45cae160..ac1834b8 100644
--- a/lib/beacon/live_admin/components/properties_sidebar_component.ex
+++ b/lib/beacon/live_admin/components/properties_sidebar_component.ex
@@ -72,12 +72,12 @@ 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} placeholder="Some placeholder"/>
+                <.live_component module={PropertiesSidebarSectionComponent} id="class-section" parent={@myself} name={name} value={value} 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} placeholder="Some placeholder"/>
+                <.live_component module={PropertiesSidebarSectionComponent} id={"new-attribute-section-#{index}"} parent={@myself} name={name} value={value} 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 467017b2..dea051a1 100644
--- a/lib/beacon/live_admin/components/properties_sidebar_section_component.ex
+++ b/lib/beacon/live_admin/components/properties_sidebar_section_component.ex
@@ -4,61 +4,75 @@ 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_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_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)}
+  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}
   end
 
   def render(assigns) do
     ~H"""
     <section class="p-4 border-b border-b-gray-100 border-solid">
-      <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}
-                />
-              <% else %>
-                <%= @name %>
-              <% end %>
+      <form phx-change="update_attribute" phx-blur="check_and_save" phx-target={@myself}>
+        <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}
+                  />
+                <% else %>
+                  <%= @name %>
+                <% end %>
+              </span>
             </span>
-          </span>
-          <.delete_button index={@index} parent={@parent}/>
-          <.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}
-      />
+            <.delete_button index={@index} parent={@parent}/>
+            <.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>
     </section>
     """
   end