127 lines
3.2 KiB
Vue
127 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import * as z from 'zod'
|
|
import type { FormSubmitEvent } from '@nuxt/ui'
|
|
|
|
const schema = z.object({
|
|
first_name: z.string().min(1, 'First name is required'),
|
|
last_name: z.string().min(1, 'Last name is required'),
|
|
email: z.string().email('Invalid email'),
|
|
phone: z.string().min(1, 'Phone is required'),
|
|
birth_date: z.string().min(1, 'Birth date is required'),
|
|
gender: z.enum(['male', 'female'])
|
|
})
|
|
|
|
type Schema = z.output<typeof schema>
|
|
|
|
const state = reactive<Partial<Schema>>({
|
|
first_name: '',
|
|
last_name: '',
|
|
email: '',
|
|
phone: '',
|
|
birth_date: '',
|
|
gender: 'male'
|
|
})
|
|
|
|
const toast = useToast()
|
|
const router = useRouter()
|
|
|
|
async function onSubmit(event: FormSubmitEvent<Schema>) {
|
|
try {
|
|
await useCustomer('/', {
|
|
method: 'POST',
|
|
body: event.data
|
|
})
|
|
|
|
toast.add({
|
|
title: 'Customer created',
|
|
description: 'The customer was successfully created.',
|
|
color: 'success'
|
|
})
|
|
|
|
router.push('/customers')
|
|
} catch (err: any) {
|
|
toast.add({
|
|
title: 'Error',
|
|
description: err?.message || 'Failed to create customer',
|
|
color: 'error'
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen bg-gray-50 p-10">
|
|
<div class="max-w-5xl mx-auto space-y-8">
|
|
|
|
<!-- Header -->
|
|
<div>
|
|
<h1 class="text-3xl font-bold text-gray-900">New Customer</h1>
|
|
<p class="text-gray-500 mt-1">Create a new customer profile</p>
|
|
</div>
|
|
|
|
<!-- Form Card -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8">
|
|
<UForm
|
|
:schema="schema"
|
|
:state="state"
|
|
class="space-y-6"
|
|
@submit="onSubmit"
|
|
>
|
|
<!-- Grid -->
|
|
<div class="grid md:grid-cols-2 gap-6">
|
|
|
|
<UFormField label="First Name" name="first_name">
|
|
<UInput v-model="state.first_name" />
|
|
</UFormField>
|
|
|
|
<UFormField label="Last Name" name="last_name">
|
|
<UInput v-model="state.last_name" />
|
|
</UFormField>
|
|
|
|
<UFormField label="Email" name="email">
|
|
<UInput v-model="state.email" />
|
|
</UFormField>
|
|
|
|
<UFormField label="Phone" name="phone">
|
|
<UInput v-model="state.phone" />
|
|
</UFormField>
|
|
|
|
<UFormField label="Birth Date" name="birth_date">
|
|
<UInput v-model="state.birth_date" type="date" />
|
|
</UFormField>
|
|
|
|
<UFormField label="Gender" name="gender">
|
|
<USelect
|
|
v-model="state.gender"
|
|
:items="[
|
|
{ label: 'Male', value: 'male' },
|
|
{ label: 'Female', value: 'female' }
|
|
]"
|
|
/>
|
|
</UFormField>
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Actions -->
|
|
<div class="flex justify-end gap-4 pt-4">
|
|
<UButton
|
|
color="neutral"
|
|
variant="ghost"
|
|
@click="$router.push('/customers')"
|
|
>
|
|
Cancel
|
|
</UButton>
|
|
|
|
<UButton type="submit" color="primary">
|
|
Create Customer
|
|
</UButton>
|
|
</div>
|
|
|
|
</UForm>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|