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/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>
   );