Some stuff

lib/wish_web/components/core_components.ex

@@ -66,13 +66,13 @@ defmodule WishWeb.CoreComponents do
               phx-window-keydown={JS.exec("data-cancel", to: "##{@id}")}
               phx-key="escape"
               phx-click-away={JS.exec("data-cancel", to: "##{@id}")}
-              class="shadow-zinc-700/10 ring-zinc-700/10 relative hidden rounded-2xl bg-white p-14 shadow-lg ring-1 transition"
+              class="relative hidden bg-purple-50 p-14 border border-black shadow-sharp transition"
             >
               <div class="absolute top-6 right-5">
                 <button
                   phx-click={JS.exec("data-cancel", to: "##{@id}")}
                   type="button"
-                  class="-m-3 flex-none p-3 opacity-20 hover:opacity-40"
+                  class="-m-3 flex-none p-3 hover:opacity-40"
                   aria-label={gettext("close")}
                 >
                   <.icon name="hero-x-mark-solid" class="h-5 w-5" />
@@ -201,7 +201,7 @@ defmodule WishWeb.CoreComponents do
   def simple_form(assigns) do
     ~H"""
     <.form :let={f} for={@for} as={@as} {@rest}>
-      <div class="mt-10 space-y-8 bg-white">
+      <div class="mt-10 space-y-8 bg-purple-50">
         <%= render_slot(@inner_block, f) %>
         <div :for={action <- @actions} class="mt-2 flex items-center justify-between gap-6">
           <%= render_slot(action, f) %>
@@ -378,9 +378,9 @@ defmodule WishWeb.CoreComponents do
         id={@id}
         value={Phoenix.HTML.Form.normalize_value(@type, @value)}
         class={[
-          "mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6",
-          "phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400",
-          @errors == [] && "border-zinc-300 focus:border-zinc-400",
+          "mt-2 block w-full text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6",
+          "phx-no-feedback:border-zinc-800 phx-no-feedback:focus:border-zinc-400",
+          @errors == [] && "border-zinc-800 focus:border-zinc-400",
           @errors != [] && "border-rose-400 focus:border-rose-400"
         ]}
         {@rest}

lib/wish_web/components/layouts/app.html.heex

@@ -1,9 +1,9 @@
 <header class="px-4 sm:px-6 lg:px-8">
   <div class="flex items-center justify-between border-b border-zinc-100 py-3 text-sm">
     <div class="flex items-center gap-4">
-      <a class="font-display text-6xl font-black text-violet-600" href="/">
+      <.link class="font-display text-6xl font-black text-violet-600" navigate="/">
         <img src="/images/logo.svg" />
-      </a>
+      </.link>
     </div>
     <div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900"></div>
   </div>

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

@@ -10,24 +10,17 @@
 <.table
   id="items"
   rows={@streams.items}
-  row_click={fn {_id, item} -> JS.navigate(~p"/items/#{item}") end}
+  row_click={fn {_id, item} -> JS.navigate(~p"/items/#{item}/show/edit") 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
+      <.icon name="hero-trash" />
     </.link>
   </:action>
 </.table>

lib/wish_web/live/item_live/show.ex

@@ -10,12 +10,60 @@ defmodule WishWeb.ItemLive.Show do
 
   @impl true
   def handle_params(%{"id" => id}, _, socket) do
+    item = Wishlist.get_item!(id)
+    changeset = Wishlist.change_item(item)
+
     {:noreply,
      socket
      |> assign(:page_title, page_title(socket.assigns.live_action))
-     |> assign(:item, Wishlist.get_item!(id))}
+     |> assign(:item, item)
+     |> assign_form(changeset)}
   end
 
   defp page_title(:show), do: "Show Item"
   defp page_title(:edit), do: "Edit Item"
+
+  @impl true
+  def handle_event("validate", %{"item" => item_params}, socket) do
+    changeset =
+      socket.assigns.item
+      |> Wishlist.change_item(item_params)
+      |> Map.put(:action, :validate)
+
+    {:noreply, assign_form(socket, changeset)}
+  end
+
+  def handle_event("save", %{"item" => item_params}, socket) do
+    save_item(socket, socket.assigns.live_action, item_params)
+  end
+
+  defp save_item(socket, :edit, item_params) do
+    case Wishlist.update_item(socket.assigns.item, item_params) do
+      {:ok, item} ->
+        {:noreply,
+         socket
+         |> assign(:item, item)
+         |> put_flash(:info, "Item updated successfully")}
+
+      {:error, %Ecto.Changeset{} = changeset} ->
+        {:noreply, assign_form(socket, changeset)}
+    end
+  end
+
+  defp save_item(socket, :new, item_params) do
+    case Wishlist.create_item(item_params) do
+      {:ok, item} ->
+        {:noreply,
+         socket
+         |> assign(:item, item)
+         |> put_flash(:info, "Item created successfully")}
+
+      {:error, %Ecto.Changeset{} = changeset} ->
+        {:noreply, assign_form(socket, changeset)}
+    end
+  end
+
+  defp assign_form(socket, %Ecto.Changeset{} = changeset) do
+    assign(socket, :form, to_form(changeset))
+  end
 end

lib/wish_web/live/item_live/show.html.heex

@@ -1,29 +1,17 @@
 <.header>
-  Item <%= @item.id %>
+  <%= @item.title %>
   <:subtitle>This is a item record from your database.</:subtitle>
-  <:actions>
-    <.link patch={~p"/items/#{@item}/show/edit"} phx-click={JS.push_focus()}>
-      <.button>Edit item</.button>
-    </.link>
-  </:actions>
 </.header>
 
-<.list>
-  <:item title="Title"><%= @item.title %></:item>
-  <:item title="Description"><%= @item.description %></:item>
-  <:item title="Url"><%= @item.url %></:item>
-  <:item title="Desire"><%= @item.desire %></:item>
-</.list>
+<.simple_form for={@form} id="item-form" phx-change="validate" phx-submit="save">
+  <.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[:desire]} type="number" label="Desire" />
+  <:actions>
+    <.button phx-disable-with="Saving...">Save Item</.button>
+  </:actions>
+</.simple_form>
 
 <.back navigate={~p"/items"}>Back to items</.back>
-
-<.modal :if={@live_action == :edit} id="item-modal" show on_cancel={JS.patch(~p"/items/#{@item}")}>
-  <.live_component
-    module={WishWeb.ItemLive.FormComponent}
-    id={@item.id}
-    title={@page_title}
-    action={@live_action}
-    item={@item}
-    patch={~p"/items/#{@item}"}
-  />
-</.modal>