Ruby on Rails | raty-js

↓↓クリックして頂けると励みになります。

Ruby on Railsでraty-jsを利用するには、以下のステップに従って設定を行う必要があります。
raty-jsは、スター評価を作成するためのJavaScriptプラグインです。


「star-on.png」「star-off.png」「star-half.png」の３ファイルを「app/assets/images」フォルダにコピーしておいてください。


画像は下記のリンクにあります。
github.com

「raty-js」をインストールします。

コマンド
yarn add raty-js@2.9.0


「app\javascript\packs\application.js」ファイルに以下の記述を追加します。


記述追加　app\javascript\packs\application.js(15行目)

require("raty-js")

レビューモデルを作成します。

コマンド
一文です。
rails g model Review review:text stars:bigint report:references user:references


記述更新　db\migrate\20200727021130_create_reviews.rb
「,default: 1」の記述追加（5行目）をしています。

class CreateReviews < ActiveRecord::Migration[6.0]
  def change
    create_table :reviews do |t|
      t.text :review
      t.bigint :stars,default: 1
      t.references :report, null: false, foreign_key: true
      t.references :user, null: false, foreign_key: true

      t.timestamps
    end
  end
end

コマンド　マイグレーション
rails db:migrate


「app\models\review.rb」ファイルは以下のようになっています。


記述追加　app\models\review.rb

class Review < ApplicationRecord
  belongs_to :report
  belongs_to :user
end

「app\models\report.rb」ファイルを編集していきます。


1．6行目に「has_many :reviews」の記述追加


2．16行目に「average_rating()」メソッドの追加

  def average_rating
    guest_reviews.count == 0 ? 0 : guest_reviews.average(:stars).round(2).to_i
  end  

記述追加　app\models\report.rb

class Report < ApplicationRecord

  belongs_to :user
  belongs_to :category

  has_many :reviews

  has_many_attached :photos
  has_rich_text :description

  geocoded_by :address
  after_validation :geocode, if: :address_changed?

  validates :title, presence: { message: '空白にはできません' }

  def average_rating
    reviews.count == 0 ? 0 : reviews.average(:stars).round(2).to_i
  end  

end

「app\models\user.rb」ファイルを編集していきます。


4行目に以下の記述を追加します。

has_many :reviews

記述追加　app\models\user.rb

class User < ApplicationRecord

  has_many :reports
  has_many :reviews

  has_one_attached :avatar
  
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable,
         :confirmable, :omniauthable

  # バリデート
  validates :full_name, presence: true, length: {maximum: 50}

  def self.from_omniauth(auth)
    user = User.where(email: auth.info.email).first
    if user
      return user
    else
      where(provider: auth.provider, uid: auth.uid).first_or_create do |user|
        user.email = auth.info.email
        user.password = Devise.friendly_token[0, 20]
        user.full_name = auth.info.name   # ユーザーモデルに名前があると仮定
        user.image = auth.info.image # ユーザーモデルに画像があると仮定
        user.uid = auth.uid
        user.provider = auth.provider
      end
    end
  end  

end

レビューコントローラを作成します。

「app\controllers」フォルダに「reviews_controller.rb」ファイルを新規作成してください。


app\controllers\reviews_controller.rb（新規作成したファイル）

class ReviewsController < ApplicationController
    def create
            
        #ログインしていたら
        if (user_signed_in?)
            # コメントを許可
            @review = current_user.reviews.create(review_params)
            flash[:success] = "コメントを投稿しました。"
        else
            flash[:alert] = "コメントを投稿するにはログインする必要があります。"
        end
        
        redirect_back(fallback_location: request.referer)

    end
  
    def destroy
      @review = Review.find(params[:id])
      @review.destroy
  
      redirect_back(fallback_location: request.referer, notice: "コメントを削除しました。")
    end
  
    private
    def review_params
        params.require(:review).permit(:review, :stars, :report_id, :user_id)
    end
end

記述追加　app\controllers\reports_controller.rb
「show()」メソッドに「@reviews = @report.reviews」の記述を追加してます。

  def show
    @reviews = @report.reviews
  end

「app\controllers\users_controller.rb」ファイルを編集します。

@reviews = Review.where(user_id: current_user.id)

app\controllers\users_controller.rb

class UsersController < ApplicationController

  before_action :authenticate_user!
  def dashboard
    @reports = current_user.reports.order(created_at: :desc).page(params[:page]).per(6)
    @reviews = Review.where(user_id: current_user.id)
  end

  def update
    @user = current_user
    if @user.update_attributes(current_user_params)
      flash[:notice] = "保存しました"
    else
      flash[:alert] = "更新できません"
    end
    redirect_to dashboard_path
  end
  
  private
  def current_user_params
    params.require(:user).permit(:about, :status, :avatar)
  end
end

ルートを設定します。

19行目に以下の記述を追加します。

  resources :reviews, only: [:create, :destroy]

記述追加　config\routes.rb

Rails.application.routes.draw do

  # ルートを　app\views\pages\home.html.erb　に設定
  root 'pages#home'

  # get
  get '/dashboard', to: 'users#dashboard'

  # post
  post '/users/edit', to: 'users#update'

  resources :reports do
    member do
      delete :delete_photo
      post :upload_photo
    end
  end

  resources :reviews, only: [:create, :destroy]
  
  # device
  devise_for :users, 
              path: '', 
              path_names: {sign_up: 'register', sign_in: 'login', edit: 'profile', sign_out: 'logout'},
              controllers: {omniauth_callbacks: 'omniauth_callbacks', registrations: 'registrations'}

  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end

レビュービューを作成します。

「app\views」フォルダに「reviews」フォルダを新規作成します。
作成した「reviews」フォルダに「_form.html.erb」ファイルを新規作成してください。


app\views\reviews\_form.html.erb(新規作成したファイル)

<!-- Button trigger modal -->
<button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#exampleModal<%= report.id %>">
<font style="font-size: 0.9rem;">レビュー</font>
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal<%= report.id %>" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
    <%= form_for Review.new do |f| %>
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel"><div id="stars<%= report.id %>"></div></h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">

      <%= f.text_area :review, class: "textarea", required: true, style: "width: 20rem; height: 10rem; margin-top: -1rem;" %>
      <%= f.hidden_field :report_id, value: report.id %>
      <%= f.hidden_field :user_id, value: report.user.id %>


      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
        <%= f.submit "コメントを投稿する", class: "btn btn-warning" %>
      </div>
    <% end %>
    </div>
  </div>
</div>

<script>
  $('#stars<%= report.id %>').raty({
    path: '/assets',
    scoreName: 'review[stars]',
    score: 1
  });
</script>

「app/views/reports/show.html.erb」ファイルを編集します。


記述追加　app/views/reports/show.html.erb

<%= render partial: "reviews/form", locals: {report: @report} %>

これで星付きのレビューの投稿を実装することができます。

レビュー投稿モダール

データベース確認

↓↓クリックして頂けると励みになります。