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?

First 5 of 5 Posts Switch mode

Raathmd

Raathmd OP

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

sodapopcan

sodapopcan

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.

Raathmd

Raathmd OP

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?

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.

Raathmd

Raathmd OP

Thanks Sodapopcan

— All posts loaded —

Where Next?

Trending in Questions Top

jonnycharles
I’m in search of an Elixir library that offers PDF generation capabilities similar to Ruby’s Prawn. While there have been discussions abo...
New
spammy
I’m looking to build a personal workflow to quickly deploy web applications written in elixir/phoenix, for local consumption (ie not on t...
New
silverdr
Using Phoenix.LiveView.TagEngine as an EEx.Engine is deprecated! To compile HEEx, use Phoenix.LiveView.TagEngine.compile/2 instead. Sta...
New
dli
Before I dive in myself, did anyone successfully sprinkle Hologram into their existing LiveView app? Looking for hints regarding: Addi...
New
bottlenecked
Hi all, I wanted to ask how the community is dealing with post-release steps. Today we have Ecto migrations, which make sure that the db...
New
michallepicki
I am using Oban and occasionally, shortly after a deployment, a handful of jobs can fail because of dependency on other parts of the syst...
New
rahultumpala
Hello, I have an Elixir backend that implements a custom protocol over TCP. I want to load test the backend and assess the performance o...
New

Other Trending Topics Top

JesseHerrick
Hey, I’m Jesse and I’m the main contributor behind Dexter, a full-featured, lightning-fast Elixir LSP optimized for large codebases. It s...
New
jimsynz
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
Damirados
Hello everyone. After busy few months I am happy to announce v0.1.0 of Emerge &amp; Solve. They are GUI (Emerge) and State management (S...
New
ausimian
Emily is an Elixir library that runs Nx computations on Apple’s MLX. Install it as the default Nx backend and Nx, defn, Axon, Nx.Serving,...
New
type1fool
I just stumbled on a newly redesigned elixir-lang.org. :tada: It looks like @Software_Mansion did the work, and I think it is generally a...
New
akoutmos
@hugobarauna and I (Alex Koutmos) have been hard at work on writing a book on Nerves that takes you from simply blinking LEDs to building...
New

We're in Beta

About us Mission Statement