[33]検索ページ << [ホームに戻る] >> [35]ページネーション
検索機能を実装していきます。
「app\controllers\pages_controller.rb」ファイルを以下のように編集します。
記述編集 app\controllers\pages_controller.rb
コードをコピーしてファイルの内容を置き換えて下さい。
class PagesController < ApplicationController def home end def search @categories = Category.all @category = Category.find(params[:category]) if params[:category].present? @q = params[:q] @min = params[:min] @max = params[:max] @delivery = params[:delivery].present? ? params[:delivery] : "0" @sort = params[:sort].present? ? params[:sort] : "price asc" query_condition = [] query_condition[0] = "gigs.active = true" query_condition[0] += " AND ((gigs.has_single_pricing = true AND pricings.pricing_type = 0) OR (gigs.has_single_pricing = false))" if !@q.blank? query_condition[0] += " AND gigs.title ILIKE ?" query_condition.push "%#{@q}%" end if !params[:category].blank? query_condition[0] += " AND category_id = ?" query_condition.push params[:category] end if !params[:min].blank? query_condition[0] += " AND pricings.price >= ?" query_condition.push @min end if !params[:max].blank? query_condition[0] += " AND pricings.price <= ?" query_condition.push @max end if !params[:delivery].blank? && params[:delivery] != "0" query_condition[0] += " AND pricings.delivery_time <= ?" query_condition.push @delivery end @gigs = Gig .select("gigs.id, gigs.title, gigs.user_id, MIN(pricings.price) AS price") .joins(:pricings) .where(query_condition) .group("gigs.id") .order(@sort) end end
「app\views\pages\search.html.erb」ファイルに以下の記述を追加します。
記述追加 app\views\pages\search.html.erb
変更箇所が多いのでコードをコピーしてファイルの内容を置き換えて下さい。
<%= render 'shared/categories' %> <section class="section"> <div class="container"> <!-- 上部 --> <div class="card m-b-20"> <div class="card-header"> <!-- カテゴリー --> <div class="card-header-title"> カテゴリー <% if @category %> ： <%= @category.name %> <% end %> </div> <!-- 並び替え --> <%= form_tag '', method: :get do %> <%= hidden_field_tag 'category', @category ? @category.id : '' %> <div class="field p-10"> <div class="select"> <%= select_tag 'sort', options_for_select( [ ['価格の低い順', 'price asc'], ['価格の高い順', 'price desc'], ['最新のものから', 'gigs.created_at desc'], ['古いものから', 'gigs.created_at asc'] ], selected: @sort ), onchange: "this.form.submit();" %> </div> </div> <% end %> </div> </div> <div class="columns"> <!-- 左側 --> <div class="column is-one-quarter"> <div class="columns is-multiline"> <div class="column is-full"> <div class="card"> <div class="card-content"> <%= form_tag '', method: :get do %> <%= hidden_field_tag 'category', @category ? @category.id : '' %> <%= hidden_field_tag 'sort', @sort %> <!-- タイトル検索 --> <div class="field"> <%= text_field_tag 'q', @q || '', class: "input", placeholder: "タイトルで検索" %> </div> <hr/> <!-- 価格帯 --> <label class="label">価格帯</label> <div class="field has-addons"> <p class="control"> <%= number_field_tag 'min', @min || '', class: "input", placeholder: "最低" %> </p> <p class="control"> <a class="button is-static">円</a> </p> </div> <div class="field has-addons"> <p class="control"> <%= number_field_tag 'max', @max || '', class: "input", placeholder: "最高" %> </p> <p class="control"> <a class="button is-static">円</a> </p> </div> <hr/> <!-- 期日 --> <label class="label">期日</label> <%= radio_button_tag 'delivery', "1", checked = "1" == @delivery %> １日以上 <br> <%= radio_button_tag 'delivery', "3", checked = "3" == @delivery %> ３日以上 <br> <%= radio_button_tag 'delivery', "7", checked = "7" == @delivery %> ７日以上 <br> <%= radio_button_tag 'delivery', "10", checked = "10" == @delivery %> １０日以上 <br> <%= radio_button_tag 'delivery', "15", checked = "15" == @delivery %> １５日以上 <br> <%= radio_button_tag 'delivery', "0", checked = "0" == @delivery %> 全て <hr/> <!-- 下部 --> <div class="field m-t-20"> <button class="button is-danger is-fullwidth" type="submit"> 検索</button> </div> <% end %> <div class="field m-t-10"> <%= form_tag '', method: :get do %> <button class="button is-black is-outlined is-fullwidth" type="submit"> 検索条件のクリア</button> <% end %> </div> </div> </div> </div> </div> </div> <!-- 右側 --> <div class="column infinite-list"> <!-- お仕事のリスト --> <div class="columns is-multiline"> <%= render partial: 'shared/gigs', object: @gigs %> </div> <!-- ページネーション --> <div class="card"> <div class="card-header-title is-centered"> </div> </div> </div> </div> </div> </section>
「app\views\shared」フォルダに「_gigs.html.erb」ファイルを新規作成して下さい。
app\views\shared\_gigs.html.erb(新規作成したファイル)
<% @gigs.each do |gig| %> <div class="column is-one-third"> <div class="card"> <div class="card-image"> <%= link_to edit_gig_path(gig) do %> <figure class="image is-4by3"> <%= image_tag gig_cover(gig) %> </figure> <% end %> </div> <div class="card-content p-t-5 p-b-5"> <p class="subtitle is-6 m-b-5"><%= link_to gig.title, gig_path(gig) %></p> <span class="star-review"><i class="fa fa-star"></i> <%= gig.average_rating %> <span class="has-text-primary">(<%= gig.reviews.count %>)</span> </span> </div> <footer class="card-footer"> <a class="card-footer-item"> <figure class="image is-32x32"> <%= image_tag avatar_url(gig.user), class: "is-rounded" %> </figure> </a> <a class="has-text-danger is-block card-footer-item has-text-right"> <span class="small-title">最低価格</span> <strong><%= number_to_currency(gig.price) %></strong> </a> </footer> </div> </div> <% end %>
ブラウザ確認
http://localhost:3000/search
検索機能が実装できました。
↓↓クリックして頂けると励みになります。
[33]検索ページ << [ホームに戻る] >> [35]ページネーション
