feat: Configuration et gestion du planning [#2]

This commit is contained in:
N3WT DE COMPET
2025-01-11 19:37:29 +01:00
parent 3c27133cdb
commit 830d9a48c0
26 changed files with 1163 additions and 1071 deletions

View File

@ -12,7 +12,7 @@ import { useClasses } from '@/context/ClassesContext';
const ClassForm = ({ onSubmit, isNew, teachers }) => {
const { formData, setFormData } = useClasseForm();
const { schoolYears, getNiveauxLabels, generateAgeToNiveaux, niveauxPremierCycle, niveauxSecondCycle, niveauxTroisiemeCycle, typeEmploiDuTemps, updatePlanning } = useClasses();
const { getNiveauNameById, schoolYears, getNiveauxLabels, getNiveauxTabs, generateAgeToNiveaux, niveauxPremierCycle, niveauxSecondCycle, niveauxTroisiemeCycle, typeEmploiDuTemps, updatePlannings } = useClasses();
const [selectedTeachers, setSelectedTeachers] = useState(formData.enseignants_ids);
const handleTeacherSelection = (teacher) => {
@ -40,7 +40,8 @@ const ClassForm = ({ onSubmit, isNew, teachers }) => {
plage_horaire: updatedTimes,
};
updatedFormData.planning = updatePlanning(updatedFormData);
const existingPlannings = prevState.plannings || [];
updatedFormData.plannings = updatePlannings(updatedFormData, existingPlannings);
return updatedFormData;
});
@ -60,51 +61,51 @@ const ClassForm = ({ onSubmit, isNew, teachers }) => {
jours_ouverture: updatedJoursOuverture,
};
updatedFormData.planning = updatePlanning(updatedFormData);
const existingPlannings = prevState.plannings || [];
updatedFormData.plannings = updatePlannings(updatedFormData, existingPlannings);
return updatedFormData;
});
};
};
const handleChange = (e) => {
e.preventDefault();
const { name, value, type, checked } = e.target;
setFormData(prevState => {
let updatedFormData = { ...prevState };
if (type === 'checkbox') {
const newValues = checked
? [...(prevState[name] || []), parseInt(value)]
: (prevState[name] || []).filter(v => v !== parseInt(value));
updatedFormData[name] = newValues;
} else if (name === 'tranche_age') {
const [minAgeStr, maxAgeStr] = value.split('-');
const minAge = minAgeStr ? parseInt(minAgeStr) : null;
const maxAge = minAgeStr ? parseInt(maxAgeStr) : null;
const selectedNiveaux = generateAgeToNiveaux(minAge, maxAge);
const niveauxLabels = getNiveauxLabels(selectedNiveaux);
updatedFormData = {
...prevState,
[name]: value,
niveaux: selectedNiveaux.length > 0 ? selectedNiveaux : [],
niveaux_label: niveauxLabels.length > 0 ? niveauxLabels : []
};
} else if (type === 'radio') {
updatedFormData[name] = parseInt(value, 10);
} else {
updatedFormData[name] = value;
}
console.log('Updated formData:', updatedFormData);
updatedFormData.planning = updatePlanning(updatedFormData);
console.log('Final formData:', updatedFormData);
return updatedFormData;
setFormData(prevState => {
// Copier l'état précédent
let newState = { ...prevState };
if (type === 'checkbox') {
const newValues = checked
? [...(prevState[name] || []), parseInt(value)]
: (prevState[name] || []).filter(v => v !== parseInt(value));
newState[name] = newValues;
} else if (name === 'tranche_age') {
const [minAgeStr, maxAgeStr] = value.split('-');
const minAge = minAgeStr ? parseInt(minAgeStr) : null;
const maxAge = minAgeStr ? parseInt(maxAgeStr) : null;
const selectedNiveaux = generateAgeToNiveaux(minAge, maxAge);
const niveauxLabels = getNiveauxLabels(selectedNiveaux);
newState = {
...prevState,
[name]: value,
niveaux: selectedNiveaux.length > 0 ? selectedNiveaux : [],
};
} else if (type === 'radio') {
newState[name] = parseInt(value, 10);
} else {
newState[name] = value;
}
const existingPlannings = prevState.plannings || [];
newState.plannings = updatePlannings(newState, existingPlannings);
return newState;
});
};
};
const handleSubmit = () => {
onSubmit(formData);

View File

@ -5,6 +5,8 @@ import DropdownMenu from '@/components/DropdownMenu';
import Modal from '@/components/Modal';
import ClassForm from '@/components/Structure/Configuration/ClassForm';
import ClasseDetails from '@/components/ClasseDetails';
import LevelLabel from '@/components/CustomLabels/LevelLabel';
import TeacherLabel from '@/components/CustomLabels/TeacherLabel';
import { ClasseFormProvider } from '@/context/ClasseFormContext';
import { useClasses } from '@/context/ClassesContext';
@ -86,20 +88,14 @@ const ClassesSection = ({ classes, specialities, teachers, handleCreate, handleE
return (
<div className="flex flex-wrap justify-center items-center space-x-2">
{niveauxLabels.length > 0
? niveauxLabels.map((label, index) => (
<div
key={index}
className={`px-3 py-1 rounded-md shadow-sm ${
index % 2 === 0 ? 'bg-white' : 'bg-gray-100'
} border border-gray-200 text-gray-700`}>
{label}
</div>
))
: 'Aucun niveau'}
? niveauxLabels.map((label, index) => (
<LevelLabel key={index} label={label} index={index} />
))
: 'Aucun niveau'}
</div>
);
}
},
},
{ name: 'CAPACITÉ MAX', transform: (row) => row.nombre_eleves },
{ name: 'ANNÉE SCOLAIRE', transform: (row) => row.annee_scolaire },
{
@ -107,15 +103,8 @@ const ClassesSection = ({ classes, specialities, teachers, handleCreate, handleE
transform: (row) => (
<div key={row.id} className="flex flex-wrap justify-center items-center space-x-2">
{row.enseignants.map((teacher, index) => (
<div
key={teacher.id}
className={`px-3 py-1 rounded-md shadow-sm ${
index % 2 === 0 ? 'bg-white' : 'bg-gray-100'
} border border-gray-200 text-gray-700`}
>
<span className="font-bold">{teacher.nom} {teacher.prenom}</span>
</div>
))}
<TeacherLabel key={teacher.id} nom={teacher.nom} prenom={teacher.prenom} index={index} />
))}
</div>
)
},

