Help setting up my first LiveView (Component?)

Phoenix Forum Questions / Help
1

I am brand new to LiveView, and I think it’s a fit for the problem I am trying to solve. I just went through the free portion of the Pragmatic Studios new course (Phoenix LiveView | The Pragmatic Studio) which is really good, but it seems like everything until the very last course is aimed at a self-contained LiveView application.

I need to do something a little different.

I have attached a diagram for clarity.

Screen Shot 2021-04-23 at 9.08.19 AM
Screen Shot 2021-04-23 at 9.08.19 AM1812×1098 89.1 KB

Let’s assume I have a list of cars, and that I am using bootstrap to set up my app. I would like to edit the details of each car when I click on it. I would like to have the edit form inside the modal’s content. When I click on the car link, the modal would need to be re-rendered as a form with that car’s content.

My questions are:

  • Should the form inside the modal be a live view component? Is this how I render this?
  • Can I send a message to that component from the car link to tell the component to grab the data from the selected car?
  • Am I on the right track with this?

Thanks!

1 Like
2

Yes, assuming you are pushing a patch to the url push_patch(socket, to: Routes.cars_path(socket, :edit, id))

Then in handle_params/3

  def handle_params(params, _uri, socket) do
    {:noreply, apply_action(socket, socket.assigns.live_action, params)}
  end

 defp apply_action(socket, :edit, %{"id" => id}) do
    case Cars.get(id) do
      {:ok, car} ->
        socket
        |> assign(:car, car)

      _error ->
        socket
        |> put_flash(:error, "error message here"))
        |> push_patch(to: Routes.live_path(socket, __MODULE__))
    end
  end

Then you can place the component inside your live_view as:

 <%= if @live_action == :edit do %>
    <%= live_modal @socket, __MODULE__.FormComponent,
          id: @car.id,
          action: @live_action,
          car: @car,
          return_to: Routes.live_path(@socket, __MODULE__) %>
  <% end %>

Where live_modal’s second argument is the form you want to pass. I believe this live_modal component should be in your project when you first generate a resource with mix phx.gen.live ...

For those actions (i.e submit) you have 2 choices to handle. You can add phx_target: @myself in your form options if you want to handle the submission form within your component, or you can let the parent live_view handle the event.

Something like this pretty much is what I do.

In brief:

  1. Yes, you should handle the form inside the modal.
  2. Yes, you can do it from the URI params with push_patch and live_action
  3. Yes :slight_smile:

Also I highly recommend you get the PRO package of the course. it explains all this in later chapters. That is where I learned to do this.

1 Like
3

Thanks so much! this is exactly what i was looking for.

I am on my way to get the PRO package now.

I really liked the approach on this course, and while it was easy to follow, it was also easy to figure out where to go back and review the info when i got lost.

Thanks!

1 Like
4

The only thing i am really worried about is that this app was NOT set up with LiveView. So, i need to dig into how to make that conversion.

5

If it is not big, you could generate a new project with the --live flag and add your stuff in the new project. OR you can also run a diff and see what was added.

6

It’s not horrible. it’s not a trivial app, so i think i’ll do a diff against a live app… this is a case where i am the only developer, so it won’t be a big deal

1 Like
7

The LiveView ‘Getting Started’ guide will show you what to change :slight_smile: Probably the easier path to take.

1 Like