93 lines
2.6 KiB
Vue
Executable File
93 lines
2.6 KiB
Vue
Executable File
<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>
|
|
<div v-show="comment.user.id != comment.answer_to.id">
|
|
<inertia-link :href="route('profile.user', comment.answer_to.username)" class="text-orange">
|
|
@{{ comment.answer_to.username }}
|
|
</inertia-link>
|
|
</div>
|
|
{{ comment.body }}
|
|
<div
|
|
class="
|
|
transition-opacity
|
|
opacity-0
|
|
group-hover:opacity-100
|
|
flex
|
|
space-x-4
|
|
"
|
|
>
|
|
<span class="text-xs text-gray-light">{{
|
|
comment.created_at_humans
|
|
}}</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>
|
|
<span
|
|
class="
|
|
text-xs text-gray-light
|
|
font-semibold
|
|
hover:underline
|
|
cursor-pointer
|
|
"
|
|
@click="toAnswerChildren()"
|
|
>ответить</span>
|
|
<user-comment-remove v-if="$page.props.auth.user.id === comment.user.id || $page.props.auth.user.id === creator_id" @remove="removeComment" />
|
|
</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>
|
|
</template>
|
|
|
|
<script>
|
|
import UserAvatar from '@/Shared/Misc/UserAvatar.vue'
|
|
import UserCommentRemove from './UserCommentRemove.vue'
|
|
|
|
export default {
|
|
components: {
|
|
UserAvatar,
|
|
UserCommentRemove
|
|
},
|
|
props: {
|
|
comment: Object,
|
|
creator_id: Number,
|
|
},
|
|
emits: ['toAnswerChild', 'removeComment'],
|
|
methods: {
|
|
toAnswerChildren() {
|
|
this.$emit('toAnswerChild', this.comment.user.id, this.comment.user.username)
|
|
},
|
|
removeComment() {
|
|
this.$emit('removeComment', this.comment.id)
|
|
}
|
|
},
|
|
}
|
|
</script>
|