feat: Validation du dossier d'inscription en affectant l'élève à une

classe de son niveau / création d'une fenêtre de visualisation d'une
classe (en cours)

Front-End/src/components/AffectationClasseForm.js

@@ -14,12 +14,13 @@ const AffectationClasseForm = ({ eleve = {}, onSubmit, classes }) => {
   };
 
   const handleSubmit = () => {
-    onSubmit({
+    console.log(formData);
+    /*onSubmit({
       eleve: {
         ...formData,
       },
       etat: 5,
-    });
+    });*/
   };
 
   return (

Front-End/src/components/Inscription/ValidateSubscription.js

@@ -1,6 +1,7 @@
 'use client';
 import React, { useState, useEffect } from 'react';
 import ToggleSwitch from '@/components/ToggleSwitch';
+import SelectChoice from '@/components/SelectChoice';
 import { BASE_URL } from '@/utils/Url';
 import {
   fetchSchoolFileTemplatesFromRegistrationFiles,
@@ -9,6 +10,7 @@ import {
 import logger from '@/utils/logger';
 import { School, CheckCircle } from 'lucide-react';
 import SectionHeader from '@/components/SectionHeader';
+import Button from '@/components/Button';
 
 export default function ValidateSubscription({
   studentId,
@@ -17,11 +19,34 @@ export default function ValidateSubscription({
   sepa_file,
   student_file,
   onAccept,
+  classes,
 }) {
   const [schoolFileTemplates, setSchoolFileTemplates] = useState([]);
   const [parentFileTemplates, setParentFileTemplates] = useState([]);
   const [currentTemplateIndex, setCurrentTemplateIndex] = useState(0);
   const [mergeDocuments, setMergeDocuments] = useState(false);
+  const [isPageValid, setIsPageValid] = useState(false);
+
+  const [formData, setFormData] = useState({
+    associated_class: null,
+  });
+
+  useEffect(() => {
+    if (classes.length > 0) {
+      // Si l'étudiant a déjà une classe associée, initialisez formData avec cette classe
+      const initialClass = classes.find(
+        (classe) => classe.id === formData.associated_class
+      );
+      setFormData({
+        associated_class: initialClass ? initialClass.id : null,
+      });
+    }
+  }, [classes]);
+
+  // Mettre à jour isPageValid en fonction de la sélection de la classe
+  useEffect(() => {
+    setIsPageValid(!!formData.associated_class); // true si une classe est sélectionnée, sinon false
+  }, [formData.associated_class]);
 
   useEffect(() => {
     // Récupérer les fichiers schoolFileTemplates
@@ -51,20 +76,32 @@ export default function ValidateSubscription({
       );
   }, [studentId]);
 
-  const handleAccept = () => {
-    const fusionParam = mergeDocuments ? 'true' : 'false';
-
-    const data = {
-      status: 5,
-      fusionParam: fusionParam,
-    };
-
-    onAccept(data);
+  const handleToggleMergeDocuments = () => {
+    setMergeDocuments((prevState) => !prevState);
   };
 
-  const handleToggleMergeDocuments = () => {
-    // Inverser l'état de mergeDocuments
-    setMergeDocuments((prevState) => !prevState);
+  const handleAssignClass = () => {
+    const fusionParam = mergeDocuments ? 'true' : 'false';
+    if (formData.associated_class) {
+      const data = {
+        student: {
+          associated_class: formData.associated_class,
+        },
+        status: 5,
+        fusionParam: fusionParam,
+      };
+
+      onAccept(data);
+    } else {
+      logger.warn('Aucune classe sélectionnée.');
+    }
+  };
+
+  const onChange = (field, value) => {
+    setFormData((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
   };
 
   const allTemplates = [
@@ -89,6 +126,7 @@ export default function ValidateSubscription({
         ]
       : []),
   ];
+  console.log(allTemplates);
 
   return (
     <div className="mb-4 w-full mx-auto">
@@ -101,53 +139,7 @@ export default function ValidateSubscription({
 
       {/* Contenu principal */}
       <div className="flex gap-8">
-        {/* Liste des documents */}
-        <div className="w-1/4 bg-gray-50 p-4 rounded-lg shadow-sm border border-gray-200">
-          <h3 className="text-lg font-semibold text-gray-800 mb-4">
-            Liste des documents
-          </h3>
-          <ul className="space-y-2">
-            {allTemplates.map((template, index) => (
-              <li
-                key={index}
-                className={`flex items-center cursor-pointer ${
-                  index === currentTemplateIndex
-                    ? 'text-blue-600 font-bold'
-                    : template.file !== null
-                      ? 'text-green-600'
-                      : 'text-gray-600'
-                }`}
-                onClick={() => setCurrentTemplateIndex(index)} // Mettre à jour l'index du template actuel
-              >
-                <span className="mr-2">
-                  {template.file !== null ? (
-                    <CheckCircle className="w-5 h-5 text-green-600" />
-                  ) : (
-                    <Hourglass className="w-5 h-5 text-gray-600" />
-                  )}
-                </span>
-                {template.name}
-              </li>
-            ))}
-          </ul>
-
-          {/* ToggleSwitch et bouton de validation */}
-          <div className="mt-6 flex items-center justify-between">
-            <ToggleSwitch
-              label="Fusionner"
-              checked={mergeDocuments}
-              onChange={handleToggleMergeDocuments}
-            />
-            <button
-              onClick={handleAccept}
-              className="px-4 py-2 bg-emerald-500 text-white rounded-md shadow-sm hover:bg-emerald-600 transition-colors"
-            >
-              Valider
-            </button>
-          </div>
-        </div>
-
-        {/* Affichage du fichier actuel */}
+        {/* Colonne gauche : Affichage du fichier actuel */}
         <div className="w-3/4">
           {currentTemplateIndex < allTemplates.length && (
             <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
@@ -158,7 +150,6 @@ export default function ValidateSubscription({
                 {allTemplates[currentTemplateIndex].description ||
                   'Aucune description disponible pour ce document.'}
               </p>
-
               <iframe
                 src={`${BASE_URL}/${allTemplates[currentTemplateIndex].file}`}
                 title={
@@ -175,6 +166,92 @@ export default function ValidateSubscription({
             </div>
           )}
         </div>
+
+        {/* Colonne droite : Liste des documents, Option de fusion et Affectation */}
+        <div className="w-1/4 flex flex-col gap-4">
+          {/* Liste des documents */}
+          <div className="flex-1 bg-gray-50 p-4 rounded-lg shadow-sm border border-gray-200 overflow-y-auto">
+            <h3 className="text-lg font-semibold text-gray-800 mb-4">
+              Liste des documents
+            </h3>
+            <ul className="space-y-2">
+              {allTemplates.map((template, index) => (
+                <li
+                  key={index}
+                  className={`flex items-center cursor-pointer ${
+                    index === currentTemplateIndex
+                      ? 'text-blue-600 font-bold'
+                      : template.file !== null
+                        ? 'text-green-600'
+                        : 'text-gray-600'
+                  }`}
+                  onClick={() => setCurrentTemplateIndex(index)}
+                >
+                  <span className="mr-2">
+                    {template.file !== null ? (
+                      <CheckCircle className="w-5 h-5 text-green-600" />
+                    ) : (
+                      <Hourglass className="w-5 h-5 text-gray-600" />
+                    )}
+                  </span>
+                  {template.name}
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Option de fusion */}
+          <div className="bg-gray-50 p-4 rounded-lg shadow-sm border border-gray-200">
+            <h3 className="text-lg font-semibold text-gray-800 mb-4">
+              Option de fusion
+            </h3>
+            <div className="flex items-center justify-between">
+              <span className="text-sm text-gray-700">
+                Fusionner les documents
+              </span>
+              <ToggleSwitch
+                label="Fusionner les documents"
+                checked={mergeDocuments}
+                onChange={handleToggleMergeDocuments}
+              />
+            </div>
+          </div>
+
+          {/* Section Affectation */}
+          <div className="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
+            <h3 className="text-lg font-semibold text-gray-800 mb-4">
+              Affectation à une classe
+            </h3>
+            <div className="flex flex-col gap-4">
+              <SelectChoice
+                name="associated_class"
+                label="Classe"
+                placeHolder="Sélectionner une classe"
+                selected={formData.associated_class || ''} // La valeur actuelle de la classe associée
+                callback={(e) => onChange('associated_class', e.target.value)} // Met à jour formData
+                choices={classes.map((classe) => ({
+                  value: classe.id,
+                  label: classe.atmosphere_name,
+                }))} // Liste des classes disponibles
+                required
+              />
+              <Button
+                text="Valider le dossier d'inscription"
+                onClick={(e) => {
+                  e.preventDefault();
+                  handleAssignClass();
+                }}
+                primary
+                className={`px-4 py-2 rounded-md shadow-sm focus:outline-none ${
+                  !isPageValid
+                    ? 'bg-gray-300 text-gray-700 cursor-not-allowed'
+                    : 'bg-emerald-500 text-white hover:bg-emerald-600'
+                }`}
+                disabled={!isPageValid}
+              />
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   );

Front-End/src/components/Providers.js

@@ -4,6 +4,7 @@ import { SessionProvider } from 'next-auth/react';
 import { CsrfProvider } from '@/context/CsrfContext';
 import { NextIntlClientProvider } from 'next-intl';
 import { EstablishmentProvider } from '@/context/EstablishmentContext';
+import { ClassesProvider } from '@/context/ClassesContext';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 
@@ -17,9 +18,11 @@ export default function Providers({ children, messages, locale, session }) {
       <DndProvider backend={HTML5Backend}>
         <CsrfProvider>
           <EstablishmentProvider>
-            <NextIntlClientProvider messages={messages} locale={locale}>
-              {children}
-            </NextIntlClientProvider>
+            <ClassesProvider>
+              <NextIntlClientProvider messages={messages} locale={locale}>
+                {children}
+              </NextIntlClientProvider>
+            </ClassesProvider>
           </EstablishmentProvider>
         </CsrfProvider>
       </DndProvider>

Front-End/src/components/Structure/Configuration/ClassesSection.js

@@ -10,9 +10,10 @@ import LevelLabel from '@/components/CustomLabels/LevelLabel';
 import { DndProvider, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import logger from '@/utils/logger';
-import ClasseDetails from '@/components/ClasseDetails';
 import SectionHeader from '@/components/SectionHeader';
 import { useEstablishment } from '@/context/EstablishmentContext';
+import { useRouter } from 'next/navigation';
+import { FE_ADMIN_STRUCTURE_SCHOOLCLASS_MANAGEMENT_URL } from '@/utils/Url';
 
 const ItemTypes = {
   TEACHER: 'teacher',
@@ -28,8 +29,6 @@ const TeachersDropZone = ({
     classe.teachers_details || []
   );
 
-  const { selectedEstablishmentId } = useEstablishment();
-
   useEffect(() => {}, [teachers]);
 
   useEffect(() => {
@@ -131,6 +130,10 @@ const ClassesSection = ({
   const [detailsModalVisible, setDetailsModalVisible] = useState(false);
   const [selectedClass, setSelectedClass] = useState(null);
 
+  const router = useRouter();
+
+  const { selectedEstablishmentId } = useEstablishment();
+
   const niveauxPremierCycle = [
     { id: 1, name: 'TPS', age: 2 },
     { id: 2, name: 'PS', age: 3 },
@@ -520,7 +523,10 @@ const ClassesSection = ({
               </button>
               <button
                 type="button"
-                onClick={() => openEditModalDetails(classe)}
+                onClick={() => {
+                  const url = `${FE_ADMIN_STRUCTURE_SCHOOLCLASS_MANAGEMENT_URL}?schoolClassId=${classe.id}`;
+                  router.push(`${url}`);
+                }}
                 className="text-gray-500 hover:text-gray-700"
               >
                 <ZoomIn className="w-5 h-5" />
@@ -559,15 +565,6 @@ const ClassesSection = ({
           columns={columns}
           renderCell={renderClassCell}
         />
-        <Popup
-          visible={detailsModalVisible}
-          message={
-            selectedClass ? <ClasseDetails classe={selectedClass} /> : null
-          }
-          onConfirm={() => setDetailsModalVisible(false)}
-          onCancel={() => setDetailsModalVisible(false)}
-          uniqueConfirmButton={true}
-        />
         <Popup
           visible={popupVisible}
           message={popupMessage}

Front-End/src/components/Structure/Configuration/TeachersSelectionConfiguration.js

@@ -1,60 +0,0 @@
-import React from 'react';
-import Table from '@/components/Table';
-
-const TeachersSelectionConfiguration = ({
-  formData,
-  teachers,
-  handleTeacherSelection,
-  selectedTeachers,
-}) => {
-  return (
-    <div className="mt-4" style={{ maxHeight: '300px', overflowY: 'auto' }}>
-      <label className="mt-6 block text-2xl font-medium text-gray-700 mb-2">
-        Enseignants
-      </label>
-      <label className={`block text-sm font-medium mb-4`}>
-        Sélection :{' '}
-        <span
-          className={`${formData.teachers.length !== 0 ? 'text-emerald-400' : 'text-red-300'}`}
-        >
-          {formData.teachers.length}
-        </span>
-      </label>
-      <Table
-        columns={[
-          {
-            name: 'Nom',
-            transform: (row) => row.last_name,
-          },
-          {
-            name: 'Prénom',
-            transform: (row) => row.first_name,
-          },
-          // {
-          //   name: 'Spécialités',
-          //   transform: (row) => (
-          //     <div className="flex flex-wrap items-center">
-          //       {row.specialites.map(specialite => (
-          //         <span key={specialite.id} className="flex items-center mr-2 mb-1">
-          //           <div
-          //             className="w-4 h-4 rounded-full mr-2"
-          //             style={{ backgroundColor: specialite.codeCouleur }}
-          //             title={specialite.nom}
-          //           ></div>
-          //           <span>{specialite.nom}</span>
-          //         </span>
-          //       ))}
-          //     </div>
-          //   ),
-          // },
-        ]}
-        data={teachers}
-        onRowClick={handleTeacherSelection}
-        selectedRows={selectedTeachers}
-        isSelectable={true}
-      />
-    </div>
-  );
-};
-
-export default TeachersSelectionConfiguration;