「app\views」フォルダに「reviews」フォルダを新規作成して下さい。
作成した「reviews」フォルダに「_form.html.erb」ファイルを新規作成します。
app\views\reviews\_form.html.erb(新規作成したファイル)
<%= form_for([@project, @review]) do |f| %> <div id="user_stars"></div> <%= f.text_field :comment %> <%= f.hidden_field :project_id, :value => @project.id %> <%= f.hidden_field :user_id, :value => current_user.id %> <div class="actions"> <%= f.submit "レビューする", class: "button is-danger is-fullwidth m-t-10 m-b-10" %> </div> <% end %> <script> $('#user_stars').raty({ path: '/assets', scoreName: 'review[star]', score: 1 }); </script>
「app\views\reviews」フォルダに「_index.html.erb」ファイルを新規作成します。
app\views\reviews\_index.html.erb(新規作成したファイル)
<% if @reviews.blank? %> <span class="center"><h4>まだレビューはありません。</h4></span> <% end %> <% @reviews.order("id desc").each do |r| %> <hr> <div class="row"> <div class="col m1"> <figure class="image is-32x32"> <%= image_tag r.user.gravatar_url, class: "is-rounded" %><br/> </figure> </div> <div class="col m10"> <div> <strong><%= r.user.full_name %></strong> <span class="right"><%= r.created_at %></span> </div> <div id="stars_<%= r.id %>"></div> <div><%= r.comment %></div> <br/> <div> <%= link_to "削除", [@project, r], class: "button is-danger", method: :delete, data: {confirm: "本当によろしいですか？"} if current_user && current_user.id == r.user.id %> </div> </div> </div> <script> $('#stars_<%= r.id %>').raty({ path: '/assets', readOnly: true, score: <%= r.star %> }); </script> <% end %>
「app\views\project\show.html.erb」ファイルに以下の記述を追加します。
１．記述追加 app\views\project\show.html.erb(42～53行目)
<!--レビュー--> <div class="box"> <span id="average_rating"></span> <p>レビュー(<%= @reviews.count %>)</p> <br/> <%= render 'reviews/index' %> <hr/> <article class="media"> <div class="card-content"> <div><%= render 'reviews/form' if @joined && !@hasReview %></div> </div> </article> </div>
２．記述追加 app\views\project\show.html.erb(158～164行目)
<!-- レビュー jQuery Raty--> <script> $('#average_rating').raty({ path: '/assets', readOnly: true, score: <%= @project.average_rating %> }); </script>
app\views\project\show.html.erb
<section class="section"> <div class="container"> <div class="columns"> <!-- 左側 --> <div class="column is-two-thirds"> <div class="columns is-multiline"> <!-- プロジェクト --> <div class="column is-full"> <div class="card"> <div class="card-content"> <div class="content"> <h1 class="title"><%= @project.name %></h1> <div class="title is-4 has-text-right" style="color: black;"><%= number_to_currency(@project.price) %></div> </div> <hr> <div class="hero-carousel" id="carousel-photo"> <%= image_tag @project.image %> </div> </div> </div> </div> <div class="column"> <div class="card"> <div class="card-content"> <!-- コンテンツ --> <div class="box"> <article class="media"> <div class="media-content"> <div class="content"> <h2 class="subtitle">このプランについて</h2> <hr> <%= @project.content %> </div> </div> </article> </div> <!--レビュー--> <div class="box"> <span id="average_rating"></span> <p>レビュー(<%= @reviews.count %>)</p> <br/> <%= render 'reviews/index' %> <hr/> <article class="media"> <div class="card-content"> <div><%= render 'reviews/form' if @joined && !@hasReview %></div> </div> </article> </div> <!-- タスク Section --> <div class="box"> <article class="media"> <div class="media-content"> <div class="content"> <div class="collection"> <% @tasks.each do |task| %> <% if task.header %> <br/> <div class="collection-item active"> <span class="tag is-link is-large"> <%= task.title %></span> <span class="tag is-white is-large"> <%= task.note %></span> </div> <br/> <% else %> <div class="collection-item active"> <span class="tag is-light is-medium" style="margin: 3px;"> <%= link_to [task.project, task], class: "collection-item", data: { turbolinks: false} do %> <%= task.title %> <% end %> </span> </div> <% end %> <% end %> </div> </div> </div> </article> </div> </div> </div> </div> </div> </div> <!-- 右側 --> <div class="column"> <div class="columns is-multiline"> <!-- 購入 --> <div class="column is-full"> <div class="card"> <div class="card-content"> <div class="media"> <div class="media-content"> <strong><%= @project.name %></strong> </div> <div class="media-right"> <p class="title is-4" style="color: black;"><%= number_to_currency(@project.price) %></p> </div> </div> <div class="content f-15"> <p class="m-t-30"><%= @project.content %></p> <p class="m-t-30"> <strong>タスク数: <i class="far fa-clock"></i> <%= @tasks.count %></strong> </p> </div> <% if user_signed_in? %> <!-- サブスクリプション --> <% if !@joined %> <div class="center"> <h1 class="tag is-success is-light is-large"><%= @project.price == 0? "無料" : "有料" %></h1> </div> <br/> <div class="card-action center"> <%= form_tag free_path do %> <%= hidden_field_tag 'project_id', @project.id %> <button type="submit" class="button is-fullwidth is-danger">プロジェクトを購入する（<%= number_to_currency(@project.price) %>）</button> <% end %> </div> <% else %> <div class="card-content center"> <span class="tag is-success is-light is-large">購入済みです</span> </div> <div class="card-content center"> <div class="card-content is-horizontal-center is-flex"> <figure class="image is-256x256"> <%= image_tag current_user.gravatar_url, class: "is-rounded" %><br/> </figure> </div> <h5><%= current_user.full_name %></h5> </div> <% end %> <% else %> <button class="button is-fullwidth is-danger" disabled>ログインして下さい</button> <% end %> </div> </div> </div> </div> </div> </div> </div> </section> <!-- レビュー jQuery Raty--> <script> $('#average_rating').raty({ path: '/assets', readOnly: true, score: <%= @project.average_rating %> }); </script>
ブラウザ確認
http://localhost:3000/project/1
プロジェクトを購入している場合、レビューフォームが表示されます。
星をつけてレビューを投稿できます。
