Hi all!
I have a LiveComponent living inside a modal. This component lists some items and let me add a new one with a form.
I render the LiveComponent in this way
<%= live_component @socket, TestProjectWeb.ProceedingLive.TaskComponent, id: "tasks-#{@proceeding.id}", proceeding_id: @proceeding.id %>
Here is my component template (is not complete, but I have problems with both the button and the form)
<button class="btn btn-warning btn-fab btn-round" data-toggle="modal" data-target="#exampleModal" >
<i class="material-icons">list</i>
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Tareas</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="d-flex flex-row">
<%= if not @show_add_task do %>
<div class="p-2">
<button class="btn btn-info btn-round" phx-click="show_add_task" phx-target="<%= @myself %>">
Añadir <i class="material-icons">add</i>
</button>
</div>
<% end %>
</div>
<div class="row">
<div class="col-md-12 col-lg-12">
<%= f = form_for @changeset, "#", id: "task-form", phx_submit: "add_task", phx_target: @myself %>
<div class="form-row">
<div class="col-md-9 col-lg-9">
<div class="form-group">
<label class="control-label" for="task_description">Descripción</label>
<%= text_input f, :description, class: "form-control"%>
</div>
</div>
<div class="col-md-3 col-lg-3">
<div class="form-group">
<label class="control-label" for="task_deadline">Fecha límite</label>
<%= date_input f, :deadline, class: "form-control", rows: 1 %>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group">
<%= submit "Guardar", class: "btn btn-primary btn-round", phx_disable_with: "Guardando..." %>
</div>
</div>
</form>
</div>
</div>
The problem is if I click either the submit button or the add button my modal disappears. I’ve added some logs on the way, and events arrive at the expected handle_event functions, but I’m not sure if I’m messing the state at some point so my template can not be rendered.
Here is my LiveComponent code
defmodule TestProjectWeb.ProceedingLive.TaskComponent do
use TestProjectWeb, :live_component
alias TestProject.Accounts
alias TestProject.Proceedings
alias TestProject.Proceedings.Task
@impl true
def update(assigns, socket) do
socket = socket |> assign(assigns) |> assign(:tasks, Proceedings.get_tasks_by_proceeding(assigns.proceeding_id))
{:ok, socket}
end
@impl true
def mount(socket) do
changeset = Proceedings.change_task(%Task{})
socket = assign(
socket,
show_add_task: false,
tasks: [],
changeset: changeset
)
{:ok, socket}
end
@impl true
def handle_event("show_add_task", value, socket) do
:timer.sleep(4000)
socket = assign(socket, show_add_task: true)
{:noreply, socket}
end
@impl true
def handle_event("add_task", %{"task" => task} = _params, socket) do
user = Accounts.get_user_by_session_token(socket.assigns.user_token)
attrs = task
|> Map.put_new("user_id", user.id)
|> Map.put_new("proceeding_id", socket.assigns.proceeding_id)
case Proceedings.create_task(attrs) do
{:ok, _client} ->
socket = assign(
socket,
show_add_task: false,
tasks: [],
changeset: Proceedings.change_task(%Task{}))
socket = assign(socket, show_add_task: false)
{:noreply, socket}
{:error, %Ecto.Changeset{} = changeset} ->
socket = assign(
socket,
show_note_form: false,
note_changeset: changeset)
{:noreply, socket}
end
end
end
This is the template rendered
And this is what I can see after sending the event to the LiveComponent’s process, the modal has just been closed/disappeared.
I added a :time.sleep before {:noreply at both events and the modal is open until :noreply arrives. I`m not sure If I’ve misunderstood something related to state management on LiveComponents, my state is corrupted or anything else
Thanks in advance!
