feat: Search for codes by code or description

lib/medical_transcription/coding.ex

@@ -35,10 +35,14 @@ defmodule MedicalTranscription.Coding do
     num_rows >= 14_567
   end
 
-  def get_all_code_vectors do
-    # TODO: Limit this to a subset of codes for now. This will instead become a search function for auto-complete from
-    # the UI.
-    Repo.all(from v in CodeVector, limit: 100)
+  def search_for_code_vector(""), do: []
+
+  def search_for_code_vector(text) when is_binary(text) do
+    Repo.all(
+      from v in CodeVector,
+        where: ilike(v.code, ^"%#{text}%") or ilike(v.description, ^"%#{text}%"),
+        limit: 5
+    )
   end
 
   @doc """

lib/medical_transcription_web/components/code_select.ex

@@ -10,37 +10,44 @@ defmodule MedicalTranscriptionWeb.Components.CodeSelect do
   def mount(socket) do
     socket =
       socket
+      |> assign(:form, to_form(%{"search_term" => ""}))
       |> assign(:codes, [])
       |> assign(:selected_code, nil)
 
     {:ok, socket}
   end
 
-  @impl Phoenix.LiveComponent
-  def update_many(assigns_sockets) do
-    codes = lookup_codes()
-
-    Enum.map(assigns_sockets, fn {_assigns, socket} ->
-      assign(socket, :codes, codes)
-    end)
-  end
-
   @impl Phoenix.LiveComponent
   def render(assigns) do
     ~H"""
     <div>
       <%= if is_nil(@selected_code) do %>
-        <select
-          class="w-full rounded"
-          phx-change="choose-code"
-          phx-blur="choose-code"
-          phx-target={@myself}
-        >
-          <option value="0">Choose another code...</option>
-          <%= for code <- @codes do %>
-            <option value={code.code}><%= code.code %>: <%= code.description %></option>
-          <% end %>
-        </select>
+        <.form for={@form} phx-change="suggest-code" phx-target={@myself}>
+          <.input
+            type="text"
+            field={@form[:search_term]}
+            class="w-full rounded"
+            style={if length(@codes) > 0, do: "border-radius: 0.25rem 0.25rem 0 0 !important;"}
+            placeholder="Search for another code..."
+            phx-change="suggest-code"
+            phx-target={@myself}
+          />
+        </.form>
+
+        <%= if length(@codes) > 0 do %>
+          <div class="border-l border-r border-b border-zinc-400">
+            <%= for code <- @codes do %>
+              <p
+                class="px-2 py-1 text-sm border-b border-zinc-100 hover:bg-blue-200"
+                phx-click="choose-code"
+                phx-value-code={code.code}
+                phx-target={@myself}
+              >
+                <%= code.code %>: <%= code.description %>
+              </p>
+            <% end %>
+          </div>
+        <% end %>
       <% else %>
         <p class="leading-normal font-bold text-type-black-primary uppercase">
           User-selected code
@@ -60,13 +67,16 @@ defmodule MedicalTranscriptionWeb.Components.CodeSelect do
   end
 
   @impl Phoenix.LiveComponent
-  def handle_event("choose-code", %{"value" => code}, socket) do
-    selected_code = Enum.find(socket.assigns.codes, &(&1.code == code))
+  def handle_event("suggest-code", %{"search_term" => text}, socket) do
+    suggested_codes = MedicalTranscription.Coding.search_for_code_vector(text)
 
-    {:noreply, assign(socket, :selected_code, selected_code)}
+    {:noreply, assign(socket, :codes, suggested_codes)}
   end
 
-  defp lookup_codes do
-    MedicalTranscription.Coding.get_all_code_vectors()
+  @impl Phoenix.LiveComponent
+  def handle_event("choose-code", %{"code" => code}, socket) do
+    selected_code = Enum.find(socket.assigns.codes, &(&1.code == code))
+
+    {:noreply, assign(socket, :selected_code, selected_code)}
   end
 end