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

création de classe (#2)

Front-End/src/components/Structure/Planning/ClassesInfo.js

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import SelectChoice from '@/components/SelectChoice';
+import { Users } from 'lucide-react';
+import DraggableSpeciality from '@/components/Structure/Planning/DraggableSpeciality';
+
+const groupSpecialitiesBySubject = (enseignants) => {
+  const groupedSpecialities = {};
+
+  enseignants.forEach(teacher => {
+    teacher.specialites.forEach(specialite => {
+      if (!groupedSpecialities[specialite.id]) {
+        groupedSpecialities[specialite.id] = {
+          ...specialite,
+          teachers: [`${teacher.nom} ${teacher.prenom}`],
+        };
+      } else {
+        groupedSpecialities[specialite.id].teachers.push(`${teacher.nom} ${teacher.prenom}`);
+      }
+    });
+  });
+
+  return Object.values(groupedSpecialities);
+};
+
+const ClassesInfo = ({ classes, onClassSelect }) => {
+  const [selectedClass, setSelectedClass] = useState(null); // Nouvelle variable d'état pour la classe sélectionnée
+
+  const handleClassChange = (event) => {
+    const classId = event.target.value;
+    const selectedClass = classes.find(classe => classe.id === parseInt(classId));
+    setSelectedClass(selectedClass);
+    onClassSelect(selectedClass);
+  };
+
+  const classChoices = [
+    { value: '', label: 'Sélectionner...' },
+    ...classes.map(classe => ({
+      value: classe.id,
+      label: classe.nom_ambiance,
+    }))
+  ];
+
+  // S'assurer que `selectedClass` n'est pas null avant d'appeler `groupSpecialitiesBySubject`
+  const groupedSpecialities = selectedClass ? groupSpecialitiesBySubject(selectedClass.enseignants) : [];
+
+  return (
+    <div className="p-4 bg-white shadow rounded mb-4">
+      {classes.length > 0 ? (
+        <SelectChoice
+          name="classes"
+          label="Classes"
+          IconItem={Users}
+          selected={selectedClass ? selectedClass.id : ''}
+          choices={classChoices}
+          callback={handleClassChange}
+        />
+      ) : (
+        <p>Aucune classe disponible.</p>
+      )}
+
+      {selectedClass && (
+        <div className="specialities mt-4">
+          <label className="block text-sm font-medium text-gray-700 mb-4">Spécialités</label>
+          {groupedSpecialities.map((specialite, index) => {
+            // Combiner l'ID de la spécialité avec les IDs des enseignants pour créer une clé unique
+            const uniqueId = `${specialite.id}-${specialite.teachers.map(teacher => teacher.id).join('-')}-${index}`;
+            
+            return (
+              <DraggableSpeciality
+                key={uniqueId}  // Utilisation de l'ID unique généré
+                specialite={specialite}
+              />
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ClassesInfo;