change search results with js hook client side, based on #44, #4, #60

mishka-group · Mar 21, 2023 · 67ac18a · 67ac18a
1 parent 10ce207
commit 67ac18a
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 16 deletions.
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -163,8 +163,18 @@ Hooks.dragAndDropLocation = {
       }
     });
 
-    this.handleEvent('show_select_result', ({ points }) => {
-      console.log(points)
+    this.handleEvent('show_selected_results', ({ results, id, myself }) => {
+      const resDOM = document.querySelector(`#${id}`);
+      resDOM.innerHTML = '';
+
+      results.map((item) => {
+        const el = `
+        <p class="cursor-pointer px-1 py-1 duration-200 hover:bg-gray-300 hover:rounded-md hover:duration-100 text-black text-sm" phx-click="select" phx-value-config="${item}" phx-target="${myself}">
+          ${item}
+        </p>
+        `;
+        resDOM.innerHTML += el;
+      });
     });
   },
 };

diff --git a/...ator/components/multi_select_component.ex → ...ator/components/blocks/config_selector.ex b/...ator/components/multi_select_component.ex → ...ator/components/blocks/config_selector.ex
@@ -1,11 +1,11 @@
-defmodule MishkaTemplateCreator.Components.MultiSelectComponent do
+defmodule MishkaTemplateCreator.Components.ConfigSelector do
   use Phoenix.LiveComponent
   alias MishkaTemplateCreator.Data.TailwindSetting
 
   @spec render(map()) :: Phoenix.LiveView.Rendered.t()
   def render(assigns) do
     ~H"""
-    <div class="MultiSelectComponent">
+    <div class="ConfigSelectorComponent">
       <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"
@@ -16,6 +16,8 @@ defmodule MishkaTemplateCreator.Components.MultiSelectComponent do
           phx-target={@myself}
           autocomplete="off"
         />
+
+        <input type="hidden" id="myself" name="myself" value={@myself} />
       </form>
 
       <div class="flex flex-wrap my-2 gap-2">
@@ -35,6 +37,9 @@ defmodule MishkaTemplateCreator.Components.MultiSelectComponent do
         <p
           :for={item <- Enum.take(@selected_setting.form_configs, 10)}
           class="cursor-pointer px-1 py-1 duration-200 hover:bg-gray-300 hover:rounded-md hover:duration-100 text-black text-sm"
+          phx-click="select"
+          phx-value-config={item}
+          phx-target={@myself}
         >
           <%= item %>
         </p>
@@ -45,33 +50,51 @@ defmodule MishkaTemplateCreator.Components.MultiSelectComponent do
 
       <div class="flex flex-wrap w-full gap-2 text-center justify-start items-center mt-3 text-black">
         <span
-          :for={size <- TailwindSetting.type_create(@selected_setting.types)}
-          class="border border-gray-300 p-1 w-10 rounded-md text-xs hover:bg-gray-200 hover:duration-150 duration-300"
+          :for={item <- TailwindSetting.type_create(@selected_setting.types)}
+          class="cursor-pointer border border-gray-300 p-1 w-10 rounded-md text-xs hover:bg-gray-200 hover:duration-150 duration-300"
+          phx-click="extra_config"
+          phx-value-config={item}
+          phx-target={@myself}
         >
-          <%= size %>
+          <%= item %>
         </span>
       </div>
     </div>
     """
   end
 
-  def handle_event("click", %{"value" => value}, socket) do
-    IO.inspect(value)
+  def handle_event("click", %{"value" => _value}, socket) do
     {: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})}
+  def handle_event("query", %{"select_search" => value, "myself" => myself}, socket) do
+    form_configs = socket.assigns.selected_setting.form_configs
+
+    results =
+      form_configs
+      |> Enum.filter(&String.contains?(&1, value))
+      |> Enum.take(10)
+
+    {:noreply,
+     push_event(socket, "show_selected_results", %{
+       results: results,
+       id: "config-#{socket.assigns.id}",
+       myself: myself
+     })}
   end
 
-  def handle_event("select", %{"value" => value}, socket) do
-    IO.inspect(value)
+  def handle_event("select", %{"config" => config}, socket) do
+    IO.inspect(config)
     {:noreply, socket}
   end
 
   def handle_event("delete", params, socket) do
     IO.inspect(params)
     {:noreply, socket}
   end
+
+  def handle_event("extra_config", %{"config" => config}, socket) do
+    IO.inspect(config)
+    {:noreply, socket}
+  end
 end
diff --git a/lib/mishka_template_creator/components/blocks/settings.ex b/lib/mishka_template_creator/components/blocks/settings.ex
@@ -8,7 +8,7 @@ defmodule MishkaTemplateCreator.Components.Blocks.Settings do
   alias MishkaTemplateCreator.{
     Components.Blocks.ElementMenu,
     Data.TailwindSetting,
-    Components.MultiSelectComponent
+    Components.ConfigSelector
   }
 
   attr :block_id, :string, required: true
@@ -135,7 +135,7 @@ defmodule MishkaTemplateCreator.Components.Blocks.Settings do
             <%= @selected_setting.form_id %>
           </code>
           <.live_component
-            module={MultiSelectComponent}
+            module={ConfigSelector}
             id={"#{Ecto.UUID.generate}-#{@id}"}
             selected_setting={@selected_setting}
           />