mobilizon.chapril.org-mobil.../js/src/views/Group/GroupMembers.vue

523 lines
15 KiB
Vue
Raw Normal View History

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