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: 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

186
Front-End/src/components/Structure/Configuration/TeachersSection.js Normal file
View File

@ -0,0 +1,186 @@
import { GraduationCap, Trash2, MoreVertical, Edit3, Plus } from 'lucide-react';
import { useState } from 'react';
import Table from '@/components/Table';
import DropdownMenu from '@/components/DropdownMenu';
import Modal from '@/components/Modal';
import TeacherForm from '@/components/Structure/Configuration/TeacherForm';
import {BK_PROFILE_URL} from '@/utils/Url';
import useCsrfToken from '@/hooks/useCsrfToken';
import { TeacherFormProvider } from '@/context/TeacherFormContext';
const TeachersSection = ({ teachers, handleCreate, handleEdit, handleDelete, specialities }) => {
const [isOpen, setIsOpen] = useState(false);
const [editingTeacher, setEditingTeacher] = useState(null);
const csrfToken = useCsrfToken();
const openEditModal = (teacher) => {
setIsOpen(true);
setEditingTeacher(teacher);
}
const closeEditModal = () => {
setIsOpen(false);
setEditingTeacher(null);
};
const handleModalSubmit = (updatedData) => {
if (editingTeacher) {
// Modification du profil
const request = new Request(
`${BK_PROFILE_URL}/${updatedData.profilAssocie_id}`,
{
method:'PUT',
headers: {
'Content-Type':'application/json',
'X-CSRFToken': csrfToken
},
credentials: 'include',
body: JSON.stringify( {
email: updatedData.mail,
username: updatedData.mail,
droit:updatedData.droit
}),
}
);
fetch(request).then(response => response.json())
.then(response => {
console.log('Success:', response);
console.log('UpdateData:', updatedData);
handleEdit(editingTeacher.id, updatedData);
})
.catch(error => {
console.error('Error fetching data:', error);
error = error.errorMessage;
console.log(error);
});
} else {
// Création d'un profil associé à l'adresse mail du responsable saisie
// Le profil est inactif
const request = new Request(
`${BK_PROFILE_URL}`,
{
method:'POST',
headers: {
'Content-Type':'application/json',
'X-CSRFToken': csrfToken
},
credentials: 'include',
body: JSON.stringify( {
email: updatedData.mail,
password: 'Provisoire01!',
username: updatedData.mail,
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
}),
}
);
fetch(request).then(response => response.json())
.then(response => {
console.log('Success:', response);
console.log('UpdateData:', updatedData);
if (response.id) {
let idProfil = response.id;
updatedData.profilAssocie_id = idProfil;
handleCreate(updatedData);
}
})
.catch(error => {
console.error('Error fetching data:', error);
error = error.errorMessage;
console.log(error);
});
}
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">
<GraduationCap className="w-8 h-8 mr-2" />
Enseignants
</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: 'NOM', transform: (row) => row.nom },
{ name: 'PRENOM', transform: (row) => row.prenom },
{ name: 'MAIL', transform: (row) => row.mail },
{
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 => (
<span
key={specialite.id}
className="px-3 py-1 rounded-full font-bold text-white"
style={{ backgroundColor: specialite.codeCouleur }}
title={specialite.nom}
>
{specialite.nom}
</span>
))}
</div>
)
},
{
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';
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}
</span>
</div>
);
} else {
return <i>Non définie</i>;
}
}
},
{ 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: '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={teachers}
/>
</div>
{isOpen && (
<TeacherFormProvider initialTeacher={editingTeacher || {}}>
<Modal
isOpen={isOpen}
setIsOpen={setIsOpen}
title={editingTeacher ? "Modification de l'enseignant" : "Création d'un nouvel enseignant"}
size='sm:w-1/4'
ContentComponent={() => (
<TeacherForm teacher={editingTeacher || {}} onSubmit={handleModalSubmit} isNew={!editingTeacher} specialities={specialities} />
)}
/>
</TeacherFormProvider>
)}
</div>
);
};
export default TeachersSection;