|
|
@ -3,12 +3,12 @@ import { Link, Navigate } from 'react-router-dom' |
|
|
import classe from '../assets/AllStyleComponents.module.css' |
|
|
import classe from '../assets/AllStyleComponents.module.css' |
|
|
import classeHome from '../assets/Home.module.css' |
|
|
import classeHome from '../assets/Home.module.css' |
|
|
import Paper from '@mui/material/Paper' |
|
|
import Paper from '@mui/material/Paper' |
|
|
import { Button, InputAdornment } from '@mui/material' |
|
|
import { Button, InputAdornment, Box, Typography, Modal } from '@mui/material' |
|
|
import { PiStudentFill } from 'react-icons/pi' |
|
|
import { PiStudentFill } from 'react-icons/pi' |
|
|
import { DataGrid, GridToolbar } from '@mui/x-data-grid' |
|
|
import { DataGrid, GridToolbar } from '@mui/x-data-grid' |
|
|
import { frFR } from '@mui/x-data-grid/locales' |
|
|
import { frFR } from '@mui/x-data-grid/locales' |
|
|
import dayjs from 'dayjs' |
|
|
import dayjs from 'dayjs' |
|
|
import { FaCertificate, FaGraduationCap, FaPlus, FaReceipt, FaToolbox } from 'react-icons/fa' |
|
|
import { FaCertificate, FaGraduationCap, FaPlus, FaReceipt, FaToolbox, FaTrash } from 'react-icons/fa' |
|
|
import { createTheme, ThemeProvider } from '@mui/material/styles' |
|
|
import { createTheme, ThemeProvider } from '@mui/material/styles' |
|
|
import InputLabel from '@mui/material/InputLabel' |
|
|
import InputLabel from '@mui/material/InputLabel' |
|
|
import MenuItem from '@mui/material/MenuItem' |
|
|
import MenuItem from '@mui/material/MenuItem' |
|
|
@ -24,6 +24,8 @@ import ModalStage from './ModalStage' |
|
|
import ModalRecepice from './ModalRecepice' |
|
|
import ModalRecepice from './ModalRecepice' |
|
|
import { processPdf } from './function/PDFEditorV2' |
|
|
import { processPdf } from './function/PDFEditorV2' |
|
|
import { MdVerified } from 'react-icons/md' |
|
|
import { MdVerified } from 'react-icons/md' |
|
|
|
|
|
import warning from '../assets/warning.svg' |
|
|
|
|
|
import success from '../assets/success.svg' |
|
|
|
|
|
|
|
|
const Student = () => { |
|
|
const Student = () => { |
|
|
const theme = createTheme({ |
|
|
const theme = createTheme({ |
|
|
@ -80,6 +82,115 @@ const Student = () => { |
|
|
}) |
|
|
}) |
|
|
}, []) |
|
|
}, []) |
|
|
|
|
|
|
|
|
|
|
|
// État pour le modal de suppression |
|
|
|
|
|
const [openDeleteModal, setOpenDeleteModal] = useState(false) |
|
|
|
|
|
const [isDeleted, setIsDeleted] = useState(false) |
|
|
|
|
|
const [studentToDelete, setStudentToDelete] = useState(null) |
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
|
* Fonction pour ouvrir le modal de suppression |
|
|
|
|
|
*/ |
|
|
|
|
|
const handleOpenDeleteModal = (id) => { |
|
|
|
|
|
setStudentToDelete(id) |
|
|
|
|
|
setOpenDeleteModal(true) |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
|
* Fonction pour fermer le modal de suppression |
|
|
|
|
|
*/ |
|
|
|
|
|
const handleCloseDeleteModal = () => { |
|
|
|
|
|
setOpenDeleteModal(false) |
|
|
|
|
|
setIsDeleted(false) |
|
|
|
|
|
setStudentToDelete(null) |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
|
* Fonction de suppression de l'étudiant |
|
|
|
|
|
*/ |
|
|
|
|
|
const handleDelete = async () => { |
|
|
|
|
|
try { |
|
|
|
|
|
const response = await window.etudiants.deleteEtudiant(studentToDelete) |
|
|
|
|
|
if (response.success || response) { |
|
|
|
|
|
const updatedEtudiants = etudiants.filter((etudiant) => etudiant.id !== studentToDelete) |
|
|
|
|
|
setEtudiants(updatedEtudiants) |
|
|
|
|
|
setIsDeleted(true) |
|
|
|
|
|
} |
|
|
|
|
|
} catch (error) { |
|
|
|
|
|
console.error("Erreur lors de la suppression :", error) |
|
|
|
|
|
// Optionnel: gérer l'erreur avec un état d'erreur |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
|
* Modal de suppression |
|
|
|
|
|
*/ |
|
|
|
|
|
const deleteModal = () => ( |
|
|
|
|
|
<Modal |
|
|
|
|
|
open={openDeleteModal} |
|
|
|
|
|
onClose={handleCloseDeleteModal} |
|
|
|
|
|
aria-labelledby="modal-title" |
|
|
|
|
|
aria-describedby="modal-description" |
|
|
|
|
|
> |
|
|
|
|
|
<Box |
|
|
|
|
|
sx={{ |
|
|
|
|
|
position: 'absolute', |
|
|
|
|
|
top: '50%', |
|
|
|
|
|
left: '50%', |
|
|
|
|
|
transform: 'translate(-50%, -50%)', |
|
|
|
|
|
width: 450, |
|
|
|
|
|
bgcolor: 'background.paper', |
|
|
|
|
|
boxShadow: 24, |
|
|
|
|
|
p: 4 |
|
|
|
|
|
}} |
|
|
|
|
|
> |
|
|
|
|
|
{isDeleted ? ( |
|
|
|
|
|
<Typography |
|
|
|
|
|
style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }} |
|
|
|
|
|
> |
|
|
|
|
|
<img src={success} alt="" width={50} height={50} /> |
|
|
|
|
|
<span>Étudiant supprimé avec succès</span> |
|
|
|
|
|
</Typography> |
|
|
|
|
|
) : ( |
|
|
|
|
|
<Typography |
|
|
|
|
|
style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }} |
|
|
|
|
|
> |
|
|
|
|
|
<img src={warning} alt="" width={50} height={50} /> |
|
|
|
|
|
<span>Voulez-vous supprimer cet étudiant ?</span> |
|
|
|
|
|
</Typography> |
|
|
|
|
|
)} |
|
|
|
|
|
<Box |
|
|
|
|
|
sx={{ |
|
|
|
|
|
marginTop: '2%', |
|
|
|
|
|
display: 'flex', |
|
|
|
|
|
gap: '20px', |
|
|
|
|
|
alignItems: 'end', |
|
|
|
|
|
justifyContent: 'flex-end' |
|
|
|
|
|
}} |
|
|
|
|
|
> |
|
|
|
|
|
{isDeleted ? ( |
|
|
|
|
|
<Button onClick={handleCloseDeleteModal} color="warning" variant="contained"> |
|
|
|
|
|
OK |
|
|
|
|
|
</Button> |
|
|
|
|
|
) : ( |
|
|
|
|
|
<div> |
|
|
|
|
|
<Button |
|
|
|
|
|
onClick={handleDelete} |
|
|
|
|
|
sx={{ mr: 1 }} |
|
|
|
|
|
color="error" |
|
|
|
|
|
variant="contained" |
|
|
|
|
|
> |
|
|
|
|
|
Oui |
|
|
|
|
|
</Button> |
|
|
|
|
|
<Button onClick={handleCloseDeleteModal} color="warning" variant="contained"> |
|
|
|
|
|
Non |
|
|
|
|
|
</Button> |
|
|
|
|
|
</div> |
|
|
|
|
|
)} |
|
|
|
|
|
</Box> |
|
|
|
|
|
</Box> |
|
|
|
|
|
</Modal> |
|
|
|
|
|
) |
|
|
|
|
|
|
|
|
const SeeNote = ({ params }) => { |
|
|
const SeeNote = ({ params }) => { |
|
|
const matchingNote = notes.find( |
|
|
const matchingNote = notes.find( |
|
|
(element) => |
|
|
(element) => |
|
|
@ -171,7 +282,7 @@ const Student = () => { |
|
|
{ |
|
|
{ |
|
|
field: 'action', |
|
|
field: 'action', |
|
|
headerName: 'Action', |
|
|
headerName: 'Action', |
|
|
width: 300, |
|
|
width: 350, |
|
|
renderCell: (params) => ( |
|
|
renderCell: (params) => ( |
|
|
<div style={{ display: 'flex', gap: '10px' }}> |
|
|
<div style={{ display: 'flex', gap: '10px' }}> |
|
|
<Link to={`/single/${params.value}`}> |
|
|
<Link to={`/single/${params.value}`}> |
|
|
@ -189,6 +300,7 @@ const Student = () => { |
|
|
</Tooltip> |
|
|
</Tooltip> |
|
|
</Button> |
|
|
</Button> |
|
|
</Link> |
|
|
</Link> |
|
|
|
|
|
|
|
|
<Link to={`/tranche/${params.value}`} className={`verif${params.value}`}> |
|
|
<Link to={`/tranche/${params.value}`} className={`verif${params.value}`}> |
|
|
<Button color="warning" variant="contained"> |
|
|
<Button color="warning" variant="contained"> |
|
|
<MdVerified style={{ fontSize: '20px', color: 'white' }} /> |
|
|
<MdVerified style={{ fontSize: '20px', color: 'white' }} /> |
|
|
@ -286,6 +398,31 @@ const Student = () => { |
|
|
</Link> |
|
|
</Link> |
|
|
</Tooltip> |
|
|
</Tooltip> |
|
|
</Link> |
|
|
</Link> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<Button |
|
|
|
|
|
color="error" |
|
|
|
|
|
variant="contained" |
|
|
|
|
|
onClick={() => handleOpenDeleteModal(params.value)} |
|
|
|
|
|
className={`delete${params.value}`} |
|
|
|
|
|
sx={{ |
|
|
|
|
|
marginTop: '10px', |
|
|
|
|
|
minWidth: '30px', // largeur mini |
|
|
|
|
|
height: '30px', // hauteur |
|
|
|
|
|
padding: '4px', // espace interne |
|
|
|
|
|
}} |
|
|
|
|
|
> |
|
|
|
|
|
<FaTrash style={{ fontSize: '16px', color: 'white' }} /> |
|
|
|
|
|
<Tooltip |
|
|
|
|
|
anchorSelect={`.delete${params.value}`} |
|
|
|
|
|
className="custom-tooltip" |
|
|
|
|
|
place="top" |
|
|
|
|
|
> |
|
|
|
|
|
Supprimer |
|
|
|
|
|
</Tooltip> |
|
|
|
|
|
</Button> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
) |
|
|
) |
|
|
} |
|
|
} |
|
|
@ -449,6 +586,7 @@ const Student = () => { |
|
|
|
|
|
|
|
|
return ( |
|
|
return ( |
|
|
<div className={classe.mainHome}> |
|
|
<div className={classe.mainHome}> |
|
|
|
|
|
{deleteModal()} |
|
|
<style> |
|
|
<style> |
|
|
{` |
|
|
{` |
|
|
.custom-tooltip { |
|
|
.custom-tooltip { |
|
|
|
