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