How to update live view table in realtime?

Phoenix Forum Questions / Help
, , ,
1

Hi again :slight_smile:

I have this live view

<.header>
  Shopping list
</.header>

<.table
  id="shopping_lists"
  rows={@streams.items}
>

<:col :let={{_id, item}} label="Name"><%= item.name %></:col>
<:col :let={{_id, item}} label="Description"><%= item.description %></:col>
<:col :let={{_id, item}} label="Quantity"><%= item.quantity %></:col>
<:col :let={{_id, item}} label="Mark as purchased">
  <input type="checkbox" phx-click="toggle_purchased" phx-value-item-id={item.id} checked={item.mark_as_purchased}/>
</:col>

</.table>

<.modal :if={@live_action in [:new, :edit]} id="shopping_list-modal" show on_cancel={JS.patch(~p"/shopping_lists")}>
  <.live_component
    module={SarokShoppingWeb.ShoppingListLive.FormComponent}
    id={@shopping_list.id || :new}
    title={@page_title}
    action={@live_action}
    shopping_list={@shopping_list}
    patch={~p"/shopping_lists"}
  />
</.modal>

and this is my index.ex

defmodule SarokShoppingWeb.ShoppingListLive.Index do
  use SarokShoppingWeb, :live_view

  alias SarokShopping.Items

  @impl true
  def mount(_params, _session, socket) do
    {:ok, stream(socket, :items, Items.get_shopping_items_selected())}
  end

  @impl true
  def handle_params(params, _url, socket) do
    {:noreply, apply_action(socket, socket.assigns.live_action, params)}
  end

  @impl true
  def handle_event("toggle_purchased", %{"item-id" => item_id}, socket) do
    item = Items.get_item!(item_id)
    item_updated = %{mark_as_purchased: false, add_to_shopping_list: false, quantity: 0}

    case Items.update_item(item, item_updated) do
      {:ok, _item} ->
        handle_info(:update_items, socket)

      # {:noreplay, socket}

      # handle_info(:saved, socket)

      {:error, _} ->
        {:noreply, socket}
    end
  end

  @impl true
  def handle_info(:update_items, socket) do
    {:noreply, stream(socket, :items, Items.get_shopping_items_selected())}
  end

  defp apply_action(socket, :index, _params) do
    socket
    |> assign(:page_title, "Listing Shopping lists")
    |> assign(:items, nil)
  end

  # defp notify_parent(msg), do: send(self(), {__MODULE__, msg})
end

I want that when the checkbox is enabled my live view is updated and only the items that have the value false in mark_as_purchased and true in add_to_shopping are shown

2

Hey there, not completely clear on your use case, but if you want to remove a streamed item when its “mark as purchased” checkbox is clicked, then I’d suggest using stream_delete/3.

def handle_event("toggle_purchased", %{"item-id" => item_id}, socket) do
  item = Items.get_item!(item_id)
  # code to persist changes if desired, etc.
  {:noreply, stream_delete(socket, :items, item)}
end

On another note, you don’t want to directly call handle_info/2 like this as its meant to handle messages from other Elixir processes or itself e.g. send(self(), ...).

1 Like
3

Amazing! thank you so much ! use stream_delete/3 works :slight_smile: