2020-02-18 08:57:00 +01:00
|
|
|
<template>
|
2020-06-25 11:36:35 +02:00
|
|
|
<div>
|
2022-01-10 15:19:16 +01:00
|
|
|
<breadcrumbs-nav
|
|
|
|
v-if="group"
|
|
|
|
:links="[
|
|
|
|
{
|
|
|
|
name: RouteName.GROUP,
|
|
|
|
params: { preferredUsername: usernameWithDomain(group) },
|
|
|
|
text: displayName(group),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: RouteName.GROUP_SETTINGS,
|
|
|
|
params: { preferredUsername: usernameWithDomain(group) },
|
2022-07-12 10:55:28 +02:00
|
|
|
text: t('Settings'),
|
2022-01-10 15:19:16 +01:00
|
|
|
},
|
|
|
|
{
|
|
|
|
name: RouteName.GROUP_MEMBERS_SETTINGS,
|
|
|
|
params: { preferredUsername: usernameWithDomain(group) },
|
2022-07-12 10:55:28 +02:00
|
|
|
text: t('Members'),
|
2022-01-10 15:19:16 +01:00
|
|
|
},
|
|
|
|
]"
|
|
|
|
/>
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-loading :active="groupMembersLoading" />
|
2020-11-30 10:24:11 +01:00
|
|
|
<section
|
2022-07-12 10:55:28 +02:00
|
|
|
class="container mx-auto section"
|
2020-11-30 10:24:11 +01:00
|
|
|
v-if="group && isCurrentActorAGroupAdmin"
|
|
|
|
>
|
2022-08-26 16:08:58 +02:00
|
|
|
<h1>{{ t("Group Members") }} ({{ group.members.total }})</h1>
|
2020-06-25 11:36:35 +02:00
|
|
|
<form @submit.prevent="inviteMember">
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-field
|
|
|
|
:label="t('Invite a new member')"
|
2020-11-30 10:24:11 +01:00
|
|
|
custom-class="add-relay"
|
2021-09-07 17:52:34 +02:00
|
|
|
label-for="new-member-field"
|
2020-11-30 10:24:11 +01:00
|
|
|
horizontal
|
|
|
|
>
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-field
|
2020-10-02 10:46:58 +02:00
|
|
|
grouped
|
|
|
|
expanded
|
2022-07-12 10:55:28 +02:00
|
|
|
size="large"
|
2020-10-02 10:46:58 +02:00
|
|
|
:type="inviteError ? 'is-danger' : null"
|
|
|
|
:message="inviteError"
|
|
|
|
>
|
2020-06-25 11:36:35 +02:00
|
|
|
<p class="control">
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-input
|
2021-09-07 17:52:34 +02:00
|
|
|
id="new-member-field"
|
2020-11-30 10:24:11 +01:00
|
|
|
v-model="newMemberUsername"
|
2022-07-12 10:55:28 +02:00
|
|
|
:placeholder="t(`Ex: someone{'@'}mobilizon.org`)"
|
2020-11-30 10:24:11 +01:00
|
|
|
/>
|
2020-06-25 11:36:35 +02:00
|
|
|
</p>
|
|
|
|
<p class="control">
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-button variant="primary" native-type="submit">{{
|
|
|
|
t("Invite member")
|
|
|
|
}}</o-button>
|
2020-06-25 11:36:35 +02:00
|
|
|
</p>
|
2022-07-12 10:55:28 +02:00
|
|
|
</o-field>
|
|
|
|
</o-field>
|
2020-06-25 11:36:35 +02:00
|
|
|
</form>
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-field
|
2022-08-26 16:08:58 +02:00
|
|
|
class="my-2"
|
2022-07-12 10:55:28 +02:00
|
|
|
:label="t('Status')"
|
2021-09-07 17:52:34 +02:00
|
|
|
horizontal
|
|
|
|
label-for="group-members-status-filter"
|
|
|
|
>
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-select v-model="roles" id="group-members-status-filter">
|
2022-08-26 16:08:58 +02:00
|
|
|
<option :value="undefined">
|
2022-07-12 10:55:28 +02:00
|
|
|
{{ t("Everything") }}
|
2020-07-09 17:24:28 +02:00
|
|
|
</option>
|
|
|
|
<option :value="MemberRole.ADMINISTRATOR">
|
2022-07-12 10:55:28 +02:00
|
|
|
{{ t("Administrator") }}
|
2020-07-09 17:24:28 +02:00
|
|
|
</option>
|
|
|
|
<option :value="MemberRole.MODERATOR">
|
2022-07-12 10:55:28 +02:00
|
|
|
{{ t("Moderator") }}
|
2020-07-09 17:24:28 +02:00
|
|
|
</option>
|
|
|
|
<option :value="MemberRole.MEMBER">
|
2022-07-12 10:55:28 +02:00
|
|
|
{{ t("Member") }}
|
2020-07-09 17:24:28 +02:00
|
|
|
</option>
|
|
|
|
<option :value="MemberRole.INVITED">
|
2022-07-12 10:55:28 +02:00
|
|
|
{{ t("Invited") }}
|
2020-07-09 17:24:28 +02:00
|
|
|
</option>
|
|
|
|
<option :value="MemberRole.NOT_APPROVED">
|
2022-07-12 10:55:28 +02:00
|
|
|
{{ t("Not approved") }}
|
2020-07-09 17:24:28 +02:00
|
|
|
</option>
|
|
|
|
<option :value="MemberRole.REJECTED">
|
2022-07-12 10:55:28 +02:00
|
|
|
{{ t("Rejected") }}
|
2020-07-09 17:24:28 +02:00
|
|
|
</option>
|
2022-07-12 10:55:28 +02:00
|
|
|
</o-select>
|
|
|
|
</o-field>
|
|
|
|
<o-table
|
2020-11-06 11:34:32 +01:00
|
|
|
v-if="members"
|
|
|
|
:data="members.elements"
|
2020-07-09 17:24:28 +02:00
|
|
|
ref="queueTable"
|
2022-07-12 10:55:28 +02:00
|
|
|
:loading="groupMembersLoading"
|
2020-07-09 17:24:28 +02:00
|
|
|
paginated
|
|
|
|
backend-pagination
|
2022-07-12 10:55:28 +02:00
|
|
|
v-model:current-page="page"
|
2020-07-09 17:24:28 +02:00
|
|
|
:pagination-simple="true"
|
2022-07-12 10:55:28 +02:00
|
|
|
:aria-next-label="t('Next page')"
|
|
|
|
:aria-previous-label="t('Previous page')"
|
|
|
|
:aria-page-label="t('Page')"
|
|
|
|
:aria-current-label="t('Current page')"
|
2020-11-06 11:34:32 +01:00
|
|
|
:total="members.total"
|
2020-07-09 17:24:28 +02:00
|
|
|
:per-page="MEMBERS_PER_PAGE"
|
|
|
|
backend-sorting
|
|
|
|
:default-sort-direction="'desc'"
|
|
|
|
:default-sort="['insertedAt', 'desc']"
|
2022-07-12 10:55:28 +02:00
|
|
|
@page-change="loadMoreMembers"
|
2022-08-26 16:08:58 +02:00
|
|
|
@sort="(field: string, order: string) => emit('sort', field, order)"
|
2020-07-09 17:24:28 +02:00
|
|
|
>
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-table-column
|
2020-11-30 10:24:11 +01:00
|
|
|
field="actor.preferredUsername"
|
2022-07-12 10:55:28 +02:00
|
|
|
:label="t('Member')"
|
2020-11-30 10:24:11 +01:00
|
|
|
v-slot="props"
|
|
|
|
>
|
2022-07-12 10:55:28 +02:00
|
|
|
<article class="flex">
|
|
|
|
<figure v-if="props.row.actor.avatar">
|
2020-11-30 10:24:11 +01:00
|
|
|
<img
|
2022-07-12 10:55:28 +02:00
|
|
|
class="rounded"
|
2020-11-30 10:24:11 +01:00
|
|
|
:src="props.row.actor.avatar.url"
|
2021-09-07 17:52:34 +02:00
|
|
|
:alt="props.row.actor.avatar.alt || ''"
|
2022-07-12 10:55:28 +02:00
|
|
|
height="48"
|
|
|
|
width="48"
|
2020-11-30 10:24:11 +01:00
|
|
|
/>
|
2020-08-18 15:50:50 +02:00
|
|
|
</figure>
|
2022-07-12 10:55:28 +02:00
|
|
|
<AccountCircle v-else :size="48" />
|
|
|
|
|
|
|
|
<div class="">
|
2022-08-26 16:08:58 +02:00
|
|
|
<div class="text-start">
|
2020-11-30 10:24:11 +01:00
|
|
|
<span v-if="props.row.actor.name">{{
|
|
|
|
props.row.actor.name
|
|
|
|
}}</span
|
2020-08-18 15:50:50 +02:00
|
|
|
><br />
|
2022-07-12 10:55:28 +02:00
|
|
|
<span class="">@{{ usernameWithDomain(props.row.actor) }}</span>
|
2020-07-09 17:24:28 +02:00
|
|
|
</div>
|
2020-08-18 15:50:50 +02:00
|
|
|
</div>
|
|
|
|
</article>
|
2022-07-12 10:55:28 +02:00
|
|
|
</o-table-column>
|
|
|
|
<o-table-column field="role" :label="t('Role')" v-slot="props">
|
2022-08-26 16:08:58 +02:00
|
|
|
<tag
|
2022-07-12 10:55:28 +02:00
|
|
|
variant="info"
|
2020-11-30 10:24:11 +01:00
|
|
|
v-if="props.row.role === MemberRole.ADMINISTRATOR"
|
|
|
|
>
|
2022-07-12 10:55:28 +02:00
|
|
|
{{ t("Administrator") }}
|
2022-08-26 16:08:58 +02:00
|
|
|
</tag>
|
|
|
|
<tag
|
2022-07-12 10:55:28 +02:00
|
|
|
variant="info"
|
2020-11-30 10:24:11 +01:00
|
|
|
v-else-if="props.row.role === MemberRole.MODERATOR"
|
|
|
|
>
|
2022-07-12 10:55:28 +02:00
|
|
|
{{ t("Moderator") }}
|
2022-08-26 16:08:58 +02:00
|
|
|
</tag>
|
|
|
|
<tag v-else-if="props.row.role === MemberRole.MEMBER">
|
2022-07-12 10:55:28 +02:00
|
|
|
{{ t("Member") }}
|
2022-08-26 16:08:58 +02:00
|
|
|
</tag>
|
|
|
|
<tag
|
2022-07-12 10:55:28 +02:00
|
|
|
variant="warning"
|
2020-11-30 10:24:11 +01:00
|
|
|
v-else-if="props.row.role === MemberRole.NOT_APPROVED"
|
|
|
|
>
|
2022-07-12 10:55:28 +02:00
|
|
|
{{ t("Not approved") }}
|
2022-08-26 16:08:58 +02:00
|
|
|
</tag>
|
|
|
|
<tag
|
2022-07-12 10:55:28 +02:00
|
|
|
variant="danger"
|
2020-11-30 10:24:11 +01:00
|
|
|
v-else-if="props.row.role === MemberRole.REJECTED"
|
|
|
|
>
|
2022-07-12 10:55:28 +02:00
|
|
|
{{ t("Rejected") }}
|
2022-08-26 16:08:58 +02:00
|
|
|
</tag>
|
|
|
|
<tag
|
2022-07-12 10:55:28 +02:00
|
|
|
variant="warning"
|
2020-11-30 10:24:11 +01:00
|
|
|
v-else-if="props.row.role === MemberRole.INVITED"
|
|
|
|
>
|
2022-07-12 10:55:28 +02:00
|
|
|
{{ t("Invited") }}
|
2022-08-26 16:08:58 +02:00
|
|
|
</tag>
|
2022-07-12 10:55:28 +02:00
|
|
|
</o-table-column>
|
|
|
|
<o-table-column field="insertedAt" :label="t('Date')" v-slot="props">
|
2020-08-18 15:50:50 +02:00
|
|
|
<span class="has-text-centered">
|
2022-07-12 10:55:28 +02:00
|
|
|
{{ formatDateString(props.row.insertedAt) }}<br />{{
|
|
|
|
formatTimeString(props.row.insertedAt)
|
2020-08-18 15:50:50 +02:00
|
|
|
}}
|
|
|
|
</span>
|
2022-07-12 10:55:28 +02:00
|
|
|
</o-table-column>
|
|
|
|
<o-table-column field="actions" :label="t('Actions')" v-slot="props">
|
|
|
|
<div
|
|
|
|
class="flex flex-wrap gap-2"
|
|
|
|
v-if="props.row.actor.id !== currentActor?.id"
|
|
|
|
>
|
|
|
|
<o-button
|
|
|
|
variant="success"
|
2021-11-12 15:42:52 +01:00
|
|
|
v-if="props.row.role === MemberRole.NOT_APPROVED"
|
2022-07-12 10:55:28 +02:00
|
|
|
@click="approveMember(props.row.id)"
|
2021-11-12 15:42:52 +01:00
|
|
|
icon-left="check"
|
2022-07-12 10:55:28 +02:00
|
|
|
>{{ t("Approve member") }}</o-button
|
2021-11-12 15:42:52 +01:00
|
|
|
>
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-button
|
|
|
|
variant="danger"
|
2021-11-12 15:42:52 +01:00
|
|
|
v-if="props.row.role === MemberRole.NOT_APPROVED"
|
|
|
|
@click="rejectMember(props.row)"
|
|
|
|
icon-left="exit-to-app"
|
2022-07-12 10:55:28 +02:00
|
|
|
>{{ t("Reject member") }}</o-button
|
2021-11-12 15:42:52 +01:00
|
|
|
>
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-button
|
2020-11-30 10:24:11 +01:00
|
|
|
v-if="
|
|
|
|
[MemberRole.MEMBER, MemberRole.MODERATOR].includes(
|
|
|
|
props.row.role
|
|
|
|
)
|
|
|
|
"
|
2020-10-06 15:38:53 +02:00
|
|
|
@click="promoteMember(props.row)"
|
|
|
|
icon-left="chevron-double-up"
|
2022-07-12 10:55:28 +02:00
|
|
|
>{{ t("Promote") }}</o-button
|
2020-08-20 10:54:58 +02:00
|
|
|
>
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-button
|
2020-11-30 10:24:11 +01:00
|
|
|
v-if="
|
|
|
|
[MemberRole.ADMINISTRATOR, MemberRole.MODERATOR].includes(
|
|
|
|
props.row.role
|
|
|
|
)
|
|
|
|
"
|
2020-10-06 15:38:53 +02:00
|
|
|
@click="demoteMember(props.row)"
|
|
|
|
icon-left="chevron-double-down"
|
2022-07-12 10:55:28 +02:00
|
|
|
>{{ t("Demote") }}</o-button
|
2020-08-20 10:54:58 +02:00
|
|
|
>
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-button
|
2020-08-20 10:54:58 +02:00
|
|
|
v-if="props.row.role === MemberRole.MEMBER"
|
2021-11-12 15:42:52 +01:00
|
|
|
@click="removeMember(props.row)"
|
2022-07-12 10:55:28 +02:00
|
|
|
variant="danger"
|
2020-10-06 15:38:53 +02:00
|
|
|
icon-left="exit-to-app"
|
2022-07-12 10:55:28 +02:00
|
|
|
>{{ t("Remove") }}</o-button
|
2020-08-20 10:54:58 +02:00
|
|
|
>
|
|
|
|
</div>
|
2022-07-12 10:55:28 +02:00
|
|
|
</o-table-column>
|
|
|
|
<template #empty>
|
2021-01-14 19:17:12 +01:00
|
|
|
<empty-content icon="account" inline>
|
2022-07-12 10:55:28 +02:00
|
|
|
{{ t("No member matches the filters") }}
|
2021-01-14 19:17:12 +01:00
|
|
|
</empty-content>
|
2020-07-09 17:24:28 +02:00
|
|
|
</template>
|
2022-07-12 10:55:28 +02:00
|
|
|
</o-table>
|
2020-06-25 11:36:35 +02:00
|
|
|
</section>
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-notification v-else-if="!groupMembersLoading && group">
|
|
|
|
{{ t("You are not an administrator for this group.") }}
|
|
|
|
</o-notification>
|
2020-06-25 11:36:35 +02:00
|
|
|
</div>
|
2020-02-18 08:57:00 +01:00
|
|
|
</template>
|
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
<script lang="ts" setup>
|
2020-10-15 14:23:55 +02:00
|
|
|
import { FETCH_GROUP } from "@/graphql/group";
|
2020-11-27 19:27:44 +01:00
|
|
|
import { MemberRole } from "@/types/enums";
|
|
|
|
import { IMember } from "@/types/actor/member.model";
|
2022-07-12 10:55:28 +02:00
|
|
|
import RouteName from "@/router/name";
|
2020-11-30 10:24:11 +01:00
|
|
|
import {
|
|
|
|
INVITE_MEMBER,
|
|
|
|
GROUP_MEMBERS,
|
|
|
|
REMOVE_MEMBER,
|
|
|
|
UPDATE_MEMBER,
|
2021-11-12 15:42:52 +01:00
|
|
|
APPROVE_MEMBER,
|
2022-07-12 10:55:28 +02:00
|
|
|
} from "@/graphql/member";
|
|
|
|
import { usernameWithDomain, displayName, IGroup } from "@/types/actor";
|
2021-01-14 19:17:12 +01:00
|
|
|
import EmptyContent from "@/components/Utils/EmptyContent.vue";
|
2022-07-12 10:55:28 +02:00
|
|
|
import { useHead } from "@vueuse/head";
|
|
|
|
import { useI18n } from "vue-i18n";
|
|
|
|
import { useMutation, useQuery } from "@vue/apollo-composable";
|
2022-08-26 16:08:58 +02:00
|
|
|
import { computed, inject, ref } from "vue";
|
2022-07-12 10:55:28 +02:00
|
|
|
import {
|
|
|
|
enumTransformer,
|
|
|
|
integerTransformer,
|
|
|
|
useRouteQuery,
|
|
|
|
} from "vue-use-route-query";
|
|
|
|
import {
|
|
|
|
useCurrentActorClient,
|
|
|
|
usePersonStatusGroup,
|
|
|
|
} from "@/composition/apollo/actor";
|
|
|
|
import { formatTimeString, formatDateString } from "@/filters/datetime";
|
|
|
|
import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
|
|
|
|
import { Notifier } from "@/plugins/notifier";
|
2022-09-20 16:53:26 +02:00
|
|
|
import Tag from "@/components/TagElement.vue";
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const { t } = useI18n({ useScope: "global" });
|
|
|
|
|
|
|
|
useHead({
|
|
|
|
title: computed(() => t("Group members")),
|
|
|
|
});
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const props = defineProps<{ preferredUsername: string }>();
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2022-08-26 16:08:58 +02:00
|
|
|
const emit = defineEmits(["sort"]);
|
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const { currentActor } = useCurrentActorClient();
|
2020-10-02 10:46:58 +02:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const newMemberUsername = ref("");
|
|
|
|
const inviteError = ref("");
|
|
|
|
const page = useRouteQuery("page", 1, integerTransformer);
|
|
|
|
const roles = useRouteQuery("roles", undefined, enumTransformer(MemberRole));
|
|
|
|
const MEMBERS_PER_PAGE = 10;
|
|
|
|
const notifier = inject<Notifier>("notifier");
|
2020-07-09 17:24:28 +02:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const {
|
|
|
|
result: groupMembersResult,
|
|
|
|
fetchMore: fetchMoreGroupMembers,
|
|
|
|
loading: groupMembersLoading,
|
|
|
|
} = useQuery<{ group: IGroup }>(GROUP_MEMBERS, () => ({
|
|
|
|
groupName: props.preferredUsername,
|
|
|
|
page: page.value,
|
|
|
|
limit: MEMBERS_PER_PAGE,
|
|
|
|
roles: roles.value,
|
|
|
|
}));
|
|
|
|
const group = computed(() => groupMembersResult.value?.group);
|
2020-07-09 17:24:28 +02:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const members = computed(
|
|
|
|
() => group.value?.members ?? { total: 0, elements: [] }
|
|
|
|
);
|
2020-10-02 10:46:58 +02:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const {
|
|
|
|
mutate: inviteMemberMutation,
|
|
|
|
onDone: onInviteMemberDone,
|
|
|
|
onError: onInviteMemberError,
|
|
|
|
} = useMutation<{ inviteMember: IMember }>(INVITE_MEMBER, () => ({
|
|
|
|
refetchQueries: [
|
|
|
|
{
|
|
|
|
query: GROUP_MEMBERS,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
}));
|
2020-07-09 17:24:28 +02:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
onInviteMemberError((error) => {
|
|
|
|
console.error(error);
|
|
|
|
if (error.graphQLErrors && error.graphQLErrors.length > 0) {
|
|
|
|
inviteError.value = error.graphQLErrors[0].message;
|
|
|
|
}
|
|
|
|
});
|
2020-07-09 17:24:28 +02:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
onInviteMemberDone(() => {
|
|
|
|
notifier?.success(
|
|
|
|
t("{username} was invited to {group}", {
|
|
|
|
username: newMemberUsername.value,
|
|
|
|
group: displayName(group.value),
|
|
|
|
})
|
|
|
|
);
|
|
|
|
newMemberUsername.value = "";
|
|
|
|
});
|
2020-07-09 17:24:28 +02:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const inviteMember = async (): Promise<void> => {
|
|
|
|
inviteError.value = "";
|
|
|
|
inviteMemberMutation({
|
|
|
|
groupId: group.value?.id,
|
|
|
|
targetActorUsername: newMemberUsername.value,
|
|
|
|
});
|
|
|
|
};
|
2022-01-10 15:19:16 +01:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const loadMoreMembers = async (): Promise<void> => {
|
|
|
|
await fetchMoreGroupMembers({
|
|
|
|
// New variables
|
|
|
|
variables() {
|
|
|
|
return {
|
|
|
|
name: usernameWithDomain(group.value),
|
2020-11-06 11:34:32 +01:00
|
|
|
page,
|
|
|
|
limit: MEMBERS_PER_PAGE,
|
|
|
|
roles,
|
|
|
|
};
|
2022-07-12 10:55:28 +02:00
|
|
|
},
|
|
|
|
});
|
|
|
|
};
|
2020-07-09 17:24:28 +02:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const {
|
|
|
|
mutate: mutateRemoveMember,
|
|
|
|
onDone: onRemoveMemberDone,
|
|
|
|
onError: onRemoveMemberError,
|
|
|
|
} = useMutation(REMOVE_MEMBER, () => ({
|
|
|
|
refetchQueries: [
|
|
|
|
{
|
|
|
|
query: GROUP_MEMBERS,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
}));
|
2020-11-06 11:34:32 +01:00
|
|
|
|
2022-08-26 16:08:58 +02:00
|
|
|
onRemoveMemberDone(({ context }) => {
|
2022-07-12 10:55:28 +02:00
|
|
|
let message = t("The member was removed from the group {group}", {
|
|
|
|
group: displayName(group.value),
|
|
|
|
}) as string;
|
2022-08-26 16:08:58 +02:00
|
|
|
if (context?.oldMember.role === MemberRole.NOT_APPROVED) {
|
2022-07-12 10:55:28 +02:00
|
|
|
message = t("The membership request from {profile} was rejected", {
|
2022-08-26 16:08:58 +02:00
|
|
|
group: displayName(context?.oldMember.actor),
|
2022-07-12 10:55:28 +02:00
|
|
|
}) as string;
|
2020-11-06 11:34:32 +01:00
|
|
|
}
|
2022-07-12 10:55:28 +02:00
|
|
|
notifier?.success(message);
|
|
|
|
});
|
2020-11-06 11:34:32 +01:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
onRemoveMemberError((error) => {
|
|
|
|
console.error(error);
|
|
|
|
if (error.graphQLErrors && error.graphQLErrors.length > 0) {
|
|
|
|
notifier?.error(error.graphQLErrors[0].message);
|
2020-07-09 17:24:28 +02:00
|
|
|
}
|
2022-07-12 10:55:28 +02:00
|
|
|
});
|
2020-08-14 11:32:23 +02:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const removeMember = (oldMember: IMember) => {
|
2022-08-26 16:08:58 +02:00
|
|
|
mutateRemoveMember(
|
|
|
|
{
|
|
|
|
groupId: group.value?.id,
|
|
|
|
memberId: oldMember.id,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
context: { oldMember },
|
|
|
|
}
|
|
|
|
);
|
2022-07-12 10:55:28 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
const promoteMember = (member: IMember): void => {
|
|
|
|
if (!member.id) return;
|
|
|
|
if (member.role === MemberRole.MODERATOR) {
|
|
|
|
updateMember(member, MemberRole.ADMINISTRATOR);
|
|
|
|
}
|
|
|
|
if (member.role === MemberRole.MEMBER) {
|
|
|
|
updateMember(member, MemberRole.MODERATOR);
|
2020-08-14 11:32:23 +02:00
|
|
|
}
|
2022-07-12 10:55:28 +02:00
|
|
|
};
|
2020-08-20 10:54:58 +02:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const demoteMember = (member: IMember): void => {
|
|
|
|
if (!member.id) return;
|
|
|
|
if (member.role === MemberRole.MODERATOR) {
|
|
|
|
updateMember(member, MemberRole.MEMBER);
|
2020-08-20 10:54:58 +02:00
|
|
|
}
|
2022-07-12 10:55:28 +02:00
|
|
|
if (member.role === MemberRole.ADMINISTRATOR) {
|
|
|
|
updateMember(member, MemberRole.MODERATOR);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
const {
|
|
|
|
mutate: approveMember,
|
|
|
|
onDone: onApproveMemberDone,
|
|
|
|
onError: onApproveMemberError,
|
|
|
|
} = useMutation<{ approveMember: IMember }, { memberId: string }>(
|
|
|
|
APPROVE_MEMBER
|
|
|
|
);
|
|
|
|
|
|
|
|
onApproveMemberDone(() => {
|
|
|
|
notifier?.success(t("The member was approved"));
|
|
|
|
});
|
2020-08-20 10:54:58 +02:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
onApproveMemberError((error) => {
|
|
|
|
console.error(error);
|
|
|
|
if (error.graphQLErrors && error.graphQLErrors.length > 0) {
|
|
|
|
notifier?.error(error.graphQLErrors[0].message);
|
2021-11-12 15:42:52 +01:00
|
|
|
}
|
2022-07-12 10:55:28 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
const rejectMember = (member: IMember): void => {
|
|
|
|
if (!member.id) return;
|
|
|
|
removeMember(member);
|
|
|
|
};
|
|
|
|
|
|
|
|
const {
|
|
|
|
mutate: updateMemberMutation,
|
|
|
|
onDone: onUpdateMutationDone,
|
|
|
|
onError: onUpdateMutationError,
|
|
|
|
} = useMutation<
|
|
|
|
{ id: string; role: MemberRole },
|
|
|
|
{ memberId: string; role: MemberRole; oldRole: MemberRole }
|
|
|
|
>(UPDATE_MEMBER, () => ({
|
|
|
|
refetchQueries: [
|
|
|
|
{
|
|
|
|
query: FETCH_GROUP,
|
|
|
|
variables: { name: props.preferredUsername },
|
|
|
|
},
|
|
|
|
],
|
|
|
|
}));
|
2021-11-12 15:42:52 +01:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
onUpdateMutationDone(({ data, context }) => {
|
|
|
|
let successMessage;
|
|
|
|
console.debug("onUpdateMutationDone", context);
|
|
|
|
switch (data?.role) {
|
|
|
|
case MemberRole.MODERATOR:
|
|
|
|
successMessage = "The member role was updated to moderator";
|
|
|
|
break;
|
|
|
|
case MemberRole.ADMINISTRATOR:
|
|
|
|
successMessage = "The member role was updated to administrator";
|
|
|
|
break;
|
|
|
|
case MemberRole.MEMBER:
|
2022-08-26 16:08:58 +02:00
|
|
|
if (context?.oldMember.role === MemberRole.NOT_APPROVED) {
|
2022-07-12 10:55:28 +02:00
|
|
|
successMessage = "The member was approved";
|
|
|
|
} else {
|
|
|
|
successMessage = "The member role was updated to simple member";
|
2021-11-12 15:42:52 +01:00
|
|
|
}
|
2022-07-12 10:55:28 +02:00
|
|
|
break;
|
|
|
|
default:
|
|
|
|
successMessage = "The member role was updated";
|
2020-08-20 10:54:58 +02:00
|
|
|
}
|
2022-07-12 10:55:28 +02:00
|
|
|
notifier?.success(t(successMessage));
|
|
|
|
});
|
2020-08-20 10:54:58 +02:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
onUpdateMutationError((error) => {
|
|
|
|
console.error(error);
|
|
|
|
if (error.graphQLErrors && error.graphQLErrors.length > 0) {
|
|
|
|
notifier?.error(error.graphQLErrors[0].message);
|
2021-11-12 15:42:52 +01:00
|
|
|
}
|
2022-07-12 10:55:28 +02:00
|
|
|
});
|
2021-11-12 15:42:52 +01:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const updateMember = async (
|
|
|
|
oldMember: IMember,
|
|
|
|
role: MemberRole
|
|
|
|
): Promise<void> => {
|
2022-08-26 16:08:58 +02:00
|
|
|
updateMemberMutation(
|
|
|
|
{
|
|
|
|
memberId: oldMember.id as string,
|
|
|
|
role,
|
|
|
|
oldRole: oldMember.role,
|
|
|
|
},
|
|
|
|
{ context: { oldMember } }
|
|
|
|
);
|
2022-07-12 10:55:28 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
const isCurrentActorAGroupAdmin = computed((): boolean => {
|
|
|
|
return hasCurrentActorThisRole(MemberRole.ADMINISTRATOR);
|
|
|
|
});
|
|
|
|
|
|
|
|
const hasCurrentActorThisRole = (givenRole: string | string[]): boolean => {
|
2022-08-26 16:08:58 +02:00
|
|
|
const rolesToConsider = Array.isArray(givenRole) ? givenRole : [givenRole];
|
2022-07-12 10:55:28 +02:00
|
|
|
return (
|
|
|
|
personMemberships.value?.total > 0 &&
|
2022-08-26 16:08:58 +02:00
|
|
|
rolesToConsider.includes(personMemberships.value?.elements[0].role)
|
2022-07-12 10:55:28 +02:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
const personMemberships = computed(
|
|
|
|
() => person.value?.memberships ?? { total: 0, elements: [] }
|
|
|
|
);
|
|
|
|
|
|
|
|
const { person } = usePersonStatusGroup(props.preferredUsername);
|
2020-02-18 08:57:00 +01:00
|
|
|
</script>
|