160 lines
4.6 KiB
Vue
160 lines
4.6 KiB
Vue
<template>
|
|
<div class="container mx-auto px-1 mb-6">
|
|
<div v-if="groupLoading || currentActorLoading" class="relative min-h-24">
|
|
<o-loading :fullPage="false" :active="true" />
|
|
</div>
|
|
|
|
<div v-else-if="groupError || currentActorError">
|
|
<o-notification type="danger" variant="danger"
|
|
>{{ groupError?.message }}
|
|
{{ currentActorError?.message }}</o-notification
|
|
>
|
|
</div>
|
|
|
|
<div v-else-if="group && currentActor">
|
|
<h1>{{ t("Join a group") }}</h1>
|
|
|
|
<div v-if="!acceptGroupInvitationSucceeded">
|
|
<p class="my-1">
|
|
<i18n-t
|
|
keypath="Do you want to join the group {groupName} with the profile {preferredUsername} ?"
|
|
>
|
|
<template #groupName>
|
|
<span
|
|
>"<b>{{ groupName }}</b
|
|
>"</span
|
|
>
|
|
</template>
|
|
<template #preferredUsername>
|
|
<span
|
|
>"<b>{{ currentActor.preferredUsername }}</b
|
|
>"</span
|
|
>
|
|
</template>
|
|
</i18n-t>
|
|
</p>
|
|
<p class="my-1">
|
|
{{
|
|
t(
|
|
"You can create a new profile or change the actual profile with the top menu."
|
|
)
|
|
}}
|
|
</p>
|
|
|
|
<o-button
|
|
variant="primary"
|
|
:loading="acceptGroupInvitationLoading"
|
|
:disabled="acceptGroupInvitationSucceeded"
|
|
@click="
|
|
acceptGroupInvitation({
|
|
groupId: group.id,
|
|
token: token,
|
|
actorId: currentActor.id,
|
|
})
|
|
"
|
|
>{{ t("Join group") }}</o-button
|
|
>
|
|
</div>
|
|
|
|
<div v-else>
|
|
<o-notification type="success" variant="success"
|
|
><i18n-t
|
|
keypath="You successfully joined the group {groupName} with your profile {preferredUsername} as {role}."
|
|
>
|
|
<template #groupName>
|
|
<span
|
|
>"<b>{{ groupName }}</b
|
|
>"</span
|
|
>
|
|
</template>
|
|
<template #preferredUsername>
|
|
<span
|
|
>"<b>{{ currentActor.preferredUsername }}</b
|
|
>"</span
|
|
>
|
|
</template>
|
|
<template #role>
|
|
<span
|
|
>"<b>{{ memberRole }}</b
|
|
>"</span
|
|
>
|
|
</template>
|
|
</i18n-t></o-notification
|
|
>
|
|
|
|
<o-button
|
|
tag="router-link"
|
|
variant="primary"
|
|
:to="{
|
|
name: RouteName.GROUP,
|
|
params: {
|
|
preferredUsername: groupName,
|
|
},
|
|
}"
|
|
>{{ t("Go to the group page") }}</o-button
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { useCurrentActorClient } from "@/composition/apollo/actor";
|
|
import { useGroup } from "@/composition/apollo/group";
|
|
import { GROUP_INVITATIONS_ACCEPT } from "@/graphql/invitations";
|
|
import { IMember } from "@/types/actor/member.model";
|
|
import { useMutation } from "@vue/apollo-composable";
|
|
import { computed, ref, watch } from "vue";
|
|
import { useI18n } from "vue-i18n";
|
|
import RouteName from "../../router/name";
|
|
|
|
const { t } = useI18n({ useScope: "global" });
|
|
|
|
const props = defineProps<{ preferredUsername: string; token: string }>();
|
|
const groupName = computed(() => props.preferredUsername);
|
|
const token = computed(() => props.token);
|
|
|
|
// -------------------------------------------------------------
|
|
// Group informations
|
|
// -------------------------------------------------------------
|
|
|
|
const { group, loading: groupLoading, error: groupError } = useGroup(groupName);
|
|
|
|
// -------------------------------------------------------------
|
|
// Actor informations
|
|
// -------------------------------------------------------------
|
|
|
|
const {
|
|
currentActor,
|
|
loading: currentActorLoading,
|
|
error: currentActorError,
|
|
} = useCurrentActorClient();
|
|
|
|
// -------------------------------------------------------------
|
|
// Accept invitation
|
|
// -------------------------------------------------------------
|
|
|
|
const acceptGroupInvitationSucceeded = ref<boolean>(false);
|
|
const memberRole = ref<string>();
|
|
|
|
const {
|
|
mutate: acceptGroupInvitation,
|
|
onDone: onAcceptGroupInvitationDone,
|
|
onError: onAcceptGroupInvitationError,
|
|
loading: acceptGroupInvitationLoading,
|
|
} = useMutation<{ acceptInvitationToken: IMember }>(GROUP_INVITATIONS_ACCEPT);
|
|
|
|
onAcceptGroupInvitationDone(({ data }) => {
|
|
acceptGroupInvitationSucceeded.value = true;
|
|
memberRole.value = data?.acceptInvitationToken?.role;
|
|
});
|
|
|
|
onAcceptGroupInvitationError((error) => {
|
|
alert(error.message);
|
|
});
|
|
|
|
watch(currentActor, () => {
|
|
acceptGroupInvitationSucceeded.value = false;
|
|
});
|
|
</script>
|