From 665625e0280683fef056e9c950fc6555d889643e Mon Sep 17 00:00:00 2001 From: N3WT DE COMPET Date: Sun, 26 Jan 2025 15:43:11 +0100 Subject: [PATCH] =?UTF-8?q?refactor:=20Revue=20de=20la=20modale=20permetta?= =?UTF-8?q?nt=20de=20cr=C3=A9er=20un=20dossier=20d'inscription?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../app/[locale]/admin/subscriptions/page.js | 3 +- .../components/Inscription/InscriptionForm.js | 749 +++++++++--------- Front-End/src/components/Modal.js | 5 +- Front-End/src/components/Navigation.js | 30 + Front-End/src/components/StepTitle.js | 16 + 5 files changed, 442 insertions(+), 361 deletions(-) create mode 100644 Front-End/src/components/Navigation.js create mode 100644 Front-End/src/components/StepTitle.js diff --git a/Front-End/src/app/[locale]/admin/subscriptions/page.js b/Front-End/src/app/[locale]/admin/subscriptions/page.js index b07f616..6cb654f 100644 --- a/Front-End/src/app/[locale]/admin/subscriptions/page.js +++ b/Front-End/src/app/[locale]/admin/subscriptions/page.js @@ -805,8 +805,7 @@ const handleFileUpload = ({file, name, is_required, order}) => { ( { +const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, registrationFees, tuitionFees, onSubmit, currentStep }) => { const [formData, setFormData] = useState({ studentLastName: '', studentFirstName: '', @@ -22,12 +24,47 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r selectedTuitionFees: [] }); - const [step, setStep] = useState(1); + const [step, setStep] = useState(currentStep || 1); const [selectedStudent, setSelectedEleve] = useState(''); const [existingGuardians, setExistingGuardians] = useState([]); const [totalRegistrationAmount, setTotalRegistrationAmount] = useState(0); const [totalTuitionAmount, setTotalTuitionAmount] = useState(0); - const maxStep = 6 + + const stepTitles = { + 1: 'Nouvel élève', + 2: 'Nouveau Responsable', + 3: "Frais d'inscription", + 4: 'Frais de scolarité', + 5: 'Récapitulatif' + }; + + const steps = ['1', '2', '3', '4', 'Récap']; + + const isStep1Valid = formData.studentLastName && formData.studentFirstName; + const isStep2Valid = ( + (formData.responsableType === "new" && formData.guardianEmail.length > 0) || + (formData.responsableType === "existing" && formData.selectedGuardians.length > 0) + ); + const isStep3Valid = formData.selectedRegistrationFees.length > 0; + const isStep4Valid = formData.selectedTuitionFees.length > 0; + const isStep5Valid = isStep1Valid && isStep2Valid && isStep3Valid && isStep4Valid; + + const isStepValid = (stepNumber) => { + switch (stepNumber) { + case 1: + return isStep1Valid; + case 2: + return isStep2Valid; + case 3: + return isStep3Valid; + case 4: + return isStep4Valid; + case 5: + return isStep5Valid; + default: + return false; + } + }; useEffect(() => { // Calcul du montant total des frais d'inscription lors de l'initialisation @@ -39,6 +76,10 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r }, [registrationDiscounts, registrationFees]); + useEffect(() => { + setStep(currentStep || 1); + }, [currentStep]); + const handleToggleChange = () => { setFormData({ ...formData, autoMail: !formData.autoMail }); }; @@ -52,7 +93,7 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r }; const nextStep = () => { - if (step < maxStep) { + if (step < steps.length) { setStep(step + 1); } }; @@ -181,362 +222,358 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r return finalAmount.toFixed(2); }; - const isLabelAttenuated = (item) => { - return !formData.selectedRegistrationDiscounts.includes(parseInt(item.id)); - }; - - const isLabelFunction = (item) => { - return item.name + ' : ' + item.amount - }; - return ( -
- {step === 1 && ( -
-

Nouvel élève

- - -
- )} +
+ - {step === 2 && ( -
-

Responsable(s)

-
- - -
- {formData.responsableType === 'new' && ( - - )} + {step === 1 && ( +
+ + +
+ )} - {formData.responsableType === 'existing' && ( -
-
- - - - - - - - - {students.map((student, index) => ( - handleEleveSelection(student)} - > - - - - ))} - -
NomPrénom
{student.last_name}{student.first_name}
-
- {selectedStudent && ( -
-

Responsables associés à {selectedStudent.last_name} {selectedStudent.first_name} :

- {existingGuardians.map((guardian) => ( -
- -
- ))} -
- )} -
- )} -
- )} - - {step === 3 && ( -
-

Téléphone (optionnel)

- -
- )} - - {step === 4 && ( -
-

Frais d'inscription

- {registrationFees.length > 0 ? ( - <> -
- -
-

Réductions

-
- {registrationDiscounts.length > 0 ? ( - - ) : ( -

- Information - Aucune réduction n'a été créée sur les frais d'inscription. -

- )} -
- MONTANT TOTAL - }, - { - name: 'TOTAL', - transform: () => {totalRegistrationAmount} € - } - ]} - defaultTheme='bg-cyan-100' - /> - - ) : ( -

- Attention! - Aucun frais d'inscription n'a été créé. -

- )} - - - )} - - {step === 5 && ( -
-

Frais de scolarité

- {tuitionFees.length > 0 ? ( - <> -
- -
-

Réductions

-
- {tuitionDiscounts.length > 0 ? ( - - ) : ( -

- Information - Aucune réduction n'a été créée sur les frais de scolarité. -

- )} -
-
MONTANT TOTAL - }, - { - name: 'TOTAL', - transform: () => {totalTuitionAmount} € - } - ]} - defaultTheme='bg-cyan-100' - /> - - ) : ( -

- Attention! - Aucun frais de scolarité n'a été créé. -

- )} - - - )} - - {step === maxStep && ( -
-

Récapitulatif

-
-
-

Élève

-
- - - - - - - - - - - - -
NomPrénom
{formData.studentLastName}{formData.studentFirstName}
- -
-

Responsable(s)

- {formData.responsableType === 'new' && ( - - - - - - - - - - - - - -
EmailTéléphone
{formData.guardianEmail}{formData.guardianPhone}
- )} - {formData.responsableType === 'existing' && selectedStudent && ( -
-

Associé(s) à : {selectedStudent.nom} {selectedStudent.prenom}

- - - - - - - - - - {existingGuardians.filter(guardian => formData.selectedGuardians.includes(guardian.id)).map((guardian) => ( - - - - - - ))} - -
NomPrénomEmail
{guardian.last_name}{guardian.first_name}{guardian.email}
-
- )} -
-
-
- -
-
- )} - -
- {step > 1 && ( -
+ )} + +
+ {step > 1 && ( +
+
); } diff --git a/Front-End/src/components/Modal.js b/Front-End/src/components/Modal.js index 509aaa5..d84aaaf 100644 --- a/Front-End/src/components/Modal.js +++ b/Front-End/src/components/Modal.js @@ -1,13 +1,12 @@ import * as Dialog from '@radix-ui/react-dialog'; -import Button from '@/components/Button'; -const Modal = ({ isOpen, setIsOpen, title, ContentComponent, size }) => { +const Modal = ({ isOpen, setIsOpen, title, ContentComponent }) => { return ( -
+
{title} diff --git a/Front-End/src/components/Navigation.js b/Front-End/src/components/Navigation.js new file mode 100644 index 0000000..9ad5ba2 --- /dev/null +++ b/Front-End/src/components/Navigation.js @@ -0,0 +1,30 @@ +import React from 'react'; +import StepTitle from '@/components/StepTitle'; + +const Navigation = ({ steps, step, setStep, isStepValid, stepTitles }) => { + return ( +
+
+ {steps.map((stepLabel, index) => { + const isCurrentStep = step === index + 1; + + return ( +
+
+ {stepLabel} +
+
setStep(index + 1)} + style={{ transform: 'translateY(-50%)' }} + >
+
+ ); + })} +
+ +
+ ); +}; + +export default Navigation; \ No newline at end of file diff --git a/Front-End/src/components/StepTitle.js b/Front-End/src/components/StepTitle.js new file mode 100644 index 0000000..e27410d --- /dev/null +++ b/Front-End/src/components/StepTitle.js @@ -0,0 +1,16 @@ +import React from 'react'; + +const StepTitle = ({ title }) => { + return ( +
+
+
+
+
+
{title}
+
+
+ ); +}; + +export default StepTitle; \ No newline at end of file