add scroll for right menues and improve custom select search box, bas…

…ed on #44, #4, #60

assets/css/app.css

@@ -18,6 +18,10 @@
   @apply h-5 w-6 stroke-current cursor-pointer;
 }
 
+.search-select-icons {
+  @apply h-4 w-5 stroke-current cursor-pointer;
+}
+
 .section-header {
   @apply absolute -mt-5 bg-[#e1e1e1] flex flex-row justify-end items-end p-2 text-sm gap-1 text-gray-500 shadow-md rounded-md right-2;
 }

assets/js/app.js

@@ -162,6 +162,10 @@ Hooks.dragAndDropLocation = {
         }, 100);
       }
     });
+
+    this.handleEvent('show_select_result', ({ points }) => {
+      console.log(points)
+    });
   },
 };
 

lib/mishka_template_creator/components/blocks/settings.ex

@@ -78,6 +78,9 @@ defmodule MishkaTemplateCreator.Components.Blocks.Settings do
               </div>
             </.button>
           </div>
+          <h2 class="mb-3 text-sm text-gray-500 leading-6 text-center">
+            You can apply the following settings on this section. If you don't need to change the settings, you can skip this section.
+          </h2>
           <hr />
 
           <.create_form id={@selected_setting["id"]} child={@selected_setting["child"]} />
@@ -94,14 +97,11 @@ defmodule MishkaTemplateCreator.Components.Blocks.Settings do
     assigns = assign(assigns, :selected_setting, TailwindSetting.get_form_options(id, child))
 
     ~H"""
-    <div class="max-h-80 overflow-y-scroll">
+    <div class="max-h-[22rem] overflow-y-scroll">
       <div class="flex flex-row w-full">
-        <div class="flex flex-col mt-3 gap-2 w-1/3 border-r pr-3">
+        <div class="flex flex-col mt-3 gap-2 w-1/3 border-r pr-3 overflow-y-scroll max-h-80">
           <.button
-            :for={
-              {field_id, field_title, _field_description, _field_configs, _field_allowed_types} <-
-                @selected_setting.section
-            }
+            :for={{field_id, field_title} <- @selected_setting.section}
             id={field_id}
             phx-click="selected_setting"
             phx-value-id={@id}
@@ -113,71 +113,21 @@ defmodule MishkaTemplateCreator.Components.Blocks.Settings do
             </div>
           </.button>
         </div>
-        <div class="flex flex-col w-2/3 p-3 self-stretch">
-          <code class="text-black font-bold p-1 rounded-md text-lg text-center mb-3">
+        <div class="flex flex-col w-3/4 px-3 self-stretch">
+          <code class="text-black font-bold p-1 rounded-md text-lg text-center mb-1">
             <%= @selected_setting.form_id %>
           </code>
-          <h2 class="mb-3 text-sm text-gray-500 leading-6">
-            You can apply the following settings on this section. If you don't need to change the settings, you can skip this section.
-          </h2>
-          <.form_block :let={f} for={%{}} as={String.to_atom(@id)} phx-change="save_config">
-            <.aggregate_forms_type_in_favor_of_types f={f} options={@selected_setting} />
-          </.form_block>
+          <.live_component
+            module={MishkaTemplateCreator.Components.MultiSelectComponent}
+            id={"#{Ecto.UUID.generate}-#{@id}"}
+            selected_setting={@selected_setting}
+          />
         </div>
       </div>
     </div>
     """
   end
 
-  attr :f, :any, required: true
-  attr :options, :map, required: true
-  attr :selected, :any, required: false, default: nil
-  attr :sizes, :list, required: false, default: [:sm, :md, :lg, :xl, :"2xl"]
-
-  @spec aggregate_forms_type_in_favor_of_types(map) :: Phoenix.LiveView.Rendered.t()
-  def aggregate_forms_type_in_favor_of_types(assigns) do
-    ~H"""
-    <.multiple_select
-      :if={:multi_select in @options.types}
-      form={@f}
-      options={@options}
-      selected={@selected}
-    />
-    <.select
-      :if={:multi_select not in @options.types}
-      form={@f}
-      options={@options}
-      selected={@selected}
-    />
-
-    <div class="flex flex-col space-y-3">
-      <h2 :if={:media_queries in @options.types} class="mt-3 text-lg font-semibold">
-        You can set it for different sizes:
-      </h2>
-      <h2 class="mb-3 text-sm text-gray-500 leading-6">
-        To adjust in different sizes, consider the first mobile step or the smallest size and go to larger sizes
-      </h2>
-      <hr />
-      <.multiple_select
-        :for={size <- @sizes}
-        :if={:multi_select in @options.types and :media_queries in @options.types}
-        form={@f}
-        options={@options}
-        form_id={size}
-        title={size}
-      />
-      <.select
-        :for={size <- @sizes}
-        :if={:multi_select not in @options.types and :media_queries in @options.types}
-        form={@f}
-        options={@options}
-        form_id={size}
-        title={size}
-      />
-    </div>
-    """
-  end
-
   def aggregate_form_data_in_favor_of_tailwind(_form_data) do
   end
 end

lib/mishka_template_creator/components/mishka_core_component.ex

@@ -73,7 +73,7 @@ defmodule MishkaTemplateCreatorWeb.MishkaCoreComponent do
               phx-window-keydown={hide_modal(@on_cancel, @id) |> JS.push("reset")}
               phx-key="escape"
               phx-click-away={hide_modal(@on_cancel, @id) |> JS.push("reset")}
