reply comment on 360 working

src/components/comments/Comments.vue

@@ -121,7 +121,9 @@ dayjs.locale("fr");
 const { user } = useUserStore();
 const { page } = usePageStore();
 const dialog = useDialogStore();
-const { comments, openedFile, draftComment } = storeToRefs(useDialogStore());
+const { comments, openedFile, draftComment, activeTracks } = storeToRefs(
+  useDialogStore()
+);
 const api = useApiStore();
 
 const openedComment = ref(null);
@@ -170,7 +172,7 @@ function handleSubmit(event = null) {
   const date = dayjs().format();
   const newComment = {
     dialogUri: route.fullPath,
-    fileName: openedFile ? openedFile.value.name : false,
+    fileName: openedFile.value ? openedFile.value.name : false,
     userUuid: user.uuid,
     text: draftComment.value.text,
     date,
@@ -192,6 +194,10 @@ function handleSubmit(event = null) {
 
 async function replyComment(newComment) {
   newComment.parentId = openedComment.value.id;
+  const matchFileParentUri = openedComment.value.location.file.url.match(
+    /projects\/.*?(?=\/[^/]+\/[^/]+$)/
+  );
+  newComment.fileParentUri = matchFileParentUri ? matchFileParentUri[0] : null;
   const newFile = await api.replyComment(newComment);
   resetDraftComment();
   isAddOpen.value = false;
@@ -292,6 +298,12 @@ function prepareDraftCommentInImage(event) {
 
 function openComment(comment) {
   openedComment.value = comment;
+
+  if (activeTracks?.value.length === 1) {
+    openedFile.value = activeTracks.value[0].files.find(
+      (file) => file.uuid === openedComment.value.location.file.uuid
+    );
+  }
 }
 </script>
 

src/components/project/virtual-sample/DynamicView.vue

@@ -53,7 +53,9 @@ import Interactive360 from "./Interactive360.vue";
 import { useDialogStore } from "../../../stores/dialog";
 
 const { page } = storeToRefs(usePageStore());
-const { isCommentsOpen, isCommentPanelEnabled } = storeToRefs(useDialogStore());
+const { isCommentsOpen, isCommentPanelEnabled, activeTracks } = storeToRefs(
+  useDialogStore()
+);
 
 const tracks = computed(
   () =>
@@ -75,7 +77,7 @@ watch(isCompareModeEnabled, (newValue) => {
   }
 });
 
-const activeTracks = ref([tracks.value[0]]);
+activeTracks.value = [tracks.value[0]];
 
 function getFrontViewUrl(track) {
   if (track.files.length > 1) {

src/components/project/virtual-sample/Interactive360.vue

@@ -5,7 +5,7 @@
       class="drag-zone"
       :class="{ grabbing: isDragToRotateEnabled }"
     ></div>
-    <img :src="currentFile.url" alt="" width="500" height="500" />
+    <img :src="openedFile.url" alt="" width="500" height="500" />
   </figure>
   <div
     id="helper"

src/components/project/virtual-sample/StaticView.vue

@@ -37,9 +37,11 @@ import { storeToRefs } from "pinia";
 import { useDialogStore } from "../../../stores/dialog";
 
 const { step } = useVirtualSampleStore();
-const { openedFile } = storeToRefs(useDialogStore());
+const { openedFile, activeTracks } = storeToRefs(useDialogStore());
 const activeTab = ref(Object.keys(step.files.static)[0]);
 
+activeTracks.value = [];
+
 watch(
   activeTab,
   (newVal) => {

src/stores/api.js

@@ -127,6 +127,8 @@ export const useApiStore = defineStore("api", () => {
       body: JSON.stringify(comment),
     };
 
+    console.log("Commentaire à enregistrer :", comment);
+
     try {
       const response = await fetch("/create-comment.json", headers);
       if (!response.ok) {
@@ -172,6 +174,8 @@ export const useApiStore = defineStore("api", () => {
       body: JSON.stringify(comment),
     };
 
+    console.log("Réponse à enregistrer :", comment);
+
     try {
       const response = await fetch("/reply-comment.json", headers);
       if (!response.ok) {

src/stores/dialog.js

@@ -5,8 +5,14 @@ import { useRoute } from "vue-router";
 export const useDialogStore = defineStore("dialog", () => {
   const content = ref(null);
   const openedFile = ref(null);
+  const activeTracks = ref(null);
 
   const comments = computed(() => {
+    if (activeTracks.value?.length > 0) {
+      return activeTracks.value[0].files.flatMap((file) =>
+        file.comments ? file.comments : []
+      );
+    }
     return openedFile.value.comments;
   });
 
@@ -81,6 +87,7 @@ export const useDialogStore = defineStore("dialog", () => {
   function setCommentMarkers() {
     if (!comments.value) return;
     comments.value.forEach((comment) => {
+      if (comment.location.file.uuid !== openedFile.value.uuid) return;
       const bubble = document.createElement("a");
 
       bubble.classList.add("comment-marker");
@@ -129,6 +136,7 @@ export const useDialogStore = defineStore("dialog", () => {
 
   return {
     content,
+    activeTracks,
     openedFile,
     comments,
     draftComment,