How do you render live component from inside another live component?

Phoenix Forum Questions / Help
,
1

I am creating my first phoenix live view application which allows user to fill in a quote form.
This form has from and to address sections and a table section where the user can create one or more items specifying the product, number of items, lengh, width and weight of each item.

I used the generator which created 2 live components, one for the quote and the other for items.
Questions:

  1. How do i embed the quote_and items live components onto a single form?
  2. Should i rather be rendering the items table and its actions as part of a quote form render function?
2

Should i use inputs_for in the quote_items live component to capture the associated quote data?

3

Yes, <inputs_for> and cast_assoc is what you’re looking for here. If you using the generators you want to only generate for the parent then you will have to manually create a nested for for the children.

4

This is a 1 to many relation between quotes and quote items. Will inputs_for render a table list with buttons?
Is using slots another approach for calling another live_component?

5

Yep, there is a bit to it so I’m not going to write everything out but here is a fairly typical high-level design of this:

defmodule MyApp.Quotes.Quote do
  use Ecto.Schema

  schema "quotes" do
    # ...
    has_many :items, MyApp.Quotes.Items
    # ...
  end

  def changeset(q, attrs) do
    q
    |> cast(attrs, [...])
    |> cast_assoc(:items)
end

defmodule MyApp.Quotes.Item do
  use Ecto.Schema

  schema "quote_items" do
    # ...
    belongs_to :quote, MyApp.Quotes.Quote
    # ...
  end

  def changeset(item, attrs) do
    item
    |> cast(attrs, [...])
  end
end

defmodule MyApp.Quotes do
  def change_quote(q \\ %MyApp.Quotes.Quote{}, attrs \\ %{}) do
    MyQpp.Quotes.Quote.changeset(q, attrs)
  end

  def create_quote(attrs) do
    %MyApp.Quotes.Quote{}
    |> change_quote(attrs)
    |> MyApp.Repo.insert()
  end
end

defmodule MyAppWeb do
  use MyAppWeb, :live_view

  def mount(_params, _session, socket) do
    changeset = MyApp.Quotes.change_quote()

    {:ok, assign(socket, :form, to_form(changeset)}
  end

  def render(assigns) do
    ~H"""
    <.simple_form for={@form} phx-submit="...">
      <.inputs_for :let={item} field={@form[:items]}>
        <%!-- item stuff --%>
      </.input_for>
    </.simple_form>
    """"
  end
end

Again, very high level. Also note, I’m using q as a variable since quote is one of very few reserved words in Elixir.

This is a great blog post to learn more.

As far as LiveComponents go, they work the same as function components in this regard and you shouldn’t really need one for items. LiveComponents really aren’t necessary for forms and I don’t love that the generators use them, especially since the docs say to not overuse LiveComponents. I think it’s more for an example of how to use them but I’m not sure.

2 Likes
6

Thanks Sodapopcan