feat: Finalisation de la validation / refus des documents signés par les parents [N3WTS-2]

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

@@ -23,26 +23,6 @@ export default function DynamicFormsList({
   onFileUpload, // nouvelle prop pour gérer l'upload (à passer depuis le parent)
 }) {
   const [currentTemplateIndex, setCurrentTemplateIndex] = useState(0);
-    // Remet formsValidation à false et formsData à undefined lors de la sélection d'un document refusé
-    useEffect(() => {
-      const currentTemplate = schoolFileTemplates[currentTemplateIndex];
-      if (
-        currentTemplate &&
-        currentTemplate.isValidated === false &&
-        formsValidation[currentTemplate.id] !== true
-      ) {
-        setFormsValidation((prev) => {
-          const newValidation = { ...prev };
-          newValidation[currentTemplate.id] = false;
-          return newValidation;
-        });
-        setFormsData((prev) => {
-          const newData = { ...prev };
-          delete newData[currentTemplate.id];
-          return newData;
-        });
-      }
-    }, [currentTemplateIndex, schoolFileTemplates, formsValidation]);
   const [formsData, setFormsData] = useState({});
   const [formsValidation, setFormsValidation] = useState({});
   const fileInputRefs = React.useRef({});
@@ -51,37 +31,46 @@ export default function DynamicFormsList({
   useEffect(() => {
     // Initialisation complète de formsValidation et formsData pour chaque template
     if (schoolFileTemplates && schoolFileTemplates.length > 0) {
-      // Initialiser formsData pour chaque template (avec données existantes ou objet vide)
-      const dataState = {};
-      schoolFileTemplates.forEach((tpl) => {
-        if (
-          existingResponses &&
-          existingResponses[tpl.id] &&
-          Object.keys(existingResponses[tpl.id]).length > 0
-        ) {
-          dataState[tpl.id] = existingResponses[tpl.id];
-        } else {
-          dataState[tpl.id] = {};
-        }
+      // Fusionner avec l'état existant pour préserver les données locales
+      setFormsData((prevData) => {
+        const dataState = { ...prevData };
+        schoolFileTemplates.forEach((tpl) => {
+          // Ne mettre à jour que si on n'a pas encore de données locales ou si les données du serveur ont changé
+          const hasLocalData = prevData[tpl.id] && Object.keys(prevData[tpl.id]).length > 0;
+          const hasServerData = existingResponses && existingResponses[tpl.id] && Object.keys(existingResponses[tpl.id]).length > 0;
+          
+          if (!hasLocalData && hasServerData) {
+            // Pas de données locales mais données serveur : utiliser les données serveur
+            dataState[tpl.id] = existingResponses[tpl.id];
+          } else if (!hasLocalData && !hasServerData) {
+            // Pas de données du tout : initialiser à vide
+            dataState[tpl.id] = {};
+          }
+          // Si hasLocalData : on garde les données locales existantes
+        });
+        return dataState;
       });
-      setFormsData(dataState);
 
-      // Initialiser formsValidation pour chaque template
-      const validationState = {};
-      schoolFileTemplates.forEach((tpl) => {
-        if (
-          existingResponses &&
-          existingResponses[tpl.id] &&
-          Object.keys(existingResponses[tpl.id]).length > 0
-        ) {
-          validationState[tpl.id] = true;
-        } else {
-          validationState[tpl.id] = false;
-        }
+      // Fusionner avec l'état de validation existant
+      setFormsValidation((prevValidation) => {
+        const validationState = { ...prevValidation };
+        schoolFileTemplates.forEach((tpl) => {
+          const hasLocalValidation = prevValidation[tpl.id] === true;
+          const hasServerData = existingResponses && existingResponses[tpl.id] && Object.keys(existingResponses[tpl.id]).length > 0;
+          
+          if (!hasLocalValidation && hasServerData) {
+            // Pas validé localement mais données serveur : marquer comme validé
+            validationState[tpl.id] = true;
+          } else if (validationState[tpl.id] === undefined) {
+            // Pas encore initialisé : initialiser à false
+            validationState[tpl.id] = false;
+          }
+          // Si hasLocalValidation : on garde l'état local existant
+        });
+        return validationState;
       });
-      setFormsValidation(validationState);
     }
-  }, [existingResponses]);
+  }, [existingResponses, schoolFileTemplates]);
 
   // Mettre à jour la validation globale quand la validation des formulaires change
   useEffect(() => {
@@ -163,6 +152,8 @@ export default function DynamicFormsList({
     return schoolFileTemplates[currentTemplateIndex];
   };
 
+  const currentTemplate = getCurrentTemplate();
+
   // Handler d'upload pour formulaire existant
   const handleUpload = async (file, selectedFile) => {
     if (!file || !selectedFile) return;
@@ -399,6 +390,11 @@ export default function DynamicFormsList({
                   submitLabel:
                     currentTemplate.formTemplateData?.submitLabel || 'Valider',
                 }}
+                initialValues={
+                  formsData[currentTemplate.id] ||
+                  existingResponses[currentTemplate.id] ||
+                  {}
+                }
                 onFormSubmit={(formData) =>
                   handleFormSubmit(formData, currentTemplate.id)
                 }
@@ -408,38 +404,45 @@ export default function DynamicFormsList({
             ) : (
               // Formulaire existant (PDF, image, etc.)
               <div className="flex flex-col items-center gap-6">
-                <div className="flex flex-col items-center gap-2">
-                  {currentTemplate.file && currentTemplate.isValidated === true ? (
-                    <iframe
-                      src={`${BASE_URL}${currentTemplate.file}`}
-                      title={currentTemplate.name}
-                      className="w-full"
-                      style={{ height: '600px', border: 'none' }}
-                    />
-                  ) : currentTemplate.file && (
-                    <a
-                      href={`${BASE_URL}${currentTemplate.file}`}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition"
-                      download
-                    >
-                      <Download className="w-5 h-5" />
-                      Télécharger le document
-                    </a>
-                  )}
-                </div>
-                {/* Upload désactivé si validé par l'école */}
-                {enable && currentTemplate.isValidated !== true && (
-                  <FileUpload
-                    key={currentTemplate.id}
-                    selectionMessage={'Sélectionnez le fichier du document'}
-                    onFileSelect={(file) => handleUpload(file, currentTemplate)}
-                    required
-                    enable={true}                    
+                {/* Cas validé : affichage en iframe */}
+                {currentTemplate.isValidated === true && currentTemplate.file && (
+                  <iframe
+                    src={`${BASE_URL}${currentTemplate.file}`}
+                    title={currentTemplate.name}
+                    className="w-full"
+                    style={{ height: '600px', border: 'none' }}
                   />
                 )}
-                {/* Le label d'état est maintenant dans l'en-tête */}
+
+                {/* Cas non validé : bouton télécharger + upload */}
+                {currentTemplate.isValidated !== true && (
+                  <div className="flex flex-col items-center gap-4 w-full">
+                    {/* Bouton télécharger le document source */}
+                    {currentTemplate.file && (
+                      <a
+                        href={`${BASE_URL}${currentTemplate.file}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition"
+                        download
+                      >
+                        <Download className="w-5 h-5" />
+                        Télécharger le document
+                      </a>
+                    )}
+
+                    {/* Composant d'upload */}
+                    {enable && (
+                      <FileUpload
+                        key={currentTemplate.id}
+                        selectionMessage={'Sélectionnez le fichier du document'}
+                        onFileSelect={(file) => handleUpload(file, currentTemplate)}
+                        required
+                        enable={true}
+                      />
+                    )}
+                  </div>
+                )}
               </div>
             )}
           </div>