amirOrbe

amirOrbe

How to update live view table in realtime?

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

Marked As Solved

codeanpeace

codeanpeace

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(), ...).

Where Next?

Popular in Questions Top

9mm
I am constructing a JSON object (map) and I need to conditionally set a field. I’m trying to write proper elixir-way code… and I’m at a l...
New
mcarvalho
What is the difference between System.get_env and Application.get_env? For example, what are best practices to use one versus another.
New
greenz1
I have a phoenix application from which a user can download multiple(5-6) files of size 1MB. I couldn’t find anything related to sending ...
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
fayddelight
I tried installing elixir 1.11.2 erlang 23.3.4 via asdf in my zsh shell. Enabled the versions locally and globally. When I list them ...
New
Qqwy
Original source of discussion: This topic on the Pragmatic Programmers’ Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
bsollish-terakeet
Credo is smart enough to check for (something like) this: assert length(the_list) == 0 with this response: Checking if an enum is empt...
New
komlanvi
Hi everyone, I was playing with phoenix liveView but I run into an issue. I have a form and want to validate each input text when the te...
New
dotdotdotPaul
Okay, I’m having a heck of a time trying to figure out how to best handle the validation of belongs_to associations in Ecto. I’m sure I’...
New
openscript
Hello! Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
New

Other popular topics Top

New
senggen
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] 15:22:35.803 [error] gen_event {lager_file_backend...
New
AstonJ
Posting this to see if we can make things easier for people to get into Neovim. If you use Neovim and have a favourite distro please let ...
New
gshaw
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
New
ovidiubadita
Hey all, I discovered Elixir and I love it. I always wanted to learn a functional programming and I intended to go for Haskell, but afte...
New
minhajuddin
I have seen a lot of code which picks the first element from a list using Enum.at(0) instead of List.first. Is there a reason why people ...
New
stefanluptak
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
New
bsollish-terakeet
Credo is smart enough to check for (something like) this: assert length(the_list) == 0 with this response: Checking if an enum is empt...
New
rms.mrcs
Hi, I need to transform a list of numbers into a map where the keys are the indexes and the values are the original values of the list. ...
New
romenigld
I am trying to run a deploy with docker and I successfully runned with this command: docker build -t romenigld/blog-prod . but when I t...
New

We're in Beta

About us Mission Statement