mirror of
https://git.v0id.ovh/n3wt-innov/n3wt-school.git
synced 2026-04-05 20:51:26 +00:00
feat: Gestion du planning [3]
This commit is contained in:
Luc SORIGNET
@ -0,0 +1,299 @@
|
||||
import { usePlanning } from '@/context/PlanningContext';
|
||||
import { format } from 'date-fns';
|
||||
import React from 'react';
|
||||
|
||||
export default function ScheduleEventModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
eventData,
|
||||
setEventData,
|
||||
specialities,
|
||||
teachers,
|
||||
classes
|
||||
}) {
|
||||
const { addEvent, handleUpdateEvent, handleDeleteEvent, schedules } = usePlanning();
|
||||
|
||||
React.useEffect(() => {
|
||||
|
||||
if (!eventData?.planning && schedules.length > 0) {
|
||||
const defaultSchedule = schedules[0];
|
||||
if (eventData?.planning !== defaultSchedule.id) {
|
||||
setEventData((prev) => ({
|
||||
...prev,
|
||||
planning: defaultSchedule.id,
|
||||
}));
|
||||
}
|
||||
}
|
||||
}, [schedules, eventData?.planning]);
|
||||
|
||||
|
||||
const handleSpecialityChange = (specialityId) => {
|
||||
const selectedSpeciality = specialities.find((s) => s.id === parseInt(specialityId, 10));
|
||||
if (selectedSpeciality) {
|
||||
setEventData((prev) => ({
|
||||
...prev,
|
||||
speciality: selectedSpeciality.id,
|
||||
title: selectedSpeciality.name, // Définit la matière
|
||||
color: selectedSpeciality.color_code, // Définit la couleur associée
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const handleTeacherChange = (teacherId) => {
|
||||
const selectedTeacher = teachers.find((t) => t.id === parseInt(teacherId, 10));
|
||||
if (selectedTeacher) {
|
||||
setEventData((prev) => ({
|
||||
...prev,
|
||||
teacher: selectedTeacher.id,
|
||||
description: `${selectedTeacher.first_name} ${selectedTeacher.last_name}`, // Définit le nom du professeur
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const handlePlanningChange = (planningId) => {
|
||||
const selectedSchedule = schedules.find((s) => s.id === parseInt(planningId, 10));
|
||||
if (selectedSchedule) {
|
||||
setEventData((prev) => ({
|
||||
...prev,
|
||||
planning: selectedSchedule.id,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const handleColorChange = (color) => {
|
||||
setEventData((prev) => ({
|
||||
...prev,
|
||||
color, // Permet de changer manuellement la couleur
|
||||
}));
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!eventData.speciality) {
|
||||
alert('Veuillez sélectionner une matière');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!eventData.teacher) {
|
||||
alert('Veuillez sélectionner un professeur');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!eventData.planning) {
|
||||
alert('Veuillez sélectionner un planning');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!eventData.location) {
|
||||
alert('Veuillez saisir un lieu');
|
||||
return;
|
||||
}
|
||||
|
||||
if (eventData.id) {
|
||||
handleUpdateEvent(eventData.id, eventData);
|
||||
} else {
|
||||
addEvent({
|
||||
...eventData,
|
||||
id: `event-${Date.now()}`,
|
||||
});
|
||||
}
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
if (
|
||||
eventData.id &&
|
||||
confirm('Êtes-vous sûr de vouloir supprimer cet événement ?')
|
||||
) {
|
||||
handleDeleteEvent(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">
|
||||
{/* Planning */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Planning
|
||||
</label>
|
||||
<select
|
||||
value={eventData.planning || ''}
|
||||
onChange={(e) => handlePlanningChange(e.target.value)}
|
||||
className="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-emerald-500"
|
||||
required
|
||||
>
|
||||
<option value="" disabled>
|
||||
Sélectionnez un planning
|
||||
</option>
|
||||
{schedules.map((schedule) => (
|
||||
<option key={schedule.id} value={schedule.id}>
|
||||
{schedule.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Matière */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Matière
|
||||
</label>
|
||||
<select
|
||||
value={eventData.speciality || ''}
|
||||
onChange={(e) => handleSpecialityChange(e.target.value)}
|
||||
className="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-emerald-500"
|
||||
required
|
||||
>
|
||||
<option value="" disabled>
|
||||
Sélectionnez une matière
|
||||
</option>
|
||||
{specialities.map((speciality) => (
|
||||
<option key={speciality.id} value={speciality.id}>
|
||||
{speciality.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Professeur */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Professeur
|
||||
</label>
|
||||
<select
|
||||
value={eventData.teacher || ''}
|
||||
onChange={(e) => handleTeacherChange(e.target.value)}
|
||||
className="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-emerald-500"
|
||||
required
|
||||
>
|
||||
<option value="" disabled>
|
||||
Sélectionnez un professeur
|
||||
</option>
|
||||
{teachers.map((teacher) => (
|
||||
<option key={teacher.id} value={teacher.id}>
|
||||
{`${teacher.first_name} ${teacher.last_name}`}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</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"
|
||||
placeholder="Saisissez un lieu"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Couleur */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Couleur
|
||||
</label>
|
||||
<input
|
||||
type="color"
|
||||
value={eventData.color || '#10b981'}
|
||||
onChange={(e) => handleColorChange(e.target.value)}
|
||||
className="w-full h-10 p-1 rounded border"
|
||||
/>
|
||||
</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={
|
||||
eventData.start
|
||||
? 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={
|
||||
eventData.end
|
||||
? 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>
|
||||
|
||||
{/* 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user