acasini/n3wt-school
1
0
Fork 0
mirror of https://git.v0id.ovh/n3wt-innov/n3wt-school.git synced 2026-01-28 23:43:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Partie FRONT / School

Browse Source
This commit is contained in:
N3WT DE COMPET
2025-01-12 16:45:41 +01:00
parent 41aa9d55d3
commit 24352efad3
25 changed files with 217 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
Back-End/School/serializers.py
View File

@ -31,8 +31,10 @@ class TeacherDetailSerializer(serializers.ModelSerializer):
class TeacherSerializer(serializers.ModelSerializer):
specialities = serializers.PrimaryKeyRelatedField(queryset=Speciality.objects.all(), many=True, required=False)
specialities_details = serializers.SerializerMethodField()
associated_profile = serializers.PrimaryKeyRelatedField(queryset=Profile.objects.all(), required=True)
updated_date_formatted = serializers.SerializerMethodField()
droit = serializers.SerializerMethodField()
class Meta:
model = Teacher
@ -67,6 +69,18 @@ class TeacherSerializer(serializers.ModelSerializer):
return local_time.strftime("%d-%m-%Y %H:%M")
def get_droit(self, obj):
if obj.associated_profile:
droit_id = obj.associated_profile.droit
return {
"label": obj.associated_profile.get_droit_display(),
"id": droit_id
}
return None
def get_specialities_details(self, obj):
return [{'name': speciality.name, 'color_code': speciality.color_code} for speciality in obj.specialities.all()]
class PlanningSerializer(serializers.ModelSerializer):
class Meta:
model = Planning
@ -80,6 +94,7 @@ class PlanningSerializer(serializers.ModelSerializer):
class SchoolClassSerializer(serializers.ModelSerializer):
updated_date_formatted = serializers.SerializerMethodField()
teachers = serializers.PrimaryKeyRelatedField(queryset=Teacher.objects.all(), many=True, required=False)
teachers_details = serializers.SerializerMethodField()
class Meta:
model = SchoolClass
@ -150,6 +165,9 @@ class SchoolClassSerializer(serializers.ModelSerializer):
return instance
def get_teachers_details(self, obj):
return [{'last_name': teacher.last_name, 'first_name': teacher.first_name} for teacher in obj.teachers.all()]
def get_updated_date_formatted(self, obj):
utc_time = timezone.localtime(obj.updated_date)
local_tz = pytz.timezone(settings.TZ_APPLI)

30
Front-End/src/app/[locale]/admin/structure/page.js
View File

