Fixed bugs on Calendar

components/TrajetForm.tsx

@@ -24,9 +24,19 @@ interface Chauffeur {
 interface TrajetFormProps {
   onClose: () => void;
   onSuccess: () => void;
+  trajetToEdit?: {
+    id: string;
+    date: string;
+    adresseDepart: string;
+    adresseArrivee: string;
+    commentaire?: string | null;
+    statut: string;
+    adherentId: string;
+    chauffeurId?: string | null;
+  };
 }
 
-export default function TrajetForm({ onClose, onSuccess }: TrajetFormProps) {
+export default function TrajetForm({ onClose, onSuccess, trajetToEdit }: TrajetFormProps) {
   const [loading, setLoading] = useState(false);
   const [adherents, setAdherents] = useState<Adherent[]>([]);
   const [chauffeurs, setChauffeurs] = useState<Chauffeur[]>([]);
@@ -38,20 +48,20 @@ export default function TrajetForm({ onClose, onSuccess }: TrajetFormProps) {
   const chauffeurDropdownRef = useRef<HTMLDivElement>(null);
 
   const [formData, setFormData] = useState({
-    adherentId: '',
+    adherentId: trajetToEdit?.adherentId || '',
     adherentNom: '',
     adherentPrenom: '',
     adherentAdresse: '',
     adherentTelephone: '',
-    chauffeurId: '',
+    chauffeurId: trajetToEdit?.chauffeurId || '',
     chauffeurNom: '',
     chauffeurPrenom: '',
     chauffeurTelephone: '',
-    date: '',
-    heure: '',
-    adresseDepart: '',
-    adresseArrivee: '',
-    commentaire: '',
+    date: trajetToEdit ? new Date(trajetToEdit.date).toISOString().split('T')[0] : '',
+    heure: trajetToEdit ? new Date(trajetToEdit.date).toTimeString().slice(0, 5) : '',
+    adresseDepart: trajetToEdit?.adresseDepart || '',
+    adresseArrivee: trajetToEdit?.adresseArrivee || '',
+    commentaire: trajetToEdit?.commentaire || '',
   });
 
   useEffect(() => {
@@ -59,6 +69,49 @@ export default function TrajetForm({ onClose, onSuccess }: TrajetFormProps) {
     fetchChauffeurs();
   }, []);
 
+  useEffect(() => {
+    // Si on modifie un trajet, charger les données de l'adhérent et du chauffeur
+    if (trajetToEdit) {
+      if (trajetToEdit.adherentId) {
+        fetch(`/api/adherents/${trajetToEdit.adherentId}`)
+          .then(res => res.json())
+          .then(data => {
+            if (data) {
+              setFormData(prev => ({
+                ...prev,
+                adherentId: data.id,
+                adherentNom: data.nom,
+                adherentPrenom: data.prenom,
+                adherentAdresse: data.adresse,
+                adherentTelephone: data.telephone,
+                adresseDepart: data.adresse,
+              }));
+              setSearchAdherent(`${data.prenom} ${data.nom}`);
+            }
+          })
+          .catch(console.error);
+      }
+      
+      if (trajetToEdit.chauffeurId) {
+        fetch(`/api/chauffeurs/${trajetToEdit.chauffeurId}`)
+          .then(res => res.json())
+          .then(data => {
+            if (data) {
+              setFormData(prev => ({
+                ...prev,
+                chauffeurId: data.id,
+                chauffeurNom: data.nom,
+                chauffeurPrenom: data.prenom,
+                chauffeurTelephone: data.telephone,
+              }));
+              setSearchChauffeur(`${data.prenom} ${data.nom}`);
+            }
+          })
+          .catch(console.error);
+      }
+    }
+  }, [trajetToEdit]);
+
   // Fermer les dropdowns quand on clique en dehors
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -160,8 +213,11 @@ export default function TrajetForm({ onClose, onSuccess }: TrajetFormProps) {
         ? new Date(`${formData.date}T09:00`).toISOString()
         : new Date().toISOString();
 
-      const response = await fetch('/api/trajets', {
-        method: 'POST',
+      const url = trajetToEdit ? `/api/trajets/${trajetToEdit.id}` : '/api/trajets';
+      const method = trajetToEdit ? 'PUT' : 'POST';
+
+      const response = await fetch(url, {
+        method,
         headers: {
           'Content-Type': 'application/json',
         },
@@ -170,7 +226,7 @@ export default function TrajetForm({ onClose, onSuccess }: TrajetFormProps) {
           adresseDepart: formData.adresseDepart,
           adresseArrivee: formData.adresseArrivee,
           commentaire: formData.commentaire || null,
-          statut: 'Planifié',
+          statut: trajetToEdit?.statut || 'Planifié',
           adherentId: formData.adherentId,
           chauffeurId: formData.chauffeurId || null,
         }),
@@ -181,11 +237,11 @@ export default function TrajetForm({ onClose, onSuccess }: TrajetFormProps) {
         onClose();
       } else {
         const error = await response.json();
-        alert(`Erreur: ${error.error || 'Erreur lors de la création du trajet'}`);
+        alert(`Erreur: ${error.error || `Erreur lors de la ${trajetToEdit ? 'modification' : 'création'} du trajet`}`);
       }
     } catch (error) {
-      console.error('Erreur lors de la création du trajet:', error);
-      alert('Erreur lors de la création du trajet');
+      console.error(`Erreur lors de la ${trajetToEdit ? 'modification' : 'création'} du trajet:`, error);
+      alert(`Erreur lors de la ${trajetToEdit ? 'modification' : 'création'} du trajet`);
     } finally {
       setLoading(false);
     }
@@ -202,8 +258,12 @@ export default function TrajetForm({ onClose, onSuccess }: TrajetFormProps) {
         <div className="border-b border-gray-200 px-6 py-5 bg-white">
           <div className="flex items-center justify-between">
             <div>
-              <h2 className="text-2xl font-semibold text-gray-900">Nouveau trajet</h2>
-              <p className="text-sm text-gray-500 mt-1">Créez un nouveau trajet pour un adhérent</p>
+              <h2 className="text-2xl font-semibold text-gray-900">
+                {trajetToEdit ? 'Modifier le trajet' : 'Nouveau trajet'}
+              </h2>
+              <p className="text-sm text-gray-500 mt-1">
+                {trajetToEdit ? 'Modifiez les informations du trajet' : 'Créez un nouveau trajet pour un adhérent'}
+              </p>
             </div>
             <button
               onClick={onClose}
@@ -487,10 +547,10 @@ export default function TrajetForm({ onClose, onSuccess }: TrajetFormProps) {
                     <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                     <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                   </svg>
-                  Création...
+                  {trajetToEdit ? 'Modification...' : 'Création...'}
                 </>
               ) : (
-                'Créer le trajet'
+                trajetToEdit ? 'Modifier le trajet' : 'Créer le trajet'
               )}
             </button>
           </div>