You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
2.8 KiB
71 lines
2.8 KiB
<template>
|
|
<div>
|
|
<div v-if="! comment.deactivated_at">
|
|
<a class="questions__anchor" :id="'question__' + comment.id"></a>
|
|
<div :id="'question__replyto__' + comment.id" :class="{'questions__item_reply': comment.parent && ! controller.isChat}" class="questions__item">
|
|
|
|
<div v-if="comment.author.photo" class="questions__ava ava">
|
|
<img class="ava__pic" :src="comment.author.photo">
|
|
</div>
|
|
|
|
<div v-if="! comment.author.photo" class="questions__ava ava">
|
|
<img class="ava__pic" :src="$root.store.defaultUserPhoto">
|
|
</div>
|
|
|
|
<div class="questions__wrap">
|
|
<div class="questions__details">
|
|
<div class="questions__head">
|
|
<span class="questions__author">{{ comment.author.first_name }} {{ comment.author.last_name }}</span>
|
|
<span class="questions__date">{{ comment.created_at_humanize }}</span>
|
|
</div>
|
|
<div class="questions__content">
|
|
<svg v-if="isHeart" class="icon questions__heart"><use xlink:href="/static/img/sprite.svg#icon-like"></use></svg>
|
|
<span v-if="! isHeart">{{ comment.content }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="questions__foot">
|
|
<button @click="controller.reply(comment)" v-if="$root.store.user.id && ! controller.isChat" class="questions__action question__reply-button">ОТВЕТИТЬ</button>
|
|
<button @click="controller.remove(comment)"
|
|
v-if="$root.store.user.id == comment.author.id || $root.store.user.role == $root.store.roles.ADMIN_ROLE"
|
|
class="questions__action question__reply-button">
|
|
<span v-if="! controller.isChat">УДАЛИТЬ</span>
|
|
<span v-if="controller.isChat">
|
|
<svg class="icon questions__delete-icon"><use xlink:href="/static/img/sprite.svg#icon-delete"></use></svg>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<comment-form v-if="$root.store.user.id && !controller.$data.isChat && controller.$data.replyTo && controller.$data.replyTo.id == comment.id"
|
|
:controller="controller"></comment-form>
|
|
|
|
<ul v-if="comment.children" v-for="(node, index) in comment.children" :key="index">
|
|
<li>
|
|
<comment v-if="! node.deactivated_at" :controller="controller" :comment="node"></comment>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import CommentForm from './CommentForm';
|
|
|
|
export default {
|
|
name: 'comment',
|
|
props: ['controller', 'comment',],
|
|
computed: {
|
|
isHeart(){
|
|
return this.comment.content === '❤';
|
|
},
|
|
},
|
|
mounted(){
|
|
this.controller.flatComments[this.comment.id] = this.comment;
|
|
},
|
|
components: {
|
|
CommentForm
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|