How to JS.push and trigger a handled event on all items of @streams.something in a LiveView?

Phoenix Forum Questions / Help
,
1

I have a LiveView that contains a text input field with phx-change tied to an event called “search” that searches locations in the database for the string in the text input field, and displays the results of @streams.locations using the table core component.

Each location item on the table has a “keep” action that gets triggered with JS.push, which adds the item to a “kept” list of locations in assigns. This way the user adds items from the search results’ stream (@streams.locations) to a list, before committing this “kept” list to the database with another button.

How do I implement an action that applies the “keep” action on the entire @streams.locations, i.e. a “keep all” action?

I tried a button with phx-click={JS.push("keep_all")} and then accessing socket.assigns.streams.locations within handle_event("keep_all", _params, socket), but IIUC the LiveView has no knowledge of what’s shown in the browser, as the stream items are not in memory.

I then tried something like this:

JS.push("keep_all", value: %{locations: Enum.with_index(@streams.locations)})

and got:

** (ArgumentError) streams can only be consumed directly by a for comprehension.
If you are attempting to consume the stream ahead of time, such as with
`Enum.with_index(@streams.locations)`, you need to place the relevant information
within the stream items instead.

In other words: what is the idiomatic way of using JS.push to trigger an event that does something across all items in streams.something?

2

I’m not sure if you can. My first instinct would be to write a hook that queries those rows and sends a list of IDs to the backend.

1 Like
3

A simple approach would be to have a separate assign with all the IDs, and when someone clicks “keep all” use that all IDs assign

2 Likes
4

I was about to suggest the following If you don’t mind pushing a bunch of events to the server:

<button type="button" phx-click={JS.exec("data-keep", to: "#locations>li")}>all</button>

<ul id="locations">
  <li data-keep={JS.push("keep")} phx-value-id="1">loc 1</li>
  <li data-keep={JS.push("keep")} phx-value-id="2">loc 2</li>
</ul>

Basically you trigger all the JS.push("keep") events you already have defined in your stream elements using a JS.exec call.

But for whatever reason it sends duplicated events to the server for whatever reason :man_shrugging: (In this case, since it is 2 items, it semd both twice, if it was 3, it would send each one 3 times, etc). Not sure if this is a bug or something else.

5

I would apply a data-location-id attribute to each element in the list. Then I’d add a SelectionList hook to the list itself. The hook can listen for a keep-all event, iterate over all its children to build a list of IDs, then push the result to the server.

Edit: @cmo already suggested this