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

41
src/components/project/virtual-sample/VirtualSample.vue
View file

@ -66,8 +66,8 @@
> >
<span>{{ <span>{{
!isLoopAnimationEnabled !isLoopAnimationEnabled
? "Animation en boucle" ? 'Animation en boucle'
: "Arrêter l’animation" : 'Arrêter l’animation'
}}</span> }}</span>
</button> </button>
<button <button
@ -79,7 +79,7 @@
@click="isCommentsOpen = !isCommentsOpen" @click="isCommentsOpen = !isCommentsOpen"
> >
<span class="sr-only" <span class="sr-only"
>{{ isCommentsOpen ? "Masquer" : "Afficher" }} les commentaires</span >{{ isCommentsOpen ? 'Masquer' : 'Afficher' }} les commentaires</span
> >
</button> </button>
</template> </template>
@ -92,17 +92,17 @@
</template> </template>
<script setup> <script setup>
import Comments from "../../comments/Comments.vue"; import Comments from '../../comments/Comments.vue';
import Dialog from "primevue/dialog"; import Dialog from 'primevue/dialog';
import DynamicView from "./DynamicView.vue"; import DynamicView from './DynamicView.vue';
import StaticView from "./StaticView.vue"; import StaticView from './StaticView.vue';
import DTLPanel from "../../design-to-light/DTLPanel.vue"; import DTLPanel from '../../design-to-light/DTLPanel.vue';
import { storeToRefs } from "pinia"; import { storeToRefs } from 'pinia';
import { ref, watch, computed } from "vue"; import { ref, watch, computed } from 'vue';
import { useVirtualSampleStore } from "../../../stores/virtualSample"; import { useVirtualSampleStore } from '../../../stores/virtualSample';
import { useDialogStore } from "../../../stores/dialog"; import { useDialogStore } from '../../../stores/dialog';
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from 'vue-router';
import { usePageStore } from "../../../stores/page"; import { usePageStore } from '../../../stores/page';
const { file } = defineProps({ const { file } = defineProps({
file: Object, file: Object,
@ -130,17 +130,18 @@ const isOpen = ref(true);
watch(isOpen, (newValue) => { watch(isOpen, (newValue) => {
router.push({ name: route.name }); router.push({ name: route.name });
openedFile.value = null; openedFile.value = null;
activeTracks.value = null;
}); });
const downloadText = computed(() => { const downloadText = computed(() => {
if (activeTab.value === "dynamic") { if (activeTab.value === 'dynamic') {
if (activeTracks.value.length === 1) { if (activeTracks.value.length === 1) {
return "Télécharger l'image"; return "Télécharger l'image";
} else { } else {
return "Télécharger les images"; return 'Télécharger les images';
} }
} else { } else {
return "Télécharger le PDF"; return 'Télécharger le PDF';
} }
}); });
@ -149,16 +150,16 @@ const correspondingDTLProposal = computed(() => {
if (!hasDTLProposal || !isOpen.value || !openedFile.value) return false; if (!hasDTLProposal || !isOpen.value || !openedFile.value) return false;
const correspondingDTLProposal = page.value.designToLight.find((proposal) => { const correspondingDTLProposal = page.value.designToLight.find((proposal) => {
if (activeTab.value === "dynamic") { if (activeTab.value === 'dynamic') {
return ( return (
proposal.location.type === "dynamic" && proposal.location.type === 'dynamic' &&
activeTracks?.value?.some( activeTracks?.value?.some(
(activeTrack) => activeTrack.slug === proposal.location.trackSlug (activeTrack) => activeTrack.slug === proposal.location.trackSlug
) )
); );
} else { } else {
return ( return (
proposal.location.type === "static" && proposal.location.type === 'static' &&
openedFile.value?.source === proposal.location.source openedFile.value?.source === proposal.location.source
); );
} }

7
src/stores/dialog.js
View file

@ -13,6 +13,7 @@ export const useDialogStore = defineStore('dialog', () => {
file.comments ? file.comments : [] file.comments ? file.comments : []
); );
} }
if (!openedFile.value) return [];
return openedFile.value.comments; return openedFile.value.comments;
}); });
@ -68,7 +69,8 @@ export const useDialogStore = defineStore('dialog', () => {
} }
}); });
watch(openedFile, (newVal, oldVal) => { watch(openedFile, (newVal, oldVal) => {
if (!isCommentsOpen.value || !oldVal || newVal.url == oldVal.url) return; if (!isCommentsOpen.value || !newVal || !oldVal || newVal.url == oldVal.url)
return;
isViewerDisabled.value = true; isViewerDisabled.value = true;
@ -82,12 +84,11 @@ export const useDialogStore = defineStore('dialog', () => {
}); });
function setCommentMarkers() { function setCommentMarkers() {
if (!comments.value) return; if (!comments.value || !openedFile.value) return;
comments.value.forEach((comment) => { comments.value.forEach((comment) => {
const correspondingMarker = document.querySelector( const correspondingMarker = document.querySelector(
`.comment-marker[href="#comment-${comment.id}"]` `.comment-marker[href="#comment-${comment.id}"]`
); );
console.log(openedFile.value);
if (comment.location.file.uuid !== openedFile.value.uuid) return; if (comment.location.file.uuid !== openedFile.value.uuid) return;
if (comment.type === 'comment-reply') return; if (comment.type === 'comment-reply') return;
if (correspondingMarker) return; if (correspondingMarker) return;