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 assigns called selected_items that 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.map to add a selected field 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.?

6 comments

/phoenix #streams #liveview

2 1293 6

2024-04-01 21:10:04 UTC

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

Post #4