More stuff

lib/wish_web/live/home_live/details.ex

@@ -0,0 +1,15 @@
+defmodule WishWeb.HomeLive.Details do
+  use WishWeb, :live_view
+
+  alias Wish.Wishlist
+
+  def mount(_params, _session, socket) do
+    {:ok, socket}
+  end
+
+  def handle_params(%{"id" => id}, _, socket) do
+    {:noreply,
+     socket
+     |> assign(:item, Wishlist.get_item!(id))}
+  end
+end

lib/wish_web/live/home_live/details.html.heex

@@ -0,0 +1,10 @@
+<.link navigate={~p"/"}>
+  <.icon name="hero-arrow-left" /> Back to list
+</.link>
+<.header>
+  <%= @item.title %>
+</.header>
+
+<div :if={@item.image_url}>
+  <img src={@item.image_url} />
+</div>

lib/wish_web/live/home_live/index.ex

@@ -2,7 +2,6 @@ defmodule WishWeb.HomeLive.Index do
   use WishWeb, :live_view
 
   alias Wish.Wishlist
-  alias Wish.Wishlist.Item
 
   @impl true
   def mount(_params, _session, socket) do

lib/wish_web/live/home_live/index.html.heex

@@ -2,38 +2,25 @@
   Listing Items
 </.header>
 
-<.table
-  id="items"
-  rows={@streams.items}
-  row_click={fn {_id, item} -> JS.navigate(~p"/items/#{item}") end}
->
-  <:col :let={{_id, item}} label="Title"><%= item.title %></:col>
-  <:col :let={{_id, item}} label="Description"><%= item.description %></:col>
-  <:col :let={{_id, item}} label="Url"><%= item.url %></:col>
-  <:col :let={{_id, item}} label="Desire"><%= item.desire %></:col>
-  <:action :let={{_id, item}}>
-    <div class="sr-only">
-      <.link navigate={~p"/items/#{item}"}>Show</.link>
-    </div>
-    <.link patch={~p"/items/#{item}/edit"}>Edit</.link>
-  </:action>
-  <:action :let={{id, item}}>
-    <.link
-      phx-click={JS.push("delete", value: %{id: item.id}) |> hide("##{id}")}
-      data-confirm="Are you sure?"
-    >
-      Delete
-    </.link>
-  </:action>
-</.table>
+<div class="grid grid-cols-3" id="items" phx-update="stream">
+  <div
+    :for={{dom_id, item} <- @streams.items}
+    id={dom_id}
+    phx-click={JS.navigate(~p"/details/#{item}")}
+  >
+    <img :if={item.image_url} src={item.image_url} />
+    <%= item.title %>
+  </div>
+</div>
 
-<.modal :if={@live_action in [:new, :edit]} id="item-modal" show on_cancel={JS.patch(~p"/items")}>
-  <.live_component
-    module={WishWeb.ItemLive.FormComponent}
-    id={@item.id || :new}
-    title={@page_title}
-    action={@live_action}
-    item={@item}
-    patch={~p"/items"}
-  />
-</.modal>
+<div class="" id="items" phx-update="stream">
+  <div
+    :for={{dom_id, item} <- @streams.items}
+    id={dom_id}
+    phx-click={JS.navigate(~p"/details/#{item}")}
+    class="flex flex-row h-20"
+  >
+    <img :if={item.image_url} src={item.image_url} />
+    <%= item.title %>
+  </div>
+</div>

lib/wish_web/live/item_live/form_component.ex

@@ -22,6 +22,7 @@ defmodule WishWeb.ItemLive.FormComponent do
         <.input field={@form[:title]} type="text" label="Title" />
         <.input field={@form[:description]} type="text" label="Description" />
         <.input field={@form[:url]} type="text" label="Url" />
+        <.input field={@form[:image_url]} type="text" label="Image URL" />
         <.input field={@form[:received]} type="checkbox" label="Received" />
         <.input field={@form[:desire]} type="number" label="Desire" />
         <:actions>

lib/wish_web/router.ex

@@ -21,6 +21,7 @@ defmodule WishWeb.Router do
     pipe_through :browser
 
     live "/", HomeLive.Index, :index
+    live "/details/:id", HomeLive.Details, :index
   end
 
   # Other scopes may use custom stacks.