How to fire live_component Form by other DOM?

Questions / Help
, ,
1

Hi community,

I am a beginner at Elixir and Phoenix.
First of all, I have a Form which is a live_component like this:

<div class="survey-component-container">
  <section class="row">
    <h4><%= @product.name %></h4>
  </section>
  <section class="row">
    <.form
      let={f}
      for={@changeset}
      phx-change="validate"
      phx-submit="save"
      phx-target={@myself}
      id={@id}>

      <%# this is what i am trying to do %>
      <PentoWeb.RatingLive.RatingComponent.stars rating={@changeset.data.stars} phx_target={@myself} product_id={@product.id} user_id={@current_user.id} />

      <%# this is the generated field %>
      <%# <!-- %>
      <%= label f, :stars%>
      <%= select f, :stars, Enum.reverse(1..5) %> <%= error_tag f, :stars %>
      <%= hidden_input f, :user_id%> <%= hidden_input f, :product_id%>
      <%= submit "Save", phx_disable_with: "Saving..." %>
      <%# --> %>

    </.form>
  </section>
</div>

I am trying to customise a rating input field by Phoenix.Component and it looks like:

defmodule PentoWeb.RatingLive.RatingComponent do
  use Phoenix.Component
  use Phoenix.HTML

  def stars(assigns) do
    rating = if assigns.rating == nil, do: 0, else: assigns.rating

    list =
      for n <- 1..5 do
        classes = if n > rating, do: "blank", else: "rated"
        svg_icon =
          "<svg class='#{classes}'><use xlink:href='" <>
            PentoWeb.Router.Helpers.static_path(PentoWeb.Endpoint, "/images/icons.svg#icon-star") <>
            "'></use></svg>"

        "<li
        phx-click='save'
        phx-target='#{assigns.phx_target}'
        phx-value-stars='#{n}'
        phx-value-product_id='#{assigns.product_id}'
        phx-value-user_id='#{assigns.user_id}'
        >
        #{svg_icon}
        </li>"
      end

    ~H"""
    <ul class="rating-star-container">
      <%= raw list %>
    </ul>
    """
  end
end

I manage to send the save event but I realise this is so “extra” to pass in all of the values that I need. So I am curious if there is any better way of doing this.

  • as I am still very new to this language please point out any mistakes I made above too. i am willing to learn.

Thanks in advance!