@ -11,6 +11,7 @@ import { BE_SCHOOL_SPECIALITIES_URL,
import DjangoCSRFToken from '@/components/DjangoCSRFToken'
import useCsrfToken from '@/hooks/useCsrfToken';
import { ClassesProvider } from '@/context/ClassesContext';
import { fetchSpecialities, fetchTeachers, fetchClasses, fetchSchedules } from '@/app/lib/schoolAction';
export default function Page() {
const [specialities, setSpecialities] = useState([]);
@ -27,21 +28,20 @@ export default function Page() {
useEffect(() => {
// Fetch data for specialities
fetchSpecialities();
handleSpecialities();
// Fetch data for teachers
fetchTeachers();
handleTeachers();
// Fetch data for classes
fetchClasses();
handleClasses();
// Fetch data for schedules
fetchSchedules();
handleSchedules();
}, []);
const fetchSpecialities = () => {
fetch(`${BE_SCHOOL_SPECIALITIES_URL}`)
.then(response => response.json())
const handleSpecialities = () => {
fetchSpecialities()
.then(data => {
setSpecialities(data);
})
@ -50,9 +50,8 @@ export default function Page() {
});
};
const fetchTeachers = () => {
fetch(`${BE_SCHOOL_TEACHERS_URL}`)
.then(response => response.json())
const handleTeachers = () => {
fetchTeachers()
.then(data => {
setTeachers(data);
})
@ -61,9 +60,8 @@ export default function Page() {
});
};
const fetchClasses = () => {
fetch(`${BE_SCHOOL_SCHOOLCLASSES_URL}`)
.then(response => response.json())
const handleClasses = () => {
fetchClasses()
.then(data => {
setClasses(data);
})
@ -72,9 +70,8 @@ export default function Page() {
});
};
const fetchSchedules = () => {
fetch(`${BE_SCHOOL_PLANNINGS_URL}`)
.then(response => response.json())
const handleSchedules = () => {
fetchSchedules()
.then(data => {
setSchedules(data);
})
@ -142,7 +139,6 @@ export default function Page() {
});
};
const handleDelete = (url, id, setDatas) => {
fetch(`${url}/${id}`, {
method:'DELETE',

23
Front-End/src/app/lib/schoolAction.js
View File

@ -1,9 +1,26 @@
import {
BE_SCHOOL_SCHOOLCLASSES_URL
BE_SCHOOL_SPECIALITIES_URL,
BE_SCHOOL_TEACHERS_URL,
BE_SCHOOL_SCHOOLCLASSES_URL,
BE_SCHOOL_PLANNINGS_URL
} from '@/utils/Url';
export const fetchClasses = () => {
export const fetchSpecialities = () => {
return fetch(`${BE_SCHOOL_SPECIALITIES_URL}`)
.then(response => response.json())
};
export const fetchTeachers = () => {
return fetch(`${BE_SCHOOL_TEACHERS_URL}`)
.then(response => response.json())
};
export const fetchClasses = () => {
return fetch(`${BE_SCHOOL_SCHOOLCLASSES_URL}`)
.then(response => response.json())
};
};
export const fetchSchedules = () => {
return fetch(`${BE_SCHOOL_PLANNINGS_URL}`)
.then(response => response.json())
};

2
Front-End/src/components/ClasseDetails.js
View File

@ -6,7 +6,7 @@ const ClasseDetails = ({ classe }) => {
if (!classe) return null;
const nombreElevesInscrits = classe.eleves.length;
const capaciteTotale = classe.nombre_eleves;
const capaciteTotale = classe.number_of_students;
const pourcentage = Math.round((nombreElevesInscrits / capaciteTotale) * 100);
const getColor = (pourcentage) => {

4
Front-End/src/components/Inscription/InscriptionFormShared.js
View File

@ -8,7 +8,7 @@ import DjangoCSRFToken from '@/components/DjangoCSRFToken';
import FileUpload from '@/app/[locale]/admin/subscriptions/components/FileUpload';
import Table from '@/components/Table';
const niveaux = [
const levels = [
{ value:'1', label: 'TPS - Très Petite Section'},
{ value:'2', label: 'PS - Petite Section'},
{ value:'3', label: 'MS - Moyenne Section'},
@ -158,7 +158,7 @@ export default function InscriptionFormShared({
label="Niveau"
selected={formData.level}
callback={(e) => updateFormField('level', e.target.value)}
choices={niveaux}
choices={levels}
required
/>
</div>

46
Front-End/src/components/Structure/Configuration/ClassForm.js
View File

@ -13,7 +13,7 @@ const ClassForm = ({ onSubmit, isNew, teachers }) => {
const { formData, setFormData } = useClasseForm();
const { getNiveauNameById, schoolYears, getNiveauxLabels, getNiveauxTabs, generateAgeToNiveaux, niveauxPremierCycle, niveauxSecondCycle, niveauxTroisiemeCycle, typeEmploiDuTemps, updatePlannings } = useClasses();
const [selectedTeachers, setSelectedTeachers] = useState(formData.enseignants_ids);
const [selectedTeachers, setSelectedTeachers] = useState(formData.teachers);
const handleTeacherSelection = (teacher) => {
setSelectedTeachers(prevState =>
@ -23,21 +23,21 @@ const ClassForm = ({ onSubmit, isNew, teachers }) => {
);
setFormData(prevState => ({
...prevState,
enseignants_ids: prevState.enseignants_ids.includes(teacher.id)
? prevState.enseignants_ids.filter(id => id !== teacher.id)
: [...prevState.enseignants_ids, teacher.id]
teachers: prevState.teachers.includes(teacher.id)
? prevState.teachers.filter(id => id !== teacher.id)
: [...prevState.teachers, teacher.id]
}));
};
const handleTimeChange = (e, index) => {
const { value } = e.target;
setFormData(prevState => {
const updatedTimes = [...prevState.plage_horaire];
const updatedTimes = [...prevState.time_range];
updatedTimes[index] = value;
const updatedFormData = {
...prevState,
plage_horaire: updatedTimes,
time_range: updatedTimes,
};
const existingPlannings = prevState.plannings || [];
@ -53,12 +53,12 @@ const ClassForm = ({ onSubmit, isNew, teachers }) => {
setFormData((prevState) => {
const updatedJoursOuverture = checked
? [...prevState.jours_ouverture, dayId]
: prevState.jours_ouverture.filter((id) => id !== dayId);
? [...prevState.opening_days, dayId]
: prevState.opening_days.filter((id) => id !== dayId);
const updatedFormData = {
...prevState,
jours_ouverture: updatedJoursOuverture,
opening_days: updatedJoursOuverture,
};
const existingPlannings = prevState.plannings || [];
@ -82,7 +82,7 @@ const ClassForm = ({ onSubmit, isNew, teachers }) => {
? [...(prevState[name] || []), parseInt(value)]
: (prevState[name] || []).filter(v => v !== parseInt(value));
newState[name] = newValues;
} else if (name === 'tranche_age') {
} else if (name === 'age_range') {
const [minAgeStr, maxAgeStr] = value.split('-');
const minAge = minAgeStr ? parseInt(minAgeStr) : null;
const maxAge = minAgeStr ? parseInt(maxAgeStr) : null;
@ -92,7 +92,7 @@ const ClassForm = ({ onSubmit, isNew, teachers }) => {
newState = {
...prevState,
[name]: value,
niveaux: selectedNiveaux.length > 0 ? selectedNiveaux : [],
levels: selectedNiveaux.length > 0 ? selectedNiveaux : [],
};
} else if (type === 'radio') {
newState[name] = parseInt(value, 10);
@ -111,7 +111,7 @@ const ClassForm = ({ onSubmit, isNew, teachers }) => {
onSubmit(formData);
};
const [minAge, maxAge] = formData.tranche_age.length === 2 ? formData.tranche_age : [null, null];
const [minAge, maxAge] = formData.age_range.length === 2 ? formData.age_range : [null, null];
const selectedAgeGroup = generateAgeToNiveaux(minAge, maxAge);
return (
@ -136,11 +136,11 @@ const ClassForm = ({ onSubmit, isNew, teachers }) => {
</div>
<div>
<InputTextIcon
name="tranche_age"
name="age_range"
type="text"
IconItem={Maximize2}
placeholder="Tranche d'âge (ex: 3-6)"
value={formData.tranche_age}
value={formData.age_range}
onChange={handleChange}
className="w-full"
/>
@ -156,7 +156,7 @@ const ClassForm = ({ onSubmit, isNew, teachers }) => {
items={niveauxPremierCycle}
formData={formData}
handleChange={handleChange}
fieldName="niveaux"
fieldName="levels"
labelAttenuated={(item) => !selectedAgeGroup.includes(parseInt(item.id))}
className="w-full"
/>
@ -164,7 +164,7 @@ const ClassForm = ({ onSubmit, isNew, teachers }) => {
items={niveauxSecondCycle}
formData={formData}
handleChange={handleChange}
fieldName="niveaux"
fieldName="levels"
labelAttenuated={(item) => !selectedAgeGroup.includes(parseInt(item.id))}
className="w-full"
/>
@ -172,7 +172,7 @@ const ClassForm = ({ onSubmit, isNew, teachers }) => {
items={niveauxTroisiemeCycle}
formData={formData}
handleChange={handleChange}
fieldName="niveaux"
fieldName="levels"
labelAttenuated={(item) => !selectedAgeGroup.includes(parseInt(item.id))}
className="w-full"
/>
@ -186,11 +186,11 @@ const ClassForm = ({ onSubmit, isNew, teachers }) => {
<label className="block text-lg font-medium text-gray-700">Capacité</label>
<div className="space-y-4">
<InputTextIcon
name="nombre_eleves"
name="number_of_students"
type="number"
IconItem={UserPlus}
placeholder="Capacité max"
value={formData.nombre_eleves}
value={formData.number_of_students}
onChange={handleChange}
className="w-full"
/>
@ -202,9 +202,9 @@ const ClassForm = ({ onSubmit, isNew, teachers }) => {
<label className="block text-lg font-medium text-gray-700">Année scolaire</label>
<div className="space-y-4">
<SelectChoice
name="annee_scolaire"
name="school_year"
placeholder="Sélectionner l'année scolaire"
selected={formData.annee_scolaire}
selected={formData.school_year}
callback={handleChange}
choices={schoolYears}
IconItem={Calendar}
@ -235,12 +235,12 @@ const ClassForm = ({ onSubmit, isNew, teachers }) => {
text={`${isNew ? "Créer" : "Modifier"}`}
onClick={handleSubmit}
className={`px-4 py-2 rounded-md shadow-sm focus:outline-none ${
(formData.niveaux.length === 0 || !formData.annee_scolaire || !formData.nombre_eleves || formData.enseignants_ids.length === 0)
(formData.levels.length === 0 || !formData.school_year || !formData.number_of_students || formData.teachers.length === 0)
? "bg-gray-300 text-gray-700 cursor-not-allowed"
: "bg-emerald-500 text-white hover:bg-emerald-600"
}`}
primary
disabled={(formData.niveaux.length === 0 || !formData.annee_scolaire || !formData.nombre_eleves || formData.enseignants_ids.length === 0)}
disabled={(formData.levels.length === 0 || !formData.school_year || !formData.number_of_students || formData.teachers.length === 0)}
type="submit"
name="Create"
/>

24
Front-End/src/components/Structure/Configuration/ClassesSection.js
View File

@ -11,7 +11,7 @@ import { ClasseFormProvider } from '@/context/ClasseFormContext';
import { useClasses } from '@/context/ClassesContext';
const ClassesSection = ({ classes, specialities, teachers, handleCreate, handleEdit, handleDelete }) => {
const ClassesSection = ({ classes, teachers, handleCreate, handleEdit, handleDelete }) => {
const { getNiveauxLabels } = useClasses();
const [isOpen, setIsOpen] = useState(false);
@ -67,8 +67,8 @@ const ClassesSection = ({ classes, specialities, teachers, handleCreate, handleE
{
name: 'AMBIANCE',
transform: (row) => {
const ambiance = row.nom_ambiance ? row.nom_ambiance : '';
const trancheAge = row.tranche_age ? `${row.tranche_age} ans` : '';
const ambiance = row.atmosphere_name ? row.atmosphere_name : '';
const trancheAge = row.age_range ? `${row.age_range} ans` : '';
if (ambiance && trancheAge) {
return `${ambiance} (${trancheAge})`;
@ -84,11 +84,11 @@ const ClassesSection = ({ classes, specialities, teachers, handleCreate, handleE
{
name: 'NIVEAUX',
transform: (row) => {
const niveauxLabels = Array.isArray(row.niveaux) ? getNiveauxLabels(row.niveaux) : [];
const levelLabels = Array.isArray(row.levels) ? getNiveauxLabels(row.levels) : [];
return (
<div className="flex flex-wrap justify-center items-center space-x-2">
{niveauxLabels.length > 0
? niveauxLabels.map((label, index) => (
{levelLabels.length > 0
? levelLabels.map((label, index) => (
<LevelLabel key={index} label={label} index={index} />
))
: 'Aucun niveau'}
@ -96,19 +96,19 @@ const ClassesSection = ({ classes, specialities, teachers, handleCreate, handleE
);
}
},
{ name: 'CAPACITÉ MAX', transform: (row) => row.nombre_eleves },
{ name: 'ANNÉE SCOLAIRE', transform: (row) => row.annee_scolaire },
{ name: 'CAPACITÉ MAX', transform: (row) => row.number_of_students },
{ name: 'ANNÉE SCOLAIRE', transform: (row) => row.school_year },
{
name: 'ENSEIGNANTS',
transform: (row) => (
<div key={row.id} className="flex flex-wrap justify-center items-center space-x-2">
{row.enseignants.map((teacher, index) => (
<TeacherLabel key={teacher.id} nom={teacher.nom} prenom={teacher.prenom} index={index} />
{row.teachers_details.map((teacher, index) => (
<TeacherLabel key={teacher.id} nom={teacher.last_name} prenom={teacher.first_name} index={index} />
))}
</div>
)
},
{ name: 'DATE DE CREATION', transform: (row) => row.dateCreation_formattee },
{ name: 'DATE DE CREATION', transform: (row) => row.updated_date_formatted },
{
name: 'ACTIONS', transform: (row) => (
<DropdownMenu
@ -151,7 +151,7 @@ const ClassesSection = ({ classes, specialities, teachers, handleCreate, handleE
<Users className="w-8 h-8 mr-2" />
{editingClass ? (
<>
{editingClass.nom_ambiance} - {editingClass.tranche_age[0]} à {editingClass.tranche_age[1]} ans
{editingClass.nom_ambiance} - {editingClass.age_range[0]} à {editingClass.age_range[1]} ans
</>
) : ''}
</div>

8
Front-End/src/components/Structure/Configuration/PlanningConfiguration.js
View File

@ -15,7 +15,7 @@ const PlanningConfiguration = ({ formData, handleChange, handleTimeChange, handl
];
const isLabelAttenuated = (item) => {
return !formData.jours_ouverture.includes(parseInt(item.id));
return !formData.opening_days.includes(parseInt(item.id));
};
return (
@ -36,8 +36,8 @@ const PlanningConfiguration = ({ formData, handleChange, handleTimeChange, handl
{/* Plage horaire */}
<div className="w-1/2">
<TimeRange
startTime={formData.plage_horaire[0]}
endTime={formData.plage_horaire[1]}
startTime={formData.time_range[0]}
endTime={formData.time_range[1]}
onStartChange={(e) => handleTimeChange(e, 0)}
onEndChange={(e) => handleTimeChange(e, 1)}
/>
@ -47,7 +47,7 @@ const PlanningConfiguration = ({ formData, handleChange, handleTimeChange, handl
items={daysOfWeek}
formData={formData}
handleChange={handleJoursChange}
fieldName="jours_ouverture"
fieldName="opening_days"
horizontal={true}
labelAttenuated={isLabelAttenuated}
/>

8
Front-End/src/components/Structure/Configuration/SpecialitiesSection.js
View File

@ -52,14 +52,14 @@ const SpecialitiesSection = ({ specialities, handleCreate, handleEdit, handleDel
transform: (row) => (
<div
className="inline-block px-3 py-1 rounded-full font-bold text-white"
style={{ backgroundColor: row.codeCouleur }}
title={row.codeCouleur}
style={{ backgroundColor: row. color_code }}
title={row. color_code}
>
<span className="font-bold text-white">{row.nom.toUpperCase()}</span>
<span className="font-bold text-white">{row.name.toUpperCase()}</span>
</div>
)
},
{ name: 'DATE DE CREATION', transform: (row) => row.dateCreation_formattee },
{ name: 'DATE DE CREATION', transform: (row) => row.updated_date_formatted },
{ name: 'ACTIONS', transform: (row) => (
<DropdownMenu
buttonContent={<MoreVertical size={20} className="text-gray-400 hover:text-gray-600" />}

12
Front-End/src/components/Structure/Configuration/SpecialityForm.js
View File

@ -27,10 +27,10 @@ const SpecialityForm = ({ onSubmit, isNew }) => {
<div>
<InputTextIcon
type="text"
name="nom"
name="name"
IconItem={BookOpen}
placeholder="Nom de la spécialité"
value={formData.nom}
value={formData.name}
onChange={handleChange}
className="w-full mt-4"
/>
@ -38,10 +38,10 @@ const SpecialityForm = ({ onSubmit, isNew }) => {
<div className="mt-4">
<InputColorIcon
type="color"
name="codeCouleur"
name="color_code"
IconItem={Palette}
placeholder="Nom de la spécialité"
value={formData.codeCouleur}
value={formData.color_code}
onChange={handleChange}
className="w-full mt-4"
/>
@ -50,12 +50,12 @@ const SpecialityForm = ({ onSubmit, isNew }) => {
<Button text={`${isNew ? "Créer" : "Modifier"}`}
onClick={handleSubmit}
className={`px-4 py-2 rounded-md shadow-sm focus:outline-none ${
!formData.nom
!formData.name
? "bg-gray-300 text-gray-700 cursor-not-allowed"
: "bg-emerald-500 text-white hover:bg-emerald-600"
}`}
primary
disabled={!formData.nom}
disabled={!formData.name}
type="submit"
name="Create" />
</div>

1
Front-End/src/components/Structure/Configuration/StructureManagement.js
View File

@ -30,7 +30,6 @@ const StructureManagement = ({ specialities, setSpecialities, teachers, setTeach
<ClassesSection
classes={classes}
specialities={specialities}
teachers={teachers}
handleCreate={(newData) => handleCreate(`${BE_SCHOOL_SCHOOLCLASS_URL}`, newData, setClasses)}
handleEdit={(id, updatedData) => handleEdit(`${BE_SCHOOL_SCHOOLCLASS_URL}`, id, updatedData, setClasses)}

26
Front-End/src/components/Structure/Configuration/TeacherForm.js
View File

@ -10,7 +10,7 @@ const TeacherForm = ({ onSubmit, isNew, specialities }) => {
const { formData, setFormData } = useTeacherForm();
const handleToggleChange = () => {
setFormData({ ...formData, droit: 1-formData.droit });
setFormData({ ...formData, droit: 1-formData.droit.id });
};
const handleChange = (e) => {
@ -40,44 +40,44 @@ const TeacherForm = ({ onSubmit, isNew, specialities }) => {
};
const getSpecialityLabel = (speciality) => {
return `${speciality.nom}`;
return `${speciality.name}`;
};
const isLabelAttenuated = (item) => {
return !formData.specialites_ids.includes(parseInt(item.id));
return !formData.specialities.includes(parseInt(item.id));
};
return (
<form onSubmit={handleSubmit} className="space-y-4 mt-8">
<div>
<InputTextIcon
name="nom"
name="last_name"
type="text"
IconItem={GraduationCap}
placeholder="Nom de l'enseignant"
value={formData.nom}
value={formData.last_name}
onChange={handleChange}
className="w-full"
/>
</div>
<div>
<InputTextIcon
name="prenom"
name="first_name"
type="text"
IconItem={GraduationCap}
placeholder="Prénom de l'enseignant"
value={formData.prenom}
value={formData.first_name}
onChange={handleChange}
className="w-full"
/>
</div>
<div>
<InputTextIcon
name="mail"
name="email"
type="email"
IconItem={Mail}
placeholder="Email de l'enseignant"
value={formData.mail}
value={formData.email}
onChange={handleChange}
className="w-full mt-4"
/>
@ -87,7 +87,7 @@ const TeacherForm = ({ onSubmit, isNew, specialities }) => {
items={specialities}
formData={formData}
handleChange={handleChange}
fieldName="specialites_ids"
fieldName="specialities"
label="Spécialités"
icon={BookOpen}
className="w-full mt-4"
@ -98,7 +98,7 @@ const TeacherForm = ({ onSubmit, isNew, specialities }) => {
<div className='mt-4'>
<ToggleSwitch
label="Administrateur"
checked={formData.droit}
checked={formData.droit.id}
onChange={handleToggleChange}
/>
</div>
@ -106,12 +106,12 @@ const TeacherForm = ({ onSubmit, isNew, specialities }) => {
<Button text={`${isNew ? "Créer" : "Modifier"}`}
onClick={handleSubmit}
className={`px-4 py-2 rounded-md shadow-sm focus:outline-none ${
(!formData.nom || !formData.prenom || !formData.mail || formData.specialites_ids.length === 0)
(!formData.last_name || !formData.first_name || !formData.email || formData.specialities.length === 0)
? "bg-gray-300 text-gray-700 cursor-not-allowed"
: "bg-emerald-500 text-white hover:bg-emerald-600"
}`}
primary
disabled={(!formData.nom || !formData.prenom || !formData.mail || formData.specialites_ids.length === 0)}
disabled={(!formData.last_name || !formData.first_name || !formData.email || formData.specialities.length === 0)}
type="submit"
name="Create" />
</div>

39
Front-End/src/components/Structure/Configuration/TeachersSection.js
View File

@ -4,12 +4,11 @@ import Table from '@/components/Table';
import DropdownMenu from '@/components/DropdownMenu';
import Modal from '@/components/Modal';
import TeacherForm from '@/components/Structure/Configuration/TeacherForm';
import useCsrfToken from '@/hooks/useCsrfToken';
import { TeacherFormProvider } from '@/context/TeacherFormContext';
import { createProfile, updateProfile } from '@/app/lib/authAction';
const TeachersSection = ({ teachers, handleCreate, handleEdit, handleDelete, specialities }) => {
const TeachersSection = ({ teachers, specialities , handleCreate, handleEdit, handleDelete}) => {
const [isOpen, setIsOpen] = useState(false);
const [editingTeacher, setEditingTeacher] = useState(null);
@ -30,12 +29,12 @@ const TeachersSection = ({ teachers, handleCreate, handleEdit, handleDelete, spe
if (editingTeacher) {
// Modification du profil
const data = {
email: updatedData.mail,
username: updatedData.mail,
email: updatedData.email,
username: updatedData.email,
droit:updatedData.droit
}
updateProfile(updatedData.profilAssocie_id,data,csrfToken)
updateProfile(updatedData.associated_profile,data,csrfToken)
.then(response => {
console.log('Success:', response);
console.log('UpdateData:', updatedData);
@ -50,9 +49,9 @@ const TeachersSection = ({ teachers, handleCreate, handleEdit, handleDelete, spe
// Création d'un profil associé à l'adresse mail du responsable saisie
// Le profil est inactif
const data = {
email: updatedData.mail,
email: updatedData.email,
password: 'Provisoire01!',
username: updatedData.mail,
username: updatedData.email,
is_active: 1, // On rend le profil actif : on considère qu'au moment de la configuration de l'école un abonnement a été souscrit
droit:updatedData.droit
}
@ -62,7 +61,7 @@ const TeachersSection = ({ teachers, handleCreate, handleEdit, handleDelete, spe
console.log('UpdateData:', updatedData);
if (response.id) {
let idProfil = response.id;
updatedData.profilAssocie_id = idProfil;
updatedData.associated_profile = idProfil;
handleCreate(updatedData);
}
})
@ -92,21 +91,21 @@ const TeachersSection = ({ teachers, handleCreate, handleEdit, handleDelete, spe
<div className="bg-white rounded-lg border border-gray-200 max-w-8xl ml-0">
<Table
columns={[
{ name: 'NOM', transform: (row) => row.nom },
{ name: 'PRENOM', transform: (row) => row.prenom },
{ name: 'MAIL', transform: (row) => row.mail },
{ name: 'NOM', transform: (row) => row.last_name },
{ name: 'PRENOM', transform: (row) => row.first_name },
{ name: 'MAIL', transform: (row) => row.email },
{
name: 'SPÉCIALITÉS',
transform: (row) => (
<div key={row.id} className="flex flex-wrap justify-center items-center space-x-2">
{row.specialites.map(specialite => (
{row.specialities_details.map((speciality,index) => (
<span
key={specialite.id}
key={`${speciality.id}-${index}`}
className="px-3 py-1 rounded-full font-bold text-white"
style={{ backgroundColor: specialite.codeCouleur }}
title={specialite.nom}
style={{ backgroundColor: speciality.color_code }}
title={speciality.name}
>
{specialite.nom}
{speciality.name}
</span>
))}
</div>
@ -115,12 +114,12 @@ const TeachersSection = ({ teachers, handleCreate, handleEdit, handleDelete, spe
{
name: 'TYPE PROFIL',
transform: (row) => {
if (row.profilAssocie) {
const badgeClass = row.DroitLabel === 'ECOLE' ? 'bg-blue-100 text-blue-600' : 'bg-red-100 text-red-600';
if (row.associated_profile) {
const badgeClass = row.droit.label === 'ECOLE' ? 'bg-blue-100 text-blue-600' : 'bg-red-100 text-red-600';
return (
<div key={row.id} className="flex justify-center items-center space-x-2">
<span className={`px-3 py-1 rounded-full font-bold ${badgeClass}`}>
{row.DroitLabel}
{row.droit.label}
</span>
</div>
);
@ -129,7 +128,7 @@ const TeachersSection = ({ teachers, handleCreate, handleEdit, handleDelete, spe
}
}
},
{ name: 'DATE DE CREATION', transform: (row) => row.dateCreation_formattee },
{ name: 'DATE DE CREATION', transform: (row) => row.updated_date_formatted },
{ name: 'ACTIONS', transform: (row) => (
<DropdownMenu
buttonContent={<MoreVertical size={20} className="text-gray-400 hover:text-gray-600" />}

40
Front-End/src/components/Structure/Configuration/TeachersSelectionConfiguration.js
View File

@ -5,34 +5,34 @@ const TeachersSelectionConfiguration = ({ formData, teachers, handleTeacherSelec
return (
<div className="mt-4" style={{ maxHeight: '300px', overflowY: 'auto' }}>
<label className="mt-6 block text-2xl font-medium text-gray-700 mb-2">Enseignants</label>
<label className={`block text-sm font-medium mb-4`}>Sélection : <span className={`${formData.enseignants_ids.length !== 0 ? 'text-emerald-400' : 'text-red-300'}`}>{formData.enseignants_ids.length}</span></label>
<label className={`block text-sm font-medium mb-4`}>Sélection : <span className={`${formData.teachers.length !== 0 ? 'text-emerald-400' : 'text-red-300'}`}>{formData.teachers.length}</span></label>
<Table
columns={[
{
name: 'Nom',
transform: (row) => row.nom,
transform: (row) => row.last_name,
},
{
name: 'Prénom',
transform: (row) => row.prenom,
},
{
name: 'Spécialités',
transform: (row) => (
<div className="flex flex-wrap items-center">
{row.specialites.map(specialite => (
<span key={specialite.id} className="flex items-center mr-2 mb-1">
<div
className="w-4 h-4 rounded-full mr-2"
style={{ backgroundColor: specialite.codeCouleur }}
title={specialite.nom}
></div>
<span>{specialite.nom}</span>
</span>
))}
</div>
),
transform: (row) => row.first_name,
},
// {
// name: 'Spécialités',
// transform: (row) => (
// <div className="flex flex-wrap items-center">
// {row.specialites.map(specialite => (
// <span key={specialite.id} className="flex items-center mr-2 mb-1">
// <div
// className="w-4 h-4 rounded-full mr-2"
// style={{ backgroundColor: specialite.codeCouleur }}
// title={specialite.nom}
// ></div>
// <span>{specialite.nom}</span>
// </span>
// ))}
// </div>
// ),
// },
]}
data={teachers}
onRowClick={handleTeacherSelection}

4
Front-End/src/components/Structure/Planning/ClassesInformation.js
View File

@ -9,11 +9,11 @@ const ClassesInformation = ({ selectedClass, isPastYear }) => {
return (
<div className={`w-full p-6 shadow-lg rounded-full border relative ${isPastYear ? 'bg-gray-200 border-gray-600' : 'bg-emerald-200 border-emerald-500'}`}>
<div className={`border-b pb-4 ${isPastYear ? 'border-gray-600' : 'border-emerald-500'}`}>
<p className="text-gray-700 text-center"><strong>{selectedClass.tranche_age} ans</strong></p>
<p className="text-gray-700 text-center"><strong>{selectedClass.age_range} ans</strong></p>
</div>
<div className={`border-b pb-4 ${isPastYear ? 'border-gray-600' : 'border-emerald-500'}`}>
<div className="flex flex-wrap justify-center space-x-4">
{selectedClass.enseignants.map((teacher) => (
{selectedClass.teachers.map((teacher) => (
<div key={teacher.id} className="relative group mt-4">
<TeacherLabel nom={teacher.nom} prenom={teacher.prenom} />
<div className="absolute left-1/2 transform -translate-x-1/2 bottom-full mb-2 w-max px-4 py-2 text-white bg-gray-800 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300">

10
Front-End/src/components/Structure/Planning/ClassesList.js
View File

@ -7,13 +7,13 @@ const ClassesList = ({ classes, onClassSelect, selectedClassId }) => {
const currentSchoolYearStart = currentMonth >= 8 ? currentYear : currentYear - 1;
const handleClassClick = (classe) => {
console.log(`Classe sélectionnée: ${classe.nom_ambiance}, Année scolaire: ${classe.annee_scolaire}`);
console.log(`Classe sélectionnée: ${classe.nom_ambiance}, Année scolaire: ${classe.school_year}`);
onClassSelect(classe);
};
const categorizedClasses = classes.reduce((acc, classe) => {
const { annee_scolaire } = classe;
const [startYear] = annee_scolaire.split('-').map(Number);
const { school_year } = classe;
const [startYear] = school_year.split('-').map(Number);
const category = startYear >= currentSchoolYearStart ? 'Actives' : 'Anciennes';
if (!acc[category]) {
@ -45,7 +45,7 @@ const ClassesList = ({ classes, onClassSelect, selectedClassId }) => {
style={{ maxWidth: '400px' }}
>
<div className="flex-1 text-sm font-medium">{classe.nom_ambiance}</div>
<div className="flex-1 text-sm font-medium">{classe.annee_scolaire}</div>
<div className="flex-1 text-sm font-medium">{classe.school_year}</div>
</div>
))}
</div>
@ -63,7 +63,7 @@ const ClassesList = ({ classes, onClassSelect, selectedClassId }) => {
style={{ maxWidth: '400px' }}
>
<div className="flex-1 text-sm font-medium">{classe.nom_ambiance}</div>
<div className="flex-1 text-sm font-medium">{classe.annee_scolaire}</div>
<div className="flex-1 text-sm font-medium">{classe.school_year}</div>
</div>
))}
</div>

2
Front-End/src/components/Structure/Planning/PlanningClassView.js
View File

@ -79,7 +79,7 @@ const PlanningClassView = ({ schedule, onDrop, selectedLevel, handleUpdatePlanni
const renderTimeSlots = () => {
const timeSlots = [];
for (let hour = parseInt(formData.plage_horaire[0], 10); hour <= parseInt(formData.plage_horaire[1], 10); hour++) {
for (let hour = parseInt(formData.time_range[0], 10); hour <= parseInt(formData.time_range[1], 10); hour++) {
const hourString = hour.toString().padStart(2, '0');
timeSlots.push(

8
Front-End/src/components/Structure/Planning/ScheduleManagement.js
View File

@ -22,7 +22,7 @@ const ScheduleManagement = ({ handleUpdatePlanning, classes }) => {
const [schedule, setSchedule] = useState(null);
const { getNiveauxTabs } = useClasses();
const niveauxLabels = Array.isArray(selectedClass?.niveaux) ? getNiveauxTabs(selectedClass.niveaux) : [];
const niveauxLabels = Array.isArray(selectedClass?.levels) ? getNiveauxTabs(selectedClass.levels) : [];
const [isModalOpen, setIsModalOpen] = useState(false);
const handleOpenModal = () => setIsModalOpen(true);
@ -94,8 +94,8 @@ const ScheduleManagement = ({ handleUpdatePlanning, classes }) => {
};
const categorizedClasses = classes.reduce((acc, classe) => {
const { annee_scolaire } = classe;
const [startYear] = annee_scolaire.split('-').map(Number);
const { school_year } = classe;
const [startYear] = school_year.split('-').map(Number);
const category = startYear >= currentSchoolYearStart ? 'Actives' : 'Anciennes';
if (!acc[category]) {
@ -153,7 +153,7 @@ const ScheduleManagement = ({ handleUpdatePlanning, classes }) => {
Spécialités
</h2>
</div>
<SpecialitiesList teachers={selectedClass ? selectedClass.enseignants : []} />
<SpecialitiesList teachers={selectedClass ? selectedClass.teachers : []} />
</div>
</div>

10
Front-End/src/components/Structure/Planning/SpecialityEventModal.js
View File

@ -68,7 +68,7 @@ const SpecialityEventModal = ({ isOpen, onClose, selectedCell, existingEvent, ha
}
// Transformer eventData pour correspondre au format du planning
const selectedTeacherData = formData.enseignants.find(teacher => teacher.id === parseInt(eventData.teacherId, 10));
const selectedTeacherData = formData.teachers.find(teacher => teacher.id === parseInt(eventData.teacherId, 10));
const newCourse = {
color: '#FF0000', // Vous pouvez définir la couleur de manière dynamique si nécessaire
teachers: selectedTeacherData ? [`${selectedTeacherData.nom} ${selectedTeacherData.prenom}`] : [],
@ -121,10 +121,10 @@ const SpecialityEventModal = ({ isOpen, onClose, selectedCell, existingEvent, ha
};
const filteredTeachers = selectedSpeciality
? formData.enseignants.filter(teacher =>
teacher.specialites_ids.includes(parseInt(selectedSpeciality, 10))
? formData.teachers.filter(teacher =>
teacher.specialites.includes(parseInt(selectedSpeciality, 10))
)
: formData.enseignants;
: formData.teachers;
const handleSpecialityChange = (e) => {
const specialityId = e.target.value;
@ -164,7 +164,7 @@ const SpecialityEventModal = ({ isOpen, onClose, selectedCell, existingEvent, ha
selected={selectedSpeciality}
choices={[
{ value: '', label: 'Sélectionner une spécialité' },
...groupSpecialitiesBySubject(formData.enseignants).map((speciality) => ({
...groupSpecialitiesBySubject(formData.teachers).map((speciality) => ({
value: speciality.id,
label: speciality.nom
}))

2
Front-End/src/components/ToggleSwitch.js
View File

@ -20,7 +20,7 @@ const ToggleSwitch = ({ label, checked, onChange }) => {
id="toggle"
checked={checked}
onChange={handleChange}
className="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer border-emerald-500 checked:right-0 checked:border-emerald-500 checked:bg-emerald-500 hover:border-emerald-500 hover:bg-emerald-500 focus:outline-none focus:ring-0"
className="hover:text-emerald-500 absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer border-emerald-500 checked:right-0 checked:border-emerald-500 checked:bg-emerald-500 hover:border-emerald-500 hover:bg-emerald-500 focus:outline-none focus:ring-0"
ref={inputRef} // Reference to the input element
/>
<label

32
Front-End/src/context/ClasseFormContext.js
View File

@ -41,23 +41,23 @@ export const ClasseFormProvider = ({ children, initialClasse }) => {
const newFormData = {
nom_ambiance: initialClasse.nom_ambiance || '',
tranche_age: initialClasse.tranche_age || '',
nombre_eleves: initialClasse.nombre_eleves || '',
langue_enseignement: initialClasse.langue_enseignement || 'Français',
annee_scolaire: initialClasse.annee_scolaire || '',
enseignants: initialClasse.enseignants || [],
enseignants_ids: initialClasse.enseignants_ids || [],
age_range: initialClasse.age_range || '',
number_of_students: initialClasse.number_of_students || '',
teaching_language: initialClasse.teaching_language || 'Français',
school_year: initialClasse.school_year || '',
teachers: initialClasse.teachers || [],
teachers_details: initialClasse.teachers_details || [],
type: initialClasse.type || 1,
plage_horaire: initialClasse.plage_horaire || ['08:30', '17:30'],
jours_ouverture: initialClasse.jours_ouverture || [1, 2, 4, 5],
niveaux: initialClasse.niveaux || [],
plannings: plannings.length ? plannings.map(planning => ({
niveau: planning.planning.niveau,
emploiDuTemps: planning.planning.emploiDuTemps
})) : (initialClasse.niveaux || []).map(niveau => ({
niveau: niveau,
emploiDuTemps: generateEmploiDuTemps(initialClasse.type || 1)
}))
time_range: initialClasse.time_range || ['08:30', '17:30'],
opening_days: initialClasse.opening_days || [1, 2, 4, 5],
levels: initialClasse.levels || [],
// plannings: plannings.length ? plannings.map(planning => ({
// niveau: planning.planning.niveau,
// emploiDuTemps: planning.planning.emploiDuTemps
// })) : (initialClasse.levels || []).map(niveau => ({
// niveau: niveau,
// emploiDuTemps: generateEmploiDuTemps(initialClasse.type || 1)
// }))
};
setFormData(newFormData);

25
Front-End/src/context/ClassesContext.js
View File

@ -51,16 +51,16 @@ export const ClassesProvider = ({ children }) => {
7: 'dimanche'
};
const getNiveauxLabels = (niveaux) => {
return niveaux.map(niveauId => {
const getNiveauxLabels = (levels) => {
return levels.map(niveauId => {
const niveau = allNiveaux.find(n => n.id === niveauId);
return niveau ? niveau.name : niveauId;
});
};
const getNiveauxTabs = (niveaux) => {
// Trier les niveaux par id
const sortedNiveaux = niveaux.sort((a, b) => a - b);
const getNiveauxTabs = (levels) => {
// Trier les levels par id
const sortedNiveaux = levels.sort((a, b) => a - b);
// Mapper les labels correspondants
return sortedNiveaux.map(niveauId => {
@ -87,7 +87,7 @@ export const ClassesProvider = ({ children }) => {
const getAmbianceText = (classe) => {
const ambiance = classe.nom_ambiance ? classe.nom_ambiance : '';
const trancheAge = classe.tranche_age ? `${classe.tranche_age} ans` : '';
const trancheAge = classe.age_range ? `${classe.age_range} ans` : '';
if (ambiance && trancheAge) {
return `${ambiance} (${trancheAge})`;
@ -111,20 +111,17 @@ export const ClassesProvider = ({ children }) => {
};
const updatePlannings = (formData, existingPlannings) => {
return formData.niveaux.map(niveau => {
return formData.levels.map(niveau => {
let existingPlanning = existingPlannings.find(planning => planning.niveau === niveau);
const emploiDuTemps = formData.jours_ouverture.reduce((acc, dayId) => {
const emploiDuTemps = formData.opening_days.reduce((acc, dayId) => {
const dayName = selectedDays[dayId];
console.log('dayId:', dayId, 'dayName:', dayName); // Ajout de log pour vérifier les correspondances
if (dayName) {
acc[dayName] = existingPlanning?.emploiDuTemps?.[dayName] || [];
}
return acc;
}, {});
console.log('Emploi du Temps initialisé :', emploiDuTemps);
let updatedPlanning;
if (formData.type === 1) {
updatedPlanning = {
@ -170,8 +167,6 @@ export const ClassesProvider = ({ children }) => {
};
}
console.log('Updated Planning:', updatedPlanning);
// Fusionner les plannings existants avec les nouvelles données
return existingPlanning
? { ...existingPlanning, ...updatedPlanning }
@ -179,10 +174,10 @@ export const ClassesProvider = ({ children }) => {
});
};
const groupSpecialitiesBySubject = (enseignants) => {
const groupSpecialitiesBySubject = (teachers) => {
const groupedSpecialities = {};
enseignants.forEach(teacher => {
teachers.forEach(teacher => {
teacher.specialites.forEach(specialite => {
if (!groupedSpecialities[specialite.id]) {
groupedSpecialities[specialite.id] = {

4
Front-End/src/context/SpecialityFormContext.js
View File

@ -6,8 +6,8 @@ export const useSpecialityForm = () => useContext(SpecialityFormContext);
export const SpecialityFormProvider = ({ children, initialSpeciality }) => {
const [formData, setFormData] = useState(() => ({
nom: initialSpeciality.nom || '',
codeCouleur: initialSpeciality.codeCouleur || '#FFFFFF',
name: initialSpeciality.name || '',
color_code: initialSpeciality.color_code || '#FFFFFF',
}));
return (

16
Front-End/src/context/TeacherFormContext.js
View File

@ -6,14 +6,18 @@ export const useTeacherForm = () => useContext(TeacherFormContext);
export const TeacherFormProvider = ({ children, initialTeacher }) => {
const [formData, setFormData] = useState(() => ({
nom: initialTeacher.nom || '',
prenom: initialTeacher.prenom || '',
mail: initialTeacher.mail || '',
specialites_ids: initialTeacher.specialites_ids || [],
profilAssocie_id: initialTeacher.profilAssocie_id || '',
droit: initialTeacher.droit || 0
last_name: initialTeacher.last_name || '',
first_name: initialTeacher.first_name || '',
email: initialTeacher.email || '',
specialities: initialTeacher.specialities || [],
associated_profile: initialTeacher.associated_profile || '',
droit: {
label: initialTeacher.droit?.label || '',
id: initialTeacher.droit?.id || 0
}
}));
return (
<TeacherFormContext.Provider value={{ formData, setFormData }}>
{children}

3
package-lock.json generated
View File

@ -1,9 +1,12 @@
{
"name": "n3wt-school",
"version": "0.0.1",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "n3wt-school",
"version": "0.0.1",
"devDependencies": {
"@commitlint/cli": "^19.5.0",
"@commitlint/config-conventional": "^19.5.0",