add search to tag index

lib/cannery_web/live/tag_live/index.ex

@@ -9,27 +9,53 @@ defmodule CanneryWeb.TagLive.Index do
   alias CanneryWeb.{Endpoint, ViewHelpers}
 
   @impl true
-  def mount(_params, _session, socket), do: {:ok, socket |> display_tags()}
+  def mount(%{"search" => search}, _session, socket) do
+    {:ok, socket |> assign(:search, search) |> display_tags()}
+  end
+
+  def mount(_params, _session, socket) do
+    {:ok, socket |> assign(:search, nil) |> display_tags()}
+  end
 
   @impl true
   def handle_params(params, _url, %{assigns: %{live_action: live_action}} = socket) do
-    {:noreply, apply_action(socket, live_action, params) |> display_tags}
+    {:noreply, apply_action(socket, live_action, params)}
   end
 
   defp apply_action(%{assigns: %{current_user: current_user}} = socket, :edit, %{"id" => id}) do
     socket
-    |> assign(:page_title, gettext("Edit Tag"))
-    |> assign(:tag, Tags.get_tag!(id, current_user))
+    |> assign(
+      page_title: gettext("Edit Tag"),
+      tag: Tags.get_tag!(id, current_user)
+    )
   end
 
   defp apply_action(socket, :new, _params) do
     socket
-    |> assign(:page_title, gettext("New Tag"))
-    |> assign(:tag, %Tag{bg_color: ViewHelpers.random_color(), text_color: "#ffffff"})
+    |> assign(
+      page_title: gettext("New Tag"),
+      tag: %Tag{bg_color: ViewHelpers.random_color(), text_color: "#ffffff"}
+    )
   end
 
   defp apply_action(socket, :index, _params) do
-    socket |> assign(:page_title, gettext("Tags")) |> assign(:tag, nil)
+    socket
+    |> assign(
+      page_title: gettext("Tags"),
+      search: nil,
+      tag: nil
+    )
+    |> display_tags()
+  end
+
+  defp apply_action(socket, :search, %{"search" => search}) do
+    socket
+    |> assign(
+      page_title: gettext("Tags"),
+      search: search,
+      tag: nil
+    )
+    |> display_tags()
   end
 
   @impl true
@@ -39,7 +65,16 @@ defmodule CanneryWeb.TagLive.Index do
     {:noreply, socket |> put_flash(:info, prompt) |> display_tags()}
   end
 
-  defp display_tags(%{assigns: %{current_user: current_user}} = socket) do
-    socket |> assign(tags: Tags.list_tags(current_user))
+  @impl true
+  def handle_event("search", %{"search" => %{"search_term" => ""}}, socket) do
+    {:noreply, socket |> push_patch(to: Routes.tag_index_path(Endpoint, :index))}
+  end
+
+  def handle_event("search", %{"search" => %{"search_term" => search_term}}, socket) do
+    {:noreply, socket |> push_patch(to: Routes.tag_index_path(Endpoint, :search, search_term))}
+  end
+
+  defp display_tags(%{assigns: %{search: search, current_user: current_user}} = socket) do
+    socket |> assign(tags: Tags.list_tags(search, current_user))
   end
 end

lib/cannery_web/live/tag_live/index.html.heex

@@ -5,7 +5,7 @@
   <p class="title text-md text-primary-600">
     <%= gettext("Tags can be added to your containers to help you organize") %>
   </p>
-  <%= if @tags |> Enum.empty?() do %>
+  <%= if @tags |> Enum.empty?() and @search |> is_nil() do %>
     <h2 class="title text-xl text-primary-600">
       <%= gettext("No tags") %>
       <%= display_emoji("😔") %>
@@ -19,7 +19,33 @@
       <%= dgettext("actions", "New Tag") %>
     </.link>
   <% end %>
+
+  <div class="w-full flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-4 max-w-xl">
+    <.form
+      :let={f}
+      for={:search}
+      phx-change="search"
+      phx-submit="search"
+      class="grow self-stretch flex flex-col items-stretch"
+      data-qa="tag_search"
+    >
+      <%= text_input(f, :search_term,
+        class: "input input-primary",
+        value: @search,
+        phx_debounce: 300,
+        placeholder: gettext("Search tags")
+      ) %>
+    </.form>
+  </div>
+
   <div class="flex flex-row flex-wrap justify-center items-center">
+    <%= if @tags |> Enum.empty?() do %>
+      <h2 class="title text-xl text-primary-600">
+        <%= gettext("No tags") %>
+        <%= display_emoji("😔") %>
+      </h2>
+    <% end %>
+
     <%= for tag <- @tags do %>
       <.tag_card tag={tag}>
         <.link

lib/cannery_web/router.ex

@@ -64,7 +64,8 @@ defmodule CanneryWeb.Router do
 
     live "/tags", TagLive.Index, :index
     live "/tags/new", TagLive.Index, :new
-    live "/tags/:id/edit", TagLive.Index, :edit
+    live "/tags/edit/:id", TagLive.Index, :edit
+    live "/tags/search/:search", TagLive.Index, :search
 
     live "/catalog", AmmoTypeLive.Index, :index
     live "/catalog/new", AmmoTypeLive.Index, :new