158 lines
3.9 KiB
Vue
158 lines
3.9 KiB
Vue
<template>
|
|
<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">
|
|
<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>
|
|
</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"
|
|
class="btn btn--white-20 | w-full"
|
|
@click="isAddOpen = true"
|
|
>
|
|
Ajouter un commentaire
|
|
</button>
|
|
|
|
<form
|
|
v-if="isAddOpen"
|
|
action=""
|
|
method="post"
|
|
class="flow"
|
|
@submit="addComment"
|
|
>
|
|
<label class="sr-only" for="comment">Votre commentaire</label>
|
|
<textarea
|
|
name="comment"
|
|
id="comment"
|
|
placeholder="Ajouter un commentaire"
|
|
rows="3"
|
|
class="text-sm | rounded-lg bg-black p-12"
|
|
v-model="newCommentText"
|
|
></textarea>
|
|
<footer class="flex">
|
|
<button class="btn btn--white-20" @click="closeAddField()">
|
|
Annuler
|
|
</button>
|
|
<input type="submit" class="btn btn--tranparent" />
|
|
</footer>
|
|
</form>
|
|
</aside>
|
|
</template>
|
|
|
|
<script setup>
|
|
import dayjs from "dayjs";
|
|
import "dayjs/locale/fr";
|
|
import uniqid from "uniqid";
|
|
import { ref } from "vue";
|
|
import { useUserStore } from "../../stores/user";
|
|
import { usePageStore } from "../../stores/page";
|
|
import { useApiStore } from "../../stores/api";
|
|
|
|
dayjs.locale("fr");
|
|
|
|
const { currentPageIndex, file, comments } = defineProps({
|
|
currentPageIndex: Number,
|
|
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"]);
|
|
|
|
// Functions
|
|
async function addComment(event) {
|
|
event.preventDefault();
|
|
const date = dayjs().format();
|
|
const comment = {
|
|
pageUri: page.uri + "/client-brief",
|
|
targetPage: currentPageIndex,
|
|
fileName: file.name,
|
|
userUuid: user.uuid,
|
|
text: newCommentText.value,
|
|
date,
|
|
id: uniqid(),
|
|
};
|
|
const newFile = await api.addComment(comment);
|
|
newCommentText.value = "";
|
|
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>
|