Railsチュートリアル 機能拡張【ユーザー検索】

Railsチュートリアルで作ったsample_appに機能を拡張していく

今回は、Ransack Gemを利用してユーザー検索機能を組み込みます。


下記の記事を参考にさせていただきました。

https://github.com/activerecord-hackery/ransack

https://qiita.com/YN6127yn/items/fca9efa22536b8b2a9ef

https://qiita.com/LuckOfWise/items/e020e896e71d47d0c6a4

準備

Ransackのインストール

https://github.com/activerecord-hackery/ransack

Gemfileに追記し、bundle installします。

gem 'ransack'
bundle install

インストール後にサーバーを再接続する。

実装

コントローラーにRansackを埋め込む

[app/controllers/user_controller.rb]

class UsersController < ApplicationController
 .
 .
  def index
    # @users = User.where(activated: true).paginate(page: params[:page])
    if params[:q] && params[:q].reject { |key, value| value.blank? }.present?
      @q = User.ransack(search_params, activated: true)
      @title = "Serch Result"
    else
      @q = User.ransack(activated: true)
      @title = "All users"
    end
    @users = @q.result.paginate(page: params[:page])
  end
 . 
 .
 .
  private

    def search_params
      params.require(:q).permit(:name_cont)
    end
 .
 .
 end

rejectメソッドを使い空白で検索したときはAll Usersを返すようにしている

Viewにsearch_form_forを加える

[app/views/users/index.html.erb]
<% provide(:title, @title) %>
<h1><%= @title %></h1>

<!--  検索機能  -->
<%= search_form_for @q do |f| %>
  <%= f.label :name_cont %>
  <%= f.search_field :name_cont %>

  <%= f.submit %>
<% end %>

<%= will_paginate %>

<ul class="users">
  <%= render @users %>
</ul>

<%= will_paginate %>


取り敢えずできた。

全ユーザー
f:id:yukitoku_sw:20191109174143p:plain

検索結果

f:id:yukitoku_sw:20191109174313p:plain


Viewに修正を加える

<!--  検索機能  -->
<div class="row">
  <div class="search_form">
    <%= search_form_for @q do |f| %>
      <%= f.label :name_cont, 'User Search'%>
      <div class="input-group">
        <%= f.search_field :name_cont, placeholder: "Enter username..", class: 'form-control' %>
        <span class="input-group-btn">
          <%= f.submit 'Search', class: "btn btn-primary" %>
        </span>
      </div>
    <% end %>
  </div>
</div>

scssに追記する

[app/asets/stylesheets/custom.scss]
 .
 .
/* Search form  */

.search_form {
  overflow: auto;
  margin: 10px;
  .input-group {
    width: 305px;
  }
}

パーシャルにする

_search.html.erbというファイルを作りぶっこむ

[app/views/users/_search.html.erb]

<div class="row">
  <div class="search_form">
    <%= search_form_for @q do |f| %>
      <%= f.label :name_cont, 'User Search'%>
      <div class="input-group">
        <%= f.search_field :name_cont, placeholder: "Enter username..", class: 'form-control' %>
        <span class="input-group-btn">
          <%= f.submit 'Search', class: "btn btn-primary" %>
        </span>
      </div>
    <% end %>
  </div>
</div>

index.html.erbを修正

[app/views/users/index.html.erb]

<% provide(:title, @title) %>
<h1><%= @title %></h1>

<%= render 'search' %>

<%= will_paginate %>

<ul class="users">
  <%= render @users %>
</ul>

<%= will_paginate %>

すっきり〜!!

完成

こんな感じ

全ユーザー f:id:yukitoku_sw:20191109181451p:plain

検索結果 f:id:yukitoku_sw:20191109181510p:plain