Working on received marker

lib/wish_web/live/home_live/details.ex

@@ -3,13 +3,28 @@ defmodule WishWeb.HomeLive.Details do
 
   alias Wish.Wishlist
 
+  @impl true
   def mount(_params, _session, socket) do
     {:ok, socket}
   end
 
+  @impl true
   def handle_params(%{"id" => id}, _, socket) do
     {:noreply,
      socket
      |> assign(:item, Wishlist.get_item!(id))}
   end
+
+  @impl true
+  def handle_event("toggle_received", %{"id" => id}, socket) do
+    item = Wishlist.get_item!(id)
+
+    case Wishlist.toggle_received(item) do
+      {:ok, updated_item} ->
+        {:noreply, assign(socket, :item, updated_item)}
+
+      {:error, _} ->
+        {:noreply, socket}
+    end
+  end
 end

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

@@ -8,3 +8,7 @@
 <div :if={@item.image_url}>
   <img src={@item.image_url} />
 </div>
+
+<.button phx-click={JS.push("toggle_received", value: %{"id" => @item.id})}>
+  Toggle Received
+</.button>

lib/wish_web/live/home_live/index.ex

@@ -18,4 +18,17 @@ defmodule WishWeb.HomeLive.Index do
 
     {:noreply, assign(socket, :display, new_state)}
   end
+
+  @impl true
+  def handle_event("toggle_received", %{"id" => id}, socket) do
+    item = Wishlist.get_item!(id)
+
+    case Wishlist.toggle_received(item) do
+      {:ok, updated_item} ->
+        {:noreply, assign(socket, :item, updated_item)}
+
+      {:error, _} ->
+        {:noreply, socket}
+    end
+  end
 end

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

@@ -16,9 +16,9 @@
   }
   id="items-grid"
 >
-  <.link
+  <div
     :for={item <- @items}
-    navigate={~p"/details/#{item}"}
+    phx-click={JS.navigate(~p"/details/#{item}")}
     class={[
       "p-2 rounded hover:bg-zinc-100 active:bg-zinc-200",
       case @display do
@@ -37,6 +37,24 @@
         class="rounded"
       />
     </div>
-    <%= item.title %>
-  </.link>
+    <%= if item.received do %>
+      <div class="bg-red-400 text-white">
+        <.icon name="hero-check-circle" />Received
+      </div>
+    <% end %>
+    <div class="flex flex-row justify-between">
+      <%= item.title %>
+      <div phx-click={JS.toggle(to: "#dropdown-#{item.id}")} class="relative">
+        <.icon name="hero-ellipsis-vertical" class="w-7 h-7" />
+        <div
+          id={"dropdown-#{item.id}"}
+          class="absolute z-10 bg-white origin-top right-0 whitespace-nowrap"
+          phx-click={JS.push("toggle_received", value: %{"id" => item.id})}
+          hidden
+        >
+          Mark visible
+        </div>
+      </div>
+    </div>
+  </div>
 </div>