Ruby on Rails | レビューコメントの表示 - 学生向けプログラミング入門

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

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>