mirror of
https://git.v0id.ovh/n3wt-innov/n3wt-school.git
synced 2026-04-03 16:51:26 +00:00
feat: WIP finalisation partie signature des parents [N3WTS-17]
This commit is contained in:
N3WT DE COMPET
@ -1,8 +1,10 @@
|
||||
'use client';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import FormRenderer from '@/components/Form/FormRenderer';
|
||||
import { CheckCircle, Hourglass, FileText } from 'lucide-react';
|
||||
import FileUpload from '@/components/Form/FileUpload';
|
||||
import { CheckCircle, Hourglass, FileText, Download, Upload } from 'lucide-react';
|
||||
import logger from '@/utils/logger';
|
||||
import { BASE_URL } from '@/utils/Url';
|
||||
|
||||
/**
|
||||
* Composant pour afficher et gérer les formulaires dynamiques d'inscription
|
||||
@ -10,6 +12,7 @@ import logger from '@/utils/logger';
|
||||
* @param {Object} existingResponses - Réponses déjà sauvegardées
|
||||
* @param {Function} onFormSubmit - Callback appelé quand un formulaire est soumis
|
||||
* @param {Boolean} enable - Si les formulaires sont modifiables
|
||||
* @param {Function} onFileUpload - Callback appelé quand un fichier est sélectionné
|
||||
*/
|
||||
export default function DynamicFormsList({
|
||||
schoolFileMasters,
|
||||
@ -17,10 +20,12 @@ export default function DynamicFormsList({
|
||||
onFormSubmit,
|
||||
enable = true,
|
||||
onValidationChange,
|
||||
onFileUpload, // nouvelle prop pour gérer l'upload (à passer depuis le parent)
|
||||
}) {
|
||||
const [currentTemplateIndex, setCurrentTemplateIndex] = useState(0);
|
||||
const [formsData, setFormsData] = useState({});
|
||||
const [formsValidation, setFormsValidation] = useState({});
|
||||
const fileInputRefs = React.useRef({});
|
||||
|
||||
// Initialiser les données avec les réponses existantes
|
||||
useEffect(() => {
|
||||
@ -138,6 +143,27 @@ export default function DynamicFormsList({
|
||||
return schoolFileMasters[currentTemplateIndex];
|
||||
};
|
||||
|
||||
// Handler d'upload pour formulaire existant
|
||||
const handleUpload = async (file, selectedFile) => {
|
||||
if (!file || !selectedFile) return;
|
||||
try {
|
||||
if (onFileUpload) {
|
||||
await onFileUpload(file, selectedFile);
|
||||
setFormsValidation((prev) => ({
|
||||
...prev,
|
||||
[selectedFile.id]: true,
|
||||
}));
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('Erreur lors de l\'upload du fichier :', error);
|
||||
}
|
||||
};
|
||||
|
||||
const isDynamicForm = (template) =>
|
||||
template.formTemplateData &&
|
||||
Array.isArray(template.formTemplateData.fields) &&
|
||||
template.formTemplateData.fields.length > 0;
|
||||
|
||||
if (!schoolFileMasters || schoolFileMasters.length === 0) {
|
||||
return (
|
||||
<div className="text-center py-8">
|
||||
@ -223,13 +249,13 @@ export default function DynamicFormsList({
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
|
||||
<div className="mb-6">
|
||||
<h3 className="text-xl font-semibold text-gray-800 mb-2">
|
||||
{currentTemplate.formMasterData?.title ||
|
||||
{currentTemplate.formTemplateData?.title ||
|
||||
currentTemplate.title ||
|
||||
currentTemplate.name ||
|
||||
'Formulaire sans nom'}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600">
|
||||
{currentTemplate.formMasterData?.description ||
|
||||
{currentTemplate.formTemplateData?.description ||
|
||||
currentTemplate.description ||
|
||||
'Veuillez compléter ce formulaire pour continuer votre inscription.'}
|
||||
</p>
|
||||
@ -239,39 +265,57 @@ export default function DynamicFormsList({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Vérifier si le formulaire maître a des données de configuration */}
|
||||
{(currentTemplate.formMasterData?.fields &&
|
||||
currentTemplate.formMasterData.fields.length > 0) ||
|
||||
(currentTemplate.fields && currentTemplate.fields.length > 0) ? (
|
||||
{/* Affichage dynamique ou existant */}
|
||||
{isDynamicForm(currentTemplate) ? (
|
||||
<FormRenderer
|
||||
key={currentTemplate.id}
|
||||
formConfig={{
|
||||
id: currentTemplate.id,
|
||||
title:
|
||||
currentTemplate.formMasterData?.title ||
|
||||
currentTemplate.formTemplateData?.title ||
|
||||
currentTemplate.title ||
|
||||
currentTemplate.name ||
|
||||
'Formulaire',
|
||||
fields:
|
||||
currentTemplate.formMasterData?.fields ||
|
||||
currentTemplate.formTemplateData?.fields ||
|
||||
currentTemplate.fields ||
|
||||
[],
|
||||
submitLabel:
|
||||
currentTemplate.formMasterData?.submitLabel || 'Valider',
|
||||
currentTemplate.formTemplateData?.submitLabel || 'Valider',
|
||||
}}
|
||||
onFormSubmit={(formData) =>
|
||||
handleFormSubmit(formData, currentTemplate.id)
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<div className="text-center py-8">
|
||||
<FileText className="w-16 h-16 text-gray-300 mx-auto mb-4" />
|
||||
<p className="text-gray-600">
|
||||
Ce formulaire n'est pas encore configuré.
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 mt-2">
|
||||
Contactez l'administration pour plus d'informations.
|
||||
</p>
|
||||
// Formulaire existant (PDF, image, etc.)
|
||||
<div className="flex flex-col items-center gap-6">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<FileText className="w-16 h-16 text-gray-400" />
|
||||
<div className="text-lg font-semibold text-gray-700">
|
||||
{currentTemplate.name}
|
||||
</div>
|
||||
{currentTemplate.file && (
|
||||
<a
|
||||
href={`${BASE_URL}${currentTemplate.file}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition"
|
||||
download
|
||||
>
|
||||
<Download className="w-5 h-5" />
|
||||
Télécharger le document
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
{enable && (
|
||||
<FileUpload
|
||||
selectionMessage="Sélectionnez le fichier du document"
|
||||
onFileSelect={(file) => handleUpload(file, currentTemplate)}
|
||||
required
|
||||
enable
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -5,15 +5,12 @@ import DjangoCSRFToken from '@/components/DjangoCSRFToken';
|
||||
import {
|
||||
fetchSchoolFileTemplatesFromRegistrationFiles,
|
||||
fetchParentFileTemplatesFromRegistrationFiles,
|
||||
fetchRegistrationSchoolFileMasters,
|
||||
saveFormResponses,
|
||||
fetchFormResponses,
|
||||
autoSaveRegisterForm,
|
||||
} from '@/app/actions/subscriptionAction';
|
||||
import {
|
||||
downloadTemplate,
|
||||
editRegistrationSchoolFileTemplates,
|
||||
editRegistrationParentFileTemplates,
|
||||
} from '@/app/actions/registerFileGroupAction';
|
||||
import {
|
||||
fetchRegistrationPaymentModes,
|
||||
@ -22,7 +19,7 @@ import {
|
||||
fetchTuitionPaymentPlans,
|
||||
} from '@/app/actions/schoolAction';
|
||||
import { fetchProfiles } from '@/app/actions/authAction';
|
||||
import { BASE_URL, FE_PARENTS_HOME_URL } from '@/utils/Url';
|
||||
import { FE_PARENTS_HOME_URL } from '@/utils/Url';
|
||||
import logger from '@/utils/logger';
|
||||
import FilesToUpload from '@/components/Inscription/FilesToUpload';
|
||||
import DynamicFormsList from '@/components/Inscription/DynamicFormsList';
|
||||
@ -32,7 +29,6 @@ import ResponsableInputFields from '@/components/Inscription/ResponsableInputFie
|
||||
import SiblingInputFields from '@/components/Inscription/SiblingInputFields';
|
||||
import PaymentMethodSelector from '@/components/Inscription/PaymentMethodSelector';
|
||||
import ProgressStep from '@/components/ProgressStep';
|
||||
import { CheckCircle, Hourglass } from 'lucide-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
/**
|
||||
@ -47,7 +43,6 @@ export default function InscriptionFormShared({
|
||||
studentId,
|
||||
csrfToken,
|
||||
selectedEstablishmentId,
|
||||
apiDocuseal,
|
||||
onSubmit,
|
||||
errors = {}, // Nouvelle prop pour les erreurs
|
||||
enable = true,
|
||||
@ -82,7 +77,7 @@ export default function InscriptionFormShared({
|
||||
const [parentFileTemplates, setParentFileTemplates] = useState([]);
|
||||
const [schoolFileMasters, setSchoolFileMasters] = useState([]);
|
||||
const [formResponses, setFormResponses] = useState({});
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [currentPage, setCurrentPage] = useState(5);
|
||||
|
||||
const [isPage1Valid, setIsPage1Valid] = useState(false);
|
||||
const [isPage2Valid, setIsPage2Valid] = useState(false);
|
||||
@ -283,8 +278,8 @@ export default function InscriptionFormShared({
|
||||
});
|
||||
|
||||
// Trouver le template correspondant pour récupérer sa configuration
|
||||
const currentTemplate = schoolFileMasters.find(
|
||||
(master) => master.id === templateId
|
||||
const currentTemplate = schoolFileTemplates.find(
|
||||
(template) => template.id === templateId
|
||||
);
|
||||
if (!currentTemplate) {
|
||||
throw new Error(`Template avec l'ID ${templateId} non trouvé`);
|
||||
@ -294,17 +289,16 @@ export default function InscriptionFormShared({
|
||||
const formTemplateData = {
|
||||
id: currentTemplate.id,
|
||||
title:
|
||||
currentTemplate.formMasterData?.title ||
|
||||
currentTemplate.formTemplateData?.title ||
|
||||
currentTemplate.title ||
|
||||
currentTemplate.name ||
|
||||
'Formulaire',
|
||||
fields: (
|
||||
currentTemplate.formMasterData?.fields ||
|
||||
currentTemplate.formTemplateData?.fields ||
|
||||
currentTemplate.fields ||
|
||||
[]
|
||||
).map((field) => ({
|
||||
...field,
|
||||
// Ajouter la réponse de l'utilisateur selon le type de champ
|
||||
...(field.type === 'checkbox'
|
||||
? { checked: formData[field.id] || false }
|
||||
: {}),
|
||||
@ -315,8 +309,8 @@ export default function InscriptionFormShared({
|
||||
? { value: formData[field.id] || '' }
|
||||
: {}),
|
||||
})),
|
||||
submitLabel: currentTemplate.formMasterData?.submitLabel || 'Valider',
|
||||
responses: formData, // Garder aussi les réponses brutes pour facilité d'accès
|
||||
submitLabel: currentTemplate.formTemplateData?.submitLabel || 'Valider',
|
||||
responses: formData,
|
||||
};
|
||||
|
||||
// Sauvegarder les réponses du formulaire via l'API RegistrationSchoolFileTemplate
|
||||
@ -331,18 +325,37 @@ export default function InscriptionFormShared({
|
||||
);
|
||||
logger.debug("Réponse de l'API:", result);
|
||||
|
||||
// Mettre à jour l'état local des réponses
|
||||
// Prendre en compte la réponse du back pour mettre à jour les réponses locales
|
||||
let newResponses = formData;
|
||||
if (
|
||||
result &&
|
||||
result.data &&
|
||||
result.data.formTemplateData &&
|
||||
result.data.formTemplateData.responses &&
|
||||
result.data.formTemplateData.responses.responses
|
||||
) {
|
||||
// Si la structure responses.responses existe, on la prend
|
||||
newResponses = result.data.formTemplateData.responses.responses;
|
||||
} else if (
|
||||
result &&
|
||||
result.data &&
|
||||
result.data.formTemplateData &&
|
||||
result.data.formTemplateData.responses
|
||||
) {
|
||||
// Sinon, on prend responses directement
|
||||
newResponses = result.data.formTemplateData.responses;
|
||||
}
|
||||
|
||||
setFormResponses((prev) => ({
|
||||
...prev,
|
||||
[templateId]: formData,
|
||||
[templateId]: newResponses,
|
||||
}));
|
||||
|
||||
// Mettre à jour l'état local pour indiquer que le formulaire est complété
|
||||
setSchoolFileMasters((prevMasters) => {
|
||||
return prevMasters.map((master) =>
|
||||
master.id === templateId
|
||||
? { ...master, completed: true, responses: formData }
|
||||
: master
|
||||
setSchoolFileTemplates((prevTemplates) => {
|
||||
return prevTemplates.map((template) =>
|
||||
template.id === templateId
|
||||
? { ...template, completed: true, responses: newResponses }
|
||||
: template
|
||||
);
|
||||
});
|
||||
|
||||
@ -354,7 +367,6 @@ export default function InscriptionFormShared({
|
||||
error: error.message,
|
||||
stack: error.stack,
|
||||
});
|
||||
// Afficher l'erreur à l'utilisateur
|
||||
alert(`Erreur lors de la sauvegarde du formulaire: ${error.message}`);
|
||||
return Promise.reject(error);
|
||||
}
|
||||
@ -370,6 +382,56 @@ export default function InscriptionFormShared({
|
||||
useEffect(() => {
|
||||
fetchSchoolFileTemplatesFromRegistrationFiles(studentId).then((data) => {
|
||||
setSchoolFileTemplates(data);
|
||||
|
||||
// Récupérer les réponses existantes pour chaque template
|
||||
const fetchAllResponses = async () => {
|
||||
const responsesMap = {};
|
||||
for (const template of data) {
|
||||
if (template.id) {
|
||||
try {
|
||||
const templateData = await fetchFormResponses(template.id);
|
||||
if (templateData && templateData.formTemplateData) {
|
||||
if (templateData.formTemplateData.responses) {
|
||||
responsesMap[template.id] = templateData.formTemplateData.responses;
|
||||
} else {
|
||||
// Extraire les réponses depuis les champs
|
||||
const responses = {};
|
||||
if (templateData.formTemplateData.fields) {
|
||||
templateData.formTemplateData.fields.forEach((field) => {
|
||||
if (
|
||||
field.type === 'checkbox' &&
|
||||
field.checked !== undefined
|
||||
) {
|
||||
responses[field.id] = field.checked;
|
||||
} else if (
|
||||
field.type === 'radio' &&
|
||||
field.selected !== undefined
|
||||
) {
|
||||
responses[field.id] = field.selected;
|
||||
} else if (
|
||||
(field.type === 'text' ||
|
||||
field.type === 'textarea' ||
|
||||
field.type === 'email') &&
|
||||
field.value !== undefined
|
||||
) {
|
||||
responses[field.id] = field.value;
|
||||
}
|
||||
});
|
||||
}
|
||||
responsesMap[template.id] = responses;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
logger.debug(
|
||||
`Pas de données existantes pour le template ${template.id}:`,
|
||||
error
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
setFormResponses(responsesMap);
|
||||
};
|
||||
fetchAllResponses();
|
||||
});
|
||||
|
||||
fetchParentFileTemplatesFromRegistrationFiles(studentId).then((data) => {
|
||||
@ -392,66 +454,6 @@ export default function InscriptionFormShared({
|
||||
.catch((error) => logger.error('Error fetching profiles : ', error));
|
||||
|
||||
if (selectedEstablishmentId) {
|
||||
// Fetch data for school file masters
|
||||
fetchRegistrationSchoolFileMasters(selectedEstablishmentId)
|
||||
.then(async (data) => {
|
||||
logger.debug('School file masters fetched:', data);
|
||||
setSchoolFileMasters(data);
|
||||
|
||||
// Récupérer les données existantes de chaque template
|
||||
const responsesMap = {};
|
||||
for (const master of data) {
|
||||
if (master.id) {
|
||||
try {
|
||||
const templateData = await fetchFormResponses(master.id);
|
||||
if (templateData && templateData.formTemplateData) {
|
||||
// Si on a les réponses brutes sauvegardées, les utiliser
|
||||
if (templateData.formTemplateData.responses) {
|
||||
responsesMap[master.id] =
|
||||
templateData.formTemplateData.responses;
|
||||
} else {
|
||||
// Sinon, extraire les réponses depuis les champs
|
||||
const responses = {};
|
||||
if (templateData.formTemplateData.fields) {
|
||||
templateData.formTemplateData.fields.forEach((field) => {
|
||||
if (
|
||||
field.type === 'checkbox' &&
|
||||
field.checked !== undefined
|
||||
) {
|
||||
responses[field.id] = field.checked;
|
||||
} else if (
|
||||
field.type === 'radio' &&
|
||||
field.selected !== undefined
|
||||
) {
|
||||
responses[field.id] = field.selected;
|
||||
} else if (
|
||||
(field.type === 'text' ||
|
||||
field.type === 'textarea' ||
|
||||
field.type === 'email') &&
|
||||
field.value !== undefined
|
||||
) {
|
||||
responses[field.id] = field.value;
|
||||
}
|
||||
});
|
||||
}
|
||||
responsesMap[master.id] = responses;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
logger.debug(
|
||||
`Pas de données existantes pour le template ${master.id}:`,
|
||||
error
|
||||
);
|
||||
// Ce n'est pas critique si un template n'a pas de données
|
||||
}
|
||||
}
|
||||
}
|
||||
setFormResponses(responsesMap);
|
||||
})
|
||||
.catch((error) =>
|
||||
logger.error('Error fetching school file masters:', error)
|
||||
);
|
||||
|
||||
// Fetch data for registration payment modes
|
||||
handleRegistrationPaymentModes();
|
||||
|
||||
@ -464,7 +466,7 @@ export default function InscriptionFormShared({
|
||||
// Fetch data for tuition payment plans
|
||||
handleTuitionnPaymentPlans();
|
||||
}
|
||||
}, [selectedEstablishmentId]);
|
||||
}, [studentId, selectedEstablishmentId]);
|
||||
|
||||
const handleRegistrationPaymentModes = () => {
|
||||
fetchRegistrationPaymentModes(selectedEstablishmentId)
|
||||
@ -514,10 +516,22 @@ export default function InscriptionFormShared({
|
||||
);
|
||||
}
|
||||
|
||||
const updateData = new FormData();
|
||||
updateData.append('file', file);
|
||||
// Générer le nom du fichier : <nom_template>.<extension d'origine>
|
||||
let extension = '';
|
||||
if (file.name && file.name.lastIndexOf('.') !== -1) {
|
||||
extension = file.name.substring(file.name.lastIndexOf('.'));
|
||||
}
|
||||
// Nettoyer le nom du template pour éviter les caractères spéciaux
|
||||
const cleanName = (selectedFile.name || 'document')
|
||||
.replace(/[^a-zA-Z0-9_\-]/g, '_')
|
||||
.replace(/_+/g, '_')
|
||||
.replace(/^_+|_+$/g, '');
|
||||
const finalFileName = `${cleanName}${extension}`;
|
||||
|
||||
return editRegistrationParentFileTemplates(
|
||||
const updateData = new FormData();
|
||||
updateData.append('file', file, finalFileName);
|
||||
|
||||
return editRegistrationSchoolFileTemplates(
|
||||
selectedFile.id,
|
||||
updateData,
|
||||
csrfToken
|
||||
@ -528,11 +542,10 @@ export default function InscriptionFormShared({
|
||||
setUploadedFiles((prev) => {
|
||||
const updatedFiles = prev.map((uploadedFile) =>
|
||||
uploadedFile.id === selectedFile.id
|
||||
? { ...uploadedFile, fileName: response.data.file } // Met à jour le fichier téléversé
|
||||
? { ...uploadedFile, fileName: response.data.file }
|
||||
: uploadedFile
|
||||
);
|
||||
|
||||
// Si le fichier n'existe pas encore, l'ajouter
|
||||
if (!updatedFiles.find((file) => file.id === selectedFile.id)) {
|
||||
updatedFiles.push({
|
||||
id: selectedFile.id,
|
||||
@ -552,11 +565,11 @@ export default function InscriptionFormShared({
|
||||
)
|
||||
);
|
||||
|
||||
return response; // Retourner la réponse pour signaler le succès
|
||||
return response;
|
||||
})
|
||||
.catch((error) => {
|
||||
logger.error('Erreur lors de la mise à jour du fichier :', error);
|
||||
throw error; // Relancer l'erreur pour que l'appelant puisse la capturer
|
||||
throw error;
|
||||
});
|
||||
};
|
||||
|
||||
@ -587,7 +600,7 @@ export default function InscriptionFormShared({
|
||||
setUploadedFiles((prev) =>
|
||||
prev.map((uploadedFile) =>
|
||||
uploadedFile.id === templateId
|
||||
? { ...uploadedFile, fileName: null, fileUrl: null } // Réinitialiser les champs liés au fichier
|
||||
? { ...uploadedFile, fileName: null, fileUrl: null }
|
||||
: uploadedFile
|
||||
)
|
||||
);
|
||||
@ -786,11 +799,12 @@ export default function InscriptionFormShared({
|
||||
{/* Page 5 : Formulaires dynamiques d'inscription */}
|
||||
{currentPage === 5 && (
|
||||
<DynamicFormsList
|
||||
schoolFileMasters={schoolFileMasters}
|
||||
schoolFileMasters={schoolFileTemplates}
|
||||
existingResponses={formResponses}
|
||||
onFormSubmit={handleDynamicFormSubmit}
|
||||
onValidationChange={handleDynamicFormsValidationChange}
|
||||
enable={enable}
|
||||
onFileUpload={handleFileUpload}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
||||
@ -1,209 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import Modal from '@/components/Modal';
|
||||
import { FolderPlus, FileText, FilePlus2, ArrowLeft, Settings2, Upload as UploadIcon } from 'lucide-react';
|
||||
import FormTemplateBuilder from '@/components/Form/FormTemplateBuilder';
|
||||
import FileUpload from '@/components/Form/FileUpload';
|
||||
|
||||
export default function CreateDocumentModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
onCreateGroup,
|
||||
onCreateParentFile,
|
||||
onCreateSchoolFileMaster,
|
||||
groups = [],
|
||||
}) {
|
||||
const [step, setStep] = useState('main'); // main | choose_form | form_builder | file_upload
|
||||
const [fileName, setFileName] = useState('');
|
||||
const [selectedGroupsFileUpload, setSelectedGroupsFileUpload] = useState([]);
|
||||
const [uploadedFile, setUploadedFile] = useState(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!isOpen) {
|
||||
setStep('main');
|
||||
setFileName('');
|
||||
setSelectedGroupsFileUpload([]);
|
||||
setUploadedFile(null);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
// Handler pour chaque type
|
||||
const handleSelect = (type) => {
|
||||
if (type === 'groupe') {
|
||||
setStep('main');
|
||||
onCreateGroup();
|
||||
onClose();
|
||||
}
|
||||
if (type === 'formulaire') {
|
||||
setStep('choose_form');
|
||||
}
|
||||
if (type === 'parent') {
|
||||
setStep('main');
|
||||
onCreateParentFile();
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
// Retour au menu principal
|
||||
const handleBack = () => setStep('main');
|
||||
|
||||
// Submit pour formulaire existant
|
||||
const handleFileUploadSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
if (!fileName || selectedGroupsFileUpload.length === 0 || !uploadedFile) return;
|
||||
onCreateSchoolFileMaster({
|
||||
name: fileName,
|
||||
group_ids: selectedGroupsFileUpload,
|
||||
file: uploadedFile,
|
||||
});
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
setIsOpen={onClose}
|
||||
title="Créer un document"
|
||||
modalClassName="w-full max-w-md"
|
||||
>
|
||||
{step === 'main' && (
|
||||
<div className="flex flex-col gap-6 py-4">
|
||||
<button
|
||||
className="flex items-center gap-3 px-4 py-3 rounded-lg bg-blue-50 hover:bg-blue-100 border border-blue-200 transition"
|
||||
onClick={() => handleSelect('groupe')}
|
||||
>
|
||||
<FolderPlus className="w-6 h-6 text-blue-600" />
|
||||
<span className="font-semibold text-blue-800">Dossier d&aposinscription</span>
|
||||
</button>
|
||||
<button
|
||||
className="flex items-center gap-3 px-4 py-3 rounded-lg bg-emerald-50 hover:bg-emerald-100 border border-emerald-200 transition"
|
||||
onClick={() => handleSelect('formulaire')}
|
||||
>
|
||||
<FileText className="w-6 h-6 text-emerald-600" />
|
||||
<span className="font-semibold text-emerald-800">Formulaire scolaire</span>
|
||||
</button>
|
||||
<button
|
||||
className="flex items-center gap-3 px-4 py-3 rounded-lg bg-orange-50 hover:bg-orange-100 border border-orange-200 transition"
|
||||
onClick={() => handleSelect('parent')}
|
||||
>
|
||||
<FilePlus2 className="w-6 h-6 text-orange-500" />
|
||||
<span className="font-semibold text-orange-700">Pièce à fournir</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{step === 'choose_form' && (
|
||||
<div className="flex flex-col gap-4 py-4">
|
||||
<button
|
||||
className="flex items-center gap-3 px-4 py-3 rounded-lg bg-emerald-100 hover:bg-emerald-200 border border-emerald-300 transition"
|
||||
onClick={() => setStep('form_builder')}
|
||||
>
|
||||
<Settings2 className="w-6 h-6 text-emerald-700" />
|
||||
<span className="font-semibold text-emerald-900">Formulaire personnalisé</span>
|
||||
</button>
|
||||
<button
|
||||
className="flex items-center gap-3 px-4 py-3 rounded-lg bg-gray-100 hover:bg-gray-200 border border-gray-300 transition"
|
||||
onClick={() => setStep('file_upload')}
|
||||
>
|
||||
<UploadIcon className="w-6 h-6 text-gray-700" />
|
||||
<span className="font-semibold text-gray-900">Importer un formulaire existant</span>
|
||||
</button>
|
||||
<button
|
||||
className="flex items-center gap-2 text-gray-600 hover:text-gray-900 mt-2"
|
||||
onClick={handleBack}
|
||||
>
|
||||
<ArrowLeft className="w-5 h-5" />
|
||||
<span>Retour</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{step === 'form_builder' && (
|
||||
<div>
|
||||
<button
|
||||
className="flex items-center gap-2 text-gray-600 hover:text-gray-900 mb-2"
|
||||
onClick={handleBack}
|
||||
>
|
||||
<ArrowLeft className="w-5 h-5" />
|
||||
<span>Retour</span>
|
||||
</button>
|
||||
<FormTemplateBuilder
|
||||
onSave={(data) => {
|
||||
onCreateSchoolFileMaster(data);
|
||||
onClose();
|
||||
}}
|
||||
groups={groups}
|
||||
isEditing={false}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{step === 'file_upload' && (
|
||||
<div>
|
||||
<button
|
||||
className="flex items-center gap-2 text-gray-600 hover:text-gray-900 mb-2"
|
||||
onClick={handleBack}
|
||||
>
|
||||
<ArrowLeft className="w-5 h-5" />
|
||||
<span>Retour</span>
|
||||
</button>
|
||||
<form className="flex flex-col gap-4" onSubmit={handleFileUploadSubmit}>
|
||||
<input
|
||||
type="text"
|
||||
className="border rounded px-3 py-2"
|
||||
placeholder="Nom du formulaire"
|
||||
value={fileName}
|
||||
onChange={e => setFileName(e.target.value)}
|
||||
required
|
||||
/>
|
||||
{/* Sélecteur de groupes à cocher */}
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Groupes d'inscription <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="space-y-2 max-h-32 overflow-y-auto border rounded-md p-2">
|
||||
{groups && groups.length > 0 ? (
|
||||
groups.map((group) => (
|
||||
<label key={group.id} className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedGroupsFileUpload.includes(group.id)}
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedGroupsFileUpload([
|
||||
...selectedGroupsFileUpload,
|
||||
group.id,
|
||||
]);
|
||||
} else {
|
||||
setSelectedGroupsFileUpload(
|
||||
selectedGroupsFileUpload.filter((id) => id !== group.id)
|
||||
);
|
||||
}
|
||||
}}
|
||||
className="mr-2 text-blue-600"
|
||||
/>
|
||||
<span className="text-sm">{group.name}</span>
|
||||
</label>
|
||||
))
|
||||
) : (
|
||||
<p className="text-gray-500 text-sm">
|
||||
Aucun groupe disponible
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<FileUpload
|
||||
selectionMessage="Sélectionnez le fichier du formulaire"
|
||||
onFileSelect={setUploadedFile}
|
||||
required
|
||||
enable
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-emerald-600 text-white px-4 py-2 rounded font-bold mt-2"
|
||||
disabled={!fileName || selectedGroupsFileUpload.length === 0 || !uploadedFile}
|
||||
>
|
||||
Créer le formulaire
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@ -6,8 +6,6 @@ import {
|
||||
Star,
|
||||
ChevronDown,
|
||||
Plus,
|
||||
Archive,
|
||||
Eye
|
||||
} from 'lucide-react';
|
||||
import Modal from '@/components/Modal';
|
||||
import FormTemplateBuilder from '@/components/Form/FormTemplateBuilder';
|
||||
@ -31,11 +29,9 @@ import {
|
||||
} from '@/app/actions/registerFileGroupAction';
|
||||
import RegistrationFileGroupForm from '@/components/Structure/Files/RegistrationFileGroupForm';
|
||||
import logger from '@/utils/logger';
|
||||
import ParentFiles from './ParentFiles';
|
||||
import Popup from '@/components/Popup';
|
||||
import Loader from '@/components/Loader';
|
||||
import { useNotification } from '@/context/NotificationContext';
|
||||
import CreateDocumentModal from '@/components/Structure/Files/CreateDocumentModal';
|
||||
import FileUpload from '@/components/Form/FileUpload';
|
||||
import SectionTitle from '@/components/SectionTitle';
|
||||
import DropdownMenu from '@/components/DropdownMenu';
|
||||
|
||||
Reference in New Issue
Block a user