chore: merge conflicts

Front-End/src/components/InputPhone.js

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 
 
-export default function InputPhone({ name, label, value, onChange, errorMsg, placeholder, className }) {
+export default function InputPhone({ name, label, value, onChange, errorMsg, placeholder, className, required }) {
     const inputRef = useRef(null);
 
     useEffect(() => {
@@ -18,7 +18,10 @@ export default function InputPhone({ name, label, value, onChange, errorMsg, pla
     return (
         <>
             <div className={`mb-4 ${className}`}>
-                <label htmlFor={name} className="block text-sm font-medium text-gray-700">{label}</label>
+                <label htmlFor={name} className="block text-sm font-medium text-gray-700">
+                    {label}
+                    {required && <span className="text-red-500 ml-1">*</span>}
+                </label>
                 <div className={`mt-1 flex items-center border border-gray-200 rounded-md ${errorMsg ? 'border-red-500' : ''} hover:border-gray-400 focus-within:border-gray-500`}>
                     <input
                         type="tel"

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

@@ -15,14 +15,9 @@ import DraggableFileUpload from '@/components/DraggableFileUpload';
 import Modal from '@/components/Modal';
 import FileStatusLabel from '@/components/FileStatusLabel';
 import logger from '@/utils/logger';
-
-// Définition des niveaux scolaires disponibles
-const levels = [
-    { value:'1', label: 'TPS - Très Petite Section'},
-    { value:'2', label: 'PS - Petite Section'},
-    { value:'3', label: 'MS - Moyenne Section'},
-    { value:'4', label: 'GS - Grande Section'},
-];
+import StudentInfoForm from '@/components/Inscription/StudentInfoForm';
+import FilesToSign from '@/components/Inscription/FilesToSign';
+import FilesToUpload from '@/components/Inscription/FilesToUpload';
 
 /**
  * Composant de formulaire d'inscription partagé
@@ -65,6 +60,8 @@ export default function InscriptionFormShared({
     const [showUploadModal, setShowUploadModal] = useState(false);
     const [currentTemplateId, setCurrentTemplateId] = useState(null);
 
+    const [currentPage, setCurrentPage] = useState(1);
+
     // Chargement initial des données
     // Mettre à jour les données quand initialData change
     useEffect(() => {
@@ -185,6 +182,21 @@ export default function InscriptionFormShared({
         return errors?.student?.[field]?.[0];
     };
 
+    const handleNextPage = () => {
+        setCurrentPage(currentPage + 1);
+    };
+    
+    const handlePreviousPage = () => {
+        setCurrentPage(currentPage - 1);
+    };
+
+    const requiredFileTemplates = fileTemplates.filter(template => template.is_required);
+
+    // Ajout des logs pour débogage
+    console.log('BASE_URL:', BASE_URL);
+    console.log('requiredFileTemplates:', requiredFileTemplates);
+    console.log('currentPage:', currentPage);
+
     // Configuration des colonnes pour le tableau des fichiers
     const columns = [
         { name: 'Nom du fichier', transform: (row) => row.name },
@@ -248,128 +260,54 @@ export default function InscriptionFormShared({
         <div className="max-w-4xl mx-auto p-6">
             <form onSubmit={handleSubmit} className="space-y-8">
                 <DjangoCSRFToken  csrfToken={csrfToken}/>
-                {/* Section Élève */}
-                <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
-                    <h2 className="text-xl font-bold mb-4 text-gray-800">Informations de l&apos;élève</h2>
-                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                        <InputText
-                            name="last_name"
-                            label="Nom"
-                            value={formData.last_name}
-                            onChange={(e) => updateFormField('last_name', e.target.value)}
-                            required
-                            errorMsg={getError('last_name')}
-                        />
-                        <InputText
-                            name="first_name"
-                            label="Prénom"
-                            value={formData.first_name}
-                            onChange={(e) => updateFormField('first_name', e.target.value)}
-                            errorMsg={getError('first_name')}
-                            required
-                        />
-                        <InputText
-                            name="nationality"
-                            label="Nationalité"
-                            value={formData.nationality}
-                            onChange={(e) => updateFormField('nationality', e.target.value)}
-                        />
-                        <InputText
-                            name="birth_date"
-                            type="date"
-                            label="Date de Naissance"
-                            value={formData.birth_date}
-                            onChange={(e) => updateFormField('birth_date', e.target.value)}
-                            required
-                            errorMsg={getError('birth_date')}
-                        />
-                        <InputText
-                            name="birth_place"
-                            label="Lieu de Naissance"
-                            value={formData.birth_place}
-                            onChange={(e) => updateFormField('birth_place', e.target.value)}
-                            errorMsg={getError('birth_place')}
-                        />
-                        <InputText
-                            name="birth_postal_code"
-                            label="Code Postal de Naissance"
-                            value={formData.birth_postal_code}
-                            onChange={(e) => updateFormField('birth_postal_code', e.target.value)}
-                            required
-                            errorMsg={getError('birth_postal_code')}
-                        />
-                        <div className="md:col-span-2">
-                            <InputText
-                                name="address"
-                                label="Adresse"
-                                value={formData.address}
-                                onChange={(e) => updateFormField('address', e.target.value)}
-                                errorMsg={getError('address')}
-                            />
-                        </div>
-                        <InputText
-                            name="attending_physician"
-                            label="Médecin Traitant"
-                            value={formData.attending_physician}
-                            onChange={(e) => updateFormField('attending_physician', e.target.value)}
-                            errorMsg={getError('attending_physician')}
-                        />
-                        <SelectChoice
-                            name="level"
-                            label="Niveau"
-                            placeHolder="Sélectionner un niveau"
-                            selected={formData.level}
-                            callback={(e) => updateFormField('level', e.target.value)}
-                            choices={levels}
-                            required
-                            errorMsg={getError('level')}
-                        />
-                    </div>
-                </div>
-
-                {/* Section Responsables */}
-                <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
-                    <h2 className="text-xl font-bold mb-4 text-gray-800">Responsables</h2>
-                    <ResponsableInputFields
+                {/* Page 1 : Informations de l'élève et Responsables */}
+                {currentPage === 1 && (
+                    <StudentInfoForm
+                        formData={formData}
+                        updateFormField={updateFormField}
                         guardians={guardians}
-                        onGuardiansChange={(id, field, value) => {
-                            const updatedGuardians = guardians.map(resp =>
-                                resp.id === id ? { ...resp, [field]: value } : resp
-                            );
-                            setGuardians(updatedGuardians);
-                        }}
-                        addGuardian={(e) => {
-                            e.preventDefault();
-                            setGuardians([...guardians, { id: Date.now() }]);
-                        }}
-                        deleteGuardian={(index) => {
-                            const newArray = [...guardians];
-                            newArray.splice(index, 1);
-                            setGuardians(newArray);
-                        }}
-                        errors={errors?.student?.guardians || []}
+                        setGuardians={setGuardians}
+                        errors={errors}
                     />
-                </div>
+                )}
 
-                {/* Section Fichiers d'inscription */}
-                {fileTemplates.length > 0 && (
+                {/* 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">
-                        <h2 className="text-xl font-bold mb-4 text-gray-800">Fichiers à remplir</h2>
-                        <Table
-                            data={fileTemplates}
-                            columns={columns}
-                            itemsPerPage={5}
-                            currentPage={1}
-                            totalPages={1}
-                            onPageChange={() => {}}
-                        />
+                        <h2 className="text-xl font-bold mb-4 text-gray-800">{requiredFileTemplates[currentPage - 2].name}</h2>
+                        <iframe
+                            src={`${BASE_URL}/data/${requiredFileTemplates[currentPage - 2].file}?signature=true`}
+                            width="100%"
+                            height="800px"
+                            className="w-full" // Utiliser la classe CSS pour la largeur
+                            title={requiredFileTemplates[currentPage - 2].name}
+                        >
+                            <p>Votre navigateur ne prend pas en charge les fichiers PDF. Vous pouvez télécharger le fichier en cliquant <a href={`${BASE_URL}/data/${requiredFileTemplates[currentPage - 2].file}`}>ici</a>.</p>
+                        </iframe>
                     </div>
                 )}
 
+                {/* Dernière page : Section Fichiers parents */}
+                {currentPage === requiredFileTemplates.length + 2 && (
+                    <>
+                        <FilesToUpload
+                            fileTemplates={fileTemplates.filter(template => !template.is_required)}
+                            columns={columns}
+                        />
+                    </>
+                )}
+
                 {/* Boutons de contrôle */}
                 <div className="flex justify-end space-x-4">
-                    <Button href={cancelUrl} text="Annuler" />
-                    <Button type="submit" text="Valider" primary />
+                    {currentPage > 1 && (
+                        <Button text="Précédent" onClick={(e) => { e.preventDefault(); handlePreviousPage(); }} />
+                    )}
+                    {currentPage < requiredFileTemplates.length + 2 && (
+                        <Button text="Suivant" onClick={(e) => { e.preventDefault(); handleNextPage(); }} />
+                    )}
+                    {currentPage === requiredFileTemplates.length + 2 && (
+                        <Button type="submit" text="Valider" primary />
+                    )}
                 </div>
             </form>
             {fileTemplates.length > 0 && (

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

@@ -58,6 +58,7 @@ export default function ResponsableInputFields({guardians, onGuardiansChange, ad
                             label={t('email')}
                             value={item.email}
                             onChange={(event) => {onGuardiansChange(item.id, "email", event.target.value)}}
+                            required
                             errorMsg={getError(index, 'email')}
                         />
                         <InputPhone
@@ -65,6 +66,7 @@ export default function ResponsableInputFields({guardians, onGuardiansChange, ad
                             label={t('phone')}
                             value={item.phone}
                             onChange={(event) => {onGuardiansChange(item.id, "phone", event)}}
+                            required
                             errorMsg={getError(index, 'phone')}
                         />
                     </div>
@@ -76,6 +78,7 @@ export default function ResponsableInputFields({guardians, onGuardiansChange, ad
                             label={t('birthdate')}
                             value={item.birth_date}
                             onChange={(event) => {onGuardiansChange(item.id, "birth_date", event.target.value)}}
+                            required
                             errorMsg={getError(index, 'birth_date')}
                         />
                         <InputText
@@ -84,6 +87,7 @@ export default function ResponsableInputFields({guardians, onGuardiansChange, ad
                             label={t('profession')}
                             value={item.profession}
                             onChange={(event) => {onGuardiansChange(item.id, "profession", event.target.value)}}
+                            required
                             errorMsg={getError(index, 'profession')}
                         />
                     </div>
@@ -95,6 +99,7 @@ export default function ResponsableInputFields({guardians, onGuardiansChange, ad
                             label={t('address')}
                             value={item.address}
                             onChange={(event) => {onGuardiansChange(item.id, "address", event.target.value)}}
+                            required
                             errorMsg={getError(index, 'address')}
                         />
                     </div>

Front-End/src/components/SelectChoice.js

@@ -1,34 +1,36 @@
 export default function SelectChoice({ type, name, label, required, placeHolder, choices, callback, selected, errorMsg, IconItem, disabled = false }) {
   return (
     <>
-      <label htmlFor={name} className="block text-sm font-medium text-gray-700">
-        {label}
-        {required && <span className="text-red-500 ml-1">*</span>}
-      </label>
-      <div className={`mt-1 flex items-center border border-gray-200 rounded-md ${errorMsg ? 'border-red-500' : ''} ${disabled ? '' : 'hover:border-gray-400 focus-within:border-gray-500'}`}>
-        {IconItem &&
-          <span className="inline-flex items-center px-3 text-gray-500 text-sm">
-            {<IconItem />}
-          </span>
-        }
-        <select
-          className={`flex-1 px-3 py-2 block w-full sm:text-sm border-none focus:ring-0 outline-none rounded-md ${disabled ? 'bg-gray-100' : ''}`}
-          type={type}
-          id={name}
-          name={name}
-          value={selected}
-          onChange={callback}
-          disabled={disabled}
-        >
-          <option value="">{placeHolder?.toLowerCase()}</option>
-          {choices.map(({ value, label }, index) => (
-            <option key={value} value={value}>
-              {label}
-            </option>
-          ))}
-        </select>
+      <div>
+        <label htmlFor={name} className="block text-sm font-medium text-gray-700">
+          {label}
+          {required && <span className="text-red-500 ml-1">*</span>}
+        </label>
+        <div className={`mt-1 flex items-center border border-gray-200 rounded-md ${errorMsg ? 'border-red-500' : ''} ${disabled ? '' : 'hover:border-gray-400 focus-within:border-gray-500'}`}>
+          {IconItem &&
+            <span className="inline-flex items-center px-3 text-gray-500 text-sm">
+              {<IconItem />}
+            </span>
+          }
+          <select
+            className={`flex-1 px-3 py-2 block w-full sm:text-sm border-none focus:ring-0 outline-none rounded-md ${disabled ? 'bg-gray-100' : ''}`}
+            type={type}
+            id={name}
+            name={name}
+            value={selected}
+            onChange={callback}
+            disabled={disabled}
+          >
+            <option value="">{placeHolder?.toLowerCase()}</option>
+            {choices.map(({ value, label }, index) => (
+              <option key={value} value={value}>
+                {label}
+              </option>
+            ))}
+          </select>
+        </div>
+        {errorMsg && <p className="mt-2 text-sm text-red-600">{errorMsg}</p>}
       </div>
-      {errorMsg && <p className="mt-2 text-sm text-red-600">{errorMsg}</p>}
     </>
   );
 }

Front-End/src/components/Structure/Files/FilesManagement.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Plus, Download, Edit, Trash2, FolderPlus } from 'lucide-react';
+import { Plus, Download, Edit, Trash2, FolderPlus, Signature } from 'lucide-react';
 import Modal from '@/components/Modal';
 import Table from '@/components/Table';
 import FileUpload from '@/components/FileUpload';
@@ -29,6 +29,8 @@ export default function FilesManagement({ csrfToken }) {
   const [fileToEdit, setFileToEdit] = useState(null);
   const [isGroupModalOpen, setIsGroupModalOpen] = useState(false);
   const [groupToEdit, setGroupToEdit] = useState(null);
+  const [token, setToken] = useState(null);
+  const [selectedFile, setSelectedFile] = useState(null);
 
   // Fonction pour transformer les données des fichiers avec les informations complètes du groupe
   const transformFileData = (file, groups) => {
@@ -204,6 +206,9 @@ export default function FilesManagement({ csrfToken }) {
         <button onClick={() => handleFileDelete(row.id)} className="text-red-500 hover:text-red-700">
           <Trash2 size={16} />
         </button>
+        <button onClick={() => handleSignatureRequest(row)} className="text-green-500 hover:text-green-700">
+          <Signature size={16} />
+        </button>
       </div>
     )}
   ];
@@ -223,6 +228,28 @@ export default function FilesManagement({ csrfToken }) {
     )}
   ];
 
+  // Fonction pour gérer la demande de signature
+  const handleSignatureRequest = (file) => {
+    fetch('http://localhost:8080/DocuSeal/generateToken', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        document_id: file.id,
+        user_email: 'anthony.casini.30@gmail.com',
+        url: file.file
+      }),
+    })
+    .then((response) => response.json())
+    .then((data) => {
+      console.log("token received : ", data.token);
+      setToken(data.token);
+      setSelectedFile(file);
+    })
+    .catch((error) => console.error(error));
+  };
+
   return (
     <div>
       <Modal
@@ -297,6 +324,14 @@ export default function FilesManagement({ csrfToken }) {
           />
         </div>
       )}
+      {token && selectedFile && (
+        <DocusealBuilder 
+          token={token} 
+          headers={{
+            'Authorization': `Bearer Rh2CC75ZMZqirmtBGA5NRjUzj8hr9eDYTBeZxv3jgzb`
+          }} 
+        />
+      )}
     </div>
   );
 }