Hello,
I am building a webapp using Phoenix/LiveView where I have a list of items that I want to keep synchronized for all the users viewing it, and I also want to prevent concurrent editing.
I managed to do this by using a mix of Presence and Endpoint.broadcast.
The new LiveView streams are very useful to avoid unecessary queries, but I have one problem with it.
I want to disable the actions of each item that is already being edited and re-enable them when the user is done.
The problem I have with streams is, it seems that there is no way to refresh the actions column without using stream_insert, even when the item didn’t change.
There are cases where I want to refresh this column and where I don’t necessary have an item to submit to stream_insert.
For exemple, when a user start editing, I want to disable the actions of this item in the list, so I usually use stream_insert with the retrieved item by the user when he loads the changeset.
form_component.ex
defp save_fruit(socket, :edit, fruit_params) do
case Fruits.update_fruit(socket.assigns.fruit, fruit_params) do
{:ok, fruit} ->
notify_parent({:saved, fruit})
# in my code, this will trigger a broadcast so all users connected
# to this liveview will get their list refreshed with an updated state of
# the table actions for this item
But when a user closes his form without submitting it, or when he closes his browser tab, the only way I found to refresh the table actions is to fetch the item from the database (by using the id of the item I stored in the Presence metas).
I tried to change the table component by putting a phx-update="replace" on the actions <td>, but unfortunately it’s not working. I guess nesting different phx-update is not possible (the parent <tbody> is already set to "stream").
I made an example project available here so you can see how I manage to do this at the moment.
You can try it by just creating an account and by adding/editing/deleting fruits with multiple browser tabs opened. The list and its actions are kept synchronized, but I feel the way I did it is not ideal.
Any idea on how to improve this would be appreciated.
