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="sortedReplies.length > 0" class="replies | flow">
            <Comment
              v-for="(reply, commentIndex) in sortedReplies"
              :comment="reply"
              :commentIndex="sortedReplies.length - commentIndex"
              :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();
});
const sortedReplies = computed(() => {
  const sortedReplies =
    openedComment.value && openedComment.value.replies
      ? openedComment.value.replies.slice().reverse()
      : [];
  return sortedReplies;
});

// 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.find(
    (item) => item.id === 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>

<style>
/* Comments */
#toggle-comments {
  position: absolute;
  right: var(--space-16);
  bottom: var(--space-16);
  padding: 0.625rem;
}
#comments-container {
  background-color: black;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 4.5rem;
  width: var(--comments-w);
  padding: var(--space-24) var(--space-32);
}
.comments {
  overflow-y: auto;
  height: calc(100% - 3.5rem);
  margin-bottom: 1rem;
  margin-right: -2rem;
  padding-right: 2rem;
}
#comments-container form {
  --flow-space: 0.5rem;
  flex-direction: column;
  position: -webkit-sticky;
  position: sticky;
  bottom: 5.5rem;
}
#comments-container textarea {
  position: sticky;
  bottom: 0;
  margin: 0;
  resize: none;
  background: none;
  padding: 0;
  color: var(--color-white);
}
#comments-container textarea:focus {
  outline: none;
}
::placeholder {
  color: var(--color-white-50);
}
#comments-container form footer {
  gap: var(--space-12);
}
#comments-container form footer > * {
  flex-grow: 1;
}
</style>