distefam
Updating individual stream items
I have a table view of items that I am rendering using Streams in a Live Component. The component fetches the list of items and updates the socket Streams in update/2 and everything works as expected.
However, I want to allow users to select multiple items in the table view and update the styling of the row when selected (adding a checkmark and changing the background color, for example).
I’ve attempted to do this two ways:
- Maintain a separate Map in
assignscalledselected_itemsthat looks like%{item_id: true}if an item is selected. I then simply use:if={Map.get(@selected_items, item.id, false)to hide/show some element.
The problem with this approach, of course, is that updating selected_items will not result in updating the table row since the Stream is not updated. So, while this renders correctly on initial load it is not responsive to user input.
- Use
Enum.mapto add aselectedfield to the Stream item’s map. This works great, however, the issue is updating…
To update an individual Stream item you must call stream_insert, which requires that I have the full item to insert. Since selecting or deselecting an individual row will be a common action and one done in rapid succession, it doesn’t feel like a great idea to repeatedly have to query and update the database just to toggle a selected state, especially since this will not be committed to the database until the user clicks “save”.
So, is there any way to handle this use case using streams? Or, do I need to use a regular assigns with manual pagination, etc.?
Marked As Solved
distefam
To solve this, I had to use both JS.push and style children based on parent classes.
Here’s a simplified version of the table:
<tbody id="items" phx-update="stream">
<tr
:for={{dom_id, item} <- @streams.items}
id={dom_id}
phx-click={select_item(@myself)}
phx-value-id={item.id}
class={"group #{if MapSet.member?(@selected_items, item), do: "selected"} ..."}
>
<td>
<.icon class="hidden group-[.selected]:block" name="hero-check-circle" />
</td>
</tr>
</tbody>
note: selected is a custom Tailwind class I created in app.css, which adds relevant background color and other styles to selected table rows.
Then, the private select_item/1 function that is invoked by the phx-click action on the table row above:
defp select_item(target) do
JS.push("select-item", target: target)
|> JS.toggle_class("selected")
end
This was the crucial thing: having the click event trigger a local function that performs the client-side JS and triggers the server-side event that will be handled by handle_event/3 rather than simply using handle_event/3 directly.
Finally, the event handler:
def handle_event("select-item", params, socket) do
%{"id" => id} = params
socket =
update(socket, :selected_items, fn selected_items ->
if MapSet.member?(selected_items, id),
do: MapSet.delete(selected_items, id),
else: MapSet.put(selected_items, id)
end)
end
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Producing high quality Elixir screencasts since 2017.
Categories:
Sub Categories:
Forums
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Real-time error tracking, performance insights, and observability for devs.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
The deployment platform built for Elixir: PaaS ease, VPS control.
Courses that'll move you from confusion to "Aha, now I get it!"