feat: Support renaming transcriptions

assets/js/app.js

@@ -28,13 +28,24 @@ let Hooks = {};
  * The phx-blur event didn't seem to have a way to send along the text of the field as there is no `value` attribute
  * because it isn't a form field.
  */
-Hooks.TranscriptionEditor = {
+Hooks.ContentEditor = {
   mounted() {
     this.el.addEventListener("blur", (e) => {
-      const phxTarget = e.target.attributes["phx-target"].value;
-      this.pushEventTo(phxTarget, "reclassify_transcription", {
-        value: e.target.textContent,
-      });
+      const phxTarget = e.target.attributes["phx-target"]?.value;
+      const eventName = e.target.attributes["phx-event-name"].value;
+      const value = e.target.textContent.trim();
+
+      if (!!value) {
+        if (phxTarget) {
+          this.pushEventTo(phxTarget, eventName, {
+            value,
+          });
+        } else {
+          this.pushEvent(eventName, {
+            value,
+          });
+        }
+      }
     });
   },
 };

lib/medical_transcription_web/components/components.ex

@@ -70,6 +70,8 @@ defmodule MedicodeWeb.Components do
     """
   end
 
+  attr(:id, :string, required: true)
+  attr(:target, :any, required: true)
   attr(:transcription, Medicode.Transcriptions.Transcription, required: true)
   attr(:summary_keywords, :list, default: [])
 
@@ -97,7 +99,16 @@ defmodule MedicodeWeb.Components do
 
         <div class="px-[14px] py-3 flex items-center gap-3 bg-brand rounded-lg text-white mr-4 overflow-hidden">
           <img src={~p"/images/document.svg"} width="20" />
-          <span class="font-secondary"><%= @transcription.filename %></span>
+          <p
+            id={@id}
+            contenteditable
+            phx-hook="ContentEditor"
+            phx-event-name="rename_transcription"
+            role="textbox"
+            class="font-secondary"
+          >
+            <%= @transcription.filename %>
+          </p>
         </div>
       </div>
     </div>

lib/medical_transcription_web/components/transcription_text_component.ex

@@ -83,8 +83,9 @@ defmodule MedicodeWeb.Components.TranscriptionTextComponent do
             contenteditable
             role="textbox"
             class="h-full min-h-full rounded p-2"
-            phx-hook="TranscriptionEditor"
+            phx-hook="ContentEditor"
             phx-target={@myself}
+            phx-event-name="reclassify_transcription"
           >
             <.highlight text={@chunk.text} keywords={@chunk.keywords} />
           </p>

lib/medical_transcription_web/live/home_live/index.ex

@@ -76,11 +76,24 @@ defmodule MedicodeWeb.HomeLive.Index do
     {:noreply, push_navigate(socket, to: ~p"/transcriptions/#{transcription.id}")}
   end
 
-  def handle_info({:transcription_created, transcription_id}, socket) do
+  @impl Phoenix.LiveView
+  def handle_info({:transcription_created, _transcription_id}, socket) do
+    transcriptions = list_transcriptions(socket.assigns.current_user)
+
+    socket =
+      socket
+      |> assign(:transcriptions, transcriptions)
+
+    {:noreply, socket}
+  end
+
+  def handle_info({:transcription_updated, transcription_id}, socket) do
+    transcription = get_transcription(transcription_id)
     transcriptions = list_transcriptions(socket.assigns.current_user)
 
     socket =
       socket
+      |> assign(:transcription, transcription)
       |> assign(:transcriptions, transcriptions)
 
     {:noreply, socket}
@@ -92,4 +105,8 @@ defmodule MedicodeWeb.HomeLive.Index do
   defp list_transcriptions(user) do
     Transcriptions.list_transcriptions(user)
   end
+
+  defp get_transcription(id) do
+    Transcriptions.get_transcription(id, true)
+  end
 end

lib/medical_transcription_web/live/transcriptions_live/show.ex

@@ -50,7 +50,12 @@ defmodule MedicodeWeb.TranscriptionsLive.Show do
 
       <main class="flex-1 pl-16 pr-16 pt-[25px]">
         <div class="flex flex-col h-full mx-auto max-w-5xl">
-          <.result_heading transcription={@transcription} summary_keywords={@summary_keywords} />
+          <.result_heading
+            id="transcription-name"
+            target={self()}
+            transcription={@transcription}
+            summary_keywords={@summary_keywords}
+          />
 
           <img
             :if={@transcription.status == :transcribing}
@@ -109,8 +114,29 @@ defmodule MedicodeWeb.TranscriptionsLive.Show do
     {:noreply, socket}
   end
 
+  def handle_event("rename_transcription", %{"value" => new_name}, socket) do
+    new_name_trimmed = String.trim(new_name)
+
+    if socket.assigns.transcription.filename == new_name_trimmed do
+      {:noreply, socket}
+    else
+      {:ok, transcription} =
+        Transcriptions.update_transcription(socket.assigns.transcription, %{
+          filename: new_name_trimmed
+        })
+
+      Phoenix.PubSub.broadcast(
+        :medicode_pubsub,
+        "medicode:#{socket.assigns.current_user.id}",
+        {:transcription_updated, transcription.id}
+      )
+
+      {:noreply, assign(socket, :transcription, transcription)}
+    end
+  end
+
   @impl true
-  def handle_info({:transcription_created, transcription_id}, socket) do
+  def handle_info({:transcription_created, _transcription_id}, socket) do
     transcriptions = list_transcriptions(socket.assigns.current_user)
 
     socket =
@@ -131,6 +157,18 @@ defmodule MedicodeWeb.TranscriptionsLive.Show do
     {:noreply, socket}
   end
 
+  def handle_info({:transcription_updated, transcription_id}, socket) do
+    transcription = get_transcription(transcription_id)
+    transcriptions = list_transcriptions(socket.assigns.current_user)
+
+    socket =
+      socket
+      |> assign(:transcription, transcription)
+      |> assign(:transcriptions, transcriptions)
+
+    {:noreply, socket}
+  end
+
   def handle_info({:transcription_started, _transcription}, socket) do
     {:noreply, assign(socket, :status, :loading)}
   end