2020-07-09 17:24:28 +02:00
|
|
|
<template>
|
2021-06-15 17:25:33 +02:00
|
|
|
<article class="container" v-if="post">
|
|
|
|
<header>
|
|
|
|
<div class="banner-container">
|
|
|
|
<lazy-image
|
|
|
|
v-if="post.picture"
|
|
|
|
:src="post.picture.url"
|
|
|
|
:width="post.picture.metadata.width"
|
|
|
|
:height="post.picture.metadata.height"
|
|
|
|
:blurhash="post.picture.metadata.blurhash"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
<div class="heading-section">
|
|
|
|
<div class="heading-wrapper">
|
|
|
|
<div class="title-metadata">
|
|
|
|
<h1 class="title">{{ post.title }}</h1>
|
|
|
|
<p class="metadata">
|
|
|
|
<router-link
|
|
|
|
slot="author"
|
|
|
|
:to="{
|
|
|
|
name: RouteName.GROUP,
|
|
|
|
params: {
|
|
|
|
preferredUsername: usernameWithDomain(post.attributedTo),
|
|
|
|
},
|
|
|
|
}"
|
|
|
|
>
|
|
|
|
<actor-inline :actor="post.attributedTo" />
|
|
|
|
</router-link>
|
|
|
|
<span class="published has-text-grey-dark" v-if="!post.draft">
|
|
|
|
<b-icon icon="clock" size="is-small" />
|
|
|
|
{{ post.publishAt | formatDateTimeString }}
|
|
|
|
</span>
|
|
|
|
<span
|
|
|
|
v-if="post.visibility === PostVisibility.PRIVATE"
|
|
|
|
class="has-text-grey-dark"
|
|
|
|
>
|
|
|
|
<b-icon icon="lock" size="is-small" />
|
|
|
|
{{
|
|
|
|
$t("Accessible only to members", {
|
|
|
|
group: post.attributedTo.name,
|
|
|
|
})
|
|
|
|
}}
|
|
|
|
</span>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<p class="buttons" v-if="isCurrentActorMember">
|
|
|
|
<b-tag type="is-warning" size="is-medium" v-if="post.draft">{{
|
|
|
|
$t("Draft")
|
|
|
|
}}</b-tag>
|
|
|
|
<router-link
|
|
|
|
v-if="
|
|
|
|
currentActor.id === post.author.id ||
|
|
|
|
isCurrentActorAGroupModerator
|
|
|
|
"
|
|
|
|
:to="{ name: RouteName.POST_EDIT, params: { slug: post.slug } }"
|
|
|
|
tag="button"
|
|
|
|
class="button is-text"
|
|
|
|
>{{ $t("Edit") }}</router-link
|
|
|
|
>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</header>
|
|
|
|
|
|
|
|
<section v-html="post.body" class="content" />
|
|
|
|
<section class="tags">
|
|
|
|
<router-link
|
|
|
|
v-for="tag in post.tags"
|
|
|
|
:key="tag.title"
|
|
|
|
:to="{ name: RouteName.TAG, params: { tag: tag.title } }"
|
|
|
|
>
|
|
|
|
<tag>{{ tag.title }}</tag>
|
|
|
|
</router-link>
|
|
|
|
</section>
|
|
|
|
</article>
|
2020-07-09 17:24:28 +02:00
|
|
|
</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";
|
|
|
|
import GroupMixin from "@/mixins/group";
|
2020-11-27 19:27:44 +01:00
|
|
|
import { PostVisibility } from "@/types/enums";
|
|
|
|
import { IMember } from "@/types/actor/member.model";
|
2020-08-31 12:40:30 +02:00
|
|
|
import { CURRENT_ACTOR_CLIENT, PERSON_MEMBERSHIPS } from "../../graphql/actor";
|
2020-09-29 09:53:48 +02:00
|
|
|
import { FETCH_POST } from "../../graphql/post";
|
2020-11-27 19:27:44 +01:00
|
|
|
import { IPost } from "../../types/post.model";
|
2021-06-11 18:49:05 +02:00
|
|
|
import { usernameWithDomain } from "../../types/actor";
|
2020-07-09 17:24:28 +02:00
|
|
|
import RouteName from "../../router/name";
|
|
|
|
import Tag from "../../components/Tag.vue";
|
2021-06-15 17:25:33 +02:00
|
|
|
import LazyImage from "../../components/Image/LazyImage.vue";
|
|
|
|
import ActorInline from "../../components/Account/ActorInline.vue";
|
2020-07-09 17:24:28 +02:00
|
|
|
|
|
|
|
@Component({
|
|
|
|
apollo: {
|
|
|
|
currentActor: CURRENT_ACTOR_CLIENT,
|
|
|
|
memberships: {
|
|
|
|
query: PERSON_MEMBERSHIPS,
|
2020-08-27 11:53:24 +02:00
|
|
|
fetchPolicy: "cache-and-network",
|
2020-07-09 17:24:28 +02:00
|
|
|
variables() {
|
|
|
|
return {
|
|
|
|
id: this.currentActor.id,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
update: (data) => data.person.memberships.elements,
|
|
|
|
skip() {
|
|
|
|
return !this.currentActor || !this.currentActor.id;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
post: {
|
|
|
|
query: FETCH_POST,
|
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,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
skip() {
|
|
|
|
return !this.slug;
|
|
|
|
},
|
|
|
|
error({ graphQLErrors }) {
|
|
|
|
this.handleErrors(graphQLErrors);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
components: {
|
|
|
|
Tag,
|
2021-06-15 17:25:33 +02:00
|
|
|
LazyImage,
|
|
|
|
ActorInline,
|
2020-07-09 17:24:28 +02:00
|
|
|
},
|
|
|
|
metaInfo() {
|
|
|
|
return {
|
2020-09-29 09:53:48 +02:00
|
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
2020-07-09 17:24:28 +02:00
|
|
|
// @ts-ignore
|
|
|
|
title: this.post ? this.post.title : "",
|
|
|
|
// all titles will be injected into this template
|
2020-09-29 09:53:48 +02:00
|
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
2020-07-09 17:24:28 +02:00
|
|
|
// @ts-ignore
|
|
|
|
titleTemplate: this.post ? "%s | Mobilizon" : "Mobilizon",
|
|
|
|
};
|
|
|
|
},
|
|
|
|
})
|
2020-10-22 09:37:30 +02:00
|
|
|
export default class Post extends mixins(GroupMixin) {
|
2020-07-09 17:24:28 +02:00
|
|
|
@Prop({ required: true, type: String }) slug!: string;
|
|
|
|
|
|
|
|
post!: IPost;
|
|
|
|
|
|
|
|
memberships!: IMember[];
|
|
|
|
|
|
|
|
RouteName = RouteName;
|
|
|
|
|
|
|
|
usernameWithDomain = usernameWithDomain;
|
|
|
|
|
2020-10-01 15:07:15 +02:00
|
|
|
PostVisibility = PostVisibility;
|
|
|
|
|
|
|
|
handleErrors(errors: any[]): void {
|
|
|
|
if (errors.some((error) => error.status_code === 404)) {
|
|
|
|
this.$router.replace({ name: RouteName.PAGE_NOT_FOUND });
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-07-09 17:24:28 +02:00
|
|
|
get isCurrentActorMember(): boolean {
|
|
|
|
if (!this.post.attributedTo || !this.memberships) return false;
|
2020-11-30 10:24:11 +01:00
|
|
|
return this.memberships
|
|
|
|
.map(({ parent: { id } }) => id)
|
|
|
|
.includes(this.post.attributedTo.id);
|
2020-07-09 17:24:28 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
article {
|
2021-06-15 17:25:33 +02:00
|
|
|
background: $white !important;
|
|
|
|
header {
|
2020-10-01 15:07:15 +02:00
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
2021-06-15 17:25:33 +02:00
|
|
|
.banner-container {
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
height: 30vh;
|
2020-07-09 17:24:28 +02:00
|
|
|
}
|
|
|
|
|
2021-06-15 17:25:33 +02:00
|
|
|
.heading-section {
|
|
|
|
position: relative;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
margin-bottom: 2rem;
|
2020-07-09 17:24:28 +02:00
|
|
|
|
2021-06-15 17:25:33 +02:00
|
|
|
.heading-wrapper {
|
|
|
|
padding: 15px 10px;
|
|
|
|
display: flex;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
justify-content: center;
|
2020-07-09 17:24:28 +02:00
|
|
|
|
2021-06-15 17:25:33 +02:00
|
|
|
.title-metadata {
|
|
|
|
min-width: 300px;
|
|
|
|
flex: 20;
|
2020-07-09 17:24:28 +02:00
|
|
|
|
2021-06-15 17:25:33 +02:00
|
|
|
p.metadata {
|
|
|
|
margin-top: 16px;
|
|
|
|
display: flex;
|
|
|
|
justify-content: flex-start;
|
|
|
|
flex-wrap: wrap;
|
2020-10-01 15:07:15 +02:00
|
|
|
|
2021-06-15 17:25:33 +02:00
|
|
|
*:not(:first-child) {
|
|
|
|
padding-left: 5px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
p.buttons {
|
|
|
|
flex: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
h1.title {
|
|
|
|
margin: 0;
|
|
|
|
font-weight: 500;
|
|
|
|
font-size: 38px;
|
|
|
|
font-family: "Roboto", "Helvetica", "Arial", serif;
|
|
|
|
}
|
|
|
|
|
|
|
|
.authors {
|
|
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
|
|
|
|
&::after {
|
|
|
|
height: 0.2rem;
|
|
|
|
content: " ";
|
|
|
|
display: block;
|
|
|
|
background-color: $purple-1;
|
|
|
|
}
|
2020-07-09 17:24:28 +02:00
|
|
|
|
2021-06-15 17:25:33 +02:00
|
|
|
.buttons {
|
|
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
}
|
2020-07-09 17:24:28 +02:00
|
|
|
}
|
|
|
|
|
2021-06-15 17:25:33 +02:00
|
|
|
& > section {
|
|
|
|
margin: 0 2rem;
|
2020-07-09 17:24:28 +02:00
|
|
|
|
2021-06-15 17:25:33 +02:00
|
|
|
&.content {
|
|
|
|
font-size: 1.1rem;
|
2020-07-09 17:24:28 +02:00
|
|
|
}
|
2021-06-15 17:25:33 +02:00
|
|
|
|
|
|
|
&.tags {
|
|
|
|
padding-bottom: 5rem;
|
|
|
|
|
|
|
|
a {
|
|
|
|
text-decoration: none;
|
|
|
|
}
|
|
|
|
span {
|
|
|
|
&.tag {
|
|
|
|
margin: 0 2px;
|
|
|
|
}
|
2020-07-09 17:24:28 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
margin: 0 auto;
|
|
|
|
}
|
|
|
|
</style>
|