mirror of
https://git.v0id.ovh/n3wt-innov/n3wt-school.git
synced 2026-01-28 23:43:22 +00:00
574 lines
20 KiB
JavaScript
574 lines
20 KiB
JavaScript
'use client';
|
|
import React, { useState, useEffect } from 'react';
|
|
import { useEstablishment } from '@/context/EstablishmentContext';
|
|
import { PARENT_FILTER, SCHOOL_FILTER } from '@/utils/constants';
|
|
import { Trash2, ToggleLeft, ToggleRight, Info, XCircle } from 'lucide-react';
|
|
import Table from '@/components/Table';
|
|
import Popup from '@/components/Popup';
|
|
import StatusLabel from '@/components/StatusLabel';
|
|
import SpecialityItem from '@/components/Structure/Configuration/SpecialityItem';
|
|
import SidebarTabs from '@/components/SidebarTabs';
|
|
import {
|
|
fetchProfileRoles,
|
|
updateProfileRoles,
|
|
deleteProfileRoles,
|
|
} from '@/app/actions/authAction';
|
|
import { dissociateGuardian } from '@/app/actions/subscriptionAction';
|
|
import { useCsrfToken } from '@/context/CsrfContext';
|
|
import DjangoCSRFToken from '@/components/DjangoCSRFToken';
|
|
import logger from '@/utils/logger';
|
|
import AlertMessage from '@/components/AlertMessage';
|
|
|
|
const roleTypeToLabel = (roleType) => {
|
|
switch (roleType) {
|
|
case 0:
|
|
return 'ECOLE';
|
|
case 1:
|
|
return 'ADMIN';
|
|
case 2:
|
|
return 'PARENT';
|
|
default:
|
|
return 'UNKNOWN';
|
|
}
|
|
};
|
|
|
|
const roleTypeToBadgeClass = (roleType) => {
|
|
switch (roleType) {
|
|
case 0:
|
|
return 'bg-blue-100 text-blue-600';
|
|
case 1:
|
|
return 'bg-red-100 text-red-600';
|
|
case 2:
|
|
return 'bg-green-100 text-green-600';
|
|
default:
|
|
return 'bg-gray-100 text-gray-600';
|
|
}
|
|
};
|
|
|
|
export default function Page() {
|
|
const [profileRolesDatasParent, setProfileRolesDatasParent] = useState([]);
|
|
const [profileRolesDatasSchool, setProfileRolesDatasSchool] = useState([]);
|
|
const [reloadFetch, setReloadFetch] = useState(false);
|
|
|
|
const [popupVisible, setPopupVisible] = useState(false);
|
|
const [popupMessage, setPopupMessage] = useState('');
|
|
const [confirmPopupVisible, setConfirmPopupVisible] = useState(false);
|
|
const [confirmPopupMessage, setConfirmPopupMessage] = useState('');
|
|
const [confirmPopupOnConfirm, setConfirmPopupOnConfirm] = useState(() => {});
|
|
const [visibleTooltipId, setVisibleTooltipId] = useState(null);
|
|
const [activeTab, setActiveTab] = useState('parent'); // Onglet actif
|
|
const [totalProfilesParentPages, setTotalProfilesParentPages] = useState(1);
|
|
const [totalProfilesSchoolPages, setTotalProfilesSchoolPages] = useState(1);
|
|
const [currentProfilesParentPage, setCurrentProfilesParentPage] = useState(1);
|
|
|
|
const [totalProfilesParent, setTotalProfilesParent] = useState(0);
|
|
const [totalProfilesSchool, setTotalProfilesSchool] = useState(0);
|
|
const [currentProfilesSchoolPage, setCurrentProfilesSchoolPage] = useState(1);
|
|
const [profileRolesParent, setProfileRolesParent] = useState([]);
|
|
const [profileRolesSchool, setProfileRolesSchool] = useState([]);
|
|
const itemsPerPage = 15; // Nombre d'éléments par page
|
|
|
|
const csrfToken = useCsrfToken();
|
|
|
|
const { selectedEstablishmentId } = useEstablishment();
|
|
|
|
const requestErrorHandler = (err) => {
|
|
logger.error('Error fetching data:', err);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (selectedEstablishmentId) {
|
|
// Fetch data for profileRolesParent
|
|
handleProfiles();
|
|
}
|
|
}, [
|
|
selectedEstablishmentId,
|
|
reloadFetch,
|
|
currentProfilesParentPage,
|
|
currentProfilesSchoolPage,
|
|
]);
|
|
|
|
const handleProfiles = () => {
|
|
fetchProfileRoles(
|
|
selectedEstablishmentId,
|
|
PARENT_FILTER,
|
|
currentProfilesParentPage,
|
|
itemsPerPage
|
|
)
|
|
.then((data) => {
|
|
setProfileRolesDatasParent(data);
|
|
})
|
|
.catch(requestErrorHandler);
|
|
|
|
fetchProfileRoles(
|
|
selectedEstablishmentId,
|
|
SCHOOL_FILTER,
|
|
currentProfilesSchoolPage,
|
|
itemsPerPage
|
|
)
|
|
.then((data) => {
|
|
setProfileRolesDatasSchool(data);
|
|
})
|
|
.catch(requestErrorHandler);
|
|
setReloadFetch(false);
|
|
};
|
|
|
|
const handleEdit = (profileRole) => {
|
|
const updatedData = { ...profileRole, is_active: !profileRole.is_active };
|
|
return updateProfileRoles(profileRole.id, updatedData, csrfToken)
|
|
.then((data) => {
|
|
setProfileRolesParent((prevState) =>
|
|
prevState.map((item) => (item.id === profileRole.id ? data : item))
|
|
);
|
|
return data;
|
|
})
|
|
.catch((error) => {
|
|
logger.error('Error editing data:', error);
|
|
throw error;
|
|
});
|
|
};
|
|
|
|
const handleDelete = (id) => {
|
|
return deleteProfileRoles(id, csrfToken)
|
|
.then(() => {
|
|
setProfileRolesParent((prevState) =>
|
|
prevState.filter((item) => item.id !== id)
|
|
);
|
|
logger.debug('Profile deleted successfully:', id);
|
|
})
|
|
.catch((error) => {
|
|
logger.error('Error deleting profile:', error);
|
|
throw error;
|
|
});
|
|
};
|
|
|
|
const handleDissociate = (studentId, guardianId) => {
|
|
return dissociateGuardian(studentId, guardianId)
|
|
.then((response) => {
|
|
logger.debug('Guardian dissociated successfully:', guardianId);
|
|
|
|
// Vérifier si le Guardian a été supprimé
|
|
const isGuardianDeleted = response?.isGuardianDeleted;
|
|
|
|
// Mettre à jour le modèle profileRolesParent
|
|
setProfileRolesParent(
|
|
(prevState) =>
|
|
prevState
|
|
.map((profileRole) => {
|
|
if (profileRole.associated_person?.id === guardianId) {
|
|
if (isGuardianDeleted) {
|
|
// Si le Guardian est supprimé, retirer le profileRole
|
|
return null;
|
|
} else {
|
|
// Si le Guardian n'est pas supprimé, mettre à jour les élèves associés
|
|
const updatedStudents =
|
|
profileRole.associated_person.students.filter(
|
|
(student) => student.id !== studentId
|
|
);
|
|
return {
|
|
...profileRole,
|
|
associated_person: {
|
|
...profileRole.associated_person,
|
|
students: updatedStudents, // Mettre à jour les élèves associés
|
|
},
|
|
};
|
|
}
|
|
}
|
|
return profileRole; // Conserver les autres profileRolesParent
|
|
})
|
|
.filter(Boolean) // Supprimer les entrées nulles
|
|
);
|
|
})
|
|
.catch((error) => {
|
|
logger.error('Error dissociating guardian:', error);
|
|
throw error;
|
|
});
|
|
};
|
|
|
|
const profilesRoleParentDataHandler = (data) => {
|
|
if (data) {
|
|
const { profilesRoles, count, page_size } = data;
|
|
if (profilesRoles) {
|
|
setProfileRolesParent(profilesRoles);
|
|
}
|
|
const calculatedTotalPages =
|
|
count === 0 ? count : Math.ceil(count / page_size);
|
|
setTotalProfilesParent(count);
|
|
setTotalProfilesParentPages(calculatedTotalPages);
|
|
}
|
|
};
|
|
|
|
const profilesRoleSchoolDataHandler = (data) => {
|
|
if (data) {
|
|
const { profilesRoles, count, page_size } = data;
|
|
if (profilesRoles) {
|
|
setProfileRolesSchool(profilesRoles);
|
|
}
|
|
const calculatedTotalPages =
|
|
count === 0 ? count : Math.ceil(count / page_size);
|
|
setTotalProfilesSchool(count);
|
|
setTotalProfilesSchoolPages(calculatedTotalPages);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
profilesRoleParentDataHandler(profileRolesDatasParent);
|
|
profilesRoleSchoolDataHandler(profileRolesDatasSchool);
|
|
|
|
if (activeTab === 'parent') {
|
|
setTotalProfilesParentPages(
|
|
Math.ceil(totalProfilesParent / itemsPerPage)
|
|
);
|
|
} else if (activeTab === 'school') {
|
|
setTotalProfilesSchoolPages(
|
|
Math.ceil(totalProfilesSchool / itemsPerPage)
|
|
);
|
|
}
|
|
}, [profileRolesDatasParent, profileRolesDatasSchool, activeTab]);
|
|
|
|
const handlePageChange = (newPage) => {
|
|
if (activeTab === 'parent') {
|
|
setCurrentProfilesParentPage(newPage);
|
|
} else if (activeTab === 'school') {
|
|
setCurrentProfilesSchoolPage(newPage);
|
|
}
|
|
};
|
|
|
|
const handleTooltipVisibility = (id) => {
|
|
setVisibleTooltipId(id); // Définir l'ID de la ligne pour laquelle la tooltip est visible
|
|
};
|
|
|
|
const handleTooltipHide = () => {
|
|
setVisibleTooltipId(null); // Cacher toutes les tooltips
|
|
};
|
|
|
|
const handleConfirmActivateProfile = (profileRole) => {
|
|
setConfirmPopupMessage(
|
|
`Êtes-vous sûr de vouloir ${profileRole.is_active ? 'désactiver' : 'activer'} ce profil ?`
|
|
);
|
|
setConfirmPopupOnConfirm(() => () => {
|
|
handleEdit(profileRole)
|
|
.then(() => {
|
|
setPopupMessage(
|
|
`Le profil a été ${profileRole.is_active ? 'désactivé' : 'activé'} avec succès.`
|
|
);
|
|
setPopupVisible(true);
|
|
})
|
|
.catch((error) => {
|
|
setPopupMessage(
|
|
`Erreur lors de la ${profileRole.is_active ? 'désactivation' : 'activation'} du profil.`
|
|
);
|
|
setPopupVisible(true);
|
|
});
|
|
setConfirmPopupVisible(false);
|
|
});
|
|
setConfirmPopupVisible(true);
|
|
};
|
|
|
|
const handleConfirmDeleteProfile = (id) => {
|
|
setConfirmPopupMessage('Êtes-vous sûr de vouloir supprimer ce profil ?');
|
|
setConfirmPopupOnConfirm(() => () => {
|
|
handleDelete(id)
|
|
.then(() => {
|
|
setPopupMessage('Le profil a été supprimé avec succès.');
|
|
setPopupVisible(true);
|
|
})
|
|
.catch((error) => {
|
|
setPopupMessage(error.message);
|
|
setPopupVisible(true);
|
|
});
|
|
setConfirmPopupVisible(false);
|
|
});
|
|
setConfirmPopupVisible(true);
|
|
};
|
|
|
|
const handleConfirmDissociateGuardian = (profileRole, student) => {
|
|
setVisibleTooltipId(null);
|
|
setConfirmPopupMessage(
|
|
`Vous êtes sur le point de dissocier le responsable ${profileRole.associated_person?.guardian_name} de l'élève ${student.student_name}. Êtes-vous sûr de vouloir poursuivre cette opération ?`
|
|
);
|
|
setConfirmPopupOnConfirm(() => () => {
|
|
handleDissociate(student.id, profileRole.associated_person?.id)
|
|
.then(() => {
|
|
setPopupMessage('Le responsable a été dissocié avec succès.');
|
|
setPopupVisible(true);
|
|
})
|
|
.catch((error) => {
|
|
setPopupMessage(error.message);
|
|
setPopupVisible(true);
|
|
});
|
|
setConfirmPopupVisible(false);
|
|
});
|
|
setConfirmPopupVisible(true);
|
|
};
|
|
|
|
const parentColumns = [
|
|
{ name: 'Identifiant', transform: (row) => row.associated_profile_email },
|
|
{ name: 'Mise à jour', transform: (row) => row.updated_date_formatted },
|
|
{
|
|
name: 'Rôle',
|
|
transform: (row) => (
|
|
<span
|
|
className={`px-2 py-1 rounded-full font-bold ${roleTypeToBadgeClass(row.role_type)}`}
|
|
>
|
|
{roleTypeToLabel(row.role_type)}
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
name: 'Utilisateur',
|
|
transform: (row) => (
|
|
<div className="flex items-center justify-center space-x-2 relative">
|
|
<span>{row.associated_person?.guardian_name}</span>
|
|
{row.associated_person && (
|
|
<div
|
|
className="relative group"
|
|
onMouseEnter={() => handleTooltipVisibility(row.id)} // Afficher la tooltip pour cette ligne
|
|
onMouseLeave={handleTooltipHide} // Cacher la tooltip
|
|
>
|
|
<button className="relative text-blue-500 hover:text-blue-700 flex items-center justify-center">
|
|
<div className="w-6 h-6 bg-blue-100 text-blue-700 rounded-full flex items-center justify-center font-bold">
|
|
{row.associated_person?.students?.length || 0}
|
|
</div>
|
|
</button>
|
|
{visibleTooltipId === row.id && ( // Afficher uniquement si l'ID correspond
|
|
<div className="fixed z-50 w-96 p-4 bg-white border border-gray-200 rounded shadow-lg -translate-x-1/2">
|
|
<div className="mb-2">
|
|
<strong>Elève(s) associé(s):</strong>
|
|
<div className="flex flex-col justify-center space-y-2 mt-4">
|
|
{row.associated_person?.students?.map((student) => (
|
|
<div
|
|
key={student.student_name}
|
|
className="flex justify-between items-center"
|
|
>
|
|
<span className="px-2 py-1 rounded-full text-gray-800 whitespace-nowrap inline-block min-w-0 max-w-fit">
|
|
{student.student_name}
|
|
</span>
|
|
<div className="flex items-center space-x-2">
|
|
<StatusLabel
|
|
status={student.registration_status}
|
|
showDropdown={false}
|
|
/>
|
|
<button
|
|
className="text-red-500 hover:text-red-700 flex items-center space-x-1"
|
|
onClick={() =>
|
|
handleConfirmDissociateGuardian(row, student)
|
|
}
|
|
>
|
|
<XCircle className="w-5 h-5" />
|
|
<span className="text-sm">Dissocier</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
name: 'Actions',
|
|
transform: (row) => (
|
|
<div className="flex justify-center space-x-2">
|
|
<button
|
|
type="button"
|
|
className={
|
|
row.is_active
|
|
? 'text-emerald-500 hover:text-emerald-700'
|
|
: 'text-orange-500 hover:text-orange-700'
|
|
}
|
|
onClick={() => handleConfirmActivateProfile(row)}
|
|
>
|
|
{row.is_active ? (
|
|
<ToggleRight className="w-5 h-5 " />
|
|
) : (
|
|
<ToggleLeft className="w-5 h-5" />
|
|
)}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="text-red-500 hover:text-red-700"
|
|
onClick={() => handleConfirmDeleteProfile(row.id)}
|
|
>
|
|
<Trash2 className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
),
|
|
},
|
|
];
|
|
|
|
const schoolAdminColumns = [
|
|
{ name: 'Identifiant', transform: (row) => row.associated_profile_email },
|
|
{ name: 'Mise à jour', transform: (row) => row.updated_date_formatted },
|
|
{
|
|
name: 'Rôle',
|
|
transform: (row) => (
|
|
<span
|
|
className={`px-2 py-1 rounded-full font-bold ${roleTypeToBadgeClass(row.role_type)}`}
|
|
>
|
|
{roleTypeToLabel(row.role_type)}
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
name: 'Utilisateur',
|
|
transform: (row) => (
|
|
<div className="flex items-center justify-center space-x-2 relative">
|
|
<span>{row.associated_person?.teacher_name}</span>
|
|
{row.associated_person && (
|
|
<div
|
|
className="relative group"
|
|
onMouseEnter={() => handleTooltipVisibility(row.id)} // Afficher la tooltip pour cette ligne
|
|
onMouseLeave={handleTooltipHide} // Cacher la tooltip
|
|
>
|
|
<button className="relative text-blue-500 hover:text-blue-700 flex items-center justify-center">
|
|
<div className="w-6 h-6 bg-blue-100 text-blue-700 rounded-full flex items-center justify-center font-bold">
|
|
<Info className="w-4 h-4" /> {/* Icône Info */}
|
|
</div>
|
|
</button>
|
|
{visibleTooltipId === row.id && ( // Afficher uniquement si l'ID correspond
|
|
<div className="fixed z-50 w-96 p-4 bg-white border border-gray-200 rounded shadow-lg -translate-x-1/2">
|
|
<div className="mb-2">
|
|
<strong>Classes associées:</strong>
|
|
<div className="flex flex-wrap justify-center space-x-2 mt-4">
|
|
{row.associated_person?.classes?.map((classe) => (
|
|
<span
|
|
key={classe.id}
|
|
className="px-2 py-1 rounded-full bg-gray-200 text-gray-800"
|
|
>
|
|
{classe.name}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<strong>Spécialités:</strong>
|
|
<div className="flex flex-wrap justify-center space-x-2 mt-4">
|
|
{row.associated_person?.specialities?.map(
|
|
(speciality) => (
|
|
<SpecialityItem
|
|
key={speciality.name}
|
|
speciality={speciality}
|
|
isDraggable={false}
|
|
/>
|
|
)
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
name: 'Actions',
|
|
transform: (row) => (
|
|
<div className="flex justify-center space-x-2">
|
|
<button
|
|
type="button"
|
|
className={
|
|
row.is_active
|
|
? 'text-emerald-500 hover:text-emerald-700'
|
|
: 'text-orange-500 hover:text-orange-700'
|
|
}
|
|
onClick={() => handleConfirmActivateProfile(row)}
|
|
>
|
|
{row.is_active ? (
|
|
<ToggleRight className="w-5 h-5 " />
|
|
) : (
|
|
<ToggleLeft className="w-5 h-5" />
|
|
)}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="text-red-500 hover:text-red-700"
|
|
onClick={() => handleConfirmDeleteProfile(row.id)}
|
|
>
|
|
<Trash2 className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<DjangoCSRFToken csrfToken={csrfToken} />
|
|
<SidebarTabs
|
|
tabs={[
|
|
{
|
|
id: 'parent',
|
|
label: 'Parents',
|
|
content: (
|
|
<div className="h-full overflow-y-auto p-4">
|
|
<Table
|
|
key={`parent-${currentProfilesParentPage}`}
|
|
data={profileRolesParent}
|
|
columns={parentColumns}
|
|
itemsPerPage={itemsPerPage}
|
|
currentPage={currentProfilesParentPage}
|
|
totalPages={totalProfilesParentPages}
|
|
onPageChange={handlePageChange}
|
|
emptyMessage={
|
|
<AlertMessage
|
|
type="info"
|
|
title="Aucun profil PARENT enregistré"
|
|
message="Un profil Parent est ajouté lors de la création d'un nouveau dossier d'inscription."
|
|
/>
|
|
}
|
|
/>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
id: 'school',
|
|
label: 'École',
|
|
content: (
|
|
<div className="h-full overflow-y-auto p-4">
|
|
<Table
|
|
key={`school-${currentProfilesSchoolPage}`}
|
|
data={profileRolesSchool}
|
|
columns={schoolAdminColumns}
|
|
itemsPerPage={itemsPerPage}
|
|
currentPage={currentProfilesSchoolPage}
|
|
totalPages={totalProfilesSchoolPages}
|
|
onPageChange={handlePageChange}
|
|
emptyMessage={
|
|
<AlertMessage
|
|
type="info"
|
|
title="Aucun profil ECOLE enregistré"
|
|
message="Un profil ECOLE est ajouté lors de la création d'un nouvel enseignant."
|
|
/>
|
|
}
|
|
/>
|
|
</div>
|
|
),
|
|
},
|
|
]}
|
|
onTabChange={(newActiveTab) => {
|
|
setActiveTab(newActiveTab);
|
|
}}
|
|
/>
|
|
{/* Popups */}
|
|
<Popup
|
|
visible={popupVisible}
|
|
message={popupMessage}
|
|
onConfirm={() => setPopupVisible(false)}
|
|
uniqueConfirmButton={true}
|
|
/>
|
|
<Popup
|
|
visible={confirmPopupVisible}
|
|
message={confirmPopupMessage}
|
|
onConfirm={confirmPopupOnConfirm}
|
|
onCancel={() => setConfirmPopupVisible(false)}
|
|
/>
|
|
</>
|
|
);
|
|
}
|