This module provides functions for relative query patching and navigation event dispatching in templates.

Examples

Linkable Breadcrumbs

  use Phoenix.Component
  import Cartograph.Component, only: [parse_patch: 2]

  attr :trail, :list, required: true
  attr :curr_uri, :string, required: true
  attr :id, :string, required: true

  def breadcrumbs(assigns) do
    ~H"""
    <div id={@id}>
      <.link patch={
        parse_patch(@curr_uri, query: [remove: Enum.map(@trail, fn {p, _} -> p end)])
      }>
        Top
      </.link>
      <span>&nbsp;&gt;</span>
      <%= for {{query_param, display_label}, idx} <- Enum.with_index(@trail) do %>
        <span>
          <.link patch={
            parse_patch(@curr_uri,
              query: [
                remove: Enum.slice(@trail, (idx + 1)..-1//1) |> Enum.map(fn {p, _} -> p end)
              ]
            )
          }>
            {display_label}
          </.link>
          <span>&nbsp;&gt;</span>
        </span>
      <% end %>
    </div>
    """
  end

Old-School Pagination Widget

  use Phoenix.Component
  import Cartograph.Component, only: [cartograph_patch: 1]

  defp compute_prev_page(page_no, page_count) do
    if page_no == 1 do
      page_count
    else
      page_no - 1
    end
  end

  defp compute_next_page(page_no, page_count) do
    if page_no == page_count do
      1
    else
      page_no + 1
    end
  end

  attr :page_no, :integer, required: true
  attr :page_count, :integer, required: true
  attr :id, :string, required: true

  def pagination(assigns) do
    ~H"""
    <div id={@id}>
      <div>
        <button phx-click={
          cartograph_patch(
            query: [merge: %{page_no: compute_prev_page(@page_no, @page_count)}]
          )
        }>
          Prev
        </button>
        <p>Page {@page_no} of {@page_count}</p>
        <button phx-click={
          cartograph_patch(
            query: [merge: %{page_no: compute_next_page(@page_no, @page_count)}]
          )
        }>
          Next
        </button>
      </div>
      <div>
        <p>Jump to:</p>
        <input
          type="text"
          pattern="+"
          value={@page_no}
          phx-keydown={cartograph_patch(query: [merge: %{page_no: :phx_value}])}
          phx-key="Enter"
        />
      </div>
    </div>
    """
  end

Simple Stateful Selectable

  use Phoenix.Component
  import Cartograph.Component, only: [cartograph_patch: 1]

  attr :display_label, :string, required: true
  attr :choices, :list, required: true
  attr :selected, :string, required: true
  attr :query_param, :string, required: true
  attr :id, :string, required: true

  def generic_select(assigns) do
    ~H"""
    <label for={@id}>{@display_label}</label>
    <select id={@id}>
      <option value="" phx-click={cartograph_patch(query: [remove: [@query_param]])}>
        No Selection
      </option>
      <%= for {value, display_text} <- @choices do %>
        <option
          value={value}
          selected={@selected == value}
          phx-click={cartograph_patch(query: [merge: %{@query_param => value}])}
        >
          {display_text}
        </option>
      <% end %>
    </select>
    """
  end

Stateful Column Sort Button

Cycles through no sort > ascending > descending > no sort

  use Phoenix.Component
  import Cartograph.Component, only: [cartograph_patch: 1]

  defp sort_toggle(field_name, :asc = _curr_sort_order) do
    ops = [merge: %{"sort[]" => %{field_name <> "-asc" => field_name <> "-desc"}}]
    cartograph_patch(query: ops)
  end

  defp sort_toggle(field_name, :desc = _curr_sort_order) do
    cartograph_patch(query: [remove: %{"sort[]" => field_name <> "-desc"}])
  end

  defp sort_toggle(field_name, nil = _curr_sort_order) do
    cartograph_patch(query: [add: %{"sort[]" => field_name <> "-asc"}])
  end

  attr :display_text, :string, required: true
  attr :field_name, :string, required: true
  attr :sort_order, :atom, default: nil
  attr :sort_idx, :integer, default: nil

  def sort_button(assigns) do
    ~H"""
    <button class="common-btn" phx-click={sort_toggle(@field_name, @sort_order)}>
      <span>{@display_text}</span>
      <Heroicons.icon :if={@sort_order == :desc} name="arrow-down" class="inline-icon" />
      <Heroicons.icon :if={@sort_order == :asc} name="arrow-up" class="inline-icon" />
      <span if={@sort_order != nil} class="text-sm">{@sort_idx}</span>
    </button>
    """
  end