コメント欄に★レビューを追加しよう

GeekSalon名古屋メンターの吉田です！

皆さんのコメント機能に星レビューを実装したいと思います。

*この記事では教材7-5にてコメント機能が実装されているものとして進めます。

##レビューを入れるためのカラムを追加
コメント機能同様、レビューを入れるためのカラムを作らなければなりません。
自分のプロダクトの階層で

コマンドプロンプト

rails g migration AddReviewToComments review:integer

でcommentsテーブルにreviewカラムを追加しましょう。

##レビューを運ぶためにコントローラーを変更
変更と言っても少し追加をするだけです

comments_controller.rb

#割愛

    private
  
    def comment_params
      params.require(:comment).permit(:comment,:reveiw)
    end

# ,:review の追加のみ

これによりreviewを運べるようになりました。

##viewで表示&投稿できるようにする

show.html.erb

  <div class="comment-wrapper">
  <span class="box-title">コメント一覧</span>
      <% @comments.each do |c| %>
        
-------------------省略-------------------------
#以下追加　表示部分

          <span class="star-rating">
            <span class="star-rating-front" style="width: <%= getPercent(c.overall) %>%;">★★★★★</span>
            <span class="star-rating-back">★★★★★</span>
          </span> 
        </div>
        <% end %>
  </div>

#追記ここまで

  <% if user_signed_in? %>
    <%= form_with(model: [@tweet, @comment], local: true) do |f| %>
     <%= f.text_area :comment%>
     <%= button_tag type: "submit" do %>
     <i class="far fa-comments"></i> コメントする
    <% end %>

#以下追加　入力部分

      <div class="review_form">
      <h5>総合評価</h5>
      <div class="post_form">
        <%= f.radio_button :review, 5 ,id: 'star1'%>
        <label for="star1"><span class="text">最高</span>★</label>

        <%= f.radio_button :review, 4 ,id: 'star2'%>
        <label for="star2"><span class="text">良い</span>★</label>

        <%= f.radio_button :review, 3 ,id: 'star3'%>
        <label for="star3"><span class="text">普通</span>★</label>

        <%= f.radio_button :review, 2 ,id: 'star4'%>
        <label for="star4"><span class="text">悪い</span>★</label>

        <%= f.radio_button :review, 1 ,id: 'star5'%>
        <label for="star5"><span class="text">最悪</span>★</label>
    </div>
    <% end %>

#追記ここまで

  <% end %>

comments_helper.rb

 def getPercent(number) 
   if number.present?
     calPercent = number/5.to_f * 100
     # calPercent = number/10.to_f * 100
     #↑１０段階評価の際は2行目コメントアウトを外して、1行目をコメントアウト。
     percent = calPercent.round
     #↑CSSは小数が含まれると、widthの幅を指定できないので四捨五入して整数化。
     return percent.to_s
   else
     return 0
   end
 end

##装飾
最後にcssで装飾しましょう

comments.scss

  .post_form{
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
  }
  .post_form input[type='radio']{
    display: none;
  }
  .post_form label{
    position: relative;
    padding: 10px 10px 0;
    color: gray;
    cursor: pointer;
    font-size: 30px; /*星の大きさを変更するときはここ*/
  }
  .post_form label .text{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    text-align: center;
    font-size: 9px; /*星の上の説明書きの大きさを変更するときはここ*/
    color: gray;
  }
  .post_form label:hover,
  .post_form label:hover ~ label,
  .post_form input[type='radio']:checked ~ label{
    color: #ffcc00;
  }


/*　以下一覧ページの星用のCSS　*/

  .star-rating {
    position: relative;
    display: inline-block;
    width: 5em;
    height: 1em;
    font-size: 25px;
  }
  .star-rating-front {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: #ffcc33;
  }
  .star-rating-back {
    display: inline-block;
    color: #ccc;

  }

以上で終了です。お疲れ様でした！