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

création de classe (#2)

Front-End/src/context/ClasseFormContext.js

@@ -0,0 +1,70 @@
+import React, { createContext, useState, useContext } from 'react';
+import { useClasses } from '@/context/ClassesContext'
+
+const ClasseFormContext = createContext();
+
+export const useClasseForm = () => useContext(ClasseFormContext);
+
+export const ClasseFormProvider = ({ children, initialClasse }) => {
+
+  const { getNiveauxLabels, selectedDays } = useClasses();
+
+  const [formData, setFormData] = useState(() => {
+    const planning = initialClasse.planning || {};
+    const emploiDuTemps = planning.emploiDuTemps || {};
+
+    const dateDebutSemestre1 = emploiDuTemps.S1 ? emploiDuTemps.S1.DateDebut : '';
+    const dateFinSemestre1 = emploiDuTemps.S1 ? emploiDuTemps.S1.DateFin : '';
+    const dateDebutSemestre2 = emploiDuTemps.S2 ? emploiDuTemps.S2.DateDebut : '';
+    const dateFinSemestre2 = emploiDuTemps.S2 ? emploiDuTemps.S2.DateFin : '';
+
+    const dateDebutTrimestre1 = emploiDuTemps.T1 ? emploiDuTemps.T1.DateDebut : '';
+    const dateFinTrimestre1 = emploiDuTemps.T1 ? emploiDuTemps.T1.DateFin : '';
+    const dateDebutTrimestre2 = emploiDuTemps.T2 ? emploiDuTemps.T2.DateDebut : '';
+    const dateFinTrimestre2 = emploiDuTemps.T2 ? emploiDuTemps.T2.DateFin : '';
+    const dateDebutTrimestre3 = emploiDuTemps.T3 ? emploiDuTemps.T3.DateDebut : '';
+    const dateFinTrimestre3 = emploiDuTemps.T3 ? emploiDuTemps.T3.DateFin : '';
+
+    return {
+      nom_ambiance: initialClasse.nom_ambiance || '',
+      tranche_age: initialClasse.tranche_age || '',
+      nombre_eleves: initialClasse.nombre_eleves || '',
+      langue_enseignement: initialClasse.langue_enseignement || 'Français',
+      annee_scolaire: initialClasse.annee_scolaire || '',
+      enseignants_ids: initialClasse.enseignants_ids || [],
+      planning_type: planning.type || 1,
+      plage_horaire: planning.plageHoraire || ['08:30', '17:30'],
+      jours_ouverture: planning.joursOuverture || [1, 2, 4, 5],
+      niveaux: initialClasse.niveaux || [],
+      niveaux_label: getNiveauxLabels(initialClasse.niveaux || []),
+      date_debut_semestre_1: dateDebutSemestre1,
+      date_fin_semestre_1: dateFinSemestre1,
+      date_debut_semestre_2: dateDebutSemestre2,
+      date_fin_semestre_2: dateFinSemestre2,
+      date_debut_trimestre_1: dateDebutTrimestre1,
+      date_fin_trimestre_1: dateFinTrimestre1,
+      date_debut_trimestre_2: dateDebutTrimestre2,
+      date_fin_trimestre_2: dateFinTrimestre2,
+      date_debut_trimestre_3: dateDebutTrimestre3,
+      date_fin_trimestre_3: dateFinTrimestre3,
+      planning: {
+        type: planning.type || 1,
+        plageHoraire: planning.plageHoraire || ['08:30', '17:30'],
+        joursOuverture: planning.joursOuverture || [1, 2, 4, 5],
+        emploiDuTemps: planning.emploiDuTemps || {
+          S1: { DateDebut: '', DateFin: '', lundi: [], mardi: [], mercredi: [], jeudi: [], vendredi: [], samedi: [], dimanche: [] },
+          S2: { DateDebut: '', DateFin: '', lundi: [], mardi: [], mercredi: [], jeudi: [], vendredi: [], samedi: [], dimanche: [] },
+          T1: { DateDebut: '', DateFin: '', lundi: [], mardi: [], mercredi: [], jeudi: [], vendredi: [], samedi: [], dimanche: [] },
+          T2: { DateDebut: '', DateFin: '', lundi: [], mardi: [], mercredi: [], jeudi: [], vendredi: [], samedi: [], dimanche: [] },
+          T3: { DateDebut: '', DateFin: '', lundi: [], mardi: [], mercredi: [], jeudi: [], vendredi: [], samedi: [], dimanche: [] },
+        }
+      }
+    };
+  });
+
+  return (
+    <ClasseFormContext.Provider value={{ formData, setFormData }}>
+      {children}
+    </ClasseFormContext.Provider>
+  );
+};

Front-End/src/context/ClassesContext.js

@@ -0,0 +1,140 @@
+import React, { createContext, useContext } from 'react';
+
+const ClassesContext = createContext();
+
+export const useClasses = () => useContext(ClassesContext);
+
+export const ClassesProvider = ({ children }) => {
+  const currentYear = new Date().getFullYear();
+
+  const schoolYears = [
+    { value: '', label: 'Sélectionner une période' },
+    { value: `${currentYear}-${currentYear + 1}`, label: `${currentYear}-${currentYear + 1}` },
+    { value: `${currentYear + 1}-${currentYear + 2}`, label: `${currentYear + 1}-${currentYear + 2}` },
+    { value: `${currentYear + 2}-${currentYear + 3}`, label: `${currentYear + 2}-${currentYear + 3}` },
+  ];
+
+  const niveauxPremierCycle = [
+    { id: 1, name: 'TPS', age: 2 },
+    { id: 2, name: 'PS', age: 3 },
+    { id: 3, name: 'MS', age: 4 },
+    { id: 4, name: 'GS', age: 5 },
+  ];
+
+  const niveauxSecondCycle = [
+    { id: 5, name: 'CP', age: 6 },
+    { id: 6, name: 'CE1', age: 7 },
+    { id: 7, name: 'CE2', age: 8 },
+  ];
+
+  const niveauxTroisiemeCycle = [
+    { id: 8, name: 'CM1', age: 9 },
+    { id: 9, name: 'CM2', age: 10 },
+  ];
+
+  const allNiveaux = [...niveauxPremierCycle, ...niveauxSecondCycle, ...niveauxTroisiemeCycle];
+
+  const typeEmploiDuTemps = [
+    { id: 1, label: 'Annuel' },
+    { id: 2, label: 'Semestriel' },
+    { id: 3, label: 'Trimestriel' },
+  ];
+  
+  const selectedDays = {
+    1: 'lundi',
+    2: 'mardi',
+    3: 'mercredi',
+    4: 'jeudi',
+    5: 'vendredi',
+    6: 'samedi',
+    7: 'dimanche'
+  };
+
+  const getNiveauxLabels = (niveaux) => {
+    return niveaux.map(niveauId => {
+      const niveau = allNiveaux.find(n => n.id === niveauId);
+      return niveau ? niveau.name : niveauId;
+    });
+  };
+
+  const generateAgeToNiveaux = (minAge, maxAge) => {
+    if (minAge === null || isNaN(minAge)) {
+      return [];
+    }
+
+    return allNiveaux
+      .filter(({ age }) => age === minAge || (age >= minAge && (maxAge !== null && !isNaN(maxAge) && age < maxAge)))
+      .map(({ id }) => id);
+  };
+
+  const updatePlanning = (formData) => {
+
+    let updatedPlanning = { ...formData.planning };
+
+    const emploiDuTemps = formData.jours_ouverture.reduce((acc, dayId) => {
+      const dayName = selectedDays[dayId];
+      if (dayName) {
+        acc[dayName] = [];
+      }
+      return acc;
+    }, {});
+  
+    if (formData.planning_type === 1) {
+      updatedPlanning = {
+        type: 1,
+        plageHoraire: formData.plage_horaire,
+        joursOuverture: formData.jours_ouverture,
+        emploiDuTemps
+      };
+    } else if (formData.planning_type === 2) {
+      updatedPlanning = {
+        type: 2,
+        plageHoraire: formData.plage_horaire,
+        joursOuverture: formData.jours_ouverture,
+        emploiDuTemps: {
+          S1: {
+            DateDebut: formData.date_debut_semestre_1,
+            DateFin: formData.date_fin_semestre_1,
+            ...emploiDuTemps
+          },
+          S2: {
+            DateDebut: formData.date_debut_semestre_2,
+            DateFin: formData.date_fin_semestre_2,
+            ...emploiDuTemps
+          }
+        }
+      };
+    } else if (formData.planning_type === 3) {
+      updatedPlanning = {
+        type: 3,
+        plageHoraire: formData.plage_horaire,
+        joursOuverture: formData.jours_ouverture,
+        emploiDuTemps: {
+          T1: {
+            DateDebut: formData.date_debut_trimestre_1,
+            DateFin: formData.date_fin_trimestre_1,
+            ...emploiDuTemps
+          },
+          T2: {
+            DateDebut: formData.date_debut_trimestre_2,
+            DateFin: formData.date_fin_trimestre_2,
+            ...emploiDuTemps
+          },
+          T3: {
+            DateDebut: formData.date_debut_trimestre_3,
+            DateFin: formData.date_fin_trimestre_3,
+            ...emploiDuTemps
+          }
+        }
+      };
+    }
+
+    return updatedPlanning;
+  };
+
+  return (
+    <ClassesContext.Provider value={{ schoolYears, getNiveauxLabels, generateAgeToNiveaux, niveauxPremierCycle, niveauxSecondCycle, niveauxTroisiemeCycle, typeEmploiDuTemps, updatePlanning }}>
+      {children}
+    </ClassesContext.Provider>
+  );
+};

Front-End/src/context/PlanningContext.js

@@ -13,6 +13,9 @@ import { mockEvents, mockSchedules } from '@/data/mockData';
 const PlanningContext = createContext();
 
 export function PlanningProvider({ children }) {
+  // const [events, setEvents] = useState([]);
+  // const [schedules, setSchedules] = useState([]);
+  // const [selectedSchedule, setSelectedSchedule] = useState(null);
   const [events, setEvents] = useState(mockEvents);
   const [schedules, setSchedules] = useState(mockSchedules);
   const [selectedSchedule, setSelectedSchedule] = useState(mockSchedules[0].id);

Front-End/src/context/SpecialityFormContext.js

@@ -0,0 +1,18 @@
+import React, { createContext, useState, useContext } from 'react';
+
+const SpecialityFormContext = createContext();
+
+export const useSpecialityForm = () => useContext(SpecialityFormContext);
+
+export const SpecialityFormProvider = ({ children, initialSpeciality }) => {
+  const [formData, setFormData] = useState(() => ({
+    nom: initialSpeciality.nom || '',
+    codeCouleur: initialSpeciality.codeCouleur || '#FFFFFF',
+  }));
+
+  return (
+    <SpecialityFormContext.Provider value={{ formData, setFormData }}>
+      {children}
+    </SpecialityFormContext.Provider>
+  );
+};

Front-End/src/context/TeacherFormContext.js

@@ -0,0 +1,22 @@
+import React, { createContext, useState, useContext } from 'react';
+
+const TeacherFormContext = createContext();
+
+export const useTeacherForm = () => useContext(TeacherFormContext);
+
+export const TeacherFormProvider = ({ children, initialTeacher }) => {
+  const [formData, setFormData] = useState(() => ({
+    nom: initialTeacher.nom || '',
+    prenom: initialTeacher.prenom || '',
+    mail: initialTeacher.mail || '',
+    specialites_ids: initialTeacher.specialites_ids || [],
+    profilAssocie_id: initialTeacher.profilAssocie_id || '',
+    droit: initialTeacher.droit || 0
+  }));
+
+  return (
+    <TeacherFormContext.Provider value={{ formData, setFormData }}>
+      {children}
+    </TeacherFormContext.Provider>
+  );
+};