Merge remote-tracking branch 'origin/WIP_Inscriptions' into develop

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

@@ -5,23 +5,19 @@ import Button from '@/components/Button';
 import DjangoCSRFToken from '@/components/DjangoCSRFToken';
 import {
   fetchRegisterForm,
-  fetchTemplatesFromRegistrationFiles,
+  fetchSchoolFileTemplatesFromRegistrationFiles,
+  fetchParentFileTemplatesFromRegistrationFiles,
 } from '@/app/actions/subscriptionAction';
 import {
   downloadTemplate,
-  createRegistrationTemplates,
-  editRegistrationTemplates,
-  deleteRegistrationTemplates,
+  editRegistrationSchoolFileTemplates,
+  editRegistrationParentFileTemplates,
 } from '@/app/actions/registerFileGroupAction';
 import {
   fetchRegistrationPaymentModes,
   fetchTuitionPaymentModes,
 } from '@/app/actions/schoolAction';
-import { Download, Upload, Trash2, Eye } from 'lucide-react';
 import { BASE_URL } from '@/utils/Url';
-import DraggableFileUpload from '@/components/DraggableFileUpload';
-import Modal from '@/components/Modal';
-import FileStatusLabel from '@/components/FileStatusLabel';
 import logger from '@/utils/logger';
 import StudentInfoForm, {
   validateStudentInfo,
@@ -42,7 +38,6 @@ export default function InscriptionFormShared({
   csrfToken,
   selectedEstablishmentId,
   onSubmit,
-  cancelUrl,
   errors = {}, // Nouvelle prop pour les erreurs
 }) {
   // États pour gérer les données du formulaire
@@ -69,13 +64,8 @@ export default function InscriptionFormShared({
 
   // États pour la gestion des fichiers
   const [uploadedFiles, setUploadedFiles] = useState([]);
-  const [fileTemplates, setFileTemplates] = useState([]);
-  const [fileGroup, setFileGroup] = useState(null);
-  const [fileName, setFileName] = useState('');
-  const [file, setFile] = useState('');
-  const [showUploadModal, setShowUploadModal] = useState(false);
-  const [currentTemplateId, setCurrentTemplateId] = useState(null);
-
+  const [schoolFileTemplates, setSchoolFileTemplates] = useState([]);
+  const [parentFileTemplates, setParentFileTemplates] = useState([]);
   const [currentPage, setCurrentPage] = useState(1);
 
   const isCurrentPageValid = () => {
@@ -110,7 +100,6 @@ export default function InscriptionFormShared({
           totalTuitionFees: data?.totalTuitionFees,
         });
         setGuardians(data?.student?.guardians || []);
-        setUploadedFiles(data.registration_files || []);
       });
 
       setIsLoading(false);
@@ -118,12 +107,23 @@ export default function InscriptionFormShared({
   }, [studentId]);
 
   useEffect(() => {
-    fetchTemplatesFromRegistrationFiles(studentId).then((data) => {
-      setFileTemplates(data);
+    fetchSchoolFileTemplatesFromRegistrationFiles(studentId).then((data) => {
+      setSchoolFileTemplates(data);
+    });
+
+    fetchParentFileTemplatesFromRegistrationFiles(studentId).then((data) => {
+      setParentFileTemplates(data);
+
+      // Initialiser uploadedFiles avec uniquement les fichiers dont `file` n'est pas null
+      const filteredFiles = data
+        .filter((item) => item.file !== null)
+        .map((item) => ({
+          id: item.id,
+          fileName: item.file,
+        }));
+      setUploadedFiles(filteredFiles);
     });
-  }, []);
 
-  useEffect(() => {
     if (selectedEstablishmentId) {
       // Fetch data for registration payment modes
       handleRegistrationPaymentModes();
@@ -164,71 +164,89 @@ export default function InscriptionFormShared({
     setFormData((prev) => ({ ...prev, [field]: value }));
   };
 
-  // Gestion du téléversement de fichiers
-  const handleFileUpload = async (file, fileName) => {
-    if (!file || !currentTemplateId || !formData.id) {
-      logger.error('Missing required data for upload');
+  const handleFileUpload = (file, selectedFile) => {
+    if (!file || !selectedFile) {
+      logger.error('Données manquantes pour le téléversement.');
+      return Promise.reject(
+        new Error('Données manquantes pour le téléversement.')
+      );
+    }
+
+    const updateData = new FormData();
+    updateData.append('file', file);
+
+    return editRegistrationParentFileTemplates(
+      selectedFile.id,
+      updateData,
+      csrfToken
+    )
+      .then((response) => {
+        logger.debug('Template mis à jour avec succès :', response);
+
+        setUploadedFiles((prev) => {
+          const updatedFiles = prev.map((uploadedFile) =>
+            uploadedFile.id === selectedFile.id
+              ? { ...uploadedFile, fileName: response.data.file } // Met à jour le fichier téléversé
+              : uploadedFile
+          );
+
+          // Si le fichier n'existe pas encore, l'ajouter
+          if (!updatedFiles.find((file) => file.id === selectedFile.id)) {
+            updatedFiles.push({
+              id: selectedFile.id,
+              fileName: response.data.file,
+            });
+          }
+
+          return updatedFiles;
+        });
+
+        return response; // Retourner la réponse pour signaler le succès
+      })
+      .catch((error) => {
+        logger.error('Erreur lors de la mise à jour du fichier :', error);
+        throw error; // Relancer l'erreur pour que l'appelant puisse la capturer
+      });
+  };
+
+  const handleDeleteFile = (templateId) => {
+    const fileToDelete = uploadedFiles.find(
+      (file) => parseInt(file.id) === templateId && file.fileName
+    );
+    if (!fileToDelete) {
+      logger.error('Aucun fichier trouvé pour suppression.');
       return;
     }
 
-    const data = new FormData();
-    data.append('file', file);
-    data.append('name', fileName);
-    data.append('template', currentTemplateId);
-    data.append('register_form', formData.id);
+    // Créer un FormData avec un champ vide pour "file"
+    const updateData = new FormData();
+    updateData.append('file', ''); // Envoyer chaine vide pour indiquer qu'aucun fichier n'est uploadé
 
-    try {
-      const response = await createRegistrationTemplates(data, csrfToken);
-      if (response) {
-        setUploadedFiles((prev) => {
-          const newFiles = prev.filter(
-            (f) => parseInt(f.template) !== currentTemplateId
-          );
-          return [
-            ...newFiles,
-            {
-              name: fileName,
-              template: currentTemplateId,
-              file: response.file,
-            },
-          ];
-        });
+    return editRegistrationParentFileTemplates(
+      templateId,
+      updateData,
+      csrfToken
+    )
+      .then((response) => {
+        logger.debug('Fichier supprimé avec succès dans la base :', response);
 
-        // Rafraîchir les données du formulaire pour avoir les fichiers à jour
-        if (studentId) {
-          fetchRegisterForm(studentId).then((data) => {
-            setUploadedFiles(data.registration_files || []);
-          });
-        }
-      }
-    } catch (error) {
-      logger.error('Error uploading file:', error);
-    }
-  };
-
-  // Vérification si un fichier est déjà uploadé
-  const isFileUploaded = (templateId) => {
-    return uploadedFiles.find((template) => template.template === templateId);
-  };
-
-  // Récupération d'un fichier uploadé
-  const getUploadedFile = (templateId) => {
-    return uploadedFiles.find((file) => parseInt(file.template) === templateId);
-  };
-
-  // Suppression d'un fichier
-  const handleDeleteFile = async (templateId) => {
-    const fileToDelete = getUploadedFile(templateId);
-    if (!fileToDelete) return;
-
-    try {
-      await deleteRegistrationTemplates(fileToDelete.id, csrfToken);
-      setUploadedFiles((prev) =>
-        prev.filter((f) => parseInt(f.template) !== templateId)
-      );
-    } catch (error) {
-      logger.error('Error deleting file:', error);
-    }
+        // Mettre à jour l'état local pour refléter la suppression
+        setUploadedFiles((prev) =>
+          prev.map((uploadedFile) =>
+            uploadedFile.id === templateId
+              ? { ...uploadedFile, fileName: null, fileUrl: null } // Réinitialiser les champs liés au fichier
+              : uploadedFile
+          )
+        );
+        return response;
+      })
+      .catch((error) => {
+        logger.error(
+          'Erreur lors de la suppression du fichier dans la base :',
+          error
+        );
+        throw error;
+      });
   };
 
   // Soumission du formulaire
@@ -268,90 +286,12 @@ export default function InscriptionFormShared({
     setCurrentPage(currentPage - 1);
   };
 
-  const requiredFileTemplates = fileTemplates;
-
-  // Configuration des colonnes pour le tableau des fichiers
-  const columns = [
-    { name: 'Nom du fichier', transform: (row) => row.name },
-    {
-      name: 'Fichier à Remplir',
-      transform: (row) => (row.is_required ? 'Oui' : 'Non'),
-    },
-    {
-      name: 'Fichier de référence',
-      transform: (row) =>
-        row.file && (
-          <div className="flex items-center justify-center gap-2">
-            {' '}
-            <a
-              href={`${BASE_URL}${row.file}`}
-              target="_blank"
-              className="text-blue-500 hover:text-blue-700"
-            >
-              <Download size={16} />
-            </a>{' '}
-          </div>
-        ),
-    },
-    {
-      name: 'Statut',
-      transform: (row) =>
-        row.is_required && (
-          <FileStatusLabel
-            status={isFileUploaded(row.id) ? 'sent' : 'pending'}
-          />
-        ),
-    },
-    {
-      name: 'Actions',
-      transform: (row) => {
-        if (!row.is_required) return null;
-
-        const uploadedFile = getUploadedFile(row.id);
-
-        if (uploadedFile) {
-          return (
-            <div className="flex items-center justify-center gap-2">
-              <a
-                href={`${BASE_URL}${uploadedFile.file}`}
-                target="_blank"
-                className="text-blue-500 hover:text-blue-700"
-              >
-                <Eye size={16} />
-              </a>
-              <button
-                className="text-red-500 hover:text-red-700"
-                onClick={() => handleDeleteFile(row.id)}
-                type="button"
-              >
-                <Trash2 size={16} />
-              </button>
-            </div>
-          );
-        }
-
-        return (
-          <button
-            className="text-emerald-500 hover:text-emerald-700"
-            type="button"
-            onClick={() => {
-              setCurrentTemplateId(row.id);
-              setShowUploadModal(true);
-            }}
-          >
-            <Upload size={16} />
-          </button>
-        );
-      },
-    },
-  ];
-
   // Affichage du loader pendant le chargement
   if (isLoading) return <Loader />;
 
   // Rendu du composant
   return (
-    <div className="max-w-4xl mx-auto p-6">
+    <div className="mx-auto p-6">
       <form onSubmit={handleSubmit} className="space-y-8">
         <DjangoCSRFToken csrfToken={csrfToken} />
         {/* Page 1 : Informations de l'élève et Responsables */}
@@ -368,84 +308,84 @@ export default function InscriptionFormShared({
         )}
 
         {/* Pages suivantes : Section Fichiers d'inscription */}
-        {currentPage > 1 && currentPage <= requiredFileTemplates.length + 1 && (
-          <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
-            {/* Titre du document */}
-            <div className="mb-4">
-              <h2 className="text-lg font-semibold text-gray-800">
-                {requiredFileTemplates[currentPage - 2].name ||
-                  'Document sans nom'}
-              </h2>
-              <p className="text-sm text-gray-500">
-                {requiredFileTemplates[currentPage - 2].description ||
-                  'Aucune description disponible pour ce document.'}
-              </p>
+        {currentPage > 1 && currentPage <= schoolFileTemplates.length + 1 && (
+          <div className="mt-8 mb-4 w-3/5">
+            <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
+              {/* Titre du document */}
+              <div className="mb-4">
+                <h2 className="text-lg font-semibold text-gray-800">
+                  {schoolFileTemplates[currentPage - 2].name ||
+                    'Document sans nom'}
+                </h2>
+                <p className="text-sm text-gray-500">
+                  {schoolFileTemplates[currentPage - 2].description ||
+                    'Aucune description disponible pour ce document.'}
+                </p>
+              </div>
+
+              {/* Affichage du formulaire ou du document */}
+              {schoolFileTemplates[currentPage - 2].file === null ? (
+                <DocusealForm
+                  id="docusealForm"
+                  src={
+                    'https://docuseal.com/s/' +
+                    schoolFileTemplates[currentPage - 2].slug
+                  }
+                  withDownloadButton={false}
+                  onComplete={() => {
+                    downloadTemplate(schoolFileTemplates[currentPage - 2].slug)
+                      .then((data) => fetch(data))
+                      .then((response) => response.blob())
+                      .then((blob) => {
+                        const file = new File(
+                          [blob],
+                          `${schoolFileTemplates[currentPage - 2].name}.pdf`,
+                          { type: blob.type }
+                        );
+                        const updateData = new FormData();
+                        updateData.append('file', file);
+
+                        return editRegistrationSchoolFileTemplates(
+                          schoolFileTemplates[currentPage - 2].id,
+                          updateData,
+                          csrfToken
+                        );
+                      })
+                      .then((data) => {
+                        logger.debug('EDIT TEMPLATE : ', data);
+                      })
+                      .catch((error) => {
+                        logger.error('error editing template : ', error);
+                      });
+                  }}
+                />
+              ) : (
+                <iframe
+                  src={`${BASE_URL}/${schoolFileTemplates[currentPage - 2].file}`}
+                  title="Document Viewer"
+                  className="w-full"
+                  style={{
+                    height: '75vh', // Ajuster la hauteur à 75% de la fenêtre
+                    border: 'none',
+                  }}
+                />
+              )}
             </div>
-
-            {/* Affichage du formulaire ou du document */}
-            {requiredFileTemplates[currentPage - 2].file === '' ? (
-              <DocusealForm
-                id="docusealForm"
-                src={
-                  'https://docuseal.com/s/' +
-                  requiredFileTemplates[currentPage - 2].slug
-                }
-                withDownloadButton={false}
-                onComplete={() => {
-                  downloadTemplate(requiredFileTemplates[currentPage - 2].slug)
-                    .then((data) => fetch(data))
-                    .then((response) => response.blob())
-                    .then((blob) => {
-                      const file = new File(
-                        [blob],
-                        `${requiredFileTemplates[currentPage - 2].name}.pdf`,
-                        { type: blob.type }
-                      );
-                      const updateData = new FormData();
-                      updateData.append('file', file);
-
-                      return editRegistrationTemplates(
-                        requiredFileTemplates[currentPage - 2].id,
-                        updateData,
-                        csrfToken
-                      );
-                    })
-                    .then((data) => {
-                      logger.debug('EDIT TEMPLATE : ', data);
-                    })
-                    .catch((error) => {
-                      logger.error('error editing template : ', error);
-                    });
-                }}
-              />
-            ) : (
-              <iframe
-                src={`${BASE_URL}/${requiredFileTemplates[currentPage - 2].file}`}
-                title="Document Viewer"
-                className="w-full"
-                style={{
-                  height: '75vh', // Ajuster la hauteur à 75% de la fenêtre
-                  border: 'none',
-                }}
-              />
-            )}
           </div>
         )}
 
         {/* Dernière page : Section Fichiers parents */}
-        {currentPage === requiredFileTemplates.length + 2 && (
-          <>
-            <FilesToUpload
-              fileTemplates={fileTemplates.filter(
-                (template) => !template.is_required
-              )}
-              columns={columns}
-            />
-          </>
+        {currentPage === schoolFileTemplates.length + 2 && (
+          <FilesToUpload
+            parentFileTemplates={parentFileTemplates}
+            uploadedFiles={uploadedFiles}
+            onFileUpload={handleFileUpload}
+            onFileDelete={handleDeleteFile}
+          />
         )}
 
         {/* Boutons de contrôle */}
-        <div className="flex justify-end space-x-4">
+        <div className="flex justify-center space-x-4">
           <Button
             text="Sauvegarder"
             onClick={handleSave}
@@ -462,7 +402,7 @@ export default function InscriptionFormShared({
               }}
             />
           )}
-          {currentPage < requiredFileTemplates.length + 2 && (
+          {currentPage < schoolFileTemplates.length + 2 && (
             <Button
               text="Suivant"
               onClick={(e) => {
@@ -479,57 +419,11 @@ export default function InscriptionFormShared({
               name="Next"
             />
           )}
-          {currentPage === requiredFileTemplates.length + 2 && (
+          {currentPage === schoolFileTemplates.length + 2 && (
             <Button type="submit" text="Valider" primary />
           )}
         </div>
       </form>
-      {fileTemplates.length > 0 && (
-        <Modal
-          isOpen={showUploadModal}
-          setIsOpen={setShowUploadModal}
-          title="Téléverser un fichier"
-          ContentComponent={() => (
-            <>
-              <DraggableFileUpload
-                className="w-full"
-                fileName={fileName}
-                onFileSelect={(selectedFile) => {
-                  if (selectedFile) {
-                    setFile(selectedFile);
-                    setFileName(selectedFile.name);
-                  }
-                }}
-              />
-              <div className="mt-4 flex justify-center space-x-4">
-                <Button
-                  text="Annuler"
-                  onClick={() => {
-                    setShowUploadModal(false);
-                    setCurrentTemplateId(null);
-                    setFile(null);
-                    setFileName('');
-                  }}
-                />
-                <Button
-                  text="Valider"
-                  onClick={() => {
-                    if (file && fileName) {
-                      handleFileUpload(file, fileName);
-                      setShowUploadModal(false);
-                      setCurrentTemplateId(null);
-                      setFile(null);
-                      setFileName('');
-                    }
-                  }}
-                  primary={true}
-                  disabled={!file || !fileName}
-                />
-              </div>
-            </>
-          )}
-        />
-      )}
     </div>
   );
 }