124 lines
3.7 KiB
TypeScript
124 lines
3.7 KiB
TypeScript
import { useState } from 'react'
|
|
import { Check, Loader2 } from 'lucide-react'
|
|
import { Button, Input, Label, useToast } from '../../../components/ui'
|
|
import { useGroupDetail } from './GroupDetailProvider'
|
|
|
|
export function QuickAddForm() {
|
|
const { submitQuickAttendee, isSubmittingAttendee, closeAddAttendeeModal } = useGroupDetail()
|
|
const toast = useToast()
|
|
const [firstName, setFirstName] = useState('')
|
|
const [lastName, setLastName] = useState('')
|
|
const [phone, setPhone] = useState('')
|
|
const [email, setEmail] = useState('')
|
|
const [notes, setNotes] = useState('')
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
if (!firstName.trim() || !phone.trim()) {
|
|
toast.error('Nombre y teléfono son obligatorios.')
|
|
return
|
|
}
|
|
submitQuickAttendee({
|
|
firstName: firstName.trim(),
|
|
lastName: lastName.trim(),
|
|
phone: phone.trim(),
|
|
email: email.trim() || undefined,
|
|
notes: notes.trim() || undefined,
|
|
})
|
|
}
|
|
|
|
const resetForm = () => {
|
|
setFirstName('')
|
|
setLastName('')
|
|
setPhone('')
|
|
setEmail('')
|
|
setNotes('')
|
|
}
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
|
<div>
|
|
<Label htmlFor="quick-first-name" className="mb-1 block text-xs">
|
|
Nombre <span className="text-danger">*</span>
|
|
</Label>
|
|
<Input
|
|
id="quick-first-name"
|
|
placeholder="Ej. Lucas"
|
|
value={firstName}
|
|
onChange={(e) => setFirstName(e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="quick-last-name" className="mb-1 block text-xs">
|
|
Apellido
|
|
</Label>
|
|
<Input
|
|
id="quick-last-name"
|
|
placeholder="Ej. González"
|
|
value={lastName}
|
|
onChange={(e) => setLastName(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="quick-phone" className="mb-1 block text-xs">
|
|
Teléfono / WhatsApp <span className="text-danger">*</span>
|
|
</Label>
|
|
<Input
|
|
id="quick-phone"
|
|
placeholder="Ej. +54 9 11 2345-6789"
|
|
value={phone}
|
|
onChange={(e) => setPhone(e.target.value)}
|
|
required
|
|
/>
|
|
<p className="mt-1 text-[11px] text-foreground/50">
|
|
Usado para contacto y validación de duplicados.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="quick-email" className="mb-1 block text-xs">
|
|
Email (opcional)
|
|
</Label>
|
|
<Input
|
|
id="quick-email"
|
|
type="email"
|
|
placeholder="alumno@ejemplo.com"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="quick-notes" className="mb-1 block text-xs">
|
|
Notas u Observaciones (opcional)
|
|
</Label>
|
|
<Input
|
|
id="quick-notes"
|
|
placeholder="Ej. Nivel intermedio, trae materiales propios"
|
|
value={notes}
|
|
onChange={(e) => setNotes(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-end gap-2.5 border-t border-border pt-3">
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => {
|
|
resetForm()
|
|
closeAddAttendeeModal()
|
|
}}
|
|
>
|
|
Cancelar
|
|
</Button>
|
|
<Button variant="primary" type="submit" disabled={isSubmittingAttendee} className="gap-2">
|
|
{isSubmittingAttendee ? <Loader2 className="size-4 animate-spin" /> : <Check className="size-4" />}
|
|
<span>Guardar Miembro</span>
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
)
|
|
} |