mirror of
https://git.v0id.ovh/n3wt-innov/n3wt-school.git
synced 2026-01-28 15:33:22 +00:00
361 lines
12 KiB
JavaScript
361 lines
12 KiB
JavaScript
import React, { useState } from 'react';
|
|
import {
|
|
Trash2,
|
|
Eye,
|
|
EyeOff,
|
|
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 Tooltip from '@/components/Tooltip';
|
|
|
|
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';
|
|
}
|
|
};
|
|
|
|
const ProfileDirectory = ({
|
|
profileRoles,
|
|
handleActivateProfile,
|
|
handleDeleteProfile,
|
|
handleDissociateGuardian,
|
|
}) => {
|
|
const parentProfiles = profileRoles.filter(
|
|
(profileRole) => profileRole.role_type === 2
|
|
);
|
|
const schoolAdminProfiles = profileRoles.filter(
|
|
(profileRole) => profileRole.role_type !== 2
|
|
);
|
|
|
|
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 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(() => () => {
|
|
handleActivateProfile(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(() => () => {
|
|
handleDeleteProfile(id)
|
|
.then(() => {
|
|
setPopupMessage('Le profil a été supprimé avec succès.');
|
|
setPopupVisible(true);
|
|
})
|
|
.catch((error) => {
|
|
setPopupMessage('Erreur lors de la suppression du profil.');
|
|
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(() => () => {
|
|
handleDissociateGuardian(student.id, profileRole.associated_person?.id)
|
|
.then(() => {
|
|
setPopupMessage('Le responsable a été dissocié avec succès.');
|
|
setPopupVisible(true);
|
|
})
|
|
.catch((error) => {
|
|
setPopupMessage('Erreur lors de la dissociation du responsable.');
|
|
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 (
|
|
<div className="bg-white rounded-lg shadow-lg w-3/5 p-6">
|
|
<div className="space-y-8">
|
|
<div className="max-h-128 overflow-y-auto border rounded p-4">
|
|
{parentProfiles.length === 0 ? (
|
|
<div>Aucun profil trouvé</div>
|
|
) : (
|
|
<Table data={parentProfiles} columns={parentColumns} />
|
|
)}
|
|
</div>
|
|
<div className="max-h-128 overflow-y-auto border rounded p-4">
|
|
{schoolAdminProfiles.length === 0 ? (
|
|
<div>Aucun profil trouvé</div>
|
|
) : (
|
|
<Table data={schoolAdminProfiles} columns={schoolAdminColumns} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
<Popup
|
|
visible={popupVisible}
|
|
message={popupMessage}
|
|
onConfirm={() => setPopupVisible(false)}
|
|
uniqueConfirmButton={true}
|
|
/>
|
|
<Popup
|
|
visible={confirmPopupVisible}
|
|
message={confirmPopupMessage}
|
|
onConfirm={confirmPopupOnConfirm}
|
|
onCancel={() => setConfirmPopupVisible(false)}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProfileDirectory;
|