Auto open details when searched items have single result

lib/freedive_web/live/liliform_live.ex

@@ -42,8 +42,22 @@ defmodule FreediveWeb.LiliformLive do
             FreediveWeb.LiliformLive.get_active_filter(socket.assigns.filters)
           )
 
-        items = search(filtered_items, query)
-        socket = assign(socket, :items, items)
+        searched_items = search(filtered_items, query)
+        socket = assign(socket, :items, searched_items)
+
+        socket =
+          case Kernel.length(Map.keys(searched_items)) == 1 do
+            true ->
+              IO.inspect(Map.keys(searched_items) |> List.first())
+              assign(socket, %{
+                selected_item: Map.get(searched_items, Map.keys(searched_items) |> List.first()),
+                details: true
+              })
+
+            false ->
+              assign(socket, %{selected_item: nil, details: nil})
+          end
+
         {:noreply, socket}
       end
 

lib/freedive_web/live/service_live.ex

@@ -3,7 +3,7 @@ defmodule FreediveWeb.ServiceLive do
 
   def render(assigns) do
     ~H"""
-    <.page name="Services" filters={@filters}>
+    <.page name="Services" filters={@filters} details={@details}>
       <FreediveWeb.ServiceLive.Components.items_block
         items={@items}
         selected_item={@selected_item}

lib/liliform/page.ex

@@ -11,6 +11,7 @@ defmodule Liliform.Page do
   attr :name, :string, required: true, doc: "page name"
   attr :class, :string, default: "", doc: "additional classes"
   attr :filters, :list, default: [], doc: "filters"
+  attr :details, :string, default: nil, doc: "details"
   attr :query, :string, default: "", doc: "search query"
   attr :rest, :global
 
@@ -23,52 +24,52 @@ defmodule Liliform.Page do
 
     ~H"""
     <.block class="px-2 py-4">
+      <.panel class={@class} {@rest} is-info>
+        <.panel_heading>
+          <%= @name %>
+        </.panel_heading>
 
-    <.panel class={@class} {@rest} is-info>
-      <.panel_heading>
-        <%= @name %>
-      </.panel_heading>
+        <%= if @details == nil do %>
+          <.panel_tabs is-hidden-mobile>
+            <%= for filter <- @filters do %>
+              <a
+                class={if filter.active, do: "is-active"}
+                phx-click="filter"
+                phx-value-key={filter.key}
+              >
+                <%= filter.title %>
+              </a>
+            <% end %>
+          </.panel_tabs>
 
-      <.panel_tabs is-hidden-mobile>
-        <%= for filter <- @filters do %>
-          <a
-            class={if filter.active, do: "is-active"}
-            phx-click="filter"
-            phx-value-key={filter.key}
-          >
-            <%= filter.title %>
-          </a>
+          <.panel_tabs is-hidden-tablet>
+            <%= for filter <- @filters do %>
+              <a
+                title={filter.title}
+                class={if filter.active, do: "is-active"}
+                phx-click="filter"
+                phx-value-key={filter.key}
+              >
+                <.icon for={filter.icon} color="auto" />
+              </a>
+            <% end %>
+          </.panel_tabs>
         <% end %>
-      </.panel_tabs>
-
-      <.panel_tabs is-hidden-tablet>
-        <%= for filter <- @filters do %>
-          <a
-            title={filter.title}
-            class={if filter.active, do: "is-active"}
-            phx-click="filter"
-            phx-value-key={filter.key}
-          >
-            <.icon for={filter.icon} color="auto" />
-          </a>
-        <% end %>
-      </.panel_tabs>
-
-      <.panel_block>
-        <.control has-icons-left>
-          <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>
-      <%= render_slot(@inner_block) %>
-    </.panel>
+        <.panel_block>
+          <.control has-icons-left>
+            <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>
+        <%= render_slot(@inner_block) %>
+      </.panel>
     </.block>
     """
   end