add delete element config, store js extra config when component is up…

…dated, based on #44, #4, #60

assets/js/app.js

@@ -186,10 +186,16 @@ Hooks.dragAndDropLocation = {
       const perConDOM = document.querySelector(
         `#extra-config-${stateLessConfig}`
       );
-      const conDOM = document.querySelector(`#extra-config-${config}`);
-      perConDOM.classList.remove('bg-gray-200');
-      conDOM.classList.add('bg-gray-200');
-      stateLessConfig = config;
+      if (config) {
+        const conDOM = document.querySelector(`#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`);
+        conDOM.classList.remove('bg-gray-200');
+        perConDOM.classList.add('bg-gray-200');
+      }
     });
 
     this.handleEvent('get_extra_config', ({ config, myself }) => {

lib/mishka_template_creator/components/blocks/config_selector.ex

@@ -4,9 +4,16 @@ defmodule MishkaTemplateCreator.Components.ConfigSelector do
 
   @impl true
   def mount(socket) do
+    IO.inspect("we are here")
     {:ok, push_event(socket, "clean_extra_config", %{})}
   end
 
+  @impl true
+  def update(assigns, socket) do
+    new_sock = push_event(socket, "set_extra_config", %{})
+    {:ok, assign(new_sock, assigns)}
+  end
+
   @impl true
   def render(assigns) do
     ~H"""
@@ -23,12 +30,12 @@ defmodule MishkaTemplateCreator.Components.ConfigSelector do
         <input type="hidden" id="myself" name="myself" value={@myself} />
       </form>
 
-      <div class="flex flex-wrap my-2 gap-2">
+      <div :if={!is_nil(@class)} class="flex flex-wrap my-2 gap-2">
         <div
-          :for={item <- [1, 2, 3, 4, 5, 6, 7, 8, 9]}
+          :for={item <- @class}
           class="flex flex-row justify-start items-start py-1 px-3 bg-gray-200 rounded-md gap-2 text-black text-sm"
         >
-          <span><%= "h-#{item}" %></span>
+          <span><%= "#{item}" %></span>
           <Heroicons.trash
             class="search-select-icons mt-1"
             phx-click="delete"

lib/mishka_template_creator/components/blocks/content.ex

@@ -34,6 +34,7 @@ defmodule MishkaTemplateCreator.Components.Blocks.Content do
         selected_setting={@selected_setting}
         submit={@submit}
         tag={Map.get(el, :tag)}
+        class={Map.get(el, :class)}
       />
     </div>
     """

lib/mishka_template_creator/components/blocks/settings.ex

@@ -12,9 +12,10 @@ defmodule MishkaTemplateCreator.Components.Blocks.Settings do
   }
 
   attr :block_id, :string, required: true
+  attr :class, :string, default: nil
   attr :type, :string, required: false, default: "layout"
   attr :selected_setting, :map, required: false, default: nil
-  attr :custom_class, :string, required: false, default: "layout-icons"
+  attr :icon_class, :string, required: false, default: "layout-icons"
   attr :on_click, JS, default: %JS{}
 
   @spec block_settings(map) :: Phoenix.LiveView.Rendered.t()
@@ -23,7 +24,7 @@ defmodule MishkaTemplateCreator.Components.Blocks.Settings do
 
     ~H"""
     <Heroicons.wrench_screwdriver
-      class={@custom_class}
+      class={@icon_class}
       phx-click={show_modal("#{@type}-settings-#{@block_id}")}
     />
     <.push_modal id={"#{@type}-settings-#{@block_id}"}>
@@ -93,6 +94,7 @@ defmodule MishkaTemplateCreator.Components.Blocks.Settings do
             child={@selected_setting["child"]}
             type={@type}
             block_id={@block_id}
+            class={@class}
           />
         </div>
       <% end %>
@@ -104,6 +106,7 @@ 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
 
   defp create_form(%{id: id, child: child, type: type, block_id: block_id} = assigns) do
     assigns =
@@ -138,6 +141,7 @@ defmodule MishkaTemplateCreator.Components.Blocks.Settings do
             module={ConfigSelector}
             id={"#{@child}-#{@id}"}
             selected_setting={@selected_setting}
+            class={@class}
           />
         </div>
       </div>

lib/mishka_template_creator/components/elements/layout.ex

@@ -17,6 +17,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Layout do
   attr :selected_block, :map, required: true
   attr :selected_setting, :map, required: true
   attr :tag, :string, default: nil
+  attr :class, :string, default: nil
   attr :submit, :boolean, default: false
   attr :on_delete, JS, default: %JS{}
   attr :on_duplicate, JS, default: %JS{}
@@ -29,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} />
+        <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} />
@@ -49,6 +50,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Layout do
           parent_id={@id}
           submit={@submit}
           tag={Map.get(child, :tag)}
+          class={Map.get(child, :class)}
           selected_setting={@selected_setting}
         />
       </div>

lib/mishka_template_creator/components/elements/section.ex

@@ -52,16 +52,18 @@ defmodule MishkaTemplateCreator.Components.Elements.Section do
   attr :parent_id, :string, required: true
   attr :submit, :boolean, default: false
   attr :selected_setting, :map, required: true
+  attr :class, :string, default: nil
 
   @spec section_header(map) :: Phoenix.LiveView.Rendered.t()
   defp section_header(assigns) do
     ~H"""
     <div id={"section_header_#{@section_id}"} class="section-header">
       <Settings.block_settings
         block_id={@section_id}
-        custom_class="section-icons"
+        icon_class="section-icons"
         selected_setting={@selected_setting}
         type="section"
+        class={@class}
       />
       <Tag.block_tag
         block_id={@section_id}

lib/mishka_template_creator_web/live/template_creator_live.ex

@@ -179,8 +179,16 @@ defmodule MishkaTemplateCreatorWeb.TemplateCreatorLive do
   end
 
   def handle_info({"delete_element_config", selected_config}, socket) do
-    IO.inspect(selected_config)
-    {:noreply, socket}
+    %{block_id: block_id, block_type: block_type, config: config} = selected_config
+
+    new_assign =
+      assign(
+        socket,
+        elemens:
+          delete_element_config(socket.assigns.elemens, block_id, "parent_id", config, block_type)
+      )
+
+    {:noreply, new_assign}
   end
 
   def update_elements(nil, socket, _, _), do: {:noreply, socket}