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