mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
57598df228
If we make this a mixin, we can re-use the same solution for e.g. the comment. If sb. notifies you, the browser automatically scrolls to the comment in which you have been mentioned.
55 lines
1.4 KiB
Vue
55 lines
1.4 KiB
Vue
<template>
|
|
<div id="comments">
|
|
<h3 style="margin-top: -10px;">
|
|
<span>
|
|
<ds-icon name="comments" />
|
|
<ds-tag
|
|
v-if="post.comments.length"
|
|
style="margin-top: -4px; margin-left: -12px; position: absolute;"
|
|
color="primary"
|
|
size="small"
|
|
round
|
|
>
|
|
{{ post.comments.length }}
|
|
</ds-tag>
|
|
Comments
|
|
</span>
|
|
</h3>
|
|
<ds-space margin-bottom="large" />
|
|
<div v-if="post.comments && post.comments.length" id="comments" class="comments">
|
|
<comment
|
|
v-for="comment in post.comments"
|
|
:key="comment.id"
|
|
:comment="comment"
|
|
:post="post"
|
|
@deleteComment="updateCommentList"
|
|
@updateComment="updateCommentList"
|
|
/>
|
|
</div>
|
|
<hc-empty v-else name="empty" icon="messages" />
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Comment from '~/components/Comment.vue'
|
|
import HcEmpty from '~/components/Empty.vue'
|
|
import scrollToAnchor from '~/mixins/scrollToAnchor.js'
|
|
|
|
export default {
|
|
mixins: [scrollToAnchor],
|
|
components: {
|
|
Comment,
|
|
HcEmpty,
|
|
},
|
|
props: {
|
|
post: { type: Object, default: () => {} },
|
|
},
|
|
methods: {
|
|
updateCommentList(updatedComment) {
|
|
this.post.comments = this.post.comments.map(comment => {
|
|
return comment.id === updatedComment.id ? updatedComment : comment
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|