139 lines
7.1 KiB
React
139 lines
7.1 KiB
React
import { useState, useEffect } from 'react'
|
|
import { useNavigate, useParams, Link } from 'react-router-dom'
|
|
import { useAuth } from '../context/AuthContext'
|
|
|
|
export default function EditGuestForm() {
|
|
const { id } = useParams()
|
|
const { authFetch, user } = useAuth()
|
|
const navigate = useNavigate()
|
|
const [form, setForm] = useState({
|
|
prenom: '', nom: '', societe: '', activite: '',
|
|
telephone: '', email: '', site_web: '', commentaires: '',
|
|
date_club: '',
|
|
})
|
|
const [error, setError] = useState('')
|
|
const [busy, setBusy] = useState(false)
|
|
const [showBlockedModal, setShowBlockedModal] = useState(false)
|
|
|
|
useEffect(() => {
|
|
authFetch(`/api/guests/${id}`)
|
|
.then((r) => (r.ok ? r.json() : null))
|
|
.then((data) => {
|
|
if (data) setForm({
|
|
prenom: data.prenom || '',
|
|
nom: data.nom || '',
|
|
societe: data.societe || '',
|
|
activite: data.activite || '',
|
|
telephone: data.telephone || '',
|
|
email: data.email || '',
|
|
site_web: data.site_web || '',
|
|
commentaires: data.commentaires || '',
|
|
date_club: data.date_club ? data.date_club.split('T')[0] : '',
|
|
})
|
|
})
|
|
}, [id])
|
|
|
|
const handleChange = (e) => {
|
|
const { name, value } = e.target
|
|
setForm((f) => ({ ...f, [name]: value }))
|
|
}
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault()
|
|
setError('')
|
|
const BLOCKED_DATES = ['2026-10-20', '2026-12-15']
|
|
if (BLOCKED_DATES.includes(form.date_club)) {
|
|
setShowBlockedModal(true)
|
|
return
|
|
}
|
|
setBusy(true)
|
|
try {
|
|
const r = await authFetch(`/api/guests/${id}`, {
|
|
method: 'PUT',
|
|
body: JSON.stringify(form),
|
|
})
|
|
if (!r.ok) {
|
|
const err = await r.json()
|
|
throw new Error(err.error || 'Erreur')
|
|
}
|
|
navigate('/guests')
|
|
} catch (err) {
|
|
setError(err.message)
|
|
} finally {
|
|
setBusy(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<Link to="/guests" className="text-blue-700 text-sm">← Retour</Link>
|
|
<h2 className="text-xl font-bold text-gray-800">Modifier l'invite(e)</h2>
|
|
{error && <div className="bg-red-100 text-red-700 rounded-lg p-3 text-sm">{error}</div>}
|
|
<form onSubmit={handleSubmit} className="bg-white rounded-xl p-5 shadow-sm space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Invite par</label>
|
|
<input type="text" value={`${user?.prenom} ${user?.nom}`} disabled className="w-full px-4 py-3 rounded-lg bg-gray-100 border border-gray-200 text-gray-500 text-base" />
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Prenom *</label>
|
|
<input name="prenom" required value={form.prenom} onChange={handleChange} className="w-full px-4 py-3 rounded-lg border border-gray-300 outline-none focus:ring-2 focus:ring-blue-500 text-base" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Nom *</label>
|
|
<input name="nom" required value={form.nom} onChange={handleChange} className="w-full px-4 py-3 rounded-lg border border-gray-300 outline-none focus:ring-2 focus:ring-blue-500 text-base" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Societe *</label>
|
|
<input name="societe" required value={form.societe} onChange={handleChange} className="w-full px-4 py-3 rounded-lg border border-gray-300 outline-none focus:ring-2 focus:ring-blue-500 text-base" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Activite *</label>
|
|
<input name="activite" required value={form.activite} onChange={handleChange} className="w-full px-4 py-3 rounded-lg border border-gray-300 outline-none focus:ring-2 focus:ring-blue-500 text-base" />
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Telephone *</label>
|
|
<input name="telephone" type="tel" required value={form.telephone} onChange={handleChange} className="w-full px-4 py-3 rounded-lg border border-gray-300 outline-none focus:ring-2 focus:ring-blue-500 text-base" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Email *</label>
|
|
<input name="email" type="email" required value={form.email} onChange={handleChange} className="w-full px-4 py-3 rounded-lg border border-gray-300 outline-none focus:ring-2 focus:ring-blue-500 text-base" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Date de venue *</label>
|
|
<input name="date_club" type="date" required value={form.date_club} onChange={handleChange} className="w-full px-4 py-3 rounded-lg border border-gray-300 outline-none focus:ring-2 focus:ring-blue-500 text-base" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Site internet</label>
|
|
<input name="site_web" type="url" value={form.site_web} onChange={handleChange} placeholder="https://..." className="w-full px-4 py-3 rounded-lg border border-gray-300 outline-none focus:ring-2 focus:ring-blue-500 text-base" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Commentaires</label>
|
|
<textarea name="commentaires" rows={3} value={form.commentaires} onChange={handleChange} className="w-full px-4 py-3 rounded-lg border border-gray-300 outline-none focus:ring-2 focus:ring-blue-500 text-base" />
|
|
</div>
|
|
<button type="submit" disabled={busy} className="w-full bg-blue-900 text-white py-3 rounded-xl font-semibold text-base hover:bg-blue-800 active:bg-blue-950 transition disabled:opacity-50">
|
|
{busy ? 'Enregistrement...' : 'Enregistrer les modifications'}
|
|
</button>
|
|
</form>
|
|
|
|
{showBlockedModal && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={() => setShowBlockedModal(false)}>
|
|
<div className="bg-white rounded-2xl p-6 shadow-xl max-w-sm w-full mx-4 text-center" onClick={(e) => e.stopPropagation()}>
|
|
<div className="w-14 h-14 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<span className="text-2xl">⛔</span>
|
|
</div>
|
|
<h3 className="text-lg font-bold text-gray-800 mb-2">Date non disponible</h3>
|
|
<p className="text-sm text-gray-500 mb-6">Cette date n'accepte pas de nouveaux invités.</p>
|
|
<button onClick={() => setShowBlockedModal(false)} className="w-full bg-blue-900 text-white py-3 rounded-xl font-semibold text-sm hover:bg-blue-800 active:bg-blue-950 transition">
|
|
OK
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|