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

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

@@ -2,21 +2,28 @@
 import React, { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import Table from '@/components/Table';
-import { Edit, Users } from 'lucide-react';
+import { Edit3, Users, Download, Eye, Upload } from 'lucide-react';
 import StatusLabel from '@/components/StatusLabel';
+import FileUpload from '@/components/FileUpload';
 import { FE_PARENTS_EDIT_INSCRIPTION_URL } from '@/utils/Url';
-import { fetchChildren } from '@/app/actions/subscriptionAction';
+import {
+  fetchChildren,
+  sendSEPARegisterForm,
+} from '@/app/actions/subscriptionAction';
 import logger from '@/utils/logger';
+import { BASE_URL } from '@/utils/Url';
 import { useEstablishment } from '@/context/EstablishmentContext';
-import ProfileSelector from '@/components/ProfileSelector';
+import { useCsrfToken } from '@/context/CsrfContext';
 
 export default function ParentHomePage() {
   const [children, setChildren] = useState([]);
   const [userId, setUserId] = useState(null);
-  const [currentPage, setCurrentPage] = useState(1);
   const { user, selectedEstablishmentId } = useEstablishment();
-
+  const [uploadingStudentId, setUploadingStudentId] = useState(null); // ID de l'étudiant pour l'upload
+  const [uploadedFile, setUploadedFile] = useState(null); // Fichier uploadé
+  const [uploadState, setUploadState] = useState('off'); // État "on" ou "off" pour l'affichage du composant
   const router = useRouter();
+  const csrfToken = useCsrfToken();
 
   useEffect(() => {
     const userIdFromSession = user.user_id;
@@ -27,17 +34,62 @@ export default function ParentHomePage() {
     });
   }, [selectedEstablishmentId]);
 
+  function handleView(eleveId) {
+    logger.debug(`View dossier for student id: ${eleveId}`);
+    router.push(
+      `${FE_PARENTS_EDIT_INSCRIPTION_URL}?id=${userId}&studentId=${eleveId}&view=true`
+    );
+  }
+
   function handleEdit(eleveId) {
-    // Logique pour éditer le dossier de l'élève
     logger.debug(`Edit dossier for student id: ${eleveId}`);
     router.push(
       `${FE_PARENTS_EDIT_INSCRIPTION_URL}?id=${userId}&studentId=${eleveId}`
     );
   }
 
-  const actionColumns = [{ name: 'Action', transform: (row) => row.action }];
+  const handleFileUpload = (file) => {
+    if (!file) {
+      logger.error("Aucun fichier sélectionné pour l'upload.");
+      return;
+    }
+    setUploadedFile(file); // Conserve le fichier en mémoire
+    logger.debug('Fichier sélectionné :', file.name);
+  };
+
+  const handleSubmit = () => {
+    if (!uploadedFile || !uploadingStudentId) {
+      logger.error('Aucun fichier ou étudiant sélectionné.');
+      return;
+    }
+
+    const formData = new FormData();
+    formData.append('sepa_file', uploadedFile); // Ajoute le fichier SEPA
+    formData.append('status', 3); // Statut à envoyer
+
+    sendSEPARegisterForm(uploadingStudentId, formData, csrfToken)
+      .then((response) => {
+        logger.debug('RF mis à jour avec succès:', response);
+        // Logique supplémentaire après la mise à jour (par exemple, redirection ou notification)
+      })
+      .catch((error) => {
+        logger.error('Erreur lors de la mise à jour du RF:', error);
+      });
+  };
+
+  const toggleUpload = (studentId) => {
+    if (uploadingStudentId === studentId && uploadState === 'on') {
+      // Si le composant est déjà affiché pour cet étudiant, on le masque
+      setUploadState('off');
+      setUploadingStudentId(null);
+      setUploadedFile(null); // Réinitialise le fichier
+    } else {
+      // Sinon, on l'affiche pour cet étudiant
+      setUploadState('on');
+      setUploadingStudentId(studentId);
+    }
+  };
 
-  // Définir les colonnes du tableau
   const childrenColumns = [
     { name: 'Nom', transform: (row) => `${row.student.last_name}` },
     { name: 'Prénom', transform: (row) => `${row.student.first_name}` },
@@ -52,29 +104,76 @@ export default function ParentHomePage() {
     {
       name: 'Actions',
       transform: (row) => (
-        <div className="flex justify-center">
-          <button
-            className="p-2 hover:bg-gray-100 rounded-full transition-colors"
-            onClick={(e) => {
-              e.stopPropagation();
-              handleEdit(row.student.id);
-            }}
-            aria-label="Modifier"
-          >
-            <Edit className="h-5 w-5" />
-          </button>
+        <div className="flex justify-center items-center gap-2">
+          {row.status === 2 && (
+            <button
+              className="text-blue-500 hover:text-blue-700"
+              onClick={(e) => {
+                e.stopPropagation();
+                handleEdit(row.student.id);
+              }}
+              aria-label="Remplir le dossier"
+            >
+              <Edit3 className="h-5 w-5" />
+            </button>
+          )}
+
+          {row.status === 3 && (
+            <button
+              className="text-purple-500 hover:text-purple-700"
+              onClick={(e) => {
+                e.stopPropagation();
+                handleView(row.student.id);
+              }}
+              aria-label="Visualiser le dossier"
+            >
+              <Eye className="h-5 w-5" />
+            </button>
+          )}
+
+          {row.status === 7 && (
+            <>
+              <button
+                className="flex items-center justify-center w-8 h-8 rounded-full text-purple-500 hover:text-purple-700"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleView(row.student.id);
+                }}
+                aria-label="Visualiser le dossier"
+              >
+                <Eye className="h-5 w-5" />
+              </button>
+              <a
+                href={`${BASE_URL}${row.sepa_file}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center justify-center w-8 h-8 rounded-full text-green-500 hover:text-green-700"
+                aria-label="Télécharger le mandat SEPA"
+              >
+                <Download className="h-5 w-5" />
+              </a>
+              {/* Nouvelle action Upload */}
+              <button
+                className={`flex items-center justify-center w-8 h-8 rounded-full ${
+                  uploadingStudentId === row.student.id && uploadState === 'on'
+                    ? 'bg-blue-100 text-blue-600 ring-3 ring-blue-500'
+                    : 'text-blue-500 hover:text-blue-700'
+                }`}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  toggleUpload(row.student.id); // Activer ou désactiver l'upload pour cet étudiant
+                }}
+                aria-label="Uploader un fichier"
+              >
+                <Upload className="h-5 w-5" />
+              </button>
+            </>
+          )}
         </div>
       ),
     },
   ];
 
-  const itemsPerPage = 5;
-  const totalPages = Math.ceil(children.length / itemsPerPage) || 1;
-
-  const handlePageChange = (newPage) => {
-    setCurrentPage(newPage);
-  };
-
   return (
     <div className="px-2 py-4 md:px-4 max-w-full">
       <div>
@@ -86,13 +185,29 @@ export default function ParentHomePage() {
           <Table
             data={children}
             columns={childrenColumns}
-            itemsPerPage={itemsPerPage}
-            currentPage={currentPage}
-            totalPages={totalPages}
-            onPageChange={handlePageChange}
             defaultTheme="bg-gray-50"
           />
         </div>
+        {/* Composant FileUpload et bouton Valider en dessous du tableau */}
+        {uploadState === 'on' && uploadingStudentId && (
+          <div className="mt-4">
+            <FileUpload
+              selectionMessage="Sélectionnez un fichier à uploader"
+              onFileSelect={handleFileUpload}
+            />
+            <button
+              className={`mt-4 px-6 py-2 rounded-md ${
+                uploadedFile
+                  ? 'bg-emerald-500 text-white hover:bg-emerald-600'
+                  : 'bg-gray-300 text-gray-700 cursor-not-allowed'
+              }`}
+              onClick={handleSubmit}
+              disabled={!uploadedFile}
+            >
+              Valider
+            </button>
+          </div>
+        )}
       </div>
     </div>
   );