amirOrbe
How to update live view table in realtime?
Hi again 
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
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
Popular in Questions
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
What is the difference between System.get_env and Application.get_env? For example, what are best practices to use one versus another.
New
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
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
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
Original source of discussion: This topic on the Pragmatic Programmers’ Functional Web Development with Elixir, OTP, and Phoenix forum.
...
New
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
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
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
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
I have an umbrella app.
Some of the apps inside depend on other apps in the umbrella, unsurprisingly.
I’m writing a test for one of the...
New
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
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
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
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
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
Hello everybody,
usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
New
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
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
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
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance








