designtopack/src/components/comments/Comments.vue

<template>
  <aside id="comments-container" aria-labelledby="comments-label">
    <h2 id="comments-label" class="sr-only">Commentaires</h2>
    <div class="comments | flow">
      <div
        v-for="(page, pageIndex) in localComments"
        class="comments__page-group"
      >
        <article
          v-for="(comment, commentIndex) in Object.values(page)"
          :key="pageIndex + commentIndex"
          class="comment | flow"
          data-status="unread"
        >
          <header>
            <p>
              <strong>{{ comment.username }}</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>
    </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 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";

dayjs.locale("fr");

const { currentPageIndex, file, comments } = defineProps({
  currentPageIndex: Number,
  file: Object,
  comments: Object,
});
const { user } = useUserStore();
const { page } = usePageStore();

const newCommentText = ref("");
const isAddOpen = ref(false);
const localComments = ref(comments);

// Functions
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 headers = {
    method: "POST",
    body: JSON.stringify(comment),
  };

  fetch("/add-comment.json", headers)
    .then((res) => res.json())
    .then((json) => (localComments.value = json))
    .catch((error) => {
      console.error("Erreur lors de la sauvegarde :", error);
    });
}

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");
}
</script>