Sort Collection Via Event Handler

From ElixirBlocks
Revision as of 19:55, 17 April 2025 by Admin (talk | contribs) (Created page with "<source> 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_...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

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 = if current_direction == :asc, do: :desc, else: :asc

    # 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