Claudio Ortolina
152 lines
4.2 KiB
Elixir
152 lines
4.2 KiB
Elixir
defmodule MusicLibraryWeb.NotesComponent do
|
|
use MusicLibraryWeb, :live_component
|
|
|
|
alias MusicLibrary.Notes
|
|
alias MusicLibrary.Notes.Note
|
|
|
|
def open(id), do: Fluxon.open_dialog(id)
|
|
|
|
@impl true
|
|
def update(assigns, socket) do
|
|
note = find_or_initialize_note(assigns)
|
|
|
|
changeset =
|
|
Note.changeset(note, %{})
|
|
|
|
{:ok,
|
|
socket
|
|
|> assign(assigns)
|
|
|> assign(:note, note)
|
|
|> assign(:mode, initial_mode(changeset))
|
|
|> assign(:form, to_form(changeset))}
|
|
end
|
|
|
|
defp find_or_initialize_note(%{entity: entity, musicbrainz_id: musicbrainz_id}) do
|
|
case Notes.get_note(entity, musicbrainz_id) do
|
|
nil ->
|
|
%Note{entity: entity, musicbrainz_id: musicbrainz_id, content: ""}
|
|
|
|
note ->
|
|
note
|
|
end
|
|
end
|
|
|
|
@impl true
|
|
def render(assigns) do
|
|
~H"""
|
|
<div>
|
|
<.sheet
|
|
id={@sheet_id}
|
|
placement="right"
|
|
class="w-md sm:min-w-lg lg:min-w-2xl py-16"
|
|
>
|
|
<.tabs>
|
|
<.tabs_list variant="segmented" class="w-48 mx-auto md:mx-0" active_tab={@mode}>
|
|
<:tab name="read" phx-click="set_mode" phx-value-mode="read" phx-target={@myself}>
|
|
{gettext("Read")}
|
|
</:tab>
|
|
<:tab name="edit" phx-click="set_mode" phx-value-mode="edit" phx-target={@myself}>
|
|
{gettext("Edit")}
|
|
</:tab>
|
|
</.tabs_list>
|
|
<.tabs_panel active={@mode == "read"} name="read">
|
|
<article class="w-full mt-5 prose dark:prose-invert prose-zinc prose-sm prose-h1:text-sm">
|
|
{render_notes(@form[:content].value)}
|
|
</article>
|
|
</.tabs_panel>
|
|
<.tabs_panel active={@mode == "edit"} name="edit">
|
|
<.simple_form
|
|
for={@form}
|
|
id="notes-form"
|
|
phx-target={@myself}
|
|
phx-change="validate"
|
|
phx-auto-recover="recover_form"
|
|
phx-submit="save"
|
|
>
|
|
<.textarea class="w-full h-96 font-mono text-sm/4" field={@form[:content]} />
|
|
|
|
<:actions>
|
|
<div class="w-full md:flex md:justify-center">
|
|
<.button
|
|
variant="solid"
|
|
class="w-full md:w-auto"
|
|
phx-disable-with={gettext("Saving...")}
|
|
>
|
|
{gettext("Save")}
|
|
</.button>
|
|
</div>
|
|
</:actions>
|
|
</.simple_form>
|
|
</.tabs_panel>
|
|
</.tabs>
|
|
</.sheet>
|
|
</div>
|
|
"""
|
|
end
|
|
|
|
@impl true
|
|
def handle_event("validate", %{"note" => note_params}, socket) do
|
|
changeset = Notes.change_note(socket.assigns.note, note_params)
|
|
{:noreply, assign(socket, form: to_form(changeset, action: :validate))}
|
|
end
|
|
|
|
def handle_event("save", %{"note" => note_params}, socket) do
|
|
if socket.assigns.note.id do
|
|
update_note(note_params, socket)
|
|
else
|
|
create_note(note_params, socket)
|
|
end
|
|
end
|
|
|
|
def handle_event("recover_form", params, socket) do
|
|
handle_event("validate", params, socket)
|
|
end
|
|
|
|
def handle_event("set_mode", %{"mode" => mode}, socket) when mode in ["read", "edit"] do
|
|
{:noreply, assign(socket, :mode, mode)}
|
|
end
|
|
|
|
defp update_note(note_params, socket) do
|
|
case Notes.update_note(socket.assigns.note, note_params) do
|
|
{:ok, _record} ->
|
|
{:noreply,
|
|
socket
|
|
|> put_toast(:info, gettext("Note updated successfully"))}
|
|
|
|
{:error, %Ecto.Changeset{} = changeset} ->
|
|
{:noreply, assign(socket, form: to_form(changeset))}
|
|
end
|
|
end
|
|
|
|
defp create_note(note_params, socket) do
|
|
case Notes.create_note(socket.assigns.note, note_params) do
|
|
{:ok, note} ->
|
|
changeset =
|
|
Note.changeset(note, %{})
|
|
|
|
{:noreply,
|
|
socket
|
|
|> assign(:note, note)
|
|
|> assign(:form, to_form(changeset))
|
|
|> put_toast(:info, gettext("Note created successfully"))}
|
|
|
|
{:error, %Ecto.Changeset{} = changeset} ->
|
|
{:noreply, assign(socket, form: to_form(changeset))}
|
|
end
|
|
end
|
|
|
|
defp initial_mode(changeset) do
|
|
if Ecto.Changeset.get_field(changeset, :content) in [nil, ""] do
|
|
"edit"
|
|
else
|
|
"read"
|
|
end
|
|
end
|
|
|
|
defp render_notes(notes) do
|
|
(notes || "")
|
|
|> Earmark.as_html!(%Earmark.Options{gfm: true})
|
|
|> raw()
|
|
end
|
|
end
|