Rummage.Phoenix

Rummage.Phoenix

Phoenix

Phoenix

Ecto

It accomplishes the above operations by using

Rummage.Ecto

Ecto

Rummage.Ecto

The best part about rummage is that all the three operations:

Search

Sort

Paginate

NOTE:

Rummage

Ransack

Rummage

Search

Search, Sort and Paginate seamlessly in Phoenix!

Installation

This is available in Hex, the package can be installed as:

• Add

  rummage_phoenix

  to your list of dependencies in

  mix.exs

  :

  def deps do
    [
      {:rummage_phoenix, "~> 1.2.0"}
    ]
  end
  

Blogs

Current Blogs:

• Rummage Demo & Basics
• Using Rummage.Ecto
• Using Rummage.Phoenix

Coming up next:

• Using Rummage.Phoenix 2
• Using the Rummage Search hook
• Using the Rummage Sort hook
• Writing a Custom Rummage.Ecto Hook
• Writing a Custom Rummage.Phoenix HTML helper
• Using Rummage with other Libraries: Kerosene
• Using Rummage with other Libraries: Scrivener

Configuration (Optional, Not the preferred way to set

default_per_page

)

Rumamge.Phoenix

default_per_page

default_per_page

default_per_page

model

web.ex

• Add

  rummage_phoenix

  config to your list of configs in

  dev.exs

  :

  config :rummage_phoenix,
    Rummage.Phoenix,
    default_per_page: 5
  

Usage (The screenshots correspond to version 0.6.0, soon there will be screenshots for version 1.0.0)

Initial Setup

• Use

  Rummage.Controller

  in to controller module:

  defmodule MyApp.ProductController do
    use MyApp.Web, :controller
    use Rummage.Phoenix.Controller

# More code below....
  end

• Change the

  index

  action in the controller:

  def index(conn, params) do
    {query, rummage} = Product
      |> Rummage.Ecto.rummage(params["rummage"])

products = Repo.all(query)

render conn, "index.html",
  products: products,
  rummage: rummage
  end

• if using Search feature, define a

  search

  path in the

  router.ex

  (no need to define the action):

  scope "/", MyApp do
    pipe_through :browser # Use the default browser stack

get "/", PageController, :index
resources "/products", ProductController
  end

Doing this itself will allow you to search, sort and paginate by updating

params

Using Rummage.ViewHelpers

• Use

  Rummage.View

  in to a view module:

  defmodule MyApp.ProductView do
    use MyApp.Web, :view
    use Rummage.Phoenix.View

# More code below...
  end

Note: If you get a "MyApp.Router.Helpers is not available" exception, you can provide your router with:

  defmodule MyApp.ProductView do
    use MyApp.Web, :view
    use Rummage.Phoenix.View, helpers: MyApp.Web.Router.Helpers

# More code below...
  end

or through the config:

  config :rummage_phoenix, Rummage.Phoenix, [
    default_helpers: MyApp.Web.Router.Helpers,
  ]

Note: If the path helper name is incorrect, you can specify it with:

  defmodule MyApp.ProductView do
    use MyApp.Web, :view
    use Rummage.Phoenix.View, struct: "special_product" # will become special_product_path

# More code below...
  end

• #### Pagination: Add this at the bottom of

  index.html.eex

  to render

  Rummage

  pagination links (Make sure that you pass

  rummage

  to the views from the

  index

  action in the controller) :

Reload and this is how your page should look:

• #### Sorting: Replace table headers on the

  index.html.eex

  with sort links (Make sure that the headers are actual columns in the table in the database.)

Replace this:

elixir
    Name
    Price
    Category

With:

elixir
    
    

OR for Sort by associations:

elixir
    

Reload and this is how your page should look with sortable links instead of just table headers:

NOTE: Currently working on adding better elements to the views, soon the text arrow in the sort links will be replaced by an icon

• ### Searching: Add a search form in the

  index.html.eex

  with searchable fields:

OR for Search by associations:

Reload and your page should look somewhat like this:

• #### ALL TOGETHER: The best part about

  Rummage

  is that all the three hooks/operations integrate seamlessly without affecting each other's functionality and therefore, you have a page looking somewhat like this:

More Screenshots

Before rummage

After Pagination:

• Default pagination:

• Custom pagination params:

After Pagination View:

• Default

• Custom pagination params

After Sort:

After Sort View:

After Search:

After Search View: