mirror of
https://git.v0id.ovh/n3wt-innov/n3wt-school.git
synced 2026-04-05 12:41:27 +00:00
467 lines
18 KiB
JavaScript
467 lines
18 KiB
JavaScript
'use client';
|
|
import React, { useState, useEffect } from 'react';
|
|
import Popup from '@/components/Popup';
|
|
import ToggleSwitch from '@/components/Form/ToggleSwitch';
|
|
import SelectChoice from '@/components/Form/SelectChoice';
|
|
import {
|
|
fetchSchoolFileTemplatesFromRegistrationFiles,
|
|
fetchParentFileTemplatesFromRegistrationFiles,
|
|
} from '@/app/actions/subscriptionAction';
|
|
import { getSecureFileUrl } from '@/utils/fileUrl';
|
|
import logger from '@/utils/logger';
|
|
import { School, FileText } from 'lucide-react';
|
|
import SectionHeader from '@/components/SectionHeader';
|
|
import Button from '@/components/Form/Button';
|
|
|
|
export default function ValidateSubscription({
|
|
studentId,
|
|
firstName,
|
|
email,
|
|
lastName,
|
|
sepa_file,
|
|
student_file,
|
|
onAccept,
|
|
onRefuse,
|
|
classes,
|
|
handleValidateOrRefuseDoc,
|
|
csrfToken,
|
|
}) {
|
|
const [schoolFileTemplates, setSchoolFileTemplates] = useState([]);
|
|
const [parentFileTemplates, setParentFileTemplates] = useState([]);
|
|
const [currentTemplateIndex, setCurrentTemplateIndex] = useState(0);
|
|
const [mergeDocuments, setMergeDocuments] = useState(false);
|
|
const [isPageValid, setIsPageValid] = useState(false);
|
|
// Pour la validation/refus des documents
|
|
const [docStatuses, setDocStatuses] = useState({}); // {index: 'accepted'|'refused'}
|
|
|
|
// Met à jour docStatuses selon isValidated des templates récupérés
|
|
useEffect(() => {
|
|
// On construit la map index -> status à partir des templates
|
|
const newStatuses = {};
|
|
// Fiche élève (pas de validation individuelle)
|
|
newStatuses[0] = undefined;
|
|
// School templates
|
|
schoolFileTemplates.forEach((tpl, i) => {
|
|
if (typeof tpl.isValidated === 'boolean') {
|
|
newStatuses[1 + i] = tpl.isValidated ? 'accepted' : 'refused';
|
|
}
|
|
});
|
|
// Parent templates
|
|
parentFileTemplates.forEach((tpl, i) => {
|
|
if (typeof tpl.isValidated === 'boolean') {
|
|
newStatuses[1 + schoolFileTemplates.length + i] = tpl.isValidated
|
|
? 'accepted'
|
|
: 'refused';
|
|
}
|
|
});
|
|
setDocStatuses((s) => ({ ...s, ...newStatuses }));
|
|
}, [schoolFileTemplates, parentFileTemplates]);
|
|
const [showRefusedPopup, setShowRefusedPopup] = useState(false);
|
|
|
|
// Affiche la popup de confirmation finale (tous docs validés et classe sélectionnée)
|
|
const [showFinalValidationPopup, setShowFinalValidationPopup] =
|
|
useState(false);
|
|
|
|
const [formData, setFormData] = useState({
|
|
associated_class: null,
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (classes.length > 0) {
|
|
// Si l'étudiant a déjà une classe associée, initialisez formData avec cette classe
|
|
const initialClass = classes.find(
|
|
(classe) => classe.id === formData.associated_class
|
|
);
|
|
setFormData({
|
|
associated_class: initialClass ? initialClass.id : null,
|
|
});
|
|
}
|
|
}, [classes]);
|
|
|
|
// Mettre à jour isPageValid en fonction de la sélection de la classe
|
|
useEffect(() => {
|
|
setIsPageValid(!!formData.associated_class); // true si une classe est sélectionnée, sinon false
|
|
}, [formData.associated_class]);
|
|
|
|
useEffect(() => {
|
|
// Récupérer les fichiers schoolFileTemplates
|
|
fetchSchoolFileTemplatesFromRegistrationFiles(studentId)
|
|
.then((data) => {
|
|
setSchoolFileTemplates(data);
|
|
logger.debug('Fichiers schoolFileTemplates récupérés:', data);
|
|
})
|
|
.catch((error) =>
|
|
logger.error(
|
|
'Erreur lors de la récupération des schoolFileTemplates:',
|
|
error
|
|
)
|
|
);
|
|
|
|
// Récupérer les fichiers parentFileTemplates
|
|
fetchParentFileTemplatesFromRegistrationFiles(studentId)
|
|
.then((data) => {
|
|
setParentFileTemplates(data);
|
|
logger.debug('Fichiers parentFileTemplates récupérés:', data);
|
|
})
|
|
.catch((error) =>
|
|
logger.error(
|
|
'Erreur lors de la récupération des parentFileTemplates:',
|
|
error
|
|
)
|
|
);
|
|
}, [studentId]);
|
|
|
|
const handleToggleMergeDocuments = () => {
|
|
setMergeDocuments((prevState) => !prevState);
|
|
};
|
|
|
|
const handleAssignClass = () => {
|
|
if (formData.associated_class) {
|
|
const data = {
|
|
student: {
|
|
associated_class: formData.associated_class,
|
|
},
|
|
status: 5,
|
|
fusionParam: mergeDocuments,
|
|
notes: 'Dossier validé',
|
|
};
|
|
onAccept(data);
|
|
} else {
|
|
logger.warn('Aucune classe sélectionnée.');
|
|
}
|
|
};
|
|
|
|
const handleRefuseDossier = () => {
|
|
// Message clair avec la liste des documents refusés
|
|
let notes = 'Dossier non validé pour les raisons suivantes :\n';
|
|
notes += refusedDocs.map((doc) => `- ${doc.name}`).join('\n');
|
|
const data = {
|
|
status: 2,
|
|
notes,
|
|
};
|
|
if (onRefuse) {
|
|
onRefuse(data);
|
|
}
|
|
};
|
|
|
|
const onChange = (field, value) => {
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
[field]: value,
|
|
}));
|
|
};
|
|
|
|
const allTemplates = [
|
|
{
|
|
name: 'Fiche élève',
|
|
file: `/api/generate-pdf?studentId=${studentId}`,
|
|
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',
|
|
},
|
|
]
|
|
: []),
|
|
];
|
|
|
|
// Récupère la liste des documents refusés (inclut la fiche élève si refusée)
|
|
const refusedDocs = allTemplates
|
|
.map((doc, idx) => ({ ...doc, idx }))
|
|
.filter((doc, idx) => docStatuses[idx] === 'refused');
|
|
|
|
// Récupère la liste des documents à cocher (hors fiche élève)
|
|
const docIndexes = allTemplates
|
|
.map((_, idx) => idx)
|
|
.filter((idx) => idx !== 0);
|
|
const allChecked =
|
|
docIndexes.length > 0 &&
|
|
docIndexes.every(
|
|
(idx) => docStatuses[idx] === 'accepted' || docStatuses[idx] === 'refused'
|
|
);
|
|
const allValidated =
|
|
docIndexes.length > 0 &&
|
|
docIndexes.every((idx) => docStatuses[idx] === 'accepted');
|
|
const hasRefused = docIndexes.some((idx) => docStatuses[idx] === 'refused');
|
|
logger.debug(allTemplates);
|
|
|
|
return (
|
|
<div className="mb-4 w-full mx-auto">
|
|
{/* En-tête de la section */}
|
|
<SectionHeader
|
|
icon={School}
|
|
title={`Validation du dossier de ${firstName} ${lastName}`}
|
|
description={`Année scolaire ${new Date().getFullYear()}-${new Date().getFullYear() + 1}`}
|
|
/>
|
|
|
|
{/* Contenu principal */}
|
|
<div className="flex gap-8">
|
|
{/* Colonne gauche : 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="font-headline text-lg font-semibold text-gray-800 mb-4">
|
|
{allTemplates[currentTemplateIndex].name || 'Document sans nom'}
|
|
</h3>
|
|
<iframe
|
|
src={
|
|
allTemplates[currentTemplateIndex].type === 'main'
|
|
? allTemplates[currentTemplateIndex].file
|
|
: getSecureFileUrl(allTemplates[currentTemplateIndex].file)
|
|
}
|
|
title={
|
|
allTemplates[currentTemplateIndex].type === 'main'
|
|
? 'Document Principal'
|
|
: 'Document Viewer'
|
|
}
|
|
className="w-full"
|
|
style={{
|
|
height: '75vh',
|
|
border: 'none',
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Colonne droite : Liste des documents, Option de fusion, Affectation, Refus */}
|
|
<div className="w-1/4 flex flex-col flex-1 gap-4 h-full">
|
|
{/* Liste des documents */}
|
|
<div className="flex-1 bg-gray-50 p-4 rounded-lg shadow-sm border border-gray-200 overflow-y-auto">
|
|
<h3 className="font-headline 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)}
|
|
>
|
|
<span className="mr-2">
|
|
{template.file !== null && (
|
|
<FileText className="w-5 h-5 text-green-600" />
|
|
)}
|
|
</span>
|
|
<span className="flex-1">{template.name}</span>
|
|
{/* 2 boutons : Validé / Refusé (sauf fiche élève) */}
|
|
{index !== 0 && (
|
|
<span className="ml-2 flex gap-1">
|
|
<button
|
|
type="button"
|
|
className={`px-2 py-1 rounded-full text-xs font-medium border transition-colors focus:outline-none focus:ring-2 focus:ring-blue-400 flex items-center gap-1
|
|
${docStatuses[index] === 'accepted' ? 'bg-primary text-white border-primary' : 'bg-white text-primary border-primary/30'}`}
|
|
aria-pressed={docStatuses[index] === 'accepted'}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setDocStatuses((s) => ({
|
|
...s,
|
|
[index]: 'accepted',
|
|
}));
|
|
// Appel API pour valider le document
|
|
if (handleValidateOrRefuseDoc) {
|
|
let template = null;
|
|
let type = null;
|
|
if (
|
|
index > 0 &&
|
|
index <= schoolFileTemplates.length
|
|
) {
|
|
template = schoolFileTemplates[index - 1];
|
|
type = 'school';
|
|
} else if (
|
|
index > schoolFileTemplates.length &&
|
|
index <=
|
|
schoolFileTemplates.length +
|
|
parentFileTemplates.length
|
|
) {
|
|
template =
|
|
parentFileTemplates[
|
|
index - 1 - schoolFileTemplates.length
|
|
];
|
|
type = 'parent';
|
|
}
|
|
if (template && template.id) {
|
|
handleValidateOrRefuseDoc({
|
|
templateId: template.id,
|
|
type,
|
|
validated: true,
|
|
csrfToken,
|
|
});
|
|
}
|
|
}
|
|
}}
|
|
>
|
|
<span className="text-lg">✓</span> Validé
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={`px-2 py-1 rounded-full text-xs font-medium border transition-colors focus:outline-none focus:ring-2 focus:ring-blue-400 flex items-center gap-1
|
|
${docStatuses[index] === 'refused' ? 'bg-red-500 text-white border-red-500' : 'bg-white text-red-600 border-red-300'}`}
|
|
aria-pressed={docStatuses[index] === 'refused'}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setDocStatuses((s) => ({ ...s, [index]: 'refused' }));
|
|
// Appel API pour refuser le document
|
|
if (handleValidateOrRefuseDoc) {
|
|
let template = null;
|
|
let type = null;
|
|
if (
|
|
index > 0 &&
|
|
index <= schoolFileTemplates.length
|
|
) {
|
|
template = schoolFileTemplates[index - 1];
|
|
type = 'school';
|
|
} else if (
|
|
index > schoolFileTemplates.length &&
|
|
index <=
|
|
schoolFileTemplates.length +
|
|
parentFileTemplates.length
|
|
) {
|
|
template =
|
|
parentFileTemplates[
|
|
index - 1 - schoolFileTemplates.length
|
|
];
|
|
type = 'parent';
|
|
}
|
|
if (template && template.id) {
|
|
handleValidateOrRefuseDoc({
|
|
templateId: template.id,
|
|
type,
|
|
validated: false,
|
|
csrfToken,
|
|
});
|
|
}
|
|
}
|
|
}}
|
|
>
|
|
<span className="text-lg">✗</span> Refusé
|
|
</button>
|
|
</span>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Nouvelle section Options de validation : carte unique, sélecteur de classe (ligne 1), toggle fusion (ligne 2 aligné à droite) */}
|
|
{allChecked && allValidated && (
|
|
<div className="bg-white p-4 rounded-lg shadow-sm border border-gray-200 flex flex-col gap-4">
|
|
<div>
|
|
<SelectChoice
|
|
name="associated_class"
|
|
label="Liste des classes"
|
|
placeHolder="Sélectionner une classe"
|
|
selected={formData.associated_class || ''}
|
|
callback={(e) => onChange('associated_class', e.target.value)}
|
|
choices={classes.map((classe) => ({
|
|
value: classe.id,
|
|
label: classe.atmosphere_name,
|
|
}))}
|
|
required
|
|
className="w-full"
|
|
/>
|
|
</div>
|
|
<div className="flex justify-end items-center mt-2">
|
|
<ToggleSwitch
|
|
label="Fusionner les documents"
|
|
checked={mergeDocuments}
|
|
onChange={handleToggleMergeDocuments}
|
|
className="ml-0"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Boutons Valider/Refuser en bas, centrés */}
|
|
<div className="mt-auto py-4">
|
|
<Button
|
|
text="Soumettre"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
// 1. Si tous les documents ne sont pas cochés, rien ne se passe (bouton désactivé)
|
|
// 2. Si tous cochés et au moins un refusé : popup refus
|
|
if (allChecked && hasRefused) {
|
|
setShowRefusedPopup(true);
|
|
return;
|
|
}
|
|
// 3. Si tous cochés et tous validés mais pas de classe sélectionnée : bouton désactivé
|
|
// 4. Si tous cochés, tous validés et classe sélectionnée : popup de validation finale
|
|
if (allChecked && allValidated && formData.associated_class) {
|
|
setShowFinalValidationPopup(true);
|
|
}
|
|
}}
|
|
primary
|
|
className={`w-full h-12 rounded-md shadow-sm focus:outline-none ${
|
|
!allChecked ||
|
|
(allChecked && allValidated && !formData.associated_class)
|
|
? 'bg-gray-300 text-gray-700 cursor-not-allowed'
|
|
: 'bg-primary text-white hover:bg-primary'
|
|
}`}
|
|
disabled={
|
|
!allChecked ||
|
|
(allChecked && allValidated && !formData.associated_class)
|
|
}
|
|
/>
|
|
</div>
|
|
|
|
{/* Popup de confirmation si refus */}
|
|
<Popup
|
|
isOpen={showRefusedPopup}
|
|
onCancel={() => setShowRefusedPopup(false)}
|
|
onConfirm={() => {
|
|
setShowRefusedPopup(false);
|
|
handleRefuseDossier();
|
|
}}
|
|
message={
|
|
<span>
|
|
{`Le dossier d'inscription de ${firstName} ${lastName} va être refusé. Un email sera envoyé au responsable à l'adresse : `}
|
|
<span className="font-semibold text-blue-700">{email}</span>
|
|
{' avec la liste des documents non validés :'}
|
|
<ul className="list-disc ml-6 mt-2">
|
|
{refusedDocs.map((doc) => (
|
|
<li key={doc.idx}>{doc.name}</li>
|
|
))}
|
|
</ul>
|
|
</span>
|
|
}
|
|
/>
|
|
|
|
{/* Popup de confirmation finale si tous validés et classe sélectionnée */}
|
|
<Popup
|
|
isOpen={showFinalValidationPopup}
|
|
onCancel={() => setShowFinalValidationPopup(false)}
|
|
onConfirm={() => {
|
|
setShowFinalValidationPopup(false);
|
|
handleAssignClass();
|
|
}}
|
|
message={
|
|
<span>
|
|
{`Le dossier d'inscription de ${lastName} ${firstName} va être validé et l'élève affecté à la classe sélectionnée.`}
|
|
</span>
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|