fix: Application du formattage sur les fichiers modifiés

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

@@ -65,13 +65,13 @@ export default function InscriptionFormShared({
   const [uploadedFiles, setUploadedFiles] = useState([]);
   const [schoolFileTemplates, setSchoolFileTemplates] = useState([]);
   const [parentFileTemplates, setParentFileTemplates] = useState([]);
-  const [currentPage, setCurrentPage] = useState(1);
-  const [isSignatureComplete, setIsSignatureComplete] = useState(false);
+  const [currentPage, setCurrentPage] = useState(5);
 
   const [isPage1Valid, setIsPage1Valid] = useState(false);
   const [isPage2Valid, setIsPage2Valid] = useState(false);
   const [isPage3Valid, setIsPage3Valid] = useState(false);
   const [isPage4Valid, setIsPage4Valid] = useState(false);
+  const [isPage5Valid, setIsPage5Valid] = useState(false);
 
   const [hasInteracted, setHasInteracted] = useState(false);
 
@@ -83,7 +83,7 @@ export default function InscriptionFormShared({
     const firstUnsignedIndex = schoolFileTemplates.findIndex(
       (template) => template.file === null
     );
-  
+
     // Mettre à jour l'index du template actuel
     if (firstUnsignedIndex !== -1) {
       setCurrentTemplateIndex(firstUnsignedIndex);
@@ -95,8 +95,10 @@ export default function InscriptionFormShared({
 
   useEffect(() => {
     // Vérifier si tous les templates ont leur champ "file" différent de null
-    const allSigned = schoolFileTemplates.every((template) => template.file !== null);
-  
+    const allSigned = schoolFileTemplates.every(
+      (template) => template.file !== null
+    );
+
     // Mettre à jour isPage4Valid en fonction de cette condition
     setIsPage4Valid(allSigned);
 
@@ -105,26 +107,34 @@ export default function InscriptionFormShared({
     }
   }, [schoolFileTemplates]);
 
+  useEffect(() => {
+    // Vérifier si tous les parentFileTemplates ont leur champ "file" différent de null
+    const allUploaded = parentFileTemplates.every(
+      (template) => template.file !== null
+    );
+
+    // Mettre à jour isPage5Valid en fonction de cette condition
+    setIsPage5Valid(allUploaded);
+  }, [parentFileTemplates]);
+
   const handleTemplateSigned = (index) => {
     const template = schoolFileTemplates[index];
-  
+
     if (!template) {
-      logger.error('Template introuvable pour l\'index donné.');
+      logger.error("Template introuvable pour l'index donné.");
       return;
     }
-  
+
     downloadTemplate(template.slug)
       .then((data) => fetch(data))
       .then((response) => response.blob())
       .then((blob) => {
-        const file = new File(
-          [blob],
-          `${template.name}.pdf`,
-          { type: blob.type }
-        );
+        const file = new File([blob], `${template.name}.pdf`, {
+          type: blob.type,
+        });
         const updateData = new FormData();
         updateData.append('file', file);
-  
+
         return editRegistrationSchoolFileTemplates(
           template.id,
           updateData,
@@ -133,7 +143,7 @@ export default function InscriptionFormShared({
       })
       .then((data) => {
         logger.debug('Template mis à jour avec succès :', data);
-  
+
         // Mettre à jour l'état local de schoolFileTemplates
         setSchoolFileTemplates((prevTemplates) =>
           prevTemplates.map((t, i) =>
@@ -236,6 +246,15 @@ export default function InscriptionFormShared({
           return updatedFiles;
         });
 
+        // Mettre à jour parentFileTemplates
+        setParentFileTemplates((prevTemplates) =>
+          prevTemplates.map((template) =>
+            template.id === selectedFile.id
+              ? { ...template, file: response.data.file }
+              : template
+          )
+        );
+
         return response; // Retourner la réponse pour signaler le succès
       })
       .catch((error) => {
@@ -265,6 +284,8 @@ export default function InscriptionFormShared({
       .then((response) => {
         logger.debug('Fichier supprimé avec succès dans la base :', response);
 
+        setIsPage5Valid(false);
+
         // Mettre à jour l'état local pour refléter la suppression
         setUploadedFiles((prev) =>
           prev.map((uploadedFile) =>
@@ -273,6 +294,13 @@ export default function InscriptionFormShared({
               : uploadedFile
           )
         );
+
+        // Mettre à jour l'état local pour refléter la suppression dans parentFileTemplates
+        setParentFileTemplates((prevTemplates) =>
+          prevTemplates.map((template) =>
+            template.id === templateId ? { ...template, file: null } : template
+          )
+        );
         return response;
       })
       .catch((error) => {
@@ -311,10 +339,9 @@ export default function InscriptionFormShared({
   const stepTitles = {
     1: 'Elève',
     2: 'Responsables légaux',
-    3: "Modalités de paiement",
-    4: "Formulaires à signer",
-    5: "Pièces à fournir",
-    6: "Validation"
+    3: 'Modalités de paiement',
+    4: 'Formulaires à signer',
+    5: 'Pièces à fournir',
   };
 
   const steps = [
@@ -323,7 +350,6 @@ export default function InscriptionFormShared({
     'Paiement',
     'Formulaires',
     'Documents parent',
-    'Validation'
   ];
 
   const isStepValid = (stepNumber) => {
@@ -334,6 +360,10 @@ export default function InscriptionFormShared({
         return isPage2Valid;
       case 3:
         return isPage3Valid;
+      case 4:
+        return isPage4Valid;
+      case 5:
+        return isPage5Valid;
       default:
         return false;
     }
@@ -350,7 +380,10 @@ export default function InscriptionFormShared({
         setStep={setCurrentPage}
         isStepValid={isStepValid}
       />
-      <div className="flex-1 overflow-y-auto mt-12 " style={{ maxHeight: 'calc(100vh - 400px)' }}>
+      <div
+        className="flex-1 overflow-y-auto mt-12 "
+        style={{ maxHeight: 'calc(100vh - 400px)' }}
+      >
         {/* Page 1 : Informations sur l'élève */}
         {currentPage === 1 && (
           <StudentInfoForm
@@ -393,78 +426,83 @@ export default function InscriptionFormShared({
         {/* Pages suivantes : Section Fichiers d'inscription */}
         {currentPage === 4 && (
           <div className="mt-8 mb-4 w-4/5 mx-auto flex gap-8">
-          {/* Liste des états de signature */}
-          <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">Documents</h3>
-            <ul className="space-y-2">
-              {schoolFileTemplates.map((template, index) => (
-                <li
-                  key={template.id}
-                  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" />
-                    ) : (
-                      <Loader2 className="w-5 h-5 text-gray-600" />
-                    )}
-                  </span>
-                  {template.name || 'Document sans nom'}
-                </li>
-              ))}
-            </ul>
+            {/* Liste des états de signature */}
+            <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">
+                Documents
+              </h3>
+              <ul className="space-y-2">
+                {schoolFileTemplates.map((template, index) => (
+                  <li
+                    key={template.id}
+                    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" />
+                      ) : (
+                        <Loader2 className="w-5 h-5 text-gray-600" />
+                      )}
+                    </span>
+                    {template.name || 'Document sans nom'}
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            {/* Affichage du fichier actuel */}
+            <div className="w-3/4">
+              {currentTemplateIndex < schoolFileTemplates.length && (
+                <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
+                  <h3 className="text-lg font-semibold text-gray-800 mb-4">
+                    {schoolFileTemplates[currentTemplateIndex].name ||
+                      'Document sans nom'}
+                  </h3>
+                  <p className="text-sm text-gray-500 mb-4">
+                    {schoolFileTemplates[currentTemplateIndex].description ||
+                      'Aucune description disponible pour ce document.'}
+                  </p>
+
+                  {schoolFileTemplates[currentTemplateIndex].file === null ? (
+                    <DocusealForm
+                      key={schoolFileTemplates[currentTemplateIndex].slug}
+                      id="docusealForm"
+                      src={`https://docuseal.com/s/${schoolFileTemplates[currentTemplateIndex].slug}`}
+                      withDownloadButton={false}
+                      withTitle={false}
+                      onComplete={() =>
+                        handleTemplateSigned(currentTemplateIndex)
+                      }
+                    />
+                  ) : (
+                    <iframe
+                      src={`${BASE_URL}/${schoolFileTemplates[currentTemplateIndex].file}`}
+                      title="Document Viewer"
+                      className="w-full"
+                      style={{
+                        height: '75vh',
+                        border: 'none',
+                      }}
+                    />
+                  )}
+                </div>
+              )}
+
+              {/* Message de fin */}
+              {currentTemplateIndex >= schoolFileTemplates.length && (
+                <div className="text-center text-green-600 font-semibold">
+                  Tous les formulaires ont été signés avec succès !
+                </div>
+              )}
+            </div>
           </div>
-        
-          {/* Affichage du fichier actuel */}
-          <div className="w-3/4">
-            {currentTemplateIndex < schoolFileTemplates.length && (
-              <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
-                <h3 className="text-lg font-semibold text-gray-800 mb-4">
-                  {schoolFileTemplates[currentTemplateIndex].name || 'Document sans nom'}
-                </h3>
-                <p className="text-sm text-gray-500 mb-4">
-                  {schoolFileTemplates[currentTemplateIndex].description ||
-                    'Aucune description disponible pour ce document.'}
-                </p>
-        
-                {schoolFileTemplates[currentTemplateIndex].file === null ? (
-                  <DocusealForm
-                    key={schoolFileTemplates[currentTemplateIndex].slug}
-                    id="docusealForm"
-                    src={`https://docuseal.com/s/${schoolFileTemplates[currentTemplateIndex].slug}`}
-                    withDownloadButton={false}
-                    withTitle={false}
-                    onComplete={() => handleTemplateSigned(currentTemplateIndex)}
-                  />
-                ) : (
-                  <iframe
-                    src={`${BASE_URL}/${schoolFileTemplates[currentTemplateIndex].file}`}
-                    title="Document Viewer"
-                    className="w-full"
-                    style={{
-                      height: '75vh',
-                      border: 'none',
-                    }}
-                  />
-                )}
-              </div>
-            )}
-        
-            {/* Message de fin */}
-            {currentTemplateIndex >= schoolFileTemplates.length && (
-              <div className="text-center text-green-600 font-semibold">
-                Tous les formulaires ont été signés avec succès !
-              </div>
-            )}
-          </div>
-        </div>
         )}
 
         {/* Dernière page : Section Fichiers parents */}
@@ -478,47 +516,57 @@ export default function InscriptionFormShared({
         )}
       </div>
 
-        {/* Boutons de contrôle */}
-        <div className="flex justify-center space-x-4 mt-12">
-          {currentPage > 1 && (
-            <Button
-              text="Précédent"
-              onClick={(e) => {
-                e.preventDefault();
-                handlePreviousPage();
-              }}
-              primary
-            />
-          )}
-          {currentPage < steps.length && (
-            <Button
-              text="Suivant"
-              onClick={(e) => {
-                e.preventDefault();
-                handleNextPage();
-              }}
-              className={`px-4 py-2 rounded-md shadow-sm focus:outline-none ${
-                (currentPage === 1 && !isPage1Valid) ||
-                (currentPage === 2 && !isPage2Valid) ||
-                (currentPage === 3 && !isPage3Valid) ||
-                (currentPage === 4 && !isPage4Valid)
-                  ? 'bg-gray-300 text-gray-700 cursor-not-allowed'
-                  : 'bg-emerald-500 text-white hover:bg-emerald-600'
-              }`}
-              disabled={
-                (currentPage === 1 && !isPage1Valid) ||
-                (currentPage === 2 && !isPage2Valid) ||
-                (currentPage === 3 && !isPage3Valid) ||
-                (currentPage === 4 && !isPage4Valid)
-              }
-              primary
-              name="Next"
-            />
-          )}
-          {currentPage === steps.length && (
-            <Button onClick={handleSubmit} text="Valider" primary />
-          )}
-        </div>
+      {/* Boutons de contrôle */}
+      <div className="flex justify-center space-x-4 mt-12">
+        {currentPage > 1 && (
+          <Button
+            text="Précédent"
+            onClick={(e) => {
+              e.preventDefault();
+              handlePreviousPage();
+            }}
+            primary
+          />
+        )}
+        {currentPage < steps.length && (
+          <Button
+            text="Suivant"
+            onClick={(e) => {
+              e.preventDefault();
+              handleNextPage();
+            }}
+            className={`px-4 py-2 rounded-md shadow-sm focus:outline-none ${
+              (currentPage === 1 && !isPage1Valid) ||
+              (currentPage === 2 && !isPage2Valid) ||
+              (currentPage === 3 && !isPage3Valid) ||
+              (currentPage === 4 && !isPage4Valid)
+                ? 'bg-gray-300 text-gray-700 cursor-not-allowed'
+                : 'bg-emerald-500 text-white hover:bg-emerald-600'
+            }`}
+            disabled={
+              (currentPage === 1 && !isPage1Valid) ||
+              (currentPage === 2 && !isPage2Valid) ||
+              (currentPage === 3 && !isPage3Valid) ||
+              (currentPage === 4 && !isPage4Valid)
+            }
+            primary
+            name="Next"
+          />
+        )}
+        {currentPage === steps.length && (
+          <Button
+            onClick={handleSubmit}
+            text="Valider"
+            primary
+            className={`px-4 py-2 rounded-md shadow-sm focus:outline-none ${
+              currentPage === 5 && !isPage5Valid
+                ? 'bg-gray-300 text-gray-700 cursor-not-allowed'
+                : 'bg-emerald-500 text-white hover:bg-emerald-600'
+            }`}
+            disabled={currentPage === 5 && !isPage5Valid}
+          />
+        )}
+      </div>
     </div>
   );
 }