104 lines
3.0 KiB
Vue
104 lines
3.0 KiB
Vue
<template>
|
|
<Section variant="plain">
|
|
<Stack gap="6">
|
|
<PageHeader :title="t('clientTeam.invite.title')" />
|
|
|
|
<Card padding="lg">
|
|
<form @submit.prevent="submitInvite">
|
|
<Stack gap="4">
|
|
<div class="form-control">
|
|
<label class="label">
|
|
<span class="label-text">{{ t('clientTeam.invite.email') }}</span>
|
|
</label>
|
|
<input
|
|
v-model="inviteEmail"
|
|
type="email"
|
|
:placeholder="t('clientTeam.invite.emailPlaceholder')"
|
|
class="input input-bordered w-full"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-control">
|
|
<label class="label">
|
|
<span class="label-text">{{ t('clientTeam.invite.role') }}</span>
|
|
</label>
|
|
<select v-model="inviteRole" class="select select-bordered w-full">
|
|
<option value="MEMBER">{{ t('clientTeam.roles.member') }}</option>
|
|
<option value="MANAGER">{{ t('clientTeam.roles.manager') }}</option>
|
|
<option value="ADMIN">{{ t('clientTeam.roles.admin') }}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<Alert v-if="inviteError" variant="error">
|
|
{{ inviteError }}
|
|
</Alert>
|
|
|
|
<Alert v-if="inviteSuccess" variant="success">
|
|
{{ t('clientTeam.invite.success') }}
|
|
</Alert>
|
|
|
|
<Stack direction="row" gap="3">
|
|
<Button variant="ghost" :to="localePath('/clientarea/team')">
|
|
{{ t('clientTeam.invite.cancel') }}
|
|
</Button>
|
|
<Button type="submit" :loading="inviteLoading">
|
|
{{ t('clientTeam.invite.submit') }}
|
|
</Button>
|
|
</Stack>
|
|
</Stack>
|
|
</form>
|
|
</Card>
|
|
</Stack>
|
|
</Section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { InviteMemberDocument } from '~/composables/graphql/team/teams-generated'
|
|
|
|
const { t } = useI18n()
|
|
const { mutate } = useGraphQL()
|
|
const localePath = useLocalePath()
|
|
const router = useRouter()
|
|
|
|
definePageMeta({
|
|
middleware: ['auth-oidc']
|
|
})
|
|
|
|
const inviteEmail = ref('')
|
|
const inviteRole = ref('MEMBER')
|
|
const inviteLoading = ref(false)
|
|
const inviteError = ref('')
|
|
const inviteSuccess = ref(false)
|
|
|
|
const submitInvite = async () => {
|
|
if (!inviteEmail.value) return
|
|
|
|
inviteLoading.value = true
|
|
inviteError.value = ''
|
|
inviteSuccess.value = false
|
|
|
|
try {
|
|
const result = await mutate(InviteMemberDocument, {
|
|
input: {
|
|
email: inviteEmail.value,
|
|
role: inviteRole.value
|
|
}
|
|
}, 'team', 'teams')
|
|
|
|
if (result?.inviteMember?.success) {
|
|
inviteSuccess.value = true
|
|
setTimeout(() => {
|
|
router.push(localePath('/clientarea/team'))
|
|
}, 1500)
|
|
} else {
|
|
inviteError.value = result?.inviteMember?.message || t('clientTeam.invite.error')
|
|
}
|
|
} catch (err: any) {
|
|
inviteError.value = err.message || t('clientTeam.invite.error')
|
|
} finally {
|
|
inviteLoading.value = false
|
|
}
|
|
}
|
|
</script>
|