mirror of
https://git.v0id.ovh/n3wt-innov/n3wt-school.git
synced 2026-01-29 16:03:21 +00:00
feat: Ajout de la gestion des fichier d'inscription [#1]
This commit is contained in:
Luc SORIGNET
@ -70,21 +70,21 @@ const InscriptionForm = ( { eleves, onSubmit }) => {
|
||||
<div className="space-y-4 mt-8">
|
||||
{step === 1 && (
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold mb-4">Nouvel élève</h2>
|
||||
<InputTextIcon
|
||||
name="eleveNom"
|
||||
type="text"
|
||||
<h2 className="text-l font-bold mb-4">Nouvel élève</h2>
|
||||
<InputTextIcon
|
||||
name="eleveNom"
|
||||
type="text"
|
||||
IconItem={User}
|
||||
placeholder="Nom de l'élève"
|
||||
placeholder="Nom de l'élève"
|
||||
value={formData.eleveNom}
|
||||
onChange={handleChange}
|
||||
className="w-full"
|
||||
/>
|
||||
<InputTextIcon
|
||||
name="elevePrenom"
|
||||
type="text"
|
||||
<InputTextIcon
|
||||
name="elevePrenom"
|
||||
type="text"
|
||||
IconItem={User}
|
||||
placeholder="Prénom de l'élève"
|
||||
placeholder="Prénom de l'élève"
|
||||
value={formData.elevePrenom}
|
||||
onChange={handleChange}
|
||||
className="w-full"
|
||||
@ -94,7 +94,7 @@ const InscriptionForm = ( { eleves, onSubmit }) => {
|
||||
|
||||
{step === 2 && (
|
||||
<div className="mt-6">
|
||||
<h2 className="text-2xl font-bold mb-4">Responsable(s)</h2>
|
||||
<h2 className="text-l font-bold mb-4">Responsable(s)</h2>
|
||||
<div className="flex flex-col space-y-4">
|
||||
<label className="flex items-center space-x-3">
|
||||
<input
|
||||
@ -120,17 +120,17 @@ const InscriptionForm = ( { eleves, onSubmit }) => {
|
||||
</label>
|
||||
</div>
|
||||
{formData.responsableType === 'new' && (
|
||||
<InputTextIcon
|
||||
name="responsableEmail"
|
||||
type="email"
|
||||
<InputTextIcon
|
||||
name="responsableEmail"
|
||||
type="email"
|
||||
IconItem={Mail}
|
||||
placeholder="Email du responsable"
|
||||
placeholder="Email du responsable"
|
||||
value={formData.responsableEmail}
|
||||
onChange={handleChange}
|
||||
className="w-full mt-4"
|
||||
/>
|
||||
)}
|
||||
|
||||
|
||||
{formData.responsableType === 'existing' && (
|
||||
<div className="mt-4">
|
||||
<div className="mt-4" style={{ maxHeight: '300px', overflowY: 'auto' }}>
|
||||
@ -161,10 +161,10 @@ const InscriptionForm = ( { eleves, onSubmit }) => {
|
||||
{existingResponsables.map((responsable) => (
|
||||
<div key={responsable.id}>
|
||||
<label className="flex items-center space-x-3 mt-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formData.selectedResponsables.includes(responsable.id)}
|
||||
className="form-checkbox h-5 w-5 text-emerald-600"
|
||||
className="form-checkbox h-5 w-5 text-emerald-600"
|
||||
onChange={() => handleResponsableSelection(responsable.id)}
|
||||
/>
|
||||
<span className="text-gray-900">
|
||||
@ -182,12 +182,12 @@ const InscriptionForm = ( { eleves, onSubmit }) => {
|
||||
|
||||
{step === 3 && (
|
||||
<div className="mt-6">
|
||||
<h2 className="text-2xl font-bold mb-4">Téléphone (optionnel)</h2>
|
||||
<InputTextIcon
|
||||
name="responsableTel"
|
||||
type="tel"
|
||||
<h2 className="text-l font-bold mb-4">Téléphone (optionnel)</h2>
|
||||
<InputTextIcon
|
||||
name="responsableTel"
|
||||
type="tel"
|
||||
IconItem={Phone}
|
||||
placeholder="Numéro de téléphone"
|
||||
placeholder="Numéro de téléphone"
|
||||
value={formData.responsableTel}
|
||||
onChange={handleChange}
|
||||
className="w-full mt-4"
|
||||
@ -197,45 +197,71 @@ const InscriptionForm = ( { eleves, onSubmit }) => {
|
||||
|
||||
{step === maxStep && (
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold mb-4">Récapitulatif</h2>
|
||||
<div className="flex items-center justify-between space-x-4">
|
||||
<div className="bg-gray-100 p-3 rounded-lg shadow-md flex items-center w-1/2 mb-4">
|
||||
<User className="w-10 h-10 text-gray-300 mr-4" />
|
||||
<div>
|
||||
<p className="italic text-gray-600">Élève</p>
|
||||
<p>Nom : {formData.eleveNom}</p>
|
||||
<p>Prénom : {formData.elevePrenom}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between space-x-4">
|
||||
<div className="bg-gray-100 p-3 rounded-lg shadow-md flex items-center w-1/2">
|
||||
<UserCheck className="w-10 h-10 text-gray-300 mr-4" />
|
||||
<h2 className="text-l font-bold mb-4">Récapitulatif</h2>
|
||||
<div className="space-y-4">
|
||||
<section>
|
||||
<h3 className="font-bold">Élève</h3>
|
||||
<table className="min-w-full bg-white border">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="px-4 py-2 border">Nom</th>
|
||||
<th className="px-4 py-2 border">Prénom</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="px-4 py-2 border">{formData.eleveNom}</td>
|
||||
<td className="px-4 py-2 border">{formData.elevePrenom}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section>
|
||||
<h3 className="font-bold">Responsable(s)</h3>
|
||||
{formData.responsableType === 'new' && (
|
||||
<div>
|
||||
<p className="italic text-gray-600">Responsable</p>
|
||||
<p>Email : {formData.responsableEmail}</p>
|
||||
<p>Téléphone : {formData.responsableTel}</p>
|
||||
</div>
|
||||
<table className="min-w-full bg-white border">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="px-4 py-2 border">Email</th>
|
||||
<th className="px-4 py-2 border">Téléphone</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="px-4 py-2 border">{formData.responsableEmail}</td>
|
||||
<td className="px-4 py-2 border">{formData.responsableTel}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
{formData.responsableType === 'existing' && selectedEleve && (
|
||||
<div>
|
||||
<p className="italic text-gray-600">Responsable(s)</p>
|
||||
<p>Associé(s) à : {selectedEleve.nom} {selectedEleve.prenom}</p>
|
||||
<ul className="list-disc ml-6">
|
||||
{existingResponsables.filter(responsable => formData.selectedResponsables.includes(responsable.id)).map((responsable) => (
|
||||
<li key={responsable.id}>
|
||||
{responsable.nom && responsable.prenom ? `${responsable.nom} ${responsable.prenom}` : responsable.mail}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<table className="min-w-full bg-white border">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="px-4 py-2 border">Nom</th>
|
||||
<th className="px-4 py-2 border">Prénom</th>
|
||||
<th className="px-4 py-2 border">Email</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{existingResponsables.filter(responsable => formData.selectedResponsables.includes(responsable.id)).map((responsable) => (
|
||||
<tr key={responsable.id}>
|
||||
<td className="px-4 py-2 border">{responsable.nom}</td>
|
||||
<td className="px-4 py-2 border">{responsable.prenom}</td>
|
||||
<td className="px-4 py-2 border">{responsable.mail}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div className='mt-4'>
|
||||
<ToggleSwitch
|
||||
label="Envoi automatique"
|
||||
<ToggleSwitch
|
||||
label="Envoi automatique"
|
||||
checked={formData.autoMail}
|
||||
onChange={handleToggleChange}
|
||||
/>
|
||||
@ -271,7 +297,7 @@ const InscriptionForm = ( { eleves, onSubmit }) => {
|
||||
<Button text="Créer"
|
||||
onClick={submit}
|
||||
className="px-4 py-2 bg-emerald-500 text-white rounded-md shadow-sm hover:bg-emerald-600 focus:outline-none"
|
||||
primary
|
||||
primary
|
||||
name="Create" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user