Add components to select and show selected Publisher.

lib/decentralised_book_index_web/components/my_components.ex

@@ -20,6 +20,9 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents do
         edit_button: 1,
         cancel_button: 1,
       ]
+
+      alias MyComponents.SelectPublisher
+      import MyComponents.SelectedPublisher, only: [selected_publisher: 1]
     end
   end
 end

lib/decentralised_book_index_web/components/my_components/select_publisher.ex

@@ -0,0 +1,87 @@
+defmodule DecentralisedBookIndexWeb.Components.MyComponents.SelectPublisher do
+  use DecentralisedBookIndexWeb, :live_component
+  alias DecentralisedBookIndex.Metadata
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div>
+      <.header>
+        Select Publisher
+      </.header>
+
+      <form class="flex items-center" phx-change="search" phx-target={@myself}>
+        <label for="simple-search" class="sr-only">Search</label>
+        <div class="relative w-full">
+          <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+            <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
+            </svg>
+          </div>
+          <input name="query" type="text" phx-debounce="300" autocomplete="off" id="simple-search" class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="Search" value="">
+        </div>
+      </form>
+
+      <%= for publisher <- @page.results do %>
+        <div phx-click="select-publisher" phx-target={@notify_component} phx-value-publisher={publisher.id} class="w-full bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 mx-auto my-3">
+          <h5 class="mb-1 text-lg font-medium text-gray-900 dark:text-white px-2 pt-1">{publisher.name}</h5>
+        </div>
+      <% end %>
+    </div>
+    """
+  end
+
+  @impl true
+  def update(assigns, socket) do
+    {:ok,
+     socket
+     |> assign(assigns)
+     |> assign(:publisher_query, "")
+     |> search()}
+  end
+
+  @impl true
+  def handle_event("validate", %{"publisher" => publisher_params}, socket) do
+    {:noreply,
+     assign(socket, form: AshPhoenix.Form.validate(socket.assigns.form, publisher_params))}
+  end
+
+  def handle_event("save", %{"publisher" => publisher_id}, socket) do
+    notify_parent({:select_publisher, "416d2fc7-4470-4fde-aa64-501259335624"})
+    {:noreply, socket}
+  end
+
+  defp notify_parent(msg), do: send(self(), {__MODULE__, msg})
+
+  defp assign_form(%{assigns: %{publisher: publisher}} = socket) do
+    form =
+      if publisher do
+        AshPhoenix.Form.for_update(publisher, :update,
+          as: "publisher",
+          actor: socket.assigns.current_user
+        )
+      else
+        AshPhoenix.Form.for_create(DecentralisedBookIndex.Metadata.Publisher, :create,
+          as: "publisher",
+          actor: socket.assigns.current_user
+        )
+      end
+
+    assign(socket, form: to_form(form))
+  end
+
+  def handle_event("search", %{"query" => query}, socket) do
+    {:noreply,
+      socket
+      |> assign(:publisher_query, query)
+      |> search()}
+  end
+
+  defp search(socket) do
+    query = Map.get(socket.assigns, :publisher_query, "")
+    page = Metadata.search_publisher!(query)
+
+    socket
+    |> assign(page: page)
+  end
+end

lib/decentralised_book_index_web/components/my_components/selected_publisher.ex

@@ -0,0 +1,29 @@
+defmodule DecentralisedBookIndexWeb.Components.MyComponents.SelectedPublisher do
+  use Phoenix.Component
+  use DecentralisedBookIndexWeb, :verified_routes
+
+  attr :publisher_form, :map, default: nil
+
+  def selected_publisher(assigns) do
+    publisher_id = assigns.publisher_form.value
+
+    publisher =
+      if publisher_id == nil do
+        publisher_id
+      else
+        DecentralisedBookIndex.Metadata.get_publisher_by_id!(publisher_id)
+      end
+
+    assigns = assign(assigns, :publisher, publisher)
+
+    ~H"""
+    <button type="button" phx-click="open-select-publisher" phx-target={@notify_component} class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-sm px-5 py-2.5 text-center me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+      <%= if @publisher != nil do %>
+        {@publisher.name}
+      <% else %>
+        Select a publisher
+      <% end %>
+    </button>
+    """
+  end
+end