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

refactor: Création de nouveaux composants / update formulaire de

Browse Source 
création de classe (#2)
This commit is contained in:
N3WT DE COMPET
2024-12-14 15:28:07 +01:00
parent cf144310a1
commit 7acae479da
43 changed files with 2374 additions and 441 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
Front-End/src/components/Structure/Configuration/ClassesSection.js Normal file
View File

@ -0,0 +1,179 @@
import { Users, Trash2, MoreVertical, Edit3, Plus, ZoomIn } from 'lucide-react';
import { useState } 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 { ClasseFormProvider } from '@/context/ClasseFormContext';
import { useClasses } from '@/context/ClassesContext';
const ClassesSection = ({ classes, specialities, teachers, handleCreate, handleEdit, handleDelete }) => {
const { getNiveauxLabels } = useClasses();
const [isOpen, setIsOpen] = useState(false);
const [isOpenDetails, setIsOpenDetails] = useState(false);
const [editingClass, setEditingClass] = useState(null);
const openEditModal = (classe) => {
setIsOpen(true);
setEditingClass(classe);
}
const openEditModalDetails = (classe) => {
setIsOpenDetails(true);
setEditingClass(classe);
}
const closeEditModal = () => {
setIsOpen(false);
setEditingClass(null);
};
const closeEditModalDetails = () => {
setIsOpenDetails(false);
setEditingClass(null);
};
const handleModalSubmit = (updatedData) => {
if (editingClass) {
handleEdit(editingClass.id, updatedData);
} else {
handleCreate(updatedData);
}
closeEditModal();
};
return (
<div className="mb-8">
<div className="flex justify-between items-center mb-4 max-w-8xl ml-0">
<h2 className="text-3xl text-gray-800 flex items-center">
<Users className="w-8 h-8 mr-2" />
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.nom_ambiance ? row.nom_ambiance : '';
const trancheAge = row.tranche_age ? `${row.tranche_age} 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 niveauxLabels = Array.isArray(row.niveaux) ? getNiveauxLabels(row.niveaux) : [];
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'}
</div>
);
}
},
{ name: 'CAPACITÉ MAX', transform: (row) => row.nombre_eleves },
{ name: 'ANNÉE SCOLAIRE', transform: (row) => row.annee_scolaire },
{
name: 'ENSEIGNANTS',
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>
))}
</div>
)
},
{ name: 'DATE DE CREATION', transform: (row) => row.dateCreation_formattee },
{
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.nom_ambiance} - {editingClass.tranche_age[0]} à {editingClass.tranche_age[1]} ans
</>
) : ''}
</div>
)}
ContentComponent={() => (
<ClasseDetails classe={editingClass} />
)}
/>
)}
</div>
);
};
export default ClassesSection;