acasini/n3wt-school
1
0
Fork 0
mirror of https://git.v0id.ovh/n3wt-innov/n3wt-school.git synced 2026-01-29 16:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Création de nouveaux composants / update formulaire de

Browse Source 
création de classe (#2)
This commit is contained in:
N3WT DE COMPET
2024-12-14 15:28:07 +01:00
parent cf144310a1
commit 7acae479da
43 changed files with 2374 additions and 441 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
Front-End/src/components/Structure/Planning/SpecialityEventModal.js Normal file
View File

@ -0,0 +1,186 @@
import { usePlanning } from '@/context/PlanningContext';
import SelectChoice from '@/components/SelectChoice';
import { format } from 'date-fns';
import React, { useEffect } from 'react';
import { Users, BookOpen } from 'lucide-react';
export default function SpecialityEventModal({ isOpen, onClose, eventData, setEventData, selectedClass }) {
const { addEvent, updateEvent, deleteEvent, schedules } = usePlanning();
useEffect(() => {
if (!isOpen) {
// Réinitialiser eventData lorsque la modale se ferme
setEventData({
scheduleId: '',
specialiteId: '',
specialities: [],
// Réinitialiser d'autres champs si nécessaire
});
}
}, [isOpen, setEventData]);
useEffect(() => {
if (isOpen && selectedClass) {
setEventData(prev => ({
...prev,
scheduleId: selectedClass.id,
specialities: Array.from(new Map(
selectedClass.enseignants.flatMap(teacher =>
teacher.specialites.map(specialite => [specialite.id, {
id: specialite.id,
nom: specialite.nom,
codeCouleur: specialite.codeCouleur
}])
)
).values())
}));
}
}, [isOpen, selectedClass, setEventData]);
if (!isOpen) return null;
const handleSubmit = (e) => {
e.preventDefault();
if (!eventData.scheduleId) {
alert('Veuillez sélectionner une spécialité');
return;
}
const selectedSchedule = schedules.find(s => s.id === eventData.scheduleId);
if (eventData.id) {
updateEvent(eventData.id, {
...eventData,
scheduleId: eventData.scheduleId,
color: eventData.color || selectedSchedule?.color
});
} else {
addEvent({
...eventData,
id: `event-${Date.now()}`,
scheduleId: eventData.scheduleId,
color: eventData.color || selectedSchedule?.color
});
}
onClose();
};
const handleDelete = () => {
if (eventData.id && confirm('Êtes-vous sûr de vouloir supprimer cet événement ?')) {
deleteEvent(eventData.id);
onClose();
}
};
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className="bg-white p-6 rounded-lg w-full max-w-md">
<h2 className="text-xl font-semibold mb-4">
{eventData.id ? 'Modifier l\'événement' : 'Nouvel événement'}
</h2>
<form onSubmit={handleSubmit} className="space-y-4">
{/* Sélection de la Spécialité */}
<div>
{eventData.scheduleId && eventData.specialities && eventData.specialities.length > 0 ? (
<SelectChoice
name={`spécialités-${eventData.scheduleId}`}
label="Spécialités"
selected={eventData.specialiteId ? eventData.specialiteId : ''}
choices={eventData.specialities.map(specialite => ({
value: specialite.id,
label: specialite.nom
}))}
callback={(event) => {
const selectedSpecialityId = event.target.value;
const selectedSpeciality = eventData.specialities.find(specialite => specialite.id === parseInt(selectedSpecialityId, 10));
setEventData({
...eventData,
specialiteId: selectedSpecialityId,
color: selectedSpeciality?.codeCouleur || '#10b981'
});
}}
IconItem={BookOpen}
/>
) : (
<p>Aucune spécialité disponible pour cette classe.</p>
)}
</div>
{/* Dates */}
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Début
</label>
<input
type="datetime-local"
value={format(new Date(eventData.start), "yyyy-MM-dd'T'HH:mm")}
onChange={(e) => setEventData({ ...eventData, start: new Date(e.target.value).toISOString() })}
className="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-emerald-500"
required
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Fin
</label>
<input
type="datetime-local"
value={format(new Date(eventData.end), "yyyy-MM-dd'T'HH:mm")}
onChange={(e) => setEventData({ ...eventData, end: new Date(e.target.value).toISOString() })}
className="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-emerald-500"
required
/>
</div>
</div>
{/* Lieu */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Lieu
</label>
<input
type="text"
value={eventData.location || ''}
onChange={(e) => setEventData({ ...eventData, location: e.target.value })}
className="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-emerald-500"
/>
</div>
{/* Boutons */}
<div className="flex justify-between gap-2 mt-6">
<div>
{eventData.id && (
<button
type="button"
onClick={handleDelete}
className="px-4 py-2 text-red-600 hover:bg-red-50 rounded"
>
Supprimer
</button>
)}
</div>
<div className="flex gap-2">
<button
type="button"
onClick={onClose}
className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded"
>
Annuler
</button>
<button
type="submit"
className="px-4 py-2 bg-emerald-600 text-white rounded hover:bg-emerald-700"
>
{eventData.id ? 'Modifier' : 'Créer'}
</button>
</div>
</div>
</form>
</div>
</div>
);
}