Admin
92 lines
2.5 KiB
Vue
92 lines
2.5 KiB
Vue
<script lang="ts" setup>
|
|
import { toTypedSchema } from '@vee-validate/zod'
|
|
import { useForm } from 'vee-validate'
|
|
import { toast } from 'vue-sonner'
|
|
|
|
import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
|
|
|
|
import { teamAddValidator } from './validators/team.validator'
|
|
|
|
const emits = defineEmits(['close'])
|
|
|
|
const teamAddFormSchema = toTypedSchema(teamAddValidator)
|
|
|
|
const { handleSubmit } = useForm({
|
|
validationSchema: teamAddFormSchema,
|
|
initialValues: {},
|
|
})
|
|
|
|
const onSubmit = handleSubmit((values) => {
|
|
toast('You submitted the following values:', {
|
|
position: 'top-center',
|
|
description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
|
|
})
|
|
|
|
emits('close')
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<UiDialogHeader>
|
|
<UiDialogTitle>
|
|
Add New Team
|
|
</UiDialogTitle>
|
|
<UiDialogDescription>
|
|
Add a new team by your self.
|
|
</UiDialogDescription>
|
|
</UiDialogHeader>
|
|
|
|
<form class="space-y-4" @submit="onSubmit">
|
|
<FormField v-slot="{ componentField }" name="name">
|
|
<FormItem>
|
|
<FormLabel class="text-base">
|
|
Name
|
|
</FormLabel>
|
|
<FormControl>
|
|
<UiInput v-bind="componentField" />
|
|
</FormControl>
|
|
<FormDescription>
|
|
Set the name for the team.
|
|
</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
</FormField>
|
|
<FormField v-slot="{ componentField }" name="slug">
|
|
<FormItem>
|
|
<FormLabel class="text-base">
|
|
Slug
|
|
</FormLabel>
|
|
<FormControl>
|
|
<UiInput v-bind="componentField" />
|
|
</FormControl>
|
|
<FormDescription>
|
|
Set the slug for the team.
|
|
</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
</FormField>
|
|
<FormField v-slot="{ componentField }" name="logo">
|
|
<FormItem>
|
|
<FormLabel class="text-base">
|
|
Logo
|
|
</FormLabel>
|
|
<FormControl>
|
|
<UiInput v-bind="componentField" />
|
|
</FormControl>
|
|
<FormDescription>
|
|
Set the logo of the team.
|
|
</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
</FormField>
|
|
|
|
<div class="flex justify-start mt-4">
|
|
<UiButton type="submit">
|
|
Add team
|
|
</UiButton>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</template>
|