Add importing html and save it to Article

Additionally defines a wizard logic which is partially unused yet.

lib/outlook_web/components/html_tree_component.ex

@@ -0,0 +1,57 @@
+defmodule OutlookWeb.HtmlTreeComponent do
+
+   use Phoenix.Component
+  # use OutlookWeb, :html
+  import OutlookWeb.CoreComponents
+
+  alias Phoenix.LiveView.JS
+
+  attr :tree_items, :list, required: true
+
+  def treeview(assigns) do
+    ~H"""
+      <div class="font-mono whitespace-nowrap">
+      <%= for tree_item <- @tree_items do %>
+        <%= case tree_item do %>
+          <% %{node: %{type: :element}} = item -> %>
+            <.tree_element node={item.node} level={item.level}></.tree_element>
+          <% %{node: %{type: :text}} = item -> %>
+            <.tree_text node={item.node} level={item.level}></.tree_text>
+          <% %{node: %{type: :comment}} = item -> %>
+            <.tree_comment node={item.node} level={item.level}></.tree_comment>
+        <% end %>
+      <% end %>
+      </div>
+      <.link  phx-click={JS.push("apply_modifier", value: %{modifier: :unwrap})}>
+        <.button  title="unwraps selected elements">Unwrap</.button>
+      </.link>
+      <.link  phx-click={JS.push("partition_text", value: %{modifier: :unwrap})}>
+        <.button  title="splits text into sentences">Partition</.button>
+      </.link>
+    """
+  end
+
+  def tree_element(assigns) do
+    ~H"""
+      <div uuid={@node.uuid} phx-click={JS.push("select", value: %{uuid: @node.uuid})}>
+        <%= "#{String.duplicate("  ", @level)}<#{@node.name}>" %>
+      </div>
+    """
+  end
+
+  def tree_text(assigns) do
+    ~H"""
+      <div uuid={@node.uuid} phx-click={JS.push("select", value: %{uuid: @node.uuid})}>
+        <%= "#{String.duplicate("  ", @level)}\"#{String.slice(@node.content, 0, 15)}...\"\n" %>
+      </div>
+    """
+  end
+
+  def tree_comment(assigns) do
+    ~H"""
+      <div uuid={@node.uuid} phx-click={JS.push("select", value: %{uuid: @node.uuid})} title={@node.content}>
+        <%= "#{String.duplicate("  ", @level)}<!-- #{String.slice(@node.content, 0, 15)}...-->\n" %>
+      </div>
+    """
+  end
+end

lib/outlook_web/live/article_live/form_component.ex

@@ -20,8 +20,8 @@ defmodule OutlookWeb.ArticleLive.FormComponent do
         phx-change="validate"
         phx-submit="save"
       >
+        <.input field={{f, :author_id}} type="hidden" />
         <.input field={{f, :title}} type="text" label="title" />
-        <.input field={{f, :content}} type="text" label="content" />
         <.input field={{f, :url}} type="text" label="url" />
         <.input field={{f, :language}} type="text" label="language" />
         <.input field={{f, :date}} type="datetime-local" label="date" />
@@ -54,6 +54,8 @@ defmodule OutlookWeb.ArticleLive.FormComponent do
   end
 
   def handle_event("save", %{"article" => article_params}, socket) do
+    article_params = article_params
+    |> Map.put("content", socket.assigns.internal_tree)
     save_article(socket, socket.assigns.action, article_params)
   end
 

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

@@ -6,7 +6,7 @@
 
 <.table id="articles" rows={@articles} row_click={&JS.navigate(~p"/articles/#{&1}")}>
   <:col :let={article} label="Title"><%= article.title %></:col>
-  <:col :let={article} label="Content"><%= article.content %></:col>
+  <%!-- <:col :let={article} label="Content"><%= article.content %></:col> --%>
   <:col :let={article} label="Url"><%= article.url %></:col>
   <:col :let={article} label="Language"><%= article.language %></:col>
   <:col :let={article} label="Date"><%= article.date %></:col>

lib/outlook_web/live/article_live/new.ex

