mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
9da40c4895
Thank you @vbelolapotkov for pointing out the flaws here: https://github.com/Human-Connection/Human-Connection/pull/1756#discussion_r329361572 So here is my attempt to fix it: * Install `vue-scrollto` which relies on `requestAnimationFrame` - apparently this is better on Safari and IE? 🤔 - Mocking out entire modules is easier in jest: https://jestjs.io/docs/en/bypassing-module-mocks * Require `checkAnchor` to be implemented on the component
61 lines
1.5 KiB
Vue
61 lines
1.5 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>
|
|
<span class="list-title">{{ $t('common.comment', null, 0) }}</span>
|
|
</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>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Comment from '~/components/Comment/Comment'
|
|
import scrollToAnchor from '~/mixins/scrollToAnchor'
|
|
|
|
export default {
|
|
mixins: [scrollToAnchor],
|
|
components: {
|
|
Comment,
|
|
},
|
|
props: {
|
|
post: { type: Object, default: () => {} },
|
|
},
|
|
methods: {
|
|
checkAnchor(anchor) {
|
|
return anchor === '#comments'
|
|
},
|
|
updateCommentList(updatedComment) {
|
|
this.post.comments = this.post.comments.map(comment => {
|
|
return comment.id === updatedComment.id ? updatedComment : comment
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.list-title {
|
|
margin-left: $space-x-small;
|
|
}
|
|
</style>
|