75 lines
2.2 KiB
Vue
75 lines
2.2 KiB
Vue
<template>
|
|
<ul class="list-unstyled mt-10">
|
|
<li
|
|
v-for="comment in comments"
|
|
:key="comment.commentId"
|
|
class="mt-6 border-bottom pb-6"
|
|
>
|
|
<BoardComment
|
|
:unknown="unknown"
|
|
:comment="comment"
|
|
:isCommentPassword="comment.isCommentPassword"
|
|
:isEditTextarea="comment.isEditTextarea"
|
|
:passwordCommentAlert="passwordCommentAlert"
|
|
@editClick="$emit('editClick', comment)"
|
|
@deleteClick="$emit('deleteClick', comment)"
|
|
@submitPassword="submitPassword"
|
|
@submitComment="submitComment"
|
|
@commentDeleted="handleCommentDeleted"
|
|
@submitEdit="(comment, editedContent) => $emit('submitEdit', comment, editedContent)"
|
|
@cancelEdit="$emit('cancelEdit', comment)"
|
|
@updateReaction="(reactionData) => handleUpdateReaction(reactionData, comment.commentId, comment.boardId)"
|
|
/>
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, defineEmits } from 'vue';
|
|
import BoardComment from './BoardComment.vue'
|
|
|
|
const props = defineProps({
|
|
comments: {
|
|
type: Array,
|
|
required: true,
|
|
default: () => []
|
|
},
|
|
unknown: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
isCommentPassword: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
isEditTextarea: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
passwordCommentAlert: {
|
|
type: String,
|
|
default: false
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'submitPassword', 'clearPassword']);
|
|
|
|
const submitComment = (replyData) => {
|
|
emit('submitComment', replyData);
|
|
};
|
|
|
|
const handleUpdateReaction = (reactionData, commentId, boardId) => {
|
|
const updatedReactionData = {
|
|
...reactionData,
|
|
commentId: commentId || reactionData.commentId,
|
|
boardId: boardId || reactionData.boardId,
|
|
};
|
|
|
|
emit('updateReaction', updatedReactionData);
|
|
}
|
|
|
|
const submitPassword = (comment, password) => {
|
|
emit('submitPassword', comment, password);
|
|
};
|
|
</script>
|