show comments corresponding to current file
This commit is contained in:
isUnknown
parent
0d7d8e3f59
commit
cd9de2572a
3 changed files with 59 additions and 56 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -66,8 +66,8 @@
|
|||
>
|
||||
<span>{{
|
||||
!isLoopAnimationEnabled
|
||||
? "Animation en boucle"
|
||||
: "Arrêter l’animation"
|
||||
? 'Animation en boucle'
|
||||
: 'Arrêter l’animation'
|
||||
}}</span>
|
||||
</button>
|
||||
<button
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
@click="isCommentsOpen = !isCommentsOpen"
|
||||
>
|
||||
<span class="sr-only"
|
||||
>{{ isCommentsOpen ? "Masquer" : "Afficher" }} les commentaires</span
|
||||
>{{ isCommentsOpen ? 'Masquer' : 'Afficher' }} les commentaires</span
|
||||
>
|
||||
</button>
|
||||
</template>
|
||||
|
|
@ -92,17 +92,17 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import Comments from "../../comments/Comments.vue";
|
||||
import Dialog from "primevue/dialog";
|
||||
import DynamicView from "./DynamicView.vue";
|
||||
import StaticView from "./StaticView.vue";
|
||||
import DTLPanel from "../../design-to-light/DTLPanel.vue";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { ref, watch, computed } from "vue";
|
||||
import { useVirtualSampleStore } from "../../../stores/virtualSample";
|
||||
import { useDialogStore } from "../../../stores/dialog";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { usePageStore } from "../../../stores/page";
|
||||
import Comments from '../../comments/Comments.vue';
|
||||
import Dialog from 'primevue/dialog';
|
||||
import DynamicView from './DynamicView.vue';
|
||||
import StaticView from './StaticView.vue';
|
||||
import DTLPanel from '../../design-to-light/DTLPanel.vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { ref, watch, computed } from 'vue';
|
||||
import { useVirtualSampleStore } from '../../../stores/virtualSample';
|
||||
import { useDialogStore } from '../../../stores/dialog';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { usePageStore } from '../../../stores/page';
|
||||
|
||||
const { file } = defineProps({
|
||||
file: Object,
|
||||
|
|
@ -130,17 +130,18 @@ const isOpen = ref(true);
|
|||
watch(isOpen, (newValue) => {
|
||||
router.push({ name: route.name });
|
||||
openedFile.value = null;
|
||||
activeTracks.value = null;
|
||||
});
|
||||
|
||||
const downloadText = computed(() => {
|
||||
if (activeTab.value === "dynamic") {
|
||||
if (activeTab.value === 'dynamic') {
|
||||
if (activeTracks.value.length === 1) {
|
||||
return "Télécharger l'image";
|
||||
} else {
|
||||
return "Télécharger les images";
|
||||
return 'Télécharger les images';
|
||||
}
|
||||
} 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;
|
||||
|
||||
const correspondingDTLProposal = page.value.designToLight.find((proposal) => {
|
||||
if (activeTab.value === "dynamic") {
|
||||
if (activeTab.value === 'dynamic') {
|
||||
return (
|
||||
proposal.location.type === "dynamic" &&
|
||||
proposal.location.type === 'dynamic' &&
|
||||
activeTracks?.value?.some(
|
||||
(activeTrack) => activeTrack.slug === proposal.location.trackSlug
|
||||
)
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
proposal.location.type === "static" &&
|
||||
proposal.location.type === 'static' &&
|
||||
openedFile.value?.source === proposal.location.source
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ export const useDialogStore = defineStore('dialog', () => {
|
|||
file.comments ? file.comments : []
|
||||
);
|
||||
}
|
||||
if (!openedFile.value) return [];
|
||||
return openedFile.value.comments;
|
||||
});
|
||||
|
||||
|
|
@ -68,7 +69,8 @@ export const useDialogStore = defineStore('dialog', () => {
|
|||
}
|
||||
});
|
||||
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;
|
||||
|
||||
|
|
@ -82,12 +84,11 @@ export const useDialogStore = defineStore('dialog', () => {
|
|||
});
|
||||
|
||||
function setCommentMarkers() {
|
||||
if (!comments.value) return;
|
||||
if (!comments.value || !openedFile.value) return;
|
||||
comments.value.forEach((comment) => {
|
||||
const correspondingMarker = document.querySelector(
|
||||
`.comment-marker[href="#comment-${comment.id}"]`
|
||||
);
|
||||
console.log(openedFile.value);
|
||||
if (comment.location.file.uuid !== openedFile.value.uuid) return;
|
||||
if (comment.type === 'comment-reply') return;
|
||||
if (correspondingMarker) return;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue