Add creating and basic editing of translation

lib/outlook_web/live/article_live/index.html.heex

@@ -15,6 +15,7 @@
       <.link navigate={~p"/articles/#{article}"}>Show</.link>
     </div>
     <.link patch={~p"/articles/#{article}/edit"}>Edit</.link>
+    <.link navigate={~p"/translations/new?article_id=#{article}"}>New Translation</.link>
   </:action>
   <:action :let={article}>
     <.link phx-click={JS.push("delete", value: %{id: article.id})} data-confirm="Are you sure?">

lib/outlook_web/live/article_live/new_components.ex

@@ -47,4 +47,12 @@ defmodule OutlookWeb.ArticleLive.NewComponents do
       <.button phx-click="approve_translation_units">Continue</.button>
     """
   end
+
+  def final_form(assigns) do
+    ~H"""
+      <div>Final Form</div>
+      <!-- this should eventually become the first stage because url will be needed for processing of images -->
+      <.button phx-click="save">Save</.button>
+    """
+  end
 end

lib/outlook_web/live/article_live/show.html.heex

@@ -18,6 +18,8 @@
   <%= InternalTree.render_html(@article.content) |> raw %>
 </div>
 
+<.link navigate={~p"/translations/new?article_id=#{@article.id}"}>New Translation</.link>
+
 <.back navigate={~p"/articles"}>Back to articles</.back>
 
 <.modal :if={@live_action == :edit} id="article-modal" show on_cancel={JS.patch(~p"/articles/#{@article}")}>

lib/outlook_web/live/translation_live/edit.ex

@@ -0,0 +1,28 @@
+defmodule OutlookWeb.TranslationLive.Edit do
+  use OutlookWeb, :live_view
+
+  alias Outlook.Articles
+  alias Outlook.Translations
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <.live_component
+      module={OutlookWeb.TranslationLive.FormComponent}
+      id={:new}
+      title="New Translation"
+      action={@live_action}
+      translation={@translation}
+      translation_content={@translation_content}
+      navigate={~p"/translations"}
+    />
+    """
+  end
+
+  @impl true
+  def mount(%{"id" => id} = _params, _session, socket) do
+    socket = socket
+      |> assign_new(:translation, fn -> Translations.get_translation!(id) end)
+    {:ok, assign_new(socket, :translation_content, fn -> socket.assigns.translation.content end)}
+  end
+end

lib/outlook_web/live/translation_live/form_component.ex

@@ -1,36 +1,45 @@
 defmodule OutlookWeb.TranslationLive.FormComponent do
   use OutlookWeb, :live_component
 
-  alias Outlook.Translations
+  alias Outlook.{Translations,InternalTree}
+  alias Outlook.InternalTree.TranslationUnit
 
   @impl true
   def render(assigns) do
     ~H"""
-    <div>
-      <.header>
-        <%= @title %>
-        <:subtitle>Use this form to manage translation records in your database.</:subtitle>
-      </.header>
+    <div class="flex">
+      <div>
+        <.header>
+          <%= @title %>
+          <:subtitle>Use this form to manage translation records in your database.</:subtitle>
+        </.header>
 
-      <.simple_form
-        :let={f}
-        for={@changeset}
-        id="translation-form"
-        phx-target={@myself}
-        phx-change="validate"
-        phx-submit="save"
-      >
-        <.input field={{f, :lang}} type="text" label="lang" />
-        <.input field={{f, :title}} type="text" label="title" />
-        <.input field={{f, :teaser}} type="text" label="teaser" />
-        <.input field={{f, :content}} type="text" label="content" />
-        <.input field={{f, :date}} type="datetime-local" label="date" />
-        <.input field={{f, :public}} type="checkbox" label="public" />
-        <.input field={{f, :unauthorized}} type="checkbox" label="unauthorized" />
-        <:actions>
-          <.button phx-disable-with="Saving...">Save Translation</.button>
-        </:actions>
-      </.simple_form>
+        <.simple_form
+          :let={f}
+          for={@changeset}
+          id="translation-form"
+          phx-target={@myself}
+          phx-change="validate"
+          phx-submit="save"
+        >
+          <.input field={{f, :article_id}} type="hidden" />
+          <.input field={{f, :lang}} type="select" label="lang"
+              options={Application.get_env(:outlook,:deepl)[:target_langs]} />
+          <.input field={{f, :title}} type="text" label="title" />
+          <.input field={{f, :teaser}} type="textarea" label="teaser" class="h-28" />
+          <%!-- <.input field={{f, :content}} type="text" label="content" /> --%>
+          <.input field={{f, :date}} type="datetime-local" label="date" />
+          <.input field={{f, :public}} type="checkbox" label="public" />
+          <.input field={{f, :unauthorized}} type="checkbox" label="unauthorized" />
+          <:actions>
+            <.button phx-disable-with="Saving...">Save Translation</.button>
+          </:actions>
+        </.simple_form>
+        <.tunit_editor current_tunit={@current_tunit} target={@myself} />
+    </div>
+      <div class="article">
+        <%= InternalTree.render_html_preview(@translation.article.content, @myself) |> raw %>
+      </div>
     </div>
     """
   end
@@ -56,9 +65,41 @@ defmodule OutlookWeb.TranslationLive.FormComponent do
   end
 
   def handle_event("save", %{"translation" => translation_params}, socket) do
