acasini/n3wt-school
1
0
Fork 0
mirror of https://git.v0id.ovh/n3wt-innov/n3wt-school.git synced 2026-01-29 16:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Changement des IconTextInput en TextInput, modification du composant step

Browse Source
This commit is contained in:
Luc SORIGNET
2025-01-27 11:20:44 +01:00
parent 6f1631a75b
commit a248898203
16 changed files with 270 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
Front-End/src/components/Inscription/InscriptionForm.js
View File

@ -6,8 +6,8 @@ import Button from '@/components/Button';
import Table from '@/components/Table';
import FeesSection from '@/components/Structure/Tarification/FeesSection';
import DiscountsSection from '@/components/Structure/Tarification/DiscountsSection';
import Navigation from '@/components/Navigation';
import StepTitle from '@/components/StepTitle';
import SectionTitle from '@/components/SectionTitle';
import ProgressStep from '@/components/ProgressStep';
const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, registrationFees, tuitionFees, onSubmit, currentStep }) => {
const [formData, setFormData] = useState({
@ -37,8 +37,8 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
4: 'Frais de scolarité',
5: 'Récapitulatif'
};
const steps = ['1', '2', '3', '4', 'Récap'];
const steps = ['Élève', 'Responsable', 'Inscription', 'Scolarité', 'Récap'];
const isStep1Valid = formData.studentLastName && formData.studentFirstName;
const isStep2Valid = (
@ -136,7 +136,7 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
return { ...prevData, selectedRegistrationFees };
});
};
const handleTuitionFeeSelection = (feeId) => {
setFormData((prevData) => {
const selectedTuitionFees = prevData.selectedTuitionFees.includes(feeId)
@ -147,7 +147,7 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
return { ...prevData, selectedTuitionFees };
});
};
const handleRegistrationDiscountSelection = (discountId) => {
setFormData((prevData) => {
const selectedRegistrationDiscounts = prevData.selectedRegistrationDiscounts.includes(discountId)
@ -169,7 +169,7 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
return { ...prevData, selectedTuitionDiscounts };
});
};
const calculateFinalRegistrationAmount = (selectedRegistrationFees, selectedRegistrationDiscounts) => {
const totalFees = selectedRegistrationFees.reduce((sum, feeId) => {
const fee = registrationFees.find(f => f.id === feeId);
@ -178,7 +178,7 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
}
return sum;
}, 0);
const totalDiscounts = selectedRegistrationDiscounts.reduce((sum, discountId) => {
const discount = registrationDiscounts.find(d => d.id === discountId);
if (discount) {
@ -190,9 +190,9 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
}
return sum;
}, 0);
const finalAmount = totalFees - totalDiscounts;
return finalAmount.toFixed(2);
};
@ -204,7 +204,7 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
}
return sum;
}, 0);
const totalDiscounts = selectedTuitionDiscounts.reduce((sum, discountId) => {
const discount = tuitionDiscounts.find(d => d.id === discountId);
if (discount) {
@ -216,20 +216,20 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
}
return sum;
}, 0);
const finalAmount = totalFees - totalDiscounts;
return finalAmount.toFixed(2);
};
return (
<div className="space-y-4 mt-6">
<Navigation
<ProgressStep
steps={steps}
step={step}
stepTitles={stepTitles}
currentStep={step}
setStep={setStep}
isStepValid={isStepValid}
stepTitles={stepTitles}
/>
{step === 1 && (
@ -257,15 +257,6 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
{step === 2 && (
<div className="mt-6">
<InputTextIcon
name="guardianPhone"
type="tel"
IconItem={Phone}
placeholder="Numéro de téléphone (optionnel)"
value={formData.guardianPhone}
onChange={handleChange}
className="w-full mt-4"
/>
<div className="flex flex-col space-y-4 mt-6">
<label className="flex items-center space-x-3">
<input
@ -291,6 +282,7 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
</label>
</div>
{formData.responsableType === 'new' && (
<>
<InputTextIcon
name="guardianEmail"
type="email"
@ -300,6 +292,16 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
onChange={handleChange}
className="w-full mt-4"
/>
<InputTextIcon
name="guardianPhone"
type="tel"
IconItem={Phone}
placeholder="Numéro de téléphone (optionnel)"
value={formData.guardianPhone}
onChange={handleChange}
className="w-full mt-4"
/>
</>
)}
{formData.responsableType === 'existing' && (
@ -364,7 +366,7 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
handleFeeSelection={handleRegistrationFeeSelection}
/>
</div>
<StepTitle title='Réductions' />
<SectionTitle title='Réductions' />
<div className="mb-4">
{registrationDiscounts.length > 0 ? (
<DiscountsSection
@ -381,16 +383,16 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
</p>
)}
</div>
<StepTitle title='Montant total' />
<SectionTitle title='Montant total' />
<Table
data={[ {id: 1}]}
columns={[
{
name: 'LIBELLE',
name: 'LIBELLE',
transform: () => <span>MONTANT TOTAL</span>
},
{
name: 'TOTAL',
name: 'TOTAL',
transform: () => <b>{totalRegistrationAmount} €</b>
}
]}
@ -403,7 +405,7 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
<span className="block sm:inline"> Aucun frais d'inscription n'a été créé.</span>
</p>
)}
</div>
</div>
)}
{step === 4 && (
@ -419,7 +421,7 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
handleFeeSelection={handleTuitionFeeSelection}
/>
</div>
<StepTitle title='Réductions' />
<SectionTitle title='Réductions' />
<div className="mb-4">
{tuitionDiscounts.length > 0 ? (
<DiscountsSection
@ -436,16 +438,16 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
</p>
)}
</div>
<StepTitle title='Montant total' />
<SectionTitle title='Montant total' />
<Table
data={[ {id: 1}]}
columns={[
{
name: 'LIBELLE',
name: 'LIBELLE',
transform: () => <span>MONTANT TOTAL</span>
},
{
name: 'TOTAL',
name: 'TOTAL',
transform: () => <b>{totalTuitionAmount} €</b>
}
]}