Hi,
Basically I’m coding an order system. There’re Products, Customer, Order and OrderItems tables.
My Order form is like attached capture.
Here’s my codes:
lib/myapp_web/live/admin/form_component.html.leex
<h2><%= @title %></h2>
<%= f = form_for @changeset, "#",
id: "order-request-form",
phx_target: @myself,
phx_submit: "save" %>
<%= label f, :customer_id %>
<%= text_input f, :customer_id %>
<%= error_tag f, :customer_id %>
<%= label f, :order_id %>
<%= text_input f, :order_id %>
<%= error_tag f, :order_id %>
<h2>Order Items</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Count</th>
<th></th>
</tr>
</thead>
<tbody id="products">
<tr>
<td>
<%= select f, :product_id, Enum.map(@products, &{&1.name, &1.id })%>
</td>
<td>
<%= select f, :count, 1..50 %>
<%= error_tag f, :count %>
</td>
<td>
<button type="button" phx-click="add">+</button>
</td>
</tr>
</tbody>
</table>
<h2>Cart</h2>
<table id="cart" phx-update="append">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Count</th>
<th></th>
</tr>
</thead>
<tbody>
<%= for item <- @cart_items do %>
<tr id="item-<%= item.id %>">
<td><%= item.name %></td>
<td><%= item.price %></td>
<td></td>
<td>
<button type="button" phx-click="remove">-</button>
</td>
</tr>
<% end %>
</tbody>
</table>
<%= submit "Save", phx_disable_with: "Saving..." %>
</form>
lib/myapp_web/live/admin/index.ex
defmodule MyAppWeb.AdminLive.Index do
use MyAppWeb, :live_view
alias MyApp.{ Products, Orders }
@impl true
def mount(_params, _session, socket) do
socket = socket |> assign(:pending_orders, load_pending_orders())
{:ok, socket, temporary_assigns: [cart_items: []]}
end
@impl true
def handle_params(params, _url, socket) do
IO.inspect(params)
IO.inspect(socket.assigns)
{:noreply, apply_action(socket, socket.assigns.live_action, params)}
end
@impl true
def handle_event("add", params, socket) do
IO.puts("+++++++++++++++++ADDING+++++++++++++++++++")
IO.inspect(params)
IO.inspect(socket.assigns.cart_items)
IO.puts("+++++++++++++++++ADDED+++++++++++++++++++")
cart_items = socket.assigns.cart_items
socket = assign(socket, :cart_items, cart_items)
{:noreply, socket}
end
@impl true
def handle_event("remove", params, socket) do
IO.puts("+++++++++++++++++REMOVING+++++++++++++++++++")
IO.inspect(params)
IO.inspect(socket.assigns.cart_items)
IO.puts("+++++++++++++++++REMOVED+++++++++++++++++++")
cart_items = socket.assigns.cart_items
socket = assign(socket, :cart_items, cart_items)
{:noreply, socket}
end
defp apply_action(socket, :new, _params) do
socket
|> assign(:page_title, "New Order")
|> assign(:order_request, nil)
|> assign(:products, load_avaliable_products())
|> assign(:cart_items, [%Products.Product{}])
end
defp apply_action(socket, :index, _params) do
socket
|> assign(:page_title, "Admin")
|> assign(:pending_orders, load_pending_orders())
end
defp load_pending_orders do
Orders.list_pending_orders()
end
defp load_avaliable_products do
Products.list_avaliable_products()
end
end
What I need is, getting selected values of ordered products when click the “+” button on server side.
How can I achieve this?
Thank you!
