Sort Collection Via Event Handler
From ElixirBlocks
defmodule AppWeb.SandboxLive do
use AppWeb, :live_view
alias App.TestBeds
alias App.TestBeds.TestBed
alias App.Repo
import Ecto.Query
def mount(_params, _session, socket) do
testbeds = Repo.all(from(t in TestBed, order_by: t.name))
{:ok, assign(socket, testbeds: testbeds, sort_by: :name, sort_direction: :asc)}
end
def handle_event("toggle_sort_by_name", _params, socket) do
current_direction = socket.assigns.sort_direction
new_direction = case current_direction do
:asc -> :desc
:desc -> :asc
end
# Build query based on sort direction
query = case new_direction do
:asc -> from(t in TestBed, order_by: t.name)
:desc -> from(t in TestBed, order_by: [desc: t.name])
end
testbeds = Repo.all(query)
{:noreply, assign(socket, testbeds: testbeds, sort_by: :name, sort_direction: new_direction)}
end
def render(assigns) do
~H"""
<div>
<!-- Name header with click to toggle sort -->
<button phx-click="toggle_sort_by_name">
Sort by Name
<%= if @sort_by == :name do %>
<%= if @sort_direction == :asc do %>
▲
<% else %>
▼
<% end %>
<% end %>
</button>
</div>
<ul>
<%= for testbed <- @testbeds do %>
<li><%= testbed.name %></li>
<% end %>
</ul>
"""
end
end