Add selecting next/previous tunit and highlight it

.iex-local.exs

@@ -12,6 +12,8 @@ alias Outlook.Translations
 alias Outlook.Translations.Translation
 alias Outlook.Translators.{Deepl,DeeplAccount}
 alias Outlook.Translators
+alias Outlook.Public
+alias Outlook.Public.{Artikel,Autor}
 alias Outlook.Repo
 import Ecto.Query, warn: false
 html = """

assets/css/article.css

@@ -15,6 +15,14 @@
   @apply hover:bg-gray-700;
 }
 
+.article .tunit[current="yes"] {
+  @apply bg-amber-300 text-stone-700 hover:bg-amber-200 hover:text-red-900;
+}
+
+.dark .article .tunit[current="yes"] {
+  @apply bg-amber-500/70 text-white hover:bg-amber-500/70 hover:text-red-900;
+}
+
 .article a.hide-link {
   display: none;
 }

assets/js/app.js

@@ -23,11 +23,14 @@ import {LiveSocket} from "phoenix_live_view"
 import topbar from "../vendor/topbar"
 
 import {DarkModeHook} from './dark-mode-widget'
+import {TranslationFormHook} from "./translation-form"
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 let liveSocket = new LiveSocket("/live", Socket, {
   params: {_csrf_token: csrfToken},
-  hooks: {dark_mode_widget: DarkModeHook},
+  hooks: {translation_form: TranslationFormHook,
+          // tunit_editor: TunitEditorHook,
+          dark_mode_widget: DarkModeHook},
 })
 
 // Show progress bar on live navigation and form submits

assets/js/translation-form.js

@@ -0,0 +1,38 @@
+let TranslationFormHook = {
+
+  mounted() {
+    this.el.addEventListener("keyup", this.keyupHandler.bind(this))
+    this.title_input = this.el.querySelector("#translation-form_title")
+    this.tunit_editor = this.el.querySelector("#tunit-editor-content")
+  },
+  keyupHandler(e) {
+    var preaction = () => { }
+    var postaction = () => { }
+    var payload = {}
+    if (e.altKey){
+      if (e.key == "ArrowDown"){
+        preaction = () => { this.title_input.focus() }
+        postaction = () => { this.tunit_editor.focus() }
+        var handler = "select_next_tunit"
+      } else if (e.key == "ArrowUp"){
+        preaction = () => { this.title_input.focus() }
+        postaction = () => { this.tunit_editor.focus() }
+        var handler = "select_previous_tunit"
+      } else if (e.key == "u") {
+        var handler = "tunit_status"
+        payload = {status: "untranslated"}
+      } else if (e.key == "p") {
+        var handler = "tunit_status"
+        payload = {status: "passable"}
+      } else if (e.key == "o") {
+        var handler = "tunit_status"
+        payload = {status: "done"}
+      }
+      preaction.call()
+      this.pushEventTo(this.el, handler, payload, postaction)
+    }
+    // console.info(["keyupHandler", e, this])
+  },
+}
+
+export {TranslationFormHook}

lib/outlook/internal_tree.ex

@@ -10,11 +10,6 @@ defmodule Outlook.InternalTree do
     |> Html.to_html()
   end
 
-  def render_html_preview(tree, target \\ "1") do
-    tree
-    |> Html.to_html_preview(target)
-  end
-
   require Logger
   def apply_modifier(tree, modifier, nids, opts \\ %{}) do
     # Logger.info modifier

lib/outlook/internal_tree/html.ex

@@ -51,30 +51,6 @@ defmodule Outlook.InternalTree.Html do
 
   def to_html([]), do: ""
 
-  def to_html_preview([ %InternalNode{type: :element} = node | rest], target_id) do
-    attr_string = Map.put(node.attributes, :nid, node.nid)
-    |> Enum.map_join(" ", fn {k,v} -> "#{k}=\"#{v}\"" end)
-    "<#{node.name} #{attr_string}>" <>
-      to_html_preview(node.content, target_id) <>
-      "</#{node.name}>" <>
-      to_html_preview(rest, target_id)
-  end
-
-  def to_html_preview([ %InternalNode{type: :text} = node | rest], target_id) do
-    ~s(<span nid="#{node.nid}">#{node.content}</span>) <> to_html_preview(rest, target_id)
-  end
-
-  def to_html_preview([ %InternalNode{type: :comment} = node | rest], target_id) do
-    ~s(<span nid="#{node.nid}"><!--#{node.content}--></span>) <> to_html_preview(rest, target_id)
-  end
-
-  def to_html_preview([ %TranslationUnit{} = tunit | rest], target_id) do
-    ~s|<span class="tunit" nid="#{tunit.nid}" tu-status="#{tunit.status}" phx-click="select_current_tunit"
-       phx-value-nid="#{tunit.nid}" phx-target="#{target_id}">#{tunit.content}</span>| <> to_html_preview(rest, target_id)
-  end
-
-  def to_html_preview([], _target_id), do: ""
-
 
   def render_doc(tree) do
     OutlookWeb.HtmlDocComponent.render_doc(%{tree: tree})

lib/outlook_web/components/core_components.ex

@@ -464,11 +464,11 @@ defmodule OutlookWeb.CoreComponents do
             <th class="relative p-0 pb-4"><span class="sr-only"><%= gettext("Actions") %></span></th>
           </tr>
         </thead>
-        <tbody class="relative divide-y divide-zinc-100 border-t border-zinc-200 text-sm leading-6 text-zinc-700">
+        <tbody class="relative divide-y divide-zinc-100 border-t border-zinc-200 dark:border-zinc-500 text-sm leading-6 text-zinc-700 dark:text-zinc-400">
           <tr
             :for={row <- @rows}
             id={"#{@id}-#{Phoenix.Param.to_param(row)}"}
-            class="relative group hover:bg-zinc-50"
+            class="relative group hover:bg-zinc-50 dark:hover:bg-zinc-800 "
           >
             <td
               :for={{col, i} <- Enum.with_index(@col)}
@@ -476,11 +476,11 @@ defmodule OutlookWeb.CoreComponents do
               class={["p-0", @row_click && "hover:cursor-pointer"]}
             >
               <div :if={i == 0}>
-                <span class="absolute h-full w-4 top-0 -left-4 group-hover:bg-zinc-50 sm:rounded-l-xl" />
+                <span class="absolute h-full w-4 top-0 -left-4 group-hover:bg-zinc-50 dark:group-hover:bg-zinc-800 sm:rounded-l-xl" />
-                <span class="absolute h-full w-4 top-0 -right-4 group-hover:bg-zinc-50 sm:rounded-r-xl" />
+                <span class="absolute h-full w-4 top-0 -right-4 group-hover:bg-zinc-50 dark:group-hover:bg-zinc-800 sm:rounded-r-xl" />
               </div>
               <div class="block py-4 pr-6">
-                <span class={["relative", i == 0 && "font-semibold text-zinc-900"]}>
+                <span class={["relative", i == 0 && "font-semibold text-zinc-900 dark:text-zinc-300"]}>
                   <%= render_slot(col, row) %>
                 </span>
               </div>
@@ -489,7 +489,7 @@ defmodule OutlookWeb.CoreComponents do
               <div class="relative whitespace-nowrap py-4 text-right text-sm font-medium">
                 <span
                   :for={action <- @action}
-                  class="relative ml-4 font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
+                  class="relative ml-4 font-semibold leading-6 text-zinc-900 hover:text-zinc-700 dark:text-zinc-500 dark:hover:text-zinc-400"
                 >
                   <%= render_slot(action, row) %>
                 </span>

lib/outlook_web/components/tunit_editor_component.ex

@@ -14,7 +14,7 @@ defmodule OutlookWeb.TunitEditorComponent do
         <%= @current_tunit.content |> raw %>
       </div> --%>
       <form phx-change="update_current_tunit" phx-target={@target}>
-        <textarea name="content" class="h-48 rounded border-slate-500 resize-none bg-transparent w-full"
+        <textarea id="tunit-editor-content" name="content" class="h-48 rounded border-slate-500 resize-none bg-transparent w-full"
           disabled={!@current_tunit.status}><%= @current_tunit.content %></textarea>
       </form>
       <.status_selector target={@target} disabled={!@current_tunit.status} tunit={@current_tunit} />

lib/outlook_web/live/translation_live/form_component.ex

@@ -8,7 +8,7 @@ defmodule OutlookWeb.TranslationLive.FormComponent do
   def render(assigns) do
     ~H"""
     <div class="flex gap-8 max-h-fit">
