From 6cac51f88856ce713068063e75369d1e354f75dd Mon Sep 17 00:00:00 2001 From: Leandro Pereira Date: Thu, 9 Jan 2025 10:51:05 -0500 Subject: [PATCH] defer template sync on visual control change --- .../live/page_editor_live/form_component.ex | 70 ++++++++++++++----- .../live_admin/live/page_editor_live/new.ex | 1 + 2 files changed, 53 insertions(+), 18 deletions(-) diff --git a/lib/beacon/live_admin/live/page_editor_live/form_component.ex b/lib/beacon/live_admin/live/page_editor_live/form_component.ex index bff9f19a..654c6e20 100644 --- a/lib/beacon/live_admin/live/page_editor_live/form_component.ex +++ b/lib/beacon/live_admin/live/page_editor_live/form_component.ex @@ -90,21 +90,7 @@ defmodule Beacon.LiveAdmin.PageEditorLive.FormComponent do attrs = Map.get(updated, "attrs", %{}) deleted_attrs = Map.get(payload, :deleted, []) ast = VisualEditor.update_node(socket.assigns.builder_page.ast, path, attrs, deleted_attrs) - - # TODO: Don't save immediately. Debounce serializing this to a template - template = Beacon.Template.HEEx.HEExDecoder.decode(ast) - params = Map.merge(socket.assigns.form.params, %{"template" => template}) - changeset = Content.change_page(socket.assigns.site, socket.assigns.page, params) - - socket = - socket - |> LiveMonacoEditor.set_value(template, to: "template") - |> assign_form(changeset) - |> assign_template(template) - |> maybe_assign_builder_page(changeset) - |> assign(:template, template) - - {:ok, socket} + {:ok, update_builder_page(socket, :ast, ast)} end def update(_, socket) do @@ -183,6 +169,39 @@ defmodule Beacon.LiveAdmin.PageEditorLive.FormComponent do save(page_params, "save", socket) end + def handle_event("enable_editor", %{"editor" => "code"}, socket) do + template = Beacon.Template.HEEx.HEExDecoder.decode(socket.assigns.builder_page.ast) + params = Map.merge(socket.assigns.form.params, %{"template" => template}) + changeset = Content.change_page(socket.assigns.site, socket.assigns.page, params) + + socket = + socket + |> LiveMonacoEditor.set_value(template, to: "template") + |> assign_form(changeset) + + path = + Beacon.LiveAdmin.Router.beacon_live_admin_path( + socket, + socket.assigns.site, + "/pages/#{socket.assigns.page.id}", + %{editor: "code"} + ) + + {:noreply, push_patch(socket, to: path)} + end + + def handle_event("enable_editor", %{"editor" => "visual"}, socket) do + path = + Beacon.LiveAdmin.Router.beacon_live_admin_path( + socket, + socket.assigns.site, + "/pages/#{socket.assigns.page.id}", + %{editor: "visual"} + ) + + {:noreply, push_patch(socket, to: path)} + end + defp save(page_params, user_action, socket) do %{site: site, template: template, page: page, live_action: live_action} = socket.assigns page_params = Map.merge(page_params, %{"site" => site, "template" => template}) @@ -206,7 +225,7 @@ defmodule Beacon.LiveAdmin.PageEditorLive.FormComponent do |> assign(page: page, show_modal: nil) |> update(:page_status, &if(user_action == "publish", do: :published, else: &1)) |> put_flash(:info, "Page #{String.trim_trailing(user_action, "e")}ed successfully") - |> push_patch(to: beacon_live_admin_path(socket, site, "/pages/#{page.id}"))} + |> push_patch(to: beacon_live_admin_path(socket, site, "/pages/#{page.id}", %{editor: socket.assigns.editor}))} else {:error, changeset} -> changeset = Map.put(changeset, :action, :save) @@ -236,6 +255,12 @@ defmodule Beacon.LiveAdmin.PageEditorLive.FormComponent do defp maybe_assign_builder_page(socket, _changeset), do: assign(socket, :builder_page, nil) + defp update_builder_page(socket, key, value) do + update(socket, :builder_page, fn builder_page -> + Map.put(builder_page, key, value) + end) + end + defp assign_extra_fields(socket, changeset) do params = Ecto.Changeset.get_field(changeset, :extra) @@ -290,10 +315,19 @@ defmodule Beacon.LiveAdmin.PageEditorLive.FormComponent do <.page_status status={@page_status} /> <:actions> - <.button :if={@live_action in [:new, :edit] && @editor == "code" && @page.format == :heex} type="button" phx-click="enable_editor" phx-value-editor="visual" class="sui-primary uppercase"> + <.button + :if={@live_action in [:new, :edit] && @editor == "code" && @page.format == :heex} + type="button" + phx-click="enable_editor" + phx-value-editor="visual" + phx-target={@myself} + class="sui-primary uppercase" + > Visual Editor - <.button :if={@live_action in [:new, :edit] && @editor == "visual"} type="button" phx-click="enable_editor" phx-value-editor="code" class="sui-primary uppercase">Code Editor + <.button :if={@live_action in [:new, :edit] && @editor == "visual"} type="button" phx-click="enable_editor" phx-value-editor="code" phx-target={@myself} class="sui-primary uppercase"> + Code Editor + <.button :if={@live_action == :new} phx-disable-with="Saving..." form="page-form" name="save" value="save" class="sui-primary uppercase">Create Draft Page <.button :if={@live_action == :edit} phx-disable-with="Saving..." form="page-form" name="save" value="save" class="sui-primary uppercase">Save Changes <.button :if={@live_action == :edit} phx-click="show_modal" phx-value-confirm="publish" phx-target={@myself} class="sui-primary uppercase">Publish diff --git a/lib/beacon/live_admin/live/page_editor_live/new.ex b/lib/beacon/live_admin/live/page_editor_live/new.ex index 2b7d75a6..c3c968ff 100644 --- a/lib/beacon/live_admin/live/page_editor_live/new.ex +++ b/lib/beacon/live_admin/live/page_editor_live/new.ex @@ -65,6 +65,7 @@ defmodule Beacon.LiveAdmin.PageEditorLive.New do {:noreply, socket} end + # FIXME: enable_editor sync template def handle_event("enable_editor", %{"editor" => editor}, socket) do path = Beacon.LiveAdmin.Router.beacon_live_admin_path(