defmodule Flop.Phoenix do @moduledoc """ Phoenix components for pagination, sortable tables and filter forms with [Flop](https://hex.pm/packages/flop). ## Introduction Please refer to the [Readme](README.md) for an introduction. ## Customization The default classes, attributes, texts and symbols can be overridden by passing the `opts` assign. Since you probably will use the same `opts` in all your templates, you can globally configure an `opts` provider function for each component. The functions have to return the options as a keyword list. The overrides are deep-merged into the default options. defmodule MyAppWeb.CoreComponents do import Phoenix.HTML def pagination_opts do [ 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}ページ目へ", previous_link_attrs: [class: "prev"], previous_link_content: previous_icon() ] 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 def table_opts do [ container: true, container_attrs: [class: "table-container"], no_results_content: content_tag(:p, do: "Nothing found."), table_attrs: [class: "table"] ] end end Refer to `t:pagination_option/0` and `t:table_option/0` for a list of available options and defaults. Once you have defined these functions, you can reference them with a module/function tuple in `config/config.exs`. ```elixir config :flop_phoenix, pagination: [opts: {MyApp.CoreComponents, :pagination_opts}], table: [opts: {MyApp.CoreComponents, :table_opts}] ``` ## Hiding default parameters Default values for page size and ordering are omitted from the query parameters. If you pass the `:for` assign, the Flop.Phoenix function will pick up the default values from the schema module deriving `Flop.Schema`. ## Links Links are generated with `Phoenix.Components.link/1`. 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 within a LiveView or LiveComponent, you will need to handle the new params in the `c:Phoenix.LiveView.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 assign the `:event` to the pagination and table components. This will generate an `` tag with `phx-click` and `phx-value` attributes set. You can set a different target by assigning a `:target`. The value will be used as the `phx-target` attribute. You will need to handle the event in the `c:Phoenix.LiveView.handle_event/3` or `c:Phoenix.LiveComponent.handle_event/3` callback of your LiveView or LiveComponent 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(flop) 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 import Phoenix.HTML.Form, only: [ humanize: 1, input_id: 2, input_name: 2, input_type: 2, input_value: 2 ] alias Flop.Meta alias Flop.Phoenix.CursorPagination alias Flop.Phoenix.Misc alias Flop.Phoenix.Pagination alias Flop.Phoenix.Table alias Phoenix.HTML.Form alias Phoenix.LiveView.JS alias Plug.Conn.Query @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])}`. - `:disabled` - The class which is added to disabled links. Default: `#{inspect(Pagination.default_opts()[:disabled_class])}`. - `: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])}`. - `: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 `