2020-07-09 17:24:28 +02:00
|
|
|
<template>
|
2020-08-31 12:40:30 +02:00
|
|
|
<div class="container section" v-if="group">
|
2022-01-10 15:19:16 +01:00
|
|
|
<breadcrumbs-nav
|
|
|
|
:links="[
|
|
|
|
{
|
|
|
|
name: RouteName.GROUP,
|
|
|
|
params: { preferredUsername: usernameWithDomain(group) },
|
|
|
|
text: displayName(group),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: RouteName.POSTS,
|
|
|
|
params: { preferredUsername: usernameWithDomain(group) },
|
|
|
|
text: $t('Posts'),
|
|
|
|
},
|
|
|
|
]"
|
|
|
|
/>
|
2020-08-31 12:40:30 +02:00
|
|
|
<section>
|
2020-10-01 15:07:15 +02:00
|
|
|
<div class="intro">
|
2020-10-01 15:57:07 +02:00
|
|
|
<p v-if="isCurrentActorMember">
|
2020-10-01 15:07:15 +02:00
|
|
|
{{
|
|
|
|
$t(
|
|
|
|
"A place to publish something to the whole world, your community or just your group members."
|
|
|
|
)
|
|
|
|
}}
|
|
|
|
</p>
|
2020-10-22 10:48:49 +02:00
|
|
|
<p v-if="isCurrentActorMember">
|
|
|
|
{{ $t("Only group moderators can create, edit and delete posts.") }}
|
|
|
|
</p>
|
2020-10-01 15:07:15 +02:00
|
|
|
<router-link
|
2020-10-22 10:48:49 +02:00
|
|
|
v-if="isCurrentActorAGroupModerator"
|
2020-10-01 15:07:15 +02:00
|
|
|
:to="{
|
|
|
|
name: RouteName.POST_CREATE,
|
|
|
|
params: { preferredUsername: usernameWithDomain(group) },
|
|
|
|
}"
|
|
|
|
class="button is-primary"
|
2021-08-05 11:01:40 +02:00
|
|
|
>{{ $t("+ Create a post") }}</router-link
|
2020-10-01 15:07:15 +02:00
|
|
|
>
|
|
|
|
</div>
|
|
|
|
<div class="post-list">
|
2021-11-02 19:47:54 +01:00
|
|
|
<multi-post-list-item
|
|
|
|
:posts="group.posts.elements"
|
2020-10-01 15:07:15 +02:00
|
|
|
:isCurrentActorMember="isCurrentActorMember"
|
|
|
|
/>
|
|
|
|
</div>
|
2020-08-31 12:40:30 +02:00
|
|
|
<b-loading :active.sync="$apollo.loading"></b-loading>
|
|
|
|
<b-message
|
|
|
|
v-if="group.posts.elements.length === 0 && $apollo.loading === false"
|
|
|
|
type="is-danger"
|
|
|
|
>
|
|
|
|
{{ $t("No posts found") }}
|
|
|
|
</b-message>
|
2020-10-01 15:07:15 +02:00
|
|
|
<b-pagination
|
|
|
|
:total="group.posts.total"
|
|
|
|
v-model="postsPage"
|
|
|
|
:per-page="POSTS_PAGE_LIMIT"
|
|
|
|
:aria-next-label="$t('Next page')"
|
|
|
|
:aria-previous-label="$t('Previous page')"
|
|
|
|
:aria-page-label="$t('Page')"
|
|
|
|
:aria-current-label="$t('Current page')"
|
|
|
|
>
|
|
|
|
</b-pagination>
|
2020-07-09 17:24:28 +02:00
|
|
|
</section>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
2020-10-22 10:48:49 +02:00
|
|
|
import { Component, Prop } from "vue-property-decorator";
|
2020-10-01 15:07:15 +02:00
|
|
|
import { CURRENT_ACTOR_CLIENT, PERSON_MEMBERSHIPS } from "@/graphql/actor";
|
2020-10-22 10:48:49 +02:00
|
|
|
import { mixins } from "vue-class-component";
|
|
|
|
import GroupMixin from "@/mixins/group";
|
2020-11-27 19:27:44 +01:00
|
|
|
import { IMember } from "@/types/actor/member.model";
|
2020-07-09 17:24:28 +02:00
|
|
|
import { FETCH_GROUP_POSTS } from "../../graphql/post";
|
|
|
|
import { Paginate } from "../../types/paginate";
|
|
|
|
import { IPost } from "../../types/post.model";
|
2022-01-10 15:19:16 +01:00
|
|
|
import { usernameWithDomain, displayName } from "../../types/actor";
|
2020-07-09 17:24:28 +02:00
|
|
|
import RouteName from "../../router/name";
|
2021-11-02 19:47:54 +01:00
|
|
|
import MultiPostListItem from "../../components/Post/MultiPostListItem.vue";
|
2020-10-01 15:07:15 +02:00
|
|
|
|
|
|
|
const POSTS_PAGE_LIMIT = 10;
|
2020-07-09 17:24:28 +02:00
|
|
|
|
|
|
|
@Component({
|
|
|
|
apollo: {
|
2020-10-01 15:07:15 +02:00
|
|
|
currentActor: CURRENT_ACTOR_CLIENT,
|
|
|
|
memberships: {
|
|
|
|
query: PERSON_MEMBERSHIPS,
|
|
|
|
fetchPolicy: "cache-and-network",
|
|
|
|
variables() {
|
|
|
|
return {
|
|
|
|
id: this.currentActor.id,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
update: (data) => data.person.memberships.elements,
|
|
|
|
skip() {
|
|
|
|
return !this.currentActor || !this.currentActor.id;
|
|
|
|
},
|
|
|
|
},
|
2020-07-09 17:24:28 +02:00
|
|
|
group: {
|
|
|
|
query: FETCH_GROUP_POSTS,
|
2020-08-27 11:53:24 +02:00
|
|
|
fetchPolicy: "cache-and-network",
|
2020-07-09 17:24:28 +02:00
|
|
|
variables() {
|
|
|
|
return {
|
|
|
|
preferredUsername: this.preferredUsername,
|
2020-10-01 15:07:15 +02:00
|
|
|
page: this.postsPage,
|
|
|
|
limit: POSTS_PAGE_LIMIT,
|
2020-07-09 17:24:28 +02:00
|
|
|
};
|
|
|
|
},
|
|
|
|
skip() {
|
|
|
|
return !this.preferredUsername;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
2020-10-01 15:07:15 +02:00
|
|
|
components: {
|
2021-11-02 19:47:54 +01:00
|
|
|
MultiPostListItem,
|
2020-10-01 15:07:15 +02:00
|
|
|
},
|
2020-10-19 09:27:13 +02:00
|
|
|
metaInfo() {
|
2021-10-10 16:24:12 +02:00
|
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
|
|
// @ts-ignore
|
|
|
|
const { group } = this;
|
2020-10-19 09:27:13 +02:00
|
|
|
return {
|
2021-10-10 16:24:12 +02:00
|
|
|
title: this.$t("{group} posts", {
|
2021-11-02 19:47:54 +01:00
|
|
|
group: group?.name || usernameWithDomain(group),
|
2021-10-10 16:24:12 +02:00
|
|
|
}) as string,
|
2020-10-19 09:27:13 +02:00
|
|
|
};
|
|
|
|
},
|
2020-07-09 17:24:28 +02:00
|
|
|
})
|
2020-10-22 10:48:49 +02:00
|
|
|
export default class PostList extends mixins(GroupMixin) {
|
2020-07-09 17:24:28 +02:00
|
|
|
@Prop({ required: true, type: String }) preferredUsername!: string;
|
|
|
|
|
|
|
|
posts!: Paginate<IPost>;
|
|
|
|
|
2020-10-01 15:07:15 +02:00
|
|
|
memberships!: IMember[];
|
|
|
|
|
|
|
|
postsPage = 1;
|
|
|
|
|
2020-07-09 17:24:28 +02:00
|
|
|
RouteName = RouteName;
|
|
|
|
|
|
|
|
usernameWithDomain = usernameWithDomain;
|
2020-10-01 15:07:15 +02:00
|
|
|
|
2022-01-10 15:19:16 +01:00
|
|
|
displayName = displayName;
|
|
|
|
|
2020-10-01 15:07:15 +02:00
|
|
|
POSTS_PAGE_LIMIT = POSTS_PAGE_LIMIT;
|
|
|
|
|
|
|
|
get isCurrentActorMember(): boolean {
|
|
|
|
if (!this.group || !this.memberships) return false;
|
2020-11-30 10:24:11 +01:00
|
|
|
return this.memberships
|
|
|
|
.map(({ parent: { id } }) => id)
|
|
|
|
.includes(this.group.id);
|
2020-10-01 15:07:15 +02:00
|
|
|
}
|
2020-07-09 17:24:28 +02:00
|
|
|
}
|
|
|
|
</script>
|
2020-10-01 15:07:15 +02:00
|
|
|
<style lang="scss" scoped>
|
2020-10-22 09:37:30 +02:00
|
|
|
.container.section {
|
|
|
|
background: $white;
|
|
|
|
}
|
|
|
|
|
2020-10-01 15:07:15 +02:00
|
|
|
section {
|
|
|
|
div.intro,
|
|
|
|
.post-list {
|
|
|
|
margin-bottom: 1rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|