mirror of
https://git.v0id.ovh/n3wt-innov/n3wt-school.git
synced 2026-01-28 23:43:22 +00:00
refactor: Refactoring de la section ClassSection
This commit is contained in:
N3WT DE COMPET
84
Front-End/src/components/MultiSelect.js
Normal file
84
Front-End/src/components/MultiSelect.js
Normal file
@ -0,0 +1,84 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { Check, ChevronDown } from 'lucide-react';
|
||||
|
||||
const MultiSelect = ({ name, label, options, selectedOptions, onChange, errorMsg }) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const containerRef = useRef(null);
|
||||
|
||||
const handleSelect = (option) => {
|
||||
const isSelected = selectedOptions.some(selected => selected.id === option.id);
|
||||
let newSelectedOptions;
|
||||
if (isSelected) {
|
||||
newSelectedOptions = selectedOptions.filter(selected => selected.id !== option.id);
|
||||
} else {
|
||||
newSelectedOptions = [...selectedOptions, option];
|
||||
}
|
||||
onChange(newSelectedOptions);
|
||||
};
|
||||
|
||||
const handleClickOutside = (event) => {
|
||||
if (containerRef.current && !containerRef.current.contains(event.target)) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div ref={containerRef}>
|
||||
<label htmlFor={name} className="block text-sm font-medium text-gray-700">
|
||||
{label}
|
||||
</label>
|
||||
<div className="relative mt-1">
|
||||
<button
|
||||
type="button"
|
||||
className="w-full bg-white border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-pointer focus:outline-none sm:text-sm"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
>
|
||||
{selectedOptions.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-1 justify-center items-center">
|
||||
{selectedOptions.map(option => (
|
||||
<span key={option.id} className="bg-emerald-100 text-emerald-700 px-2 py-1 rounded-md text-sm">
|
||||
{option.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
'Sélectionnez les niveaux'
|
||||
)}
|
||||
<ChevronDown className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none h-full w-5" />
|
||||
</button>
|
||||
{isOpen && (
|
||||
<ul className="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
|
||||
{options.map(option => (
|
||||
<li
|
||||
key={option.id}
|
||||
className={`cursor-pointer select-none relative py-2 pl-3 pr-9 ${
|
||||
selectedOptions.some(selected => selected.id === option.id) ? 'text-white bg-emerald-600' : 'text-gray-900 hover:bg-emerald-100 hover:text-emerald-900'
|
||||
}`}
|
||||
onClick={() => handleSelect(option)}
|
||||
>
|
||||
<span className={`block truncate ${selectedOptions.some(selected => selected.id === option.id) ? 'font-semibold' : 'font-normal'}`}>
|
||||
{option.name}
|
||||
</span>
|
||||
{selectedOptions.some(selected => selected.id === option.id) && (
|
||||
<span className="absolute inset-y-0 right-0 flex items-center pr-4 text-white">
|
||||
<Check className="h-5 w-5" />
|
||||
</span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
{errorMsg && <p className="mt-2 text-sm text-red-600">{errorMsg}</p>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MultiSelect;
|
||||
@ -1,36 +1,34 @@
|
||||
export default function SelectChoice({ type, name, label,required, placeHolder, choices, callback, selected, errorMsg, IconItem, disabled = false }) {
|
||||
export default function SelectChoice({ type, name, label, required, placeHolder, choices, callback, selected, errorMsg, IconItem, disabled = false }) {
|
||||
return (
|
||||
<>
|
||||
<div className="mb-4">
|
||||
<label htmlFor={name} className="block text-sm font-medium text-gray-700">
|
||||
{label}
|
||||
{required && <span className="text-red-500 ml-1">*</span>}
|
||||
</label>
|
||||
<div className={`mt-1 flex items-center border border-gray-200 rounded-md ${errorMsg ? 'border-red-500' : ''} ${disabled ? '' : 'hover:border-gray-400 focus-within:border-gray-500'}`}>
|
||||
{IconItem &&
|
||||
<span className="inline-flex items-center px-3 text-gray-500 text-sm">
|
||||
{<IconItem />}
|
||||
</span>
|
||||
}
|
||||
<select
|
||||
className={`flex-1 px-3 py-2 block w-full sm:text-sm border-none focus:ring-0 outline-none rounded-md ${disabled ? 'bg-gray-100' : ''} ${selected === "" ? 'italic' : ''}`}
|
||||
type={type}
|
||||
id={name}
|
||||
name={name}
|
||||
value={selected}
|
||||
onChange={callback}
|
||||
disabled={disabled}
|
||||
>
|
||||
<option value="" className="italic">{placeHolder?.toLowerCase()}</option>
|
||||
{choices.map(({ value, label }, index) => (
|
||||
<option key={value} value={value}>
|
||||
{label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
{errorMsg && <p className="mt-2 text-sm text-red-600">{errorMsg}</p>}
|
||||
<label htmlFor={name} className="block text-sm font-medium text-gray-700">
|
||||
{label}
|
||||
{required && <span className="text-red-500 ml-1">*</span>}
|
||||
</label>
|
||||
<div className={`mt-1 flex items-center border border-gray-200 rounded-md ${errorMsg ? 'border-red-500' : ''} ${disabled ? '' : 'hover:border-gray-400 focus-within:border-gray-500'}`}>
|
||||
{IconItem &&
|
||||
<span className="inline-flex items-center px-3 text-gray-500 text-sm">
|
||||
{<IconItem />}
|
||||
</span>
|
||||
}
|
||||
<select
|
||||
className={`flex-1 px-3 py-2 block w-full sm:text-sm border-none focus:ring-0 outline-none rounded-md ${disabled ? 'bg-gray-100' : ''}`}
|
||||
type={type}
|
||||
id={name}
|
||||
name={name}
|
||||
value={selected}
|
||||
onChange={callback}
|
||||
disabled={disabled}
|
||||
>
|
||||
<option value="">{placeHolder?.toLowerCase()}</option>
|
||||
{choices.map(({ value, label }, index) => (
|
||||
<option key={value} value={value}>
|
||||
{label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
{errorMsg && <p className="mt-2 text-sm text-red-600">{errorMsg}</p>}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,253 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import InputTextIcon from '@/components/InputTextIcon';
|
||||
import Button from '@/components/Button';
|
||||
import SelectChoice from '@/components/SelectChoice';
|
||||
import CheckBoxList from '@/components/CheckBoxList';
|
||||
import PlanningConfiguration from '@/components/Structure/Configuration/PlanningConfiguration';
|
||||
import TeachersSelectionConfiguration from '@/components/Structure/Configuration/TeachersSelectionConfiguration';
|
||||
import { Users, Maximize2, Calendar, UserPlus } from 'lucide-react';
|
||||
import { useClasseForm } from '@/context/ClasseFormContext';
|
||||
import { useClasses } from '@/context/ClassesContext';
|
||||
|
||||
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.teachers);
|
||||
|
||||
const handleTeacherSelection = (teacher) => {
|
||||
setSelectedTeachers(prevState =>
|
||||
prevState.includes(teacher.id)
|
||||
? prevState.filter(id => id !== teacher.id)
|
||||
: [...prevState, teacher.id]
|
||||
);
|
||||
setFormData(prevState => ({
|
||||
...prevState,
|
||||
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.time_range];
|
||||
updatedTimes[index] = value;
|
||||
|
||||
const updatedFormData = {
|
||||
...prevState,
|
||||
time_range: updatedTimes,
|
||||
};
|
||||
|
||||
const existingPlannings = prevState.plannings || [];
|
||||
updatedFormData.plannings = updatePlannings(updatedFormData, existingPlannings);
|
||||
|
||||
return updatedFormData;
|
||||
});
|
||||
};
|
||||
|
||||
const handleJoursChange = (e) => {
|
||||
const { value, checked } = e.target;
|
||||
const dayId = parseInt(value, 10);
|
||||
|
||||
setFormData((prevState) => {
|
||||
const updatedJoursOuverture = checked
|
||||
? [...prevState.opening_days, dayId]
|
||||
: prevState.opening_days.filter((id) => id !== dayId);
|
||||
|
||||
const updatedFormData = {
|
||||
...prevState,
|
||||
opening_days: updatedJoursOuverture,
|
||||
};
|
||||
|
||||
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 => {
|
||||
|
||||
// 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 === 'age_range') {
|
||||
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,
|
||||
levels: 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);
|
||||
};
|
||||
|
||||
const [minAge, maxAge] = formData.age_range.length === 2 ? formData.age_range : [null, null];
|
||||
const selectedAgeGroup = generateAgeToNiveaux(minAge, maxAge);
|
||||
|
||||
return (
|
||||
<div className="h-[80vh] overflow-y-auto">
|
||||
<form onSubmit={handleSubmit} className="space-y-4 mt-8">
|
||||
|
||||
<div className="flex justify-between space-x-4">
|
||||
{/* Section Ambiance */}
|
||||
<div className="w-1/2 space-y-4">
|
||||
<label className="block text-lg font-medium text-gray-700">Ambiance <i>(optionnel)</i></label>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<InputTextIcon
|
||||
name="atmosphere_name"
|
||||
type="text"
|
||||
IconItem={Users}
|
||||
placeholder="Nom de l'ambiance"
|
||||
value={formData.atmosphere_name}
|
||||
onChange={handleChange}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<InputTextIcon
|
||||
name="age_range"
|
||||
type="text"
|
||||
IconItem={Maximize2}
|
||||
placeholder="Tranche d'âge (ex: 3-6)"
|
||||
value={formData.age_range}
|
||||
onChange={handleChange}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Section Niveau */}
|
||||
<div className="w-1/2 space-y-2">
|
||||
<label className="block text-lg font-medium text-gray-700">Niveaux</label>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<CheckBoxList
|
||||
items={niveauxPremierCycle}
|
||||
formData={formData}
|
||||
handleChange={handleChange}
|
||||
fieldName="levels"
|
||||
labelAttenuated={(item) => !selectedAgeGroup.includes(parseInt(item.id))}
|
||||
className="w-full"
|
||||
/>
|
||||
<CheckBoxList
|
||||
items={niveauxSecondCycle}
|
||||
formData={formData}
|
||||
handleChange={handleChange}
|
||||
fieldName="levels"
|
||||
labelAttenuated={(item) => !selectedAgeGroup.includes(parseInt(item.id))}
|
||||
className="w-full"
|
||||
/>
|
||||
<CheckBoxList
|
||||
items={niveauxTroisiemeCycle}
|
||||
formData={formData}
|
||||
handleChange={handleChange}
|
||||
fieldName="levels"
|
||||
labelAttenuated={(item) => !selectedAgeGroup.includes(parseInt(item.id))}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between space-x-4">
|
||||
{/* Section Capacité */}
|
||||
<div className="w-1/2 space-y-4">
|
||||
<label className="block text-lg font-medium text-gray-700">Capacité</label>
|
||||
<div className="space-y-4">
|
||||
<InputTextIcon
|
||||
name="number_of_students"
|
||||
type="number"
|
||||
IconItem={UserPlus}
|
||||
placeholder="Capacité max"
|
||||
value={formData.number_of_students}
|
||||
onChange={handleChange}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Année scolaire */}
|
||||
<div className="w-1/2 space-y-4">
|
||||
<label className="block text-lg font-medium text-gray-700">Année scolaire</label>
|
||||
<div className="space-y-4">
|
||||
<SelectChoice
|
||||
name="school_year"
|
||||
placeHolder="Sélectionner l'année scolaire"
|
||||
selected={formData.school_year}
|
||||
callback={handleChange}
|
||||
choices={schoolYears}
|
||||
IconItem={Calendar}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Section Enseignants */}
|
||||
<TeachersSelectionConfiguration formData={formData}
|
||||
teachers={teachers}
|
||||
handleTeacherSelection={handleTeacherSelection}
|
||||
selectedTeachers={selectedTeachers}
|
||||
/>
|
||||
|
||||
{/* Section Emploi du temps */}
|
||||
<PlanningConfiguration formData={formData}
|
||||
handleChange={handleChange}
|
||||
handleTimeChange={handleTimeChange}
|
||||
handleJoursChange={handleJoursChange}
|
||||
typeEmploiDuTemps={typeEmploiDuTemps}
|
||||
|
||||
/>
|
||||
|
||||
<div className="flex justify-end mt-4 space-x-4">
|
||||
<Button
|
||||
text={`${isNew ? "Créer" : "Modifier"}`}
|
||||
onClick={handleSubmit}
|
||||
className={`px-4 py-2 rounded-md shadow-sm focus:outline-none ${
|
||||
(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.levels.length === 0 || !formData.school_year || !formData.number_of_students || formData.teachers.length === 0)}
|
||||
type="submit"
|
||||
name="Create"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ClassForm;
|
||||
@ -1,165 +1,427 @@
|
||||
import { Trash2, MoreVertical, Edit3, Plus, ZoomIn } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import { Trash2, Edit3, Plus, ZoomIn, Users, Check, X, Hand } from 'lucide-react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import Table from '@/components/Table';
|
||||
import DropdownMenu from '@/components/DropdownMenu';
|
||||
import Modal from '@/components/Modal';
|
||||
import ClassForm from '@/components/Structure/Configuration/ClassForm';
|
||||
import ClasseDetails from '@/components/ClasseDetails';
|
||||
import Popup from '@/components/Popup';
|
||||
import InputText from '@/components/InputText';
|
||||
import SelectChoice from '@/components/SelectChoice';
|
||||
import TeacherItem from '@/components/Structure/Configuration/TeacherItem';
|
||||
import MultiSelect from '@/components/MultiSelect';
|
||||
import LevelLabel from '@/components/CustomLabels/LevelLabel';
|
||||
import TeacherLabel from '@/components/CustomLabels/TeacherLabel';
|
||||
import { ClasseFormProvider } from '@/context/ClasseFormContext';
|
||||
import { useClasses } from '@/context/ClassesContext';
|
||||
import { DndProvider, HTML5Backend, useDrop } from 'react-dnd';
|
||||
|
||||
const ItemTypes = {
|
||||
TEACHER: 'teacher',
|
||||
};
|
||||
|
||||
const ClassesSection = ({ classes, teachers, handleCreate, handleEdit, handleDelete }) => {
|
||||
const TeachersDropZone = ({ classe, handleTeachersChange, teachers, isEditing }) => {
|
||||
const [localTeachers, setLocalTeachers] = useState(classe.teachers_details || []);
|
||||
|
||||
const { getNiveauxLabels } = useClasses();
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [isOpenDetails, setIsOpenDetails] = useState(false);
|
||||
const [editingClass, setEditingClass] = useState(null);
|
||||
useEffect(() => {
|
||||
}, [teachers]);
|
||||
|
||||
const openEditModal = (classe) => {
|
||||
setIsOpen(true);
|
||||
setEditingClass(classe);
|
||||
}
|
||||
useEffect(() => {
|
||||
setLocalTeachers(classe.teachers_details || []);
|
||||
}, [classe.teachers_details]);
|
||||
|
||||
const openEditModalDetails = (classe) => {
|
||||
setIsOpenDetails(true);
|
||||
setEditingClass(classe);
|
||||
}
|
||||
useEffect(() => {
|
||||
handleTeachersChange(localTeachers.map(teacher => teacher.id));
|
||||
}, [localTeachers]);
|
||||
|
||||
const closeEditModal = () => {
|
||||
setIsOpen(false);
|
||||
setEditingClass(null);
|
||||
};
|
||||
const [{ isOver, canDrop }, drop] = useDrop({
|
||||
accept: ItemTypes.TEACHER,
|
||||
drop: (item) => {
|
||||
const teacherDetails = teachers.find(teacher => teacher.id === item.id);
|
||||
const exists = localTeachers.some(teacher => teacher.id === item.id);
|
||||
if (!exists) {
|
||||
setLocalTeachers(prevTeachers => {
|
||||
const updatedTeachers = [
|
||||
...prevTeachers,
|
||||
{ id: item.id, last_name: teacherDetails.last_name, first_name: teacherDetails.first_name }
|
||||
];
|
||||
return updatedTeachers;
|
||||
});
|
||||
}
|
||||
},
|
||||
collect: (monitor) => ({
|
||||
isOver: !!monitor.isOver(),
|
||||
canDrop: !!monitor.canDrop(),
|
||||
}),
|
||||
canDrop: () => {
|
||||
return isEditing;
|
||||
},
|
||||
});
|
||||
|
||||
const closeEditModalDetails = () => {
|
||||
setIsOpenDetails(false);
|
||||
setEditingClass(null);
|
||||
};
|
||||
|
||||
const handleModalSubmit = (updatedData) => {
|
||||
if (editingClass) {
|
||||
handleEdit(editingClass.id, updatedData);
|
||||
} else {
|
||||
handleCreate(updatedData);
|
||||
}
|
||||
closeEditModal();
|
||||
const handleRemoveTeacher = (id) => {
|
||||
setLocalTeachers(prevTeachers => {
|
||||
const updatedTeachers = prevTeachers.filter(teacher => teacher.id !== id);
|
||||
return updatedTeachers;
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mb-8">
|
||||
<div className="flex justify-between items-center mb-4 max-w-8xl ml-0">
|
||||
<h2 className="text-xl font-bold mb-4">Gestion des classes</h2>
|
||||
<button
|
||||
onClick={() => openEditModal(null)} // ouvrir le modal pour créer une nouvelle spécialité
|
||||
className="flex items-center bg-emerald-600 text-white p-2 rounded-full shadow hover:bg-emerald-900 transition duration-200"
|
||||
>
|
||||
<Plus className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg border border-gray-200 max-w-8xl ml-0">
|
||||
<Table
|
||||
columns={[
|
||||
{
|
||||
name: 'AMBIANCE',
|
||||
transform: (row) => {
|
||||
const ambiance = row.atmosphere_name ? row.atmosphere_name : '';
|
||||
const trancheAge = row.age_range ? `${row.age_range} ans` : '';
|
||||
|
||||
if (ambiance && trancheAge) {
|
||||
return `${ambiance} (${trancheAge})`;
|
||||
} else if (ambiance) {
|
||||
return ambiance;
|
||||
} else if (trancheAge) {
|
||||
return trancheAge;
|
||||
} else {
|
||||
return 'Non spécifié';
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'NIVEAUX',
|
||||
transform: (row) => {
|
||||
const levelLabels = Array.isArray(row.levels) ? getNiveauxLabels(row.levels) : [];
|
||||
return (
|
||||
<div className="flex flex-wrap justify-center items-center space-x-2">
|
||||
{levelLabels.length > 0
|
||||
? levelLabels.map((label, index) => (
|
||||
<LevelLabel key={index} label={label} index={index} />
|
||||
))
|
||||
: 'Aucun niveau'}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
{ 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.teachers_details.map((teacher, index) => (
|
||||
<TeacherLabel key={`${teacher.id}-${index}`} nom={teacher.last_name} prenom={teacher.first_name} index={index} />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{ 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" />}
|
||||
items={[
|
||||
{ label: 'Inspecter', icon: ZoomIn, onClick: () => openEditModalDetails(row) },
|
||||
{ label: 'Modifier', icon: Edit3, onClick: () => openEditModal(row) },
|
||||
{ label: 'Supprimer', icon: Trash2, onClick: () => handleDelete(row.id) }
|
||||
]
|
||||
}
|
||||
buttonClassName="text-gray-400 hover:text-gray-600"
|
||||
menuClassName="absolute right-0 mt-2 w-48 bg-white border border-gray-200 rounded-md shadow-lg z-10 flex flex-col items-center"
|
||||
/>
|
||||
)
|
||||
}
|
||||
]}
|
||||
data={classes}
|
||||
/>
|
||||
</div>
|
||||
{isOpen && (
|
||||
<ClasseFormProvider initialClasse={editingClass || {}}>
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
setIsOpen={setIsOpen}
|
||||
title={editingClass ? "Modification de la classe" : "Création d'une nouvelle classe"}
|
||||
size='sm:w-1/2'
|
||||
ContentComponent={() => (
|
||||
<ClassForm classe={editingClass || {}} onSubmit={handleModalSubmit} isNew={!editingClass} teachers={teachers} />
|
||||
)}
|
||||
/>
|
||||
</ClasseFormProvider>
|
||||
)}
|
||||
|
||||
{isOpenDetails && (
|
||||
<Modal
|
||||
isOpen={isOpenDetails}
|
||||
setIsOpen={setIsOpenDetails}
|
||||
title={(
|
||||
<div className="flex items-center">
|
||||
<Users className="w-8 h-8 mr-2" />
|
||||
{editingClass ? (
|
||||
<>
|
||||
{editingClass.atmosphere_name} - {editingClass.age_range[0]} à {editingClass.age_range[1]} ans
|
||||
</>
|
||||
) : ''}
|
||||
</div>
|
||||
)}
|
||||
ContentComponent={() => (
|
||||
<ClasseDetails classe={editingClass} />
|
||||
)}
|
||||
/>
|
||||
<div ref={drop} className={`p-2 rounded-md flex flex-col items-center ${isEditing ? 'border-2 border-dashed border-blue-500 bg-blue-50' : ''} ${
|
||||
isOver && canDrop ? 'border-2 border-solid border-blue-300' : ''
|
||||
}`}
|
||||
>
|
||||
{isEditing && (
|
||||
<div className="mb-2 text-blue-500 font-semibold flex items-center space-x-2">
|
||||
<Hand className="w-5 h-5" /> {/* Ajoutez l'icône Hand */}
|
||||
<span>Déposez un enseignant ici</span>
|
||||
</div>
|
||||
)}
|
||||
{localTeachers.map((teacher, index) => (
|
||||
<div key={`${teacher.id}-${index}`} className="flex items-center space-x-2 mb-2">
|
||||
<TeacherItem key={teacher.id} teacher={teacher} isDraggable={false}/>
|
||||
{isEditing && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRemoveTeacher(teacher.id)}
|
||||
className="text-red-500 hover:text-red-700"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ClassesSection;
|
||||
const ClassesSection = ({ classes, setClasses, teachers, handleCreate, handleEdit, handleDelete }) => {
|
||||
const [formData, setFormData] = useState({});
|
||||
const [editingClass, setEditingClass] = useState(null);
|
||||
const [newClass, setNewClass] = useState(null);
|
||||
const [localErrors, setLocalErrors] = useState({});
|
||||
const [popupVisible, setPopupVisible] = useState(false);
|
||||
const [popupMessage, setPopupMessage] = useState("");
|
||||
|
||||
const niveauxPremierCycle = [
|
||||
{ id: 1, name: 'TPS', age: 2 },
|
||||
{ id: 2, name: 'PS', age: 3 },
|
||||
{ id: 3, name: 'MS', age: 4 },
|
||||
{ id: 4, name: 'GS', age: 5 },
|
||||
];
|
||||
|
||||
const niveauxSecondCycle = [
|
||||
{ id: 5, name: 'CP', age: 6 },
|
||||
{ id: 6, name: 'CE1', age: 7 },
|
||||
{ id: 7, name: 'CE2', age: 8 },
|
||||
];
|
||||
|
||||
const niveauxTroisiemeCycle = [
|
||||
{ id: 8, name: 'CM1', age: 9 },
|
||||
{ id: 9, name: 'CM2', age: 10 },
|
||||
];
|
||||
|
||||
const allNiveaux = [...niveauxPremierCycle, ...niveauxSecondCycle, ...niveauxTroisiemeCycle];
|
||||
|
||||
const getNiveauxLabels = (levels) => {
|
||||
return levels.map(niveauId => {
|
||||
const niveau = allNiveaux.find(n => n.id === niveauId);
|
||||
return niveau ? niveau.name : niveauId;
|
||||
});
|
||||
};
|
||||
|
||||
// Fonction pour générer les années scolaires
|
||||
const getSchoolYearChoices = () => {
|
||||
const currentDate = new Date();
|
||||
const currentYear = currentDate.getFullYear();
|
||||
const currentMonth = currentDate.getMonth() + 1; // Les mois sont indexés à partir de 0
|
||||
|
||||
// Si nous sommes avant septembre, l'année scolaire en cours a commencé l'année précédente
|
||||
const startYear = currentMonth >= 9 ? currentYear : currentYear - 1;
|
||||
|
||||
const choices = [];
|
||||
for (let i = 0; i < 3; i++) {
|
||||
const year = startYear + i;
|
||||
choices.push({ value: `${year}-${year + 1}`, label: `${year}-${year + 1}` });
|
||||
}
|
||||
return choices;
|
||||
};
|
||||
|
||||
const handleAddClass = () => {
|
||||
setNewClass({ id: Date.now(), atmosphere_name: '', age_range: '', levels: [], number_of_students: '', school_year: '', teachers: [] });
|
||||
setFormData({ atmosphere_name: '', age_range: '', levels: [], number_of_students: '', school_year: '', teachers: [] });
|
||||
};
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
|
||||
if (editingClass) {
|
||||
setFormData((prevData) => ({
|
||||
...prevData,
|
||||
[name]: value,
|
||||
}));
|
||||
} else if (newClass) {
|
||||
setNewClass((prevData) => ({
|
||||
...prevData,
|
||||
[name]: value,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveNewClass = () => {
|
||||
if (newClass.atmosphere_name) {
|
||||
handleCreate(newClass)
|
||||
.then((createdClass) => {
|
||||
setClasses((prevClasses) => [createdClass, ...classes]);
|
||||
setNewClass(null);
|
||||
setLocalErrors({});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
} else {
|
||||
setPopupMessage("Tous les champs doivent être remplis et valides");
|
||||
setPopupVisible(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateClass = (id, updatedData) => {
|
||||
if (!updatedData.atmosphere_name) {
|
||||
setLocalErrors({ atmosphere_name: 'Le nom d\'ambiance est requis.' });
|
||||
return;
|
||||
}
|
||||
|
||||
handleEdit(id, updatedData)
|
||||
.then((updatedClass) => {
|
||||
setClasses((prevClasses) => prevClasses.map((classe) => (classe.id === id ? updatedClass : classe)));
|
||||
setEditingClass(null);
|
||||
setFormData({});
|
||||
setLocalErrors({});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
};
|
||||
|
||||
const handleTeachersChange = (selectedTeachers) => {
|
||||
if (editingClass) {
|
||||
setFormData((prevData) => ({
|
||||
...prevData,
|
||||
teachers: selectedTeachers,
|
||||
}));
|
||||
} else if (newClass) {
|
||||
setNewClass((prevData) => ({
|
||||
...prevData,
|
||||
teachers: selectedTeachers,
|
||||
}));
|
||||
setFormData((prevData) => ({
|
||||
...prevData,
|
||||
teachers: selectedTeachers,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const handleMultiSelectChange = (selectedOptions) => {
|
||||
const levels = selectedOptions.map(option => option.id);
|
||||
|
||||
if (editingClass) {
|
||||
setFormData((prevData) => ({
|
||||
...prevData,
|
||||
levels,
|
||||
}));
|
||||
} else if (newClass) {
|
||||
setNewClass((prevData) => ({
|
||||
...prevData,
|
||||
levels,
|
||||
}));
|
||||
setFormData((prevData) => ({
|
||||
...prevData,
|
||||
levels,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const renderClassCell = (classe, column) => {
|
||||
const isEditing = editingClass === classe.id;
|
||||
const isCreating = newClass && newClass.id === classe.id;
|
||||
const currentData = isEditing ? formData : newClass || {};
|
||||
|
||||
if (isEditing || isCreating) {
|
||||
switch (column) {
|
||||
case 'AMBIANCE':
|
||||
return (
|
||||
<InputText
|
||||
name="atmosphere_name"
|
||||
value={currentData.atmosphere_name}
|
||||
onChange={handleChange}
|
||||
placeholder="Nom d'ambiance"
|
||||
errorMsg={localErrors && localErrors.atmosphere_name && Array.isArray(localErrors.atmosphere_name) ? localErrors.atmosphere_name[0] : ''}
|
||||
/>
|
||||
);
|
||||
case 'TRANCHE D\'AGE':
|
||||
return (
|
||||
<InputText
|
||||
name="age_range"
|
||||
value={currentData.age_range}
|
||||
onChange={handleChange}
|
||||
placeholder="Tranche d'âge (ex: 3-6)"
|
||||
errorMsg={localErrors && localErrors.age_range && Array.isArray(localErrors.age_range) ? localErrors.age_range[0] : ''}
|
||||
/>
|
||||
)
|
||||
case 'NIVEAUX':
|
||||
return (
|
||||
<MultiSelect
|
||||
name="levels"
|
||||
options={allNiveaux}
|
||||
selectedOptions={currentData.levels ? currentData.levels.map(levelId => allNiveaux.find(level => level.id === levelId)) : []}
|
||||
onChange={handleMultiSelectChange}
|
||||
errorMsg={localErrors && localErrors.levels && Array.isArray(localErrors.levels) ? localErrors.levels[0] : ''}
|
||||
/>
|
||||
);
|
||||
case 'CAPACITE':
|
||||
return (
|
||||
<InputText
|
||||
name="number_of_students"
|
||||
type="number"
|
||||
value={currentData.number_of_students}
|
||||
onChange={handleChange}
|
||||
placeholder="Capacité"
|
||||
errorMsg={localErrors && localErrors.number_of_students && Array.isArray(localErrors.number_of_students) ? localErrors.number_of_students[0] : ''}
|
||||
/>
|
||||
)
|
||||
case 'ANNÉE SCOLAIRE' :
|
||||
return (
|
||||
<SelectChoice
|
||||
type="select"
|
||||
name="school_year"
|
||||
placeHolder="Sélectionnez une année scolaire"
|
||||
choices={getSchoolYearChoices()}
|
||||
callback={handleChange}
|
||||
selected={currentData.school_year || ''}
|
||||
errorMsg={localErrors && localErrors.school_year && Array.isArray(localErrors.school_year) ? localErrors.school_year[0] : ''}
|
||||
IconItem={null}
|
||||
disabled={false}
|
||||
/>
|
||||
)
|
||||
case 'ENSEIGNANTS':
|
||||
return (
|
||||
<TeachersDropZone classe={currentData} handleTeachersChange={handleTeachersChange} teachers={teachers} isEditing={isEditing || isCreating} />
|
||||
);
|
||||
case 'ACTIONS':
|
||||
return (
|
||||
<div className="flex justify-center space-x-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => (isEditing ? handleUpdateClass(editingClass, formData) : handleSaveNewClass())}
|
||||
className="text-green-500 hover:text-green-700"
|
||||
>
|
||||
<Check className="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => (isEditing ? setEditingClass(null) : setNewClass(null))}
|
||||
className="text-red-500 hover:text-red-700"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
} else {
|
||||
switch (column) {
|
||||
case 'AMBIANCE':
|
||||
return classe.atmosphere_name;
|
||||
case 'TRANCHE D\'AGE':
|
||||
return classe.age_range;
|
||||
case 'NIVEAUX':
|
||||
const levelLabels = Array.isArray(classe.levels) ? getNiveauxLabels(classe.levels) : [];
|
||||
return (
|
||||
<div className="flex flex-wrap justify-center items-center space-x-2">
|
||||
{levelLabels.length > 0
|
||||
? levelLabels.map((label, index) => (
|
||||
<LevelLabel key={index} label={label} index={index} />
|
||||
))
|
||||
: 'Aucun niveau'}
|
||||
</div>
|
||||
);
|
||||
case 'CAPACITE':
|
||||
return classe.number_of_students;
|
||||
case 'ANNÉE SCOLAIRE' :
|
||||
return classe.school_year;
|
||||
case 'ENSEIGNANTS':
|
||||
return (
|
||||
<div className="flex justify-center space-x-2 flex-wrap">
|
||||
{classe.teachers_details.map((teacher) => (
|
||||
<TeacherItem key={teacher.id} teacher={teacher} isDraggable={false} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
case 'MISE A JOUR':
|
||||
return classe.updated_date_formatted;
|
||||
case 'ACTIONS':
|
||||
return (
|
||||
<div className="flex justify-center space-x-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setEditingClass(classe.id) || setFormData(classe)}
|
||||
className="text-blue-500 hover:text-blue-700"
|
||||
>
|
||||
<Edit3 className="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleDelete(classe.id)}
|
||||
className="text-red-500 hover:text-red-700"
|
||||
>
|
||||
<Trash2 className="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openEditModalDetails(classe)}
|
||||
className="text-gray-500 hover:text-gray-700"
|
||||
>
|
||||
<ZoomIn className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{ name: 'AMBIANCE', label: 'Nom d\'ambiance' },
|
||||
{ name: 'TRANCHE D\'AGE', label: 'Tranche d\'âge' },
|
||||
{ name: 'NIVEAUX', label: 'Niveaux' },
|
||||
{ name: 'CAPACITE', label: 'Capacité max' },
|
||||
{ name: 'ANNÉE SCOLAIRE', label: 'Année scolaire' },
|
||||
{ name: 'ENSEIGNANTS', label: 'Enseignants' },
|
||||
{ name: 'MISE A JOUR', label: 'Date mise à jour' },
|
||||
{ name: 'ACTIONS', label: 'Actions' }
|
||||
];
|
||||
|
||||
return (
|
||||
<DndProvider backend={HTML5Backend}>
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center mb-4">
|
||||
<Users className="w-6 h-6 text-emerald-500 mr-2" />
|
||||
<h2 className="text-xl font-semibold">Classes</h2>
|
||||
</div>
|
||||
<button type="button" onClick={handleAddClass} className="text-emerald-500 hover:text-emerald-700">
|
||||
<Plus className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
<Table
|
||||
data={newClass ? [newClass, ...classes] : classes}
|
||||
columns={columns}
|
||||
renderCell={renderClassCell}
|
||||
/>
|
||||
<Popup
|
||||
visible={popupVisible}
|
||||
message={popupMessage}
|
||||
onConfirm={() => setPopupVisible(false)}
|
||||
onCancel={() => setPopupVisible(false)}
|
||||
uniqueConfirmButton={true}
|
||||
/>
|
||||
</div>
|
||||
</DndProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default ClassesSection;
|
||||
@ -5,6 +5,24 @@ const ItemTypes = {
|
||||
SPECIALITY: 'speciality',
|
||||
};
|
||||
|
||||
const lightenColor = (color, percent) => {
|
||||
const num = parseInt(color.slice(1), 16),
|
||||
amt = Math.round(2.55 * percent),
|
||||
R = (num >> 16) + amt,
|
||||
G = (num >> 8 & 0x00FF) + amt,
|
||||
B = (num & 0x0000FF) + amt;
|
||||
return `#${(0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 + (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 + (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1).toUpperCase()}`;
|
||||
};
|
||||
|
||||
const darkenColor = (color, percent) => {
|
||||
const num = parseInt(color.slice(1), 16),
|
||||
amt = Math.round(2.55 * percent),
|
||||
R = (num >> 16) - amt,
|
||||
G = (num >> 8 & 0x00FF) - amt,
|
||||
B = (num & 0x0000FF) - amt;
|
||||
return `#${(0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 + (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 + (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1).toUpperCase()}`;
|
||||
};
|
||||
|
||||
const SpecialityItem = ({ speciality, isDraggable = true }) => {
|
||||
const [{ isDragging }, drag] = useDrag(() => ({
|
||||
type: ItemTypes.SPECIALITY,
|
||||
@ -18,10 +36,15 @@ const SpecialityItem = ({ speciality, isDraggable = true }) => {
|
||||
return (
|
||||
<div
|
||||
ref={isDraggable ? drag : null}
|
||||
className={`inline-block px-3 py-1 rounded-lg font-bold text-white text-center ${isDraggable ? 'cursor-pointer' : ''} transition-transform duration-200 ease-in-out ${
|
||||
className={`inline-block px-3 py-1 rounded-lg font-bold text-white text-center transition-transform duration-200 ease-in-out ${
|
||||
isDragging ? 'opacity-30' : 'opacity-100'
|
||||
} ${isDraggable ? 'hover:shadow-lg hover:scale-125' : ''}`}
|
||||
style={{ backgroundColor: speciality.color_code }}
|
||||
} ${isDraggable ? 'cursor-grabbing hover:shadow-lg hover:scale-105' : ''}`}
|
||||
style={{
|
||||
backgroundColor: isDragging ? lightenColor(speciality.color_code, 30) : speciality.color_code,
|
||||
border: `1px solid ${darkenColor(speciality.color_code, 20)}`,
|
||||
color: 'white',
|
||||
boxShadow: isDraggable ? '0 2px 4px rgba(0, 0, 0, 0.1)' : 'none'
|
||||
}}
|
||||
>
|
||||
{speciality.name}
|
||||
</div>
|
||||
|
||||
@ -7,7 +7,7 @@ import { BE_SCHOOL_SPECIALITY_URL, BE_SCHOOL_TEACHER_URL, BE_SCHOOL_SCHOOLCLASS_
|
||||
|
||||
const StructureManagement = ({ specialities, setSpecialities, teachers, setTeachers, classes, setClasses, handleCreate, handleEdit, handleDelete }) => {
|
||||
return (
|
||||
<div className="max-w-8xl mx-auto p-4 mt-6 space-y-6">
|
||||
<div className="max-w-8xl mx-auto p-4 mt-6 space-y-8">
|
||||
<ClassesProvider>
|
||||
<div className="w-2/5 p-4 bg-white rounded-lg shadow-md">
|
||||
<SpecialitiesSection
|
||||
@ -28,9 +28,10 @@ const StructureManagement = ({ specialities, setSpecialities, teachers, setTeach
|
||||
handleDelete={(id) => handleDelete(`${BE_SCHOOL_TEACHER_URL}`, id, setTeachers)}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-4/5 p-4 bg-white rounded-lg shadow-md">
|
||||
<div className="w-full p-4 bg-white rounded-lg shadow-md">
|
||||
<ClassesSection
|
||||
classes={classes}
|
||||
setClasses={setClasses}
|
||||
teachers={teachers}
|
||||
handleCreate={(newData) => handleCreate(`${BE_SCHOOL_SCHOOLCLASS_URL}`, newData, setClasses)}
|
||||
handleEdit={(id, updatedData) => handleEdit(`${BE_SCHOOL_SCHOOLCLASS_URL}`, id, updatedData, setClasses)}
|
||||
|
||||
@ -0,0 +1,35 @@
|
||||
import { useDrag } from 'react-dnd';
|
||||
import React from 'react';
|
||||
|
||||
const ItemTypes = {
|
||||
TEACHER: 'teacher',
|
||||
};
|
||||
|
||||
const TeacherItem = ({ teacher, isDraggable = true }) => {
|
||||
const [{ isDragging }, drag] = useDrag(() => ({
|
||||
type: ItemTypes.TEACHER,
|
||||
item: { id: teacher.id, name: `${teacher.last_name} ${teacher.first_name}` },
|
||||
collect: (monitor) => ({
|
||||
isDragging: !!monitor.isDragging(),
|
||||
}),
|
||||
canDrag: () => isDraggable,
|
||||
}), [isDraggable]);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={isDraggable ? drag : null}
|
||||
className={`inline-block px-3 py-1 rounded-lg font-bold text-white text-center transition-transform duration-200 ease-in-out ${
|
||||
isDragging ? 'opacity-30' : 'opacity-100'
|
||||
} ${isDraggable ? 'cursor-grabbing hover:shadow-lg hover:scale-105' : ''}`}
|
||||
style={{
|
||||
backgroundColor: isDragging ? '#d1d5db' : isDraggable ? '#10b981' : '#a7f3d0', // Change background color based on dragging state and draggable state
|
||||
border: isDraggable ? '1px solid #10b981' : '1px solid #a7f3d0', // Add a border
|
||||
boxShadow: isDraggable ? '0 2px 4px rgba(0, 0, 0, 0.1)' : 'none' // Add a shadow if draggable
|
||||
}}
|
||||
>
|
||||
{teacher.last_name} {teacher.first_name}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TeacherItem;
|
||||
@ -9,6 +9,7 @@ import { DndProvider, useDrag, useDrop } from 'react-dnd';
|
||||
import { HTML5Backend } from 'react-dnd-html5-backend';
|
||||
import InputText from '@/components/InputText';
|
||||
import SpecialityItem from '@/components/Structure/Configuration/SpecialityItem';
|
||||
import TeacherItem from './TeacherItem';
|
||||
|
||||
const ItemTypes = {
|
||||
SPECIALITY: 'speciality',
|
||||
@ -149,11 +150,11 @@ const TeachersSection = ({ teachers, setTeachers, specialities, handleCreate, ha
|
||||
};
|
||||
|
||||
const handleUpdateTeacher = (id, updatedData) => {
|
||||
console.log('UpdatedData:', updatedData);
|
||||
console.log(updatedData)
|
||||
const data = {
|
||||
email: updatedData.email,
|
||||
username: updatedData.email,
|
||||
droit: updatedData.droit.id,
|
||||
droit: updatedData.droit,
|
||||
};
|
||||
updateProfile(updatedData.associated_profile, data, csrfToken)
|
||||
.then(response => {
|
||||
@ -171,9 +172,15 @@ const TeachersSection = ({ teachers, setTeachers, specialities, handleCreate, ha
|
||||
};
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
const { name, value, type, checked } = e.target;
|
||||
let parsedValue = value;
|
||||
|
||||
if (type === 'checkbox') {
|
||||
parsedValue = checked ? 1 : 0;
|
||||
}
|
||||
|
||||
console.log(`handleChange - name: ${name}, parsedValue: ${parsedValue}, type: ${type}, checked: ${checked}`);
|
||||
|
||||
if (editingTeacher) {
|
||||
setFormData((prevData) => ({
|
||||
...prevData,
|
||||
@ -216,25 +223,26 @@ const TeachersSection = ({ teachers, setTeachers, specialities, handleCreate, ha
|
||||
|
||||
if (isEditing || isCreating) {
|
||||
switch (column) {
|
||||
case 'NOM':
|
||||
case 'NOM - PRENOM':
|
||||
return (
|
||||
<InputText
|
||||
name="last_name"
|
||||
value={currentData.last_name}
|
||||
onChange={handleChange}
|
||||
placeholder="Nom de l'enseignant"
|
||||
errorMsg={localErrors && localErrors.last_name && Array.isArray(localErrors.last_name) ? localErrors.last_name[0] : ''}
|
||||
/>
|
||||
);
|
||||
case 'PRENOM':
|
||||
return (
|
||||
<InputText
|
||||
name="first_name"
|
||||
value={currentData.first_name}
|
||||
onChange={handleChange}
|
||||
placeholder="Prénom de l'enseignant"
|
||||
errorMsg={localErrors && localErrors.first_name && Array.isArray(localErrors.firstname) ? localErrors.firstname[0] : ''}
|
||||
/>
|
||||
<div className="flex justify-center space-x-2">
|
||||
<InputText
|
||||
name="last_name"
|
||||
label="nom"
|
||||
value={currentData.last_name}
|
||||
onChange={handleChange}
|
||||
placeholder="Nom de l'enseignant"
|
||||
errorMsg={localErrors && localErrors.last_name && Array.isArray(localErrors.last_name) ? localErrors.last_name[0] : ''}
|
||||
/>
|
||||
<InputText
|
||||
name="first_name"
|
||||
label="prénom"
|
||||
value={currentData.first_name}
|
||||
onChange={handleChange}
|
||||
placeholder="Prénom de l'enseignant"
|
||||
errorMsg={localErrors && localErrors.first_name && Array.isArray(localErrors.firstname) ? localErrors.firstname[0] : ''}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
case 'EMAIL':
|
||||
return (
|
||||
@ -250,14 +258,16 @@ const TeachersSection = ({ teachers, setTeachers, specialities, handleCreate, ha
|
||||
return (
|
||||
<SpecialitiesDropZone teacher={currentData} handleSpecialitiesChange={handleSpecialitiesChange} specialities={specialities} isEditing={isEditing || isCreating} />
|
||||
);
|
||||
// case 'PROFIL':
|
||||
// return (
|
||||
// <ToggleSwitch
|
||||
// name="profile"
|
||||
// checked={currentData.profile}
|
||||
// onChange={handleChange}
|
||||
// />
|
||||
// );
|
||||
case 'ADMINISTRATEUR':
|
||||
return (
|
||||
<div className="flex justify-center">
|
||||
<ToggleSwitch
|
||||
name="droit"
|
||||
checked={currentData.droit === 1}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
case 'ACTIONS':
|
||||
return (
|
||||
<div className="flex justify-center space-x-2">
|
||||
@ -282,10 +292,10 @@ const TeachersSection = ({ teachers, setTeachers, specialities, handleCreate, ha
|
||||
}
|
||||
} else {
|
||||
switch (column) {
|
||||
case 'NOM':
|
||||
return teacher.last_name;
|
||||
case 'PRENOM':
|
||||
return teacher.first_name;
|
||||
case 'NOM - PRENOM':
|
||||
return (
|
||||
<TeacherItem key={teacher.id} teacher={teacher} />
|
||||
);
|
||||
case 'EMAIL':
|
||||
return teacher.email;
|
||||
case 'SPECIALITES':
|
||||
@ -296,13 +306,14 @@ const TeachersSection = ({ teachers, setTeachers, specialities, handleCreate, ha
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
case 'PROFIL':
|
||||
case 'ADMINISTRATEUR':
|
||||
if (teacher.associated_profile) {
|
||||
const badgeClass = teacher.droit.label === 'ECOLE' ? 'bg-blue-100 text-blue-600' : 'bg-red-100 text-red-600';
|
||||
const badgeClass = teacher.droit === 1 ? 'bg-red-100 text-red-600' : 'bg-blue-100 text-blue-600';
|
||||
const label = teacher.droit === 1 ? 'OUI' : 'NON';
|
||||
return (
|
||||
<div key={teacher.id} className="flex justify-center items-center space-x-2">
|
||||
<span className={`px-3 py-1 rounded-full font-bold ${badgeClass}`}>
|
||||
{teacher.droit.label}
|
||||
{label}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
@ -337,11 +348,10 @@ const TeachersSection = ({ teachers, setTeachers, specialities, handleCreate, ha
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{ name: 'NOM', label: 'Nom' },
|
||||
{ name: 'PRENOM', label: 'Prénom' },
|
||||
{ name: 'NOM - PRENOM', label: 'Nom et prénom' },
|
||||
{ name: 'EMAIL', label: 'Email' },
|
||||
{ name: 'SPECIALITES', label: 'Spécialités' },
|
||||
{ name: 'PROFIL', label: 'Profil' },
|
||||
{ name: 'ADMINISTRATEUR', label: 'Profil' },
|
||||
{ name: 'MISE A JOUR', label: 'Mise à jour' },
|
||||
{ name: 'ACTIONS', label: 'Actions' }
|
||||
];
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { useRef } from 'react';
|
||||
|
||||
const ToggleSwitch = ({ label, checked, onChange }) => {
|
||||
const ToggleSwitch = ({ name, label, checked, onChange }) => {
|
||||
const inputRef = useRef(null);
|
||||
|
||||
const handleChange = (e) => {
|
||||
@ -16,15 +16,15 @@ const ToggleSwitch = ({ label, checked, onChange }) => {
|
||||
<div className="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="toggle"
|
||||
id="toggle"
|
||||
name={name}
|
||||
id={name}
|
||||
checked={checked}
|
||||
onChange={handleChange}
|
||||
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
|
||||
htmlFor="toggle"
|
||||
htmlFor={name}
|
||||
className={`toggle-label block overflow-hidden h-6 rounded-full cursor-pointer transition-colors duration-200 ${checked ? 'bg-emerald-300' : 'bg-gray-300'}`}
|
||||
></label>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user