mirror of
https://git.v0id.ovh/n3wt-innov/n3wt-school.git
synced 2026-01-28 23:43:22 +00:00
feat: Ajout de l'option d'envoi automatique [#1]
This commit is contained in:
N3WT DE COMPET
@ -183,7 +183,7 @@ export default function Page({ params: { locale } }) {
|
||||
useEffect(() => {
|
||||
fetchClasses();
|
||||
fetchStudents();
|
||||
}, []);
|
||||
}, [fichesInscriptionsDataEnCours]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchDataAndSetState = () => {
|
||||
@ -302,9 +302,17 @@ export default function Page({ params: { locale } }) {
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log('Success:', data);
|
||||
setFichesInscriptionsDataEnCours(prevState => [...prevState, data]);
|
||||
setTotalPending(totalPending+1);
|
||||
console.log('Success:', data);
|
||||
setFichesInscriptionsDataEnCours(prevState => {
|
||||
if (prevState && prevState.length > 0) {
|
||||
return [...prevState, data];
|
||||
}
|
||||
return prevState;
|
||||
});
|
||||
setTotalPending(totalPending+1);
|
||||
if (updatedData.autoMail) {
|
||||
sendConfirmFicheInscription(data.eleve.id, updatedData.eleveNom, updatedData.elevePrenom);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error:', error);
|
||||
@ -344,7 +352,7 @@ export default function Page({ params: { locale } }) {
|
||||
responsables: [
|
||||
{
|
||||
mail: updatedData.responsableEmail,
|
||||
//telephone: telephoneResponsable,
|
||||
telephone: updatedData.responsableTel,
|
||||
profilAssocie: idProfil // Association entre le reponsable de l'élève et le profil créé par défaut précédemment
|
||||
}
|
||||
],
|
||||
@ -363,9 +371,17 @@ export default function Page({ params: { locale } }) {
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log('Success:', data);
|
||||
setFichesInscriptionsDataEnCours(prevState => [...prevState, data]);
|
||||
setTotalPending(totalPending+1);
|
||||
console.log('Success:', data);
|
||||
setFichesInscriptionsDataEnCours(prevState => {
|
||||
if (prevState && prevState.length > 0) {
|
||||
return [...prevState, data];
|
||||
}
|
||||
return prevState;
|
||||
});
|
||||
setTotalPending(totalPending+1);
|
||||
if (updatedData.autoMail) {
|
||||
sendConfirmFicheInscription(data.eleve.id, updatedData.eleveNom, updatedData.elevePrenom);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error:', error);
|
||||
@ -623,9 +639,10 @@ const columnsSubscribed = [
|
||||
isOpen={isOpen}
|
||||
setIsOpen={setIsOpen}
|
||||
title={"Création d'un nouveau dossier d'inscription"}
|
||||
size='sm:w-1/4'
|
||||
ContentComponent={() => (
|
||||
<InscriptionForm eleves={eleves}
|
||||
onSubmit={createDI}
|
||||
<InscriptionForm eleves={eleves}
|
||||
onSubmit={createDI}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
@ -1,10 +1,13 @@
|
||||
import { useState } from 'react';
|
||||
import { User, Mail, Phone, UserCheck } from 'lucide-react';
|
||||
import InputTextIcon from '@/components/InputTextIcon';
|
||||
|
||||
const InscriptionForm = ( { eleves, onSubmit }) => {
|
||||
const [formData, setFormData] = useState({
|
||||
eleveNom: '',
|
||||
elevePrenom: '',
|
||||
responsableEmail: '',
|
||||
responsableTel: '',
|
||||
selectedResponsables: [],
|
||||
responsableType: 'new'
|
||||
});
|
||||
@ -12,6 +15,13 @@ const InscriptionForm = ( { eleves, onSubmit }) => {
|
||||
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 handleChange = (e) => {
|
||||
const { name, value, type } = e.target;
|
||||
@ -22,7 +32,7 @@ const InscriptionForm = ( { eleves, onSubmit }) => {
|
||||
};
|
||||
|
||||
const nextStep = () => {
|
||||
if (step < 3) {
|
||||
if (step < maxStep) {
|
||||
setStep(step + 1);
|
||||
}
|
||||
};
|
||||
@ -52,149 +62,192 @@ const InscriptionForm = ( { eleves, onSubmit }) => {
|
||||
};
|
||||
|
||||
const submit = () => {
|
||||
onSubmit(formData);
|
||||
onSubmit({ ...formData, autoMail });
|
||||
}
|
||||
|
||||
console.log(eleves)
|
||||
|
||||
return (
|
||||
<div className="space-y-4 mt-8">
|
||||
{step === 1 && (
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold mb-4">Nouvel élève</h2>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Nom de l'élève"
|
||||
name="eleveNom"
|
||||
<InputTextIcon
|
||||
name="eleveNom"
|
||||
type="text"
|
||||
IconItem={User}
|
||||
placeholder="Nom de l'élève"
|
||||
value={formData.eleveNom}
|
||||
onChange={handleChange}
|
||||
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 italic"
|
||||
className="w-full"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Prénom de l'élève"
|
||||
name="elevePrenom"
|
||||
<InputTextIcon
|
||||
name="elevePrenom"
|
||||
type="text"
|
||||
IconItem={User}
|
||||
placeholder="Prénom de l'élève"
|
||||
value={formData.elevePrenom}
|
||||
onChange={handleChange}
|
||||
className="mt-4 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 italic"
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === 2 && (
|
||||
<div className="mt-6">
|
||||
<h2 className="text-2xl font-bold mb-4">Responsable(s)</h2>
|
||||
<div className="flex flex-col space-y-4">
|
||||
<label className="flex items-center space-x-3">
|
||||
<input
|
||||
type="radio"
|
||||
name="responsableType"
|
||||
value="new"
|
||||
checked={formData.responsableType === 'new'}
|
||||
onChange={handleChange}
|
||||
className="form-radio h-3 w-3 text-emerald-600 focus:ring-emerald-500 hover:ring-emerald-400 checked:bg-emerald-600 checked:h-3 checked:w-3"
|
||||
/>
|
||||
<span className="text-gray-900">Nouveau Responsable</span>
|
||||
</label>
|
||||
<label className="flex items-center space-x-3">
|
||||
<input
|
||||
type="radio"
|
||||
name="responsableType"
|
||||
value="existing"
|
||||
checked={formData.responsableType === 'existing'}
|
||||
onChange={handleChange}
|
||||
className="form-radio h-3 w-3 text-emerald-600 focus:ring-emerald-500 hover:ring-emerald-400 checked:bg-emerald-600 checked:h-3 checked:w-3"
|
||||
/>
|
||||
<span className="text-gray-900">Responsable Existant</span>
|
||||
</label>
|
||||
</div>
|
||||
{formData.responsableType === 'new' && (
|
||||
<div className="mt-4">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Email du responsable"
|
||||
name="responsableEmail"
|
||||
<h2 className="text-2xl font-bold mb-4">Responsable(s)</h2>
|
||||
<div className="flex flex-col space-y-4">
|
||||
<label className="flex items-center space-x-3">
|
||||
<input
|
||||
type="radio"
|
||||
name="responsableType"
|
||||
value="new"
|
||||
checked={formData.responsableType === 'new'}
|
||||
onChange={handleChange}
|
||||
className="form-radio h-3 w-3 text-emerald-600 focus:ring-emerald-500 hover:ring-emerald-400 checked:bg-emerald-600 checked:h-3 checked:w-3"
|
||||
/>
|
||||
<span className="text-gray-900">Nouveau Responsable</span>
|
||||
</label>
|
||||
<label className="flex items-center space-x-3">
|
||||
<input
|
||||
type="radio"
|
||||
name="responsableType"
|
||||
value="existing"
|
||||
checked={formData.responsableType === 'existing'}
|
||||
onChange={handleChange}
|
||||
className="form-radio h-3 w-3 text-emerald-600 focus:ring-emerald-500 hover:ring-emerald-400 checked:bg-emerald-600 checked:h-3 checked:w-3"
|
||||
/>
|
||||
<span className="text-gray-900">Responsable Existant</span>
|
||||
</label>
|
||||
</div>
|
||||
{formData.responsableType === 'new' && (
|
||||
<InputTextIcon
|
||||
name="responsableEmail"
|
||||
type="email"
|
||||
IconItem={Mail}
|
||||
placeholder="Email du responsable"
|
||||
value={formData.responsableEmail}
|
||||
onChange={handleChange}
|
||||
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 italic"
|
||||
className="w-full mt-4"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{formData.responsableType === 'existing' && (
|
||||
<div className="mt-4">
|
||||
<div className="mt-4" style={{ maxHeight: '300px', overflowY: 'auto' }}>
|
||||
<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>
|
||||
{eleves.map((eleve, index) => (
|
||||
<tr
|
||||
key={eleve.id}
|
||||
className={`cursor-pointer ${selectedEleve && selectedEleve.id === eleve.id ? 'bg-emerald-600 text-white' : index % 2 === 0 ? 'bg-emerald-100' : ''}`}
|
||||
onClick={() => handleEleveSelection(eleve)}
|
||||
>
|
||||
<td className="px-4 py-2 border">{eleve.nom}</td>
|
||||
<td className="px-4 py-2 border">{eleve.prenom}</td>
|
||||
)}
|
||||
|
||||
{formData.responsableType === 'existing' && (
|
||||
<div className="mt-4">
|
||||
<div className="mt-4" style={{ maxHeight: '300px', overflowY: 'auto' }}>
|
||||
<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>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{selectedEleve && (
|
||||
<div className="mt-4">
|
||||
<h3 className="font-bold">Responsables associés à {selectedEleve.nom} {selectedEleve.prenom} :</h3>
|
||||
{existingResponsables.map((responsable) => (
|
||||
<div key={responsable.id}>
|
||||
<label className="flex items-center space-x-3 mt-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formData.selectedResponsables.includes(responsable.id)}
|
||||
className="form-checkbox h-5 w-5 text-emerald-600"
|
||||
onChange={() => handleResponsableSelection(responsable.id)}
|
||||
/>
|
||||
<span className="text-gray-900">
|
||||
{responsable.nom && responsable.prenom ? `${responsable.nom} ${responsable.prenom}` : `adresse mail : ${responsable.mail}`}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</thead>
|
||||
<tbody>
|
||||
{eleves.map((eleve, index) => (
|
||||
<tr
|
||||
key={eleve.id}
|
||||
className={`cursor-pointer ${selectedEleve && selectedEleve.id === eleve.id ? 'bg-emerald-600 text-white' : index % 2 === 0 ? 'bg-emerald-100' : ''}`}
|
||||
onClick={() => handleEleveSelection(eleve)}
|
||||
>
|
||||
<td className="px-4 py-2 border">{eleve.nom}</td>
|
||||
<td className="px-4 py-2 border">{eleve.prenom}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{selectedEleve && (
|
||||
<div className="mt-4">
|
||||
<h3 className="font-bold">Responsables associés à {selectedEleve.nom} {selectedEleve.prenom} :</h3>
|
||||
{existingResponsables.map((responsable) => (
|
||||
<div key={responsable.id}>
|
||||
<label className="flex items-center space-x-3 mt-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formData.selectedResponsables.includes(responsable.id)}
|
||||
className="form-checkbox h-5 w-5 text-emerald-600"
|
||||
onChange={() => handleResponsableSelection(responsable.id)}
|
||||
/>
|
||||
<span className="text-gray-900">
|
||||
{responsable.nom && responsable.prenom ? `${responsable.nom} ${responsable.prenom}` : `adresse mail : ${responsable.mail}`}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === 3 && (
|
||||
<div className="mt-6">
|
||||
<h2 className="text-2xl font-bold mb-4">Téléphone (optionnel)</h2>
|
||||
<InputTextIcon
|
||||
name="responsableTel"
|
||||
type="tel"
|
||||
IconItem={Phone}
|
||||
placeholder="Numéro de téléphone"
|
||||
value={formData.responsableTel}
|
||||
onChange={handleChange}
|
||||
className="w-full mt-4"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === maxStep && (
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold mb-4">Récapitulatif</h2>
|
||||
<div className="mb-4">
|
||||
<h3 className="text-xl font-semibold">Élève</h3>
|
||||
<p>Nom : {formData.eleveNom}</p>
|
||||
<p>Prénom : {formData.elevePrenom}</p>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<h3 className="text-xl font-semibold">Responsable(s)</h3>
|
||||
{formData.responsableType === 'new' && (
|
||||
<p>Email du nouveau responsable : {formData.responsableEmail}</p>
|
||||
)}
|
||||
{formData.responsableType === 'existing' && selectedEleve && (
|
||||
<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>
|
||||
<h4 className="font-bold">Responsables associés à {selectedEleve.nom} {selectedEleve.prenom} :</h4>
|
||||
<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>
|
||||
<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" />
|
||||
{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>
|
||||
)}
|
||||
{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>
|
||||
</div>
|
||||
)}
|
||||
</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>
|
||||
</div>
|
||||
)}
|
||||
@ -208,7 +261,7 @@ const InscriptionForm = ( { eleves, onSubmit }) => {
|
||||
Précédent
|
||||
</button>
|
||||
)}
|
||||
{step < 3 ? (
|
||||
{step < maxStep ? (
|
||||
<button
|
||||
onClick={nextStep}
|
||||
className={`px-4 py-2 rounded-md shadow-sm focus:outline-none ${
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import * as Dialog from '@radix-ui/react-dialog';
|
||||
|
||||
const Modal = ({ isOpen, setIsOpen, title, ContentComponent }) => {
|
||||
const Modal = ({ isOpen, setIsOpen, title, ContentComponent, size }) => {
|
||||
return (
|
||||
<Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
||||
<Dialog.Content className="fixed inset-0 flex items-center justify-center">
|
||||
<div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full sm:p-6">
|
||||
<div className={`inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:p-6 ${size ? size : 'sm:w-full' }`}>
|
||||
<Dialog.Title className="text-lg font-medium text-gray-900">
|
||||
{title}
|
||||
</Dialog.Title>
|
||||
|
||||
Reference in New Issue
Block a user