Migrate to Vue 3 and Vite
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
@@ -2,10 +2,10 @@
|
||||
<div v-if="group" class="section">
|
||||
<breadcrumbs-nav
|
||||
:links="[
|
||||
{ name: RouteName.ADMIN, text: $t('Admin') },
|
||||
{ name: RouteName.ADMIN, text: t('Admin') },
|
||||
{
|
||||
name: RouteName.ADMIN_GROUPS,
|
||||
text: $t('Groups'),
|
||||
text: t('Groups'),
|
||||
},
|
||||
{
|
||||
name: RouteName.PROFILES,
|
||||
@@ -39,7 +39,7 @@
|
||||
/>
|
||||
</router-link>
|
||||
</div>
|
||||
<table v-if="metadata.length > 0" class="table is-fullwidth">
|
||||
<table v-if="metadata.length > 0" class="table w-full">
|
||||
<tbody>
|
||||
<tr v-for="{ key, value, link } in metadata" :key="key">
|
||||
<td>{{ key }}</td>
|
||||
@@ -52,52 +52,64 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="buttons">
|
||||
<b-button
|
||||
<div class="flex gap-1">
|
||||
<o-button
|
||||
@click="confirmSuspendProfile"
|
||||
v-if="!group.suspended"
|
||||
type="is-primary"
|
||||
>{{ $t("Suspend") }}</b-button
|
||||
variant="primary"
|
||||
>{{ t("Suspend") }}</o-button
|
||||
>
|
||||
<b-button
|
||||
@click="unsuspendProfile"
|
||||
<o-button
|
||||
@click="
|
||||
unsuspendProfile({
|
||||
id,
|
||||
})
|
||||
"
|
||||
v-if="group.suspended"
|
||||
type="is-primary"
|
||||
>{{ $t("Unsuspend") }}</b-button
|
||||
variant="primary"
|
||||
>{{ t("Unsuspend") }}</o-button
|
||||
>
|
||||
<b-button
|
||||
@click="refreshProfile"
|
||||
<o-button
|
||||
@click="
|
||||
refreshProfile({
|
||||
actorId: id,
|
||||
})
|
||||
"
|
||||
v-if="group.domain"
|
||||
type="is-primary"
|
||||
variant="primary"
|
||||
outlined
|
||||
>{{ $t("Refresh profile") }}</b-button
|
||||
>{{ t("Refresh profile") }}</o-button
|
||||
>
|
||||
</div>
|
||||
<section>
|
||||
<h2 class="subtitle">
|
||||
<h2>
|
||||
{{
|
||||
$tc("{number} members", group.members.total, {
|
||||
number: group.members.total,
|
||||
})
|
||||
t(
|
||||
"{number} members",
|
||||
{
|
||||
number: group.members.total,
|
||||
},
|
||||
group.members.total
|
||||
)
|
||||
}}
|
||||
</h2>
|
||||
<b-table
|
||||
<o-table
|
||||
:data="group.members.elements"
|
||||
:loading="$apollo.queries.group.loading"
|
||||
:loading="loading"
|
||||
paginated
|
||||
backend-pagination
|
||||
:current-page.sync="membersPage"
|
||||
:aria-next-label="$t('Next page')"
|
||||
:aria-previous-label="$t('Previous page')"
|
||||
:aria-page-label="$t('Page')"
|
||||
:aria-current-label="$t('Current page')"
|
||||
v-model:current-page="membersPage"
|
||||
:aria-next-label="t('Next page')"
|
||||
:aria-previous-label="t('Previous page')"
|
||||
:aria-page-label="t('Page')"
|
||||
:aria-current-label="t('Current page')"
|
||||
:total="group.members.total"
|
||||
:per-page="MEMBERS_PER_PAGE"
|
||||
@page-change="onMembersPageChange"
|
||||
>
|
||||
<b-table-column
|
||||
<o-table-column
|
||||
field="actor.preferredUsername"
|
||||
:label="$t('Member')"
|
||||
:label="t('Member')"
|
||||
v-slot="props"
|
||||
>
|
||||
<article class="media">
|
||||
@@ -111,14 +123,14 @@
|
||||
alt=""
|
||||
/>
|
||||
</figure>
|
||||
<b-icon
|
||||
<o-icon
|
||||
class="media-left"
|
||||
v-else
|
||||
size="is-large"
|
||||
size="large"
|
||||
icon="account-circle"
|
||||
/>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<div class="prose dark:prose-invert">
|
||||
<span v-if="props.row.actor.name">{{
|
||||
props.row.actor.name
|
||||
}}</span
|
||||
@@ -132,163 +144,166 @@
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</b-table-column>
|
||||
<b-table-column field="role" :label="$t('Role')" v-slot="props">
|
||||
</o-table-column>
|
||||
<o-table-column field="role" :label="t('Role')" v-slot="props">
|
||||
<b-tag
|
||||
type="is-primary"
|
||||
variant="primary"
|
||||
v-if="props.row.role === MemberRole.ADMINISTRATOR"
|
||||
>
|
||||
{{ $t("Administrator") }}
|
||||
{{ t("Administrator") }}
|
||||
</b-tag>
|
||||
<b-tag
|
||||
type="is-primary"
|
||||
variant="primary"
|
||||
v-else-if="props.row.role === MemberRole.MODERATOR"
|
||||
>
|
||||
{{ $t("Moderator") }}
|
||||
{{ t("Moderator") }}
|
||||
</b-tag>
|
||||
<b-tag v-else-if="props.row.role === MemberRole.MEMBER">
|
||||
{{ $t("Member") }}
|
||||
{{ t("Member") }}
|
||||
</b-tag>
|
||||
<b-tag
|
||||
type="is-warning"
|
||||
variant="warning"
|
||||
v-else-if="props.row.role === MemberRole.NOT_APPROVED"
|
||||
>
|
||||
{{ $t("Not approved") }}
|
||||
{{ t("Not approved") }}
|
||||
</b-tag>
|
||||
<b-tag
|
||||
type="is-danger"
|
||||
variant="danger"
|
||||
v-else-if="props.row.role === MemberRole.REJECTED"
|
||||
>
|
||||
{{ $t("Rejected") }}
|
||||
{{ t("Rejected") }}
|
||||
</b-tag>
|
||||
<b-tag
|
||||
type="is-danger"
|
||||
variant="danger"
|
||||
v-else-if="props.row.role === MemberRole.INVITED"
|
||||
>
|
||||
{{ $t("Invited") }}
|
||||
{{ t("Invited") }}
|
||||
</b-tag>
|
||||
</b-table-column>
|
||||
<b-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
|
||||
</o-table-column>
|
||||
<o-table-column field="insertedAt" :label="t('Date')" v-slot="props">
|
||||
<span class="has-text-centered">
|
||||
{{ props.row.insertedAt | formatDateString }}<br />{{
|
||||
props.row.insertedAt | formatTimeString
|
||||
{{ formatDateString(props.row.insertedAt) }}<br />{{
|
||||
formatTimeString(props.row.insertedAt)
|
||||
}}
|
||||
</span>
|
||||
</b-table-column>
|
||||
<template slot="empty">
|
||||
</o-table-column>
|
||||
<template #empty>
|
||||
<empty-content icon="account-group" :inline="true">
|
||||
{{ $t("No members found") }}
|
||||
{{ t("No members found") }}
|
||||
</empty-content>
|
||||
</template>
|
||||
</b-table>
|
||||
</o-table>
|
||||
</section>
|
||||
<section>
|
||||
<h2 class="subtitle">
|
||||
<h2>
|
||||
{{
|
||||
$tc("{number} organized events", group.organizedEvents.total, {
|
||||
number: group.organizedEvents.total,
|
||||
})
|
||||
t(
|
||||
"{number} organized events",
|
||||
{
|
||||
number: group.organizedEvents.total,
|
||||
},
|
||||
group.organizedEvents.total
|
||||
)
|
||||
}}
|
||||
</h2>
|
||||
<b-table
|
||||
<o-table
|
||||
:data="group.organizedEvents.elements"
|
||||
:loading="$apollo.queries.group.loading"
|
||||
:loading="loading"
|
||||
paginated
|
||||
backend-pagination
|
||||
:current-page.sync="organizedEventsPage"
|
||||
:aria-next-label="$t('Next page')"
|
||||
:aria-previous-label="$t('Previous page')"
|
||||
:aria-page-label="$t('Page')"
|
||||
:aria-current-label="$t('Current page')"
|
||||
v-model:current-page="organizedEventsPage"
|
||||
:aria-next-label="t('Next page')"
|
||||
:aria-previous-label="t('Previous page')"
|
||||
:aria-page-label="t('Page')"
|
||||
:aria-current-label="t('Current page')"
|
||||
:total="group.organizedEvents.total"
|
||||
:per-page="EVENTS_PER_PAGE"
|
||||
@page-change="onOrganizedEventsPageChange"
|
||||
>
|
||||
<b-table-column field="title" :label="$t('Title')" v-slot="props">
|
||||
<o-table-column field="title" :label="t('Title')" v-slot="props">
|
||||
<router-link
|
||||
:to="{ name: RouteName.EVENT, params: { uuid: props.row.uuid } }"
|
||||
>
|
||||
{{ props.row.title }}
|
||||
<b-tag type="is-info" v-if="props.row.draft">{{
|
||||
$t("Draft")
|
||||
<b-tag variant="info" v-if="props.row.draft">{{
|
||||
t("Draft")
|
||||
}}</b-tag>
|
||||
</router-link>
|
||||
</b-table-column>
|
||||
<b-table-column
|
||||
field="beginsOn"
|
||||
:label="$t('Begins on')"
|
||||
v-slot="props"
|
||||
>
|
||||
{{ props.row.beginsOn | formatDateTimeString }}
|
||||
</b-table-column>
|
||||
<template slot="empty">
|
||||
</o-table-column>
|
||||
<o-table-column field="beginsOn" :label="t('Begins on')" v-slot="props">
|
||||
{{ formatDateTimeString(props.row.beginsOn) }}
|
||||
</o-table-column>
|
||||
<template #empty>
|
||||
<empty-content icon="account-group" :inline="true">
|
||||
{{ $t("No organized events found") }}
|
||||
{{ t("No organized events found") }}
|
||||
</empty-content>
|
||||
</template>
|
||||
</b-table>
|
||||
</o-table>
|
||||
</section>
|
||||
<section>
|
||||
<h2 class="subtitle">
|
||||
<h2>
|
||||
{{
|
||||
$tc("{number} posts", group.posts.total, {
|
||||
number: group.posts.total,
|
||||
})
|
||||
t(
|
||||
"{number} posts",
|
||||
{
|
||||
number: group.posts.total,
|
||||
},
|
||||
group.posts.total
|
||||
)
|
||||
}}
|
||||
</h2>
|
||||
<b-table
|
||||
<o-table
|
||||
:data="group.posts.elements"
|
||||
:loading="$apollo.queries.group.loading"
|
||||
:loading="loading"
|
||||
paginated
|
||||
backend-pagination
|
||||
:current-page.sync="postsPage"
|
||||
:aria-next-label="$t('Next page')"
|
||||
:aria-previous-label="$t('Previous page')"
|
||||
:aria-page-label="$t('Page')"
|
||||
:aria-current-label="$t('Current page')"
|
||||
v-model:current-page="postsPage"
|
||||
:aria-next-label="t('Next page')"
|
||||
:aria-previous-label="t('Previous page')"
|
||||
:aria-page-label="t('Page')"
|
||||
:aria-current-label="t('Current page')"
|
||||
:total="group.posts.total"
|
||||
:per-page="POSTS_PER_PAGE"
|
||||
@page-change="onPostsPageChange"
|
||||
>
|
||||
<b-table-column field="title" :label="$t('Title')" v-slot="props">
|
||||
<o-table-column field="title" :label="t('Title')" v-slot="props">
|
||||
<router-link
|
||||
:to="{ name: RouteName.POST, params: { slug: props.row.slug } }"
|
||||
>
|
||||
{{ props.row.title }}
|
||||
<b-tag type="is-info" v-if="props.row.draft">{{
|
||||
$t("Draft")
|
||||
<b-tag variant="info" v-if="props.row.draft">{{
|
||||
t("Draft")
|
||||
}}</b-tag>
|
||||
</router-link>
|
||||
</b-table-column>
|
||||
<b-table-column
|
||||
</o-table-column>
|
||||
<o-table-column
|
||||
field="publishAt"
|
||||
:label="$t('Publication date')"
|
||||
:label="t('Publication date')"
|
||||
v-slot="props"
|
||||
>
|
||||
{{ props.row.publishAt | formatDateTimeString }}
|
||||
</b-table-column>
|
||||
<template slot="empty">
|
||||
{{ formatDateTimeString(props.row.publishAt) }}
|
||||
</o-table-column>
|
||||
<template #empty>
|
||||
<empty-content icon="bullhorn" :inline="true">
|
||||
{{ $t("No posts found") }}
|
||||
{{ t("No posts found") }}
|
||||
</empty-content>
|
||||
</template>
|
||||
</b-table>
|
||||
</o-table>
|
||||
</section>
|
||||
</div>
|
||||
<empty-content v-else-if="!$apollo.loading" icon="account-multiple">
|
||||
{{ $t("This group was not found") }}
|
||||
<empty-content v-else-if="!loading" icon="account-multiple">
|
||||
{{ t("This group was not found") }}
|
||||
<template #desc>
|
||||
<b-button
|
||||
<o-button
|
||||
type="is-text"
|
||||
tag="router-link"
|
||||
:to="{ name: RouteName.ADMIN_GROUPS }"
|
||||
>{{ $t("Back to group list") }}</b-button
|
||||
>{{ t("Back to group list") }}</o-button
|
||||
>
|
||||
</template>
|
||||
</empty-content>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Prop } from "vue-property-decorator";
|
||||
<script lang="ts" setup>
|
||||
import { GET_GROUP, REFRESH_PROFILE } from "@/graphql/group";
|
||||
import { formatBytes } from "@/utils/datetime";
|
||||
import { MemberRole } from "@/types/enums";
|
||||
@@ -303,273 +318,216 @@ import RouteName from "../../router/name";
|
||||
import ActorCard from "../../components/Account/ActorCard.vue";
|
||||
import EmptyContent from "../../components/Utils/EmptyContent.vue";
|
||||
import { ApolloCache, FetchResult } from "@apollo/client/core";
|
||||
import VueRouter from "vue-router";
|
||||
const { isNavigationFailure, NavigationFailureType } = VueRouter;
|
||||
import { useMutation, useQuery } from "@vue/apollo-composable";
|
||||
import { computed, inject } from "vue";
|
||||
import { useHead } from "@vueuse/head";
|
||||
import { integerTransformer, useRouteQuery } from "vue-use-route-query";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import {
|
||||
formatTimeString,
|
||||
formatDateString,
|
||||
formatDateTimeString,
|
||||
} from "@/filters/datetime";
|
||||
import { Dialog } from "@/plugins/dialog";
|
||||
import { Notifier } from "@/plugins/notifier";
|
||||
|
||||
const EVENTS_PER_PAGE = 10;
|
||||
const POSTS_PER_PAGE = 10;
|
||||
const MEMBERS_PER_PAGE = 10;
|
||||
|
||||
@Component({
|
||||
apollo: {
|
||||
group: {
|
||||
query: GET_GROUP,
|
||||
fetchPolicy: "cache-and-network",
|
||||
variables() {
|
||||
return {
|
||||
id: this.id,
|
||||
organizedEventsPage: this.organizedEventsPage,
|
||||
organizedEventsLimit: EVENTS_PER_PAGE,
|
||||
postsPage: this.postsPage,
|
||||
postsLimit: POSTS_PER_PAGE,
|
||||
membersLimit: MEMBERS_PER_PAGE,
|
||||
membersPage: this.membersPage,
|
||||
};
|
||||
},
|
||||
skip() {
|
||||
return !this.id;
|
||||
},
|
||||
update: (data) => data.getGroup,
|
||||
const props = defineProps<{ id: string }>();
|
||||
|
||||
const organizedEventsPage = useRouteQuery(
|
||||
"organizedEventsPage",
|
||||
1,
|
||||
integerTransformer
|
||||
);
|
||||
const membersPage = useRouteQuery("membersPage", 1, integerTransformer);
|
||||
const postsPage = useRouteQuery("postsPage", 1, integerTransformer);
|
||||
|
||||
const {
|
||||
result: groupResult,
|
||||
loading,
|
||||
fetchMore,
|
||||
} = useQuery(
|
||||
GET_GROUP,
|
||||
() => ({
|
||||
id: props.id,
|
||||
organizedEventsPage: organizedEventsPage.value,
|
||||
organizedEventsLimit: EVENTS_PER_PAGE,
|
||||
postsPage: postsPage.value,
|
||||
postsLimit: POSTS_PER_PAGE,
|
||||
membersLimit: MEMBERS_PER_PAGE,
|
||||
membersPage: membersPage.value,
|
||||
}),
|
||||
() => ({
|
||||
enabled: props.id !== undefined,
|
||||
})
|
||||
);
|
||||
|
||||
const group = computed(() => groupResult.value?.getGroup);
|
||||
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
|
||||
useHead({
|
||||
title: computed(() => displayName(group.value)),
|
||||
});
|
||||
|
||||
const metadata = computed((): Array<Record<string, string>> => {
|
||||
if (!group.value) return [];
|
||||
const res: Record<string, string>[] = [
|
||||
{
|
||||
key: t("Status") as string,
|
||||
value: (group.value.suspended ? t("Suspended") : t("Active")) as string,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
ActorCard,
|
||||
EmptyContent,
|
||||
},
|
||||
metaInfo() {
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
const { group } = this;
|
||||
return {
|
||||
title: group ? group.name || usernameWithDomain(group) : "",
|
||||
};
|
||||
},
|
||||
})
|
||||
export default class AdminGroupProfile extends Vue {
|
||||
@Prop({ required: true }) id!: string;
|
||||
{
|
||||
key: t("Domain") as string,
|
||||
value: (group.value.domain ? group.value.domain : t("Local")) as string,
|
||||
},
|
||||
{
|
||||
key: t("Uploaded media size") as string,
|
||||
value: formatBytes(group.value.mediaSize),
|
||||
},
|
||||
];
|
||||
return res;
|
||||
});
|
||||
|
||||
group!: IGroup;
|
||||
const dialog = inject<Dialog>("dialog");
|
||||
const notifier = inject<Notifier>("notifier");
|
||||
|
||||
usernameWithDomain = usernameWithDomain;
|
||||
const confirmSuspendProfile = (): void => {
|
||||
const message = (
|
||||
group.value.domain
|
||||
? t(
|
||||
"Are you sure you want to <b>suspend</b> this group? As this group originates from instance {instance}, this will only remove local members and delete the local data, as well as rejecting all the future data.",
|
||||
{ instance: group.value.domain }
|
||||
)
|
||||
: t(
|
||||
"Are you sure you want to <b>suspend</b> this group? All members - including remote ones - will be notified and removed from the group, and <b>all of the group data (events, posts, discussions, todos…) will be irretrievably destroyed</b>."
|
||||
)
|
||||
) as string;
|
||||
|
||||
displayName = displayName;
|
||||
dialog?.confirm({
|
||||
title: t("Suspend group") as string,
|
||||
message,
|
||||
confirmText: t("Suspend group") as string,
|
||||
cancelText: t("Cancel") as string,
|
||||
type: "danger",
|
||||
hasIcon: true,
|
||||
onConfirm: () =>
|
||||
suspendProfile({
|
||||
id: props.id,
|
||||
}),
|
||||
});
|
||||
};
|
||||
|
||||
RouteName = RouteName;
|
||||
const { mutate: suspendProfile, onError: onSuspendProfileError } = useMutation<{
|
||||
suspendProfile: { id: string };
|
||||
}>(SUSPEND_PROFILE, () => ({
|
||||
update: (
|
||||
store: ApolloCache<{ suspendProfile: { id: string } }>,
|
||||
{ data }: FetchResult
|
||||
) => {
|
||||
if (data == null) return;
|
||||
const profileId = props.id;
|
||||
|
||||
EVENTS_PER_PAGE = EVENTS_PER_PAGE;
|
||||
|
||||
POSTS_PER_PAGE = POSTS_PER_PAGE;
|
||||
|
||||
MEMBERS_PER_PAGE = MEMBERS_PER_PAGE;
|
||||
|
||||
MemberRole = MemberRole;
|
||||
|
||||
get organizedEventsPage(): number {
|
||||
return parseInt(
|
||||
(this.$route.query.organizedEventsPage as string) || "1",
|
||||
10
|
||||
);
|
||||
}
|
||||
|
||||
set organizedEventsPage(page: number) {
|
||||
this.pushRouter({ organizedEventsPage: page.toString() });
|
||||
}
|
||||
|
||||
get membersPage(): number {
|
||||
return parseInt((this.$route.query.membersPage as string) || "1", 10);
|
||||
}
|
||||
|
||||
set membersPage(page: number) {
|
||||
this.pushRouter({ membersPage: page.toString() });
|
||||
}
|
||||
|
||||
get postsPage(): number {
|
||||
return parseInt((this.$route.query.postsPage as string) || "1", 10);
|
||||
}
|
||||
|
||||
set postsPage(page: number) {
|
||||
this.pushRouter({ postsPage: page.toString() });
|
||||
}
|
||||
|
||||
get metadata(): Array<Record<string, string>> {
|
||||
if (!this.group) return [];
|
||||
const res: Record<string, string>[] = [
|
||||
{
|
||||
key: this.$t("Status") as string,
|
||||
value: (this.group.suspended
|
||||
? this.$t("Suspended")
|
||||
: this.$t("Active")) as string,
|
||||
},
|
||||
{
|
||||
key: this.$t("Domain") as string,
|
||||
value: (this.group.domain
|
||||
? this.group.domain
|
||||
: this.$t("Local")) as string,
|
||||
},
|
||||
{
|
||||
key: this.$i18n.t("Uploaded media size") as string,
|
||||
value: formatBytes(this.group.mediaSize),
|
||||
},
|
||||
];
|
||||
return res;
|
||||
}
|
||||
|
||||
confirmSuspendProfile(): void {
|
||||
const message = (
|
||||
this.group.domain
|
||||
? this.$t(
|
||||
"Are you sure you want to <b>suspend</b> this group? As this group originates from instance {instance}, this will only remove local members and delete the local data, as well as rejecting all the future data.",
|
||||
{ instance: this.group.domain }
|
||||
)
|
||||
: this.$t(
|
||||
"Are you sure you want to <b>suspend</b> this group? All members - including remote ones - will be notified and removed from the group, and <b>all of the group data (events, posts, discussions, todos…) will be irretrievably destroyed</b>."
|
||||
)
|
||||
) as string;
|
||||
|
||||
this.$buefy.dialog.confirm({
|
||||
title: this.$t("Suspend group") as string,
|
||||
message,
|
||||
confirmText: this.$t("Suspend group") as string,
|
||||
cancelText: this.$t("Cancel") as string,
|
||||
type: "is-danger",
|
||||
hasIcon: true,
|
||||
onConfirm: () => this.suspendProfile(),
|
||||
});
|
||||
}
|
||||
|
||||
async suspendProfile(): Promise<void> {
|
||||
try {
|
||||
await this.$apollo.mutate<{ suspendProfile: { id: string } }>({
|
||||
mutation: SUSPEND_PROFILE,
|
||||
variables: {
|
||||
id: this.id,
|
||||
},
|
||||
update: (
|
||||
store: ApolloCache<{ suspendProfile: { id: string } }>,
|
||||
{ data }: FetchResult
|
||||
) => {
|
||||
if (data == null) return;
|
||||
const profileId = this.id;
|
||||
|
||||
const profileData = store.readQuery<{ getGroup: IGroup }>({
|
||||
query: GET_GROUP,
|
||||
variables: {
|
||||
id: profileId,
|
||||
organizedEventsPage: this.organizedEventsPage,
|
||||
organizedEventsLimit: EVENTS_PER_PAGE,
|
||||
postsPage: this.postsPage,
|
||||
postsLimit: POSTS_PER_PAGE,
|
||||
},
|
||||
});
|
||||
|
||||
if (!profileData) return;
|
||||
store.writeQuery({
|
||||
query: GET_GROUP,
|
||||
variables: {
|
||||
id: profileId,
|
||||
},
|
||||
data: {
|
||||
getGroup: {
|
||||
...profileData.getGroup,
|
||||
suspended: true,
|
||||
avatar: null,
|
||||
name: "",
|
||||
summary: "",
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
this.$notifier.error(this.$t("Error while suspending group") as string);
|
||||
}
|
||||
}
|
||||
|
||||
async unsuspendProfile(): Promise<void> {
|
||||
try {
|
||||
const profileID = this.id;
|
||||
await this.$apollo.mutate<{ unsuspendProfile: { id: string } }>({
|
||||
mutation: UNSUSPEND_PROFILE,
|
||||
variables: {
|
||||
id: this.id,
|
||||
},
|
||||
refetchQueries: [
|
||||
{
|
||||
query: GET_GROUP,
|
||||
variables: {
|
||||
id: profileID,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
this.$notifier.error(this.$t("Error while suspending group") as string);
|
||||
}
|
||||
}
|
||||
|
||||
async refreshProfile(): Promise<void> {
|
||||
try {
|
||||
this.$apollo.mutate<{ refreshProfile: IActor }>({
|
||||
mutation: REFRESH_PROFILE,
|
||||
variables: {
|
||||
actorId: this.id,
|
||||
},
|
||||
});
|
||||
this.$notifier.success(
|
||||
this.$t("Triggered profile refreshment") as string
|
||||
);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
this.$notifier.error(this.$t("Error while suspending group") as string);
|
||||
}
|
||||
}
|
||||
|
||||
async onOrganizedEventsPageChange(page: number): Promise<void> {
|
||||
this.organizedEventsPage = page;
|
||||
await this.$apollo.queries.group.fetchMore({
|
||||
const profileData = store.readQuery<{ getGroup: IGroup }>({
|
||||
query: GET_GROUP,
|
||||
variables: {
|
||||
actorId: this.id,
|
||||
organizedEventsPage: this.organizedEventsPage,
|
||||
id: profileId,
|
||||
organizedEventsPage: organizedEventsPage.value,
|
||||
organizedEventsLimit: EVENTS_PER_PAGE,
|
||||
postsPage: postsPage.value,
|
||||
postsLimit: POSTS_PER_PAGE,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
async onMembersPageChange(page: number): Promise<void> {
|
||||
this.membersPage = page;
|
||||
await this.$apollo.queries.group.fetchMore({
|
||||
if (!profileData) return;
|
||||
store.writeQuery({
|
||||
query: GET_GROUP,
|
||||
variables: {
|
||||
actorId: this.id,
|
||||
memberPage: this.membersPage,
|
||||
memberLimit: EVENTS_PER_PAGE,
|
||||
id: profileId,
|
||||
},
|
||||
data: {
|
||||
getGroup: {
|
||||
...profileData.getGroup,
|
||||
suspended: true,
|
||||
avatar: null,
|
||||
name: "",
|
||||
summary: "",
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
}));
|
||||
|
||||
async onPostsPageChange(page: number): Promise<void> {
|
||||
this.postsPage = page;
|
||||
await this.$apollo.queries.group.fetchMore({
|
||||
variables: {
|
||||
actorId: this.id,
|
||||
postsPage: this.postsPage,
|
||||
postLimit: POSTS_PER_PAGE,
|
||||
onSuspendProfileError((e) => {
|
||||
console.error(e);
|
||||
notifier?.error(t("Error while suspending group"));
|
||||
});
|
||||
|
||||
const { mutate: unsuspendProfile, onError: onUnsuspendProfileError } =
|
||||
useMutation(UNSUSPEND_PROFILE, () => ({
|
||||
refetchQueries: [
|
||||
{
|
||||
query: GET_GROUP,
|
||||
variables: {
|
||||
id: props.id,
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
],
|
||||
}));
|
||||
|
||||
private async pushRouter(args: Record<string, string>): Promise<void> {
|
||||
try {
|
||||
await this.$router.push({
|
||||
name: RouteName.ADMIN_GROUP_PROFILE,
|
||||
query: { ...this.$route.query, ...args },
|
||||
});
|
||||
} catch (e) {
|
||||
if (isNavigationFailure(e, NavigationFailureType.redirected)) {
|
||||
throw Error(e.toString());
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
onUnsuspendProfileError((e) => {
|
||||
console.error(e);
|
||||
notifier?.error(t("Error while suspending group"));
|
||||
});
|
||||
|
||||
const {
|
||||
mutate: refreshProfile,
|
||||
onDone: onRefreshProfileDone,
|
||||
onError: onRefreshProfileError,
|
||||
} = useMutation<{ refreshProfile: IActor }>(REFRESH_PROFILE);
|
||||
|
||||
onRefreshProfileDone(() => {
|
||||
notifier?.success(t("Triggered profile refreshment"));
|
||||
});
|
||||
|
||||
onRefreshProfileError((e) => {
|
||||
console.error(e);
|
||||
notifier?.error(t("Error while suspending group"));
|
||||
});
|
||||
|
||||
const onOrganizedEventsPageChange = async (page: number): Promise<void> => {
|
||||
organizedEventsPage.value = page;
|
||||
await fetchMore({
|
||||
variables: {
|
||||
id: props.id,
|
||||
organizedEventsPage: organizedEventsPage.value,
|
||||
organizedEventsLimit: EVENTS_PER_PAGE,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const onMembersPageChange = async (page: number): Promise<void> => {
|
||||
membersPage.value = page;
|
||||
await fetchMore({
|
||||
variables: {
|
||||
id: props.id,
|
||||
membersPage: membersPage.value,
|
||||
membersLimit: EVENTS_PER_PAGE,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const onPostsPageChange = async (page: number): Promise<void> => {
|
||||
postsPage.value = page;
|
||||
await fetchMore({
|
||||
variables: {
|
||||
id: props.id,
|
||||
postsPage: postsPage.value,
|
||||
postsLimit: POSTS_PER_PAGE,
|
||||
},
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user