319 lines
9.2 KiB
Vue
319 lines
9.2 KiB
Vue
|
<template>
|
||
|
|
<div v-if="person" class="section">
|
||
|
|
<nav class="breadcrumb" aria-label="breadcrumbs">
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<router-link :to="{ name: RouteName.ADMIN }">{{ $t("Admin") }}</router-link>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<router-link
|
||
|
|
:to="{
|
||
|
|
name: RouteName.PROFILES,
|
||
|
|
}"
|
||
|
|
>{{ $t("Profiles") }}</router-link
|
||
|
|
>
|
||
|
|
</li>
|
||
|
|
<li class="is-active">
|
||
|
|
<router-link
|
||
|
|
:to="{
|
||
|
|
name: RouteName.PROFILES,
|
||
|
|
params: { id: person.id },
|
||
|
|
}"
|
||
|
|
>{{ person.name || person.preferredUsername }}</router-link
|
||
|
|
>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
<article class="media">
|
||
|
|
<figure class="media-left" v-if="person.avatar">
|
||
|
|
<p class="image is-48x48">
|
||
|
|
<img :src="person.avatar.url" alt="" />
|
||
|
|
</p>
|
||
|
|
</figure>
|
||
|
|
<div class="media-content">
|
||
|
|
<div class="content">
|
||
|
|
<strong v-if="person.name">{{ person.name }}</strong>
|
||
|
|
<small>@{{ usernameWithDomain(person) }}</small>
|
||
|
|
<p v-html="person.summary" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
<table v-if="metadata.length > 0" class="table is-fullwidth">
|
||
|
|
<tbody>
|
||
|
|
<tr v-for="{ key, value, link } in metadata" :key="key">
|
||
|
|
<td>{{ key }}</td>
|
||
|
|
<td v-if="link">
|
||
|
|
<router-link :to="link">
|
||
|
|
{{ value }}
|
||
|
|
</router-link>
|
||
|
|
</td>
|
||
|
|
<td v-else>{{ value }}</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
<div class="buttons">
|
||
|
|
<b-button
|
||
|
|
@click="suspendProfile"
|
||
|
|
v-if="person.domain && !person.suspended"
|
||
|
|
type="is-primary"
|
||
|
|
>{{ $t("Suspend") }}</b-button
|
||
|
|
>
|
||
|
|
<b-button
|
||
|
|
@click="unsuspendProfile"
|
||
|
|
v-if="person.domain && person.suspended"
|
||
|
|
type="is-primary"
|
||
|
|
>{{ $t("Unsuspend") }}</b-button
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<section>
|
||
|
|
<h2 class="subtitle">
|
||
|
|
{{
|
||
|
|
$tc("{number} organized events", person.organizedEvents.total, {
|
||
|
|
number: person.organizedEvents.total,
|
||
|
|
})
|
||
|
|
}}
|
||
|
|
</h2>
|
||
|
|
<b-table
|
||
|
|
:data="person.organizedEvents.elements"
|
||
|
|
:loading="$apollo.queries.person.loading"
|
||
|
|
paginated
|
||
|
|
backend-pagination
|
||
|
|
:total="person.organizedEvents.total"
|
||
|
|
:per-page="EVENTS_PER_PAGE"
|
||
|
|
@page-change="onOrganizedEventsPageChange"
|
||
|
|
>
|
||
|
|
<template slot-scope="props">
|
||
|
|
<b-table-column field="beginsOn" :label="$t('Begins on')">
|
||
|
|
{{ props.row.beginsOn | formatDateTimeString }}
|
||
|
|
</b-table-column>
|
||
|
|
<b-table-column field="title" :label="$t('Title')">
|
||
|
|
<router-link :to="{ name: RouteName.EVENT, params: { uuid: props.row.uuid } }">
|
||
|
|
{{ props.row.title }}
|
||
|
|
</router-link>
|
||
|
|
</b-table-column>
|
||
|
|
</template>
|
||
|
|
<template slot="empty">
|
||
|
|
<section class="section">
|
||
|
|
<div class="content has-text-grey has-text-centered">
|
||
|
|
<p>{{ $t("Nothing to see here") }}</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</template>
|
||
|
|
</b-table>
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<h2 class="subtitle">
|
||
|
|
{{
|
||
|
|
$tc("{number} participations", person.participations.total, {
|
||
|
|
number: person.participations.total,
|
||
|
|
})
|
||
|
|
}}
|
||
|
|
</h2>
|
||
|
|
<b-table
|
||
|
|
:data="person.participations.elements.map((participation) => participation.event)"
|
||
|
|
:loading="$apollo.queries.person.loading"
|
||
|
|
paginated
|
||
|
|
backend-pagination
|
||
|
|
:total="person.participations.total"
|
||
|
|
:per-page="EVENTS_PER_PAGE"
|
||
|
|
@page-change="onParticipationsPageChange"
|
||
|
|
>
|
||
|
|
<template slot-scope="props">
|
||
|
|
<b-table-column field="beginsOn" :label="$t('Begins on')">
|
||
|
|
{{ props.row.beginsOn | formatDateTimeString }}
|
||
|
|
</b-table-column>
|
||
|
|
<b-table-column field="title" :label="$t('Title')">
|
||
|
|
<router-link :to="{ name: RouteName.EVENT, params: { uuid: props.row.uuid } }">
|
||
|
|
{{ props.row.title }}
|
||
|
|
</router-link>
|
||
|
|
</b-table-column>
|
||
|
|
</template>
|
||
|
|
<template slot="empty">
|
||
|
|
<section class="section">
|
||
|
|
<div class="content has-text-grey has-text-centered">
|
||
|
|
<p>{{ $t("Nothing to see here") }}</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</template>
|
||
|
|
</b-table>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script lang="ts">
|
||
|
|
import { Component, Vue, Prop } from "vue-property-decorator";
|
||
|
|
import { GET_PERSON, SUSPEND_PROFILE, UNSUSPEND_PROFILE } from "../../graphql/actor";
|
||
|
|
import { IPerson } from "../../types/actor";
|
||
|
|
import { usernameWithDomain } from "../../types/actor/actor.model";
|
||
|
|
import RouteName from "../../router/name";
|
||
|
|
import { IEvent } from "../../types/event.model";
|
||
|
|
|
||
|
|
const EVENTS_PER_PAGE = 10;
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
apollo: {
|
||
|
|
person: {
|
||
|
|
query: GET_PERSON,
|
||
|
|
variables() {
|
||
|
|
return {
|
||
|
|
actorId: this.id,
|
||
|
|
organizedEventsPage: 1,
|
||
|
|
organizedEventsLimit: EVENTS_PER_PAGE,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
skip() {
|
||
|
|
return !this.id;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
})
|
||
|
|
export default class AdminProfile extends Vue {
|
||
|
|
@Prop({ required: true }) id!: String;
|
||
|
|
|
||
|
|
person!: IPerson;
|
||
|
|
|
||
|
|
usernameWithDomain = usernameWithDomain;
|
||
|
|
|
||
|
|
RouteName = RouteName;
|
||
|
|
|
||
|
|
EVENTS_PER_PAGE = EVENTS_PER_PAGE;
|
||
|
|
|
||
|
|
organizedEventsPage = 1;
|
||
|
|
participationsPage = 1;
|
||
|
|
|
||
|
|
get metadata(): Array<object> {
|
||
|
|
if (!this.person) return [];
|
||
|
|
const res: object[] = [
|
||
|
|
{
|
||
|
|
key: this.$t("Status") as string,
|
||
|
|
value: this.person.suspended ? this.$t("Suspended") : this.$t("Active"),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: this.$t("Domain") as string,
|
||
|
|
value: this.person.domain ? this.person.domain : this.$t("Local"),
|
||
|
|
},
|
||
|
|
];
|
||
|
|
if (!this.person.domain && this.person.user) {
|
||
|
|
res.push({
|
||
|
|
key: this.$t("User") as string,
|
||
|
|
link: { name: RouteName.ADMIN_USER_PROFILE, params: { id: this.person.user.id } },
|
||
|
|
value: this.person.user.email,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
return res;
|
||
|
|
}
|
||
|
|
|
||
|
|
async suspendProfile() {
|
||
|
|
this.$apollo.mutate<{ suspendProfile: { id: string } }>({
|
||
|
|
mutation: SUSPEND_PROFILE,
|
||
|
|
variables: {
|
||
|
|
id: this.id,
|
||
|
|
},
|
||
|
|
update: (store, { data }) => {
|
||
|
|
if (data == null) return;
|
||
|
|
const profileId = this.id;
|
||
|
|
|
||
|
|
const profileData = store.readQuery<{ person: IPerson }>({
|
||
|
|
query: GET_PERSON,
|
||
|
|
variables: {
|
||
|
|
actorId: profileId,
|
||
|
|
organizedEventsPage: 1,
|
||
|
|
organizedEventsLimit: EVENTS_PER_PAGE,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
if (!profileData) return;
|
||
|
|
const { person } = profileData;
|
||
|
|
person.suspended = true;
|
||
|
|
person.avatar = null;
|
||
|
|
person.name = "";
|
||
|
|
person.summary = "";
|
||
|
|
store.writeQuery({
|
||
|
|
query: GET_PERSON,
|
||
|
|
variables: {
|
||
|
|
actorId: profileId,
|
||
|
|
},
|
||
|
|
data: { person },
|
||
|
|
});
|
||
|
|
},
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
async unsuspendProfile() {
|
||
|
|
const profileID = this.id;
|
||
|
|
this.$apollo.mutate<{ unsuspendProfile: { id: string } }>({
|
||
|
|
mutation: UNSUSPEND_PROFILE,
|
||
|
|
variables: {
|
||
|
|
id: this.id,
|
||
|
|
},
|
||
|
|
refetchQueries: [
|
||
|
|
{
|
||
|
|
query: GET_PERSON,
|
||
|
|
variables: {
|
||
|
|
actorId: profileID,
|
||
|
|
organizedEventsPage: 1,
|
||
|
|
organizedEventsLimit: EVENTS_PER_PAGE,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
async onOrganizedEventsPageChange(page: number) {
|
||
|
|
this.organizedEventsPage = page;
|
||
|
|
await this.$apollo.queries.person.fetchMore({
|
||
|
|
variables: {
|
||
|
|
actorId: this.id,
|
||
|
|
organizedEventsPage: this.organizedEventsPage,
|
||
|
|
organizedEventsLimit: EVENTS_PER_PAGE,
|
||
|
|
},
|
||
|
|
updateQuery: (previousResult, { fetchMoreResult }) => {
|
||
|
|
if (!fetchMoreResult) return previousResult;
|
||
|
|
const newOrganizedEvents = fetchMoreResult.person.organizedEvents.elements;
|
||
|
|
return {
|
||
|
|
person: {
|
||
|
|
...previousResult.person,
|
||
|
|
organizedEvents: {
|
||
|
|
__typename: previousResult.person.organizedEvents.__typename,
|
||
|
|
total: previousResult.person.organizedEvents.total,
|
||
|
|
elements: [...previousResult.person.organizedEvents.elements, ...newOrganizedEvents],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
async onParticipationsPageChange(page: number) {
|
||
|
|
this.participationsPage = page;
|
||
|
|
await this.$apollo.queries.person.fetchMore({
|
||
|
|
variables: {
|
||
|
|
actorId: this.id,
|
||
|
|
participationPage: this.participationsPage,
|
||
|
|
participationLimit: EVENTS_PER_PAGE,
|
||
|
|
},
|
||
|
|
updateQuery: (previousResult, { fetchMoreResult }) => {
|
||
|
|
if (!fetchMoreResult) return previousResult;
|
||
|
|
const newParticipations = fetchMoreResult.person.participations.elements;
|
||
|
|
return {
|
||
|
|
person: {
|
||
|
|
...previousResult.person,
|
||
|
|
participations: {
|
||
|
|
__typename: previousResult.person.participations.__typename,
|
||
|
|
total: previousResult.person.participations.total,
|
||
|
|
elements: [...previousResult.person.participations.elements, ...newParticipations],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
table,
|
||
|
|
section {
|
||
|
|
margin: 2rem 0;
|
||
|
|
}
|
||
|
|
</style>
|