feat: Génération d'une page de suivi pédagogique + fix utilisation

certains des composants

Front-End/src/components/CheckBox.js

@@ -6,11 +6,9 @@ const CheckBox = ({
   handleChange,
   fieldName,
   itemLabelFunc = () => null,
-  labelAttenuated = () => false,
   horizontal,
 }) => {
   const isChecked = formData[fieldName].includes(parseInt(item.id));
-  const isAttenuated = labelAttenuated(item) && !isChecked;
   return (
     <div
       key={item.id}
@@ -19,7 +17,7 @@ const CheckBox = ({
       {horizontal && (
         <label
           htmlFor={`${fieldName}-${item.id}`}
-          className={`block text-sm text-center mb-1 ${isAttenuated ? 'text-gray-300' : 'font-bold text-emerald-600'}`}
+          className="block text-sm text-center mb-1 font-medium text-gray-700"
         >
           {itemLabelFunc(item)}
         </label>
@@ -37,7 +35,7 @@ const CheckBox = ({
       {!horizontal && (
         <label
           htmlFor={`${fieldName}-${item.id}`}
-          className={`block text-sm ${isAttenuated ? 'text-gray-300' : 'font-bold text-emerald-600'}`}
+          className="block text-sm text-center mb-1 font-medium text-gray-700"
         >
           {itemLabelFunc(item)}
         </label>

Front-End/src/components/CheckBoxList.js

@@ -1,42 +0,0 @@
-import React from 'react';
-import CheckBox from '@/components/CheckBox';
-
-const CheckBoxList = ({
-  items,
-  formData,
-  handleChange,
-  fieldName,
-  label,
-  icon: Icon,
-  className,
-  itemLabelFunc = (item) => item.name,
-  labelAttenuated = () => false,
-  horizontal = false, // Ajouter l'option horizontal
-}) => {
-  return (
-    <div className={`mb-4 w-full ${className}`}>
-      <label className="block text-sm font-medium text-gray-700 flex items-center">
-        {Icon && <Icon className="w-5 h-5 mr-2" />}
-        {label}
-      </label>
-      <div
-        className={`mt-2 grid ${horizontal ? 'grid-cols-6 gap-2' : 'grid-cols-1 gap-4'}`}
-      >
-        {items.map((item) => (
-          <CheckBox
-            key={`${fieldName}-${item.id}`}
-            item={item}
-            formData={formData}
-            handleChange={handleChange}
-            fieldName={fieldName}
-            itemLabelFunc={itemLabelFunc}
-            labelAttenuated={labelAttenuated}
-            horizontal={horizontal}
-          />
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default CheckBoxList;

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

@@ -12,6 +12,8 @@ import logger from '@/utils/logger';
 import Popup from '@/components/Popup';
 import InputPhone from '../InputPhone';
 import { PhoneLabel } from '../PhoneLabel';
+import CheckBox from '@/components/CheckBox';
+import RadioList from '@/components/RadioList';
 
 const InscriptionForm = ({
   students,
@@ -547,27 +549,35 @@ const InscriptionForm = ({
                   {selectedStudent.first_name} :
                 </h3>
                 {existingGuardians.map((guardian) => (
-                  <div key={guardian.id}>
-                    <label className="flex items-center space-x-3 mt-2">
-                      <input
-                        type="checkbox"
-                        checked={formData.selectedGuardians.includes(
-                          guardian.id
-                        )}
-                        className="form-checkbox h-5 w-5 text-emerald-600"
-                        onChange={() =>
-                          handleResponsableSelection(
-                            guardian.id,
-                            guardian.associated_profile_email
-                          )
-                        }
-                      />
-                      <span className="text-gray-900">
-                        {guardian.last_name && guardian.first_name
+                  <div key={guardian.id} className="mt-2">
+                    <CheckBox
+                      item={{ id: guardian.id }}
+                      formData={{
+                        selectedGuardians: formData.selectedGuardians,
+                      }}
+                      handleChange={() =>
+                        setFormData((prevData) => {
+                          const isSelected =
+                            prevData.selectedGuardians.includes(guardian.id);
+                          const updatedSelectedGuardians = isSelected
+                            ? prevData.selectedGuardians.filter(
+                                (id) => id !== guardian.id
+                              ) // Retirer le guardian si décoché
+                            : [...prevData.selectedGuardians, guardian.id]; // Ajouter le guardian si coché
+
+                          return {
+                            ...prevData,
+                            selectedGuardians: updatedSelectedGuardians,
+                          };
+                        })
+                      }
+                      fieldName="selectedGuardians"
+                      itemLabelFunc={() =>
+                        guardian.last_name && guardian.first_name
                           ? `${guardian.last_name} ${guardian.first_name} - ${guardian.associated_profile_email}`
-                          : `${guardian.associated_profile_email}`}
-                      </span>
-                    </label>
+                          : `${guardian.associated_profile_email}`
+                      }
+                    />
                   </div>
                 ))}
               </div>
@@ -719,31 +729,28 @@ const InscriptionForm = ({
           {groups.length > 0 ? (
             <div className="space-y-4">
               <h3 className="font-bold">Sélectionnez un groupe de documents</h3>
-              {groups.map((group) => (
-                <div key={group.id} className="flex items-center space-x-3">
-                  <input
-                    type="radio"
-                    name="fileGroup"
-                    value={group.id}
-                    checked={formData.selectedFileGroup === group.id}
-                    onChange={(e) =>
-                      setFormData({
-                        ...formData,
-                        selectedFileGroup: parseInt(e.target.value),
-                      })
-                    }
-                    className="form-radio h-4 w-4 text-emerald-600"
-                  />
-                  <label className="text-gray-900">
-                    {group.name}
-                    {group.description && (
-                      <span className="text-sm text-gray-500 ml-2">
-                        ({group.description})
-                      </span>
-                    )}
-                  </label>
-                </div>
-              ))}
+              <RadioList
+                sectionLabel=""
+                items={groups.map((group) => ({
+                  id: group.id,
+                  label: `${group.name}${
+                    group.description ? ` (${group.description})` : ''
+                  }`,
+                }))}
+                formData={{
+                  ...formData,
+                  selectedFileGroup: parseInt(formData.selectedFileGroup, 10),
+                }}
+                handleChange={(e) => {
+                  const value = parseInt(e.target.value, 10);
+                  setFormData((prevData) => ({
+                    ...prevData,
+                    selectedFileGroup: value,
+                  }));
+                }}
+                fieldName="selectedFileGroup"
+                className="mt-4"
+              />
             </div>
           ) : (
             <p
@@ -752,7 +759,6 @@ const InscriptionForm = ({
             >
               <strong className="font-bold">Attention!</strong>
               <span className="block sm:inline">
-                {' '}
                 Aucun groupe de documents n&apos;a été créé.
               </span>
             </p>