140 lines
4.2 KiB
TypeScript
140 lines
4.2 KiB
TypeScript
'use client';
|
|
import { useState } from 'react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
|
import { Label } from '@/components/ui/label';
|
|
import { participantService } from '@/lib/services';
|
|
|
|
interface AddParticipantModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onSuccess: () => void;
|
|
campaignId: string;
|
|
campaignTitle?: string;
|
|
}
|
|
|
|
export default function AddParticipantModal({ isOpen, onClose, onSuccess, campaignId, campaignTitle }: AddParticipantModalProps) {
|
|
const [formData, setFormData] = useState({
|
|
first_name: '',
|
|
last_name: '',
|
|
email: ''
|
|
});
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState('');
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
setError('');
|
|
|
|
try {
|
|
await participantService.create({
|
|
campaign_id: campaignId,
|
|
first_name: formData.first_name,
|
|
last_name: formData.last_name,
|
|
email: formData.email
|
|
});
|
|
|
|
onSuccess();
|
|
setFormData({
|
|
first_name: '',
|
|
last_name: '',
|
|
email: ''
|
|
});
|
|
} catch (err: any) {
|
|
const errorMessage = err?.message || err?.details || 'Erreur lors de l\'ajout du participant';
|
|
setError(`Erreur lors de l'ajout du participant: ${errorMessage}`);
|
|
console.error('Erreur lors de l\'ajout du participant:', err);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setFormData(prev => ({
|
|
...prev,
|
|
[e.target.name]: e.target.value
|
|
}));
|
|
};
|
|
|
|
const handleClose = () => {
|
|
setFormData({
|
|
first_name: '',
|
|
last_name: '',
|
|
email: ''
|
|
});
|
|
setError('');
|
|
onClose();
|
|
};
|
|
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={handleClose}>
|
|
<DialogContent className="sm:max-w-[500px]">
|
|
<DialogHeader>
|
|
<DialogTitle>Ajouter un participant</DialogTitle>
|
|
<DialogDescription>
|
|
{campaignTitle && `Ajoutez un nouveau participant à la campagne "${campaignTitle}".`}
|
|
{!campaignTitle && 'Ajoutez un nouveau participant à cette campagne.'}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
{error && (
|
|
<div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
|
|
<p className="text-sm text-red-600 dark:text-red-400">{error}</p>
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="first_name">Prénom *</Label>
|
|
<Input
|
|
id="first_name"
|
|
name="first_name"
|
|
value={formData.first_name}
|
|
onChange={handleChange}
|
|
placeholder="Prénom"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="last_name">Nom *</Label>
|
|
<Input
|
|
id="last_name"
|
|
name="last_name"
|
|
value={formData.last_name}
|
|
onChange={handleChange}
|
|
placeholder="Nom"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email">Email *</Label>
|
|
<Input
|
|
id="email"
|
|
name="email"
|
|
type="email"
|
|
value={formData.email}
|
|
onChange={handleChange}
|
|
placeholder="email@example.com"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button type="button" variant="outline" onClick={handleClose}>
|
|
Annuler
|
|
</Button>
|
|
<Button type="submit" disabled={loading}>
|
|
{loading ? 'Ajout...' : 'Ajouter le participant'}
|
|
</Button>
|
|
</DialogFooter>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|