mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-12 23:35:58 +00:00
c8c71a52c6
- Favor lowercase for words in a sentence after the first - Use exclamation marks for successful actions that use a toastr - place events at the end of the list on components - place class above events - it would be nice to come to a consensus based on best practices, like I had a doubt and places the class definition below the props, is that what others do?
69 lines
1.7 KiB
Vue
69 lines
1.7 KiB
Vue
<template>
|
|
<div id="comments" class="comment-list">
|
|
<h3 class="title">
|
|
<counter-icon icon="comments" :count="post.comments.length" />
|
|
{{ $t('common.comment', null, 0) }}
|
|
</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"
|
|
:routeHash="routeHash"
|
|
class="comment-tag"
|
|
@deleteComment="updateCommentList"
|
|
@updateComment="updateCommentList"
|
|
@toggleNewCommentForm="toggleNewCommentForm"
|
|
@reply="reply"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
|
|
import Comment from '~/components/Comment/Comment'
|
|
import scrollToAnchor from '~/mixins/scrollToAnchor'
|
|
|
|
export default {
|
|
mixins: [scrollToAnchor],
|
|
components: {
|
|
CounterIcon,
|
|
Comment,
|
|
},
|
|
props: {
|
|
routeHash: { type: String, default: () => '' },
|
|
post: { type: Object, default: () => {} },
|
|
},
|
|
methods: {
|
|
reply(message) {
|
|
this.$emit('reply', message)
|
|
},
|
|
checkAnchor(anchor) {
|
|
return anchor === '#comments'
|
|
},
|
|
updateCommentList(updatedComment) {
|
|
this.post.comments = this.post.comments.map(comment => {
|
|
return comment.id === updatedComment.id ? updatedComment : comment
|
|
})
|
|
},
|
|
toggleNewCommentForm(showNewCommentForm) {
|
|
this.$emit('toggleNewCommentForm', showNewCommentForm)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.comment-list {
|
|
> .title {
|
|
margin-top: 0;
|
|
|
|
> .counter-icon {
|
|
margin-right: $space-small;
|
|
}
|
|
}
|
|
}
|
|
</style>
|