Последняя версия с сервера прошлого разработчика

resources/js/Shared/Partials/UserComment.vue

@@ -0,0 +1,153 @@
+<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>