feat: Record user feedback on given code

lib/medical_transcription/code_feedback.ex

@@ -14,8 +14,23 @@ defmodule MedicalTranscription.CodeFeedback do
   end
 
   def track_response(params) do
-    %MedicalTranscription.CodeFeedback{}
-    |> changeset(params)
-    |> MedicalTranscription.Repo.insert()
+    changeset =
+      %MedicalTranscription.CodeFeedback{}
+      |> changeset(params)
+
+    case MedicalTranscription.Repo.insert(changeset) do
+      {:ok, _code_feedback} ->
+        {:ok, "Success!"}
+
+      {:error, changeset} ->
+        messages =
+          Ecto.Changeset.traverse_errors(changeset, fn {msg, opts} ->
+            Enum.reduce(opts, msg, fn {key, value}, acc ->
+              String.replace(acc, "%{#{key}}", to_string(value))
+            end)
+          end)
+
+        {:error, messages}
+    end
   end
 end

lib/medical_transcription_web/components/components.ex

@@ -1,6 +1,7 @@
 defmodule MedicalTranscriptionWeb.Components do
   use Phoenix.Component
   import MedicalTranscriptionWeb.CoreComponents
+  alias Phoenix.LiveView.JS
 
   def tag_result_chip(assigns) do
     ~H"""
@@ -12,19 +13,38 @@ defmodule MedicalTranscriptionWeb.Components do
         <strong><%= @code %>:</strong>&nbsp;<%= @label %>
       </div>
 
-      <div class="w-fit flex items-center border border-slate-300 rounded">
-        <button
-          phx-click=""
-          type="button"
-          class="px-1 py-0.5 pr-1 rounded-l hover:bg-slate-300 border-r border-slate-300"
-        >
-          <.icon name="hero-check-circle" />
-        </button>
-        <button phx-click="" type="button" class="px-1 py-0.5 rounded-r hover:bg-slate-300">
-          <.icon name="hero-x-circle" />
-        </button>
+      <div class="w-fit flex items-stretch border border-slate-300 rounded overflow-hidden">
+        <.feedback_button
+          code={@code}
+          text={@text}
+          response="true"
+          icon_name="hero-check-circle"
+          class="border-r border-slate-300"
+        />
+        <.feedback_button
+          code={@code}
+          text={@text}
+          response="false"
+          icon_name="hero-x-circle"
+          class=""
+        />
       </div>
     </div>
     """
   end
+
+  defp feedback_button(assigns) do
+    ~H"""
+    <button
+      phx-click="add_feedback"
+      phx-value-code={@code}
+      phx-value-text={@text}
+      phx-value-response={@response}
+      type="button"
+      class={"px-1 py-0.5 hover:bg-slate-300 #{@class}"}
+    >
+      <.icon name={@icon_name} />
+    </button>
+    """
+  end
 end

lib/medical_transcription_web/live/home_live/index.ex

@@ -56,7 +56,7 @@ defmodule MedicalTranscriptionWeb.HomeLive.Index do
           <:col :let={row} label="Codes">
             <div class="min-w-[18rem] max-w-md flex flex-col items-stretch gap-2">
               <%= for %TagResult{code: code, label: label, score: score} <- row.tags do %>
-                <.tag_result_chip code={code} label={label} score={score} />
+                <.tag_result_chip code={code} label={label} score={score} text={row.text} />
               <% end %>
             </div>
           </:col>
@@ -96,6 +96,13 @@ defmodule MedicalTranscriptionWeb.HomeLive.Index do
     {:noreply, socket}
   end
 
+  @impl true
+  def handle_event("add_feedback", params, socket) do
+    result = MedicalTranscription.CodeFeedback.track_response(params)
+
+    {:noreply, put_flash(socket, :info, result)}
+  end
+
   @impl true
   def handle_info({:transcription_row, chunk_result}, socket) do
     # The processing sends a message as each chunk of text is coded. See here for some background and potential