defmodule Flop.Phoenix do @moduledoc """ Components for Phoenix and Flop. ## Introduction Please refer to the [Readme](README.md) for an introduction. ## Customization `Flop.Phoenix` sets some default classes and aria attributes. If you want to customize the pagination or table markup, you probably want to do that once for all templates, so that your templates aren't cluttered with options. To do that, create a new file `live/flop_components.ex` (or `views/flop_helpers.ex`, or `views/component_helpers.ex`). defmodule MyAppWeb.FlopComponents do use Phoenix.Component def pagination(assigns) do ~H\""" \""" end defp pagination_opts(opts) do default_opts = [ ellipsis_attrs: [class: "ellipsis"], ellipsis_content: "‥", next_link_attrs: [class: "next"], next_link_content: next_icon(), page_links: {:ellipsis, 7}, pagination_link_aria_label: &"\#{&1}ページ目へ", pagination_link_attrs: [class: "page-link"], pagination_list_attrs: [class: "page-links"], previous_link_attrs: [class: "prev"], previous_link_content: previous_icon(), wrapper_attrs: [class: "paginator"] ] Keyword.merge(default_opts, opts) end defp next_icon do tag :i, class: "fas fa-chevron-right" end defp previous_icon do tag :i, class: "fas fa-chevron-left" end end You can do this similarly for `Flop.Phoenix.table/1` To make the functions available in all templates, import the module in `my_app_web.ex`. defp view_helpers do quote do # ... import MyAppWeb.FlopComponents # ... end end ## Hiding default parameters Default values for page size and ordering are omitted from the query parameters. If you pass the `:for` option, the Flop.Phoenix function will pick up the default values from the schema module deriving `Flop.Schema`. ## LiveView The functions in this module can be used in both `.eex` and `.heex` templates. Links are generated with `Phoenix.LiveView.Helpers.live_patch/2`. This will lead to `` tags with `data-phx-link` and `data-phx-link-state` attributes, which will be ignored outside of LiveViews and LiveComponents. When used in LiveView templates, you will need to handle the new params in the `handle_params/3` callback of your LiveView module. ## Event Based Pagination and Sorting To make `Flop.Phoenix` use event based pagination and sorting, you need to set the `:event` option on the pagination and table generators. This will generate an `` tag with `phx-click` and `phx-value` attributes set. You can set a different target by setting the `:target` option. The value will be used in the `phx-target` attribute. You will need to handle the event in the `handle_event/3` callback of your LiveView module. The event name will be the one you set with the `:event` option. def handle_event("paginate-pets", %{"page" => page}, socket) do flop = Flop.set_page(socket.assigns.meta.flop, page) with {:ok, {pets, meta}} <- Pets.list_pets(params) do {:noreply, assign(socket, pets: pets, meta: meta)} end end def handle_event("order_pets", %{"order" => order}, socket) do flop = Flop.push_order(socket.assigns.meta.flop, order) with {:ok, {pets, meta}} <- Pets.list_pets(flop) do {:noreply, assign(socket, pets: pets, meta: meta)} end end """ use Phoenix.Component use Phoenix.HTML import Phoenix.LiveView.Helpers alias Flop.Meta alias Flop.Phoenix.Pagination alias Flop.Phoenix.Table @typedoc """ Defines the available options for `Flop.Phoenix.pagination/1`. - `:current_link_attrs` - The attributes for the link to the current page. Default: `#{inspect(Pagination.default_opts()[:current_link_attrs])}`. - `:ellipsis_attrs` - The attributes for the `` that wraps the ellipsis. Default: `#{inspect(Pagination.default_opts()[:ellipsis_attrs])}`. - `:ellipsis_content` - The content for the ellipsis element. Default: `#{inspect(Pagination.default_opts()[:ellipsis_content])}`. - `:for` - The schema module deriving `Flop.Schema`. If set, `Flop.Phoenix` will remove default parameters from the query parameters. Default: `#{inspect(Pagination.default_opts()[:for])}`. - `:next_link_attrs` - The attributes for the link to the next page. Default: `#{inspect(Pagination.default_opts()[:next_link_attrs])}`. - `:next_link_content` - The content for the link to the next page. Default: `#{inspect(Pagination.default_opts()[:next_link_content])}`. - `:page_links` - Specifies how many page links should be rendered. Default: `#{inspect(Pagination.default_opts()[:page_links])}`. - `:all` - Renders all page links. - `{:ellipsis, n}` - Renders `n` page links. Renders ellipsis elements if there are more pages than displayed. - `:hide` - Does not render any page links. - `:pagination_link_aria_label` - 1-arity function that takes a page number and returns an aria label for the corresponding page link. Default: `&"Go to page \#{&1}"`. - `:pagination_link_attrs` - The attributes for the pagination links. Default: `#{inspect(Pagination.default_opts()[:pagination_link_attrs])}`. - `:pagination_list_attrs` - The attributes for the pagination list. Default: `#{inspect(Pagination.default_opts()[:pagination_list_attrs])}`. - `:previous_link_attrs` - The attributes for the link to the previous page. Default: `#{inspect(Pagination.default_opts()[:previous_link_attrs])}`. - `:previous_link_content` - The content for the link to the previous page. Default: `#{inspect(Pagination.default_opts()[:previous_link_content])}`. - `:wrappers_attrs` - The attributes for the `