mirror of
https://git.v0id.ovh/n3wt-innov/n3wt-school.git
synced 2026-01-28 23:43:22 +00:00
feat: Gestion de la validation du dossier d'inscription
This commit is contained in:
@ -14,6 +14,8 @@ const FilesModal = ({
|
||||
selectedRegisterForm,
|
||||
}) => {
|
||||
const [files, setFiles] = useState({
|
||||
registrationFile: null,
|
||||
fusionFile: null,
|
||||
schoolFiles: [],
|
||||
parentFiles: [],
|
||||
sepaFile: null,
|
||||
@ -52,6 +54,18 @@ const FilesModal = ({
|
||||
.then((parentFiles) => {
|
||||
// Construct the categorized files list
|
||||
const categorizedFiles = {
|
||||
registrationFile: selectedRegisterForm.registration_file
|
||||
? {
|
||||
name: 'Fiche élève',
|
||||
url: `${BASE_URL}${selectedRegisterForm.registration_file}`,
|
||||
}
|
||||
: null,
|
||||
fusionFile: selectedRegisterForm.fusion_file
|
||||
? {
|
||||
name: 'Documents fusionnés',
|
||||
url: `${BASE_URL}${selectedRegisterForm.fusion_file}`,
|
||||
}
|
||||
: null,
|
||||
schoolFiles: fetchedSchoolFiles.map((file) => ({
|
||||
name: file.name || 'Document scolaire',
|
||||
url: file.file ? `${BASE_URL}${file.file}` : null,
|
||||
@ -85,6 +99,48 @@ const FilesModal = ({
|
||||
}
|
||||
ContentComponent={() => (
|
||||
<div className="space-y-6">
|
||||
{/* Section Fiche élève */}
|
||||
{files.registrationFile && (
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-4">
|
||||
Fiche élève
|
||||
</h3>
|
||||
<div className="flex items-center gap-2">
|
||||
<FileText className="w-5 h-5 text-gray-500" />
|
||||
<a
|
||||
href={files.registrationFile.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-500 hover:text-blue-700 underline"
|
||||
>
|
||||
{files.registrationFile.name}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Section Documents fusionnés */}
|
||||
{files.fusionFile && (
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-4">
|
||||
Documents fusionnés
|
||||
</h3>
|
||||
<div className="flex items-center gap-2">
|
||||
<FileText className="w-5 h-5 text-gray-500" />
|
||||
<a
|
||||
href={files.fusionFile.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-500 hover:text-blue-700 underline"
|
||||
>
|
||||
{files.fusionFile.name}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<hr className="border-t border-gray-300" />
|
||||
|
||||
{/* Section Fichiers École */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-4">
|
||||
|
||||
@ -1,50 +1,30 @@
|
||||
'use client';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import Button from '@/components/Button';
|
||||
import ToggleSwitch from '@/components/ToggleSwitch'; // Import du composant ToggleSwitch
|
||||
import ToggleSwitch from '@/components/ToggleSwitch';
|
||||
import { BASE_URL } from '@/utils/Url';
|
||||
import { generateToken } from '@/app/actions/registerFileGroupAction';
|
||||
import {
|
||||
fetchSchoolFileTemplatesFromRegistrationFiles,
|
||||
fetchParentFileTemplatesFromRegistrationFiles,
|
||||
} from '@/app/actions/subscriptionAction';
|
||||
import logger from '@/utils/logger';
|
||||
import { GraduationCap } from 'lucide-react';
|
||||
import FileUpload from '@/components/FileUpload';
|
||||
import { School, CheckCircle } from 'lucide-react';
|
||||
import SectionHeader from '@/components/SectionHeader';
|
||||
|
||||
export default function ValidateSubscription({
|
||||
studentId,
|
||||
firstName,
|
||||
lastName,
|
||||
paymentSepa,
|
||||
file,
|
||||
sepa_file,
|
||||
student_file,
|
||||
onAccept,
|
||||
}) {
|
||||
const [token, setToken] = useState(null);
|
||||
const [uploadedFileName, setUploadedFileName] = useState('');
|
||||
const [selectedFile, setSelectedFile] = useState(null); // Nouvel état pour le fichier sélectionné
|
||||
const [pdfUrl, setPdfUrl] = useState(`${BASE_URL}/${file}`);
|
||||
const [isSepa, setIsSepa] = useState(paymentSepa); // Vérifie si le mode de paiement est SEPA
|
||||
const [currentPage, setCurrentPage] = useState(1); // Gestion des étapes
|
||||
const [schoolFileTemplates, setSchoolFileTemplates] = useState([]); // Stocke les fichiers schoolFileTemplates
|
||||
const [parentFileTemplates, setParentFileTemplates] = useState([]); // Stocke les fichiers parentFileTemplates
|
||||
const [mergeDocuments, setMergeDocuments] = useState(false); // État pour activer/désactiver la fusion des documents
|
||||
const [schoolFileTemplates, setSchoolFileTemplates] = useState([]);
|
||||
const [parentFileTemplates, setParentFileTemplates] = useState([]);
|
||||
const [currentTemplateIndex, setCurrentTemplateIndex] = useState(0);
|
||||
const [mergeDocuments, setMergeDocuments] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (isSepa) {
|
||||
generateToken('n3wt.school@gmail.com')
|
||||
.then((data) => {
|
||||
setToken(data.token);
|
||||
})
|
||||
.catch((error) =>
|
||||
logger.error('Erreur lors de la génération du token:', error)
|
||||
);
|
||||
}
|
||||
}, [isSepa]);
|
||||
|
||||
useEffect(() => {
|
||||
// Récupérer les fichiers schoolFileTemplates pour l'étudiant
|
||||
// Récupérer les fichiers schoolFileTemplates
|
||||
fetchSchoolFileTemplatesFromRegistrationFiles(studentId)
|
||||
.then((data) => {
|
||||
setSchoolFileTemplates(data);
|
||||
@ -57,7 +37,7 @@ export default function ValidateSubscription({
|
||||
)
|
||||
);
|
||||
|
||||
// Récupérer les fichiers parentFileTemplates pour l'étudiant
|
||||
// Récupérer les fichiers parentFileTemplates
|
||||
fetchParentFileTemplatesFromRegistrationFiles(studentId)
|
||||
.then((data) => {
|
||||
setParentFileTemplates(data);
|
||||
@ -72,21 +52,13 @@ export default function ValidateSubscription({
|
||||
}, [studentId]);
|
||||
|
||||
const handleAccept = () => {
|
||||
if (!selectedFile && isSepa) {
|
||||
logger.error('Aucun fichier sélectionné pour le champ SEPA.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Ajouter le paramètre fusion dans l'URL
|
||||
const fusionParam = mergeDocuments ? 'true' : 'false';
|
||||
|
||||
const data = {
|
||||
status: 7,
|
||||
sepa_file: selectedFile, // Utilise le fichier sélectionné depuis l'état
|
||||
status: 5,
|
||||
fusionParam: fusionParam,
|
||||
};
|
||||
|
||||
// Appeler la fonction passée par le parent pour mettre à jour le RF
|
||||
onAccept(data);
|
||||
};
|
||||
|
||||
@ -95,150 +67,114 @@ export default function ValidateSubscription({
|
||||
setMergeDocuments((prevState) => !prevState);
|
||||
};
|
||||
|
||||
const isValidateButtonDisabled = isSepa && !uploadedFileName;
|
||||
|
||||
const goToNextPage = () => {
|
||||
const totalPages =
|
||||
1 +
|
||||
schoolFileTemplates.length +
|
||||
parentFileTemplates.length +
|
||||
(isSepa ? 1 : 0);
|
||||
if (currentPage < totalPages) {
|
||||
setCurrentPage(currentPage + 1);
|
||||
}
|
||||
};
|
||||
|
||||
const goToPreviousPage = () => {
|
||||
if (currentPage > 1) {
|
||||
setCurrentPage(currentPage - 1);
|
||||
}
|
||||
};
|
||||
|
||||
const totalPages =
|
||||
1 +
|
||||
schoolFileTemplates.length +
|
||||
parentFileTemplates.length +
|
||||
(isSepa ? 1 : 0);
|
||||
|
||||
const renderContent = () => {
|
||||
if (currentPage === 1) {
|
||||
// Page 1 : Afficher le PDF principal
|
||||
return (
|
||||
<iframe
|
||||
src={pdfUrl}
|
||||
title="Aperçu du PDF"
|
||||
className="w-full h-[900px] border rounded-lg"
|
||||
style={{
|
||||
transform: 'scale(0.95)', // Dézoom léger pour une meilleure vue
|
||||
transformOrigin: 'top center',
|
||||
border: 'none',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
} else if (
|
||||
currentPage > 1 &&
|
||||
currentPage <= 1 + schoolFileTemplates.length
|
||||
) {
|
||||
// Pages des schoolFileTemplates
|
||||
const index = currentPage - 2; // Décalage pour correspondre à l'index du tableau
|
||||
return (
|
||||
<iframe
|
||||
src={`${BASE_URL}/${schoolFileTemplates[index]?.file}`}
|
||||
title={`Document ${index + 1}`}
|
||||
className="w-full h-[900px] border rounded-lg"
|
||||
style={{
|
||||
transform: 'scale(0.95)', // Dézoom léger pour une meilleure vue
|
||||
transformOrigin: 'top center',
|
||||
border: 'none',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
} else if (
|
||||
currentPage > 1 + schoolFileTemplates.length &&
|
||||
currentPage <= 1 + schoolFileTemplates.length + parentFileTemplates.length
|
||||
) {
|
||||
// Pages des parentFileTemplates
|
||||
const index = currentPage - 2 - schoolFileTemplates.length; // Décalage pour correspondre à l'index du tableau
|
||||
return (
|
||||
<iframe
|
||||
src={`${BASE_URL}/${parentFileTemplates[index]?.file}`}
|
||||
title={`Document Parent ${index + 1}`}
|
||||
className="w-full h-[900px] border rounded-lg"
|
||||
style={{
|
||||
transform: 'scale(0.95)', // Dézoom léger pour une meilleure vue
|
||||
transformOrigin: 'top center',
|
||||
border: 'none',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
} else if (currentPage === totalPages && isSepa) {
|
||||
// Dernière page : Mandat SEPA
|
||||
return (
|
||||
<FileUpload
|
||||
selectionMessage="Sélectionnez un mandat de prélèvement SEPA"
|
||||
onFileSelect={(file) => {
|
||||
setUploadedFileName(file.name); // Stocke uniquement le nom du fichier
|
||||
setSelectedFile(file); // Stocke le fichier dans l'état
|
||||
logger.debug('Fichier sélectionné:', file.name);
|
||||
}}
|
||||
uploadedFileName={uploadedFileName}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
const allTemplates = [
|
||||
{ name: 'Fiche élève', file: student_file, type: 'main' },
|
||||
...schoolFileTemplates.map((template) => ({
|
||||
name: template.name || 'Document scolaire',
|
||||
file: template.file,
|
||||
description: template.description,
|
||||
})),
|
||||
...parentFileTemplates.map((template) => ({
|
||||
name: template.master_name || 'Document parent',
|
||||
file: template.file,
|
||||
description: template.description,
|
||||
})),
|
||||
...(sepa_file
|
||||
? [
|
||||
{
|
||||
name: 'Mandat SEPA',
|
||||
file: sepa_file,
|
||||
description: 'Mandat SEPA pour prélèvement automatique',
|
||||
},
|
||||
]
|
||||
: []),
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-6 p-6">
|
||||
<div className="mb-4 w-full mx-auto">
|
||||
{/* En-tête de la section */}
|
||||
<SectionHeader
|
||||
icon={GraduationCap}
|
||||
title={`Dossier scolaire de ${firstName} ${lastName}`}
|
||||
icon={School}
|
||||
title={`Validation du dossier de ${firstName} ${lastName}`}
|
||||
description={`Année scolaire ${new Date().getFullYear()}-${new Date().getFullYear() + 1}`}
|
||||
/>
|
||||
|
||||
{/* Contenu principal */}
|
||||
<div className="p-6 items-center">{renderContent()}</div>
|
||||
<div className="flex gap-8">
|
||||
{/* Liste des documents */}
|
||||
<div className="w-1/4 bg-gray-50 p-4 rounded-lg shadow-sm border border-gray-200">
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-4">
|
||||
Liste des documents
|
||||
</h3>
|
||||
<ul className="space-y-2">
|
||||
{allTemplates.map((template, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className={`flex items-center cursor-pointer ${
|
||||
index === currentTemplateIndex
|
||||
? 'text-blue-600 font-bold'
|
||||
: template.file !== null
|
||||
? 'text-green-600'
|
||||
: 'text-gray-600'
|
||||
}`}
|
||||
onClick={() => setCurrentTemplateIndex(index)} // Mettre à jour l'index du template actuel
|
||||
>
|
||||
<span className="mr-2">
|
||||
{template.file !== null ? (
|
||||
<CheckCircle className="w-5 h-5 text-green-600" />
|
||||
) : (
|
||||
<Hourglass className="w-5 h-5 text-gray-600" />
|
||||
)}
|
||||
</span>
|
||||
{template.name}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{/* Option de fusion des documents (affichée uniquement sur la dernière page) */}
|
||||
{currentPage === totalPages && (
|
||||
<div className="flex items-center justify-between mt-6">
|
||||
<span className="text-gray-700">
|
||||
Fusionner les documents en un seul fichier PDF
|
||||
</span>
|
||||
<ToggleSwitch
|
||||
label="Fusionner"
|
||||
checked={mergeDocuments}
|
||||
onChange={handleToggleMergeDocuments} // Appeler la fonction pour inverser l'état
|
||||
/>
|
||||
{/* ToggleSwitch et bouton de validation */}
|
||||
<div className="mt-6 flex items-center justify-between">
|
||||
<ToggleSwitch
|
||||
label="Fusionner"
|
||||
checked={mergeDocuments}
|
||||
onChange={handleToggleMergeDocuments}
|
||||
/>
|
||||
<button
|
||||
onClick={handleAccept}
|
||||
className="px-4 py-2 bg-emerald-500 text-white rounded-md shadow-sm hover:bg-emerald-600 transition-colors"
|
||||
>
|
||||
Valider
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Boutons de navigation */}
|
||||
<div className="flex justify-end items-center mt-6 space-x-4">
|
||||
{currentPage > 1 && (
|
||||
<Button
|
||||
text="Précédent"
|
||||
onClick={goToPreviousPage}
|
||||
className="bg-gray-300 text-gray-700 hover:bg-gray-400 px-6 py-2"
|
||||
/>
|
||||
)}
|
||||
{currentPage < totalPages && (
|
||||
<Button
|
||||
text="Suivant"
|
||||
onClick={goToNextPage}
|
||||
primary
|
||||
className="bg-emerald-500 text-white hover:bg-emerald-600 px-6 py-2"
|
||||
/>
|
||||
)}
|
||||
{currentPage === totalPages && (
|
||||
<Button
|
||||
text="Valider"
|
||||
onClick={handleAccept}
|
||||
primary
|
||||
className={`px-6 py-2 ${isValidateButtonDisabled ? 'bg-gray-300 text-gray-700 cursor-not-allowed' : 'bg-emerald-600 text-white hover:bg-emerald-700'}`}
|
||||
disabled={isValidateButtonDisabled}
|
||||
/>
|
||||
)}
|
||||
{/* Affichage du fichier actuel */}
|
||||
<div className="w-3/4">
|
||||
{currentTemplateIndex < allTemplates.length && (
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-4">
|
||||
{allTemplates[currentTemplateIndex].name || 'Document sans nom'}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500 mb-4">
|
||||
{allTemplates[currentTemplateIndex].description ||
|
||||
'Aucune description disponible pour ce document.'}
|
||||
</p>
|
||||
|
||||
<iframe
|
||||
src={`${BASE_URL}/${allTemplates[currentTemplateIndex].file}`}
|
||||
title={
|
||||
allTemplates[currentTemplateIndex].type === 'main'
|
||||
? 'Document Principal'
|
||||
: 'Document Viewer'
|
||||
}
|
||||
className="w-full"
|
||||
style={{
|
||||
height: '75vh',
|
||||
border: 'none',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user