merge and add opened comment view
This commit is contained in:
isUnknown
parent
c3860d4a38
commit
4e4216f8d3
6 changed files with 164 additions and 134 deletions
78
src/components/comments/Comment.vue
Normal file
78
src/components/comments/Comment.vue
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
<template>
|
||||
<article class="comment | flow" :data-status="setStatus(comment)">
|
||||
<header>
|
||||
<p>
|
||||
<strong>{{ comment.user.name ?? comment.user.email }}</strong>
|
||||
<template v-if="commentIndex">
|
||||
<span class="comment__id">#{{ commentIndex }}</span>
|
||||
•
|
||||
</template>
|
||||
<span class="comment__page">Page {{ comment.filePageIndex }}</span>
|
||||
<time :datetime="dayjs(comment.date).format('YYYY-MM-DD')">{{
|
||||
formatDate(comment.date)
|
||||
}}</time>
|
||||
</p>
|
||||
</header>
|
||||
<p class="comment__body">
|
||||
{{ comment.text }}
|
||||
</p>
|
||||
<footer v-if="comment.replies?.length > 0" class="comment__replies">
|
||||
<span>{{ comment.replies.length }} réponse</span>
|
||||
</footer>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import dayjs from "dayjs";
|
||||
import "dayjs/locale/fr";
|
||||
|
||||
dayjs.locale("fr");
|
||||
|
||||
const { comment, commentIndex } = defineProps({
|
||||
comment: Object,
|
||||
commentIndex: Number,
|
||||
});
|
||||
|
||||
// Functions
|
||||
function setStatus(comment) {
|
||||
try {
|
||||
if (!user?.notifications?.comments[comment.id].isRead) {
|
||||
return "unread";
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
} catch (error) {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(date) {
|
||||
const todayNumber = parseInt(dayjs().format("YYMMD"));
|
||||
const dateNumber = parseInt(dayjs(date).format("YYMMD"));
|
||||
|
||||
if (dateNumber === todayNumber) {
|
||||
return "Aujourd'hui";
|
||||
}
|
||||
|
||||
if (dateNumber === todayNumber - 1) {
|
||||
return "hier";
|
||||
}
|
||||
|
||||
return dayjs(date).format("D MMM YY");
|
||||
}
|
||||
|
||||
function closeAddField() {
|
||||
isAddOpen.value = false;
|
||||
newCommentText.value = "";
|
||||
}
|
||||
|
||||
async function readNotification(notificationId) {
|
||||
const newNotifications = await api.readNotification(
|
||||
user.uuid,
|
||||
"comments",
|
||||
notificationId
|
||||
);
|
||||
|
||||
user.notifications = newNotifications;
|
||||
}
|
||||
</script>
|
||||
|
|
@ -2,87 +2,38 @@
|
|||
<aside id="comments-container" aria-labelledby="comments-label">
|
||||
<h2 id="comments-label" class="sr-only">Commentaires</h2>
|
||||
<div class="comments | flow">
|
||||
<template v-if="!openedComment">
|
||||
<!-- TODO: faire un composant comment -->
|
||||
<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>
|
||||
<!-- TODO: à dynamiser (affichage ou non si replies + nombre de replies)-->
|
||||
<footer class="comment__replies">
|
||||
<span>1 réponse</span>
|
||||
</footer>
|
||||
</article>
|
||||
</template>
|
||||
<template v-else>
|
||||
<!-- TODO: mettre la bonne cible pour to: -->
|
||||
<router-link
|
||||
:to="'/' + page.parent"
|
||||
class="btn | justify-start w-full | bg-white-10 text-white | px-8"
|
||||
data-icon="chevron-single-left"
|
||||
>
|
||||
<span>Retour à la liste</span>
|
||||
</router-link>
|
||||
<!-- TODO: utiliser le composant comment ici -->
|
||||
<article
|
||||
class="comment"
|
||||
data-opened="true"
|
||||
>
|
||||
<header>
|
||||
<p>
|
||||
<strong>{{ openedComment.user.name ?? openedComment.user.email }}</strong>
|
||||
<span class="comment__id">#{{ commentIndex + 1 }}</span> •
|
||||
<span class="comment__page">Page {{ pageIndex }}</span>
|
||||
<time :datetime="dayjs(openedComment.date).format('YYYY-MM-DD')">{{
|
||||
formatDate(openedComment.date)
|
||||
}}</time>
|
||||
</p>
|
||||
</header>
|
||||
<p class="comment__body">
|
||||
{{ openedComment.text }}
|
||||
</p>
|
||||
<footer class="comment__replies">
|
||||
<span>1 réponse</span>
|
||||
</footer>
|
||||
</article>
|
||||
<div class="replies">
|
||||
<!-- TODO: utiliser le composant comment ici -->
|
||||
<article
|
||||
v-for="comment in openedComment.replies"
|
||||
class="comment reply"
|
||||
<template v-if="comments">
|
||||
<template v-if="!openedComment">
|
||||
<Comment
|
||||
v-for="(comment, commentIndex) in Object.values(comments).reverse()"
|
||||
:comment="comment"
|
||||
:commentIndex="commentIndex + 1"
|
||||
:key="comment.id"
|
||||
@click="openedComment = comment"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button
|
||||
class="btn | justify-start w-full | bg-white-10 text-white | px-8"
|
||||
data-icon="chevron-single-left"
|
||||
@click="openedComment = null"
|
||||
>
|
||||
<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>
|
||||
</article>
|
||||
</div>
|
||||
<span>Retour à la liste</span>
|
||||
</button>
|
||||
<Comment :comment="openedComment" />
|
||||
<div v-if="openedComment?.replies?.length > 0" class="replies">
|
||||
<Comment
|
||||
v-for="(reply, commentIndex) in Object.values(
|
||||
openedComment.replies
|
||||
).reverse()"
|
||||
:comment="reply"
|
||||
:commentIndex="commentIndex + 1"
|
||||
:key="reply.id"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else> état aucun commentaire </template>
|
||||
</div>
|
||||
<button
|
||||
v-if="!openedComment && !isAddOpen"
|
||||
|
|
@ -93,7 +44,7 @@
|
|||
Ajouter un commentaire
|
||||
</button>
|
||||
<button
|
||||
v-if="openedComment && !isReplyOpen"
|
||||
v-else
|
||||
id="reply-comment"
|
||||
class="btn btn--white-20 | justify-start w-full | text-white-50"
|
||||
@click="isReplyOpen = true"
|
||||
|
|
@ -135,6 +86,7 @@ import { ref } from "vue";
|
|||
import { useUserStore } from "../../stores/user";
|
||||
import { usePageStore } from "../../stores/page";
|
||||
import { useApiStore } from "../../stores/api";
|
||||
import Comment from "./Comment.vue";
|
||||
|
||||
dayjs.locale("fr");
|
||||
|
||||
|
|
@ -160,7 +112,7 @@ async function addComment(event) {
|
|||
const date = dayjs().format();
|
||||
const comment = {
|
||||
pageUri: page.uri + "/client-brief",
|
||||
targetPage: currentPageIndex,
|
||||
filePageIndex: currentPageIndex,
|
||||
fileName: file.name,
|
||||
userUuid: user.uuid,
|
||||
text: newCommentText.value,
|
||||
|
|
@ -172,46 +124,4 @@ async function addComment(event) {
|
|||
isAddOpen.value = false;
|
||||
emits("update:file", newFile);
|
||||
}
|
||||
|
||||
function formatDate(date) {
|
||||
const todayNumber = parseInt(dayjs().format("YYMMD"));
|
||||
const dateNumber = parseInt(dayjs(date).format("YYMMD"));
|
||||
|
||||
if (dateNumber === todayNumber) {
|
||||
return "Aujourd'hui";
|
||||
}
|
||||
|
||||
if (dateNumber === todayNumber - 1) {
|
||||
return "hier";
|
||||
}
|
||||
|
||||
return dayjs(date).format("D MMM YY");
|
||||
}
|
||||
|
||||
function closeAddField() {
|
||||
isAddOpen.value = false;
|
||||
newCommentText.value = "";
|
||||
}
|
||||
|
||||
function setStatus(comment) {
|
||||
try {
|
||||
if (!user?.notifications?.comments[comment.id].isRead) {
|
||||
return "unread";
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
} catch (error) {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
async function readNotification(notificationId) {
|
||||
const newNotifications = await api.readNotification(
|
||||
user.uuid,
|
||||
"comments",
|
||||
notificationId
|
||||
);
|
||||
|
||||
user.notifications = newNotifications;
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue