443 lines
13 KiB
Vue
443 lines
13 KiB
Vue
<template>
|
|
<div>
|
|
<form
|
|
class="new-comment"
|
|
v-if="isAbleToComment"
|
|
@submit.prevent="createCommentForEvent(newComment)"
|
|
@keyup.ctrl.enter="createCommentForEvent(newComment)"
|
|
>
|
|
<b-notification
|
|
v-if="isEventOrganiser && !areCommentsClosed"
|
|
:closable="false"
|
|
>{{ $t("Comments are closed for everybody else.") }}</b-notification
|
|
>
|
|
<article class="media">
|
|
<figure class="media-left" v-if="newComment.actor">
|
|
<identity-picker-wrapper :inline="false" v-model="newComment.actor" />
|
|
</figure>
|
|
<div class="media-content">
|
|
<div class="field">
|
|
<div class="field">
|
|
<p class="control">
|
|
<editor
|
|
ref="commenteditor"
|
|
mode="comment"
|
|
v-model="newComment.text"
|
|
:aria-label="$t('Comment body')"
|
|
/>
|
|
</p>
|
|
<p class="help is-danger" v-if="emptyCommentError">
|
|
{{ $t("Comment text can't be empty") }}
|
|
</p>
|
|
</div>
|
|
<div class="field notify-participants" v-if="isEventOrganiser">
|
|
<b-switch
|
|
aria-labelledby="notify-participants-toggle"
|
|
v-model="newComment.isAnnouncement"
|
|
>{{ $t("Notify participants") }}</b-switch
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="send-comment">
|
|
<b-button
|
|
native-type="submit"
|
|
type="is-primary"
|
|
class="comment-button-submit"
|
|
icon-left="send"
|
|
:aria-label="$t('Post a comment')"
|
|
/>
|
|
</div>
|
|
</article>
|
|
</form>
|
|
<b-notification v-else-if="isConnected" :closable="false">{{
|
|
$t("The organiser has chosen to close comments.")
|
|
}}</b-notification>
|
|
<p
|
|
v-if="$apollo.queries.comments.loading"
|
|
class="loading has-text-centered"
|
|
>
|
|
{{ $t("Loading comments…") }}
|
|
</p>
|
|
<transition-group name="comment-empty-list" mode="out-in" v-else>
|
|
<transition-group
|
|
key="list"
|
|
name="comment-list"
|
|
v-if="comments.length"
|
|
class="comment-list"
|
|
tag="ul"
|
|
>
|
|
<comment
|
|
class="root-comment"
|
|
:comment="comment"
|
|
:event="event"
|
|
v-for="comment in filteredOrderedComments"
|
|
:key="comment.id"
|
|
@create-comment="createCommentForEvent"
|
|
@delete-comment="deleteComment"
|
|
/>
|
|
</transition-group>
|
|
<div v-else class="no-comments" key="no-comments">
|
|
<span>{{ $t("No comments yet") }}</span>
|
|
</div>
|
|
</transition-group>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Prop, Vue, Component, Watch } from "vue-property-decorator";
|
|
import Comment from "@/components/Comment/Comment.vue";
|
|
import IdentityPickerWrapper from "@/views/Account/IdentityPickerWrapper.vue";
|
|
import { CommentModeration } from "@/types/enums";
|
|
import { CommentModel, IComment } from "../../types/comment.model";
|
|
import {
|
|
CREATE_COMMENT_FROM_EVENT,
|
|
DELETE_COMMENT,
|
|
COMMENTS_THREADS_WITH_REPLIES,
|
|
} from "../../graphql/comment";
|
|
import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
|
|
import { IPerson } from "../../types/actor";
|
|
import { IEvent } from "../../types/event.model";
|
|
import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
|
|
|
|
@Component({
|
|
apollo: {
|
|
currentActor: CURRENT_ACTOR_CLIENT,
|
|
comments: {
|
|
query: COMMENTS_THREADS_WITH_REPLIES,
|
|
variables() {
|
|
return {
|
|
eventUUID: this.event.uuid,
|
|
};
|
|
},
|
|
update: (data) => data.event.comments,
|
|
skip() {
|
|
return !this.event.uuid;
|
|
},
|
|
},
|
|
},
|
|
components: {
|
|
Comment,
|
|
IdentityPickerWrapper,
|
|
editor: () =>
|
|
import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"),
|
|
},
|
|
})
|
|
export default class CommentTree extends Vue {
|
|
@Prop({ required: false, type: Object }) event!: IEvent;
|
|
|
|
newComment: IComment = new CommentModel();
|
|
|
|
currentActor!: IPerson;
|
|
|
|
comments: IComment[] = [];
|
|
|
|
CommentModeration = CommentModeration;
|
|
|
|
emptyCommentError = false;
|
|
|
|
@Watch("currentActor")
|
|
watchCurrentActor(currentActor: IPerson): void {
|
|
this.newComment.actor = currentActor;
|
|
}
|
|
|
|
@Watch("newComment", { deep: true })
|
|
resetEmptyCommentError(newComment: IComment): void {
|
|
if (this.emptyCommentError) {
|
|
this.emptyCommentError = ["", "<p></p>"].includes(newComment.text);
|
|
}
|
|
}
|
|
|
|
async createCommentForEvent(comment: IComment): Promise<void> {
|
|
this.emptyCommentError = ["", "<p></p>"].includes(comment.text);
|
|
if (this.emptyCommentError) return;
|
|
try {
|
|
if (!comment.actor) return;
|
|
await this.$apollo.mutate({
|
|
mutation: CREATE_COMMENT_FROM_EVENT,
|
|
variables: {
|
|
eventId: this.event.id,
|
|
text: comment.text,
|
|
inReplyToCommentId: comment.inReplyToComment
|
|
? comment.inReplyToComment.id
|
|
: null,
|
|
isAnnouncement: comment.isAnnouncement,
|
|
},
|
|
update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
|
|
if (data == null) return;
|
|
// comments are attached to the event, so we can pass it to replies later
|
|
const newComment = { ...data.createComment, event: this.event };
|
|
|
|
// we load all existing threads
|
|
const commentThreadsData = store.readQuery<{ event: IEvent }>({
|
|
query: COMMENTS_THREADS_WITH_REPLIES,
|
|
variables: {
|
|
eventUUID: this.event.uuid,
|
|
},
|
|
});
|
|
if (!commentThreadsData) return;
|
|
const { event } = commentThreadsData;
|
|
const oldComments = [...event.comments];
|
|
|
|
// if it's no a root comment, we first need to find
|
|
// existing replies and add the new reply to it
|
|
if (comment.originComment !== undefined) {
|
|
const { originComment } = comment;
|
|
const parentCommentIndex = oldComments.findIndex(
|
|
(oldComment) => oldComment.id === originComment.id
|
|
);
|
|
const parentComment = oldComments[parentCommentIndex];
|
|
|
|
// replace the root comment with has the updated list of replies in the thread list
|
|
oldComments.splice(parentCommentIndex, 1, {
|
|
...parentComment,
|
|
replies: [...parentComment.replies, newComment],
|
|
});
|
|
} else {
|
|
// otherwise it's simply a new thread and we add it to the list
|
|
oldComments.push(newComment);
|
|
}
|
|
|
|
// finally we save the thread list
|
|
store.writeQuery({
|
|
query: COMMENTS_THREADS_WITH_REPLIES,
|
|
data: {
|
|
event: {
|
|
...event,
|
|
comments: oldComments,
|
|
},
|
|
},
|
|
variables: {
|
|
eventUUID: this.event.uuid,
|
|
},
|
|
});
|
|
},
|
|
});
|
|
|
|
// and reset the new comment field
|
|
this.newComment = new CommentModel();
|
|
} catch (errors: any) {
|
|
console.error(errors);
|
|
if (errors.graphQLErrors && errors.graphQLErrors.length > 0) {
|
|
const error = errors.graphQLErrors[0];
|
|
if (error.field !== "text" && error.message[0] !== "can't be blank") {
|
|
this.$notifier.error(error.message);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
async deleteComment(comment: IComment): Promise<void> {
|
|
try {
|
|
await this.$apollo.mutate({
|
|
mutation: DELETE_COMMENT,
|
|
variables: {
|
|
commentId: comment.id,
|
|
},
|
|
update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
|
|
if (data == null) return;
|
|
const deletedCommentId = data.deleteComment.id;
|
|
|
|
const commentsData = store.readQuery<{ event: IEvent }>({
|
|
query: COMMENTS_THREADS_WITH_REPLIES,
|
|
variables: {
|
|
eventUUID: this.event.uuid,
|
|
},
|
|
});
|
|
if (!commentsData) return;
|
|
const { event } = commentsData;
|
|
let updatedComments: IComment[] = [...event.comments];
|
|
|
|
if (comment.originComment) {
|
|
// we have deleted a reply to a thread
|
|
const { originComment } = comment;
|
|
|
|
const parentCommentIndex = updatedComments.findIndex(
|
|
(oldComment) => oldComment.id === originComment.id
|
|
);
|
|
const parentComment = updatedComments[parentCommentIndex];
|
|
const updatedReplies = parentComment.replies.map((reply) => {
|
|
if (reply.id === deletedCommentId) {
|
|
return {
|
|
...reply,
|
|
deletedAt: new Date().toString(),
|
|
};
|
|
}
|
|
return reply;
|
|
});
|
|
updatedComments.splice(parentCommentIndex, 1, {
|
|
...parentComment,
|
|
replies: updatedReplies,
|
|
totalReplies: parentComment.totalReplies - 1,
|
|
});
|
|
console.log("updatedComments", updatedComments);
|
|
} else {
|
|
// we have deleted a thread itself
|
|
updatedComments = updatedComments.map((reply) => {
|
|
if (reply.id === deletedCommentId) {
|
|
return {
|
|
...reply,
|
|
deletedAt: new Date().toString(),
|
|
};
|
|
}
|
|
return reply;
|
|
});
|
|
}
|
|
store.writeQuery({
|
|
query: COMMENTS_THREADS_WITH_REPLIES,
|
|
variables: {
|
|
eventUUID: this.event.uuid,
|
|
},
|
|
data: {
|
|
event: {
|
|
...event,
|
|
comments: updatedComments,
|
|
},
|
|
},
|
|
});
|
|
},
|
|
});
|
|
// this.comments = this.comments.filter(commentItem => commentItem.id !== comment.id);
|
|
} catch (error: any) {
|
|
console.error(error);
|
|
if (error.graphQLErrors && error.graphQLErrors.length > 0) {
|
|
this.$notifier.error(error.graphQLErrors[0].message);
|
|
}
|
|
}
|
|
}
|
|
|
|
get orderedComments(): IComment[] {
|
|
return this.comments
|
|
.filter((comment) => comment.inReplyToComment == null)
|
|
.sort((a, b) => {
|
|
if (a.isAnnouncement !== b.isAnnouncement) {
|
|
return (
|
|
(b.isAnnouncement === true ? 1 : 0) -
|
|
(a.isAnnouncement === true ? 1 : 0)
|
|
);
|
|
}
|
|
if (a.publishedAt && b.publishedAt) {
|
|
return (
|
|
new Date(b.publishedAt).getTime() -
|
|
new Date(a.publishedAt).getTime()
|
|
);
|
|
} else if (a.updatedAt && b.updatedAt) {
|
|
return (
|
|
new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
|
|
);
|
|
}
|
|
return 0;
|
|
});
|
|
}
|
|
|
|
get filteredOrderedComments(): IComment[] {
|
|
return this.orderedComments.filter(
|
|
(comment) => !comment.deletedAt || comment.totalReplies > 0
|
|
);
|
|
}
|
|
|
|
get isEventOrganiser(): boolean {
|
|
const organizerId =
|
|
this.event?.organizerActor?.id || this.event?.attributedTo?.id;
|
|
return organizerId !== undefined && this.currentActor?.id === organizerId;
|
|
}
|
|
|
|
get areCommentsClosed(): boolean {
|
|
return (
|
|
this.currentActor.id !== undefined &&
|
|
this.event.options.commentModeration !== CommentModeration.CLOSED
|
|
);
|
|
}
|
|
|
|
get isAbleToComment(): boolean {
|
|
if (this.isConnected) {
|
|
return this.areCommentsClosed || this.isEventOrganiser;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
get isConnected(): boolean {
|
|
return this.currentActor?.id != undefined;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@use "@/styles/_mixins" as *;
|
|
form.new-comment {
|
|
padding-bottom: 1rem;
|
|
|
|
.media-content {
|
|
display: flex;
|
|
align-items: center;
|
|
align-content: center;
|
|
|
|
.field {
|
|
flex: 1;
|
|
@include padding-right(10px);
|
|
margin-bottom: 0;
|
|
|
|
&.notify-participants {
|
|
margin-top: 0.5rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.no-comments {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
span {
|
|
text-align: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
img {
|
|
max-width: 250px;
|
|
align-self: center;
|
|
}
|
|
}
|
|
|
|
ul.comment-list li {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.comment-list-enter-active,
|
|
.comment-list-leave-active,
|
|
.comment-list-move {
|
|
transition: 500ms cubic-bezier(0.59, 0.12, 0.34, 0.95);
|
|
transition-property: opacity, transform;
|
|
}
|
|
|
|
.comment-list-enter {
|
|
opacity: 0;
|
|
transform: translateX(50px) scaleY(0.5);
|
|
}
|
|
|
|
.comment-list-enter-to {
|
|
opacity: 1;
|
|
transform: translateX(0) scaleY(1);
|
|
}
|
|
|
|
.comment-list-leave-active,
|
|
.comment-empty-list-active {
|
|
position: absolute;
|
|
}
|
|
|
|
.comment-list-leave-to,
|
|
.comment-empty-list-leave-to {
|
|
opacity: 0;
|
|
transform: scaleY(0);
|
|
transform-origin: center top;
|
|
}
|
|
|
|
/*.comment-empty-list-enter-active {*/
|
|
/* transition: opacity .5s;*/
|
|
/*}*/
|
|
|
|
/*.comment-empty-list-enter {*/
|
|
/* opacity: 0;*/
|
|
/*}*/
|
|
</style>
|