[35]レビューフォーム << [ホームに戻る] >> [37]ホームページ
「app\views\project\show.html.erb」ファイルにレビューを表示させる記述を追加します。
１．記述追加 app\views\project\show.html.erb(13行目)
<span class="star-review"><i class="fa fa-star"></i> <%= @project.average_rating %> <span class="has-text-primary">(<%= @project.reviews.count %>)</span> </span>
２．記述追加 app\views\project\show.html.erb(170行目)
<div class="card"> <div class="card-header"> <div class="card-header-title">最新のレビュー</div> </div> <div class="card-content"> <!-- レビュー --> <% @reviews.each do |r| %> <article class="media"> <figure class="media-left"> <p class="image is-64x64"> <%= image_tag avatar_url(r.user), class: "is-rounded" %> </p> </figure> <div class="media-content"> <div class="content"> <p> <strong><%= r.user.full_name %></strong><br> <%= r.review %> </p> <div> <%= link_to "削除", [@project, r], class: "button is-danger", method: :delete, data: {confirm: "本当によろしいですか？"} if current_user && current_user.id == r.user.id %> </div> <small><%= time_ago_in_words(r.created_at) %></small> </div> </div> <div class="media-right"> <span class="star-review"><i class="fa fa-star"></i> <%= r.stars %></span> </div> </article> <% end %> </div> </div>
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> <span class="star-review"><i class="fa fa-star"></i> <%= @project.average_rating %> <span class="has-text-primary">(<%= @project.reviews.count %>)</span> </span> <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"> <% @project.images.each do |photo| %> <div class="carousel-item has-background image is-16by9"> <%= image_tag url_for(photo), class: "is-background", width: "100%" %> </div> <% end %> </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> <!-- タスク 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="card-content p-t-5 p-b-5"> <%= link_to users_path(@project.user.id), class: "tootip" do %> <figure class="image is-48x48"> <%= image_tag avatar_url(@project.user), class: "is-rounded" %> <span class="tag is-light"><%= @project.user.full_name %></span> </figure> <% end %> </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 avatar_url(current_user), class: "is-rounded" %><br/> </figure> </div> <h5><%= current_user.full_name %></h5> </div> <span style="margin-left: 20px;"> <a class="button is-medium is-outlined is-danger toggle-modal" aria-control="<%= @project.id %>">レビューする</a> </span> <div class="modal" id="<%= @project.id %>"> <div class="modal-background"></div> <div class="modal-content"> <div class="box"> <%= form_for Review.new do |f| %> <%= f.hidden_field :project_id, value: @project.id %> <%= f.hidden_field :user_id, value: current_user.id %> <div class="field"> <div id="star_<%= @project.id %>"></div> </div> <div class="field"> <%= f.text_area :review, class: "textarea" %> </div> <a class="toggle-modal button is-light" aria-control="<%= @project.id %>">キャンセル</a> <%= f.submit "レビューする", class: "button is-danger" %> <% end %> </div> </div> </div> <% end %> <% else %> <button class="button is-fullwidth is-danger" disabled>ログインして下さい</button> <% end %> </div> </div> <div class="card"> <div class="card-header"> <div class="card-header-title">最新のレビュー</div> </div> <div class="card-content"> <!-- レビュー --> <% @reviews.each do |r| %> <article class="media"> <figure class="media-left"> <p class="image is-64x64"> <%= image_tag avatar_url(r.user), class: "is-rounded" %> </p> </figure> <div class="media-content"> <div class="content"> <p> <strong><%= r.user.full_name %></strong><br> <%= r.review %> </p> <div> <%= link_to "削除", [@project, r], class: "button is-danger", method: :delete, data: {confirm: "本当によろしいですか？"} if current_user && current_user.id == r.user.id %> </div> <small><%= time_ago_in_words(r.created_at) %></small> </div> </div> <div class="media-right"> <span class="star-review"><i class="fa fa-star"></i> <%= r.stars %></span> </div> </article> <% end %> </div> </div> </div> </div> </div> </div> </div> </section> <script> BulmaCarousel.attach('#carousel-photo', { slidesToScroll: 1, slidesToShow: 1 }); $(document).ready(function() { $('#tabs li').on('click', function() { var type = $(this).data('tab'); $('#tabs li').removeClass('is-active'); $(this).addClass('is-active'); $('.tab-content').hide(); $('#tab-' + type).show(); }) }) </script> <script> $('.toggle-modal').on('click', (e) => { e.stopPropagation(); e.preventDefault(); var project_id = e.target.getAttribute('aria-control'); $('#star_' + project_id).raty({ path: '/assets/raty-js/lib/images', scoreName: 'review[stars]', score: 1 }); $('#star_' + project_id).raty('reload'); $('#' + project_id).toggleClass('is-active'); }); </script>
ブラウザ確認
http://localhost:3000/project/2
「app\views\project\index.html.erb」ファイルに記述を追加します。
記述追加 app\views\project\index.html.erb(21行目)
<div class="card-content p-t-5 p-b-5" style="margin-left: 10px;"> <span class="star-review"><i class="fa fa-star"></i> <%= project.average_rating %> <span class="has-text-primary">(<%= project.reviews.count %>)</span> </span> </div>
app\views\project\index.html.erb
<div class="box"> <article class="media"> <div class="column"> <div class="columns is-multiline"> <% if @projects.count > 0 %> <% @projects.each do |project| %> <%= link_to project do %> <div class="column is-one-third"> <div class="card"> <div class="card-image"> <%= link_to project_path(project) do %> <figure class="image is-4by3"> <%= image_tag project_cover(project) %> </figure> <% end %> </div> <div class="card-content p-t-5 p-b-5"> <h4 class="title is-4" style="color: black; margin: 10px;"><%= project.name %></h4> </div> <div class="card-content p-t-5 p-b-5" style="margin-left: 10px;"> <span class="star-review"><i class="fa fa-star"></i> <%= project.average_rating %> <span class="has-text-primary">(<%= project.reviews.count %>)</span> </span> </div> <div class="card-content p-t-5 p-b-5"> <%= link_to users_path(project.user.id), class: "tootip" do %> <figure class="image is-48x48"> <%= image_tag avatar_url(project.user), class: "is-rounded" %> <span class="tag is-light"><%= project.user.full_name %></span> </figure> <% end %> </div> <div class="card-content p-t-5 p-b-5"> <span class="tag is-danger is-large" style="margin-top: 10px; margin-bottom: 10px;"><%= number_to_currency(project.price) %></span> </div> <footer class="card-footer"> <h4 style="margin: 20px;"><%= project.description %></h4> </footer> </div> </div> <% end %> <% end %> <% else %> <div class="column is-one-third"> <div class="card"> <div class="card-content p-t-5 p-b-5"> <p class="subtitle is-6 m-b-5">表示できるプロジェクトはありません。</p> </div> </div> </div> <% end %> </div> </div> </article> </div>
ブラウザ確認
http://localhost:3000/project
星のアベレージ表示をつけました。
↓↓クリックして頂けると励みになります。
[35]レビューフォーム << [ホームに戻る] >> [37]ホームページ
