mirror of
https://git.v0id.ovh/n3wt-innov/n3wt-school.git
synced 2026-01-29 16:03:21 +00:00
feat: Validation du dossier d'inscription en affectant l'élève à une
classe de son niveau / création d'une fenêtre de visualisation d'une classe (en cours)
This commit is contained in:
N3WT DE COMPET
@ -0,0 +1,214 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Plus, Users, Layers } from 'lucide-react';
|
||||
import Table from '@/components/Table';
|
||||
import MultiSelect from '@/components/MultiSelect';
|
||||
import InputText from '@/components/InputText';
|
||||
import Popup from '@/components/Popup';
|
||||
import { fetchClasse } from '@/app/actions/schoolAction';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import logger from '@/utils/logger';
|
||||
import { useClasses } from '@/context/ClassesContext';
|
||||
import { BASE_URL } from '@/utils/Url';
|
||||
|
||||
export default function Page() {
|
||||
const searchParams = useSearchParams();
|
||||
const schoolClassId = searchParams.get('schoolClassId');
|
||||
const [classe, setClasse] = useState([]);
|
||||
const { getNiveauxLabels, getNiveauLabel } = useClasses();
|
||||
|
||||
const [students, setStudents] = useState([]);
|
||||
const [groups, setGroups] = useState([]);
|
||||
const [newGroup, setNewGroup] = useState({
|
||||
name: '',
|
||||
level: null,
|
||||
students: [],
|
||||
});
|
||||
const [popupVisible, setPopupVisible] = useState(false);
|
||||
const [popupMessage, setPopupMessage] = useState('');
|
||||
|
||||
const handleCreateGroup = () => {
|
||||
if (!newGroup.name || !newGroup.level || newGroup.students.length === 0) {
|
||||
setPopupMessage(
|
||||
'Tous les champs doivent être remplis pour créer un groupe.'
|
||||
);
|
||||
setPopupVisible(true);
|
||||
return;
|
||||
}
|
||||
|
||||
const updatedGroups = [...groups, newGroup];
|
||||
setGroups(updatedGroups);
|
||||
setNewGroup({ name: '', level: null, students: [] });
|
||||
};
|
||||
|
||||
const requestErrorHandler = (err) => {
|
||||
logger.error('Error fetching data:', err);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchClasse(schoolClassId)
|
||||
.then((classeData) => {
|
||||
logger.debug('Classes récupérées :', classeData);
|
||||
setClasse(classeData);
|
||||
})
|
||||
.catch(requestErrorHandler);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
<h1 className="text-2xl font-bold">{classe?.atmosphere_name}</h1>
|
||||
|
||||
{/* Section Niveaux */}
|
||||
<div className="bg-white p-4 rounded-lg shadow-md">
|
||||
<h2 className="text-xl font-semibold mb-4 flex items-center">
|
||||
<Layers className="w-6 h-6 mr-2" />
|
||||
Niveaux
|
||||
</h2>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{classe?.levels?.length > 0 ? (
|
||||
getNiveauxLabels(classe.levels).map((label, index) => (
|
||||
<span
|
||||
key={index} // Utilisez un index si les IDs ne sont pas disponibles
|
||||
className="px-3 py-1 bg-gray-200 rounded-full text-gray-800"
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
))
|
||||
) : (
|
||||
<span className="text-gray-500">Aucun niveau associé</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Section Enseignants */}
|
||||
<div className="bg-white p-4 rounded-lg shadow-md">
|
||||
<h2 className="text-xl font-semibold mb-4 flex items-center">
|
||||
<Users className="w-6 h-6 mr-2" />
|
||||
Enseignants
|
||||
</h2>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{classe?.teachers_details?.map((teacher) => (
|
||||
<span
|
||||
key={teacher.id}
|
||||
className="px-3 py-1 bg-emerald-200 rounded-full text-emerald-800"
|
||||
>
|
||||
{teacher.last_name} {teacher.first_name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Section Élèves */}
|
||||
<div className="bg-white p-4 rounded-lg shadow-md">
|
||||
<h2 className="text-xl font-semibold mb-4 flex items-center">
|
||||
<Users className="w-6 h-6 mr-2" />
|
||||
Eleves
|
||||
</h2>
|
||||
<Table
|
||||
columns={[
|
||||
{
|
||||
name: 'photo',
|
||||
transform: (row) => (
|
||||
<div className="flex justify-center items-center">
|
||||
{row.photo ? (
|
||||
<a
|
||||
href={`${BASE_URL}${row.photo}`} // Lien vers la photo
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<img
|
||||
src={`${BASE_URL}${row.photo}`}
|
||||
alt={`${row.first_name} ${row.last_name}`}
|
||||
className="w-10 h-10 object-cover transition-transform duration-200 hover:scale-125 cursor-pointer rounded-full"
|
||||
/>
|
||||
</a>
|
||||
) : (
|
||||
<div className="w-10 h-10 flex items-center justify-center bg-gray-200 rounded-full">
|
||||
<span className="text-gray-500 text-sm font-semibold">
|
||||
{row.first_name[0]}
|
||||
{row.last_name[0]}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{ name: 'Nom', transform: (row) => row.last_name },
|
||||
{ name: 'Prénom', transform: (row) => row.first_name },
|
||||
{ name: 'Niveau', transform: (row) => getNiveauLabel(row.level) },
|
||||
]}
|
||||
data={classe.students}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Section Groupes */}
|
||||
{/* <div className="bg-white p-4 rounded-lg shadow-md">
|
||||
<h2 className="text-xl font-semibold mb-4 flex items-center">
|
||||
<Layers className="w-6 h-6 mr-2" />
|
||||
groups
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
{groups.map((group, index) => (
|
||||
<div key={group.name || index} className="p-4 bg-gray-100 rounded-lg shadow-sm">
|
||||
<h3 className="text-lg font-semibold">{group.name}</h3>
|
||||
<p className="text-sm text-gray-600">level: {group.level.name}</p>
|
||||
<div className="flex flex-wrap gap-2 mt-2">
|
||||
{group.students.map((student) => (
|
||||
<span
|
||||
key={student.id}
|
||||
className="px-3 py-1 bg-blue-200 rounded-full text-blue-800"
|
||||
>
|
||||
{student.last_name} {student.first_name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div> */}
|
||||
|
||||
{/* Formulaire de création de groupe */}
|
||||
{/* <div className="mt-6">
|
||||
<h3 className="text-lg font-semibold">createGroup</h3>
|
||||
<div className="space-y-4">
|
||||
<InputText
|
||||
name="groupName"
|
||||
value={newGroup.name}
|
||||
onChange={(e) => setNewGroup({ ...newGroup, name: e.target.value })}
|
||||
placeholder='groupName'
|
||||
/>
|
||||
<MultiSelect
|
||||
name="groupLevel"
|
||||
label='selectLevel'
|
||||
options={classe?.levels || []}
|
||||
selectedOptions={newGroup.level ? [newGroup.level] : []}
|
||||
onChange={(selected) => setNewGroup({ ...newGroup, level: selected[0] })}
|
||||
/>
|
||||
<MultiSelect
|
||||
name="groupStudents"
|
||||
label='selectStudents'
|
||||
options={students}
|
||||
selectedOptions={newGroup.students}
|
||||
onChange={(selected) => setNewGroup({ ...newGroup, students: selected })}
|
||||
/>
|
||||
<button
|
||||
onClick={handleCreateGroup}
|
||||
className="px-4 py-2 bg-emerald-500 text-white rounded-md shadow-sm hover:bg-emerald-600"
|
||||
>
|
||||
create
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
{/* Popup */}
|
||||
<Popup
|
||||
visible={popupVisible}
|
||||
message={popupMessage}
|
||||
onConfirm={() => setPopupVisible(false)}
|
||||
onCancel={() => setPopupVisible(false)}
|
||||
uniqueConfirmButton={true}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -4,13 +4,13 @@ import Table from '@/components/Table';
|
||||
import Tab from '@/components/Tab';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import StatusLabel from '@/components/StatusLabel';
|
||||
import { Search } from 'lucide-react';
|
||||
import Popup from '@/components/Popup';
|
||||
import Loader from '@/components/Loader';
|
||||
import AlertWithModal from '@/components/AlertWithModal';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import DropdownMenu from '@/components/DropdownMenu';
|
||||
import {
|
||||
Search,
|
||||
MoreVertical,
|
||||
Send,
|
||||
Edit,
|
||||
@ -22,7 +22,6 @@ import {
|
||||
} from 'lucide-react';
|
||||
import Modal from '@/components/Modal';
|
||||
import InscriptionForm from '@/components/Inscription/InscriptionForm';
|
||||
import AffectationClasseForm from '@/components/AffectationClasseForm';
|
||||
import { useEstablishment } from '@/context/EstablishmentContext';
|
||||
|
||||
import {
|
||||
@ -94,7 +93,6 @@ export default function Page({ params: { locale } }) {
|
||||
const [schoolFileMasters, setSchoolFileMasters] = useState([]);
|
||||
const [parentFileMasters, setParentFileMasters] = useState([]);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [isOpenAffectationClasse, setIsOpenAffectationClasse] = useState(false);
|
||||
const [student, setStudent] = useState('');
|
||||
const [classes, setClasses] = useState([]);
|
||||
const [students, setEleves] = useState([]);
|
||||
@ -142,11 +140,6 @@ export default function Page({ params: { locale } }) {
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
const openModalAssociationEleve = (eleveSelected) => {
|
||||
setIsOpenAffectationClasse(true);
|
||||
setStudent(eleveSelected);
|
||||
};
|
||||
|
||||
const openFilesModal = (row) => {
|
||||
setSelectedRegisterForm(row || []);
|
||||
setIsFilesModalOpen(true);
|
||||
@ -453,17 +446,6 @@ export default function Page({ params: { locale } }) {
|
||||
setConfirmPopupVisible(true);
|
||||
};
|
||||
|
||||
const affectationClassFormSubmitHandler = (formdata) => {
|
||||
editRegisterForm(student.id, formData, csrfToken)
|
||||
.then((data) => {
|
||||
logger.debug('Success:', data);
|
||||
setReloadFetch(true);
|
||||
})
|
||||
.catch((error) => {
|
||||
logger.error('Error :', error);
|
||||
});
|
||||
};
|
||||
|
||||
const updateStatusAction = (id, newStatus) => {
|
||||
logger.debug(
|
||||
`Mise à jour du statut du dossier d'inscription avec l'ID : ${id} vers le statut : ${newStatus}`
|
||||
@ -785,7 +767,7 @@ export default function Page({ params: { locale } }) {
|
||||
</span>
|
||||
),
|
||||
onClick: () => {
|
||||
const url = `${FE_ADMIN_SUBSCRIPTIONS_VALIDATE_URL}?studentId=${row.student.id}&firstName=${row.student.first_name}&lastName=${row.student.last_name}&sepa_file=${row.sepa_file}&student_file=${row.registration_file}`;
|
||||
const url = `${FE_ADMIN_SUBSCRIPTIONS_VALIDATE_URL}?studentId=${row.student.id}&firstName=${row.student.first_name}&lastName=${row.student.last_name}&level=${row.student.level}&sepa_file=${row.sepa_file}&student_file=${row.registration_file}`;
|
||||
router.push(`${url}`);
|
||||
},
|
||||
},
|
||||
@ -1141,20 +1123,6 @@ export default function Page({ params: { locale } }) {
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
{isOpenAffectationClasse && (
|
||||
<Modal
|
||||
isOpen={isOpenAffectationClasse}
|
||||
setIsOpen={setIsOpenAffectationClasse}
|
||||
title="Affectation à une classe"
|
||||
ContentComponent={() => (
|
||||
<AffectationClasseForm
|
||||
students={students}
|
||||
onSubmit={affectationClassFormSubmitHandler}
|
||||
classes={classes}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
{isSepaUploadModalOpen && (
|
||||
<Modal
|
||||
isOpen={isSepaUploadModalOpen}
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
'use client';
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useSearchParams, useRouter } from 'next/navigation';
|
||||
import ValidateSubscription from '@/components/Inscription/ValidateSubscription';
|
||||
import { editRegisterFormWithBinaryFile } from '@/app/actions/subscriptionAction';
|
||||
import { fetchClasses } from '@/app/actions/schoolAction';
|
||||
import { useCsrfToken } from '@/context/CsrfContext';
|
||||
import logger from '@/utils/logger';
|
||||
import Loader from '@/components/Loader';
|
||||
import { useEstablishment } from '@/context/EstablishmentContext';
|
||||
import { FE_ADMIN_SUBSCRIPTIONS_URL } from '@/utils/Url';
|
||||
|
||||
export default function Page() {
|
||||
@ -17,10 +19,38 @@ export default function Page() {
|
||||
const studentId = searchParams.get('studentId');
|
||||
const firstName = searchParams.get('firstName');
|
||||
const lastName = searchParams.get('lastName');
|
||||
const sepa_file = searchParams.get('sepa_file');
|
||||
const level = searchParams.get('level');
|
||||
const sepa_file =
|
||||
searchParams.get('sepa_file') === 'null'
|
||||
? null
|
||||
: searchParams.get('sepa_file');
|
||||
const student_file = searchParams.get('student_file');
|
||||
|
||||
const [classes, setClasses] = useState([]);
|
||||
|
||||
const csrfToken = useCsrfToken();
|
||||
const { selectedEstablishmentId } = useEstablishment();
|
||||
|
||||
const requestErrorHandler = (err) => {
|
||||
logger.error('Error fetching data:', err);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedEstablishmentId) {
|
||||
fetchClasses(selectedEstablishmentId)
|
||||
.then((classesData) => {
|
||||
logger.debug('Classes récupérées :', classesData);
|
||||
|
||||
// Filtrer les classes par niveau
|
||||
const filteredClasses = classesData.filter(
|
||||
(classe) => classe.levels.includes(parseInt(level, 10)) // Vérifier si le niveau de l'étudiant est dans les niveaux de la classe
|
||||
);
|
||||
|
||||
setClasses(filteredClasses); // Mettre à jour les classes filtrées
|
||||
})
|
||||
.catch(requestErrorHandler);
|
||||
}
|
||||
}, [selectedEstablishmentId]);
|
||||
|
||||
const handleAcceptRF = (data) => {
|
||||
const formData = new FormData();
|
||||
@ -41,7 +71,7 @@ export default function Page() {
|
||||
});
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
if (isLoading || classes.length === 0) {
|
||||
return <Loader />;
|
||||
}
|
||||
|
||||
@ -53,6 +83,7 @@ export default function Page() {
|
||||
sepa_file={sepa_file}
|
||||
student_file={student_file}
|
||||
onAccept={handleAcceptRF}
|
||||
classes={classes}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -39,6 +39,12 @@ export const fetchClasses = (establishment) => {
|
||||
).then(requestResponseHandler);
|
||||
};
|
||||
|
||||
export const fetchClasse = (id) => {
|
||||
return fetch(`${BE_SCHOOL_SCHOOLCLASSES_URL}/${id}`).then(
|
||||
requestResponseHandler
|
||||
);
|
||||
};
|
||||
|
||||
export const fetchSchedules = () => {
|
||||
return fetch(`${BE_SCHOOL_PLANNINGS_URL}`).then(requestResponseHandler);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user