【Ruby on Rails7】一覧画面に検索機能とソート機能を追加

この記事では、Ruby on Rails7の一覧表示に検索機能を追加し、さらに、ソート機能も追加します。

前回、

inuinu-tech.hatenablog.jp

で、ページネーションを追加しましたが、このままでは目的の情報を素早く拾えませんので、検索機能を追記します。

やりたいこと(その1：検索機能)

やりたいことは「販売履歴(Sale)に販売日付と顧客コードの検索機能をつける」。
とりあえず、この条件を実装してみます。

Gemfileに追記しインストール

まずはGemfileにページネーション系のライブラリを追加します。

# 検索機能
gem "ransack"

ansackが検索機能のgemライブラリになります。

bundle install

でインストールします。

コントローラーを変更する

app/controllers/sales_controller.rbを変更します。
(前回のkaminariの機能も加味しています。)

  # GET /sales or /sales.json
  def index
    @q = Sale.ransack(params[:q])
    @sales = @q.result(distinct: true).page(params[:page]).per(KAMINARI_PER).order(id: :desc)
  end

モデルに追記する

app/models/sale.rbに追記します。

  # ransackで検索可能な項目を指定する
  def self.ransackable_attributes(auth_object = nil)
    ["id", "sales_date", "customer_cd"]
  end

検索対象となる販売日付と顧客コードを記述します。

ビューに追記する

app/views/sales/index.html.hamlに追記します。

-# ransack用検索フォーム
= search_form_for @q, url: sales_path do |f|
  .grid.grid-cols-6.gap-3
    .col-span-2
      = f.search_field :sales_date_start, class: "〜", placeholder: "販売日付(前方一致)"
      = f.search_field :customer_cd_eq, class: "〜", placeholder: "顧客コード(完全一致)"

Bootstrap用のclassが紛れていますが、無視してください。
これでうまくいくと思います。

f.search_fieldについて

カラム名のあとに条件をつけるような形になっているようです。

github.com

上記のソースにある:sales_date_startは販売日付の前方一致、:customer_cd_eqは顧客コードの完全一致となります。

やりたいこと(その2：ソート機能)

ビューに追記する

app/views/sales/index.html.hamlに追記します。

%table.table.table-striped
  %thead
    %tr
      %th
        = sort_link(@q, :sales_date, "販売日付" )
      %th
        = sort_link(@q, :customer_cd, "顧客コード" )

こちらにもBootstrap用のclassが紛れていますが、無視してください。
これでうまくいくと思います。

参考：関連するレーブル含めて…の場合

こちらを参考にしてみてください。

qiita.com