Add page search

lib/freedive_web/live/liliform_live.ex

@@ -3,7 +3,7 @@ defmodule FreediveWeb.LiliformLive do
     quote location: :keep, bind_quoted: [opts: opts] do
       use FreediveWeb, :live_view
       @behaviour FreediveWeb.LiliformLive
-      @all [
+      @filters_all [
         %{
           title: "All",
           icon: "all",
@@ -12,13 +12,21 @@ defmodule FreediveWeb.LiliformLive do
       ]
 
       def(mount(_params, _session, socket)) do
+        items = items()
         socket = assign(socket, :opts, Keyword.get(unquote(opts), :opts, []))
-        socket = assign(socket, :items, items())
+        socket = assign(socket, :items_all, items)
-        socket = assign(socket, :filters, @all ++ filters())
+        socket = assign(socket, :items, items)
+        socket = assign(socket, :filters, @filters_all ++ filters())
         socket = assign(socket, :query, "")
+        IO.inspect(socket, label: "socket")
         {:ok, socket}
       end
 
+      def(handle_event("search", %{"value" => query}, socket)) do
+        items = search(query)
+        socket = assign(socket, :items, items)
+        {:noreply, socket}
+      end
     end
   end
 

lib/freedive_web/live/service_live.ex

@@ -4,8 +4,8 @@ defmodule FreediveWeb.ServiceLive do
   def render(assigns) do
     ~H"""
     <.block class="px-2 py-4">
-      <.page name="Services">
+      <.page name="Services" filters={@filters}>
-        <FreediveWeb.ServiceLive.Item.item_block items={@items} />
+        <FreediveWeb.ServiceLive.Item.items_block items={@items} />
       </.page>
     </.block>
     """
@@ -82,7 +82,7 @@ defmodule FreediveWeb.ServiceLive.Item do
   """
   attr :items, :list, default: [], doc: "items"
 
-  def item_block(assigns) do
+  def items_block(assigns) do
     ~H"""
     <%= for item <- @items do %>
       <.link patch={item.path} class="panel-block pt-1">

lib/liliform/page.ex

@@ -42,7 +42,7 @@ defmodule Liliform.Page do
 
       <.panel_block>
         <.control has-icons-left>
-          <input class="input is-info" type="text" placeholder="Search" name="search" value={@query} />
+          <input class="input is-info" type="text" placeholder="Search" name="search" value={@query} phx-keyup="search" />
           <.icon for="search" size="1.5rem" aria-hidden="true" is-left />
         </.control>
       </.panel_block>