studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

pdf viewer : show draft bubble

Browse source
This commit is contained in:
isUnknown 2024-11-19 16:53:31 +01:00
parent 94b9143cab
commit b3c921cd31
3 changed files with 193 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/components/comments/Comments.vue
View file

@ -91,7 +91,7 @@
placeholder="Ajouter un commentaire…"
rows="5"
class="text-sm | rounded-lg bg-black p-12"
v-model="newCommentText"
v-model="draftComment.text"
></textarea>
<footer class="flex">
<input type="submit" class="btn btn--tranparent" />
@ -118,27 +118,30 @@ import { useRoute } from "vue-router";
dayjs.locale("fr");
const emits = defineEmits(["show-draft-bubble", "hide-draft-bubble"]);
const { user } = useUserStore();
const { page } = usePageStore();
const dialog = useDialogStore();
const { comments, openedFile } = storeToRefs(useDialogStore());
const api = useApiStore();
const draftComment = ref({});
const openedComment = ref(null);
const newCommentPageIndex = ref(null);
const newCommentPosition = ref(null);
const newCommentText = ref("");
const isAddOpen = ref(false);
const route = useRoute();
const waitingForCommentPosition = ref(false);
const sortedComments = computed(() => comments.value.reverse());
const sortedComments = computed(() => {
return [...comments.value].reverse();
});
const sortedReplies = ref(null);
watch(openedComment, (newVal) => {
sortedReplies.value = newVal ? newVal.replies.slice().reverse() : null;
});
watch(isAddOpen, (newVal) => {
if (newVal) {
setTimeout(() => {
@ -147,6 +150,18 @@ watch(isAddOpen, (newVal) => {
}
});
watch(
draftComment,
(newVal) => {
if (newVal.position) {
emits("show-draft-bubble", newVal);
} else {
emits("hide-draft-bubble");
}
},
{ deep: true }
);
const viewContainer = document.querySelector(".vpv-pages-inner-container");
window.addEventListener("keydown", (event) => {
@ -168,13 +183,13 @@ function handleSubmit(event = null) {
path: route.fullPath,
fileName: openedFile ? openedFile.value.name : false,
userUuid: user.uuid,
text: newCommentText.value,
text: draftComment.value.text,
date,
position:
{
pageIndex: newCommentPageIndex.value,
x: newCommentPosition.value?.x,
y: newCommentPosition.value?.y,
pageIndex: draftComment.value.pageIndex,
x: draftComment.value.position?.x,
y: draftComment.value.position?.y,
} ?? false,
id: uniqid(),
};
@ -188,7 +203,9 @@ function handleSubmit(event = null) {
async function replyComment(newComment) {
newComment.parentId = openedComment.value.id;
const newFile = await api.replyComment(newComment);
newCommentText.value = "";
draftComment.value.text = "";
draftComment.value.position = null;
draftComment.value.padeIndex = null;
isAddOpen.value = false;
dialog.updateFile(newFile);
openedComment.value = newFile.comments.find(
@ -198,7 +215,9 @@ async function replyComment(newComment) {
async function addComment(newComment) {
const newFile = await api.addComment(newComment);
newCommentText.value = "";
draftComment.value.text = "";
draftComment.value.position = null;
draftComment.value.padeIndex = null;
isAddOpen.value = false;
dialog.updateFile(newFile);
@ -229,7 +248,7 @@ function handleCommentPositionClick(event) {
.getAttribute("aria-label");
const pageIndex = pageLabel.charAt(pageLabel.length - 1);
newCommentPageIndex.value = parseInt(pageIndex);
draftComment.value.pageIndex = parseInt(pageIndex);
const viewRect = viewContainer.getBoundingClientRect();
const pageRect = pageContainer.getBoundingClientRect();
@ -242,7 +261,7 @@ function handleCommentPositionClick(event) {
const relativeX = (x / pageRect.width) * 100;
const relativeY = (y / pageRect.height) * 100;
newCommentPosition.value = {
draftComment.value.position = {
x: relativeX,
y: relativeY,
};