-              class="hidden relative rounded-2xl bg-white p-14 shadow-lg shadow-zinc-700/10 ring-1 ring-zinc-700/10 transition z-50"
+              class="hidden relative rounded-2xl bg-white px-5 py-5 shadow-lg shadow-zinc-700/10 ring-1 ring-zinc-700/10 transition z-50"
             >
               <div class="absolute top-6 right-5">
                 <button
@@ -144,24 +144,6 @@ defmodule MishkaTemplateCreatorWeb.MishkaCoreComponent do
     """
   end
 
-
-  attr :form, :any, required: true
-  attr :options, :map, required: true
-  attr :selected, :list, required: false, default: nil
-  attr :title, :string, required: false, default: nil
-  attr :form_id, :atom, required: false, default: nil
-
-  def search_multiple_select(assigns) do
-    # It should have a text search
-    # It should have on-change to search
-    # It should show 10 or 20 result if user clicks
-    # It should show 10 or 20 result if user search
-    # It should be clickable and add the item user wants
-    ~H"""
-
-    """
-  end
-
   attr :form, :any, required: true
   attr :options, :map, required: true
   attr :selected, :any, required: false, default: nil

lib/mishka_template_creator/components/multi_select_component.ex

@@ -0,0 +1,72 @@
+defmodule MishkaTemplateCreator.Components.MultiSelectComponent do
+  use Phoenix.LiveComponent
+
+  @spec render(map()) :: Phoenix.LiveView.Rendered.t()
+  def render(assigns) do
+    ~H"""
+    <div class="MultiSelectComponent">
+      <form phx-change="query" phx-target={@myself}>
+        <input
+          class="border !border-gray-300 rounded-md w-full mx-0 my-0 focus:text-black focus:ring-2 focus:ring-orange-300 focus:!border-transparent"
+          id="select_search"
+          name="select_search"
+          type="search"
+          phx-click="click"
+          phx-target={@myself}
+        />
+      </form>
+
+      <div class="flex flex-wrap my-2 gap-2">
+        <div
+          :for={item <- [1, 2, 3]}
+          class="flex flex-row justify-start items-start py-1 px-3 bg-gray-200 rounded-md gap-2"
+        >
+          <span><%= "h-#{item}" %></span>
+          <Heroicons.trash class="search-select-icons mt-1" phx-click="delete" phx-target={@myself} />
+        </div>
+      </div>
+
+      <div class="flex flex-col mt-2 border border-gray-300 rounded-md px-4 py-2 mb-2">
+        <p
+          :for={item <- [1, 2, 3, 4]}
+          class="cursor-pointer px-1 py-1 duration-200 hover:bg-gray-300 hover:rounded-md hover:duration-100"
+        >
+          select item <%= item %>
+        </p>
+      </div>
+      <span class="text-blue-400 mt-4 text-xs hover:text-blue-500">
+        There are 180 results for this section, please find by searching ...
+      </span>
+
+      <div class="flex flex-wrap w-full gap-2 text-center justify-start items-center mt-3">
+        <span
+          :for={size <- [:none, :sm, :md, :lg, :xl, :"2xl", :dark, :hover]}
+          class="border border-gray-300 p-1 w-10 rounded-md text-xs hover:bg-gray-200 hover:duration-150 duration-300"
+        >
+          <%= size %>
+        </span>
+      </div>
+    </div>
+    """
+  end
+
+  def handle_event("click", %{"value" => value}, socket) do
+    IO.inspect(value)
+    {:noreply, socket}
+  end
+
+  def handle_event("query", %{"select_search" => value}, socket) do
+    IO.inspect(socket.assigns.selected_setting)
+    {:noreply, push_event(socket, "show_select_result", %{points: value})}
+  end
+
+  def handle_event("select", %{"value" => value}, socket) do
+    IO.inspect(value)
+    {:noreply, socket}
+  end
+
+  def handle_event("delete", params, socket) do
+    IO.inspect(params)
+    {:noreply, socket}
+  end
+end

lib/mishka_template_creator/data/tailwind_setting.ex

@@ -8536,7 +8536,11 @@ defmodule MishkaTemplateCreator.Data.TailwindSetting do
       List.first(found_section)
 
     %{
-      section: found_section,
+      section:
+        Enum.map(found_section, fn {field_id, field_title, _field_description, _field_configs,
+                                    _field_allowed_types} ->
+          {field_id, field_title}
+        end),
       form_id: field_id,
       form_title: field_title,
       form_description: field_description,
@@ -8552,7 +8556,11 @@ defmodule MishkaTemplateCreator.Data.TailwindSetting do
       Enum.find(found_section, &(elem(&1, 0) == child))
 
     %{
-      section: found_section,
+      section:
+        Enum.map(found_section, fn {field_id, field_title, _field_description, _field_configs,
+                                    _field_allowed_types} ->
+          {field_id, field_title}
+        end),
       form_id: field_id,
       form_title: field_title,
       form_description: field_description,

lib/mishka_template_creator_web/live/template_creator_live.ex

@@ -148,6 +148,10 @@ defmodule MishkaTemplateCreatorWeb.TemplateCreatorLive do
     {:noreply, socket}
   end
 
+  def handle_event("search_config", _params, socket) do
+    {:noreply, socket}
+  end
+
   def handle_event(
         "change_order",
         %{