mirror of
https://git.v0id.ovh/n3wt-innov/n3wt-school.git
synced 2026-01-29 16:03:21 +00:00
fix: pagination annuaire
This commit is contained in:
N3WT DE COMPET
@ -1,16 +1,74 @@
|
||||
'use client';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { fetchProfileRoles } from '@/app/actions/authAction';
|
||||
import logger from '@/utils/logger';
|
||||
import { useEstablishment } from '@/context/EstablishmentContext';
|
||||
import ProfileDirectory from '@/components/ProfileDirectory';
|
||||
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';
|
||||
|
||||
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) => {
|
||||
@ -22,16 +80,31 @@ export default function Page() {
|
||||
// Fetch data for profileRolesParent
|
||||
handleProfiles();
|
||||
}
|
||||
}, [selectedEstablishmentId, reloadFetch]);
|
||||
}, [
|
||||
selectedEstablishmentId,
|
||||
reloadFetch,
|
||||
currentProfilesParentPage,
|
||||
currentProfilesSchoolPage,
|
||||
]);
|
||||
|
||||
const handleProfiles = () => {
|
||||
fetchProfileRoles(selectedEstablishmentId, PARENT_FILTER)
|
||||
fetchProfileRoles(
|
||||
selectedEstablishmentId,
|
||||
PARENT_FILTER,
|
||||
currentProfilesParentPage,
|
||||
itemsPerPage
|
||||
)
|
||||
.then((data) => {
|
||||
setProfileRolesDatasParent(data);
|
||||
})
|
||||
.catch(requestErrorHandler);
|
||||
|
||||
fetchProfileRoles(selectedEstablishmentId, SCHOOL_FILTER)
|
||||
fetchProfileRoles(
|
||||
selectedEstablishmentId,
|
||||
SCHOOL_FILTER,
|
||||
currentProfilesSchoolPage,
|
||||
itemsPerPage
|
||||
)
|
||||
.then((data) => {
|
||||
setProfileRolesDatasSchool(data);
|
||||
})
|
||||
@ -39,12 +112,447 @@ export default function Page() {
|
||||
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 ? 1 : 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 ? 1 : 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 (
|
||||
<div className="w-full h-full">
|
||||
<ProfileDirectory
|
||||
parentProfiles={profileRolesDatasParent}
|
||||
schoolProfiles={profileRolesDatasSchool}
|
||||
<>
|
||||
<DjangoCSRFToken csrfToken={csrfToken} />
|
||||
<SidebarTabs
|
||||
tabs={[
|
||||
{
|
||||
id: 'parent',
|
||||
label: 'Parents',
|
||||
content: (
|
||||
<div className="h-full overflow-y-auto">
|
||||
<Table
|
||||
key={`parent-${currentProfilesParentPage}`}
|
||||
data={profileRolesParent}
|
||||
columns={parentColumns}
|
||||
itemsPerPage={itemsPerPage}
|
||||
currentPage={currentProfilesParentPage}
|
||||
totalPages={totalProfilesParentPages}
|
||||
onPageChange={handlePageChange}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 'school',
|
||||
label: 'École',
|
||||
content: (
|
||||
<div className="h-full overflow-y-auto">
|
||||
<Table
|
||||
key={`school-${currentProfilesSchoolPage}`}
|
||||
data={profileRolesSchool}
|
||||
columns={schoolAdminColumns}
|
||||
itemsPerPage={itemsPerPage}
|
||||
currentPage={currentProfilesSchoolPage}
|
||||
totalPages={totalProfilesSchoolPages}
|
||||
onPageChange={handlePageChange}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
]}
|
||||
onTabChange={(newActiveTab) => {
|
||||
setActiveTab(newActiveTab);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{/* Popups */}
|
||||
<Popup
|
||||
visible={popupVisible}
|
||||
message={popupMessage}
|
||||
onConfirm={() => setPopupVisible(false)}
|
||||
uniqueConfirmButton={true}
|
||||
/>
|
||||
<Popup
|
||||
visible={confirmPopupVisible}
|
||||
message={confirmPopupMessage}
|
||||
onConfirm={confirmPopupOnConfirm}
|
||||
onCancel={() => setConfirmPopupVisible(false)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -8,11 +8,9 @@ import { fetchClasse } from '@/app/actions/schoolAction';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import logger from '@/utils/logger';
|
||||
import { useClasses } from '@/context/ClassesContext';
|
||||
import { BASE_URL } from '@/utils/Url';
|
||||
import Button from '@/components/Button';
|
||||
import SelectChoice from '@/components/SelectChoice';
|
||||
import CheckBox from '@/components/CheckBox';
|
||||
import InputText from '@/components/InputText';
|
||||
import {
|
||||
fetchAbsences,
|
||||
createAbsences,
|
||||
|
||||
Reference in New Issue
Block a user