From e31db2f5e863abb48685e358a3592a1eb2c58f64 Mon Sep 17 00:00:00 2001
From: Daniel Patterson <me@danielpatterson.dev>
Date: Mon, 27 Nov 2023 01:04:40 +0000
Subject: [PATCH] Working on received marker

---
 lib/wish/wishlist.ex                          | 15 +++++++++++
 lib/wish/wishlist/item.ex                     |  5 ++++
 lib/wish_web/live/home_live/details.ex        | 15 +++++++++++
 lib/wish_web/live/home_live/details.html.heex |  4 +++
 lib/wish_web/live/home_live/index.ex          | 13 ++++++++++
 lib/wish_web/live/home_live/index.html.heex   | 26 ++++++++++++++++---
 6 files changed, 74 insertions(+), 4 deletions(-)

diff --git a/lib/wish/wishlist.ex b/lib/wish/wishlist.ex
index d53be3a..b550900 100644
--- a/lib/wish/wishlist.ex
+++ b/lib/wish/wishlist.ex
@@ -101,4 +101,19 @@ defmodule Wish.Wishlist do
   def change_item(%Item{} = item, attrs \\ %{}) do
     Item.changeset(item, attrs)
   end
+
+  @doc """
+  Toggles the "received" state of an item.
+
+  ## Examples
+
+    iex> toggle_received(item)
+    {:ok, %Item{}}
+
+  """
+
+  def toggle_received(%Item{} = item) do
+    Item.toggle_received_changeset(item)
+    |> Repo.update()
+  end
 end
diff --git a/lib/wish/wishlist/item.ex b/lib/wish/wishlist/item.ex
index 45b211e..341c38b 100644
--- a/lib/wish/wishlist/item.ex
+++ b/lib/wish/wishlist/item.ex
@@ -19,4 +19,9 @@ defmodule Wish.Wishlist.Item do
     |> cast(attrs, [:title, :description, :url, :received, :desire, :image_url])
     |> validate_required([:url])
   end
+
+  def toggle_received_changeset(item) do
+    new_state = !item.received
+    change(item, received: new_state)
+  end
 end
diff --git a/lib/wish_web/live/home_live/details.ex b/lib/wish_web/live/home_live/details.ex
index 948ed1e..3c7c562 100644
--- a/lib/wish_web/live/home_live/details.ex
+++ b/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
diff --git a/lib/wish_web/live/home_live/details.html.heex b/lib/wish_web/live/home_live/details.html.heex
index f0f9d1d..297cad8 100644
--- a/lib/wish_web/live/home_live/details.html.heex
+++ b/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>
diff --git a/lib/wish_web/live/home_live/index.ex b/lib/wish_web/live/home_live/index.ex
index d1d429d..ea0d081 100644
--- a/lib/wish_web/live/home_live/index.ex
+++ b/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
diff --git a/lib/wish_web/live/home_live/index.html.heex b/lib/wish_web/live/home_live/index.html.heex
index de6a85a..4f9076d 100644
--- a/lib/wish_web/live/home_live/index.html.heex
+++ b/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>