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: SpecialitySection + TeacherSection (en cours)

Browse Source
This commit is contained in:
N3WT DE COMPET
2025-01-31 15:41:23 +01:00
parent a248898203
commit 72dd7699d6
6 changed files with 75 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,14 +1,14 @@
import React, { useState, useEffect } from 'react';
import { Plus, Edit3, Trash2, GraduationCap, Check, X } from 'lucide-react';
import { Plus, Edit3, Trash2, GraduationCap, Check, X, Hand } from 'lucide-react';
import Table from '@/components/Table';
import Popup from '@/components/Popup';
import InputTextIcon from '@/components/InputTextIcon';
import ToggleSwitch from '@/components/ToggleSwitch';
import { createProfile, updateProfile } from '@/app/lib/authAction';
import useCsrfToken from '@/hooks/useCsrfToken';
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';
const ItemTypes = {
SPECIALITY: 'speciality',
@ -17,6 +17,9 @@ const ItemTypes = {
const SpecialitiesDropZone = ({ teacher, handleSpecialitiesChange, specialities, isEditing }) => {
const [localSpecialities, setLocalSpecialities] = useState(teacher.specialities_details || []);
useEffect(() => {
}, [specialities]);
useEffect(() => {
setLocalSpecialities(teacher.specialities_details || []);
}, [teacher.specialities_details]);
@ -25,21 +28,29 @@ const SpecialitiesDropZone = ({ teacher, handleSpecialitiesChange, specialities,
handleSpecialitiesChange(localSpecialities.map(speciality => speciality.id));
}, [localSpecialities]);
const [{ isOver }, drop] = useDrop(() => ({
const [{ isOver, canDrop }, drop] = useDrop({
accept: ItemTypes.SPECIALITY,
drop: (item) => {
const specialityDetails = specialities.find(speciality => speciality.id === item.id);
if (!localSpecialities.some(speciality => speciality.id === item.id)) {
setLocalSpecialities(prevSpecialities => [
...prevSpecialities,
{ id: item.id, name: specialityDetails.name, color_code: specialityDetails.color_code }
]);
const exists = localSpecialities.some(speciality => speciality.id === item.id);
if (!exists) {
setLocalSpecialities(prevSpecialities => {
const updatedSpecialities = [
...prevSpecialities,
{ id: item.id, name: specialityDetails.name, color_code: specialityDetails.color_code }
];
return updatedSpecialities;
});
}
},
collect: (monitor) => ({
isOver: !!monitor.isOver(),
canDrop: !!monitor.canDrop(),
}),
}));
canDrop: () => {
return isEditing;
},
});
const handleRemoveSpeciality = (id) => {
setLocalSpecialities(prevSpecialities => {
@ -49,16 +60,19 @@ const SpecialitiesDropZone = ({ teacher, handleSpecialitiesChange, specialities,
};
return (
<div ref={drop} className="p-2 rounded-md flex flex-col items-center">
<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 une spécialité ici</span>
</div>
)}
{localSpecialities.map((speciality, index) => (
<div key={`${speciality.id}-${index}`} className="flex items-center space-x-2 mb-2">
<span
className="px-3 py-1 rounded-full font-bold text-white"
style={{ backgroundColor: speciality.color_code }}
title={speciality.name}
>
{speciality.name}
</span>
<SpecialityItem key={speciality.id} speciality={speciality} isDraggable={false}/>
{isEditing && (
<button
type="button"
@ -276,7 +290,11 @@ const TeachersSection = ({ teachers, setTeachers, specialities, handleCreate, ha
return teacher.email;
case 'SPECIALITES':
return (
<SpecialitiesDropZone teacher={teacher} handleSpecialitiesChange={handleSpecialitiesChange} specialities={specialities} isEditing={false} />
<div className="flex justify-center space-x-2 flex-wrap">
{teacher.specialities_details.map((speciality) => (
<SpecialityItem key={speciality.id} speciality={speciality} isDraggable={false} />
))}
</div>
);
case 'PROFIL':
if (teacher.associated_profile) {