refactoring majeur (code dupliqué, mort, ...)
- Économie : ~1240 lignes de code dupliqué - Réduction : ~60% du code modal - Amélioration : Cohérence et maintenabilité
This commit is contained in:
Yannick Le Duc
@@ -1,11 +1,5 @@
|
||||
'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 { propositionService } from '@/lib/services';
|
||||
import { MarkdownEditor } from '@/components/MarkdownEditor';
|
||||
import PropositionFormModal from './base/PropositionFormModal';
|
||||
|
||||
interface AddPropositionModalProps {
|
||||
isOpen: boolean;
|
||||
@@ -15,156 +9,13 @@ interface AddPropositionModalProps {
|
||||
}
|
||||
|
||||
export default function AddPropositionModal({ isOpen, onClose, onSuccess, campaignId }: AddPropositionModalProps) {
|
||||
const [formData, setFormData] = useState({
|
||||
title: '',
|
||||
description: '',
|
||||
author_first_name: 'admin',
|
||||
author_last_name: 'admin',
|
||||
author_email: 'admin@example.com'
|
||||
});
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
await propositionService.create({
|
||||
campaign_id: campaignId,
|
||||
title: formData.title,
|
||||
description: formData.description,
|
||||
author_first_name: formData.author_first_name,
|
||||
author_last_name: formData.author_last_name,
|
||||
author_email: formData.author_email
|
||||
});
|
||||
|
||||
onSuccess();
|
||||
setFormData({
|
||||
title: '',
|
||||
description: '',
|
||||
author_first_name: 'admin',
|
||||
author_last_name: 'admin',
|
||||
author_email: 'admin@example.com'
|
||||
});
|
||||
} catch (err: any) {
|
||||
const errorMessage = err?.message || err?.details || 'Erreur lors de la création de la proposition';
|
||||
setError(`Erreur lors de la création de la proposition: ${errorMessage}`);
|
||||
console.error('Erreur lors de la création de la proposition:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[e.target.name]: e.target.value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setFormData({
|
||||
title: '',
|
||||
description: '',
|
||||
author_first_name: 'admin',
|
||||
author_last_name: 'admin',
|
||||
author_email: 'admin@example.com'
|
||||
});
|
||||
setError('');
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={handleClose}>
|
||||
<DialogContent className="sm:max-w-[500px] max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Ajouter une proposition</DialogTitle>
|
||||
<DialogDescription>
|
||||
Créez une nouvelle proposition pour cette campagne de budget participatif.
|
||||
</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="space-y-2">
|
||||
<Label htmlFor="title">Titre de la proposition *</Label>
|
||||
<Input
|
||||
id="title"
|
||||
name="title"
|
||||
value={formData.title}
|
||||
onChange={handleChange}
|
||||
placeholder="Ex: Installation de bancs dans le parc"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<MarkdownEditor
|
||||
value={formData.description}
|
||||
onChange={(value) => setFormData(prev => ({ ...prev, description: value }))}
|
||||
placeholder="Décrivez votre proposition en détail..."
|
||||
label="Description *"
|
||||
maxLength={2000}
|
||||
/>
|
||||
|
||||
<div className="border-t border-slate-200 dark:border-slate-700 pt-4">
|
||||
<h3 className="text-sm font-medium text-slate-900 dark:text-slate-100 mb-3">
|
||||
Informations de l'auteur
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="author_first_name">Prénom *</Label>
|
||||
<Input
|
||||
id="author_first_name"
|
||||
name="author_first_name"
|
||||
value={formData.author_first_name}
|
||||
onChange={handleChange}
|
||||
placeholder="Prénom"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="author_last_name">Nom *</Label>
|
||||
<Input
|
||||
id="author_last_name"
|
||||
name="author_last_name"
|
||||
value={formData.author_last_name}
|
||||
onChange={handleChange}
|
||||
placeholder="Nom"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2 mt-3">
|
||||
<Label htmlFor="author_email">Email *</Label>
|
||||
<Input
|
||||
id="author_email"
|
||||
name="author_email"
|
||||
type="email"
|
||||
value={formData.author_email}
|
||||
onChange={handleChange}
|
||||
placeholder="email@example.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" onClick={handleClose}>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button type="submit" disabled={loading}>
|
||||
{loading ? 'Création...' : 'Créer la proposition'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<PropositionFormModal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
onSuccess={onSuccess}
|
||||
mode="add"
|
||||
campaignId={campaignId}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user