↓↓クリックして頂けると励みになります。
raty-jsを利用したレビューの実装は解説しました。
mrradiology.hatenablog.jp
レビューコメントの表示や、星の平均値を表示させる方法などをこの記事で解説して行きます。
コメント投稿ボタンを設置し、投稿されたコメントを表示させるビューを書きます。
記述はBootstrap5で行っています。
「app\views\reviews」フォルダに「_list.html.erb」ファイルを新規作成します。
新規作成 【app/views/reviews/_list.html.erb】
<% @reviews.each do |r| %> <div style="border: solid 1px #c0c0c0; margin-bottom: 0.3rem; border-radius: 5px;"> <ul class="list-group list-group-horizontal"> <li class="list-group-item bn"> <figure class="figure"> <%= image_tag avatar_url(r.user), style: "width: 40px; position:relative; left: 1.3rem;", class: "figure-img img-fluid rounded-pill" %> <figcaption class="figure-caption"> <span class="ttl3" style="font-size: 0.5rem;"><%= r.user.full_name %></span> <span><i class="fa fa-star" style="color: gold;"></i></span><span><%= r.stars %></span> </figcaption> </figure> </li> <li class="list-group-item bn" style="width: 80%;"> <span><%= r.review %></span> <span class="text-secondary" style="font-size: 0.3rem;"><%= time_ago_in_words(r.created_at) %></span> </li> <% if (user_signed_in?) %> <% if current_user && current_user == r.user %> <li class="list-group-item bn"> <div> <%= link_to r, method: :delete, data: {confirm: "コメントを削除してもよろしいですか?"} do %> <i class="fas fa-trash-alt" style="color: red;"></i> <% end %> </div> </li> <% end %> <% end %> </ul> </div> <% end %>
表示させるビューに以下の記述をします。
<div class="ttl h5 mt-4"> <span>コメント(<%= @reviews.count %>) <% if (user_signed_in?) %> <%= render partial: "reviews/form", locals: {report: @report} %> <% end %> </span> </div> <div class="container"> <div class="row"> <div class="col"> <!-- レンダー --> <%= render "reviews/list" %> </div> </div> </div>
これでレビューコメントが表示されるようになりました。
↓↓クリックして頂けると励みになります。