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

delete comment / reply working

Browse source
This commit is contained in:
isUnknown 2024-10-30 16:32:13 +01:00
parent 58c08690f8
commit ac48b4166a
5 changed files with 131 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -8,20 +8,36 @@
•
</template>
<span class="comment__page">Page {{ comment.file.pageIndex }}</span>
<time class="comment__date" :datetime="dayjs(comment.date).format('YYYY-MM-DD')">{{
formatDate(comment.date)
}}</time>
<time
class="comment__date"
: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">
<p>{{ comment.replies.length }} réponse{{ comment.replies.length > 1 ? 's' : '' }}</p>
<!-- TODO: n'afficher que s'il s'agit du commentaire de l'utilisateur actuellement connecté -->
<div class="comment__ctas | mt-8">
<button class="btn btn--transparent btn--icon btn--sm" data-icon="edit"><span class="sr-only">Éditer</span></button>
<button class="btn btn--transparent btn--icon btn--sm" data-icon="delete"><span class="sr-only">Supprimer</span></button>
<footer class="comment__replies">
<p v-if="comment.replies?.length > 0">
{{ comment.replies.length }} réponse{{
comment.replies.length > 1 ? "s" : ""
}}
</p>
<div
v-if="comment.author.uuid === user.uuid"
class="comment__ctas | mt-8"
>
<button class="btn btn--transparent btn--icon btn--sm" data-icon="edit">
<span class="sr-only">Éditer</span>
</button>
<button
class="btn btn--transparent btn--icon btn--sm"
data-icon="delete"
@click="deleteComment($event, comment)"
>
<span class="sr-only">Supprimer</span>
</button>
</div>
</footer>
</article>
@ -30,6 +46,8 @@
<script setup>
import dayjs from "dayjs";
import "dayjs/locale/fr";
import { useUserStore } from "../../stores/user";
import { useApiStore } from "../../stores/api";
dayjs.locale("fr");
@ -38,6 +56,11 @@ const { comment, commentIndex } = defineProps({
commentIndex: Number,
});
const emits = defineEmits(["update:file", "close:comment"]);
const { user } = useUserStore();
const api = useApiStore();
// Functions
function setStatus(comment) {
try {
@ -80,6 +103,15 @@ async function readNotification(notificationId) {
user.notifications = newNotifications;
}
async function deleteComment(event, comment) {
event.stopPropagation();
const newFile = await api.deleteComment(comment);
emits("update:file", newFile);
if (comment.parentId) {
emits("close:comment");
}
}
</script>
<style scoped>