thelonius/phoenix-ausblick
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Update tunit editor

Browse Source 
Now with fancy new radio-buttons.
This commit is contained in:
Thelonius Kort
2023-01-10 23:20:20 +01:00
parent e16710664d
commit 24e58c7d96
5 changed files with 37 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
lib/outlook_web/components/tunit_editor_component.ex
View File

@ -3,49 +3,48 @@ defmodule OutlookWeb.TunitEditorComponent do
use Phoenix.Component
import OutlookWeb.CoreComponents
# alias Phoenix.LiveView.JS
defp statuses do
[ {:untranslated, "bg-red-800 col-span-3 disabled:border-gray-600"},
{:passable, "bg-amber-500 col-span-2 disabled:border-gray-600"},
{:done, "bg-green-700 disabled:border-gray-600"} ]
end
attr :current_tunit, :any
attr :target, :string
def tunit_editor(assigns) do
assigns = unless assigns.current_tunit do
assigns
|> assign(
current_tunit: %Outlook.InternalTree.TranslationUnit{},
disabled: true
)
else
assigns |> assign(disabled: false)
end
~H"""
<div id="translation-unit-editor" phx-nohook="tunit_editor">
<%!-- <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} disabled={@disabled}>
<textarea name="content" class="h-48 rounded border-slate-500 resize-none w-full"><%= @current_tunit.content %></textarea>
</form>
</div>
<div class="grid grid-cols-scheise gap-3">
<div :for={{status, class} <- statuses()}>
<.status_button class={class} status={status} target={@target} disabled={@current_tunit.status == status}></.status_button>
</div>
<div id="translation-unit-editor" phx-nohook="tunit_editor">
<%!-- <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 name="content" class="h-48 rounded border-slate-500 resize-none 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"},
{: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"""
<.link phx-click="tunit_status" phx-value-status={@status} phx-target={@target}>
<.button class={@class} title="select translation status" disabled={@disabled}><%= @status |> to_string %></.button>
</.link>
<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