Sort Collection Via Event Handler

From ElixirBlocks
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 = 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