mirror of
https://git.v0id.ovh/n3wt-innov/n3wt-school.git
synced 2026-01-29 07:53:23 +00:00
refactor: Transformation des requetes vers le back en action ajout des
erreurs 400 et refresh lors d'un envoie de formulaire
This commit is contained in:
Luc SORIGNET
@ -27,6 +27,7 @@ import {
|
||||
archiveRegisterForm,
|
||||
fetchRegisterFormFileTemplate,
|
||||
deleteRegisterFormFileTemplate,
|
||||
createRegistrationFormFileTemplate,
|
||||
fetchStudents,
|
||||
editRegisterForm } from "@/app/lib/subscriptionAction"
|
||||
|
||||
@ -44,16 +45,14 @@ const useFakeData = process.env.NEXT_PUBLIC_USE_FAKE_DATA === 'true';
|
||||
|
||||
export default function Page({ params: { locale } }) {
|
||||
const t = useTranslations('subscriptions');
|
||||
const [ficheInscriptions, setFicheInscriptions] = useState([]);
|
||||
const [fichesInscriptionsDataEnCours, setFichesInscriptionsDataEnCours] = useState([]);
|
||||
const [fichesInscriptionsDataInscrits, setFichesInscriptionsDataInscrits] = useState([]);
|
||||
const [fichesInscriptionsDataArchivees, setFichesInscriptionsDataArchivees] = useState([]);
|
||||
const [registrationForms, setRegistrationForms] = useState([]);
|
||||
const [registrationFormsDataPending, setRegistrationFormsDataPending] = useState([]);
|
||||
const [registrationFormsDataSubscribed, setRegistrationFormsDataSubscribed] = useState([]);
|
||||
const [registrationFormsDataArchived, setRegistrationFormsDataArchived] = useState([]);
|
||||
// const [filter, setFilter] = useState('*');
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [alertPage, setAlertPage] = useState(false);
|
||||
const [mailSent, setMailSent] = useState(false);
|
||||
const [ficheArchivee, setFicheArchivee] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [popup, setPopup] = useState({ visible: false, message: '', onConfirm: null });
|
||||
const [activeTab, setActiveTab] = useState('pending');
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
@ -64,13 +63,12 @@ export default function Page({ params: { locale } }) {
|
||||
const [itemsPerPage, setItemsPerPage] = useState(5); // Définir le nombre d'éléments par page
|
||||
|
||||
const [fichiers, setFichiers] = useState([]);
|
||||
|
||||
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [isOpenAffectationClasse, setIsOpenAffectationClasse] = useState(false);
|
||||
const [student, setStudent] = useState('');
|
||||
const [classes, setClasses] = useState([]);
|
||||
const [students, setEleves] = useState([]);
|
||||
const [reloadFetch, setReloadFetch] = useState(false);
|
||||
|
||||
const csrfToken = useCsrfToken();
|
||||
|
||||
@ -80,6 +78,7 @@ export default function Page({ params: { locale } }) {
|
||||
|
||||
const closeModal = () => {
|
||||
setIsOpen(false);
|
||||
|
||||
}
|
||||
|
||||
const openModalAssociationEleve = (eleveSelected) => {
|
||||
@ -88,58 +87,72 @@ export default function Page({ params: { locale } }) {
|
||||
}
|
||||
|
||||
const requestErrorHandler = (err)=>{
|
||||
setIsLoading(false);
|
||||
console.error('Error fetching data:', err);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles the pending data for the registration form.
|
||||
*
|
||||
* @param {Object} data - The data object containing registration forms and count.
|
||||
* @param {Array} data.registerForms - The array of registration forms.
|
||||
* @param {number} data.count - The total count of registration forms.
|
||||
*/
|
||||
const registerFormPendingDataHandler = (data) => {
|
||||
setIsLoading(false);
|
||||
if (data) {
|
||||
const { registerForms, count } = data;
|
||||
const { registerForms, count, page_size } = data;
|
||||
if (registerForms) {
|
||||
setFichesInscriptionsDataEnCours(registerForms);
|
||||
setRegistrationFormsDataPending(registerForms);
|
||||
}
|
||||
const calculatedTotalPages = count === 0 ? 1 : Math.ceil(count / pageSize);
|
||||
const calculatedTotalPages = count === 0 ? 1 : Math.ceil(count / page_size);
|
||||
setTotalPending(count);
|
||||
setTotalPages(calculatedTotalPages);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Handles the data received from the subscription registration form.
|
||||
*
|
||||
* @param {Object} data - The data object received from the subscription registration form.
|
||||
* @param {Array} data.registerForms - An array of registration forms.
|
||||
* @param {number} data.count - The total count of subscribed forms.
|
||||
*/
|
||||
const registerFormSubscribedDataHandler = (data) => {
|
||||
setIsLoading(false);
|
||||
if (data) {
|
||||
const { registerForms, count } = data;
|
||||
const { registerForms, count, page_size } = data;
|
||||
setTotalSubscribed(count);
|
||||
if (registerForms) {
|
||||
setFichesInscriptionsDataInscrits(registerForms);
|
||||
setRegistrationFormsDataSubscribed(registerForms);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Handles the archived data for the register form.
|
||||
*
|
||||
* @param {Object} data - The data object containing archived register forms and count.
|
||||
* @param {Array} data.registerForms - The array of archived register forms.
|
||||
* @param {number} data.count - The total count of archived register forms.
|
||||
*/
|
||||
const registerFormArchivedDataHandler = (data) => {
|
||||
setIsLoading(false);
|
||||
if (data) {
|
||||
const { registerForms, count } = data;
|
||||
const { registerForms, count, page_size } = data;
|
||||
|
||||
setTotalArchives(count);
|
||||
if (registerForms) {
|
||||
setFichesInscriptionsDataArchivees(registerForms);
|
||||
setRegistrationFormsDataArchived(registerForms);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
fetchRegisterFormFileTemplate()
|
||||
.then((data)=> {setFichiers(data)})
|
||||
.catch((err)=>{ err = err.message; console.log(err);});
|
||||
}, []);
|
||||
// TODO: revoir le système de pagination et de UseEffect
|
||||
|
||||
useEffect(() => {
|
||||
fetchClasses()
|
||||
.then(data => {
|
||||
setClasses(data);
|
||||
console.log("Success CLASSES : ", data)
|
||||
console.log('Success Classes:', data);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching classes:', error);
|
||||
@ -154,10 +167,13 @@ const registerFormArchivedDataHandler = (data) => {
|
||||
error = error.message;
|
||||
console.log(error);
|
||||
});
|
||||
}, [fichesInscriptionsDataEnCours]);
|
||||
}, [registrationFormsDataPending]);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const fetchDataAndSetState = () => {
|
||||
|
||||
setIsLoading(true);
|
||||
if (!useFakeData) {
|
||||
fetchRegisterForms(PENDING, currentPage, itemsPerPage, searchTerm)
|
||||
.then(registerFormPendingDataHandler)
|
||||
@ -168,30 +184,73 @@ const registerFormArchivedDataHandler = (data) => {
|
||||
fetchRegisterForms(ARCHIVED)
|
||||
.then(registerFormArchivedDataHandler)
|
||||
.catch(requestErrorHandler)
|
||||
fetchRegisterFormFileTemplate()
|
||||
.then((data)=> {setFichiers(data)})
|
||||
.catch((err)=>{ err = err.message; console.log(err);});
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
setFichesInscriptionsDataEnCours(mockFicheInscription);
|
||||
setIsLoading(false);
|
||||
setRegistrationFormsDataPending(mockFicheInscription);
|
||||
}, 1000);
|
||||
}
|
||||
setFicheArchivee(false);
|
||||
setMailSent(false);
|
||||
setIsLoading(false);
|
||||
setReloadFetch(false);
|
||||
};
|
||||
|
||||
|
||||
fetchDataAndSetState();
|
||||
}, [mailSent, ficheArchivee, currentPage, itemsPerPage]);
|
||||
}, [reloadFetch, currentPage]);
|
||||
|
||||
// Modifier le useEffect pour la recherche
|
||||
useEffect(() => {
|
||||
const timeoutId = setTimeout(() => {
|
||||
fetchRegisterForms(PENDING, currentPage, itemsPerPage, searchTerm)
|
||||
.then(registerFormPendingDataHandler)
|
||||
.catch(requestErrorHandler)
|
||||
useEffect(() => {
|
||||
const fetchDataAndSetState = () => {
|
||||
|
||||
setIsLoading(true);
|
||||
if (!useFakeData) {
|
||||
fetchRegisterForms(PENDING, currentPage, itemsPerPage, searchTerm)
|
||||
.then(registerFormPendingDataHandler)
|
||||
.catch(requestErrorHandler)
|
||||
fetchRegisterForms(SUBSCRIBED)
|
||||
.then(registerFormSubscribedDataHandler)
|
||||
.catch(requestErrorHandler)
|
||||
fetchRegisterForms(ARCHIVED)
|
||||
.then(registerFormArchivedDataHandler)
|
||||
.catch(requestErrorHandler)
|
||||
fetchRegisterFormFileTemplate()
|
||||
.then((data)=> {setFichiers(data)})
|
||||
.catch((err)=>{ err = err.message; console.log(err);});
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
setRegistrationFormsDataPending(mockFicheInscription);
|
||||
}, 1000);
|
||||
}
|
||||
setIsLoading(false);
|
||||
setReloadFetch(false);
|
||||
};
|
||||
|
||||
const timeoutId = setTimeout(() => {
|
||||
fetchDataAndSetState();
|
||||
}, 500); // Debounce la recherche
|
||||
|
||||
return () => clearTimeout(timeoutId);
|
||||
}, [searchTerm, currentPage, itemsPerPage]);
|
||||
}, [searchTerm]);
|
||||
|
||||
/**
|
||||
* UseEffect to update page count of tab
|
||||
*/
|
||||
useEffect(()=>{
|
||||
if (activeTab === 'pending') {
|
||||
setTotalPages(Math.ceil(totalPending / itemsPerPage));
|
||||
} else if (activeTab === 'subscribed') {
|
||||
setTotalPages(Math.ceil(totalSubscribed / itemsPerPage));
|
||||
} else if (activeTab === 'archived') {
|
||||
setTotalPages(Math.ceil(totalArchives / itemsPerPage));
|
||||
}
|
||||
},[currentPage]);
|
||||
/**
|
||||
* Archives a registration form after user confirmation.
|
||||
*
|
||||
* @param {number} id - The ID of the registration form to be archived.
|
||||
* @param {string} nom - The last name of the person whose registration form is being archived.
|
||||
* @param {string} prenom - The first name of the person whose registration form is being archived.
|
||||
*/
|
||||
const archiveFicheInscription = (id, nom, prenom) => {
|
||||
setPopup({
|
||||
visible: true,
|
||||
@ -200,8 +259,8 @@ const registerFormArchivedDataHandler = (data) => {
|
||||
archiveRegisterForm(id)
|
||||
.then(data => {
|
||||
console.log('Success:', data);
|
||||
setFicheInscriptions(ficheInscriptions.filter(fiche => fiche.id !== id));
|
||||
setFicheArchivee(true);
|
||||
setRegistrationForms(registrationForms.filter(fiche => fiche.id !== id));
|
||||
setReloadFetch(true);
|
||||
alert("Le dossier d'inscription a été correctement archivé");
|
||||
})
|
||||
.catch(error => {
|
||||
@ -219,7 +278,7 @@ const registerFormArchivedDataHandler = (data) => {
|
||||
onConfirm: () => {
|
||||
sendRegisterForm(id).then(data => {
|
||||
console.log('Success:', data);
|
||||
setMailSent(true);
|
||||
setReloadFetch(true);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching data:', error);
|
||||
@ -227,15 +286,18 @@ const registerFormArchivedDataHandler = (data) => {
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const affectationClassFormSubmitHandler = (formdata)=> {
|
||||
editRegisterForm(student.id,formData, csrfToken)
|
||||
.then(data => {
|
||||
console.log('Success:', data);
|
||||
setReloadFetch(true);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error :', error);
|
||||
});
|
||||
}
|
||||
|
||||
const updateStatusAction = (id, newStatus) => {
|
||||
console.log('Edit fiche inscription with id:', id);
|
||||
};
|
||||
@ -246,11 +308,11 @@ const registerFormArchivedDataHandler = (data) => {
|
||||
|
||||
const handlePageChange = (newPage) => {
|
||||
setCurrentPage(newPage);
|
||||
fetchData(newPage, itemsPerPage); // Appeler fetchData directement ici
|
||||
};
|
||||
|
||||
const createRF = (updatedData) => {
|
||||
console.log("updateDATA",updatedData);
|
||||
console.log('createRF updatedData:', updatedData);
|
||||
|
||||
if (updatedData.selectedGuardians.length !== 0) {
|
||||
const selectedGuardiansIds = updatedData.selectedGuardians.map(guardianId => guardianId)
|
||||
|
||||
@ -263,10 +325,9 @@ const registerFormArchivedDataHandler = (data) => {
|
||||
};
|
||||
|
||||
createRegisterForm(data,csrfToken)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log('Success:', data);
|
||||
setFichesInscriptionsDataEnCours(prevState => {
|
||||
setRegistrationFormsDataPending(prevState => {
|
||||
if (prevState) {
|
||||
return [...prevState, data];
|
||||
}
|
||||
@ -291,7 +352,7 @@ const registerFormArchivedDataHandler = (data) => {
|
||||
is_active: 0, // On rend le profil inactif : impossible de s'y connecter dans la fenêtre du login tant qu'il ne s'est pas inscrit
|
||||
droit:2 // Profil PARENT
|
||||
}
|
||||
createProfile(data,csrfToken)
|
||||
createProfile(data,csrfToken)
|
||||
.then(response => {
|
||||
console.log('Success:', response);
|
||||
if (response.id) {
|
||||
@ -315,7 +376,7 @@ const registerFormArchivedDataHandler = (data) => {
|
||||
createRegisterForm(data,csrfToken)
|
||||
.then(data => {
|
||||
console.log('Success:', data);
|
||||
setFichesInscriptionsDataEnCours(prevState => {
|
||||
setRegistrationFormsDataPending(prevState => {
|
||||
if (prevState && prevState.length > 0) {
|
||||
return [...prevState, data];
|
||||
}
|
||||
@ -338,6 +399,7 @@ const registerFormArchivedDataHandler = (data) => {
|
||||
});
|
||||
}
|
||||
closeModal();
|
||||
setReloadFetch(true);
|
||||
}
|
||||
|
||||
|
||||
@ -349,10 +411,10 @@ const columns = [
|
||||
{ name: t('phone'), transform: (row) => formatPhoneNumber(row.student.guardians[0].phone) },
|
||||
{ name: t('lastUpdateDate'), transform: (row) => row.formatted_last_update},
|
||||
{ name: t('registrationFileStatus'), transform: (row) => (
|
||||
<div className="flex justify-center items-center h-full">
|
||||
<StatusLabel etat={row.status} onChange={(newStatus) => updateStatusAction(row.student.id, newStatus)} showDropdown={false} />
|
||||
</div>
|
||||
)
|
||||
<div className="flex justify-center items-center h-full">
|
||||
<StatusLabel status={row.status} onChange={(newStatus) => updateStatusAction(row.student.id, newStatus)} showDropdown={false} />
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{ name: t('files'), transform: (row) =>
|
||||
(row.registerForms != null) &&(
|
||||
@ -431,7 +493,7 @@ const columnsSubscribed = [
|
||||
{ name: t('registrationFileStatus'), transform: (row) =>
|
||||
(
|
||||
<div className="flex justify-center items-center h-full">
|
||||
<StatusLabel etat={row.status} onChange={(newStatus) => updateStatusAction(row.student.id, newStatus)} showDropdown={false} />
|
||||
<StatusLabel status={row.status} onChange={(newStatus) => updateStatusAction(row.student.id, newStatus)} showDropdown={false} />
|
||||
</div>
|
||||
)
|
||||
},
|
||||
@ -513,10 +575,10 @@ const handleFileUpload = (file, fileName) => {
|
||||
|
||||
const formData = new FormData();
|
||||
if(file){
|
||||
formData.append('fichier', file);
|
||||
formData.append('file', file);
|
||||
}
|
||||
formData.append('nom', fileName);
|
||||
createRegisterFormFileTemplate(formData,csrfToken)
|
||||
formData.append('name', fileName);
|
||||
createRegistrationFormFileTemplate(formData,csrfToken)
|
||||
.then(data => {
|
||||
console.log('Success:', data);
|
||||
setFichiers([...fichiers, data]);
|
||||
@ -530,7 +592,7 @@ const handleFileUpload = (file, fileName) => {
|
||||
if (isLoading) {
|
||||
return <Loader />;
|
||||
} else {
|
||||
if (ficheInscriptions.length === 0 && fichesInscriptionsDataArchivees.length === 0 && alertPage) {
|
||||
if (registrationForms.length === 0 && registrationFormsDataArchived.length === 0 && alertPage) {
|
||||
return (
|
||||
<div className='p-8'>
|
||||
<AlertWithModal
|
||||
@ -616,10 +678,10 @@ const handleFileUpload = (file, fileName) => {
|
||||
key={`${currentPage}-${searchTerm}`}
|
||||
data={
|
||||
activeTab === 'pending'
|
||||
? fichesInscriptionsDataEnCours
|
||||
? registrationFormsDataPending
|
||||
: activeTab === 'subscribed'
|
||||
? fichesInscriptionsDataInscrits
|
||||
: fichesInscriptionsDataArchivees
|
||||
? registrationFormsDataSubscribed
|
||||
: registrationFormsDataArchived
|
||||
}
|
||||
columns={
|
||||
activeTab === 'subscribed'
|
||||
|
||||
Reference in New Issue
Block a user