Thomas Citharel
96
js/src/views/Discussions/Create.vue
Normal file
96
js/src/views/Discussions/Create.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<section class="section container">
|
||||
<h1>{{ $t("Create a discussion") }}</h1>
|
||||
|
||||
<form @submit.prevent="createDiscussion">
|
||||
<b-field :label="$t('Title')">
|
||||
<b-input aria-required="true" required v-model="discussion.title" />
|
||||
</b-field>
|
||||
|
||||
<b-field :label="$t('Text')">
|
||||
<editor v-model="discussion.text" />
|
||||
</b-field>
|
||||
|
||||
<button class="button is-primary" type="submit">{{ $t("Create the discussion") }}</button>
|
||||
</form>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
import { IGroup, IPerson } from "@/types/actor";
|
||||
import { CURRENT_ACTOR_CLIENT, FETCH_GROUP } from "@/graphql/actor";
|
||||
import { CREATE_DISCUSSION } from "@/graphql/discussion";
|
||||
import RouteName from "../../router/name";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
editor: () => import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"),
|
||||
},
|
||||
apollo: {
|
||||
currentActor: CURRENT_ACTOR_CLIENT,
|
||||
group: {
|
||||
query: FETCH_GROUP,
|
||||
variables() {
|
||||
return {
|
||||
name: this.preferredUsername,
|
||||
};
|
||||
},
|
||||
skip() {
|
||||
return !this.preferredUsername;
|
||||
},
|
||||
},
|
||||
},
|
||||
metaInfo() {
|
||||
return {
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
||||
// @ts-ignore
|
||||
title: this.$t("Create a discussion") as string,
|
||||
// all titles will be injected into this template
|
||||
titleTemplate: "%s | Mobilizon",
|
||||
};
|
||||
},
|
||||
})
|
||||
export default class CreateDiscussion extends Vue {
|
||||
@Prop({ type: String, required: true }) preferredUsername!: string;
|
||||
|
||||
group!: IGroup;
|
||||
|
||||
currentActor!: IPerson;
|
||||
|
||||
discussion = { title: "", text: "" };
|
||||
|
||||
async createDiscussion() {
|
||||
try {
|
||||
const { data } = await this.$apollo.mutate({
|
||||
mutation: CREATE_DISCUSSION,
|
||||
variables: {
|
||||
title: this.discussion.title,
|
||||
text: this.discussion.text,
|
||||
actorId: this.group.id,
|
||||
creatorId: this.currentActor.id,
|
||||
},
|
||||
// update: (store, { data: { createDiscussion } }) => {
|
||||
// // TODO: update group list cache
|
||||
// },
|
||||
});
|
||||
|
||||
await this.$router.push({
|
||||
name: RouteName.DISCUSSION,
|
||||
params: {
|
||||
id: data.createDiscussion.id,
|
||||
slug: data.createDiscussion.slug,
|
||||
},
|
||||
});
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.markdown-render h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
</style>
|
||||
350
js/src/views/Discussions/Discussion.vue
Normal file
350
js/src/views/Discussions/Discussion.vue
Normal file
@@ -0,0 +1,350 @@
|
||||
<template>
|
||||
<div class="container section" v-if="discussion">
|
||||
<nav class="breadcrumb" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li>
|
||||
<router-link :to="{ name: RouteName.MY_GROUPS }">{{ $t("My groups") }}</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link
|
||||
v-if="discussion.actor"
|
||||
:to="{
|
||||
name: RouteName.GROUP,
|
||||
params: { preferredUsername: usernameWithDomain(discussion.actor) },
|
||||
}"
|
||||
>{{ discussion.actor.name }}</router-link
|
||||
>
|
||||
<b-skeleton v-else animated />
|
||||
</li>
|
||||
<li>
|
||||
<router-link
|
||||
v-if="discussion.actor"
|
||||
:to="{
|
||||
name: RouteName.DISCUSSION_LIST,
|
||||
params: { preferredUsername: usernameWithDomain(discussion.actor) },
|
||||
}"
|
||||
>{{ $t("Discussions") }}</router-link
|
||||
>
|
||||
<b-skeleton animated v-else />
|
||||
</li>
|
||||
<li class="is-active">
|
||||
<router-link :to="{ name: RouteName.DISCUSSION, params: { id: discussion.id } }">{{
|
||||
discussion.title
|
||||
}}</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section>
|
||||
<div class="discussion-title">
|
||||
<h2 class="title" v-if="discussion.title && !editTitleMode">
|
||||
{{ discussion.title }}
|
||||
<span
|
||||
@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">
|
||||
<b-button type="is-primary" native-type="submit" icon-right="check" />
|
||||
<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"
|
||||
/>
|
||||
<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>
|
||||
<b-button native-type="submit" type="is-primary">{{ $t("Reply") }}</b-button>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
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";
|
||||
import RouteName from "../../router/name";
|
||||
import { IComment } from "../../types/comment.model";
|
||||
|
||||
@Component({
|
||||
apollo: {
|
||||
discussion: {
|
||||
query: GET_DISCUSSION,
|
||||
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) =>
|
||||
comment.id === subscriptionData.data.discussionCommentChanged.lastComment.id
|
||||
)
|
||||
) {
|
||||
previousDiscussion.lastComment =
|
||||
subscriptionData.data.discussionCommentChanged.lastComment;
|
||||
previousDiscussion.comments.elements.push(
|
||||
subscriptionData.data.discussionCommentChanged.lastComment
|
||||
);
|
||||
previousDiscussion.comments.total += 1;
|
||||
}
|
||||
|
||||
return previousDiscussion;
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
components: {
|
||||
DiscussionComment,
|
||||
editor: () => import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"),
|
||||
},
|
||||
metaInfo() {
|
||||
return {
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
||||
// @ts-ignore
|
||||
title: this.discussion.title,
|
||||
// all titles will be injected into this template
|
||||
titleTemplate: "%s | Mobilizon",
|
||||
};
|
||||
},
|
||||
})
|
||||
export default class discussion extends Vue {
|
||||
@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;
|
||||
|
||||
async reply() {
|
||||
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;
|
||||
const { discussion } = discussionData;
|
||||
discussion.lastComment = replyToDiscussion.lastComment;
|
||||
discussion.comments.elements.push(replyToDiscussion.lastComment);
|
||||
discussion.comments.total += 1;
|
||||
store.writeQuery({
|
||||
query: GET_DISCUSSION,
|
||||
variables: { slug: this.slug, page: this.page },
|
||||
data: { discussion },
|
||||
});
|
||||
},
|
||||
// We don't need to handle cache update since there's the subscription that handles this for us
|
||||
});
|
||||
this.newComment = "";
|
||||
}
|
||||
|
||||
async loadMoreComments() {
|
||||
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;
|
||||
const { discussion } = previousResult;
|
||||
discussion.comments.elements = [
|
||||
...previousResult.discussion.comments.elements,
|
||||
...newComments,
|
||||
];
|
||||
|
||||
return { discussion };
|
||||
},
|
||||
});
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
async updateDiscussion() {
|
||||
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;
|
||||
const { discussion } = discussionData;
|
||||
discussion.title = updateDiscussion.title;
|
||||
store.writeQuery({
|
||||
query: GET_DISCUSSION,
|
||||
variables: { slug: this.slug, page: this.page },
|
||||
data: { discussion },
|
||||
});
|
||||
},
|
||||
});
|
||||
this.editTitleMode = false;
|
||||
}
|
||||
|
||||
async deleteConversation() {
|
||||
await this.$apollo.mutate({
|
||||
mutation: DELETE_DISCUSSION,
|
||||
variables: {
|
||||
discussionId: this.discussion.id,
|
||||
},
|
||||
});
|
||||
if (this.discussion.actor) {
|
||||
return this.$router.push({
|
||||
name: RouteName.DISCUSSION_LIST,
|
||||
params: { preferredUsername: usernameWithDomain(this.discussion.actor) },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async handleErrors(errors: GraphQLError[]) {
|
||||
if (errors[0].message.includes("No such discussion")) {
|
||||
await this.$router.push({ name: RouteName.PAGE_NOT_FOUND });
|
||||
}
|
||||
}
|
||||
|
||||
mounted() {
|
||||
window.addEventListener("scroll", this.handleScroll);
|
||||
}
|
||||
|
||||
destroyed() {
|
||||
window.removeEventListener("scroll", this.handleScroll);
|
||||
}
|
||||
|
||||
handleScroll() {
|
||||
const scrollTop =
|
||||
(document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
|
||||
const scrollHeight =
|
||||
(document.documentElement && document.documentElement.scrollHeight) ||
|
||||
document.body.scrollHeight;
|
||||
const clientHeight = document.documentElement.clientHeight || window.innerHeight;
|
||||
const scrolledToBottom = Math.ceil(scrollTop + clientHeight + 800) >= scrollHeight;
|
||||
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>
|
||||
93
js/src/views/Discussions/DiscussionsList.vue
Normal file
93
js/src/views/Discussions/DiscussionsList.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div class="container section" v-if="group">
|
||||
<nav class="breadcrumb" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li>
|
||||
<router-link :to="{ name: RouteName.MY_GROUPS }">{{ $t("My groups") }}</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link
|
||||
:to="{
|
||||
name: RouteName.GROUP,
|
||||
params: { preferredUsername: usernameWithDomain(group) },
|
||||
}"
|
||||
>{{ `@${group.preferredUsername}` }}</router-link
|
||||
>
|
||||
</li>
|
||||
<li class="is-active">
|
||||
<router-link
|
||||
:to="{
|
||||
name: RouteName.DISCUSSION_LIST,
|
||||
params: { preferredUsername: usernameWithDomain(group) },
|
||||
}"
|
||||
>{{ $t("Discussions") }}</router-link
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section>
|
||||
<div v-if="group.discussions.elements.length > 0">
|
||||
<discussion-list-item
|
||||
:discussion="discussion"
|
||||
v-for="discussion in group.discussions.elements"
|
||||
:key="discussion.id"
|
||||
/>
|
||||
</div>
|
||||
<b-button
|
||||
tag="router-link"
|
||||
:to="{
|
||||
name: RouteName.CREATE_DISCUSSION,
|
||||
params: { preferredUsername: this.preferredUsername },
|
||||
}"
|
||||
>{{ $t("New discussion") }}</b-button
|
||||
>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
import { FETCH_GROUP } from "@/graphql/actor";
|
||||
import { IGroup, usernameWithDomain } from "@/types/actor";
|
||||
import DiscussionListItem from "@/components/Discussion/DiscussionListItem.vue";
|
||||
import RouteName from "../../router/name";
|
||||
|
||||
@Component({
|
||||
components: { DiscussionListItem },
|
||||
apollo: {
|
||||
group: {
|
||||
query: FETCH_GROUP,
|
||||
variables() {
|
||||
return {
|
||||
name: this.preferredUsername,
|
||||
};
|
||||
},
|
||||
skip() {
|
||||
return !this.preferredUsername;
|
||||
},
|
||||
},
|
||||
},
|
||||
metaInfo() {
|
||||
return {
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
||||
// @ts-ignore
|
||||
title: this.$t("Discussions") as string,
|
||||
// all titles will be injected into this template
|
||||
titleTemplate: "%s | Mobilizon",
|
||||
};
|
||||
},
|
||||
})
|
||||
export default class DiscussionsList extends Vue {
|
||||
@Prop({ type: String, required: true }) preferredUsername!: string;
|
||||
|
||||
group!: IGroup;
|
||||
|
||||
RouteName = RouteName;
|
||||
|
||||
usernameWithDomain = usernameWithDomain;
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
div.container.section {
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user