feat: Ajout de la fratrie [#27]

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

@@ -0,0 +1,157 @@
+import InputText from '@/components/InputText';
+import React, { useEffect } from 'react';
+import { Trash2, Plus, Users } from 'lucide-react';
+import SectionHeader from '@/components/SectionHeader';
+
+export default function SiblingInputFields({
+  siblings,
+  setSiblings,
+  setFormData,
+  errors,
+  setIsPageValid,
+}) {
+  useEffect(() => {
+    // Si siblings est null ou undefined, le valoriser à un tableau vide
+    if (!siblings || siblings.length === 0) {
+      setSiblings([]);
+    }
+
+    // Synchroniser siblings avec formData
+    setFormData((prevFormData) => ({
+      ...prevFormData,
+      siblings: siblings, // Mettre à jour siblings dans formData
+    }));
+
+    const isValid = siblings.every((sibling, index) => {
+      return !Object.keys(sibling).some(
+        (field) => getLocalError(index, field) !== ''
+      );
+    });
+
+    setIsPageValid(isValid);
+  }, [siblings, setSiblings, setFormData, setIsPageValid]);
+
+  const getError = (index, field) => {
+    return errors[index]?.[field]?.[0];
+  };
+
+  const getLocalError = (index, field) => {
+    if (
+      (field === 'last_name' &&
+        (!siblings[index].last_name ||
+          siblings[index].last_name.trim() === '')) ||
+      (field === 'first_name' &&
+        (!siblings[index].first_name ||
+          siblings[index].first_name.trim() === '')) ||
+      (field === 'birth_date' &&
+        (!siblings[index].birth_date ||
+          siblings[index].birth_date.trim() === ''))
+    ) {
+      return 'Champs requis';
+    }
+    return '';
+  };
+
+  const onSiblingsChange = (id, field, value) => {
+    const updatedSiblings = siblings.map((sibling) => {
+      if (sibling.id === id) {
+        return { ...sibling, [field]: value };
+      }
+      return sibling;
+    });
+
+    setSiblings(updatedSiblings);
+  };
+
+  const addSibling = () => {
+    setSiblings([
+      ...siblings,
+      {
+        last_name: '',
+        first_name: '',
+        birth_date: '',
+      },
+    ]);
+  };
+
+  const deleteSibling = (index) => {
+    const updatedSiblings = siblings.filter((_, i) => i !== index);
+    setSiblings(updatedSiblings);
+  };
+
+  return (
+    <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
+      <SectionHeader
+        icon={Users}
+        title={`Frères et Sœurs`}
+        description={`Ajoutez les informations des frères et sœurs`}
+      />
+      {siblings.map((item, index) => (
+        <div className="p-6" key={index}>
+          <div className="flex justify-between items-center mb-4">
+            <h3 className="text-xl font-bold">Frère/Sœur {index + 1}</h3>
+            <Trash2
+              className="w-5 h-5 text-red-500 cursor-pointer hover:text-red-700 transition-colors"
+              onClick={() => deleteSibling(index)}
+            />
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+            <InputText
+              name="last_name"
+              type="text"
+              label="Nom"
+              value={item.last_name}
+              onChange={(event) => {
+                onSiblingsChange(item.id, 'last_name', event.target.value);
+              }}
+              errorMsg={
+                getError(index, 'last_name') ||
+                getLocalError(index, 'last_name')
+              }
+              required
+            />
+            <InputText
+              name="first_name"
+              type="text"
+              label="Prénom"
+              value={item.first_name}
+              onChange={(event) => {
+                onSiblingsChange(item.id, 'first_name', event.target.value);
+              }}
+              errorMsg={
+                getError(index, 'first_name') ||
+                getLocalError(index, 'first_name')
+              }
+              required
+            />
+          </div>
+
+          <div className="grid grid-cols-1 gap-4">
+            <InputText
+              name="birth_date"
+              type="date"
+              label="Date de Naissance"
+              value={item.birth_date}
+              onChange={(event) => {
+                onSiblingsChange(item.id, 'birth_date', event.target.value);
+              }}
+              errorMsg={
+                getError(index, 'birth_date') ||
+                getLocalError(index, 'birth_date')
+              }
+              required
+            />
+          </div>
+        </div>
+      ))}
+
+      <div className="flex justify-center">
+        <Plus
+          className="w-8 h-8 text-green-500 cursor-pointer hover:text-green-700 transition-colors border-2 border-green-500 hover:border-green-700 rounded-full p-1"
+          onClick={addSibling}
+        />
+      </div>
+    </div>
+  );
+}