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 comments" class="comments__page-group">
        <article
          v-for="(comment, commentIndex) in Object.values(page)"
          :key="pageIndex + commentIndex"
          class="comment | flow"
          :data-status="setStatus(comment)"
          @click="readNotification(comment)"
        >
          <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" @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 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;
}

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>