@@ -3,6 +3,7 @@ defmodule OutlookWeb.ArticleLive.New do
 
   import OutlookWeb.ArticleLive.NewComponents
 
+  alias OutlookWeb.ArticleLive.FormComponent
   alias Outlook.{Articles,Authors,HtmlPreparations}
   alias Articles.{Article,RawHtmlInput}
 
@@ -13,7 +14,6 @@ defmodule OutlookWeb.ArticleLive.New do
     {:ok,
       socket
       |> assign(:page_title, "New Article")
-      |> assign(:article, %Article{})
       |> assign(:raw_html_input, %RawHtmlInput{})
       |> assign(:changeset, Articles.change_raw_html_input(%RawHtmlInput{}))
       |> assign(:selected_els, [])
@@ -23,9 +23,11 @@ defmodule OutlookWeb.ArticleLive.New do
   @impl true
   def handle_params(%{"author_id" => author_id}, _, socket) do
     author = Authors.get_author!(author_id)
+    article = %Article{author_id: author.id}
     {:noreply,
      socket
-     |> assign(:author, author)}
+     |> assign(:author, author)
+     |> assign(:article, article)}
   end
 
   @impl true
@@ -40,13 +42,24 @@ defmodule OutlookWeb.ArticleLive.New do
       true ->
         {:noreply,
           socket
-          |> assign(:raw_internal_tree, HtmlPreparations.convert_raw_html_input(raw_html_input_params["content"]))
+          |> assign(:raw_internal_tree,
+            HtmlPreparations.convert_raw_html_input(raw_html_input_params["content"]))
           |> assign(:step, :review_raw_internaltree)}
       false ->
         {:noreply, assign(socket, :changeset, changeset)}
     end
   end
 
+  @impl true
+  def handle_event("approve_raw_internaltree", _, socket) do
+    {:noreply, socket |> assign(:step, :review_translation_units)}
+  end
+
+  @impl true
+  def handle_event("approve_translation_units", _, socket) do
+    {:noreply, socket |> assign(:step, :final_form)}
+  end
+
   defp validate_raw_html_input(raw_html_input_params, socket) do
       socket.assigns.raw_html_input
       |> Articles.change_raw_html_input(raw_html_input_params)

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

@@ -2,8 +2,19 @@
   New article for <%= @author.name %>
 </.header>
 
-<.import_raw_html :if={@step == :import_raw_html} changeset={@changeset}></.import_raw_html>
-<.review_raw_internaltree :if={@step == :review_raw_internaltree}></.review_raw_internaltree>
-<.review_translation_units :if={@step == :review_translation_units}></.review_translation_units>
+<.import_raw_html :if={@step == :import_raw_html} changeset={@changeset} />
+<.review_raw_internaltree :if={@step == :review_raw_internaltree} raw_internal_tree={@raw_internal_tree} />
+<.review_translation_units :if={@step == :review_translation_units} />
+<.live_component
+  :if={@step == :final_form}
+  module={OutlookWeb.ArticleLive.FormComponent}
+  id={:new}
+  title="New Article"
+  action={:new}
+  article={@article}
+  author={@author}
+  internal_tree={@raw_internal_tree}
+  navigate={~p"/authors/#{@author}"}
+/>
 
 <.back navigate={~p"/authors/#{@author}"}>Back to author</.back>

lib/outlook_web/live/article_live/new_components.ex

@@ -1,6 +1,9 @@
 defmodule OutlookWeb.ArticleLive.NewComponents do
+  use Phoenix.Component
   use OutlookWeb, :html
 
+  alias Outlook.{InternalTree,HtmlPreparations}
+
   def import_raw_html(assigns) do
     ~H"""
     <div>
@@ -13,7 +16,8 @@ defmodule OutlookWeb.ArticleLive.NewComponents do
         phx-change="validate_raw_html_input"
         phx-submit="convert_raw_html_input"
       >
-        <.input field={{f, :content}} type="textarea" label="text to import" phx-debounce="500" />
+        <.input field={{f, :content}} type="textarea" label="text to import" phx-debounce="500"
+          class="h-96" />
         <:actions>
           <.button phx-disable-with="Importing...">HTML importieren</.button>
         </:actions>
@@ -25,13 +29,22 @@ defmodule OutlookWeb.ArticleLive.NewComponents do
   def review_raw_internaltree(assigns) do
     ~H"""
       <div>Review Raw InternalTree</div>
