fix duplicate ides inside config selector, based on #44, #4, #60

assets/js/app.js

@@ -182,17 +182,17 @@ Hooks.dragAndDropLocation = {
       }
     );
 
-    this.handleEvent('set_extra_config', ({ config }) => {
+    this.handleEvent('set_extra_config', ({ config, id }) => {
       const perConDOM = document.querySelector(
-        `#extra-config-${stateLessConfig}`
+        `#${id}-extra-config-${stateLessConfig}`
       );
       if (config) {
-        const conDOM = document.querySelector(`#extra-config-${config}`);
+        const conDOM = document.querySelector(`#${id}-extra-config-${config}`);
         perConDOM.classList.remove('bg-gray-200');
         conDOM.classList.add('bg-gray-200');
         stateLessConfig = config;
       } else {
-        const conDOM = document.querySelector(`#extra-config-none`);
+        const conDOM = document.querySelector(`#${id}-extra-config-none`);
         conDOM.classList.remove('bg-gray-200');
         perConDOM.classList.add('bg-gray-200');
       }

lib/mishka_template_creator/components/blocks/config_selector.ex

@@ -10,7 +10,7 @@ defmodule MishkaTemplateCreator.Components.ConfigSelector do
 
   @impl true
   def update(assigns, socket) do
-    new_sock = push_event(socket, "set_extra_config", %{})
+    new_sock = push_event(socket, "set_extra_config", %{id: assigns.id})
     {:ok, assign(new_sock, assigns)}
   end
 
@@ -27,7 +27,7 @@ defmodule MishkaTemplateCreator.Components.ConfigSelector do
           autocomplete="off"
         />
 
-        <input type="hidden" id="myself" name="myself" value={@myself} />
+        <input type="hidden" id={"#{@id}-myself"} name="myself" value={@myself} />
       </form>
 
       <div :if={!is_nil(@class)} class="flex flex-wrap my-2 gap-2">
@@ -73,7 +73,7 @@ defmodule MishkaTemplateCreator.Components.ConfigSelector do
           phx-click="set_extra_config"
           phx-value-config={item}
           phx-target={@myself}
-          id={"extra-config-#{item}"}
+          id={"#{@id}-extra-config-#{item}"}
         >
           <%= item %>
         </span>
@@ -108,7 +108,13 @@ defmodule MishkaTemplateCreator.Components.ConfigSelector do
 
     send(
       self(),
-      {"delete_element_config", %{block_id: block_id, block_type: block_type, config: config}}
+      {"delete_element_config",
+       %{
+         block_id: block_id,
+         block_type: block_type,
+         config: config,
+         parent_id: socket.assigns.parent_id
+       }}
     )
 
     {:noreply, socket}
@@ -120,13 +126,19 @@ defmodule MishkaTemplateCreator.Components.ConfigSelector do
     send(
       self(),
       {"add_element_config",
-       %{block_id: block_id, block_type: block_type, extra_config: extra_config, config: config}}
+       %{
+         block_id: block_id,
+         block_type: block_type,
+         extra_config: extra_config,
+         config: config,
+         parent_id: socket.assigns.parent_id
+       }}
     )
 
     {:noreply, socket}
   end
 
   def handle_event("set_extra_config", %{"config" => config}, socket) do
-    {:noreply, push_event(socket, "set_extra_config", %{config: config})}
+    {:noreply, push_event(socket, "set_extra_config", %{config: config, id: socket.assigns.id})}
   end
 end

lib/mishka_template_creator/components/blocks/settings.ex

@@ -12,7 +12,8 @@ defmodule MishkaTemplateCreator.Components.Blocks.Settings do
   }
 
   attr :block_id, :string, required: true
-  attr :class, :string, default: nil
+  attr :class, :string, required: false, default: nil
+  attr :parent_id, :string, required: false, default: nil
   attr :type, :string, required: false, default: "layout"
   attr :selected_setting, :map, required: false, default: nil
   attr :icon_class, :string, required: false, default: "layout-icons"
@@ -95,6 +96,7 @@ defmodule MishkaTemplateCreator.Components.Blocks.Settings do
             type={@type}
             block_id={@block_id}
             class={@class}
+            parent_id={@parent_id}
           />
         </div>
       <% end %>
@@ -106,7 +108,8 @@ defmodule MishkaTemplateCreator.Components.Blocks.Settings do
   attr :type, :string, required: true
   attr :block_id, :string, required: true
   attr :child, :string, required: false, default: nil
-  attr :class, :string, default: nil
+  attr :parent_id, :string, required: false, default: nil
+  attr :class, :string, required: false, default: nil
 
   defp create_form(%{id: id, child: child, type: type, block_id: block_id} = assigns) do
     assigns =
@@ -139,9 +142,10 @@ defmodule MishkaTemplateCreator.Components.Blocks.Settings do
           </code>
           <.live_component
             module={ConfigSelector}
-            id={"#{@child}-#{@id}"}
+            id={"#{@type}-#{@block_id}-#{@id}-#{@child || List.first(@selected_setting.form_configs)}"}
             selected_setting={@selected_setting}
             class={@class}
+            parent_id={@parent_id}
           />
         </div>
       </div>

lib/mishka_template_creator/components/elements/layout.ex

@@ -30,7 +30,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Layout do
       <div class="flex flex-row justify-start items-center space-x-3 absolute -left-[2px] -top-11 bg-gray-200 border border-gray-200 p-2 rounded-tr-3xl z-1 w-54">
         <MobileView.block_mobile_view block_id={@id} />
         <DarkMod.block_dark_mod block_id={@id} />
-        <Settings.block_settings block_id={@id} selected_setting={@selected_setting} class={@class}/>
+        <Settings.block_settings block_id={@id} selected_setting={@selected_setting} class={@class} />
         <Tag.block_tag block_id={@id} submit={@submit} />
         <div :if={@tag}><strong>Tag: </strong><%= @tag %></div>
         <AddSeparator.block_add_separator block_id={@id} />

lib/mishka_template_creator/components/elements/section.ex

@@ -64,6 +64,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Section do
         selected_setting={@selected_setting}
         type="section"
         class={@class}
+        parent_id={@parent_id}
       />
       <Tag.block_tag
         block_id={@section_id}

lib/mishka_template_creator/components/mishka_core_component.ex

@@ -343,6 +343,7 @@ defmodule MishkaTemplateCreatorWeb.MishkaCoreComponent do
         layout
       end
     end)
+    |> IO.inspect()
   end
 
   def delete_element_config(elements, id, _parent_id, class, "layout") do

lib/mishka_template_creator_web/live/template_creator_live.ex

@@ -159,8 +159,13 @@ defmodule MishkaTemplateCreatorWeb.TemplateCreatorLive do
 
   @impl true
   def handle_info({"add_element_config", selected_config}, socket) do
-    %{block_id: block_id, block_type: block_type, config: config, extra_config: extra} =
-      selected_config
+    %{
+      block_id: block_id,
+      block_type: block_type,
+      config: config,
+      extra_config: extra,
+      parent_id: parent_id
+    } = selected_config
 
     new_assign =
       assign(
@@ -169,7 +174,7 @@ defmodule MishkaTemplateCreatorWeb.TemplateCreatorLive do
           add_element_config(
             socket.assigns.elemens,
             block_id,
-            "parent_id",
+            parent_id,
             TailwindSetting.create_class(extra, config),
             block_type
           )
@@ -179,13 +184,14 @@ defmodule MishkaTemplateCreatorWeb.TemplateCreatorLive do
   end
 
   def handle_info({"delete_element_config", selected_config}, socket) do
-    %{block_id: block_id, block_type: block_type, config: config} = selected_config
+    %{block_id: block_id, block_type: block_type, config: config, parent_id: parent_id} =
+      selected_config
 
     new_assign =
       assign(
         socket,
         elemens:
-          delete_element_config(socket.assigns.elemens, block_id, "parent_id", config, block_type)
+          delete_element_config(socket.assigns.elemens, block_id, parent_id, config, block_type)
       )
 
     {:noreply, new_assign}