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">
      <template v-if="comments">
        <template v-if="!openedComment">
          <Comment
            v-for="(comment, commentIndex) in sortedComments"
            :comment="comment"
            :commentIndex="comments.length - commentIndex"
            :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;
              isAddOpen = false;
            "
          >
            <span>Retour à la liste</span>
          </button>
          <Comment :comment="openedComment" data-opened="true" />
          <div
            v-if="Object.values(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"
      id="create-comment"
      class="btn btn--white-20 | w-full"
      @click="isAddOpen = true"
    >
      Ajouter un commentaire
    </button>
    <button
      v-else-if="openedComment && !isAddOpen"
      id="reply-comment"
      class="btn btn--white-20 | justify-start w-full | text-white-50"
      @click="isAddOpen = true"
    >
      Répondre…
    </button>

    <form
      v-if="isAddOpen"
      action=""
      method="post"
      class="flow | bg-white-20 | p-12 | rounded-xl"
      @submit="handleSubmit"
    >
      <label class="sr-only" for="comment">Votre commentaire</label>
      <textarea
        name="comment"
        id="comment"
        placeholder="Ajouter un commentaire…"
        rows="5"
        class="text-sm | rounded-lg bg-black p-12"
        v-model="newCommentText"
      ></textarea>
      <footer class="flex">
        <input type="submit" class="btn btn--tranparent" />
        <button class="btn btn--white-10" @click="isAddOpen = false">
          Annuler
        </button>
      </footer>
    </form>
  </aside>
</template>

<script setup>
import dayjs from "dayjs";
import "dayjs/locale/fr";
import uniqid from "uniqid";
import { computed, 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");

const { currentPageIndex, file, comments } = defineProps({
  currentPageIndex: Number,
  file: Object,
  comments: Array,
});

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"]);
const sortedComments = computed(() => {
  return comments.reverse();
});

// Functions
function handleSubmit(event) {
  event.preventDefault();
  const date = dayjs().format();
  const newComment = {
    pageUri: page.uri + "/client-brief",
    filePageIndex: currentPageIndex,
    fileName: file.name,
    userUuid: user.uuid,
    text: newCommentText.value,
    date,
    id: uniqid(),
  };
  if (openedComment.value) {
    replyComment(newComment);
  } else {
    addComment(newComment);
  }
}

async function replyComment(newComment) {
  newComment.parentId = openedComment.value.id;
  const newFile = await api.replyComment(newComment);
  newCommentText.value = "";
  isAddOpen.value = false;
  openedComment.value = newFile.comments[openedComment.value.id];
  emits("update:file", newFile);
}

async function addComment(newComment) {
  const newFile = await api.addComment(newComment);
  newCommentText.value = "";
  isAddOpen.value = false;
  emits("update:file", newFile);
}
</script>