hamlab/mobilizon-frontend
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: interface is well updated after rejecting and accepting invitation in /groups/me page

Browse Source 
InvitationList.vue now emit accept-invitation and reject-invitation as expected by MyGroups.vue

MyGroups.vue refetch data after receiving the events.

Fixes #1797
This commit is contained in:
Massedil
2025-06-19 18:35:39 +02:00
parent bfd08493d8
commit c87f884d0a
2 changed files with 77 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/components/Group/InvitationsList.vue
View File

@@ -4,8 +4,8 @@
v-for="member in invitations"
:key="member.id"
:member="member"
@accept="acceptInvitation({ id: member.id })"
@reject="rejectInvitation({ id: member.id })"
@accept="() => member.id && acceptInvitation({ id: member.id })"
@reject="() => member.id && rejectInvitation({ id: member.id })"
/>
</section>
</template>
@@ -24,25 +24,33 @@ defineProps<{
invitations: IMember[];
}>();
const { mutate: acceptInvitation, onError: onAcceptInvitationError } =
useMutation<{ acceptInvitation: IMember }, { id: string }>(
ACCEPT_INVITATION,
{
refetchQueries({ data }) {
const profile = data?.acceptInvitation?.actor as IPerson;
const group = data?.acceptInvitation?.parent as IGroup;
if (profile && group) {
return [
{
query: PERSON_STATUS_GROUP,
variables: { id: profile.id, group: usernameWithDomain(group) },
},
];
}
return [];
},
}
);
const emit = defineEmits<{
(e: "accept-invitation", member: IMember): void;
(e: "reject-invitation", member: IMember): void;
}>();
const {
mutate: acceptInvitation,
onDone: onAcceptInvitationDone,
onError: onAcceptInvitationError,
} = useMutation<{ acceptInvitation: IMember }, { id: string }>(
ACCEPT_INVITATION,
{
refetchQueries({ data }) {
const profile = data?.acceptInvitation?.actor as IPerson;
const group = data?.acceptInvitation?.parent as IGroup;
if (profile && group) {
return [
{
query: PERSON_STATUS_GROUP,
variables: { id: profile.id, group: usernameWithDomain(group) },
},
];
}
return [];
},
}
);
const notifier = inject<Notifier>("notifier");
@@ -53,27 +61,49 @@ const onError = (error: ErrorResponse) => {
}
};
onAcceptInvitationDone((result) => {
if (!result.data?.acceptInvitation) {
console.error(result);
alert("Error while accepting invitation");
return;
}
emit("accept-invitation", result.data?.acceptInvitation);
});
onAcceptInvitationError((err) => onError(err as unknown as ErrorResponse));
const { mutate: rejectInvitation, onError: onRejectInvitationError } =
useMutation<{ rejectInvitation: IMember }, { id: string }>(
REJECT_INVITATION,
{
refetchQueries({ data }) {
const profile = data?.rejectInvitation?.actor as IPerson;
const group = data?.rejectInvitation?.parent as IGroup;
if (profile && group) {
return [
{
query: PERSON_STATUS_GROUP,
variables: { id: profile.id, group: usernameWithDomain(group) },
},
];
}
return [];
},
}
);
const {
mutate: rejectInvitation,
onDone: onRejectInvitationDone,
onError: onRejectInvitationError,
} = useMutation<{ rejectInvitation: IMember }, { id: string }>(
REJECT_INVITATION,
{
refetchQueries({ data }) {
// TODO Refetching the PERSON_STATUS_GROUP query is useless for the Mygroup.vue page
const profile = data?.rejectInvitation?.actor as IPerson;
const group = data?.rejectInvitation?.parent as IGroup;
if (profile && group) {
return [
{
query: PERSON_STATUS_GROUP,
variables: { id: profile.id, group: usernameWithDomain(group) },
},
];
}
return [];
},
}
);
onRejectInvitationDone((result) => {
if (!result.data?.rejectInvitation) {
console.error(result);
alert("Error while rejecting invitation");
return;
}
emit("reject-invitation", result.data?.rejectInvitation);
});
onRejectInvitationError((err) => onError(err as unknown as ErrorResponse));
</script>

32
src/views/Group/MyGroups.vue
View File

@@ -19,8 +19,8 @@
<o-loading v-model:active="loading"></o-loading>
<InvitationsList
:invitations="invitations"
@accept-invitation="acceptInvitation"
@reject-invitation="rejectInvitation"
@accept-invitation="refetchLoggedUserMemberships"
@reject-invitation="refetchLoggedUserMemberships"
/>
<section v-if="memberships && memberships.length > 0">
<GroupMemberCard
@@ -82,7 +82,6 @@ import { LOGGED_USER_MEMBERSHIPS } from "@/graphql/actor";
import { LEAVE_GROUP } from "@/graphql/group";
import GroupMemberCard from "@/components/Group/GroupMemberCard.vue";
import InvitationsList from "@/components/Group/InvitationsList.vue";
import { usernameWithDomain } from "@/types/actor";
import { IMember } from "@/types/actor/member.model";
import { MemberRole, ContentType } from "@/types/enums";
import RouteName from "../../router/name";
@@ -93,13 +92,16 @@ import { integerTransformer, useRouteQuery } from "vue-use-route-query";
import { computed, inject } from "vue";
import { useHead } from "@/utils/head";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
import { Notifier } from "@/plugins/notifier";
const page = useRouteQuery("page", 1, integerTransformer);
const limit = 10;
const { result: membershipsResult, loading } = useQuery<{
const {
result: membershipsResult,
loading,
refetch: refetchLoggedUserMemberships,
} = useQuery<{
loggedUser: Pick<IUser, "memberships">;
}>(
LOGGED_USER_MEMBERSHIPS,
@@ -129,26 +131,6 @@ useHead({
const notifier = inject<Notifier>("notifier");
const router = useRouter();
const acceptInvitation = (member: IMember) => {
return router.push({
name: RouteName.GROUP,
params: { preferredUsername: usernameWithDomain(member.parent) },
});
};
const rejectInvitation = ({ id: memberId }: { id: string }) => {
const index = membershipsPages.value.elements.findIndex(
(membership) =>
membership.role === MemberRole.INVITED && membership.id === memberId
);
if (index > -1) {
membershipsPages.value.elements.splice(index, 1);
membershipsPages.value.total -= 1;
}
};
const { mutate: leaveGroup, onError: onLeaveGroupError } = useMutation(
LEAVE_GROUP,
() => ({