update

lib/zoeyscomputer_web/live/image_live/form_component.ex

@@ -0,0 +1,82 @@
+defmodule ZoeyscomputerWeb.ImageLive.FormComponent do
+  use ZoeyscomputerWeb, :live_component
+
+  alias Zoeyscomputer.Images
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div>
+      <.header>
+        <%= @title %>
+        <:subtitle>Use this form to manage image records in your database.</:subtitle>
+      </.header>
+
+      <.simple_form
+        for={@form}
+        id="image-form"
+        phx-target={@myself}
+        phx-change="validate"
+        phx-submit="save"
+      >
+        <.input field={@form[:file]} type="text" label="File" />
+        <:actions>
+          <.button phx-disable-with="Saving...">Save Image</.button>
+        </:actions>
+      </.simple_form>
+    </div>
+    """
+  end
+
+  @impl true
+  def update(%{image: image} = assigns, socket) do
+    {:ok,
+     socket
+     |> assign(assigns)
+     |> assign_new(:form, fn ->
+       to_form(Images.change_image(image))
+     end)}
+  end
+
+  @impl true
+  def handle_event("validate", %{"image" => image_params}, socket) do
+    changeset = Images.change_image(socket.assigns.image, image_params)
+    {:noreply, assign(socket, form: to_form(changeset, action: :validate))}
+  end
+
+  def handle_event("save", %{"image" => image_params}, socket) do
+    save_image(socket, socket.assigns.action, image_params)
+  end
+
+  defp save_image(socket, :edit, image_params) do
+    case Images.update_image(socket.assigns.image, image_params) do
+      {:ok, image} ->
+        notify_parent({:saved, image})
+
+        {:noreply,
+         socket
+         |> put_flash(:info, "Image updated successfully")
+         |> push_patch(to: socket.assigns.patch)}
+
+      {:error, %Ecto.Changeset{} = changeset} ->
+        {:noreply, assign(socket, form: to_form(changeset))}
+    end
+  end
+
+  defp save_image(socket, :new, image_params) do
+    case Images.create_image(image_params) do
+      {:ok, image} ->
+        notify_parent({:saved, image})
+
+        {:noreply,
+         socket
+         |> put_flash(:info, "Image created successfully")
+         |> push_patch(to: socket.assigns.patch)}
+
+      {:error, %Ecto.Changeset{} = changeset} ->
+        {:noreply, assign(socket, form: to_form(changeset))}
+    end
+  end
+
+  defp notify_parent(msg), do: send(self(), {__MODULE__, msg})
+end

lib/zoeyscomputer_web/live/image_live/index.ex

@@ -0,0 +1,48 @@
+defmodule ZoeyscomputerWeb.ImageLive.Index do
+  use ZoeyscomputerWeb, :live_view
+
+  alias Zoeyscomputer.Images
+  alias Zoeyscomputer.Images.Image
+
+  @impl true
+  def mount(_params, _session, socket) do
+    current_user = socket.assigns.current_user
+    {:ok, stream(socket, :images, Images.list_images_by_user(current_user))}
+  end
+
+  @impl true
+  def handle_params(params, _url, socket) do
+    {:noreply, apply_action(socket, socket.assigns.live_action, params)}
+  end
+
+  defp apply_action(socket, :edit, %{"id" => id}) do
+    socket
+    |> assign(:page_title, "Edit Image")
+    |> assign(:image, Images.get_image!(id))
+  end
+
+  defp apply_action(socket, :new, _params) do
+    socket
+    |> assign(:page_title, "New Image")
+    |> assign(:image, %Image{})
+  end
+
+  defp apply_action(socket, :index, _params) do
+    socket
+    |> assign(:page_title, "Listing Images")
+    |> assign(:image, nil)
+  end
+
+  @impl true
+  def handle_info({ZoeyscomputerWeb.ImageLive.FormComponent, {:saved, image}}, socket) do
+    {:noreply, stream_insert(socket, :images, image)}
+  end
+
+  @impl true
+  def handle_event("delete", %{"id" => id}, socket) do
+    image = Images.get_image!(id)
+    {:ok, _} = Images.delete_image(image)
+
+    {:noreply, stream_delete(socket, :images, image)}
+  end
+end

lib/zoeyscomputer_web/live/image_live/index.html.heex

@@ -0,0 +1,56 @@
+<.header>
+  Listing Images
+  <:actions>
+    <.link patch={~p"/images/new"}>
+      <.button>New Image</.button>
+    </.link>
+  </:actions>
+</.header>
+
+<%!-- <.table --%>
+<%!--   id="images" --%>
+<%!--   rows={@streams.images} --%>
+<%!--   row_click={fn {_id, image} -> JS.navigate(~p"/images/#{image.file}") end} --%>
+<%!-- > --%>
+<%!--   <:col :let={{_id, image}} label="File"><%= image.file %></:col> --%>
+<%!--   <:action :let={{_id, image}}> --%>
+<%!--     <div class="sr-only"> --%>
+<%!--       <.link navigate={~p"/images/#{image.file}"}>Show</.link> --%>
+<%!--     </div> --%>
+<%!--     <.link patch={~p"/images/#{image}/edit"}>Edit</.link> --%>
+<%!--   </:action> --%>
+<%!--   <:action :let={{id, image}}> --%>
+<%!--     <.link --%>
+<%!--       phx-click={JS.push("delete", value: %{id: image.id}) |> hide("##{id}")} --%>
+<%!--       data-confirm="Are you sure?" --%>
+<%!--     > --%>
+<%!--       Delete --%>
+<%!--     </.link> --%>
+<%!--   </:action> --%>
+<%!-- </.table> --%>
+
+<div class="grid grid-cols-3 gap-4">
+  <img
+    :for={{dom_id, image} <- @streams.images}
+    src={"https://s3.zoeys.computer/imgs/uploads/#{image.file}.png"}
+    phx-click={JS.navigate(~p"/images/#{image.file}")}
+    class="cursor-pointer hover:shadow-lg transition duration-300 hover:scale-105 rounded-lg ease-out border-2 border-ctp-base hover:border-ctp-mauve"
+    id={dom_id}
+  />
+</div>
+
+<.modal
+  :if={@live_action in [:new, :edit]}
+  id="image-modal"
+  show
+  on_cancel={JS.patch(~p"/images")}
+>
+  <.live_component
+    module={ZoeyscomputerWeb.ImageLive.FormComponent}
+    id={@image.id || :new}
+    title={@page_title}
+    action={@live_action}
+    image={@image}
+    patch={~p"/images"}
+  />
+</.modal>

lib/zoeyscomputer_web/live/image_live/show.ex

@@ -0,0 +1,21 @@
+defmodule ZoeyscomputerWeb.ImageLive.Show do
+  use ZoeyscomputerWeb, :live_view
+
+  alias Zoeyscomputer.Images
+
+  @impl true
+  def mount(_params, _session, socket) do
+    {:ok, socket}
+  end
+
+  @impl true
+  def handle_params(%{"id" => id}, _, socket) do
+    {:noreply,
+     socket
+     |> assign(:page_title, page_title(socket.assigns.live_action))
+     |> assign(:image, Images.get_image_by!(id))}
+  end
+
+  defp page_title(:show), do: "Show Image"
+  defp page_title(:edit), do: "Edit Image"
+end

lib/zoeyscomputer_web/live/image_live/show.html.heex

@@ -0,0 +1,30 @@
+<.header>
+  uploaded by <%= @image.user.email %>
+  <:actions>
+    <%= if(@image.user.email == @current_user.email) do %>
+      <.link patch={~p"/images/#{@image.file}/show/edit"} phx-click={JS.push_focus()}>
+        <.button>Edit image</.button>
+      </.link>
+    <% end %>
+  </:actions>
+</.header>
+
+<img src={"https://s3.zoeys.computer/imgs/uploads/#{@image.file}.png"} />
+
+<.back navigate={~p"/images"}>Back to images</.back>
+
+<.modal
+  :if={@live_action == :edit}
+  id="image-modal"
+  show
+  on_cancel={JS.patch(~p"/images/#{@image.file}")}
+>
+  <.live_component
+    module={ZoeyscomputerWeb.ImageLive.FormComponent}
+    id={@image.id}
+    title={@page_title}
+    action={@live_action}
+    image={@image}
+    patch={~p"/images/#{@image.file}"}
+  />
+</.modal>