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

création de classe (#2)
2026-01-29 07:53:23 +00:00 · 2024-12-14 15:28:07 +01:00
parent cf144310a1
commit 7acae479da
43 changed files with 2374 additions and 441 deletions
--- a/Front-End/src/components/Structure/Planning/ScheduleManagement.js
+++ b/Front-End/src/components/Structure/Planning/ScheduleManagement.js
@ -0,0 +1,195 @@
+'use client'
+
+import React, { useState, useEffect, useRef } from 'react';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import { DndProvider } from 'react-dnd';
+import { AnimatePresence, findSpring, motion } from 'framer-motion'; // Ajouter cet import
+import PlanningClassView from '@/components/Structure/Planning/PlanningClassView';
+import SpecialityEventModal from '@/components/Structure/Planning/SpecialityEventModal';
+import ClassesInfo from '@/components/Structure/Planning/ClassesInfo';
+import { BK_GESTIONENSEIGNANTS_PLANNING_URL } from '@/utils/Url';
+import { ChevronLeft, ChevronRight, Calendar } from 'lucide-react'
+import SelectChoice from '@/components/SelectChoice';
+
+const ScheduleManagement = ({ schedules, setSchedules, handleUpdatePlanning, specialities, teachers, classes }) => {
+
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [selectedClass, setSelectedClass] = useState(null);
+    const [schedule, setSchedule] = useState(null);
+    const scheduleRef = useRef(null);
+    const scheduleId = useRef(null);
+    const [planningType, setPlanningType] = useState('TRIMESTRIEL');
+    const [currentPeriod, setCurrentPeriod] = useState('T1');
+
+    const planningChoices = [
+        { value: 'TRIMESTRIEL', label: 'TRIMESTRIEL' },
+        { value: 'SEMESTRIEL', label: 'SEMESTRIEL' },
+        { value: 'ANNUEL', label: 'ANNUEL' },
+      ];
+
+    useEffect(() => { 
+        if (selectedClass) {
+            scheduleId.current = selectedClass.planning.id;
+            setSchedule(selectedClass.planning);
+        } else {
+            setSchedule(null);
+        }
+    }, [selectedClass]);
+
+    // Synchroniser scheduleRef avec schedule
+    useEffect(() => { 
+        scheduleRef.current = schedule; 
+    }, [schedule]);
+
+    const handleClassSelect = (cls) => { 
+        setSelectedClass(cls);
+    };
+
+    useEffect(() => {
+        if (schedule) {
+          console.log("Schedule data:", schedule);
+        }
+      }, [schedule]);
+      
+
+    // Fonction onDrop dans PlanningClassView ou un composant parent
+    const onDrop = (item, hour, day) => {
+        // Les données de l'élément drag and drop (spécialité par exemple)
+        const { id, name, color, teachers } = item;
+
+        // Créez une nouvelle copie du planning
+        const newSchedule = { ...scheduleRef.current };
+
+        // Vérifiez s'il existe déjà une entrée pour le jour
+        if (!newSchedule.emploiDuTemps[day]) {
+            newSchedule.emploiDuTemps[day] = [];
+        }
+        const courseTime = `${hour.toString().padStart(2, '0')}:00`;
+
+        // Rechercher s'il y a déjà un cours à l'heure spécifiée
+        const existingCourseIndex = newSchedule.emploiDuTemps[day].findIndex(course =>
+            course.heure === courseTime
+        );
+    
+        const newCourse = {
+            duree: '1',
+            heure: courseTime,
+            matiere: name,
+            teachers: teachers,
+            color: color,
+        };
+
+        // S'il existe déjà un cours à cette heure, on le remplace
+        if (existingCourseIndex !== -1) {
+            newSchedule.emploiDuTemps[day][existingCourseIndex] = newCourse;
+        } else {
+            // Sinon on ajoute le nouveau cours
+            newSchedule.emploiDuTemps[day].push(newCourse);
+        }
+
+        // Mettez à jour l'état du planning
+        setSchedule(newSchedule)
+
+        // Appelez la fonction handleUpdatePlanning en dehors de setSchedule
+        handleUpdatePlanning(`${BK_GESTIONENSEIGNANTS_PLANNING_URL}`, scheduleId.current, newSchedule);
+    };
+    
+    const getPeriodLabel = (period) => {
+        switch(period) {
+            case 'T1': return '1er trimestre';
+            case 'T2': return '2e trimestre';
+            case 'T3': return '3e trimestre';
+            case 'S1': return '1er semestre';
+            case 'S2': return '2e semestre';
+            default: return period;
+        }
+    };
+
+    const handlePeriodChange = (direction) => {
+    if (planningType === 'TRIMESTRIEL') {
+        if (direction === 'prev') {
+        setCurrentPeriod(currentPeriod === 'T1' ? 'T3' : `T${parseInt(currentPeriod.slice(1)) - 1}`);
+        } else {
+        setCurrentPeriod(currentPeriod === 'T3' ? 'T1' : `T${parseInt(currentPeriod.slice(1)) + 1}`);
+        }
+    } else if (planningType === 'SEMESTRIEL') {
+        setCurrentPeriod(currentPeriod === 'S1' ? 'S2' : 'S1');
+    }
+    };
+
+    // Fonctionnalité de gestion des emplois du temps
+    return (
+        <div className="flex flex-col h-full overflow-hidden">
+            <DndProvider backend={HTML5Backend}>
+                <ClassesInfo classes={classes} onClassSelect={handleClassSelect}/>
+
+                <div className="flex justify-between items-center p-4 w-full">
+                    <div className="flex items-center w-full">
+                        <SelectChoice
+                            name="planningType"
+                            IconItem={Calendar}
+                            selected={planningType}
+                            choices={planningChoices}
+                            callback={(e) => {
+                                setPlanningType(e.target.value);
+                                setCurrentPeriod(e.target.value === 'TRIMESTRIEL' ? 'T1' : 'S1');
+                            }}
+                    />
+                </div>
+
+                    {planningType !== 'ANNUEL' && (
+                        <div className="flex items-center justify-center w-full">
+                        <button 
+                            onClick={() => handlePeriodChange('prev')}
+                            className={`mr-4 p-2 border rounded-lg ${
+                            currentPeriod === 'T1' || currentPeriod === 'S1' ? 'bg-gray-300 text-gray-700 cursor-not-allowed' : 'bg-emerald-500 text-white hover:bg-emerald-600'
+                            } transition-colors duration-300`}
+                            disabled={currentPeriod === 'T1' || currentPeriod === 'S1'}
+                        >
+                            <ChevronLeft className="h-6 w-6" />
+                        </button>
+                        <span className="text-lg font-semibold mx-4">{getPeriodLabel(currentPeriod)}</span>
+                        <button 
+                            onClick={() => handlePeriodChange('next')}
+                            className={`ml-4 p-2 border rounded-lg ${
+                            (planningType === 'TRIMESTRIEL' && currentPeriod === 'T3') || (planningType === 'SEMESTRIEL' && currentPeriod === 'S2') ? 'bg-gray-300 text-gray-700 cursor-not-allowed' : 'bg-emerald-500 text-white hover:bg-emerald-600'
+                            } transition-colors duration-300`}
+                            disabled={(planningType === 'TRIMESTRIEL' && currentPeriod === 'T3') || (planningType === 'SEMESTRIEL' && currentPeriod === 'S2')}
+                        >
+                            <ChevronRight className="h-6 w-6" />
+                        </button>
+                        </div>
+                    )}
+                </div>
+
+                <div className="flex-1 max-h-[calc(100vh-192px)] overflow-hidden">
+                    <AnimatePresence mode="wait">
+                        <motion.div
+                            key="year"
+                            initial={{ opacity: 0, y: 20 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            exit={{ opacity: 0, y: -20 }}
+                            transition={{ duration: 0.2 }}
+                            >
+                            <PlanningClassView 
+                                schedule={schedule}
+                                onDrop={onDrop}
+                                planningType={planningType}
+                                currentPeriod={currentPeriod}
+                            />
+                        </motion.div>
+                    </AnimatePresence>
+                </div>
+            </DndProvider>
+            {/* <SpecialityEventModal
+                isOpen={isModalOpen}
+                onClose={() => setIsModalOpen(false)}
+                eventData={eventData}
+                setEventData={setEventData}
+                selectedClass={selectedClass}
+            /> */}
+        </div>
+    );
+};
+
+export default ScheduleManagement;