51 lines
1.7 KiB
Elixir
51 lines
1.7 KiB
Elixir
defmodule OutlookWeb.TunitEditorComponent do
|
|
|
|
use Phoenix.Component
|
|
|
|
import OutlookWeb.CoreComponents
|
|
|
|
attr :current_tunit, :any
|
|
attr :target, :string
|
|
|
|
def tunit_editor(assigns) do
|
|
~H"""
|
|
<div id="translation-unit-editor" phx-no-hook="tunit_editor" phx-target={@target}>
|
|
<%!-- <div class="h-48 p-2 border border-slate-500 rounded" contenteditable phx-no-change="update_current_tunit">
|
|
<%= @current_tunit.content |> raw %>
|
|
</div> --%>
|
|
<form phx-change="update_current_tunit" phx-target={@target}>
|
|
<textarea id="tunit-editor-content" name="content" class="h-96 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} />
|
|
</div>
|
|
"""
|
|
end
|
|
|
|
defp statuses() do
|
|
[ {:untranslated, "bg-red-800"},
|
|
{:passable, "bg-amber-500/70"},
|
|
{:done, "bg-green-700"} ]
|
|
end
|
|
|
|
defp status_selector(assigns) do
|
|
~H"""
|
|
<form phx-change="tunit_status" phx-target={@target}>
|
|
<div class="tunit-status flex justify-center">
|
|
<.status_button :for={{status, class} <- statuses()} forstatus={status}
|
|
status={@tunit.status} class={class} disabled={@disabled} />
|
|
</div>
|
|
</form>
|
|
"""
|
|
end
|
|
|
|
defp status_button(assigns) do
|
|
~H"""
|
|
<input type="radio" name="status" id={@forstatus} value={@forstatus} class="hidden"
|
|
disabled={@disabled} checked={@status == @forstatus}>
|
|
<label for={@forstatus} title="change translation status"
|
|
class={[@class, "p-2 px-4 mx-4 text-center opacity-30 rounded-lg"]}><%= @forstatus %></label>
|
|
"""
|
|
end
|
|
end
|