79 lines
2.6 KiB
Vue
79 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import { useMutation } from '@vue/apollo-composable';
|
|
import { CreateInvitationDocument } from '~/composables/graphql/generated';
|
|
|
|
definePageMeta({
|
|
middleware: ['manager-only'],
|
|
});
|
|
|
|
const email = ref('');
|
|
const companyName = ref('');
|
|
const invitationResult = ref<null | { token: string; expiresAt: string }>(null);
|
|
|
|
const createInvitationMutation = useMutation(CreateInvitationDocument);
|
|
|
|
async function createInvitation() {
|
|
invitationResult.value = null;
|
|
|
|
const response = await createInvitationMutation.mutate({
|
|
input: {
|
|
email: email.value,
|
|
companyName: companyName.value,
|
|
expiresInDays: 7,
|
|
},
|
|
});
|
|
|
|
const invitation = response?.data?.createInvitation;
|
|
if (!invitation) {
|
|
return;
|
|
}
|
|
|
|
invitationResult.value = {
|
|
token: invitation.token,
|
|
expiresAt: invitation.expiresAt,
|
|
};
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="space-y-6 max-w-3xl">
|
|
<NuxtLink to="/clients" class="text-sm font-semibold text-[#0d854a]">← Назад к клиентам</NuxtLink>
|
|
|
|
<div class="manager-hero">
|
|
<p class="manager-eyebrow">Приглашение</p>
|
|
<h1 class="manager-title">Пригласить нового клиента</h1>
|
|
<p class="manager-copy">Форма вынесена отдельно, чтобы список клиентов оставался чистым и спокойным.</p>
|
|
</div>
|
|
|
|
<div class="surface-card rounded-3xl p-5">
|
|
<div class="grid gap-3">
|
|
<label class="form-control">
|
|
<span class="label-text">Email</span>
|
|
<input v-model="email" type="email" class="input manager-field w-full" placeholder="client@example.com">
|
|
</label>
|
|
|
|
<label class="form-control">
|
|
<span class="label-text">Компания</span>
|
|
<input v-model="companyName" type="text" class="input manager-field w-full" placeholder="Название компании">
|
|
</label>
|
|
|
|
<div>
|
|
<button class="btn btn-primary border-0" @click="createInvitation">Создать инвайт</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="invitationResult" class="surface-card rounded-3xl p-5">
|
|
<h2 class="text-xl font-bold text-[#123824]">Инвайт создан</h2>
|
|
<div class="mt-4 space-y-3 text-sm text-[#123824]">
|
|
<div class="manager-mini-card">
|
|
Токен: <span class="font-semibold">{{ invitationResult.token }}</span>
|
|
</div>
|
|
<div class="manager-mini-card">
|
|
Действует до: <span class="font-semibold">{{ new Date(invitationResult.expiresAt).toLocaleString() }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|