78 lines
2 KiB
Vue
78 lines
2 KiB
Vue
|
<template>
|
||
|
|
<aside id="comments-container" aria-labelledby="comments-label">
|
||
|
|
<h2 id="comments-label" class="sr-only">Commentaires</h2>
|
||
|
|
<div class="comments | flow">
|
||
|
|
<article class="comment | flow" data-status="unread">
|
||
|
|
<header>
|
||
|
|
<p>
|
||
|
|
<strong>François</strong>
|
||
|
|
<span class="comment__id">#1</span> •
|
||
|
|
<span class="comment__page">Page 12</span>
|
||
|
|
<time datetime="2024-10-22">Hier</time>
|
||
|
|
</p>
|
||
|
|
</header>
|
||
|
|
<p class="comment__body">
|
||
|
|
Lectus adipiscing nulla quis odio in aliquam. Adipiscing libero in
|
||
|
|
consequat porta mauris hendrerit malesuada viverra turpis.
|
||
|
|
</p>
|
||
|
|
</article>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
id="add-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">Annuler</button>
|
||
|
|
<input type="submit" class="btn btn--tranparent" />
|
||
|
|
</footer>
|
||
|
|
</form>
|
||
|
|
</aside>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref } from "vue";
|
||
|
|
import { useUserStore } from "../../stores/user";
|
||
|
|
import dayjs from "dayjs";
|
||
|
|
|
||
|
|
const { currentPage } = defineProps({
|
||
|
|
currentPage: Number,
|
||
|
|
});
|
||
|
|
const { user } = useUserStore();
|
||
|
|
|
||
|
|
const newCommentText = ref("");
|
||
|
|
|
||
|
|
const isAddOpen = ref(false);
|
||
|
|
|
||
|
|
// Functions
|
||
|
|
function addComment(event) {
|
||
|
|
event.preventDefault();
|
||
|
|
const comment = {
|
||
|
|
userUuid: user.uuid,
|
||
|
|
text: newCommentText.value,
|
||
|
|
page: currentPage,
|
||
|
|
date: dayjs().format(),
|
||
|
|
};
|
||
|
|
console.log(comment);
|
||
|
|
}
|
||
|
|
</script>
|