From 7990b74bf05fd6acf3c0b2f8a7dc207fc2ab1a5b Mon Sep 17 00:00:00 2001 From: Thelonius Kort Date: Tue, 2 May 2023 22:09:04 +0200 Subject: [PATCH] Add "Unite with next" button --- assets/css/article.css | 6 ++- .../internal_tree/tunit_modifications.ex | 14 +++---- .../components/layouts/app.html.heex | 4 +- .../components/tunit_editor_component.ex | 6 +-- .../live/article_live/menu_component.ex | 24 +++++++++++ lib/outlook_web/live/article_live/new.ex | 40 ++++++++++++++++++- .../live/article_live/new.html.heex | 2 +- .../live/article_live/new_components.ex | 11 +++++ 8 files changed, 91 insertions(+), 16 deletions(-) create mode 100644 lib/outlook_web/live/article_live/menu_component.ex diff --git a/assets/css/article.css b/assets/css/article.css index 35a7319..da0ec51 100644 --- a/assets/css/article.css +++ b/assets/css/article.css @@ -9,13 +9,17 @@ .article span.tunit { @apply hover:bg-gray-300; + padding: 5px 0; + margin: -5px 0; } .dark .article span.tunit { @apply hover:bg-gray-700; + padding: 5px 0; + margin: -5px 0; } -.article span.tunit[current="yes"] { +.article span.tunit[current="yes"], .article span.tunit[selected="yes"] { @apply bg-amber-300 text-stone-700 hover:bg-amber-200 hover:text-red-900; } diff --git a/lib/outlook/internal_tree/tunit_modifications.ex b/lib/outlook/internal_tree/tunit_modifications.ex index da93c4a..956aaf6 100644 --- a/lib/outlook/internal_tree/tunit_modifications.ex +++ b/lib/outlook/internal_tree/tunit_modifications.ex @@ -8,14 +8,14 @@ defmodule Outlook.InternalTree.TunitModifications do name: "unite_with_next", fn: &unite_with_next/2, label: "Unite with next", - description: "unite translation unit with next" + description: "unite selected translation unit with (unselected) next" }, - %{ - name: "split_tunit", - fn: &split_tunit/2, - label: "Split Translation unit", - description: "split translation unit into two" - } + # %{ + # name: "split_tunit", + # fn: &split_tunit/2, + # label: "Split Translation unit", + # description: "split translation unit into two" + # } ] end diff --git a/lib/outlook_web/components/layouts/app.html.heex b/lib/outlook_web/components/layouts/app.html.heex index a6eff0b..f5a8e8e 100644 --- a/lib/outlook_web/components/layouts/app.html.heex +++ b/lib/outlook_web/components/layouts/app.html.heex @@ -2,8 +2,8 @@ <.breakpoint_indicator :if={Mix.env == :dev} /> <.dark_mode_widget /> -
-
+
+
<.flash kind={:info} title="Success!" flash={@flash} /> <.flash kind={:error} title="Error!" flash={@flash} /> <.flash diff --git a/lib/outlook_web/components/tunit_editor_component.ex b/lib/outlook_web/components/tunit_editor_component.ex index 202dddf..7ba6243 100644 --- a/lib/outlook_web/components/tunit_editor_component.ex +++ b/lib/outlook_web/components/tunit_editor_component.ex @@ -9,12 +9,12 @@ defmodule OutlookWeb.TunitEditorComponent do def tunit_editor(assigns) do ~H""" -
+
<%!--
<%= @current_tunit.content |> raw %>
--%>
-
<.status_selector target={@target} disabled={!@current_tunit.status} tunit={@current_tunit} /> @@ -24,7 +24,7 @@ defmodule OutlookWeb.TunitEditorComponent do defp statuses() do [ {:untranslated, "bg-red-800"}, - {:passable, "bg-amber-500"}, + {:passable, "bg-amber-500/70"}, {:done, "bg-green-700"} ] end diff --git a/lib/outlook_web/live/article_live/menu_component.ex b/lib/outlook_web/live/article_live/menu_component.ex new file mode 100644 index 0000000..e532f74 --- /dev/null +++ b/lib/outlook_web/live/article_live/menu_component.ex @@ -0,0 +1,24 @@ +defmodule OutlookWeb.ArticleLive.MenuComponent do + use OutlookWeb, :live_component + + attr :entries, :list + # attr :target, :integer, default: 0 # @myself of the Live(View|Component) where the handlers reside + attr :handler, :string + + @impl true + def render(assigns) do + ~H""" +
+ <.menu_item :for={entry <- @entries} entry={entry} handler={@handler} /> +
+ """ + end + + def menu_item(assigns) do + ~H""" +
+ <%= @entry.label %> +
+ """ + end +end diff --git a/lib/outlook_web/live/article_live/new.ex b/lib/outlook_web/live/article_live/new.ex index 9cf0f13..2cff56d 100644 --- a/lib/outlook_web/live/article_live/new.ex +++ b/lib/outlook_web/live/article_live/new.ex @@ -17,6 +17,7 @@ defmodule OutlookWeb.ArticleLive.New do |> assign(:raw_html_input, %RawHtmlInput{}) |> assign(:changeset, Articles.change_raw_html_input(%RawHtmlInput{})) |> assign(:selected_els, []) + |> assign(:selected_tunits, []) |> assign(:step, :import_raw_html)} end @@ -26,6 +27,7 @@ defmodule OutlookWeb.ArticleLive.New do article = %Article{author_id: author.id} {:noreply, socket + |> assign(:menu_entries, InternalTree.tunit_modifiers()) # REMOVE ME! |> assign(:author, author) |> assign(:article, article)} end @@ -43,7 +45,9 @@ defmodule OutlookWeb.ArticleLive.New do {:noreply, socket |> assign(:raw_internal_tree, - HtmlPreparations.convert_raw_html_input(raw_html_input_params["content"])) + HtmlPreparations.convert_raw_html_input(raw_html_input_params["content"]) + |> InternalTree.garnish(%{}) + ) |> assign(:step, :review_raw_internaltree)} false -> {:noreply, assign(socket, :changeset, changeset)} @@ -54,10 +58,42 @@ defmodule OutlookWeb.ArticleLive.New do def handle_event("approve_raw_internaltree", _, socket) do socket = socket |> assign(:raw_internal_tree, - InternalTree.partition_text(socket.assigns.raw_internal_tree)) + InternalTree.partition_text(socket.assigns.raw_internal_tree) + |> InternalTree.garnish(%{tunits: %{class: :tunit}}) + |> InternalTree.add_phx_click_event( + nodes: :tunits, + click: "toggle_selected_tunit") + ) + |> assign(:menu_entries, InternalTree.tunit_modifiers()) {:noreply, socket |> assign(:step, :review_translation_units)} end + @impl true + def handle_event("toggle_selected_tunit", %{"nid" => tunit_id}, socket) do + {:noreply, toggle_selected_tunit(socket, tunit_id)} + end + + defp toggle_selected_tunit(socket, tunit_id) do + before = socket.assigns.selected_tunits + selected_tunits = case Enum.member?(before, tunit_id) do + false -> List.insert_at(before, -1, tunit_id) + true -> List.delete(before, tunit_id) + end + fun = fn n -> n.nid in selected_tunits && "yes" || "no" end + socket + |> assign(:raw_internal_tree, InternalTree.garnish(socket.assigns.raw_internal_tree, %{tunits: %{selected: fun}})) + |> assign(:selected_tunits, selected_tunits) + end + + @impl true + def handle_event("modify_tunits", %{"modifier" => modifier}, socket) do + {:noreply, + socket + |> assign(:raw_internal_tree, + InternalTree.modify_tunits(socket.assigns.raw_internal_tree, modifier, socket.assigns.selected_tunits) + )} + end + @impl true def handle_event("approve_translation_units", _, socket) do {:noreply, socket |> assign(:step, :final_form)} diff --git a/lib/outlook_web/live/article_live/new.html.heex b/lib/outlook_web/live/article_live/new.html.heex index 96d9310..e1c23ff 100644 --- a/lib/outlook_web/live/article_live/new.html.heex +++ b/lib/outlook_web/live/article_live/new.html.heex @@ -4,7 +4,7 @@ <.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} /> +<.review_translation_units :if={@step == :review_translation_units} raw_internal_tree={@raw_internal_tree} menu_entries={@menu_entries} /> <.live_component :if={@step == :final_form} module={OutlookWeb.ArticleLive.FormComponent} diff --git a/lib/outlook_web/live/article_live/new_components.ex b/lib/outlook_web/live/article_live/new_components.ex index cb3cc08..8b875f2 100644 --- a/lib/outlook_web/live/article_live/new_components.ex +++ b/lib/outlook_web/live/article_live/new_components.ex @@ -44,6 +44,17 @@ defmodule OutlookWeb.ArticleLive.NewComponents do def review_translation_units(assigns) do ~H"""
Review Translation Units
+
+
+ <.render_tree tree={@raw_internal_tree} > +
+
+ <.render_doc tree={@raw_internal_tree} > +
+
+ <.live_component module={OutlookWeb.ArticleLive.MenuComponent} entries={@menu_entries} handler="modify_tunits" id={:review_tunits} /> +
+
<.button phx-click="approve_translation_units">Continue """ end