template.html.erb

<div class="card my-4"
     @mounted="mounted"
     v-scope="Comments(<%= { **serialize(comments), itemId: item.id, itemType: item.class.name, currentUserId: current_user.id }.to_json %>)">
  <div class="card-body">
    <h2 class="card-title">Комментарии</h2>
  </div>
  <ul class="list-group list-group-flush">
    <li v-for="comment in comments" class="list-group-item">
      <div class="d-flex">
        <div class="mr-3">
          <a v-if="comment.author_id" :href="'/users/' + comment.author_id">
            <img alt="avatar" class="rounded" :src="comment.author_avatar_url" width="50" />
          </a>
          <img v-else alt="avatar" class="rounded" :src="comment.author_avatar_url" width="50" />
        </div>
        <div class="w-100">
          <div class="d-flex">
            <div>
              <a v-if="comment.author_id" :href="'/users/' + comment.author_id">
                <strong>{{comment.author_name}}</strong>
              </a>
              <strong v-else>{{comment.author_name}}</strong>
              <small class="text-muted ml-2">{{comment.formatted_date}}</small>
            </div>
          </div>

          <div class="user-message" v-html="comment.sanitized_message">
          </div>

          <% if allowed_to?(:like?, Comment) %>
            <button class="btn btn-sm btn-default"
                    @click="toggleLike(comment)"
                    @mouseover="showLikes(comment)"
                    @mouseleave="hideLikes(comment)"
            >
              <i class="fas fa-heart" :style="{ color: findExistingLike(comment) ? 'red' : 'white' }"></i> {{comment.likes.length}}
            </button>

            <div v-if="comment.showLikes && comment.likes.length > 0" class="comment-likes card border d-flex">
              <div v-for="like in comment.likes">
                {{like.user_name}}
              </div>
            </div>
          <% end %>
        </div>
      </div>
    </li>
  </ul>

  <div class="card-body" id="new_comment">
    <% if allowed_to?(:create?, Comment) %>
      <%= simple_form_for comment, id: 'new_comment_form', data: { turbo: false } do |f| %>
        <div class="form-group">
          <%= f.input :message, label: false, input_html: { 'v-model': 'text' } %>
        </div>

        <div class="form-group float-right mb-2">
          <div v-show="showEmojiPicker" class="emoji-picker">
            <emoji-picker ref="emojiPicker"/>
          </div>

          <button @click.prevent="showEmojiPicker = !showEmojiPicker" class="btn">🙂</button>
          <button @click.prevent="submit" type="submit" class="btn btn-primary">Отправить</button>
        </div>
      <% end %>
    <% else %>
        <span>
          <a href="/users/sign_in" target="_top">Войдите</a>
          &nbsp;или&nbsp;
          <a href="/users/sign_up" target="_top">зарегистрируйтесь</a>
          &nbsp;для добавления комментария.
        </span>
      <div class="my-2">
        Или можете войти через соцсети:
      </div>
      <div class="d-flex">
        <% User.omniauth_providers.each do |provider| %>
          <%= button_to omniauth_authorize_path(:user, provider), form: { data: { turbo: false, turbo_frame: '_top' } }, class: "btn #{provider} mr-2" do %>
            <i class="fab fa-<%= provider %> fa-lg fa-fw"></i>
          <% end %>
        <% end %>
      </div>
    <% end %>
  </div>
</div>