merge and add opened comment view
This commit is contained in:
isUnknown
parent
c3860d4a38
commit
4e4216f8d3
6 changed files with 164 additions and 134 deletions
|
|
@ -12,11 +12,11 @@ Template: document
|
|||
|
||||
Comments:
|
||||
|
||||
m2u905al:
|
||||
m2ucagze:
|
||||
pageUri: >
|
||||
projects/miss-dior-blooming-bouquet/client-brief
|
||||
fileUuid: file://s0lNtRA0Z7ybTCWG
|
||||
filePageTarget: 1
|
||||
filePageIndex: 1
|
||||
position:
|
||||
x: null
|
||||
y: null
|
||||
|
|
@ -27,22 +27,22 @@ m2u905al:
|
|||
email: adrien.payet@outlook.com
|
||||
uuid: user://WWjXgPWk
|
||||
role: admin
|
||||
date: 2024-10-29T10:31:23+01:00
|
||||
id: m2u905al
|
||||
m2u955a7:
|
||||
date: 2024-10-29T12:03:24+01:00
|
||||
id: m2ucagze
|
||||
m2ucgaoe:
|
||||
pageUri: >
|
||||
projects/miss-dior-blooming-bouquet/client-brief
|
||||
fileUuid: file://s0lNtRA0Z7ybTCWG
|
||||
filePageTarget: 1
|
||||
filePageIndex: 1
|
||||
position:
|
||||
x: null
|
||||
y: null
|
||||
replies: [ ]
|
||||
text: come2
|
||||
text: Deuxième commentaire
|
||||
user:
|
||||
name: Adrien Payet
|
||||
email: adrien.payet@outlook.com
|
||||
uuid: user://WWjXgPWk
|
||||
role: admin
|
||||
date: 2024-10-29T10:35:16+01:00
|
||||
id: m2u955a7
|
||||
date: 2024-10-29T12:07:55+01:00
|
||||
id: m2ucgaoe
|
||||
|
|
@ -17,7 +17,7 @@ return [
|
|||
$newComment = [
|
||||
'pageUri' => $data->pageUri,
|
||||
'fileUuid' => (string) $file->uuid(),
|
||||
'filePageTarget' => $data->targetPage,
|
||||
'filePageIndex' => $data->filePageIndex,
|
||||
'position' => [
|
||||
'x' => null,
|
||||
'y' => null
|
||||
|
|
@ -40,7 +40,7 @@ return [
|
|||
'comments' => $comments
|
||||
]);
|
||||
|
||||
$user->sendNotification('comments', $newComment);
|
||||
// $user->sendNotification('comments', $newComment);
|
||||
|
||||
return getFileData($newFile);
|
||||
}
|
||||
|
|
|
|||
16
public/site/plugins/notifications/user-methods/read.php
Normal file
16
public/site/plugins/notifications/user-methods/read.php
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<?php
|
||||
|
||||
return function ($group, $notificationId) {
|
||||
$notifications = Yaml::decode($this->notifications()->value());
|
||||
|
||||
try {
|
||||
$notifications[$group][$notificationId]['isRead'] = true;
|
||||
} catch (\Throwable $th) {
|
||||
//throw $th;
|
||||
}
|
||||
|
||||
$this->update([
|
||||
"notifications" => $notifications
|
||||
]);
|
||||
return $notifications;
|
||||
};
|
||||
26
public/site/plugins/notifications/user-methods/send.php
Normal file
26
public/site/plugins/notifications/user-methods/send.php
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<?php
|
||||
|
||||
return function ($group, $data) {
|
||||
foreach (kirby()->users()->not($this) as $otherUser) {
|
||||
try {
|
||||
$notifications = $otherUser->notifications()->isNotEmpty()
|
||||
? Yaml::decode($otherUser->notifications()->value())
|
||||
: [];
|
||||
|
||||
if (!isset($notifications[$group])) {
|
||||
$notifications[$group] = [];
|
||||
}
|
||||
|
||||
|
||||
$data['isRead'] = false;
|
||||
|
||||
$notifications[$group][$data['id']] = $data;
|
||||
|
||||
$otherUser->update([
|
||||
'notifications' => $notifications
|
||||
]);
|
||||
} catch (\Throwable $th) {
|
||||
throw new Exception("Error updating notifications: " . $th->getMessage() . ' line ' . $th->getLine(), 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
78
src/components/comments/Comment.vue
Normal file
78
src/components/comments/Comment.vue
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
<template>
|
||||
<article class="comment | flow" :data-status="setStatus(comment)">
|
||||
<header>
|
||||
<p>
|
||||
<strong>{{ comment.user.name ?? comment.user.email }}</strong>
|
||||
<template v-if="commentIndex">
|
||||
<span class="comment__id">#{{ commentIndex }}</span>
|
||||
•
|
||||
</template>
|
||||
<span class="comment__page">Page {{ comment.filePageIndex }}</span>
|
||||
<time :datetime="dayjs(comment.date).format('YYYY-MM-DD')">{{
|
||||
formatDate(comment.date)
|
||||
}}</time>
|
||||
</p>
|
||||
</header>
|
||||
<p class="comment__body">
|
||||
{{ comment.text }}
|
||||
</p>
|
||||
<footer v-if="comment.replies?.length > 0" class="comment__replies">
|
||||
<span>{{ comment.replies.length }} réponse</span>
|
||||
</footer>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import dayjs from "dayjs";
|
||||
import "dayjs/locale/fr";
|
||||
|
||||
dayjs.locale("fr");
|
||||
|
||||
const { comment, commentIndex } = defineProps({
|
||||
comment: Object,
|
||||
commentIndex: Number,
|
||||
});
|
||||
|
||||
// Functions
|
||||
function setStatus(comment) {
|
||||
try {
|
||||
if (!user?.notifications?.comments[comment.id].isRead) {
|
||||
return "unread";
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
} catch (error) {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(date) {
|
||||
const todayNumber = parseInt(dayjs().format("YYMMD"));
|
||||
const dateNumber = parseInt(dayjs(date).format("YYMMD"));
|
||||
|
||||
if (dateNumber === todayNumber) {
|
||||
return "Aujourd'hui";
|
||||
}
|
||||
|
||||
if (dateNumber === todayNumber - 1) {
|
||||
return "hier";
|
||||
}
|
||||
|
||||
return dayjs(date).format("D MMM YY");
|
||||
}
|
||||
|
||||
function closeAddField() {
|
||||
isAddOpen.value = false;
|
||||
newCommentText.value = "";
|
||||
}
|
||||
|
||||
async function readNotification(notificationId) {
|
||||
const newNotifications = await api.readNotification(
|
||||
user.uuid,
|
||||
"comments",
|
||||
notificationId
|
||||
);
|
||||
|
||||
user.notifications = newNotifications;
|
||||
}
|
||||
</script>
|
||||
|
|
@ -2,87 +2,38 @@
|
|||
<aside id="comments-container" aria-labelledby="comments-label">
|
||||
<h2 id="comments-label" class="sr-only">Commentaires</h2>
|
||||
<div class="comments | flow">
|
||||
<template v-if="!openedComment">
|
||||
<!-- TODO: faire un composant comment -->
|
||||
<article
|
||||
v-for="(comment, commentIndex) in Object.values(comments).reverse()"
|
||||
:key="commentIndex"
|
||||
class="comment | flow"
|
||||
:data-status="setStatus(comment)"
|
||||
@click="open(comment)"
|
||||
>
|
||||
<header>
|
||||
<p>
|
||||
<strong>{{ comment.user.name ?? comment.user.email }}</strong>
|
||||
<span class="comment__id">#{{ commentIndex + 1 }}</span> •
|
||||
<span class="comment__page">Page {{ pageIndex }}</span>
|
||||
<time :datetime="dayjs(comment.date).format('YYYY-MM-DD')">{{
|
||||
formatDate(comment.date)
|
||||
}}</time>
|
||||
</p>
|
||||
</header>
|
||||
<p class="comment__body">
|
||||
{{ comment.text }}
|
||||
</p>
|
||||
<!-- TODO: à dynamiser (affichage ou non si replies + nombre de replies)-->
|
||||
<footer class="comment__replies">
|
||||
<span>1 réponse</span>
|
||||
</footer>
|
||||
</article>
|
||||
</template>
|
||||
<template v-else>
|
||||
<!-- TODO: mettre la bonne cible pour to: -->
|
||||
<router-link
|
||||
:to="'/' + page.parent"
|
||||
class="btn | justify-start w-full | bg-white-10 text-white | px-8"
|
||||
data-icon="chevron-single-left"
|
||||
>
|
||||
<span>Retour à la liste</span>
|
||||
</router-link>
|
||||
<!-- TODO: utiliser le composant comment ici -->
|
||||
<article
|
||||
class="comment"
|
||||
data-opened="true"
|
||||
>
|
||||
<header>
|
||||
<p>
|
||||
<strong>{{ openedComment.user.name ?? openedComment.user.email }}</strong>
|
||||
<span class="comment__id">#{{ commentIndex + 1 }}</span> •
|
||||
<span class="comment__page">Page {{ pageIndex }}</span>
|
||||
<time :datetime="dayjs(openedComment.date).format('YYYY-MM-DD')">{{
|
||||
formatDate(openedComment.date)
|
||||
}}</time>
|
||||
</p>
|
||||
</header>
|
||||
<p class="comment__body">
|
||||
{{ openedComment.text }}
|
||||
</p>
|
||||
<footer class="comment__replies">
|
||||
<span>1 réponse</span>
|
||||
</footer>
|
||||
</article>
|
||||
<div class="replies">
|
||||
<!-- TODO: utiliser le composant comment ici -->
|
||||
<article
|
||||
v-for="comment in openedComment.replies"
|
||||
class="comment reply"
|
||||
<template v-if="comments">
|
||||
<template v-if="!openedComment">
|
||||
<Comment
|
||||
v-for="(comment, commentIndex) in Object.values(comments).reverse()"
|
||||
:comment="comment"
|
||||
:commentIndex="commentIndex + 1"
|
||||
:key="comment.id"
|
||||
@click="openedComment = comment"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button
|
||||
class="btn | justify-start w-full | bg-white-10 text-white | px-8"
|
||||
data-icon="chevron-single-left"
|
||||
@click="openedComment = null"
|
||||
>
|
||||
<header>
|
||||
<p>
|
||||
<strong>{{ comment.user.name ?? comment.user.email }}</strong>
|
||||
<span class="comment__id">#{{ commentIndex + 1 }}</span> •
|
||||
<span class="comment__page">Page {{ pageIndex }}</span>
|
||||
<time :datetime="dayjs(comment.date).format('YYYY-MM-DD')">{{
|
||||
formatDate(comment.date)
|
||||
}}</time>
|
||||
</p>
|
||||
</header>
|
||||
<p class="comment__body">
|
||||
{{ comment.text }}
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
<span>Retour à la liste</span>
|
||||
</button>
|
||||
<Comment :comment="openedComment" />
|
||||
<div v-if="openedComment?.replies?.length > 0" class="replies">
|
||||
<Comment
|
||||
v-for="(reply, commentIndex) in Object.values(
|
||||
openedComment.replies
|
||||
).reverse()"
|
||||
:comment="reply"
|
||||
:commentIndex="commentIndex + 1"
|
||||
:key="reply.id"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else> état aucun commentaire </template>
|
||||
</div>
|
||||
<button
|
||||
v-if="!openedComment && !isAddOpen"
|
||||
|
|
@ -93,7 +44,7 @@
|
|||
Ajouter un commentaire
|
||||
</button>
|
||||
<button
|
||||
v-if="openedComment && !isReplyOpen"
|
||||
v-else
|
||||
id="reply-comment"
|
||||
class="btn btn--white-20 | justify-start w-full | text-white-50"
|
||||
@click="isReplyOpen = true"
|
||||
|
|
@ -135,6 +86,7 @@ import { ref } from "vue";
|
|||
import { useUserStore } from "../../stores/user";
|
||||
import { usePageStore } from "../../stores/page";
|
||||
import { useApiStore } from "../../stores/api";
|
||||
import Comment from "./Comment.vue";
|
||||
|
||||
dayjs.locale("fr");
|
||||
|
||||
|
|
@ -160,7 +112,7 @@ async function addComment(event) {
|
|||
const date = dayjs().format();
|
||||
const comment = {
|
||||
pageUri: page.uri + "/client-brief",
|
||||
targetPage: currentPageIndex,
|
||||
filePageIndex: currentPageIndex,
|
||||
fileName: file.name,
|
||||
userUuid: user.uuid,
|
||||
text: newCommentText.value,
|
||||
|
|
@ -172,46 +124,4 @@ async function addComment(event) {
|
|||
isAddOpen.value = false;
|
||||
emits("update:file", newFile);
|
||||
}
|
||||
|
||||
function formatDate(date) {
|
||||
const todayNumber = parseInt(dayjs().format("YYMMD"));
|
||||
const dateNumber = parseInt(dayjs(date).format("YYMMD"));
|
||||
|
||||
if (dateNumber === todayNumber) {
|
||||
return "Aujourd'hui";
|
||||
}
|
||||
|
||||
if (dateNumber === todayNumber - 1) {
|
||||
return "hier";
|
||||
}
|
||||
|
||||
return dayjs(date).format("D MMM YY");
|
||||
}
|
||||
|
||||
function closeAddField() {
|
||||
isAddOpen.value = false;
|
||||
newCommentText.value = "";
|
||||
}
|
||||
|
||||
function setStatus(comment) {
|
||||
try {
|
||||
if (!user?.notifications?.comments[comment.id].isRead) {
|
||||
return "unread";
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
} catch (error) {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
async function readNotification(notificationId) {
|
||||
const newNotifications = await api.readNotification(
|
||||
user.uuid,
|
||||
"comments",
|
||||
notificationId
|
||||
);
|
||||
|
||||
user.notifications = newNotifications;
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue