feat: cart item live view

ricksonoliveira · Dec 14, 2023 · 76ee9d7 · 76ee9d7
1 parent 4e82a08
commit 76ee9d7
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 28 deletions.
diff --git a/lib/food_order_web/live/cart_live/cart_live.ex b/lib/food_order_web/live/cart_live/cart_live.ex
@@ -1,9 +1,16 @@
 defmodule FoodOrderWeb.CartLive do
   use FoodOrderWeb, :live_view
+
+  alias FoodOrder.{Carts, Products}
   alias FoodOrderWeb.CartLive.Details
 
   def mount(_, _, socket) do
-    {:ok, assign(socket, total_quantity: 0)}
+    uuid = Ecto.UUID.generate()
+    Carts.create(uuid)
+    product = Products.list_products() |> hd
+    Carts.add(uuid, product)
+    cart = Carts.get(uuid)
+    {:ok, assign(socket, cart: cart)}
   end
 
   defp empty_cart(assigns) do

diff --git a/lib/food_order_web/live/cart_live/cart_live.html.heex b/lib/food_order_web/live/cart_live/cart_live.html.heex
@@ -1,7 +1,7 @@
  <section class="py-16" data-role="cart">
-   <%= if @total_quantity == 0 do %>
+   <%= if @cart.total_qty == 0 do %>
       <.empty_cart />
     <% else %>
-      <.live_component module={Details} id="cart-details" />
+      <.live_component module={Details} id="cart-details" cart={@cart} />
     <% end %>
 </section>
diff --git a/lib/food_order_web/live/cart_live/details/details.ex b/lib/food_order_web/live/cart_live/details/details.ex
@@ -1,3 +1,4 @@
 defmodule FoodOrderWeb.CartLive.Details do
   use FoodOrderWeb, :live_component
+  alias __MODULE__.Item
 end
diff --git a/lib/food_order_web/live/cart_live/details/details.html.heex b/lib/food_order_web/live/cart_live/details/details.html.heex
@@ -5,36 +5,14 @@
   </div>
 
   <div>
-    <div data-role="item" :for={_ <- 1..4} class="flex items-center my-8 shadow-lg p-2 hover:bg-neutral-100">
-      <img data-role="item-image" src={~p"/images/products/p-1.jpeg"} alt="" class="h-16 w-16 rounded-full">
+    <.live_component :for={item <- @cart.items} module={Item} id={item.item.id} item={item} />
 
-      <div class="flex-1 ml-4">
-        <h1>Pizza</h1>
-        <span>Small</span>
-      </div>
-
-      <div class="flex-1" data-role="quantity">
-        <div class="flex items-center">
-          <button data-role="dec" class="p-1 m-2 rounded-full text-white font-bold bg-fuchsia-500">-</button>
-          <span>10 Item(s)</span>
-          <button data-role="add" class="p-1 m-2 rounded-full text-white font-bold bg-fuchsia-500">+</button>
-        </div>
-      </div>
-
-      <div class="flex flex-1 items-center" data-role="total-item">
-        <span class="font-bold text-lg">$100</span>
-        <button class="ml-2 w-6 h-6 rounded-full text-white bg-fuchsia-500 font-bold">
-          &times
-        </button>
-      </div>
-    </div>
-
-    <hr>
+    <hr />
 
     <div class="text-right py-4" data-role="total-cart">
       <div>
         <span class="text-lg font-bold">Total Amount:</span>
-        <span class="text-2xl font-bold ml-2">$1000</span>
+        <span class="text-2xl font-bold ml-2"><%= @cart.total_price %></span>
       </div>
 
       <form action="" class="mt-12">

diff --git a/lib/food_order_web/live/cart_live/details/item/item.ex b/lib/food_order_web/live/cart_live/details/item/item.ex
@@ -0,0 +1,31 @@
+defmodule FoodOrderWeb.CartLive.Details.Item do
+  use FoodOrderWeb, :live_component
+
+  def render(assigns) do
+    ~H"""
+    <div id={@id} data-role="item" class="flex items-center my-8 shadow-lg p-2 hover:bg-neutral-100">
+      <img data-role="item-image" src={~p"/images/products/#{@item.item.image_url}"} alt="" class="h-16 w-16 rounded-full"/>
+
+      <div class="flex-1 ml-4">
+        <h1><%= @item.item.name %></h1>
+        <span><%= @item.item.size %></span>
+      </div>
+
+      <div class="flex-1" data-role="quantity">
+        <div class="flex items-center">
+          <button data-role="dec" class="p-1 m-2 rounded-full text-white font-bold bg-fuchsia-500">-</button>
+          <span><%= @item.qty %> Item(s)</span>
+          <button data-role="add" class="p-1 m-2 rounded-full text-white font-bold bg-fuchsia-500">+</button>
+        </div>
+      </div>
+
+      <div class="flex flex-1 items-center" data-role="total-item">
+        <span class="font-bold text-lg"><%= @item.item.price %></span>
+        <button class="ml-2 w-6 h-6 rounded-full text-white bg-fuchsia-500 font-bold">
+          &times
+        </button>
+      </div>
+    </div>
+    """
+  end
+end