View File

@ -28,7 +28,7 @@ const PlanningConfiguration = ({ formData, handleChange, handleTimeChange, handl
items={typeEmploiDuTemps}
formData={formData}
handleChange={handleChange}
fieldName="planning_type"
fieldName="type"
className="w-full"
/>
</div>
@ -56,7 +56,7 @@ const PlanningConfiguration = ({ formData, handleChange, handleTimeChange, handl
{/* DateRange */}
<div className="space-y-4 w-full">
{formData.planning_type === 2 && (
{formData.type === 2 && (
<>
<DateRange
nameStart="date_debut_semestre_1"
@ -77,7 +77,7 @@ const PlanningConfiguration = ({ formData, handleChange, handleTimeChange, handl
</>
)}
{formData.planning_type === 3 && (
{formData.type === 3 && (
<>
<DateRange
nameStart="date_debut_trimestre_1"

View File

@ -1,13 +1,12 @@
import React from 'react';
import { School, Calendar } from 'lucide-react';
const TabsStructure = ({ activeTab, setActiveTab, tabs }) => {
return (
<div className="flex justify-center mb-8">
<div className="flex justify-center items-center w-full">
{tabs.map((tab) => (
<button
key={tab.id}
className={`tab px-4 py-2 mx-2 flex items-center space-x-2 ${activeTab === tab.id ? 'bg-emerald-600 text-white shadow-lg' : 'bg-emerald-200 text-emerald-600'} rounded-full`}
className={`tab px-4 py-2 mx-2 flex items-center justify-center space-x-2 ${activeTab === tab.id ? 'bg-emerald-600 text-white shadow-lg' : 'bg-emerald-200 text-emerald-600'} rounded-full`}
onClick={() => setActiveTab(tab.id)}
>
<tab.icon className="w-5 h-5" />
@ -19,3 +18,6 @@ const TabsStructure = ({ activeTab, setActiveTab, tabs }) => {
};
export default TabsStructure;