switch to server rendered note_image form

lib/chiya/notes.ex

@@ -138,7 +138,7 @@ defmodule Chiya.Notes do
   @doc """
   Gets a single note image.
   """
-  def get_note_image!(id), do: Repo.get!(NoteImage, id)
+  def get_note_image!(id), do: Repo.get!(NoteImage, id) |> Repo.preload(:note)
 
   @doc """
   Creates a note image and attaches it to a note.

lib/chiya/notes/note_image.ex

@@ -6,9 +6,10 @@ defmodule Chiya.Notes.NoteImage do
   schema "note_images" do
     field :content, :string, default: ""
     field :path, ChiyaWeb.Uploaders.NoteImage.Type
-    field :note_id, :id
     field :featured, :boolean, default: false
 
+    belongs_to :note, Chiya.Notes.Note
+
     timestamps()
   end
 

lib/chiya_web/controllers/note_controller.ex

@@ -75,6 +75,26 @@ defmodule ChiyaWeb.NoteController do
     |> text(raw_note)
   end
 
+  def edit_image(conn, %{"image_id" => id}) do
+    image = Notes.get_note_image!(id)
+    changeset = Notes.change_note_image(image)
+    render(conn, :edit_image, image: image, changeset: changeset)
+  end
+
+  def update_image(conn, %{"image_id" => id, "note_image" => image_params}) do
+    image = Notes.get_note_image!(id)
+
+    case Notes.update_note_image(image, image_params) do
+      {:ok, image} ->
+        conn
+        |> put_flash(:info, "Image updated successfully.")
+        |> redirect(to: ~p"/admin/notes/#{image.note_id}")
+
+      {:error, %Ecto.Changeset{} = changeset} ->
+        render(conn, :edit_image, image: image, changeset: changeset)
+    end
+  end
+
   defp from_channel_ids(note_params) do
     selected_ids = Enum.map(note_params["channels"] || [], &String.to_integer/1)
 

lib/chiya_web/controllers/note_html/edit_image.html.heex

@@ -0,0 +1,21 @@
+<.header>
+  Edit Image <%= @image.id %>
+  <:subtitle>Use this form to manage note image records in your database.</:subtitle>
+</.header>
+
+<.simple_form :let={f} for={@changeset} action={~p"/admin/notes/#{@image.note.id}/image/#{@image.id}"}>
+  <.error :if={@changeset.action}>
+    Oops, something went wrong! Please check the errors below.
+  </.error>
+
+  <.input field={f[:id]} type="hidden" value={@image.id} />
+  <.input field={f[:content]} type="textarea" label="Content" />
+  <.input field={f[:featured]} type="checkbox" label="Featured" />
+
+  <:actions>
+    <.button type="submit">Save</.button>
+  </:actions>
+</.simple_form>
+
+
+<.back navigate={~p"/admin/notes/#{@image.note_id}"}>Back to notes</.back>

lib/chiya_web/controllers/page_html/note.html.heex

@@ -17,7 +17,7 @@
 
     <div class="flex flex-wrap gap-3">
       <%= for image <- @note.images do %>
-        <a href={ChiyaWeb.Uploaders.NoteImage.url({image.path, image}, :full_dithered)} class="lightbox | w-28" data-gallery="note" data-description={image.content}>
+        <a href={ChiyaWeb.Uploaders.NoteImage.url({image.path, image}, :full_dithered)} class="lightbox | w-28" data-gallery="note" data-description={ChiyaWeb.Markdown.render(image.content)}>
           <img src={ChiyaWeb.Uploaders.NoteImage.url({image.path, image}, :thumb_dithered)}
           />
         </a>

lib/chiya_web/live/note_show_live.ex

@@ -42,29 +42,11 @@ defmodule ChiyaWeb.NoteShowLive do
       <div class="flex flex-wrap gap-3" id="images">
         <%= for image <- @note.images do %>
           <article>
-            <a href="#" phx-click={show_modal("image-edit-modal-#{image.id}")} phx-value-id={image.id}>
+            <a href={"/admin/notes/#{@note.id}/image/#{image.id}"}>
               <img
                 class="rounded-lg border border-theme-dim w-28"
                 src={ChiyaWeb.Uploaders.NoteImage.url({image.path, image}, :thumb_dithered)}
               />
-            </a>
-
-            <.modal id={"image-edit-modal-#{image.id}"}>
-              <.simple_form
-                :let={f}
-                for={to_form(Notes.change_note_image(image))}
-                id={"image-edit-form-#{image.id}"}
-                phx-submit="update_edit_image"
-                phx-change="validate_edit_image"
-              >
-                <.input field={f[:id]} type="hidden" value={image.id} />
-                <.input field={f[:content]} type="textarea" label="Content" />
-                <.input field={f[:featured]} type="checkbox" label="Featured" />
-
-                <:actions>
-                  <.button type="submit" phx-click={hide_modal("image-edit-modal-#{image.id}")}>
-                    Save
-                  </.button>
               <.button
                 phx-click="delete_image"
                 phx-value-id={image.id}
@@ -72,9 +54,7 @@ defmodule ChiyaWeb.NoteShowLive do
               >
                 Delete Image
               </.button>
-                </:actions>
-              </.simple_form>
-            </.modal>
+            </a>
           </article>
         <% end %>
       </div>

lib/chiya_web/router.ex

@@ -63,6 +63,9 @@ defmodule ChiyaWeb.Router do
 
     live "/notes/:id", NoteShowLive, :show
     get "/notes/:id/raw", NoteController, :raw
+
+    get "/notes/:id/image/:image_id", NoteController, :edit_image
+    put "/notes/:id/image/:image_id", NoteController, :update_image
   end
 
   ## Authentication routes