feat: Ajout d'un composant permettant de visualiser les fichiers signés

par les parents

Front-End/src/app/[locale]/admin/subscriptions/page.js

@@ -58,7 +58,6 @@ import {
 import { fetchProfiles } from '@/app/actions/authAction';
 
 import {
-  BASE_URL,
   FE_ADMIN_SUBSCRIPTIONS_EDIT_URL,
   FE_ADMIN_SUBSCRIPTIONS_VALIDATE_URL,
 } from '@/utils/Url';
@@ -68,6 +67,7 @@ import { useCsrfToken } from '@/context/CsrfContext';
 import logger from '@/utils/logger';
 import { PhoneLabel } from '@/components/PhoneLabel';
 import FileUpload from '@/components/FileUpload';
+import FilesModal from '@/components/Inscription/FilesModal';
 
 export default function Page({ params: { locale } }) {
   const t = useTranslations('subscriptions');
@@ -108,7 +108,7 @@ export default function Page({ params: { locale } }) {
   const [isOpenAddGuardian, setIsOpenAddGuardian] = useState(false);
 
   const [isFilesModalOpen, setIsFilesModalOpen] = useState(false);
-  const [selectedRowFiles, setSelectedRowFiles] = useState([]);
+  const [selectedRegisterForm, setSelectedRegisterForm] = useState([]);
 
   const [popupVisible, setPopupVisible] = useState(false);
   const [popupMessage, setPopupMessage] = useState('');
@@ -156,28 +156,10 @@ export default function Page({ params: { locale } }) {
   };
 
   const openFilesModal = (row) => {
-    const files = [];
+    setSelectedRegisterForm(row || []);
-    if (row.registration_file) {
-      files.push({
-        name: "Fichier d'inscription",
-        url: `${BASE_URL}${row.registration_file}`,
-      });
-    }
-    if (row.sepa_file) {
-      files.push({
-        name: 'Mandat SEPA',
-        url: `${BASE_URL}${row.sepa_file}`,
-      });
-    }
-    setSelectedRowFiles(files);
     setIsFilesModalOpen(true);
   };
 
-  const closeFilesModal = () => {
-    setIsFilesModalOpen(false);
-    setSelectedRowFiles([]);
-  };
-
   const requestErrorHandler = (err) => {
     logger.error('Error fetching data:', err);
   };
@@ -971,20 +953,6 @@ export default function Page({ params: { locale } }) {
         </div>
       ),
     },
-    {
-      name: t('files'),
-      transform: (row) =>
-        row.registration_file != null && (
-          <ul>
-            <li className="flex items-center gap-2">
-              <FileText size={16} />
-              <a href={`${BASE_URL}${row.registration_file}`} target="_blank">
-                {row.registration_file?.split('/').pop()}
-              </a>
-            </li>
-          </ul>
-        ),
-    },
     {
       name: 'Actions',
       transform: (row) => (
@@ -1216,27 +1184,10 @@ export default function Page({ params: { locale } }) {
             />
           )}
           {isFilesModalOpen && (
-            <Modal
+            <FilesModal
               isOpen={isFilesModalOpen}
               setIsOpen={setIsFilesModalOpen}
-              title="Fichiers disponibles"
+              selectedRegisterForm={selectedRegisterForm}
-              ContentComponent={() => (
-                <ul className="space-y-4">
-                  {selectedRowFiles.map((file, index) => (
-                    <li key={index} className="flex items-center gap-2">
-                      <FileText className="w-5 h-5 text-gray-500" />
-                      <a
-                        href={file.url}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="text-blue-500 hover:text-blue-700 underline"
-                      >
-                        {file.name}
-                      </a>
-                    </li>
-                  ))}
-                </ul>
-              )}
             />
           )}
         </div>

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

@@ -0,0 +1,187 @@
+import React, { useState, useEffect } from 'react';
+import Modal from '@/components/Modal';
+import { FileText } from 'lucide-react';
+import {
+  fetchSchoolFileTemplatesFromRegistrationFiles,
+  fetchParentFileTemplatesFromRegistrationFiles,
+} from '@/app/actions/subscriptionAction';
+import { BASE_URL } from '@/utils/Url';
+
+const FilesModal = ({
+  isOpen,
+  setIsOpen,
+  title = 'Fichiers disponibles',
+  selectedRegisterForm,
+}) => {
+  const [files, setFiles] = useState({
+    schoolFiles: [],
+    parentFiles: [],
+    sepaFile: null,
+  });
+
+  useEffect(() => {
+    if (!selectedRegisterForm?.student?.id) {
+      console.error(
+        'selectedRegisterForm.student.id est invalide ou manquant.'
+      );
+      return;
+    }
+
+    let fetchedSchoolFiles = []; // Déclaré dans un scope plus large
+
+    // Fetch school and parent files sequentially
+    fetchSchoolFileTemplatesFromRegistrationFiles(
+      selectedRegisterForm.student.id
+    )
+      .then((schoolFiles) => {
+        if (!Array.isArray(schoolFiles)) {
+          console.error(
+            'Les fichiers scolaires ne sont pas un tableau :',
+            schoolFiles
+          );
+          return;
+        }
+
+        fetchedSchoolFiles = schoolFiles; // Assigner les fichiers scolaires
+
+        // Fetch parent files after school files
+        return fetchParentFileTemplatesFromRegistrationFiles(
+          selectedRegisterForm.student.id
+        );
+      })
+      .then((parentFiles) => {
+        // Construct the categorized files list
+        const categorizedFiles = {
+          schoolFiles: fetchedSchoolFiles.map((file) => ({
+            name: file.name || 'Document scolaire',
+            url: file.file ? `${BASE_URL}${file.file}` : null,
+          })),
+          parentFiles: parentFiles.map((file) => ({
+            name: file.master_name || 'Document parent',
+            url: file.file ? `${BASE_URL}${file.file}` : null,
+          })),
+          sepaFile: selectedRegisterForm.sepa_file
+            ? {
+                name: 'Mandat SEPA',
+                url: `${BASE_URL}${selectedRegisterForm.sepa_file}`,
+              }
+            : null,
+        };
+        setFiles(categorizedFiles);
+      })
+      .catch((error) => {
+        console.error('Erreur lors de la récupération des fichiers :', error);
+      });
+  }, [selectedRegisterForm]);
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      setIsOpen={setIsOpen}
+      title={
+        <h2 className="text-2xl font-bold text-gray-800 border-b pb-2 mb-4">
+          {title}
+        </h2>
+      }
+      ContentComponent={() => (
+        <div className="space-y-6">
+          {/* Section Fichiers École */}
+          <div>
+            <h3 className="text-lg font-semibold text-gray-800 mb-4">
+              Formulaires de l'établissement
+            </h3>
+            <ul className="space-y-2">
+              {files.schoolFiles.length > 0 ? (
+                files.schoolFiles.map((file, index) => (
+                  <li key={index} className="flex items-center gap-2">
+                    <FileText className="w-5 h-5 text-gray-500" />
+                    {file.url ? (
+                      <a
+                        href={file.url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-blue-500 hover:text-blue-700 underline"
+                      >
+                        {file.name}
+                      </a>
+                    ) : (
+                      <span className="text-gray-400">
+                        {file.name} (Non disponible)
+                      </span>
+                    )}
+                  </li>
+                ))
+              ) : (
+                <p className="text-gray-500">
+                  Aucun fichier scolaire disponible.
+                </p>
+              )}
+            </ul>
+          </div>
+
+          <hr className="border-t border-gray-300" />
+
+          {/* Section Fichiers Parent */}
+          <div>
+            <h3 className="text-lg font-semibold text-gray-800 mb-4">
+              Pièces fournies
+            </h3>
+            <ul className="space-y-2">
+              {files.parentFiles.length > 0 ? (
+                files.parentFiles.map((file, index) => (
+                  <li key={index} className="flex items-center gap-2">
+                    <FileText className="w-5 h-5 text-gray-500" />
+                    {file.url ? (
+                      <a
+                        href={file.url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-blue-500 hover:text-blue-700 underline"
+                      >
+                        {file.name}
+                      </a>
+                    ) : (
+                      <span className="text-gray-400">
+                        {file.name} (Non disponible)
+                      </span>
+                    )}
+                  </li>
+                ))
+              ) : (
+                <p className="text-gray-500">
+                  Aucun fichier parent disponible.
+                </p>
+              )}
+            </ul>
+          </div>
+
+          <hr className="border-t border-gray-300" />
+
+          {/* Section Mandat SEPA */}
+          <div>
+            <h3 className="text-lg font-semibold text-gray-800 mb-4">
+              Mandat SEPA
+            </h3>
+            {files.sepaFile ? (
+              <div className="flex items-center gap-2">
+                <FileText className="w-5 h-5 text-gray-500" />
+                <a
+                  href={files.sepaFile.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-blue-500 hover:text-blue-700 underline"
+                >
+                  {files.sepaFile.name}
+                </a>
+              </div>
+            ) : (
+              <p className="text-gray-500">Aucun mandat SEPA disponible.</p>
+            )}
+          </div>
+        </div>
+      )}
+    />
+  );
+};
+
+export default FilesModal;