feat: Evolution des modèles pour intégrer un planning et du m2m

Front-End/src/components/CheckBoxList.js

@@ -0,0 +1,43 @@
+const CheckBoxList = ({ items, formData, handleChange, fieldName, label, icon: Icon, className, itemLabelFunc = (item) => item.name }) => {
+    const handleCheckboxChange = (e) => {
+      handleChange(e);
+    };
+  
+    return (
+      <div className={`mb-4 ${className}`}>
+        <label className="block text-sm font-medium text-gray-700 flex items-center">
+          {Icon && <Icon className="w-5 h-5 mr-2" />}
+          {label}
+        </label>
+        <div className="mt-2 grid grid-cols-1 gap-4">
+          {items.map(item => (
+            <div key={item.id} className="flex items-center">
+              <input
+                type="checkbox"
+                id={`${fieldName}-${item.id}`}
+                name={fieldName}
+                value={item.id}
+                checked={formData[fieldName].includes(item.id)}
+                onChange={handleCheckboxChange}
+                className="form-checkbox h-4 w-4 rounded-md text-emerald-600 hover:ring-emerald-400 checked:bg-emerald-600 hover:border-emerald-500 hover:bg-emerald-500 cursor-pointer"
+                style={{ borderRadius: '6px', outline: 'none', boxShadow: 'none' }} // Remove focus styles
+              />
+              <label htmlFor={`${fieldName}-${item.id}`} className="ml-2 block text-sm text-gray-900 flex items-center">
+                {itemLabelFunc(item)}
+                {item.codeCouleur && (
+                  <div
+                    className="w-4 h-4 rounded-full ml-2 hover:bg-opacity-70 transition duration-200 ease-in-out"
+                    style={{ backgroundColor: item.codeCouleur }}
+                    title={item.codeCouleur}
+                  ></div>
+                )}
+              </label>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  };
+  
+  export default CheckBoxList;
+  

Front-End/src/components/ClassForm.js

@@ -3,7 +3,7 @@ import Slider from '@/components/Slider'
 import InputTextIcon from '@/components/InputTextIcon';
 import Button from '@/components/Button';
 import SelectChoice from '@/components/SelectChoice';
-import RadioList from '@/components/RadioList';
+import CheckBoxList from '@/components/CheckBoxList';
 import  { Users, Maximize2, Globe, Calendar, GraduationCap } from 'lucide-react';
 
 const ClassForm = ({ classe, onSubmit, isNew, specialities, teachers }) => {
@@ -19,17 +19,32 @@ const ClassForm = ({ classe, onSubmit, isNew, specialities, teachers }) => {
     nombre_eleves: classe.nombre_eleves || '',
     langue_enseignement: classe.langue_enseignement || 'Français',
     annee_scolaire: classe.annee_scolaire || '',
-    specialites_ids: classe.specialites_ids || [],
-    enseignant_principal_id: classe.enseignant_principal_id || null,
+    enseignants_ids: classe.enseignants_ids || [],
+    planning: classe.planning || []
   });
 
   const handleChange = (e) => {
-    const { name, value, type } = e.target;
-    const newValue = type === 'radio' ? parseInt(value) : value;
-    setFormData((prevState) => ({
-      ...prevState,
-      [name]: newValue,
-    }));
+    const target = e.target || e.currentTarget;
+    const { name, value, type, checked } = target;
+  
+    console.log('type : ', type);
+  
+    if (type === 'checkbox') {
+      setFormData((prevState) => {
+        const newValues = checked 
+          ? [...(prevState[name] || []), parseInt(value, 10)]
+          : (prevState[name] || []).filter((v) => v !== parseInt(value, 10));
+        return {
+          ...prevState,
+          [name]: newValues,
+        };
+      });
+    } else {
+      setFormData((prevState) => ({
+        ...prevState,
+        [name]: type === 'radio' ? parseInt(value, 10) : value,
+      }));
+    }
   };
 
   const handleSliderChange = (value) => {
@@ -48,21 +63,33 @@ const ClassForm = ({ classe, onSubmit, isNew, specialities, teachers }) => {
   };
 
   const handleSubmit = () => {
-    onSubmit(formData, isNew);
+    const updatedFormData = { 
+      ...formData, 
+      planning: formData.planning || [] 
+    }; 
+    onSubmit(updatedFormData, isNew);
   };
 
-  const handleSpecialityChange = (id) => {
-    setFormData(prevFormData => {
-      const specialites_ids = prevFormData.specialites_ids.includes(id)
-        ? prevFormData.specialites_ids.filter(specialityId => specialityId !== id)
-        : [...prevFormData.specialites_ids, id];
-      return { ...prevFormData, specialites_ids };
-    });
-  };
-
-  const getTeacherLabel = (teacher) => { 
-    return `${teacher.nom} ${teacher.prenom} (${teacher.specialite.nom})`; 
-  };
+  const getTeacherLabel = (teacher) => {
+    return (
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <span>{teacher.nom} {teacher.prenom} -</span>
+        {teacher.specialites.map(specialite => (
+          <span
+            key={specialite.id}
+            style={{ display: 'flex', alignItems: 'center', marginLeft: '8px' }}
+          >
+            <span>{specialite.nom}</span>
+            <span
+              className="w-4 h-4 rounded-full ml-1"
+              style={{ backgroundColor: specialite.codeCouleur }}
+              title={specialite.nom}
+            ></span>
+          </span>
+        ))}
+      </div>
+    );
+  };  
 
   return (
     <form onSubmit={handleSubmit} className="space-y-4 mt-8">
@@ -121,56 +148,28 @@ const ClassForm = ({ classe, onSubmit, isNew, specialities, teachers }) => {
           className="w-full"
         />
       </div>
-      <div>
-        <label className="block text-sm font-medium text-gray-700">
-          Spécialités
-        </label>
-        <div className="mt-2 grid grid-cols-1 gap-4">
-          {specialities.map(speciality => (
-            <div key={speciality.id} className="flex items-center">
-              <input
-                type="checkbox"
-                id={`speciality-${speciality.id}`}
-                name="specialites"
-                value={speciality.id}
-                checked={formData.specialites_ids.includes(speciality.id)}
-                onChange={() => handleSpecialityChange(speciality.id)}
-                className="h-4 w-4 text-emerald-600 border-gray-300 rounded focus:ring-emerald-500"
-              />
-              <label htmlFor={`speciality-${speciality.id}`} className="ml-2 block text-sm text-gray-900 flex items-center">
-                {speciality.nom}
-                <div
-                className="w-4 h-4 rounded-full ml-2"
-                style={{ backgroundColor: speciality.codeCouleur }}
-                title={speciality.codeCouleur}
-              ></div>
-              </label>
-            </div>
-          ))}
-        </div>
-      </div>
       <div className="flex space-x-4">
-        <RadioList
+        <CheckBoxList
           items={teachers}
           formData={formData}
           handleChange={handleChange}
-          fieldName="enseignant_principal_id"
-          label="Enseignant principal"
-          itemLabelFunc={getTeacherLabel}
+          fieldName="enseignants_ids"
+          label="Enseignants"
           icon={GraduationCap}
           className="w-full mt-4"
+          itemLabelFunc={getTeacherLabel}
         />
       </div>
       <div className="flex justify-end mt-4 space-x-4">
         <Button   text="Créer"
                   onClick={handleSubmit}
                   className={`px-4 py-2 rounded-md shadow-sm focus:outline-none ${
-                      (!formData.nom_ambiance || !formData.nombre_eleves || !formData.annee_scolaire || !formData.enseignant_principal_id)
+                      (!formData.nom_ambiance || !formData.nombre_eleves || !formData.annee_scolaire || formData.enseignants_ids.length === 0)
                           ? "bg-gray-300 text-gray-700 cursor-not-allowed"
                           : "bg-emerald-500 text-white hover:bg-emerald-600"
                   }`}
                   primary
-                  disabled={(!formData.nom_ambiance || !formData.nombre_eleves || !formData.annee_scolaire || !formData.enseignant_principal_id)}
+                  disabled={(!formData.nom_ambiance || !formData.nombre_eleves || !formData.annee_scolaire || formData.enseignants_ids.length === 0)}
                   type="submit"
                   name="Create" />
       </div>

Front-End/src/components/ClassesSection.js

@@ -64,28 +64,25 @@ const ClassesSection = ({ classes, specialities, teachers, handleCreate, handleE
             { name: 'LANGUE D\'ENSEIGNEMENT', transform: (row) => row.langue_enseignement },
             { name: 'ANNEE SCOLAIRE', transform: (row) => row.annee_scolaire },
             {
-              name: 'SPECIALITES',
+              name: 'ENSEIGNANTS',
               transform: (row) => (
                 <div key={row.id} className="flex justify-center items-center space-x-2">
-                  {row.specialites.map(specialite => (
-                    <span
-                      key={specialite.id}
-                      className="w-4 h-4 rounded-full"
-                      style={{ backgroundColor: specialite.codeCouleur }}
-                      title={specialite.nom}
-                    ></span>
+                  {row.enseignants.map(teacher => (
+                    <div key={teacher.id} className="flex items-center space-x-1">
+                      <span>{teacher.nom} {teacher.prenom}</span>
+                      {teacher.specialites.map(specialite => (
+                        <span
+                          key={specialite.id}
+                          className="w-4 h-4 rounded-full"
+                          style={{ backgroundColor: specialite.codeCouleur }}
+                          title={specialite.nom}
+                        ></span>
+                      ))}
+                    </div>
                   ))}
                 </div>
               )
             },
-            {
-              name: 'ENSEIGNANT PRINCIPAL',
-              transform: (row) => {
-                return row.enseignant_principal 
-                  ? `${row.enseignant_principal.nom || ''} ${row.enseignant_principal.prenom || ''}` 
-                  : <i>Non assigné</i>;
-              }              
-            },
             { name: 'ACTIONS', transform: (row) => (
               <DropdownMenu
                   buttonContent={<MoreVertical size={20} className="text-gray-400 hover:text-gray-600" />}

Front-End/src/components/TeacherForm.js

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
-import { GraduationCap, Mail, BookOpen } from 'lucide-react';
+import { GraduationCap, Mail, BookOpen, Check } from 'lucide-react';
 import InputTextIcon from '@/components/InputTextIcon';
 import Button from '@/components/Button';
-import RadioList from '@/components/RadioList';
+import CheckBoxList from '@/components/CheckBoxList';
 import ToggleSwitch from '@/components/ToggleSwitch'
 
 const TeacherForm = ({ teacher, onSubmit, isNew, specialities }) => {
@@ -11,30 +11,47 @@ const TeacherForm = ({ teacher, onSubmit, isNew, specialities }) => {
     nom: teacher.nom || '',
     prenom: teacher.prenom || '',
     mail: teacher.mail || '',
-    specialite_id: teacher.specialite_id || '',
-    classes: teacher.classes || [],
-    profilAssocie_id: teacher.profilAssocie_id || [],
+    specialites_ids: teacher.specialites_ids || [],
+    profilAssocie_id:teacher.profilAssocie_id || '',
     droit: teacher.DroitValue || 0
   });
 
   const handleToggleChange = () => {
-    console.log('new value : ', 1-formData.droit)
     setFormData({ ...formData, droit: 1-formData.droit });
   };
 
   const handleChange = (e) => {
-    const { name, value, type } = e.target;
-    const newValue = type === 'radio' ? parseInt(value, 10) : value;
-    setFormData((prevState) => ({
-      ...prevState,
-      [name]: newValue,
-    }));
+    const target = e.target || e.currentTarget;
+    const { name, value, type, checked } = target;
+  
+    console.log('type : ', type);
+  
+    if (type === 'checkbox') {
+      setFormData((prevState) => {
+        const newValues = checked 
+          ? [...(prevState[name] || []), parseInt(value, 10)]
+          : (prevState[name] || []).filter((v) => v !== parseInt(value, 10));
+        return {
+          ...prevState,
+          [name]: newValues,
+        };
+      });
+    } else {
+      setFormData((prevState) => ({
+        ...prevState,
+        [name]: type === 'radio' ? parseInt(value, 10) : value,
+      }));
+    }
   };
 
   const handleSubmit = () => {
     onSubmit(formData, isNew);
   };
 
+  const getSpecialityLabel = (speciality) => { 
+    return `${speciality.nom}`; 
+  };
+
   return (
     <form onSubmit={handleSubmit} className="space-y-4 mt-8">
       <div>
@@ -71,14 +88,15 @@ const TeacherForm = ({ teacher, onSubmit, isNew, specialities }) => {
         />
       </div>
       <div className="flex space-x-4">
-        <RadioList
+        <CheckBoxList
           items={specialities}
           formData={formData}
           handleChange={handleChange}
-          fieldName="specialite_id"
+          fieldName="specialites_ids"
           label="Spécialités"
           icon={BookOpen}
           className="w-full mt-4"
+          itemLabelFunc={getSpecialityLabel}
         />
       </div>
       <div className='mt-4'>
@@ -92,12 +110,12 @@ const TeacherForm = ({ teacher, onSubmit, isNew, specialities }) => {
         <Button   text="Créer"
                   onClick={handleSubmit}
                   className={`px-4 py-2 rounded-md shadow-sm focus:outline-none ${
-                        (!formData.nom || !formData.prenom || !formData.mail || !formData.specialite_id)
+                        (!formData.nom || !formData.prenom || !formData.mail || formData.specialites_ids.length === 0)
                         ? "bg-gray-300 text-gray-700 cursor-not-allowed"
                         : "bg-emerald-500 text-white hover:bg-emerald-600"
                   }`}
                   primary
-                  disabled={(!formData.nom || !formData.prenom || !formData.mail || !formData.specialite_id)}
+                  disabled={(!formData.nom || !formData.prenom || !formData.mail || formData.specialites_ids.length === 0)}
                   type="submit"
                   name="Create" />
       </div>

Front-End/src/components/TeachersSection.js

@@ -114,20 +114,19 @@ const TeachersSection = ({ teachers, handleCreate, handleEdit, handleDelete, spe
             { name: 'NOM', transform: (row) => row.nom },
             { name: 'PRENOM', transform: (row) => row.prenom },
             { name: 'MAIL', transform: (row) => row.mail },
-            { name: 'SPECIALITE', 
-              transform: (row) => {
-                return row.specialite
-                ?
+            { name: 'SPECIALITES',
+              transform: (row) => (
                 <div key={row.id} className="flex justify-center items-center space-x-2">
+                  {row.specialites.map(specialite => (
                     <span
-                      key={row.specialite.id}
+                      key={specialite.id}
                       className="w-4 h-4 rounded-full"
-                      style={{ backgroundColor: row.specialite.codeCouleur }}
-                      title={row.specialite.nom}
+                      style={{ backgroundColor: specialite.codeCouleur }}
+                      title={specialite.nom}
                     ></span>
-                </div> 
-                  : <i>Non définie</i>;
-              }
+                  ))}
+                </div>
+              )
             },
             { name: 'TYPE PROFIL', 
               transform: (row) => {

Front-End/src/components/ToggleSwitch.js

@@ -1,25 +1,35 @@
-import React from 'react';
+import { useRef } from 'react';
 
 const ToggleSwitch = ({ label, checked, onChange }) => {
-    return (
-        <div className="flex items-center mt-4">
-            <label className="mr-2 text-gray-600">{label}</label>
-            <div className="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
-                <input 
-                    type="checkbox" 
-                    name="toggle" 
-                    id="toggle" 
-                    checked={checked}
-                    onChange={onChange}
-                    className="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer border-emerald-500 checked:right-0 checked:border-emerald-500 checked:bg-emerald-500 focus:border-emerald-500 focus:bg-emerald-500 hover:border-emerald-500 hover:bg-emerald-500"
-                />
-                <label 
-                    htmlFor="toggle" 
-                    className={`toggle-label block overflow-hidden h-6 rounded-full cursor-pointer transition-colors duration-200 ${checked ? 'bg-emerald-300' : 'bg-gray-300'}`}
-                ></label>
-            </div>
-        </div>
-    );
+  const inputRef = useRef(null);
+
+  const handleChange = (e) => {
+    onChange(e);
+    if (inputRef.current) {
+      inputRef.current.blur(); // Remove focus
+    }
+  };
+
+  return (
+    <div className="flex items-center mt-4">
+      <label className="mr-2 text-gray-600">{label}</label>
+      <div className="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
+        <input 
+          type="checkbox" 
+          name="toggle" 
+          id="toggle" 
+          checked={checked}
+          onChange={handleChange}
+          className="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer border-emerald-500 checked:right-0 checked:border-emerald-500 checked:bg-emerald-500 hover:border-emerald-500 hover:bg-emerald-500 focus:outline-none focus:ring-0"
+          ref={inputRef} // Reference to the input element
+        />
+        <label 
+          htmlFor="toggle" 
+          className={`toggle-label block overflow-hidden h-6 rounded-full cursor-pointer transition-colors duration-200 ${checked ? 'bg-emerald-300' : 'bg-gray-300'}`}
+        ></label>
+      </div>
+    </div>
+  );
 };
 
 export default ToggleSwitch;