-      <div class="basis-1/2 overflow-auto">
+      <div class="basis-1/2 overflow-auto" id="translation-form-container" target="@myself" phx-hook="translation_form">
         <.header>
           <%= @title %>
           <:subtitle>Use this form to manage translation records in your database.</:subtitle>
@@ -63,6 +63,7 @@ defmodule OutlookWeb.TranslationLive.FormComponent do
      socket
      |> assign(assigns)
      |> assign(:current_tunit, %TranslationUnit{status: nil})
+     |> assign(:tunit_ids, InternalTree.get_tunit_ids(translation.article.content))
      |> assign(:changeset, changeset)
      |> assign_article_tree(translation)
      |> assign(:deepl_progress, nil)}
@@ -118,11 +119,33 @@ defmodule OutlookWeb.TranslationLive.FormComponent do
     {:noreply, socket |> assign(:current_tunit, tunit)}
   end
 
-  def handle_event("select_current_tunit", %{"nid" => nid}, socket) do
+  def handle_event("select_tunit_by_nid", %{"nid" => nid}, socket) do
-    {:noreply,
+    {:noreply, change_tunit(socket, nid)}
-      socket
+  end
-      |> update_translation_with_current_tunit(socket.assigns.current_tunit.status)
+
-      |> assign(:current_tunit, socket.assigns.translation_content[nid])}
+  def handle_event("select_next_tunit", _, socket) do
+    {:noreply, select_next_tunit(socket, &Kernel.+/2)}
+  end
+
+  def handle_event("select_previous_tunit", _, socket) do
+    {:noreply, select_next_tunit(socket, &Kernel.-/2)}
+  end
+
+  defp select_next_tunit(socket, direction) do
+    tunit_ids = socket.assigns.tunit_ids
+    current_tunit_nid = socket.assigns.current_tunit.status && socket.assigns.current_tunit.nid || List.last(tunit_ids)
+    index_current = Enum.find_index(tunit_ids, fn nid -> nid == current_tunit_nid end)
+    index_next = direction.(index_current, 1) |> Integer.mod(length(tunit_ids))
+    next_nid = Enum.at(tunit_ids, index_next)
+    change_tunit(socket, next_nid)
+  end
+
+  defp change_tunit(socket, nid) do
+    fun = fn n -> n.nid == nid && "yes" || "no" end
+    socket
+    |> assign(:article_tree, InternalTree.garnish(socket.assigns.article_tree, %{tunits: %{current: fun}}))
+    |> update_translation_with_current_tunit(socket.assigns.current_tunit.status)
+    |> assign(:current_tunit, socket.assigns.translation_content[nid])
   end
 
   @doc "updating on browser events"
@@ -146,7 +169,7 @@ defmodule OutlookWeb.TranslationLive.FormComponent do
       :article_tree,
       InternalTree.add_phx_click_event(translation.article.content,
         nodes: :tunits,
-        click: "select_current_tunit",
+        click: "select_tunit_by_nid",
         target: socket.assigns.myself)
       |> InternalTree.garnish(%{tunits: %{class: "tunit"}}))
   end