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

show comments corresponding to current file

Browse source
This commit is contained in:
isUnknown 2025-02-19 15:31:57 +01:00
parent 0d7d8e3f59
commit cd9de2572a
3 changed files with 59 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

67
src/components/comments/Comment.vue
View file

@ -13,9 +13,10 @@
<strong>{{ comment.author.name ?? comment.author.email }}</strong>
<template v-if="commentIndex">
<span class="comment__id">#{{ commentIndex }}</span>
•
</template>
<span class="comment__page">Page {{ comment.position.pageIndex }}</span>
<span v-if="comment.position.pageIndex" class="comment__page">
• Page {{ comment.position.pageIndex }}
</span>
<time
class="comment__date"
:datetime="dayjs(comment.date).format('YYYY-MM-DD')"
@ -39,7 +40,7 @@
<footer v-if="!comment.isEditMode" class="comment__replies">
<p v-if="comment.replies?.length > 0">
{{ comment.replies.length }} réponse{{
comment.replies.length > 1 ? "s" : ""
comment.replies.length > 1 ? 's' : ''
}}
</p>
<div
@ -78,24 +79,24 @@
</template>
<script setup>
import dayjs from "dayjs";
import "dayjs/locale/fr";
import { useUserStore } from "../../stores/user";
import { useApiStore } from "../../stores/api";
import { useDialogStore } from "../../stores/dialog";
import { computed, onMounted, ref, useTemplateRef } from "vue";
import { storeToRefs } from "pinia";
import { usePageStore } from "../../stores/page";
import { useRoute } from "vue-router";
import dayjs from 'dayjs';
import 'dayjs/locale/fr';
import { useUserStore } from '../../stores/user';
import { useApiStore } from '../../stores/api';
import { useDialogStore } from '../../stores/dialog';
import { computed, onMounted, ref, useTemplateRef } from 'vue';
import { storeToRefs } from 'pinia';
import { usePageStore } from '../../stores/page';
import { useRoute } from 'vue-router';
dayjs.locale("fr");
dayjs.locale('fr');
const { comment, commentIndex } = defineProps({
comment: Object,
commentIndex: Number,
});
const emits = defineEmits(["update:file", "close:comment"]);
const emits = defineEmits(['update:file', 'close:comment']);
const route = useRoute();
const userStore = useUserStore();
@ -104,7 +105,7 @@ const dialog = useDialogStore();
const { activeTracks, openedComment } = storeToRefs(useDialogStore());
const draftText = ref(comment.text);
const editField = ref(null);
const commentNode = useTemplateRef("comment-node");
const commentNode = useTemplateRef('comment-node');
const { page } = storeToRefs(usePageStore());
let correspondingMarker = null;
@ -114,29 +115,29 @@ const getStatus = computed(() => {
(notification) => notification.id === comment.id
);
if (correspondingNotification && !correspondingNotification.isRead) {
return "unread";
return 'unread';
}
return undefined;
});
function formatDate() {
const todayNumber = parseInt(dayjs().format("YYMMD"));
const dateNumber = parseInt(dayjs(comment.date).format("YYMMD"));
const todayNumber = parseInt(dayjs().format('YYMMD'));
const dateNumber = parseInt(dayjs(comment.date).format('YYMMD'));
if (dateNumber === todayNumber) {
return "Aujourd'hui";
}
if (dateNumber === todayNumber - 1) {
return "hier";
return 'hier';
}
return dayjs(comment.date).format("D MMM YY");
return dayjs(comment.date).format('D MMM YY');
}
function closeAddField() {
isAddOpen.value = false;
newCommentText.value = "";
newCommentText.value = '';
}
function handleClick() {
@ -145,14 +146,14 @@ function handleClick() {
}
async function read() {
if (getStatus.value !== "unread") return;
if (getStatus.value !== 'unread') return;
try {
const newNotification = await api.readNotification(
comment.id,
page.value.uri
);
} catch (error) {
console.log("Erreur lors de la lecture de la notification : ", error);
console.log('Erreur lors de la lecture de la notification : ', error);
}
}
@ -179,8 +180,8 @@ async function deleteComment(event) {
} else {
dialog.updateFile(newFile);
}
if (comment.type === "comment-reply") {
emits("close:comment");
if (comment.type === 'comment-reply') {
emits('close:comment');
}
}
@ -206,19 +207,19 @@ function editComment(event) {
}
function hightlightCorrespondingMarker() {
if (comment.type === "comment-reply") return;
if (comment.type === 'comment-reply') return;
const correspondingMarker = document.querySelector(
`.comment-marker[href="#comment-${comment.id}"]`
);
if (!correspondingMarker) return;
commentNode.value.classList.add("highlight");
correspondingMarker.classList.add("active");
correspondingMarker.classList.add("big");
commentNode.value.classList.add('highlight');
correspondingMarker.classList.add('active');
correspondingMarker.classList.add('big');
}
function unhightlightCorrespondingMarker() {
if (comment.type === "comment-reply") return;
if (comment.type === 'comment-reply') return;
const correspondingMarker = document.querySelector(
`.comment-marker[href="#comment-${comment.id}"]`
@ -226,8 +227,8 @@ function unhightlightCorrespondingMarker() {
if (!correspondingMarker) return;
if (openedComment.value) return;
commentNode.value.classList.remove("highlight");
correspondingMarker.classList.remove("active");
correspondingMarker.classList.remove("big");
commentNode.value.classList.remove('highlight');
correspondingMarker.classList.remove('active');
correspondingMarker.classList.remove('big');
}
</script>