How to use Liveview Forms with nested schemas

danubiolima

I’m new in Phoenix Liveview and I’m trying to create a quiz app to studying and pratice that framework.

My app currently have three simple ecto schemas (using postgres as database):

Form schema:

schema "form" do
    field :name, :string

    has_many :questions, Question

    timestamps(type: :utc_datetime)
 end

Question schema:

schema "question" do
    field :type, :string, default: "text"
    field :title, :string

    belongs_to :form, Form
    has_many :item, Item

    timestamps(type: :utc_datetime)
 end

Item schema:

schema "item" do
    field :type, :string, default: "text"
    field :title, :string

    belongs_to :question, Question

    timestamps(type: :utc_datetime)
 end

My idea with that schemas is build a simple app where students can acess forms and respond to questions to pratice they knowledgments in web development and related fields.

I have a LiveView questions.ex that lists the questions of a form:

defmodule QuizAppWeb.QuizLive.Questions do
  use QuizAppWeb, :live_view

  alias QuizApp.Quiz
  alias QuizApp.Quiz.Form

  alias QuizApp.Repo

  def render(assigns) do
    ~H"""
    <div class="grid grid-cols-1 gap-10">
      <%= for question <- @form.questions do %>
        <div class="bg-blue-200 rounded-2xl shadow-md p-4">
          <h1 class="text-lg font-bold mb-2"><%= question.title %></h1>
          <div class="bg-gray-300 shadow-md p-4">
            <%= for item <- question.item do %>
              <div class="p-2">
                <input type="radio" id="{item.id}" name="#{item.id}-item" value="{item.id}" />
                <label for="{item.id}"><%= item.title %></label>
              </div>
            <% end %>
          </div>
        </div>
      <% end %>

      <.button phx-click="submit_answers">Enviar</.button>
    </div>
    """
  end

  def mount(%{"form_id" => form_id} = _params, _session, socket) do
    questions = Quiz.get_questions(form_id)
    form = Repo.get(Form, form_id) |> Repo.preload(questions: :item)
    changeset = Form.changeset(form, %{})
    {:ok, assign(socket, questions: questions, form: form, changeset: changeset)}
  end

  def handle_event("submit_answers", %{"form_id" => _form_id} = _params, socket) do
    {:noreply, socket}
  end
end

The interface is like this:

I know, the design is not beautiful, but I’ll improve it soon

The liveview above does not work and I can’t receive the item that user choices. When I click in a item of second question, the items in firsts question unmark automatically.

What is a simple and efficient way to render and store the user answers of the form?

Thank you!

3 comments

/phoenix #liveview #heex

2 1159 3

2024-01-25 06:52:48 UTC

Showing Posts 1 to 3

Show Best Posts
Show All (oldest first)
Show All (newest first)

windexoriginal

I think the first step would be to get things setup within a form component: phoenix form bindings

Right now it looks like when you click the Enviar button to trigger “submit_answers” you will not be getting the values in your inputs because they are not wrapped in a form. You can confirm this by inspecting the params passed in to your handle_event function.

If you are having issues fitting your form around your schema you should consider making a separate changeset that represents your form. That way you don’t have to marry your UI to your schema.

Post #1

danubiolima

@windexoriginal Thanks!
I don’t have idea if this is correct, but worked for me:

defmodule QuizAppWeb.QuizLive.Questions do
  use QuizAppWeb, :live_view

  alias QuizApp.Quiz.Form

  alias QuizApp.Repo

  def render(assigns) do
    ~H"""
    <div class="grid grid-cols-1 gap-10">
      <.form for={@form} phx-submit="save">
        <%= for question <- @form.data.questions do %>
          <div class="bg-blue-200 rounded-2xl shadow-md p-4">
            <h1 class="text-lg font-bold mb-2"><%= question.title %></h1>
            <div class="bg-gray-300 shadow-md p-4">
              <%= for item <- question.item do %>
                <div class="p-2">
                  <input type="radio" id={item.id} name={question.id} value={item.id} />
                  <label for={item.id}><%= item.title %></label>
                </div>
              <% end %>
            </div>
          </div>
        <% end %>
        <.button type="submit">Save</.button>
      </.form>
    </div>
    """
  end

  def mount(%{"form_id" => form_id} = _params, _session, socket) do
    form =
      Repo.get(Form, form_id)
      |> Repo.preload(questions: :item)
      |> Ecto.Changeset.change()
      |> to_form()

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

  def handle_event("save", params, socket) do
    params |> dbg()
    {:noreply, socket}
  end
end

When I click in “Save” button, it returns a map where the key is the question_id and the value is the item id that user choiced, like this:

params #=> %{
  "655eb6bb-4b3b-463d-b975-b3bdd8ea032a" => "d9e1ddae-80cd-4853-a113-fa1ab358cba4",
  "e981890c-0005-4cd8-81c4-3d2aebf7b1a2" => "407f2b2b-9bbf-44f6-9533-acdc54e9146a"
}

I would like to know if I’m making a mistake or something else. Thank you!

Post #2

LostKobrakai

The changeset of the form should be based on the schema of the submitted data, not on the details about of the form. Most offen those are dynamic though, which can be problematic with changesets, which use atoms for fields - and you generally want to avoid creating atoms from user input in a system.

Post #3

— All posts loaded —