mobilizon.chapril.org-mobil.../js/src/views/Admin/AdminProfile.vue
Thomas Citharel 1984f71cbf
Add group admin profiles
And other fixes

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
2020-08-27 12:12:54 +02:00

316 lines
9.0 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>
<div class="actor-card">
<actor-card :actor="person" :full="true" :popover="false" :limit="false" />
</div>
<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"
>
<b-table-column field="beginsOn" :label="$t('Begins on')" v-slot="props">
{{ props.row.beginsOn | formatDateTimeString }}
</b-table-column>
<b-table-column field="title" :label="$t('Title')" v-slot="props">
<router-link :to="{ name: RouteName.EVENT, params: { uuid: props.row.uuid } }">
{{ props.row.title }}
</router-link>
</b-table-column>
<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"
>
<b-table-column field="beginsOn" :label="$t('Begins on')" v-slot="props">
{{ props.row.beginsOn | formatDateTimeString }}
</b-table-column>
<b-table-column field="title" :label="$t('Title')" v-slot="props">
<router-link :to="{ name: RouteName.EVENT, params: { uuid: props.row.uuid } }">
{{ props.row.title }}
</router-link>
</b-table-column>
<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";
import ActorCard from "../../components/Account/ActorCard.vue";
const EVENTS_PER_PAGE = 10;
@Component({
apollo: {
person: {
query: GET_PERSON,
fetchPolicy: "cache-and-network",
variables() {
return {
actorId: this.id,
organizedEventsPage: 1,
organizedEventsLimit: EVENTS_PER_PAGE,
};
},
skip() {
return !this.id;
},
},
},
components: {
ActorCard,
},
})
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;
}
.actor-card {
background: #fff;
padding: 1.5rem;
border-radius: 10px;
}
</style>