+    socket = socket
+    |> update_translation_with_current_tunit()
+    translation_params = translation_params
+    |> Map.put("content", socket.assigns.translation_content)
     save_translation(socket, socket.assigns.action, translation_params)
   end
 
+  def handle_event("tunit_status", %{"status" => status}, socket) do
+    tunit = %TranslationUnit{socket.assigns.current_tunit | status: String.to_atom(status)}
+    {:noreply, socket |> assign(:current_tunit, tunit)}
+  end
+
+  def handle_event("select_current_tunit", %{"uuid" => uuid}, socket) do
+    {:noreply,
+      socket
+      |> update_translation_with_current_tunit
+      |> assign(:current_tunit, socket.assigns.translation_content[uuid])}
+  end
+
+  def handle_event("update_current_tunit", %{"content" => content}, socket) do
+    tunit = %TranslationUnit{socket.assigns.current_tunit | content: content}
+    {:noreply, socket |> assign(:current_tunit, tunit)}
+  end
+
+  defp update_translation_with_current_tunit(socket) do
+    translation_content = if socket.assigns.current_tunit do
+        socket.assigns.translation_content
+        |> Map.put(socket.assigns.current_tunit.uuid, socket.assigns.current_tunit)
+      else
+        socket.assigns.translation_content
+      end
+    socket
+    |> assign(:translation_content, translation_content)
+  end
+
   defp save_translation(socket, :edit, translation_params) do
     case Translations.update_translation(socket.assigns.translation, translation_params) do
       {:ok, _translation} ->

lib/outlook_web/live/translation_live/index.html.heex

@@ -11,7 +11,7 @@
   <:col :let={translation} label="Lang"><%= translation.lang %></:col>
   <:col :let={translation} label="Title"><%= translation.title %></:col>
   <:col :let={translation} label="Teaser"><%= translation.teaser %></:col>
-  <:col :let={translation} label="Content"><%= translation.content %></:col>
+  <%!-- <:col :let={translation} label="Content"><%= translation.content %></:col> --%>
   <:col :let={translation} label="Date"><%= translation.date %></:col>
   <:col :let={translation} label="Public"><%= translation.public %></:col>
   <:col :let={translation} label="Unauthorized"><%= translation.unauthorized %></:col>
@@ -19,7 +19,7 @@
     <div class="sr-only">
       <.link navigate={~p"/translations/#{translation}"}>Show</.link>
     </div>
-    <.link patch={~p"/translations/#{translation}/edit"}>Edit</.link>
+    <.link navigate={~p"/translations/#{translation}/edit"}>Edit</.link>
   </:action>
   <:action :let={translation}>
     <.link phx-click={JS.push("delete", value: %{id: translation.id})} data-confirm="Are you sure?">

lib/outlook_web/live/translation_live/new.ex

@@ -0,0 +1,38 @@
+defmodule OutlookWeb.TranslationLive.New do
+  use OutlookWeb, :live_view
+
+  alias Outlook.Articles
+  alias Outlook.Translations.{Translation,Basic}
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <.live_component
+      module={OutlookWeb.TranslationLive.FormComponent}
+      id={:new}
+      title="New Translation"
+      action={@live_action}
+      translation={@translation}
+      translation_content={@translation_content}
+      navigate={~p"/translations"}
+    />
+    """
+  end
+
+  @impl true
+  def mount(%{"article_id" => article_id} = _params, _session, socket) do
+    socket = socket
+      |> assign_new(:translation, fn ->
+        %Translation{
+          article_id: article_id,
+          article: get_article(article_id)
+        }
+        end)
+    {:ok, assign_new(socket, :translation_content, fn ->
+        Basic.internal_tree_to_tunit_map(socket.assigns.translation.article.content) end)}
+  end
+
+  defp get_article(article_id) do
+    Articles.get_article!(article_id)
+  end
+end

lib/outlook_web/live/translation_live/show.html.heex

@@ -2,7 +2,7 @@
   Translation <%= @translation.id %>
   <:subtitle>This is a translation record from your database.</:subtitle>
   <:actions>
-    <.link patch={~p"/translations/#{@translation}/show/edit"} phx-click={JS.push_focus()}>
+    <.link navigate={~p"/translations/#{@translation}/edit"} phx-click={JS.push_focus()}>
       <.button>Edit translation</.button>
     </.link>
   </:actions>
@@ -12,21 +12,10 @@
   <:item title="Lang"><%= @translation.lang %></:item>
   <:item title="Title"><%= @translation.title %></:item>
   <:item title="Teaser"><%= @translation.teaser %></:item>
-  <:item title="Content"><%= @translation.content %></:item>
+  <%!-- <:item title="Content"><%= @translation.content %></:item> --%>
   <:item title="Date"><%= @translation.date %></:item>
   <:item title="Public"><%= @translation.public %></:item>
   <:item title="Unauthorized"><%= @translation.unauthorized %></:item>
 </.list>
 
 <.back navigate={~p"/translations"}>Back to translations</.back>
-
-<.modal :if={@live_action == :edit} id="translation-modal" show on_cancel={JS.patch(~p"/translations/#{@translation}")}>
-  <.live_component
-    module={OutlookWeb.TranslationLive.FormComponent}
-    id={@translation.id}
-    title={@page_title}
-    action={@live_action}
-    translation={@translation}
-    navigate={~p"/translations/#{@translation}"}
-  />
-</.modal>