studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

create opened comment structure

Browse source
This commit is contained in:
isUnknown 2024-10-29 11:18:17 +01:00
parent fb36329556
commit 173479eaa6
1 changed files with 33 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

53
src/components/comments/Comments.vue
View file

@ -2,27 +2,37 @@
<aside id="comments-container" aria-labelledby="comments-label">
<h2 id="comments-label" class="sr-only">Commentaires</h2>
<div class="comments | flow">
<article
v-for="(comment, commentIndex) in Object.values(comments).reverse()"
:key="commentIndex"
class="comment | flow"
:data-status="setStatus(comment)"
@click="open(comment)"
>
<header>
<p>
<strong>{{ comment.user.name ?? comment.user.email }}</strong>
<span class="comment__id">#{{ commentIndex + 1 }}</span> •
<span class="comment__page">Page {{ pageIndex }}</span>
<time :datetime="dayjs(comment.date).format('YYYY-MM-DD')">{{
formatDate(comment.date)
}}</time>
<template v-if="!openedComment">
<article
v-for="(comment, commentIndex) in Object.values(comments).reverse()"
:key="commentIndex"
class="comment | flow"
:data-status="setStatus(comment)"
@click="open(comment)"
>
<header>
<p>
<strong>{{ comment.user.name ?? comment.user.email }}</strong>
<span class="comment__id">#{{ commentIndex + 1 }}</span> •
<span class="comment__page">Page {{ pageIndex }}</span>
<time :datetime="dayjs(comment.date).format('YYYY-MM-DD')">{{
formatDate(comment.date)
}}</time>
</p>
</header>
<p class="comment__body">
{{ comment.text }}
</p>
</header>
<p class="comment__body">
{{ comment.text }}
</p>
</article>
</article>
</template>
<template v-else>
<article>
{{ openedComment.title }}
</article>
<div class="replies">
<article v-for="reply in openedComment.replies"></article>
</div>
</template>
</div>
<button
id="create-comment"
@ -74,10 +84,13 @@ const { currentPageIndex, file, comments } = defineProps({
file: Object,
comments: Object,
});
const { user } = useUserStore();
const { page } = usePageStore();
const api = useApiStore();
const openedComment = ref(null);
const newCommentText = ref("");
const isAddOpen = ref(false);
const emits = defineEmits(["update:file"]);