feat: Ordonnancement de l'inscription sur plusieurs pages + contrôle des

champs remplis dans le formulaire

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

@@ -1,27 +1,70 @@
 import InputText from '@/components/InputText';
 import InputPhone from '@/components/InputPhone';
-import Button from '@/components/Button';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useTranslations } from 'next-intl';
-import { Trash2, Plus } from 'lucide-react';
+import { Trash2, Plus, Users } from 'lucide-react';
+import SectionHeader from '@/components/SectionHeader';
 
 export default function ResponsableInputFields({
   guardians,
-  onGuardiansChange,
-  addGuardian,
-  deleteGuardian,
-  errors = [],
+  setGuardians,
+  errors,
+  setIsPageValid
 }) {
   const t = useTranslations('ResponsableInputFields');
 
+  useEffect(() => {
+    const isValid = guardians.length > 0 && guardians.every((guardian, index) => {
+      return !Object.keys(guardian).some((field) => getLocalError(index, field) !== '');
+    });
+
+    setIsPageValid(isValid);
+  }, [guardians, setIsPageValid]);
+
   const getError = (index, field) => {
     return errors[index]?.[field]?.[0];
   };
 
+  const getLocalError = (index, field) => {
+    if (
+      // Student Form
+      ( field === 'last_name' && (!guardians[index].last_name || guardians[index].last_name.trim() === '') ) ||
+      ( field === 'first_name' && (!guardians[index].first_name || guardians[index].first_name.trim() === '') ) ||
+      ( field === 'email' && (!guardians[index].associated_profile_email || guardians[index].associated_profile_email.trim() === '') ) ||
+      ( field === 'birth_date' && (!guardians[index].birth_date || guardians[index].birth_date.trim() === '') ) ||
+      ( field === 'profession' && (!guardians[index].profession || guardians[index].profession.trim() === '') ) ||
+      ( field === 'address' && (!guardians[index].address || guardians[index].address.trim() === '') )
+    ) {
+      return 'Champs requis';
+    }
+    return '';
+  };
+  
+  const onGuardiansChange = (id, field, value) => {
+    const updatedGuardians = guardians.map((guardian) =>
+      guardian.id === id ? { ...guardian, [field]: value } : guardian
+    );
+    setGuardians(updatedGuardians);
+  };
+
+  const addGuardian = () => {
+    setGuardians([...guardians, { id: Date.now(), name: '', email: '' }]);
+  };
+  
+  const deleteGuardian = (index) => {
+    const updatedGuardians = guardians.filter((_, i) => i !== index);
+    setGuardians(updatedGuardians);
+  };
+
   return (
-    <div className="space-y-8">
+    <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
+      <SectionHeader
+        icon={Users}
+        title={`Responsables légaux`}
+        description={`Remplissez les champs requis`}
+      />
       {guardians.map((item, index) => (
-        <div className="p-6 bg-gray-50 rounded-lg shadow-sm" key={index}>
+        <div className="p-6 " key={index}>
           <div className="flex justify-between items-center mb-4">
             <h3 className="text-xl font-bold">
               {t('responsable')} {index + 1}
@@ -45,7 +88,7 @@ export default function ResponsableInputFields({
               onChange={(event) => {
                 onGuardiansChange(item.id, 'last_name', event.target.value);
               }}
-              errorMsg={getError(index, 'last_name')}
+              errorMsg={getError(index, 'last_name') || getLocalError(index, 'last_name')}
               required
             />
             <InputText
@@ -56,7 +99,7 @@ export default function ResponsableInputFields({
               onChange={(event) => {
                 onGuardiansChange(item.id, 'first_name', event.target.value);
               }}
-              errorMsg={getError(index, 'first_name')}
+              errorMsg={getError(index, 'first_name') || getLocalError(index, 'first_name')}
               required
             />
           </div>
@@ -75,11 +118,11 @@ export default function ResponsableInputFields({
                 );
               }}
               required
-              errorMsg={getError(index, 'email')}
+              errorMsg={getError(index, 'email')  || getLocalError(index, 'email')}
             />
             <InputPhone
               name="telephoneResponsable"
-              label={t('phone')}
+              label='phone'
               value={item.phone}
               onChange={(event) => {
                 onGuardiansChange(item.id, 'phone', event);
@@ -99,7 +142,7 @@ export default function ResponsableInputFields({
                 onGuardiansChange(item.id, 'birth_date', event.target.value);
               }}
               required
-              errorMsg={getError(index, 'birth_date')}
+              errorMsg={getError(index, 'birth_date') || getLocalError(index, 'birth_date')}
             />
             <InputText
               name="professionResponsable"
@@ -110,7 +153,7 @@ export default function ResponsableInputFields({
                 onGuardiansChange(item.id, 'profession', event.target.value);
               }}
               required
-              errorMsg={getError(index, 'profession')}
+              errorMsg={getError(index, 'profession') || getLocalError(index, 'profession')}
             />
           </div>
 
@@ -124,7 +167,7 @@ export default function ResponsableInputFields({
                 onGuardiansChange(item.id, 'address', event.target.value);
               }}
               required
-              errorMsg={getError(index, 'address')}
+              errorMsg={getError(index, 'address') || getLocalError(index, 'address')}
             />
           </div>
         </div>