acasini/n3wt-school
1
0
Fork 0
mirror of https://git.v0id.ovh/n3wt-innov/n3wt-school.git synced 2026-01-29 07:53:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: création d'une tooltip pour les informations supplémentaires de

Browse Source 
l'enseignant
This commit is contained in:
N3WT DE COMPET
2025-03-14 21:21:12 +01:00
parent 6bd5704983
commit 91976157e4
2 changed files with 68 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
Front-End/src/components/ProfileDirectory.js
View File

@ -1,9 +1,10 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Trash2, Eye, EyeOff, ToggleLeft, ToggleRight } from 'lucide-react'; import { Trash2, Eye, EyeOff, ToggleLeft, ToggleRight, Info } from 'lucide-react';
import Table from '@/components/Table'; import Table from '@/components/Table';
import Popup from '@/components/Popup'; import Popup from '@/components/Popup';
import StatusLabel from '@/components/StatusLabel'; import StatusLabel from '@/components/StatusLabel';
import SpecialityItem from '@/components/Structure/Configuration/SpecialityItem'; import SpecialityItem from '@/components/Structure/Configuration/SpecialityItem';
import Tooltip from '@/components/Tooltip';
const roleTypeToLabel = (roleType) => { const roleTypeToLabel = (roleType) => {
switch (roleType) { switch (roleType) {
@ -83,7 +84,12 @@ const ProfileDirectory = ({ profileRoles, handleActivateProfile, handleDeletePro
</span> </span>
) )
}, },
{ name: 'Utilisateur', transform: (row) => row.associated_person?.guardian_name }, { name: 'Utilisateur', transform: (row) => (
<div className="flex flex-col justify-center space-y-2">
{row.associated_person?.guardian_name}
</div>
)
},
{ name: 'Elève(s) associé(s)', transform: (row) => ( { name: 'Elève(s) associé(s)', transform: (row) => (
<div className="flex flex-col justify-center space-y-2"> <div className="flex flex-col justify-center space-y-2">
{row.associated_person?.students?.map(student => ( {row.associated_person?.students?.map(student => (
@ -133,8 +139,13 @@ const ProfileDirectory = ({ profileRoles, handleActivateProfile, handleDeletePro
</span> </span>
) )
}, },
{ name: 'Utilisateur', transform: (row) => row.associated_person?.teacher_name }, { name: 'Utilisateur', transform: (row) => (
{ name: 'Classe(s) associée(s)', transform: (row) => ( <div className="flex items-center justify-center space-x-2">
<span>{row.associated_person?.teacher_name}</span>
<Tooltip content={
<div>
<div className="mb-2">
<strong>Classes associées:</strong>
<div className="flex flex-wrap justify-center space-x-2"> <div className="flex flex-wrap justify-center space-x-2">
{row.associated_person?.classes?.map(classe => ( {row.associated_person?.classes?.map(classe => (
<span key={classe.id} className="px-2 py-1 rounded-full bg-gray-200 text-gray-800"> <span key={classe.id} className="px-2 py-1 rounded-full bg-gray-200 text-gray-800">
@ -142,14 +153,22 @@ const ProfileDirectory = ({ profileRoles, handleActivateProfile, handleDeletePro
</span> </span>
))} ))}
</div> </div>
) </div>
}, <div>
{ name: 'Spécialités', transform: (row) => ( <strong>Spécialités:</strong>
<div className="flex flex-wrap justify-center space-x-2"> <div className="flex flex-wrap justify-center space-x-2">
{row.associated_person?.specialities?.map(speciality => ( {row.associated_person?.specialities?.map(speciality => (
<SpecialityItem speciality={speciality} isDraggable={false}/> <SpecialityItem key={speciality.name} speciality={speciality} isDraggable={false} />
))} ))}
</div> </div>
</div>
</div>
}>
<button className="text-blue-500 hover:text-blue-700">
<Info className="w-5 h-5" />
</button>
</Tooltip>
</div>
) )
}, },
{ {
@ -176,7 +195,7 @@ const ProfileDirectory = ({ profileRoles, handleActivateProfile, handleDeletePro
]; ];
return ( return (
<div className="bg-white rounded-lg shadow-lg w-full p-6"> <div className="bg-white rounded-lg shadow-lg w-3/5 p-6">
<div className="space-y-8"> <div className="space-y-8">
<div className="max-h-128 overflow-y-auto border rounded p-4"> <div className="max-h-128 overflow-y-auto border rounded p-4">
{parentProfiles.length === 0 ? ( {parentProfiles.length === 0 ? (

30
Front-End/src/components/Tooltip.js Normal file
View File

@ -0,0 +1,30 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
const Tooltip = ({ content, children }) => {
const [visible, setVisible] = useState(false);
return (
<div className="relative inline-block">
<div
onMouseEnter={() => setVisible(true)}
onMouseLeave={() => setVisible(false)}
className="cursor-pointer"
>
{children}
</div>
{visible && (
<div className="absolute z-10 w-64 p-2 bg-white border border-gray-200 rounded shadow-lg">
{content}
</div>
)}
</div>
);
};
Tooltip.propTypes = {
content: PropTypes.node.isRequired,
children: PropTypes.node.isRequired,
};
export default Tooltip;