From 2c99811caf24eca3f21d495230c013aeb59bcb8d Mon Sep 17 00:00:00 2001 From: isUnknown Date: Sat, 16 Nov 2024 12:05:37 +0100 Subject: [PATCH] new comment showing in comments panel --- ...-bureaux-artistiquement-consideree.pdf.txt | 66 ++++++++++++++++++- src/components/comments/Comments.vue | 28 ++------ .../project/client-brief/PdfViewer.vue | 12 ++-- src/stores/api.js | 1 - src/stores/dialog.js | 15 ++++- 5 files changed, 88 insertions(+), 34 deletions(-) diff --git a/public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/38969543_extrait-de-louis-sullivan-form-follow-function.-de-la-tour-de-bureaux-artistiquement-consideree.pdf.txt b/public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/38969543_extrait-de-louis-sullivan-form-follow-function.-de-la-tour-de-bureaux-artistiquement-consideree.pdf.txt index af9dd03..2fe1635 100644 --- a/public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/38969543_extrait-de-louis-sullivan-form-follow-function.-de-la-tour-de-bureaux-artistiquement-consideree.pdf.txt +++ b/public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/38969543_extrait-de-louis-sullivan-form-follow-function.-de-la-tour-de-bureaux-artistiquement-consideree.pdf.txt @@ -10,4 +10,68 @@ Template: document ---- -Comments: \ No newline at end of file +Comments: + +- + page: + uri: projects/miss-dior-blooming-bouquet + title: Miss Dior Blooming Bouquet + file: + uuid: file://s0lNtRA0Z7ybTCWG + replies: [ ] + text: test + author: + name: Adrien Payet + email: adrien.payet@outlook.com + uuid: user://WWjXgPWk + role: admin + position: + pageIndex: 1 + x: "22.956789508989" + y: "22.586872586873" + date: 2024-11-16T12:04:11+01:00 + id: m3k28t8f + type: comment + isRead: false +- + page: + uri: projects/miss-dior-blooming-bouquet + title: Miss Dior Blooming Bouquet + file: + uuid: file://s0lNtRA0Z7ybTCWG + replies: [ ] + text: encore + author: + name: Adrien Payet + email: adrien.payet@outlook.com + uuid: user://WWjXgPWk + role: admin + position: + pageIndex: 1 + x: "24.049536437931" + y: "37.451737451737" + date: 2024-11-16T12:04:32+01:00 + id: m3k299rb + type: comment + isRead: false +- + page: + uri: projects/miss-dior-blooming-bouquet + title: Miss Dior Blooming Bouquet + file: + uuid: file://s0lNtRA0Z7ybTCWG + replies: [ ] + text: et encore + author: + name: Adrien Payet + email: adrien.payet@outlook.com + uuid: user://WWjXgPWk + role: admin + position: + pageIndex: 1 + x: '67.486226863373' + y: '53.088803088803' + date: 2024-11-16T12:05:20+01:00 + id: m3k2ab7h + type: comment + isRead: false \ No newline at end of file diff --git a/src/components/comments/Comments.vue b/src/components/comments/Comments.vue index 937edbc..d5aedd6 100644 --- a/src/components/comments/Comments.vue +++ b/src/components/comments/Comments.vue @@ -105,24 +105,20 @@ import dayjs from "dayjs"; import "dayjs/locale/fr"; import uniqid from "uniqid"; -import { watch, ref } from "vue"; +import { watch, ref, computed } from "vue"; import { useUserStore } from "../../stores/user"; import { usePageStore } from "../../stores/page"; import { useApiStore } from "../../stores/api"; import { useDialogStore } from "../../stores/dialog"; import Comment from "./Comment.vue"; +import { storeToRefs } from "pinia"; dayjs.locale("fr"); -const { currentPageIndex, file, comments } = defineProps({ - currentPageIndex: Number, - file: Object, - comments: Array, -}); - const { user } = useUserStore(); const { page } = usePageStore(); const dialog = useDialogStore(); +const { comments, openedFile } = storeToRefs(useDialogStore()); const api = useApiStore(); const openedComment = ref(null); @@ -131,22 +127,13 @@ const newCommentPageIndex = ref(null); const newCommentPosition = ref(null); const newCommentText = ref(""); const isAddOpen = ref(false); -const emits = defineEmits(["update:file"]); -const sortedComments = ref(comments.reverse()); +const sortedComments = computed(() => comments.value.reverse()); const sortedReplies = ref(null); watch(openedComment, (newVal) => { sortedReplies.value = newVal ? newVal.replies.slice().reverse() : null; }); -watch( - () => file, - (newVal) => { - if (newVal.comments) { - sortedComments.value = newVal.comments; - } - } -); watch( () => comments, (newVal) => { @@ -180,7 +167,7 @@ function handleSubmit(event = null) { const date = dayjs().format(); const newComment = { pageUri: page.uri + "/client-brief", - fileName: file.name, + fileName: openedFile.value.name, userUuid: user.uuid, text: newCommentText.value, date, @@ -207,7 +194,6 @@ async function replyComment(newComment) { openedComment.value = newFile.comments.find( (item) => item.id === openedComment.value.id ); - emits("update:file", newFile); } async function addComment(newComment) { @@ -215,9 +201,7 @@ async function addComment(newComment) { newCommentText.value = ""; isAddOpen.value = false; - dialog.content.files = dialog.content.files.map((file) => - file.id === newFile.id ? newFile : file - ); + dialog.updateFile(newFile); } function closeComment() { diff --git a/src/components/project/client-brief/PdfViewer.vue b/src/components/project/client-brief/PdfViewer.vue index 1a660e8..a70bcb7 100644 --- a/src/components/project/client-brief/PdfViewer.vue +++ b/src/components/project/client-brief/PdfViewer.vue @@ -30,12 +30,7 @@ > Afficher les commentaires - + @@ -48,7 +43,9 @@ import { ref, watch } from "vue"; import { useDialogStore } from "../../../stores/dialog"; import { useRoute, useRouter } from "vue-router"; -const file = useDialogStore().content.files[0]; +const dialog = useDialogStore(); +dialog.openedFile = dialog.content.files[0]; +const file = dialog.openedFile; const router = useRouter(); const route = useRoute(); @@ -124,7 +121,6 @@ const onPdfLoaded = () => { }; function setCommentBubbles() { - console.log(file.comments); if (!file.comments) return; file.comments.forEach((comment) => { const bubble = document.createElement("a"); diff --git a/src/stores/api.js b/src/stores/api.js index 9cae23b..bd3e88a 100644 --- a/src/stores/api.js +++ b/src/stores/api.js @@ -137,7 +137,6 @@ export const useApiStore = defineStore("api", () => { } catch (error) { console.error( "Une erreur s'est produite lors de l'ajout du commentaire :", - commentaire, error ); throw error; diff --git a/src/stores/dialog.js b/src/stores/dialog.js index 442e93a..9bc8508 100644 --- a/src/stores/dialog.js +++ b/src/stores/dialog.js @@ -1,8 +1,19 @@ import { defineStore } from "pinia"; -import { ref } from "vue"; +import { ref, computed } from "vue"; export const useDialogStore = defineStore("dialog", () => { const content = ref(null); + const openedFile = ref(null); + const comments = computed(() => { + return openedFile.value.comments; + }); - return { content }; + function updateFile(newFile) { + content.value.files = content.value.files.map((file) => + file.id === newFile.id ? newFile : file + ); + openedFile.value = newFile; + } + + return { content, openedFile, comments, updateFile }; });