feat: Ajout d'une fonction de dissociation entre un responsable et un

élève
This commit is contained in:
N3WT DE COMPET
2025-03-20 20:28:12 +01:00
parent fb73f9e9a8
commit 3bcc620ee1
9 changed files with 148 additions and 40 deletions

View File

@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { Trash2, Eye, EyeOff, ToggleLeft, ToggleRight, Info } from 'lucide-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';
@ -32,7 +32,7 @@ const roleTypeToBadgeClass = (roleType) => {
}
};
const ProfileDirectory = ({ profileRoles, handleActivateProfile, handleDeleteProfile }) => {
const ProfileDirectory = ({ profileRoles, handleActivateProfile, handleDeleteProfile, handleDissociateGuardian }) => {
const parentProfiles = profileRoles.filter(profileRole => profileRole.role_type === 2);
const schoolAdminProfiles = profileRoles.filter(profileRole => profileRole.role_type !== 2);
@ -41,6 +41,15 @@ const ProfileDirectory = ({ profileRoles, handleActivateProfile, handleDeletePro
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 ?`);
@ -76,6 +85,26 @@ const ProfileDirectory = ({ profileRoles, handleActivateProfile, handleDeletePro
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: 'Rôle', transform: (row) => (
@ -84,31 +113,47 @@ const ProfileDirectory = ({ profileRoles, handleActivateProfile, handleDeletePro
</span>
)
},
{ name: 'Utilisateur', transform: (row) => (
<div className="flex items-center justify-center space-x-2">
{
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 && (
<Tooltip content={
<div>
<div className="mb-2">
<strong>Elève(s) associé(s):</strong>
<div className="flex flex-col justify-center space-y-2">
{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">
{student.student_name}
</span>
<StatusLabel status={student.registration_status} showDropdown={false} />
</div>
))}
</div>
</div>
</div>
}>
<div
className="relative group"
onMouseEnter={() => handleTooltipVisibility(row.id)} // Afficher la tooltip pour cette ligne
onMouseLeave={handleTooltipHide} // Cacher la tooltip
>
<button className="text-blue-500 hover:text-blue-700">
<Info className="w-5 h-5" />
</button>
</Tooltip>
{visibleTooltipId === row.id && ( // Afficher uniquement si l'ID correspond
<div className="absolute z-50 w-96 p-4 bg-white border border-gray-200 rounded shadow-lg left-0 -translate-x-1/2 top-full">
<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>
)