2020-07-09 17:24:28 +02:00
|
|
|
<template>
|
|
|
|
<div class="container section" v-if="discussion">
|
|
|
|
<nav class="breadcrumb" aria-label="breadcrumbs">
|
|
|
|
<ul>
|
|
|
|
<li>
|
2020-11-30 10:24:11 +01:00
|
|
|
<router-link :to="{ name: RouteName.MY_GROUPS }">{{
|
|
|
|
$t("My groups")
|
|
|
|
}}</router-link>
|
2020-07-09 17:24:28 +02:00
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<router-link
|
|
|
|
v-if="discussion.actor"
|
|
|
|
:to="{
|
|
|
|
name: RouteName.GROUP,
|
2020-11-30 10:24:11 +01:00
|
|
|
params: {
|
|
|
|
preferredUsername: usernameWithDomain(discussion.actor),
|
|
|
|
},
|
2020-07-09 17:24:28 +02:00
|
|
|
}"
|
|
|
|
>{{ discussion.actor.name }}</router-link
|
|
|
|
>
|
|
|
|
<b-skeleton v-else animated />
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<router-link
|
|
|
|
v-if="discussion.actor"
|
|
|
|
:to="{
|
|
|
|
name: RouteName.DISCUSSION_LIST,
|
2020-11-30 10:24:11 +01:00
|
|
|
params: {
|
|
|
|
preferredUsername: usernameWithDomain(discussion.actor),
|
|
|
|
},
|
2020-07-09 17:24:28 +02:00
|
|
|
}"
|
|
|
|
>{{ $t("Discussions") }}</router-link
|
|
|
|
>
|
|
|
|
<b-skeleton animated v-else />
|
|
|
|
</li>
|
|
|
|
<li class="is-active">
|
2020-11-30 10:24:11 +01:00
|
|
|
<router-link
|
|
|
|
:to="{ name: RouteName.DISCUSSION, params: { id: discussion.id } }"
|
|
|
|
>{{ discussion.title }}</router-link
|
|
|
|
>
|
2020-07-09 17:24:28 +02:00
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</nav>
|
|
|
|
<section>
|
|
|
|
<div class="discussion-title">
|
|
|
|
<h2 class="title" v-if="discussion.title && !editTitleMode">
|
|
|
|
{{ discussion.title }}
|
|
|
|
<span
|
2020-11-30 10:24:11 +01:00
|
|
|
v-if="
|
|
|
|
currentActor.id === discussion.creator.id ||
|
|
|
|
isCurrentActorAGroupModerator
|
|
|
|
"
|
2020-07-09 17:24:28 +02:00
|
|
|
@click="
|
|
|
|
() => {
|
|
|
|
newTitle = discussion.title;
|
|
|
|
editTitleMode = true;
|
|
|
|
}
|
|
|
|
"
|
|
|
|
>
|
|
|
|
<b-icon icon="pencil" />
|
|
|
|
</span>
|
|
|
|
</h2>
|
|
|
|
<b-skeleton v-else-if="!editTitleMode" height="50px" animated />
|
|
|
|
<form v-else @submit.prevent="updateDiscussion" class="title-edit">
|
|
|
|
<b-input :value="discussion.title" v-model="newTitle" />
|
|
|
|
<div class="buttons">
|
2020-11-30 10:24:11 +01:00
|
|
|
<b-button
|
|
|
|
type="is-primary"
|
|
|
|
native-type="submit"
|
|
|
|
icon-right="check"
|
|
|
|
/>
|
2020-07-09 17:24:28 +02:00
|
|
|
<b-button
|
|
|
|
@click="
|
|
|
|
() => {
|
|
|
|
editTitleMode = false;
|
|
|
|
newTitle = '';
|
|
|
|
}
|
|
|
|
"
|
|
|
|
icon-right="close"
|
|
|
|
/>
|
|
|
|
<b-button
|
|
|
|
@click="deleteConversation"
|
|
|
|
type="is-danger"
|
|
|
|
native-type="button"
|
|
|
|
icon-left="delete"
|
|
|
|
>{{ $t("Delete conversation") }}</b-button
|
|
|
|
>
|
|
|
|
</div>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
|
|
<discussion-comment
|
|
|
|
v-for="comment in discussion.comments.elements"
|
|
|
|
:key="comment.id"
|
|
|
|
:comment="comment"
|
2020-08-14 11:32:23 +02:00
|
|
|
@update-comment="updateComment"
|
|
|
|
@delete-comment="deleteComment"
|
2020-07-09 17:24:28 +02:00
|
|
|
/>
|
|
|
|
<b-button
|
|
|
|
v-if="discussion.comments.elements.length < discussion.comments.total"
|
|
|
|
@click="loadMoreComments"
|
|
|
|
>{{ $t("Fetch more") }}</b-button
|
|
|
|
>
|
|
|
|
<form @submit.prevent="reply">
|
|
|
|
<b-field :label="$t('Text')">
|
|
|
|
<editor v-model="newComment" />
|
|
|
|
</b-field>
|
2020-08-14 11:32:23 +02:00
|
|
|
<b-button
|
|
|
|
native-type="submit"
|
|
|
|
:disabled="['<p></p>', ''].includes(newComment)"
|
|
|
|
type="is-primary"
|
|
|
|
>{{ $t("Reply") }}</b-button
|
|
|
|
>
|
2020-07-09 17:24:28 +02:00
|
|
|
</form>
|
|
|
|
</section>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script lang="ts">
|
2020-10-22 09:37:30 +02:00
|
|
|
import { Component, Prop } from "vue-property-decorator";
|
|
|
|
import { mixins } from "vue-class-component";
|
2020-07-09 17:24:28 +02:00
|
|
|
import {
|
|
|
|
GET_DISCUSSION,
|
|
|
|
REPLY_TO_DISCUSSION,
|
|
|
|
UPDATE_DISCUSSION,
|
|
|
|
DELETE_DISCUSSION,
|
|
|
|
DISCUSSION_COMMENT_CHANGED,
|
|
|
|
} from "@/graphql/discussion";
|
|
|
|
import { IDiscussion, Discussion } from "@/types/discussions";
|
|
|
|
import { usernameWithDomain } from "@/types/actor";
|
|
|
|
import DiscussionComment from "@/components/Discussion/DiscussionComment.vue";
|
|
|
|
import { GraphQLError } from "graphql";
|
2020-08-31 12:40:30 +02:00
|
|
|
import { DELETE_COMMENT, UPDATE_COMMENT } from "@/graphql/comment";
|
2020-10-22 09:37:30 +02:00
|
|
|
import GroupMixin from "@/mixins/group";
|
2020-07-09 17:24:28 +02:00
|
|
|
import RouteName from "../../router/name";
|
|
|
|
import { IComment } from "../../types/comment.model";
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
apollo: {
|
|
|
|
discussion: {
|
|
|
|
query: GET_DISCUSSION,
|
2020-08-27 11:53:24 +02:00
|
|
|
fetchPolicy: "cache-and-network",
|
2020-07-09 17:24:28 +02:00
|
|
|
variables() {
|
|
|
|
return {
|
|
|
|
slug: this.slug,
|
|
|
|
page: 1,
|
|
|
|
limit: this.COMMENTS_PER_PAGE,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
skip() {
|
|
|
|
return !this.slug;
|
|
|
|
},
|
|
|
|
error({ graphQLErrors }) {
|
|
|
|
this.handleErrors(graphQLErrors);
|
|
|
|
},
|
|
|
|
update: (data) => new Discussion(data.discussion),
|
|
|
|
subscribeToMore: {
|
|
|
|
document: DISCUSSION_COMMENT_CHANGED,
|
|
|
|
variables() {
|
|
|
|
return {
|
|
|
|
slug: this.slug,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
updateQuery: (previousResult, { subscriptionData }) => {
|
|
|
|
const previousDiscussion = previousResult.discussion;
|
|
|
|
console.log("updating subscription with ", subscriptionData);
|
|
|
|
if (
|
|
|
|
!previousDiscussion.comments.elements.find(
|
|
|
|
(comment: IComment) =>
|
2020-11-30 10:24:11 +01:00
|
|
|
comment.id ===
|
|
|
|
subscriptionData.data.discussionCommentChanged.lastComment.id
|
2020-07-09 17:24:28 +02:00
|
|
|
)
|
|
|
|
) {
|
|
|
|
previousDiscussion.lastComment =
|
|
|
|
subscriptionData.data.discussionCommentChanged.lastComment;
|
|
|
|
previousDiscussion.comments.elements.push(
|
|
|
|
subscriptionData.data.discussionCommentChanged.lastComment
|
|
|
|
);
|
|
|
|
previousDiscussion.comments.total += 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
return previousDiscussion;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
components: {
|
|
|
|
DiscussionComment,
|
2020-11-30 10:24:11 +01:00
|
|
|
editor: () =>
|
|
|
|
import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"),
|
2020-07-09 17:24:28 +02:00
|
|
|
},
|
|
|
|
metaInfo() {
|
|
|
|
return {
|
2020-10-22 09:37:30 +02:00
|
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
2020-07-09 17:24:28 +02:00
|
|
|
// @ts-ignore
|
|
|
|
title: this.discussion.title,
|
|
|
|
// all titles will be injected into this template
|
|
|
|
titleTemplate: "%s | Mobilizon",
|
|
|
|
};
|
|
|
|
},
|
|
|
|
})
|
2020-10-22 09:37:30 +02:00
|
|
|
export default class discussion extends mixins(GroupMixin) {
|
2020-07-09 17:24:28 +02:00
|
|
|
@Prop({ type: String, required: true }) slug!: string;
|
|
|
|
|
|
|
|
discussion: IDiscussion = new Discussion();
|
|
|
|
|
|
|
|
newComment = "";
|
|
|
|
|
|
|
|
newTitle = "";
|
|
|
|
|
|
|
|
editTitleMode = false;
|
|
|
|
|
|
|
|
page = 1;
|
|
|
|
|
|
|
|
hasMoreComments = true;
|
|
|
|
|
|
|
|
COMMENTS_PER_PAGE = 10;
|
|
|
|
|
|
|
|
RouteName = RouteName;
|
|
|
|
|
|
|
|
usernameWithDomain = usernameWithDomain;
|
|
|
|
|
2020-10-22 09:37:30 +02:00
|
|
|
async reply(): Promise<void> {
|
2020-08-14 11:32:23 +02:00
|
|
|
if (this.newComment === "") return;
|
|
|
|
|
2020-07-09 17:24:28 +02:00
|
|
|
await this.$apollo.mutate({
|
|
|
|
mutation: REPLY_TO_DISCUSSION,
|
|
|
|
variables: {
|
|
|
|
discussionId: this.discussion.id,
|
|
|
|
text: this.newComment,
|
|
|
|
},
|
|
|
|
update: (store, { data: { replyToDiscussion } }) => {
|
|
|
|
const discussionData = store.readQuery<{
|
|
|
|
discussion: IDiscussion;
|
|
|
|
}>({
|
|
|
|
query: GET_DISCUSSION,
|
|
|
|
variables: {
|
|
|
|
slug: this.slug,
|
|
|
|
page: this.page,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
if (!discussionData) return;
|
2020-11-27 19:27:44 +01:00
|
|
|
const { discussion: discussionCached } = discussionData;
|
|
|
|
discussionCached.lastComment = replyToDiscussion.lastComment;
|
|
|
|
discussionCached.comments.elements.push(replyToDiscussion.lastComment);
|
|
|
|
discussionCached.comments.total += 1;
|
2020-07-09 17:24:28 +02:00
|
|
|
store.writeQuery({
|
|
|
|
query: GET_DISCUSSION,
|
|
|
|
variables: { slug: this.slug, page: this.page },
|
2020-11-27 19:27:44 +01:00
|
|
|
data: { discussion: discussionCached },
|
2020-07-09 17:24:28 +02:00
|
|
|
});
|
|
|
|
},
|
2020-11-27 19:27:44 +01:00
|
|
|
// We don't need to handle cache update since
|
|
|
|
// there's the subscription that handles this for us
|
2020-07-09 17:24:28 +02:00
|
|
|
});
|
|
|
|
this.newComment = "";
|
|
|
|
}
|
|
|
|
|
2020-10-22 09:37:30 +02:00
|
|
|
async updateComment(comment: IComment): Promise<void> {
|
2020-11-27 19:27:44 +01:00
|
|
|
await this.$apollo.mutate<{ deleteComment: IComment }>({
|
2020-08-14 11:32:23 +02:00
|
|
|
mutation: UPDATE_COMMENT,
|
|
|
|
variables: {
|
|
|
|
commentId: comment.id,
|
|
|
|
text: comment.text,
|
|
|
|
},
|
|
|
|
update: (store, { data }) => {
|
|
|
|
if (!data || !data.deleteComment) return;
|
|
|
|
const discussionData = store.readQuery<{
|
|
|
|
discussion: IDiscussion;
|
|
|
|
}>({
|
|
|
|
query: GET_DISCUSSION,
|
|
|
|
variables: {
|
|
|
|
slug: this.slug,
|
|
|
|
page: this.page,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
if (!discussionData) return;
|
2020-11-27 19:27:44 +01:00
|
|
|
const { discussion: discussionCached } = discussionData;
|
|
|
|
const index = discussionCached.comments.elements.findIndex(
|
2020-08-14 11:32:23 +02:00
|
|
|
({ id }) => id === data.deleteComment.id
|
|
|
|
);
|
|
|
|
if (index > -1) {
|
2020-11-27 19:27:44 +01:00
|
|
|
discussionCached.comments.elements.splice(index, 1);
|
|
|
|
discussionCached.comments.total -= 1;
|
2020-08-14 11:32:23 +02:00
|
|
|
}
|
|
|
|
store.writeQuery({
|
|
|
|
query: GET_DISCUSSION,
|
|
|
|
variables: { slug: this.slug, page: this.page },
|
2020-11-27 19:27:44 +01:00
|
|
|
data: { discussion: discussionCached },
|
2020-08-14 11:32:23 +02:00
|
|
|
});
|
|
|
|
},
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2020-10-22 09:37:30 +02:00
|
|
|
async deleteComment(comment: IComment): Promise<void> {
|
2020-11-27 19:27:44 +01:00
|
|
|
await this.$apollo.mutate<{ deleteComment: IComment }>({
|
2020-08-14 11:32:23 +02:00
|
|
|
mutation: DELETE_COMMENT,
|
|
|
|
variables: {
|
|
|
|
commentId: comment.id,
|
|
|
|
},
|
|
|
|
update: (store, { data }) => {
|
|
|
|
if (!data || !data.deleteComment) return;
|
|
|
|
const discussionData = store.readQuery<{
|
|
|
|
discussion: IDiscussion;
|
|
|
|
}>({
|
|
|
|
query: GET_DISCUSSION,
|
|
|
|
variables: {
|
|
|
|
slug: this.slug,
|
|
|
|
page: this.page,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
if (!discussionData) return;
|
2020-11-27 19:27:44 +01:00
|
|
|
const { discussion: discussionCached } = discussionData;
|
|
|
|
const index = discussionCached.comments.elements.findIndex(
|
2020-08-14 11:32:23 +02:00
|
|
|
({ id }) => id === data.deleteComment.id
|
|
|
|
);
|
|
|
|
if (index > -1) {
|
2020-11-27 19:27:44 +01:00
|
|
|
const updatedComment = discussionCached.comments.elements[index];
|
2020-08-14 11:32:23 +02:00
|
|
|
updatedComment.deletedAt = new Date();
|
|
|
|
updatedComment.actor = null;
|
|
|
|
updatedComment.text = "";
|
2020-11-27 19:27:44 +01:00
|
|
|
discussionCached.comments.elements.splice(index, 1, updatedComment);
|
2020-08-14 11:32:23 +02:00
|
|
|
}
|
|
|
|
store.writeQuery({
|
|
|
|
query: GET_DISCUSSION,
|
|
|
|
variables: { slug: this.slug, page: this.page },
|
2020-11-27 19:27:44 +01:00
|
|
|
data: { discussion: discussionCached },
|
2020-08-14 11:32:23 +02:00
|
|
|
});
|
|
|
|
},
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2020-10-22 09:37:30 +02:00
|
|
|
async loadMoreComments(): Promise<void> {
|
2020-07-09 17:24:28 +02:00
|
|
|
if (!this.hasMoreComments) return;
|
|
|
|
this.page += 1;
|
|
|
|
try {
|
|
|
|
await this.$apollo.queries.discussion.fetchMore({
|
|
|
|
// New variables
|
|
|
|
variables: {
|
|
|
|
slug: this.slug,
|
|
|
|
page: this.page,
|
|
|
|
limit: this.COMMENTS_PER_PAGE,
|
|
|
|
},
|
|
|
|
// Transform the previous result with new data
|
|
|
|
updateQuery: (previousResult, { fetchMoreResult }) => {
|
|
|
|
if (!fetchMoreResult) return previousResult;
|
|
|
|
const newComments = fetchMoreResult.discussion.comments.elements;
|
|
|
|
this.hasMoreComments = newComments.length === 1;
|
2020-11-27 19:27:44 +01:00
|
|
|
const { discussion: discussionCached } = previousResult;
|
|
|
|
discussionCached.comments.elements = [
|
2020-07-09 17:24:28 +02:00
|
|
|
...previousResult.discussion.comments.elements,
|
|
|
|
...newComments,
|
|
|
|
];
|
|
|
|
|
2020-11-27 19:27:44 +01:00
|
|
|
return { discussion: discussionCached };
|
2020-07-09 17:24:28 +02:00
|
|
|
},
|
|
|
|
});
|
|
|
|
} catch (e) {
|
|
|
|
console.error(e);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-10-22 09:37:30 +02:00
|
|
|
async updateDiscussion(): Promise<void> {
|
2020-07-09 17:24:28 +02:00
|
|
|
await this.$apollo.mutate({
|
|
|
|
mutation: UPDATE_DISCUSSION,
|
|
|
|
variables: {
|
|
|
|
discussionId: this.discussion.id,
|
|
|
|
title: this.newTitle,
|
|
|
|
},
|
|
|
|
update: (store, { data: { updateDiscussion } }) => {
|
|
|
|
const discussionData = store.readQuery<{
|
|
|
|
discussion: IDiscussion;
|
|
|
|
}>({
|
|
|
|
query: GET_DISCUSSION,
|
|
|
|
variables: {
|
|
|
|
slug: this.slug,
|
|
|
|
page: this.page,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
if (!discussionData) return;
|
2020-11-27 19:27:44 +01:00
|
|
|
const { discussion: discussionCached } = discussionData;
|
|
|
|
discussionCached.title = updateDiscussion.title;
|
2020-07-09 17:24:28 +02:00
|
|
|
store.writeQuery({
|
|
|
|
query: GET_DISCUSSION,
|
|
|
|
variables: { slug: this.slug, page: this.page },
|
2020-11-27 19:27:44 +01:00
|
|
|
data: { discussion: discussionCached },
|
2020-07-09 17:24:28 +02:00
|
|
|
});
|
|
|
|
},
|
|
|
|
});
|
|
|
|
this.editTitleMode = false;
|
|
|
|
}
|
|
|
|
|
2020-10-22 09:37:30 +02:00
|
|
|
async deleteConversation(): Promise<void> {
|
2020-07-09 17:24:28 +02:00
|
|
|
await this.$apollo.mutate({
|
|
|
|
mutation: DELETE_DISCUSSION,
|
|
|
|
variables: {
|
|
|
|
discussionId: this.discussion.id,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
if (this.discussion.actor) {
|
2020-10-22 09:37:30 +02:00
|
|
|
this.$router.push({
|
2020-07-09 17:24:28 +02:00
|
|
|
name: RouteName.DISCUSSION_LIST,
|
2020-11-30 10:24:11 +01:00
|
|
|
params: {
|
|
|
|
preferredUsername: usernameWithDomain(this.discussion.actor),
|
|
|
|
},
|
2020-07-09 17:24:28 +02:00
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-10-22 09:37:30 +02:00
|
|
|
async handleErrors(errors: GraphQLError[]): Promise<void> {
|
2020-07-09 17:24:28 +02:00
|
|
|
if (errors[0].message.includes("No such discussion")) {
|
|
|
|
await this.$router.push({ name: RouteName.PAGE_NOT_FOUND });
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-10-22 09:37:30 +02:00
|
|
|
mounted(): void {
|
2020-07-09 17:24:28 +02:00
|
|
|
window.addEventListener("scroll", this.handleScroll);
|
|
|
|
}
|
|
|
|
|
2020-10-22 09:37:30 +02:00
|
|
|
destroyed(): void {
|
2020-07-09 17:24:28 +02:00
|
|
|
window.removeEventListener("scroll", this.handleScroll);
|
|
|
|
}
|
|
|
|
|
2020-10-22 09:37:30 +02:00
|
|
|
handleScroll(): void {
|
2020-07-09 17:24:28 +02:00
|
|
|
const scrollTop =
|
2020-11-30 10:24:11 +01:00
|
|
|
(document.documentElement && document.documentElement.scrollTop) ||
|
|
|
|
document.body.scrollTop;
|
2020-07-09 17:24:28 +02:00
|
|
|
const scrollHeight =
|
|
|
|
(document.documentElement && document.documentElement.scrollHeight) ||
|
|
|
|
document.body.scrollHeight;
|
2020-11-30 10:24:11 +01:00
|
|
|
const clientHeight =
|
|
|
|
document.documentElement.clientHeight || window.innerHeight;
|
|
|
|
const scrolledToBottom =
|
|
|
|
Math.ceil(scrollTop + clientHeight + 800) >= scrollHeight;
|
2020-07-09 17:24:28 +02:00
|
|
|
if (scrolledToBottom) {
|
|
|
|
this.loadMoreComments();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
div.container.section {
|
|
|
|
background: white;
|
|
|
|
padding: 1rem 5% 4rem;
|
|
|
|
|
|
|
|
div.discussion-title {
|
|
|
|
margin-bottom: 0.75rem;
|
|
|
|
|
|
|
|
h2.title {
|
|
|
|
span {
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
form.title-edit {
|
|
|
|
div.control {
|
|
|
|
margin-bottom: 0.75rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|