Raathmd

Raathmd

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

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?

Most Liked

sodapopcan

sodapopcan

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.

Where Next?

Popular in Questions Top

rms.mrcs
Hi, I need to transform a list of numbers into a map where the keys are the indexes and the values are the original values of the list. ...
New
RisingFromAshes
I’ve read in another post that it may be possible with a router helper - but I couldn’t find an appropriate one, and tbh, I’m still just ...
New
qwerescape
Is there a way to get the call stack or stack trace at any point in the code? Not from exceptions, but an expression that returns how the...
New
jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod – where is this set? Thanks.
New
_russellb
I want to try my hand at web scraping. What tools/libraries do I need to use. I’m hoping to turn this into something professional so don’...
New
sergio
In Ruby, I can go: User.find_by(email: "foobar@email.com").update(email: "hello@email.com") How can I do something similar in Elixir? ...
New
greenz1
I have a phoenix application from which a user can download multiple(5-6) files of size 1MB. I couldn’t find anything related to sending ...
New
ycv005
I have followed this StackOverflow post to install the specific version of Erlang. And When I am running mix ecto.setup then getting fol...
New
Patoshizzle
After calling mix ecto.create I get this error: 17:00:32.162 [error] GenServer #PID&lt;0.412.0&gt; terminating ** (Postgrex.Error) FATAL...
New
LegitStack
I’m trying to make a websocket server in Phoenix or raw Elixir. I heard about gun, I think I could use cowboy, but since I’m not that sma...
New

Other popular topics Top

vonH
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I forese...
New
dokuzbir
I want to highlight html closing tags when i click a html tag. That works in .html files but doesnt work for html.eex templates. How can...
New
danschultzer
None of the current solutions worked well for me, so I went ahead and built a user management system from scratch. This project took far...
548 29377 241
New
greenz1
I have a phoenix application from which a user can download multiple(5-6) files of size 1MB. I couldn’t find anything related to sending ...
New
Nvim
Anybody knows a comprehensive comparison of Django and Phoenix, thanks for the help. Where are they similar? Where do they differ the m...
New
stefanluptak
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
New
klo
Got a question about when to concat vs. prepending items to list then reversing to achieve appending. So i know lists boil down to [1 | ...
New
malloryerik
Hi, this is for people who, like me, have had some friction using .html.heex templates in VSCode. The solution seems to be, in a hyphena...
New
svb
Hi! Currently I want to submit a form by pressing the Enter key. However, since my input field is of type “textarea” this is just adds a...
New

We're in Beta

About us Mission Statement