feat: Gestion de la validation du dossier d'inscription

This commit is contained in:
N3WT DE COMPET
2025-04-27 16:34:41 +02:00
parent ada2a44c3e
commit b23264c0d4
8 changed files with 236 additions and 220 deletions

View File

@ -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">

View File

@ -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>
);