【Rails】絞り込み機能を実装して一覧画面に該当のものを表示させたい

環境

macOS 10.15.5
Rails 5.2.4.2
Docker 19.03.12

前提

userテーブル内のsexualカラムのfemaleとmaleを絞り込んで表示ができるようにしたい

実現したいこと

ユーザーの一覧画面にチェックボックスで選択した項目に該当するユーザーのみが表示できるようにしたい

該当のHTML

<div class="contents">
  <ul class="contents-menus">
    <li>
      <%= link_to("新規投稿", "/posts/new") %>
    </li>
    <li>
      <%= link_to("ユーザー一覧から探す", "/users/index") %>
    </li>
    <li>

      <!-- ここからチェックボックス -->

      <div class="accbox">
        <input type="checkbox" id="label1" class="cssacc" />
        <label for="label1">性別で絞り込む</label>
        <div class="accshow">
          性別を選択<br>
          <input type="checkbox" name="female" value="female">female<br>
          <input type="checkbox" name="male" value="male">male<br>
          <input type="submit" value="絞り込む">
        </div>
      </div>
    </li>
  </ul>

  <!-- ここからユーザーの表示画面 -->


  <div class="contents-list">
    <% @posts.each do |post| %>
      <div class="contents-item">
        <div class="contents-left">
          <img src="<%= "/images/#{post.user.image}" %>" >
        </div>
        <div class="contents-right">
          <div class="contents-name">
            <%= link_to(post.user.name, "/users/#{post.user.id}") %>
            <span>
              ⚤ <%= post.user.sexual %> / ♡ <%= post.user.love %>
            </span>
          </div>
          <div class="contents-content">
            <%= link_to post.content.truncate(40), "/posts/#{post.id}" %>
          </div>
        </div>
      </div>
    <% end %>
  </div>



  <div class="pagination">
    <div class="bootstrap">
      <%= paginate @posts %>
    </div>
  </div>
    
</div>

実装した内容について

・gemのransackをインストール
・コントローラーにアクション定義
一覧画面のアクションがpostsコントローラーのindexのため下記の場所に記述

class postsController < ApplicationController
.
.
  def index
    @q = User.ransack(params[:q])
    @users = @q.result(distinct: true).order(sexual: :asc)
    @posts = Post.all.order(created_at: :desc).page(params[:page]).per(8)
  end
.
.
end

理解度が低い中でなんとか情報を集めた中での実装になります

viewについて

チェックボックスを利用した絞り込み機能の実装に関して必死に情報を集めるもここで手詰まりになってしまいました。自力で実装するところまで行いましたがぜひviewの実装とコントローラーの不備についてご教授して頂けないでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

postsController#index が /posts に割り当てられているとします。
異なる場合は action="/posts" の部分を変更してください。

erb
1<!-- フォームで囲む -->
2<form action="/posts" method="get">
3  <!-- params[:sexual] が空か female を含む場合にチェック状態に -->
4  <input type="checkbox" name="sexual[]" value="female" <%= "checked" if params[:sexual].blank? or params[:sexual].include?("female") %>>female<br>
5  <input type="checkbox" name="sexual[]" value="male" <%= "checked" if params[:sexual].blank? or params[:sexual].include?("male") %>>male<br>
6  <input type="submit" value="絞り込む">
7</form>

こうして両方にチェックを入れ「絞り込む」ボタンをクリックすると
indexアクションでは params[:sexual] の値が ["female", "male"] になります。

この値を利用してユーザーを絞り込みます。(ransackは使いません。)

ruby
1if params[:sexual].blank?
2　# params[:sexual] が空の場合
3  # 最初のアクセス(/posts)では空
4  @users = User.all
5  @posts = Post.order(created_at: :desc).page(params[:page]).per(8)
6else
7  @users = User.where(sexual: params[:sexual])
8  @posts = Post.where(user_id: @users).order(created_at: :desc).page(params[:page]).per(8)
9end