site/resources/js/Shared/Partials/UserComment.vue

<template>
  <div class="flex group">
    <inertia-link :href="route('profile.user', comment.user.username)" class="block flex-shrink-0 mr-3">
      <user-avatar
        :user="comment.user"
        size="small"
        :class="[
          creator_id === comment.user.id ? 'border border-orange' : '',
          'text-xs w-10 h-10',
        ]"
      />
    </inertia-link>
    <div class="flex-1 mr-3">
      <inertia-link :href="route('profile.user', comment.user.username)" class="font-semibold underline inline-block mr-2">
        {{ comment.user.username }}
      </inertia-link>
      {{ comment.body }}
      <div
        class="
          transition-opacity
          opacity-0
          group-hover:opacity-100
          flex
          space-x-3
        "
      >
        <span class="text-xs text-gray-light">{{
          comment.created_at_humans
        }}</span>
        <template v-if="$page.props.auth.user">
          <span

            class="
            text-xs text-gray-light
            font-semibold
            hover:underline
            cursor-pointer
          "
            @click="toAnswer(comment.id, comment.user.id, comment.user.username)"
          >ответить</span>
          <inertia-link
            v-if="$page.props.auth.user.id !== comment.user?.id"
            :href="route('complaint.reason.comment', comment.id)"
            class="
            text-xs text-orange
            font-semibold
            hover:underline
            cursor-pointer
          "
          >
            пожаловаться
          </inertia-link>
          <user-comment-remove v-if="$page.props.auth.user.id === comment.user.id || $page.props.auth.user.id === creator_id" :text="comment.children_count ? 'удалить ветку' : 'удалить'"
                               @remove="removeComment"
          />
        </template>
      </div>
    </div>
    <!-- <div class="flex-shrink-0">
      <button class="button-default">
        <svg class="w-3 h-3">
          <use xlink:href="#heart"></use>
        </svg>
      </button>
    </div> -->
  </div>

  <div v-if="comment.children_count && comment.closed_children_comments" class="test-box ml-14 mt-2 text-gray-light text-xs">
    <button class="button-default" @click="showChildren">
      --- Посмотреть ответы ({{ comment.children_count }})
    </button>
  </div>

  <div v-if="comment.childrens" class="mt-2 space-y-3 ml-14 md:space-y-6">
    <div v-for="children in comment.childrens" :key="children.id"
         class="comment-line text-gray text-sm"
    >
      <user-comment-children :creator_id="creator_id" :comment="children"
                             @toAnswerChild="sendChild" @removeComment="removeCommentChildren"
      />
    </div>
  </div>

  <div v-if="cursor" class="flex items-center justify-center">
    <svg xmlns="http://www.w3.org/2000/svg" width="24"
         height="24"
         viewBox="0 0 24 24" fill="none"
         stroke="currentColor" stroke-width="2"
         stroke-linecap="round" stroke-linejoin="round"
         class="cursor-pointer text-white" @click="showChildren"
    ><circle cx="12" cy="12"
             r="10"
    ></circle><line x1="12" y1="8"
                    x2="12" y2="16"
    ></line><line x1="8" y1="12"
                  x2="16" y2="12"
    ></line></svg>
  </div>
</template>

<script>
import UserAvatar from '@/Shared/Misc/UserAvatar.vue'
import UserCommentChildren from '@/Shared/Partials/UserCommentChildren.vue'
import UserCommentRemove from './UserCommentRemove.vue'
import axios from 'axios'


export default {
    components: {
        UserAvatar,
        UserCommentChildren,
        UserCommentRemove,
    },
    props: {
        comment: Object,
        creator_id: Number,
    },
    emits: ['toAnswer', 'showChildren', 'removeCommentItem'],
    data() {
        return {
            cursor: null,
        }
    },
    methods: {
        toAnswer(id, user_id, name) {
            this.$emit('toAnswer', id, user_id, name)
        },
        sendChild(user_id, name){
            this.toAnswer(this.comment.id, user_id, name)
        },
        showChildren(){
            const that = this
            axios.post(route('comments.children.show', this.comment.id), { cursor: this.cursor }).then(({ data }) => {
                that.$emit('showChildren', that.comment.id, data.items)
                that.cursor = data.nextCursor
            })
        },
        removeComment() {
            const that = this
            axios.post(route('comments.remove', this.comment.id)).then(({ data }) => {
                that.$emit('removeCommentItem', that.comment.id, data, null)
            })
        },
        removeCommentChildren(id) {
            const that = this
            axios.post(route('comments.remove', id)).then(({ data }) => {
                that.$emit('removeCommentItem', id, data, that.comment.id)
            })
        }

    },
}
</script>