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

refactor: Création de composants et uniformisation des modales (#2)

Browse Source
This commit is contained in:
N3WT DE COMPET
2024-11-24 18:42:42 +01:00
parent 5946cbdee6
commit d51778ba54
18 changed files with 362 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,8 @@
import { useState } from 'react';
import { User, Mail, Phone, UserCheck } from 'lucide-react';
import InputTextIcon from '@/components/InputTextIcon';
import ToggleSwitch from '@/components/ToggleSwitch';
import Button from '@/components/Button';
const InscriptionForm = ( { eleves, onSubmit }) => {
const [formData, setFormData] = useState({
@ -9,18 +11,17 @@ const InscriptionForm = ( { eleves, onSubmit }) => {
responsableEmail: '',
responsableTel: '',
selectedResponsables: [],
responsableType: 'new'
responsableType: 'new',
autoMail: false
});
const [step, setStep] = useState(1);
const [selectedEleve, setSelectedEleve] = useState('');
const [existingResponsables, setExistingResponsables] = useState([]);
const [autoMail, setAutoMail] = useState(false);
const maxStep = 4
const handleToggleChange = () => {
setAutoMail(!autoMail);
setFormData({ ...formData, autoMail: !autoMail });
const handleToggleChange = () => {
setFormData({ ...formData, autoMail: !formData.autoMail });
};
const handleChange = (e) => {
@ -62,7 +63,7 @@ const InscriptionForm = ( { eleves, onSubmit }) => {
};
const submit = () => {
onSubmit({ ...formData, autoMail });
onSubmit(formData);
}
return (
@ -167,7 +168,7 @@ const InscriptionForm = ( { eleves, onSubmit }) => {
onChange={() => handleResponsableSelection(responsable.id)}
/>
<span className="text-gray-900">
{responsable.nom && responsable.prenom ? `${responsable.nom} ${responsable.prenom}` : `adresse mail : ${responsable.mail}`}
{responsable.nom && responsable.prenom ? `${responsable.nom} ${responsable.prenom}` : `${responsable.mail}`}
</span>
</label>
</div>
@ -232,59 +233,46 @@ const InscriptionForm = ( { eleves, onSubmit }) => {
)}
</div>
</div>
<div className="flex items-center mt-4">
<label className="mr-2 text-gray-600">Envoi automatique</label>
<div className="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
<input
type="checkbox"
name="toggle"
id="toggle"
checked={autoMail}
onChange={handleToggleChange}
className="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer border-emerald-500 checked:right-0 checked:border-emerald-500 checked:bg-emerald-500 focus:border-emerald-500 focus:bg-emerald-500 hover:border-emerald-500 hover:bg-emerald-500"
/>
<label
htmlFor="toggle"
className={`toggle-label block overflow-hidden h-6 rounded-full cursor-pointer transition-colors duration-200 ${autoMail ? 'bg-emerald-300' : 'bg-gray-300'}`}
></label>
</div>
<div className='mt-4'>
<ToggleSwitch
label="Envoi automatique"
checked={formData.autoMail}
onChange={handleToggleChange}
/>
</div>
</div>
)}
<div className="flex justify-end mt-4 space-x-4">
{step > 1 && (
<button
onClick={prevStep}
className="px-4 py-2 bg-gray-300 text-gray-700 rounded-md shadow-sm hover:bg-gray-400 focus:outline-none"
>
Précédent
</button>
<Button text="Précédent"
onClick={prevStep}
className="px-4 py-2 bg-gray-300 text-gray-700 rounded-md shadow-sm hover:bg-gray-400 focus:outline-none"
secondary
name="Previous" />
)}
{step < maxStep ? (
<button
onClick={nextStep}
className={`px-4 py-2 rounded-md shadow-sm focus:outline-none ${
(step === 1 && (!formData.eleveNom || !formData.elevePrenom)) ||
(step === 2 && formData.responsableType === "new" && !formData.responsableEmail) ||
(step === 2 && formData.responsableType === "existing" && formData.selectedResponsables.length === 0)
? "bg-gray-300 text-gray-700 cursor-not-allowed"
: "bg-emerald-500 text-white hover:bg-emerald-600"
}`}
disabled={(step === 1 && (!formData.eleveNom || !formData.elevePrenom)) ||
(step === 2 && formData.responsableType === "new" && !formData.responsableEmail) ||
(step === 2 && formData.responsableType === "existing" && formData.selectedResponsables.length === 0)
}
>
Suivant
</button>
<Button text="Suivant"
onClick={nextStep}
className={`px-4 py-2 rounded-md shadow-sm focus:outline-none ${
(step === 1 && (!formData.eleveNom || !formData.elevePrenom)) ||
(step === 2 && formData.responsableType === "new" && !formData.responsableEmail) ||
(step === 2 && formData.responsableType === "existing" && formData.selectedResponsables.length === 0)
? "bg-gray-300 text-gray-700 cursor-not-allowed"
: "bg-emerald-500 text-white hover:bg-emerald-600"
}`}
disabled={(step === 1 && (!formData.eleveNom || !formData.elevePrenom)) ||
(step === 2 && formData.responsableType === "new" && !formData.responsableEmail) ||
(step === 2 && formData.responsableType === "existing" && formData.selectedResponsables.length === 0)
}
primary
name="Next" />
) : (
<button
onClick={submit}
className="px-4 py-2 bg-emerald-500 text-white rounded-md shadow-sm hover:bg-emerald-600 focus:outline-none"
>
Créer
</button>
<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
name="Create" />
)}
</div>
</div>