-
+      <div class="flex">
+        <div id="html-preview" class="article">
+          <%= InternalTree.render_html_preview(@raw_internal_tree) |> raw %>
+        </div>
+        <div id="html-tree">
+          <.treeview tree_items={HtmlPreparations.get_tree_items(@raw_internal_tree)} ></.treeview>
+        </div>
+      </div>
+      <.button phx-click="approve_raw_internaltree">Continue</.button>
     """
   end
 
   def review_translation_units(assigns) do
     ~H"""
       <div>Review Translation Units</div>
+      <.button phx-click="approve_translation_units">Continue</.button>
     """
   end
 end

lib/outlook_web/live/article_live/show.ex

@@ -2,6 +2,7 @@ defmodule OutlookWeb.ArticleLive.Show do
   use OutlookWeb, :live_view
 
   alias Outlook.Articles
+  alias Outlook.InternalTree
 
   @impl true
   def mount(_params, _session, socket) do

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

@@ -1,6 +1,11 @@
 <.header>
-  Article <%= @article.id %>
-  <:subtitle>This is a article record from your database.</:subtitle>
+  <a href={@article.url}><%= @article.title %></a>
+  <:subtitle>
+    <div class="flex">
+      <div class="p-4"><%= @article.author.name %></div>
+      <div class="p-4"><%= @article.date %></div>
+    </div>
+  </:subtitle>
   <:actions>
     <.link patch={~p"/articles/#{@article}/show/edit"} phx-click={JS.push_focus()}>
       <.button>Edit article</.button>
@@ -8,13 +13,10 @@
   </:actions>
 </.header>
 
-<.list>
-  <:item title="Title"><%= @article.title %></:item>
-  <:item title="Content"><%= @article.content %></:item>
-  <:item title="Url"><%= @article.url %></:item>
-  <:item title="Language"><%= @article.language %></:item>
-  <:item title="Date"><%= @article.date %></:item>
-</.list>
+
+<div class="article">
+  <%= InternalTree.render_html(@article.content) |> raw %>
+</div>
 
 <.back navigate={~p"/articles"}>Back to articles</.back>
 

lib/outlook_web/live/author_live/show.ex

@@ -13,7 +13,7 @@ defmodule OutlookWeb.AuthorLive.Show do
     {:noreply,
      socket
      |> assign(:page_title, page_title(socket.assigns.live_action))
-     |> assign(:author, Authors.get_author!(id))}
+     |> assign(:author, Authors.get_author_with_articles!(id))}
   end
 
   defp page_title(:show), do: "Show Author"

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

@@ -18,6 +18,26 @@
   <:item title="Homepage url"><%= @author.homepage_url %></:item>
 </.list>
 
+<.table id="articles" rows={@author.articles} row_click={&JS.navigate(~p"/articles/#{&1}")}>
+  <:col :let={article} label="Title"><%= article.title %></:col>
+  <%!-- <:col :let={article} label="Content"><%= article.content %></:col> --%>
+  <:col :let={article} label="Url"><%= article.url %></:col>
+  <:col :let={article} label="Language"><%= article.language %></:col>
+  <:col :let={article} label="Date"><%= article.date %></:col>
+  <:action :let={article}>
+    <div class="sr-only">
+      <.link navigate={~p"/articles/#{article}"}>Show</.link>
+    </div>
+    <.link patch={~p"/articles/#{article}/edit"}>Edit</.link>
+  </:action>
+  <:action :let={article}>
+    <.link phx-click={JS.push("delete", value: %{id: article.id})} data-confirm="Are you sure?">
+      Delete
+    </.link>
+  </:action>
+</.table>
+
+
 <.back navigate={~p"/authors"}>Back to authors</.back>
 
 <.modal :if={@live_action == :edit} id="author-modal" show on_cancel={JS.patch(~p"/authors/#{@author}")}>