Compare commits
2 Commits
f1aefc3073
...
9e9bc98548
| Author | SHA1 | Date |
|---|---|---|
 Stephane
|
9e9bc98548 | 4 months ago |
 andrymodeste
|
bd0e34d9ad | 4 months ago |
134 changed files with 0 additions and 11569 deletions
|
Before Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 43 KiB |
@ -1,135 +0,0 @@ |
|||
import { app, shell, BrowserWindow, ipcMain } from 'electron' |
|||
import { join } from 'path' |
|||
import { electronApp, optimizer, is } from '@electron-toolkit/utils' |
|||
import icon from '../../resources/icon.png?asset' |
|||
const { loginUser, forgotPassword } = require('../../database/Models/Users') |
|||
|
|||
let splashWindow |
|||
let mainWindow |
|||
|
|||
// Create splash window
|
|||
function createSplashScreen() { |
|||
splashWindow = new BrowserWindow({ |
|||
width: 400, |
|||
height: 300, |
|||
frame: false, |
|||
alwaysOnTop: true, |
|||
transparent: true, |
|||
resizable: false, |
|||
webPreferences: { |
|||
nodeIntegration: true, |
|||
contextIsolation: false |
|||
} |
|||
}) |
|||
|
|||
splashWindow.loadFile(join(__dirname, '../renderer/splash.html')) |
|||
|
|||
splashWindow.on('closed', () => { |
|||
splashWindow = null |
|||
}) |
|||
} |
|||
|
|||
// Create main application window
|
|||
function createWindow() { |
|||
mainWindow = new BrowserWindow({ |
|||
width: 1000, |
|||
minWidth: 1000, |
|||
height: 670, |
|||
minHeight: 670, |
|||
show: false, |
|||
autoHideMenuBar: true, |
|||
fullscreen: true, |
|||
...(process.platform === 'linux' ? { icon } : {}), |
|||
webPreferences: { |
|||
preload: join(__dirname, '../preload/index.js'), |
|||
nodeIntegration: true, |
|||
contextIsolation: true, |
|||
sandbox: false |
|||
} |
|||
}) |
|||
|
|||
mainWindow.on('ready-to-show', () => { |
|||
if (splashWindow) { |
|||
splashWindow.close() // Close splash screen when main window is ready
|
|||
} |
|||
mainWindow.show() |
|||
}) |
|||
|
|||
mainWindow.webContents.setWindowOpenHandler((details) => { |
|||
shell.openExternal(details.url) |
|||
return { action: 'deny' } |
|||
}) |
|||
|
|||
// Load the initial content
|
|||
if (is.dev && process.env['ELECTRON_RENDERER_URL']) { |
|||
mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL']) |
|||
} else { |
|||
mainWindow.loadFile(join(__dirname, '../renderer/index.html')) |
|||
} |
|||
} |
|||
|
|||
// Function to load new content and show the splash screen
|
|||
function loadNewContent(contentPath) { |
|||
createSplashScreen() // Show splash screen before loading new content
|
|||
|
|||
mainWindow.loadFile(contentPath).then(() => { |
|||
if (splashWindow) { |
|||
splashWindow.close() // Close splash screen after loading content
|
|||
} |
|||
mainWindow.show() // Show main window
|
|||
}) |
|||
} |
|||
|
|||
// This method will be called when Electron has finished initialization
|
|||
app.whenReady().then(() => { |
|||
// Set app user model id for Windows
|
|||
electronApp.setAppUserModelId('com.electron') |
|||
|
|||
// Default open or close DevTools by F12 in development
|
|||
app.on('browser-window-created', (_, window) => { |
|||
optimizer.watchWindowShortcuts(window) |
|||
}) |
|||
|
|||
// Create initial main window
|
|||
createWindow() |
|||
|
|||
// IPC for loading new content
|
|||
ipcMain.on('load-content', (event, contentPath) => { |
|||
loadNewContent(contentPath) |
|||
}) |
|||
|
|||
app.on('activate', function () { |
|||
if (BrowserWindow.getAllWindows().length === 0) createWindow() |
|||
}) |
|||
}) |
|||
|
|||
// Quit when all windows are closed, except on macOS
|
|||
app.on('window-all-closed', () => { |
|||
if (process.platform !== 'darwin') { |
|||
app.quit() |
|||
} |
|||
}) |
|||
|
|||
// Event for handling login
|
|||
ipcMain.handle('login', async (event, credentials) => { |
|||
const { username, password } = credentials |
|||
|
|||
const users = await loginUser(username, password) |
|||
|
|||
if (users) { |
|||
return { success: true, user: users } |
|||
} else { |
|||
return { success: false } |
|||
} |
|||
}) |
|||
|
|||
// Event for handling forgot password
|
|||
ipcMain.handle('forgotPassword', async (event, credentials) => { |
|||
const { email, password, passwordConfirmation } = credentials |
|||
|
|||
const updated = await forgotPassword(email, password, passwordConfirmation) |
|||
|
|||
if (updated) { |
|||
return updated |
|||
} |
|||
}) |
|||
@ -1,18 +0,0 @@ |
|||
<!doctype html> |
|||
<html> |
|||
<head> |
|||
<meta charset="UTF-8" /> |
|||
<title>Université de Toamasina</title> |
|||
<link rel="shortcut icon" href="src/assets/logo.ico" type="image/x-icon" /> |
|||
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --> |
|||
<meta |
|||
http-equiv="Content-Security-Policy" |
|||
content="default-src 'self'; connect-src 'self' https://api.polytechnique.c4m.mg; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data:" |
|||
/> |
|||
</head> |
|||
|
|||
<body> |
|||
<div id="root"></div> |
|||
<script type="module" src="/src/main.jsx"></script> |
|||
</body> |
|||
</html> |
|||
@ -1,63 +0,0 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import { RouterProvider } from 'react-router-dom' |
|||
import Router from './Routes/Routes' |
|||
import { AuthContextProvider, useAuthContext } from './contexts/AuthContext' |
|||
import { ClipLoader } from 'react-spinners' // Import the loader |
|||
import preloader from './assets/preloader.jpg' |
|||
import { DataProvider } from './contexts/MoyenneDeClasseContext' |
|||
|
|||
const App = () => { |
|||
const [loading, setLoading] = useState(true) |
|||
const { setToken } = useAuthContext() |
|||
|
|||
// Simulate loading (e.g., fetching some initial data or assets) |
|||
useEffect(() => { |
|||
const timer = setTimeout(() => { |
|||
setLoading(false) // Set loading to false after the simulated loading time |
|||
}, 3000) // 3 seconds delay to simulate loading |
|||
|
|||
return () => clearTimeout(timer) // Cleanup the timer |
|||
}, []) |
|||
|
|||
// Show Preloader while loading, else show your content |
|||
if (loading) { |
|||
return ( |
|||
<div |
|||
className="preloader-container" |
|||
style={{ |
|||
display: 'flex', |
|||
justifyContent: 'center', |
|||
alignItems: 'center', |
|||
height: '100vh', |
|||
backgroundImage: `url("${preloader}")`, |
|||
backgroundSize: 'cover', |
|||
backgroundPosition: 'center', |
|||
minHeight: '100vh' |
|||
}} |
|||
> |
|||
<ClipLoader color="blue" loading={loading} size={50} /> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
/** |
|||
* condition usign with the Tray icon on the bottom |
|||
*/ |
|||
if (window.Tray && typeof window.Tray.onNavigate === 'function') { |
|||
window.Tray.onNavigate((route) => { |
|||
if (route) { |
|||
window.location.hash = route // Navigate by updating the hash |
|||
} |
|||
}) |
|||
} |
|||
|
|||
return ( |
|||
<AuthContextProvider> |
|||
<DataProvider> |
|||
<RouterProvider router={Router} /> |
|||
</DataProvider> |
|||
</AuthContextProvider> |
|||
) |
|||
} |
|||
|
|||
export default App |
|||
@ -1,207 +0,0 @@ |
|||
import { createHashRouter } from 'react-router-dom' |
|||
import DefaultLayout from '../layouts/DefaultLayout' |
|||
import Login from '../components/Login' |
|||
import LoginLayout from '../layouts/LoginLayout' |
|||
import NotFound from '../components/NotFound' |
|||
import ForgotPassword from '../components/ForgotPassword' |
|||
import Home from '../components/Home' |
|||
import Student from '../components/Student' |
|||
import Notes from '../components/Notes' |
|||
import AddStudent from '../components/AddStudent' |
|||
import SingleEtudiant from '../components/SingleEtudiant' |
|||
import AddNotes from '../components/AddNotes' |
|||
import Apropos from '../components/Apropos' |
|||
import Niveau from '../components/Niveau' |
|||
import AddNiveau from '../components/AddNiveau' |
|||
import Admin from '../components/Addadmin' |
|||
import Setting from '../components/Param' |
|||
import SingleNotes from '../components/SingleNotes' |
|||
import ExportEtudiants from '../components/ExportEtudiants' |
|||
import SingleNiveau from '../components/singleNiveau' |
|||
import Matieres from '../components/Matieres' |
|||
import AddMatiere from '../components/AddMatiere' |
|||
import ImportMatiere from '../components/ImportMatiere' |
|||
import SingleMatiere from '../components/SingleMatiere' |
|||
import ImportNiveau from '../components/ImportNiveau' |
|||
import SystemeNote from '../components/SystemeNote' |
|||
import AnneeScolaire from '../components/AnneeScolaire' |
|||
import AddAnneeScolaire from '../components/AddAnneeScolaire' |
|||
import Noteclasse from '../components/Noteclasse' |
|||
import TesteDatagrid from '../components/TesteDatagrid' |
|||
import Manuel from '../components/Manuel' |
|||
import Mentions from '../components/Mentions' |
|||
import AddMention from '../components/AddMention' |
|||
import SinleMention from '../components/SinleMention' |
|||
import AssignMatiereToMention from '../components/AssignMatiereToMention' |
|||
import AssingMatiereToSemestre from '../components/AssingMatiereToSemestre' |
|||
import SingleAnneeScolaire from '../components/SingleAnneeScolaire' |
|||
import Parcours from '../components/Parcours' |
|||
import ModalExportFichr from '../components/ModalExportFichr' |
|||
import Resultat from '../components/Resultat' |
|||
import TrancheEcolage from '../components/TrancheEcolage' |
|||
|
|||
// Use createHashRouter instead of createBrowserRouter because the desktop app is in local machine |
|||
const Router = createHashRouter([ |
|||
{ |
|||
path: '/', |
|||
element: <DefaultLayout />, |
|||
children: [ |
|||
{ |
|||
path: '/', // This will now be accessed as #/ |
|||
element: <Home /> |
|||
}, |
|||
{ |
|||
path: '/student', |
|||
element: <Student /> |
|||
}, |
|||
{ |
|||
path: '/notes', |
|||
element: <Notes /> |
|||
}, |
|||
{ |
|||
path: '/addstudent', |
|||
element: <AddStudent /> |
|||
}, |
|||
{ |
|||
path: '/single/:id', |
|||
element: <SingleEtudiant /> |
|||
}, |
|||
{ |
|||
path: '/addnotes/:id/:niveau/:mention_id/:parcours', |
|||
element: <AddNotes /> |
|||
}, |
|||
{ |
|||
path: '/anneescolaire/:id', |
|||
element: <SingleAnneeScolaire /> |
|||
}, |
|||
{ |
|||
path: '/asignmatiere/:id', |
|||
element: <AssignMatiereToMention /> |
|||
}, |
|||
{ |
|||
path: '/asignmatieresemestre/:id', |
|||
element: <AssingMatiereToSemestre /> |
|||
}, |
|||
{ |
|||
path: '/manual', |
|||
element: <Manuel /> |
|||
}, |
|||
{ |
|||
path: '/mention', |
|||
element: <Mentions /> |
|||
}, |
|||
{ |
|||
path: '/addmention', |
|||
element: <AddMention /> |
|||
}, |
|||
{ |
|||
path: '/singlemention/:id', |
|||
element: <SinleMention /> |
|||
}, |
|||
{ |
|||
path: '/apropos', |
|||
element: <Apropos /> |
|||
}, |
|||
{ |
|||
path: '/niveau', |
|||
element: <Niveau /> |
|||
}, |
|||
{ |
|||
path: '/addniveau', |
|||
element: <AddNiveau /> |
|||
}, |
|||
{ |
|||
path: '/para', |
|||
element: <Setting /> |
|||
}, |
|||
{ |
|||
path: '/admin', |
|||
element: <Admin /> |
|||
}, |
|||
{ |
|||
path: '/single/notes/:id/:niveau/:scolaire', |
|||
element: <SingleNotes /> |
|||
}, |
|||
{ |
|||
path: '/exportetudiant', |
|||
element: <ExportEtudiants /> |
|||
}, |
|||
{ |
|||
path: '/single/niveau/:id', |
|||
element: <SingleNiveau /> |
|||
}, |
|||
{ |
|||
path: '/matiere', |
|||
element: <Matieres /> |
|||
}, |
|||
{ |
|||
path: '/addmatiere', |
|||
element: <AddMatiere /> |
|||
}, |
|||
{ |
|||
path: '/addmatiere/import', |
|||
element: <ImportMatiere /> |
|||
}, |
|||
{ |
|||
path: '/singlematiere/:id', |
|||
element: <SingleMatiere /> |
|||
}, |
|||
{ |
|||
path: '/importniveau', |
|||
element: <ImportNiveau /> |
|||
}, |
|||
{ |
|||
path: '/systemenote', |
|||
element: <SystemeNote /> |
|||
}, |
|||
{ |
|||
path: '/anneescolaire', |
|||
element: <AnneeScolaire /> |
|||
}, |
|||
{ |
|||
path: '/addanneescolaire', |
|||
element: <AddAnneeScolaire /> |
|||
}, |
|||
{ |
|||
path: '/noteclass/:niveau/:scolaire', |
|||
element: <Noteclasse /> |
|||
}, |
|||
{ |
|||
path: '/parcours', |
|||
element: <Parcours /> |
|||
}, |
|||
{ |
|||
path: '/fiche/:matiere_id/:nom', |
|||
element: <ModalExportFichr /> |
|||
}, |
|||
{ |
|||
path: '/resultat/:niveau/:scolaire', |
|||
element: <Resultat /> |
|||
}, |
|||
{ |
|||
path: '/tranche/:id', |
|||
element: <TrancheEcolage /> |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
path: '/', |
|||
element: <LoginLayout />, |
|||
children: [ |
|||
{ |
|||
path: '/login', |
|||
element: <Login /> |
|||
}, |
|||
{ |
|||
path: '/forgotpassword', |
|||
element: <ForgotPassword /> |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
path: '/*', |
|||
element: <NotFound /> |
|||
} |
|||
]) |
|||
|
|||
export default Router |
|||
@ -1,12 +0,0 @@ |
|||
.blockTitle h1 { |
|||
font-size: 10px; |
|||
font-weight: bold; |
|||
color: white; |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 10px; |
|||
} |
|||
.boxEtudiantsCard { |
|||
width: 10%; |
|||
padding: 1%; |
|||
} |
|||
@ -1,15 +0,0 @@ |
|||
.blockTitle h1 { |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
color: white; |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 10px; |
|||
} |
|||
.boxEtudiantsCard { |
|||
width: 100%; |
|||
padding: 1%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
Before Width: | Height: | Size: 8.9 KiB |
@ -1,86 +0,0 @@ |
|||
body { |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
.container { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
height: 100vh; |
|||
gap: 20px; |
|||
} |
|||
.cart { |
|||
width: 33%; |
|||
/* height: 35%; */ |
|||
border: solid 1px rgba(0, 0, 0, 0.315); |
|||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8); /* Adds a soft shadow */ |
|||
/* border-radius: 10px; */ |
|||
padding: 1px; |
|||
background-color: #ffded4; |
|||
position: relative; |
|||
} |
|||
.cart-footer { |
|||
position: absolute; |
|||
height: 40px; |
|||
width: 100%; |
|||
bottom: 0; |
|||
left: 0; |
|||
border-bottom-left-radius: 10px; |
|||
border-bottom-right-radius: 10px; |
|||
background-color: #ff5a27; |
|||
} |
|||
.title { |
|||
margin: 0; |
|||
padding: 0; |
|||
text-align: center; |
|||
text-transform: uppercase; |
|||
z-index: 1; |
|||
} |
|||
.title h1, |
|||
p { |
|||
margin: 0; |
|||
font-size: 15px; |
|||
} |
|||
.content { |
|||
z-index: 1; |
|||
height: 70%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
.cart_photos { |
|||
width: 30%; |
|||
text-align: center; |
|||
} |
|||
.cart_photos img { |
|||
border-radius: 50px; |
|||
border: solid 2px #ff5a27; |
|||
width: 95px; |
|||
height: 100px; |
|||
object-fit: cover; |
|||
} |
|||
.cart_info { |
|||
width: 60%; |
|||
padding-left: 1%; |
|||
} |
|||
.cart_info p { |
|||
font-size: 16px; |
|||
} |
|||
.qrContent { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-around; |
|||
padding: 2%; |
|||
} |
|||
.gauche h1, |
|||
.droite h1 { |
|||
font-size: 17px; |
|||
text-align: center; |
|||
} |
|||
.gauche img, |
|||
.droite img { |
|||
width: 150px; |
|||
} |
|||
.droite .qrcodeDroite { |
|||
width: 150px; |
|||
} |
|||
@ -1,4 +0,0 @@ |
|||
.display { |
|||
background-color: rgba(255, 255, 255, 0.9); |
|||
/* margin-bottom: 2%; */ |
|||
} |
|||
@ -1,20 +0,0 @@ |
|||
html, |
|||
body { |
|||
height: 100%; |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
/* DefaultLayout.css */ |
|||
.default_layout { |
|||
/* height: 100%; Use full viewport height */ |
|||
min-height: 100vh; |
|||
overflow-y: auto; |
|||
background: url('../assets/background2.jpg') no-repeat center/cover; |
|||
/* background-color: #aad4e571; */ |
|||
} |
|||
.outlet { |
|||
padding-left: 55px; |
|||
margin-top: 0; |
|||
height: 100%; |
|||
} |
|||
@ -1,78 +0,0 @@ |
|||
.header { |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: start; |
|||
justify-content: space-between; |
|||
} |
|||
.headerCenter { |
|||
text-align: center; |
|||
color: black; |
|||
line-height: 15px; |
|||
width: 60%; |
|||
} |
|||
.headerCenter h5 { |
|||
text-transform: uppercase; |
|||
line-height: 12px; |
|||
font-size: 14px; |
|||
} |
|||
.headerCenter p { |
|||
font-style: italic; |
|||
font-weight: 400; |
|||
font-size: 14px; |
|||
} |
|||
.transition { |
|||
border: solid 1px gray; |
|||
width: 100%; |
|||
padding: 1% 2%; |
|||
font-weight: bold; |
|||
} |
|||
.transition h6 { |
|||
font-size: 12px; |
|||
} |
|||
|
|||
/* content */ |
|||
.content { |
|||
text-align: center; |
|||
} |
|||
.contentHeader { |
|||
color: black; |
|||
flex-direction: column; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 13px; |
|||
} |
|||
.contentHeader h1 { |
|||
font-size: 28px; |
|||
} |
|||
.contentHeaderList { |
|||
font-weight: bold; |
|||
font-size: 13px; |
|||
} |
|||
.contentHeaderList p { |
|||
font-size: 13px; |
|||
display: flex; |
|||
gap: 30px; |
|||
} |
|||
.ContentTable { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.ContentTable table { |
|||
border-color: black !important; |
|||
font-size: 13px; |
|||
margin: 0; |
|||
} |
|||
.contentFooter { |
|||
display: flex; |
|||
align-items: end; |
|||
flex-direction: column; |
|||
margin-top: 5px; |
|||
} |
|||
.signature { |
|||
width: 50%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 30px; |
|||
} |
|||
@ -1,78 +0,0 @@ |
|||
.boxEtudiantsCard { |
|||
width: 100%; |
|||
padding: 1%; |
|||
/* margin-top: 12%; */ |
|||
} |
|||
.cards { |
|||
/* width: 30%; */ |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 0 1%; |
|||
} |
|||
.nomEtudiants { |
|||
font-weight: bold; |
|||
} |
|||
.header { |
|||
color: white; |
|||
/* backdrop-filter: blur(5px); */ |
|||
/* position: fixed; */ |
|||
width: 100%; |
|||
z-index: 9; |
|||
} |
|||
.container { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 1% 2%; |
|||
background: linear-gradient(to left, #ffaf01b4, transparent); |
|||
} |
|||
.blockTitle { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 0 3%; |
|||
} |
|||
.blockTitle h1 { |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
/* text-transform: uppercase; */ |
|||
color: white; |
|||
} |
|||
.blockTitle button { |
|||
font-size: 12px; |
|||
display: inline-flex; |
|||
gap: 10px; |
|||
} |
|||
.boxImg { |
|||
padding: 2%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.imagePDP { |
|||
object-fit: cover; |
|||
border: solid 2px rgb(156, 39, 176); |
|||
} |
|||
.mainHome { |
|||
border: solid 1px red; |
|||
} |
|||
.select:hover { |
|||
border-color: rgb(156, 39, 176) !important; |
|||
} |
|||
.details { |
|||
background-color: rgba(128, 128, 128, 0.4); |
|||
border-radius: 8px; |
|||
padding: 3% 1% 3% 4%; |
|||
text-align: left; |
|||
} |
|||
.details span { |
|||
display: block; |
|||
line-height: 25px; |
|||
} |
|||
.cardOverflow { |
|||
height: 450px; |
|||
transition: 1s ease; |
|||
} |
|||
.cardOverflow:hover { |
|||
transform: scale(1.03); |
|||
} |
|||
@ -1,20 +0,0 @@ |
|||
/* .container{ |
|||
background: url(bg2.jpg) no-repeat fixed center/cover; |
|||
background-color: #08000e; |
|||
} */ |
|||
.cards { |
|||
background-color: #06000aa4 !important; |
|||
color: white !important; |
|||
box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.2) !important; /* Light white shadow */ |
|||
border: solid 1px rgba(245, 245, 245, 0.692); |
|||
} |
|||
.formulaireLogin { |
|||
color: white !important; |
|||
} |
|||
.formulaireLogin label { |
|||
color: white; |
|||
font-size: 17px; |
|||
} |
|||
.formulaireLogin input { |
|||
color: white; |
|||
} |
|||
@ -1,25 +0,0 @@ |
|||
.navnar { |
|||
color: rgba(0, 0, 0, 0.7); |
|||
background-color: #2d2d2d; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 2px 15px; |
|||
position: fixed; |
|||
width: 100%; |
|||
top: 0; |
|||
border-bottom: solid 1px white; |
|||
color: white; |
|||
z-index: 99999; |
|||
} |
|||
.gauche { |
|||
width: 30%; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.droite { |
|||
width: 4%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
@ -1,51 +0,0 @@ |
|||
.navbar { |
|||
background-color: #2d2d2d; |
|||
border-top: solid 1px white; |
|||
color: white; |
|||
width: 50px; |
|||
/* top: 28px; */ |
|||
position: fixed; |
|||
height: 100%; |
|||
/* bottom: 0; */ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
flex-direction: column; |
|||
padding: 0 0 5% 0; |
|||
margin: 0; |
|||
border-right: solid 1px white; |
|||
z-index: 99; |
|||
} |
|||
.liste1, |
|||
.liste2 { |
|||
list-style: none; |
|||
padding: 0; |
|||
margin: 0; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20px; |
|||
} |
|||
.liste1 li, |
|||
.liste2 li { |
|||
font-size: 25px; |
|||
cursor: pointer; |
|||
} |
|||
.nav_link { |
|||
color: white; |
|||
position: relative; |
|||
transition: 0.8s ease; |
|||
} |
|||
.icon_label { |
|||
position: absolute; |
|||
top: 0; /* Below the icon */ |
|||
left: 60px; |
|||
transform: translateX(-50%); |
|||
background-color: black; |
|||
color: white; |
|||
padding: 5px; |
|||
border-radius: 4px; |
|||
white-space: nowrap; /* Keep the label on one line */ |
|||
font-size: 12px; |
|||
margin-top: 5px; /* Slight gap between icon and label */ |
|||
z-index: 1; |
|||
} |
|||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 290 KiB |
|
Before Width: | Height: | Size: 14 MiB |
@ -1,97 +0,0 @@ |
|||
/* :root { |
|||
--ev-c-white: #ffffff; |
|||
--ev-c-white-soft: #f8f8f8; |
|||
--ev-c-white-mute: #f2f2f2; |
|||
|
|||
--ev-c-black: #1b1b1f; |
|||
--ev-c-black-soft: #222222; |
|||
--ev-c-black-mute: #282828; |
|||
|
|||
--ev-c-gray-1: #515c67; |
|||
--ev-c-gray-2: #414853; |
|||
--ev-c-gray-3: #32363f; |
|||
|
|||
--ev-c-text-1: rgba(255, 255, 245, 0.86); |
|||
--ev-c-text-2: rgba(235, 235, 245, 0.6); |
|||
--ev-c-text-3: rgba(235, 235, 245, 0.38); |
|||
|
|||
--ev-button-alt-border: transparent; |
|||
--ev-button-alt-text: var(--ev-c-text-1); |
|||
--ev-button-alt-bg: var(--ev-c-gray-3); |
|||
--ev-button-alt-hover-border: transparent; |
|||
--ev-button-alt-hover-text: var(--ev-c-text-1); |
|||
--ev-button-alt-hover-bg: var(--ev-c-gray-2); |
|||
} |
|||
|
|||
:root { |
|||
--color-background: var(--ev-c-black); |
|||
--color-background-soft: var(--ev-c-black-soft); |
|||
--color-background-mute: var(--ev-c-black-mute); |
|||
|
|||
--color-text: var(--ev-c-text-1); |
|||
} |
|||
|
|||
*, |
|||
*::before, |
|||
*::after { |
|||
box-sizing: border-box; |
|||
margin: 0; |
|||
font-weight: normal; |
|||
} |
|||
|
|||
ul { |
|||
list-style: none; |
|||
} |
|||
|
|||
body { |
|||
min-height: 100vh; |
|||
color: var(--color-text); |
|||
background: var(--color-background); |
|||
line-height: 1.6; |
|||
font-family: |
|||
Inter, |
|||
-apple-system, |
|||
BlinkMacSystemFont, |
|||
'Segoe UI', |
|||
Roboto, |
|||
Oxygen, |
|||
Ubuntu, |
|||
Cantarell, |
|||
'Fira Sans', |
|||
'Droid Sans', |
|||
'Helvetica Neue', |
|||
sans-serif; |
|||
text-rendering: optimizeLegibility; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} */ |
|||
.form-control:focus { |
|||
outline: none; |
|||
box-shadow: none; |
|||
border-color: initial; /* Optional: restore the default border color */ |
|||
} |
|||
table { |
|||
border-collapse: collapse; /* Ensure there is no space between table cells */ |
|||
width: 100%; /* Adjust width as needed */ |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
td, |
|||
th { |
|||
padding: 0; /* Remove padding from table cells */ |
|||
margin: 0; /* Ensure no margin inside cells */ |
|||
border: 1px solid black; /* Optional: Add border if needed */ |
|||
text-align: center; /* Center text horizontally */ |
|||
vertical-align: middle; /* Center text vertically */ |
|||
} |
|||
|
|||
tr { |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
tbody { |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
Before Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 7.9 MiB |
|
Before Width: | Height: | Size: 2.6 MiB |
|
Before Width: | Height: | Size: 24 MiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 5.7 KiB |
|
Before Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 863 B |
|
Before Width: | Height: | Size: 156 KiB |
|
Before Width: | Height: | Size: 69 KiB |
|
Before Width: | Height: | Size: 7.2 KiB |
|
Before Width: | Height: | Size: 43 KiB |
|
Before Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 9.8 KiB |
|
Before Width: | Height: | Size: 5.8 KiB |
@ -1,163 +0,0 @@ |
|||
@import './base.css'; |
|||
|
|||
body { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
overflow: hidden; |
|||
background-image: url('./wavy-lines.svg'); |
|||
background-size: cover; |
|||
user-select: none; |
|||
} |
|||
|
|||
code { |
|||
font-weight: 600; |
|||
padding: 3px 5px; |
|||
border-radius: 2px; |
|||
background-color: var(--color-background-mute); |
|||
font-family: |
|||
ui-monospace, |
|||
SFMono-Regular, |
|||
SF Mono, |
|||
Menlo, |
|||
Consolas, |
|||
Liberation Mono, |
|||
monospace; |
|||
font-size: 85%; |
|||
} |
|||
|
|||
#root { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
margin-bottom: 80px; |
|||
} |
|||
|
|||
.logo { |
|||
margin-bottom: 20px; |
|||
-webkit-user-drag: none; |
|||
height: 128px; |
|||
width: 128px; |
|||
will-change: filter; |
|||
transition: filter 300ms; |
|||
} |
|||
|
|||
.logo:hover { |
|||
filter: drop-shadow(0 0 1.2em #6988e6aa); |
|||
} |
|||
|
|||
.creator { |
|||
font-size: 14px; |
|||
line-height: 16px; |
|||
color: var(--ev-c-text-2); |
|||
font-weight: 600; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.text { |
|||
font-size: 28px; |
|||
color: var(--ev-c-text-1); |
|||
font-weight: 700; |
|||
line-height: 32px; |
|||
text-align: center; |
|||
margin: 0 10px; |
|||
padding: 16px 0; |
|||
} |
|||
|
|||
.tip { |
|||
font-size: 16px; |
|||
line-height: 24px; |
|||
color: var(--ev-c-text-2); |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.react { |
|||
background: -webkit-linear-gradient(315deg, #087ea4 55%, #7c93ee); |
|||
background-clip: text; |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.actions { |
|||
display: flex; |
|||
padding-top: 32px; |
|||
margin: -6px; |
|||
flex-wrap: wrap; |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.action { |
|||
flex-shrink: 0; |
|||
padding: 6px; |
|||
} |
|||
|
|||
.action a { |
|||
cursor: pointer; |
|||
text-decoration: none; |
|||
display: inline-block; |
|||
border: 1px solid transparent; |
|||
text-align: center; |
|||
font-weight: 600; |
|||
white-space: nowrap; |
|||
border-radius: 20px; |
|||
padding: 0 20px; |
|||
line-height: 38px; |
|||
font-size: 14px; |
|||
border-color: var(--ev-button-alt-border); |
|||
color: var(--ev-button-alt-text); |
|||
background-color: var(--ev-button-alt-bg); |
|||
} |
|||
|
|||
.action a:hover { |
|||
border-color: var(--ev-button-alt-hover-border); |
|||
color: var(--ev-button-alt-hover-text); |
|||
background-color: var(--ev-button-alt-hover-bg); |
|||
} |
|||
|
|||
.versions { |
|||
position: absolute; |
|||
bottom: 30px; |
|||
margin: 0 auto; |
|||
padding: 15px 0; |
|||
font-family: 'Menlo', 'Lucida Console', monospace; |
|||
display: inline-flex; |
|||
overflow: hidden; |
|||
align-items: center; |
|||
border-radius: 22px; |
|||
background-color: #202127; |
|||
backdrop-filter: blur(24px); |
|||
} |
|||
|
|||
.versions li { |
|||
display: block; |
|||
float: left; |
|||
border-right: 1px solid var(--ev-c-gray-1); |
|||
padding: 0 20px; |
|||
font-size: 14px; |
|||
line-height: 14px; |
|||
opacity: 0.8; |
|||
&:last-child { |
|||
border: none; |
|||
} |
|||
} |
|||
|
|||
@media (max-width: 720px) { |
|||
.text { |
|||
font-size: 20px; |
|||
} |
|||
} |
|||
|
|||
@media (max-width: 620px) { |
|||
.versions { |
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
@media (max-width: 350px) { |
|||
.tip, |
|||
.actions { |
|||
display: none; |
|||
} |
|||
} |
|||
Binary file not shown.
|
Before Width: | Height: | Size: 5.3 KiB |
|
Before Width: | Height: | Size: 454 KiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 871 B |
|
Before Width: | Height: | Size: 96 KiB |
|
Before Width: | Height: | Size: 174 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.7 KiB |
@ -1,413 +0,0 @@ |
|||
import React, { useEffect, useRef, useState } from 'react' |
|||
import classe from '../assets/AllStyleComponents.module.css' |
|||
import classeAdd from '../assets/AddStudent.module.css' |
|||
import classeHome from '../assets/Home.module.css' |
|||
import { Link, useNavigate } from 'react-router-dom' |
|||
import { IoMdReturnRight } from 'react-icons/io' |
|||
import { |
|||
Box, |
|||
Button, |
|||
InputAdornment, |
|||
Typography, |
|||
Modal, |
|||
TextField, |
|||
Grid, |
|||
Autocomplete |
|||
} from '@mui/material' |
|||
import { BsBookmarkPlusFill } from 'react-icons/bs' |
|||
import { FaBook, FaClipboardList, FaClock, FaFileExcel } from 'react-icons/fa' |
|||
import validationMatiereAdd from './validation/ValidationMatiereAdd' |
|||
import svgSuccess from '../assets/success.svg' |
|||
import ChangeCapitalize from './function/ChangeCapitalizeLetter' |
|||
import { MdOutlineNumbers } from 'react-icons/md' |
|||
import { IoBookmark } from 'react-icons/io5' |
|||
import ChangeCapital from './function/ChangeCapitalLetter' |
|||
import { CgPathUnite } from 'react-icons/cg' |
|||
|
|||
const AddMatiere = () => { |
|||
const [formData, setFormData] = useState({ |
|||
nom: '', |
|||
credit: '', |
|||
uniter: '', |
|||
ue: '' |
|||
}) |
|||
|
|||
const navigate = useNavigate() |
|||
|
|||
const [matieres, setMatieres] = useState([]) |
|||
const [mention, setMention] = useState([]) |
|||
|
|||
useEffect(() => { |
|||
window.matieres.getMatiere().then((response) => { |
|||
setMatieres(response) |
|||
}) |
|||
|
|||
window.mention.getMention().then((response) => { |
|||
setMention(Array.isArray(response) ? response : []) |
|||
}) |
|||
}, []) |
|||
|
|||
/** |
|||
* hook to open modal |
|||
*/ |
|||
const [open, setOpen] = useState(false) |
|||
|
|||
/** |
|||
* function to close modal |
|||
*/ |
|||
const handleClose = () => { |
|||
setOpen(false) |
|||
navigate('/matiere') |
|||
} |
|||
|
|||
/** |
|||
* function to set the data in state |
|||
* @param {*} e |
|||
*/ |
|||
const handleInputChange = (e) => { |
|||
const { name, value } = e.target |
|||
setFormData((prevData) => ({ |
|||
...prevData, |
|||
[name]: value |
|||
})) |
|||
} |
|||
|
|||
const nomRef = useRef() |
|||
const errorRef = useRef() |
|||
const creditRef = useRef() |
|||
const ueRef = useRef() |
|||
const uniterRef = useRef() |
|||
|
|||
const formSubmit = async (e) => { |
|||
e.preventDefault() |
|||
|
|||
let arrayMatiere = [] |
|||
|
|||
matieres.map((matiere) => { |
|||
arrayMatiere.push(matiere.nom) |
|||
}) |
|||
|
|||
let valid = validationMatiereAdd( |
|||
nomRef.current, |
|||
errorRef.current, |
|||
arrayMatiere, |
|||
creditRef.current |
|||
) |
|||
console.log(formData, valid) |
|||
if (valid) { |
|||
let response = await window.matieres.createMatiere(formData) |
|||
console.log(response) |
|||
if (response.success) { |
|||
setOpen(true) |
|||
} |
|||
|
|||
if (response.code) { |
|||
errorRef.current.textContent = `${formData.nom} existe déjà` |
|||
} |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* function to return the view Modal |
|||
* |
|||
* @returns {JSX} |
|||
*/ |
|||
const modals = () => ( |
|||
<Modal |
|||
open={open} |
|||
onClose={handleClose} |
|||
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 |
|||
}} |
|||
> |
|||
<Typography style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}> |
|||
<img src={svgSuccess} alt="" width={50} height={50} />{' '} |
|||
<span>Matière insérer avec succes</span> |
|||
</Typography> |
|||
<Box |
|||
sx={{ |
|||
marginTop: '2%', |
|||
display: 'flex', |
|||
gap: '20px', |
|||
alignItems: 'end', |
|||
justifyContent: 'flex-end' |
|||
}} |
|||
> |
|||
<Button onClick={handleClose} color="warning" variant="contained"> |
|||
OK |
|||
</Button> |
|||
</Box> |
|||
</Box> |
|||
</Modal> |
|||
) |
|||
|
|||
return ( |
|||
<div className={classe.mainHome}> |
|||
{modals()} |
|||
<div className={classeAdd.header}> |
|||
<div className={classe.h1style}> |
|||
<div className={classeHome.blockTitle}> |
|||
<h1 style={{ display: 'flex', alignItems: 'center', gap: '10px' }}> |
|||
<BsBookmarkPlusFill /> |
|||
Ajout Matière |
|||
</h1> |
|||
<Link to={'/matiere'}> |
|||
<Button color="warning" variant="contained"> |
|||
<IoMdReturnRight style={{ fontSize: '20px' }} /> |
|||
</Button> |
|||
</Link> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
{/* displaying the formulaire */} |
|||
<div className={classeHome.boxEtudiantsCard}> |
|||
<Box |
|||
sx={{ |
|||
position: 'absolute', |
|||
top: '55%', |
|||
left: '50%', |
|||
transform: 'translate(-50%, -50%)', |
|||
width: 700, |
|||
borderRadius: '2%', |
|||
bgcolor: 'background.paper', |
|||
boxShadow: 24, |
|||
p: 4 |
|||
}} |
|||
> |
|||
<div style={{ textAlign: 'right', fontWeight: 'bold' }}> |
|||
<Link to={'/addmatiere/import'} style={{ textDecoration: 'none', color: 'orange' }}> |
|||
Importer un fichier excel <FaFileExcel /> |
|||
</Link> |
|||
</div> |
|||
<h3 style={{ textAlign: 'center', paddingBottom: '15px', textDecoration: 'underline' }}> |
|||
Ajout d'un Matière |
|||
</h3> |
|||
<Box |
|||
sx={{ |
|||
marginTop: '2%', |
|||
width: '100%' |
|||
}} |
|||
> |
|||
<form onSubmit={formSubmit}> |
|||
<Grid container spacing={2}> |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
label="Nom" |
|||
name="nom" |
|||
color="warning" |
|||
fullWidth |
|||
placeholder="Nom du matière" |
|||
value={formData.nom} |
|||
onChange={handleInputChange} |
|||
onInput={() => ChangeCapitalize(nomRef)} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<FaBook /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
inputRef={nomRef} |
|||
sx={{ |
|||
marginBottom: '5px', |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: '#ff9800' // Set the border color on hover |
|||
} |
|||
} |
|||
}} |
|||
/> |
|||
</Grid> |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
label="Crédit" |
|||
name="credit" |
|||
color="warning" |
|||
fullWidth |
|||
placeholder="Crédit pour la matiere" |
|||
type="number" |
|||
value={formData.credit} |
|||
onChange={handleInputChange} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<MdOutlineNumbers /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
inputProps={{ min: 1 }} |
|||
inputRef={creditRef} |
|||
sx={{ |
|||
marginBottom: '5px', |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: '#ff9800' // Set the border color on hover |
|||
} |
|||
} |
|||
}} |
|||
/> |
|||
</Grid> |
|||
{/* <Grid item xs={12} sm={6}> |
|||
<TextField |
|||
label="Semestre" |
|||
name="semestre" |
|||
color='warning' |
|||
fullWidth |
|||
placeholder='exemple S1, S2, S3, S4' |
|||
type='text' |
|||
value={formData.semestre} |
|||
onChange={handleInputChange} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<CiCalendar /> |
|||
</InputAdornment> |
|||
), |
|||
}} |
|||
inputProps={{ min: 1 }} |
|||
inputRef={semestreRef} |
|||
sx={{ |
|||
marginBottom:"5px", |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: '#ff9800', // Set the border color on hover |
|||
}, |
|||
}, |
|||
}} |
|||
/> |
|||
</Grid> */} |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
label="Unité d'enseignement" |
|||
name="uniter" |
|||
color="warning" |
|||
fullWidth |
|||
placeholder="Le matiere sera dans quelle unité d'enseignement" |
|||
value={formData.uniter} |
|||
onChange={handleInputChange} |
|||
onInput={() => ChangeCapital(uniterRef)} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<IoBookmark /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
inputProps={{ min: 1 }} |
|||
inputRef={uniterRef} |
|||
sx={{ |
|||
marginBottom: '5px', |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: '#ff9800' // Set the border color on hover |
|||
} |
|||
} |
|||
}} |
|||
/> |
|||
</Grid> |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
label="UE" |
|||
name="ue" |
|||
color="warning" |
|||
fullWidth |
|||
placeholder="TI2" |
|||
value={formData.ue} |
|||
onInput={() => ChangeCapital(ueRef)} |
|||
onChange={handleInputChange} |
|||
type="text" |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<CgPathUnite /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
inputProps={{ min: 1 }} |
|||
inputRef={ueRef} |
|||
sx={{ |
|||
marginBottom: '5px', |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: '#ff9800' // Set the border color on hover |
|||
} |
|||
} |
|||
}} |
|||
/> |
|||
</Grid> |
|||
{/* <Grid item xs={12} sm={6}> |
|||
<Autocomplete |
|||
multiple |
|||
options={mention} // Options array for Autocomplete |
|||
getOptionLabel={(option) => option.nom || ""} // Safely access `nom` |
|||
value={formData.mention_id.map(id => mention.find(item => item.id === id)) || []} // Bind selected values to form data |
|||
onChange={(event, newValue) => { |
|||
setFormData((prevData) => ({ |
|||
...prevData, |
|||
mention_id: newValue.map((item) => item.id), // Store only the IDs of selected mentions |
|||
})); |
|||
}} |
|||
isOptionEqualToValue={(option, value) => option.id === value.id} // Ensure correct matching of options |
|||
renderInput={(params) => ( |
|||
<TextField |
|||
{...params} |
|||
label="Mention" |
|||
color="warning" |
|||
placeholder="Sélectionnez les mentions" |
|||
InputProps={{ |
|||
...params.InputProps, |
|||
startAdornment: ( |
|||
<> |
|||
<InputAdornment position="start"> |
|||
<FaClipboardList /> |
|||
</InputAdornment> |
|||
{params.InputProps.startAdornment} |
|||
</> |
|||
), |
|||
}} |
|||
sx={{ |
|||
marginBottom: "5px", |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: '#ff9800', // Set border color on hover |
|||
}, |
|||
}, |
|||
}} |
|||
/> |
|||
)} |
|||
/> |
|||
|
|||
</Grid> */} |
|||
</Grid> |
|||
<span style={{ color: 'red', marginBottom: '15px' }} ref={errorRef}></span> |
|||
<br /> |
|||
<Grid |
|||
item |
|||
xs={12} |
|||
style={{ display: 'flex', gap: '30px', justifyContent: 'flex-end' }} |
|||
> |
|||
<Button type="submit" color="warning" variant="contained"> |
|||
Enregister |
|||
</Button> |
|||
</Grid> |
|||
</form> |
|||
</Box> |
|||
</Box> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
export default AddMatiere |
|||
@ -1,257 +0,0 @@ |
|||
import React, { useEffect, useRef, useState } from 'react' |
|||
import classe from '../assets/AllStyleComponents.module.css' |
|||
import classeAdd from '../assets/AddStudent.module.css' |
|||
import classeHome from '../assets/Home.module.css' |
|||
import { Link, useNavigate } from 'react-router-dom' |
|||
import { IoMdReturnRight } from 'react-icons/io' |
|||
import { Box, Button, InputAdornment, Typography, Modal, TextField, Grid } from '@mui/material' |
|||
import { BsBookmarkPlusFill } from 'react-icons/bs' |
|||
import { FaClipboardList } from 'react-icons/fa6' |
|||
import ChangeCapital from './function/ChangeCapitalLetter' |
|||
import { IoBookmark } from 'react-icons/io5' |
|||
import svgSuccess from '../assets/success.svg' |
|||
|
|||
const AddMention = () => { |
|||
const [formData, setFormData] = useState({ |
|||
nom: '', |
|||
uniter: '' |
|||
}) |
|||
|
|||
const [errors, setErrors] = useState({ |
|||
nom: false, |
|||
uniter: false |
|||
}) |
|||
|
|||
const navigate = useNavigate() |
|||
|
|||
/** |
|||
* function to set the data in state |
|||
* @param {*} e |
|||
*/ |
|||
const handleInputChange = (e) => { |
|||
const { name, value } = e.target |
|||
setFormData({ |
|||
...formData, |
|||
[name]: value |
|||
}) |
|||
setErrors({ |
|||
...errors, |
|||
[name]: false // Reset the error when user starts typing |
|||
}) |
|||
} |
|||
|
|||
const formSubmit = async (e) => { |
|||
e.preventDefault() |
|||
const newErrors = {} |
|||
let hasError = false |
|||
|
|||
// Check for empty fields |
|||
Object.keys(formData).forEach((key) => { |
|||
if (!formData[key].trim()) { |
|||
newErrors[key] = true // Set error for empty fields |
|||
hasError = true |
|||
} |
|||
}) |
|||
|
|||
setErrors(newErrors) |
|||
|
|||
if (!hasError) { |
|||
try { |
|||
let response = await window.mention.createMention(formData) |
|||
|
|||
if (response.success) { |
|||
setOpen(true) |
|||
} |
|||
} catch (error) { |
|||
console.log(error) |
|||
} |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* hook to open modal |
|||
*/ |
|||
const [open, setOpen] = useState(false) |
|||
|
|||
/** |
|||
* function to close modal |
|||
*/ |
|||
const handleClose = () => { |
|||
setOpen(false) |
|||
navigate('/mention') |
|||
} |
|||
|
|||
/** |
|||
* function to return the view Modal |
|||
* |
|||
* @returns {JSX} |
|||
*/ |
|||
const modals = () => ( |
|||
<Modal |
|||
open={open} |
|||
onClose={handleClose} |
|||
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 |
|||
}} |
|||
> |
|||
<Typography style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}> |
|||
<img src={svgSuccess} alt="" width={50} height={50} />{' '} |
|||
<span>Mention insérer avec succes</span> |
|||
</Typography> |
|||
<Box |
|||
sx={{ |
|||
marginTop: '2%', |
|||
display: 'flex', |
|||
gap: '20px', |
|||
alignItems: 'end', |
|||
justifyContent: 'flex-end' |
|||
}} |
|||
> |
|||
<Button onClick={handleClose} color="warning" variant="contained"> |
|||
OK |
|||
</Button> |
|||
</Box> |
|||
</Box> |
|||
</Modal> |
|||
) |
|||
|
|||
// Helper function to get helperText dynamically |
|||
const getHelperText = (field) => (errors[field] ? 'Ce champ est requis.' : '') |
|||
|
|||
const nomRef = useRef() |
|||
const uniterRef = useRef() |
|||
return ( |
|||
<div className={classe.mainHome}> |
|||
{modals()} |
|||
<div className={classeAdd.header}> |
|||
<div className={classe.h1style}> |
|||
<div className={classeHome.blockTitle}> |
|||
<h1 style={{ display: 'flex', alignItems: 'center', gap: '10px' }}> |
|||
<BsBookmarkPlusFill /> |
|||
Ajout Mention |
|||
</h1> |
|||
<Link to={'/mention'}> |
|||
<Button color="warning" variant="contained"> |
|||
<IoMdReturnRight style={{ fontSize: '20px' }} /> |
|||
</Button> |
|||
</Link> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
{/* displaying the formulaire */} |
|||
<div className={classeHome.boxEtudiantsCard}> |
|||
<Box |
|||
sx={{ |
|||
position: 'absolute', |
|||
top: '55%', |
|||
left: '50%', |
|||
transform: 'translate(-50%, -50%)', |
|||
width: 700, |
|||
borderRadius: '2%', |
|||
bgcolor: 'background.paper', |
|||
boxShadow: 24, |
|||
p: 4 |
|||
}} |
|||
> |
|||
<h3 style={{ textAlign: 'center', paddingBottom: '15px', textDecoration: 'underline' }}> |
|||
Ajout d'un Mention |
|||
</h3> |
|||
<Box |
|||
sx={{ |
|||
marginTop: '2%', |
|||
width: '100%' |
|||
}} |
|||
> |
|||
<form onSubmit={formSubmit}> |
|||
<Grid container spacing={2}> |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
label="Nom" |
|||
error={errors.nom} |
|||
name="nom" |
|||
color="warning" |
|||
fullWidth |
|||
placeholder="GENIE DES MINES" |
|||
value={formData.nom} |
|||
onChange={handleInputChange} |
|||
onInput={() => ChangeCapital(nomRef)} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<FaClipboardList /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
helperText={getHelperText('nom')} |
|||
inputRef={nomRef} |
|||
sx={{ |
|||
marginBottom: '5px', |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: '#ff9800' // Set the border color on hover |
|||
} |
|||
} |
|||
}} |
|||
/> |
|||
</Grid> |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
label="Unité" |
|||
error={errors.uniter} |
|||
helperText={getHelperText('uniter')} |
|||
name="uniter" |
|||
color="warning" |
|||
fullWidth |
|||
placeholder="GM" |
|||
value={formData.uniter} |
|||
onChange={handleInputChange} |
|||
onInput={() => ChangeCapital(uniterRef)} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<IoBookmark /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
inputRef={uniterRef} |
|||
sx={{ |
|||
marginBottom: '5px', |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: '#ff9800' // Set the border color on hover |
|||
} |
|||
} |
|||
}} |
|||
/> |
|||
</Grid> |
|||
<Grid |
|||
item |
|||
xs={12} |
|||
style={{ display: 'flex', gap: '30px', justifyContent: 'flex-end' }} |
|||
> |
|||
<Button type="submit" color="warning" variant="contained"> |
|||
Enregister |
|||
</Button> |
|||
</Grid> |
|||
</Grid> |
|||
</form> |
|||
</Box> |
|||
</Box> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
export default AddMention |
|||
@ -1,214 +0,0 @@ |
|||
import React, { useEffect, useRef, useState } from 'react' |
|||
import classe from '../assets/AllStyleComponents.module.css' |
|||
import classeAdd from '../assets/AddStudent.module.css' |
|||
import { Link, useNavigate } from 'react-router-dom' |
|||
import { IoMdPersonAdd, IoMdReturnRight } from 'react-icons/io' |
|||
import { FaFileExcel, FaUser } from 'react-icons/fa' |
|||
import { Box, Button, InputAdornment, TextField, Grid, Modal, Typography } from '@mui/material' |
|||
import classeHome from '../assets/Home.module.css' |
|||
import validationNote from './validation/AddNiveau' |
|||
import svgSuccess from '../assets/success.svg' |
|||
|
|||
const AddNiveau = () => { |
|||
const navigate = useNavigate() |
|||
/** |
|||
* hook for storing data in the input |
|||
*/ |
|||
const [formData, setFormData] = useState({ |
|||
nom: '' |
|||
}) |
|||
const [niveau, setNiveau] = useState([]) |
|||
/** |
|||
* hook to open modal |
|||
*/ |
|||
const [open, setOpen] = useState(false) |
|||
|
|||
/** |
|||
* function to close modal |
|||
*/ |
|||
const handleClose = () => { |
|||
setOpen(false) |
|||
navigate('/niveau') |
|||
} |
|||
|
|||
useEffect(() => { |
|||
window.niveaus.getNiveau().then((response) => { |
|||
setNiveau(response) |
|||
}) |
|||
}, []) |
|||
|
|||
/** |
|||
* function to set the data in state |
|||
* @param {*} e |
|||
*/ |
|||
const handleInputChange = (e) => { |
|||
const { name, value } = e.target |
|||
setFormData((prevData) => ({ |
|||
...prevData, |
|||
[name]: value |
|||
})) |
|||
} |
|||
|
|||
const nomRef = useRef() |
|||
const nomError = useRef() |
|||
|
|||
/** |
|||
* function to return the view Modal |
|||
* |
|||
* @returns {JSX} |
|||
*/ |
|||
const modals = () => ( |
|||
<Modal |
|||
open={open} |
|||
onClose={handleClose} |
|||
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 |
|||
}} |
|||
> |
|||
<Typography style={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}> |
|||
<img src={svgSuccess} alt="" width={50} height={50} />{' '} |
|||
<span>Insertion a été effectuée avec succès</span> |
|||
</Typography> |
|||
<Box |
|||
sx={{ |
|||
marginTop: '2%', |
|||
display: 'flex', |
|||
gap: '20px', |
|||
alignItems: 'end', |
|||
justifyContent: 'flex-end' |
|||
}} |
|||
> |
|||
<Button onClick={handleClose} color="warning" variant="contained"> |
|||
OK |
|||
</Button> |
|||
</Box> |
|||
</Box> |
|||
</Modal> |
|||
) |
|||
|
|||
const formSubmit = async (e) => { |
|||
e.preventDefault() |
|||
let niveauNom = [] |
|||
niveau.map((niv) => { |
|||
niveauNom.push(niv.nom) |
|||
}) |
|||
let validation = validationNote(nomRef.current, nomError.current, niveauNom) |
|||
|
|||
if (validation) { |
|||
let response = await window.niveaus.insertNiveau(formData) |
|||
|
|||
let responses = JSON.parse(response) |
|||
if (responses.changes == 1) { |
|||
setOpen(true) |
|||
setFormData({ |
|||
nom: '' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
|
|||
return ( |
|||
<div className={classe.mainHome}> |
|||
{modals()} |
|||
<div className={classeAdd.header}> |
|||
<div className={classe.h1style}> |
|||
<div className={classeHome.blockTitle}> |
|||
<h1 style={{ display: 'flex', alignItems: 'center', gap: '10px' }}> |
|||
<IoMdPersonAdd /> |
|||
Ajout niveau |
|||
</h1> |
|||
<Link to={'/niveau'}> |
|||
<Button color="warning" variant="contained"> |
|||
<IoMdReturnRight style={{ fontSize: '20px' }} /> |
|||
</Button> |
|||
</Link> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div className={classeAdd.boxEtudiantsCard}> |
|||
<Box |
|||
sx={{ |
|||
position: 'absolute', |
|||
top: '50%', |
|||
left: '50%', |
|||
transform: 'translate(-50%, -50%)', |
|||
width: 700, |
|||
borderRadius: '2%', |
|||
bgcolor: 'background.paper', |
|||
boxShadow: 24, |
|||
p: 4 |
|||
}} |
|||
> |
|||
<h3 style={{ textAlign: 'center', paddingBottom: '15px', textDecoration: 'underline' }}> |
|||
Ajout d'un niveau |
|||
</h3> |
|||
<div style={{ textAlign: 'right', fontWeight: 'bold' }}> |
|||
<Link to={'/importniveau'} style={{ textDecoration: 'none', color: 'orange' }}> |
|||
Importer un fichier excel <FaFileExcel /> |
|||
</Link> |
|||
</div> |
|||
<Box |
|||
sx={{ |
|||
marginTop: '2%', |
|||
width: '100%' |
|||
}} |
|||
> |
|||
<form onSubmit={formSubmit}> |
|||
<TextField |
|||
label="Nom" |
|||
name="nom" |
|||
color="warning" |
|||
fullWidth |
|||
placeholder="L1 ou L2 ou L3 ou M1 ou M2 ou D1 ou D2 ou D3" |
|||
value={formData.nom} |
|||
onChange={handleInputChange} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<FaUser /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
inputRef={nomRef} |
|||
sx={{ |
|||
marginBottom: '5px', |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: '#ff9800' // Set the border color on hover |
|||
} |
|||
} |
|||
}} |
|||
/> |
|||
<span style={{ color: 'red', marginBottom: '15px' }} ref={nomError}></span> |
|||
<br /> |
|||
{/* Submit Button */} |
|||
<Grid |
|||
item |
|||
xs={12} |
|||
style={{ display: 'flex', gap: '30px', justifyContent: 'flex-end' }} |
|||
> |
|||
<Button type="submit" color="warning" variant="contained"> |
|||
Enregister |
|||
</Button> |
|||
</Grid> |
|||
</form> |
|||
</Box> |
|||
</Box> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
export default AddNiveau |
|||
@ -1,162 +0,0 @@ |
|||
import React, { useEffect, useRef, useState } from 'react' |
|||
import { |
|||
Dialog, |
|||
DialogActions, |
|||
DialogContent, |
|||
DialogTitle, |
|||
TextField, |
|||
Button, |
|||
Autocomplete, |
|||
InputAdornment, |
|||
Box, |
|||
Grid |
|||
} from '@mui/material' |
|||
import { MdRule } from 'react-icons/md' |
|||
import { FaClipboardList } from 'react-icons/fa' |
|||
|
|||
const AddParcours = ({ open, onClose, onSubmitSuccess }) => { |
|||
const [formData, setFormData] = useState({ |
|||
nom: '', |
|||
uniter: '', |
|||
mention_id: null |
|||
}) |
|||
|
|||
const [mention, setMention] = useState([]) |
|||
|
|||
useEffect(() => { |
|||
window.mention.getMention().then((response) => { |
|||
setMention(response) |
|||
}) |
|||
}, []) |
|||
|
|||
const handleChange = (e) => { |
|||
const { name, value } = e.target |
|||
setFormData({ ...formData, [name]: value }) |
|||
} |
|||
|
|||
const handleSubmit = async (e) => { |
|||
e.preventDefault() |
|||
let response = await window.notesysteme.insertParcours(formData) |
|||
console.log(response) |
|||
if (response.success) { |
|||
onSubmitSuccess(true) |
|||
onClose() // Close the modal after submission |
|||
setFormData({ |
|||
nom: '', |
|||
uniter: '', |
|||
mention_id: null |
|||
}) |
|||
} |
|||
} |
|||
|
|||
return ( |
|||
<Dialog open={open} onClose={onClose}> |
|||
<form action="" onSubmit={handleSubmit}> |
|||
<DialogTitle>Information sur le parcour</DialogTitle> |
|||
<DialogContent> |
|||
<Box sx={{ flexGrow: 1 }}> |
|||
<Grid container spacing={2}> |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
autoFocus |
|||
margin="normal" |
|||
required |
|||
name="nom" |
|||
label="Nom du parcours" |
|||
type="text" |
|||
fullWidth |
|||
placeholder="Nom du parcours" |
|||
variant="outlined" |
|||
value={formData.nom} |
|||
color="warning" |
|||
onChange={handleChange} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<MdRule /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
/> |
|||
</Grid> |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
autoFocus |
|||
margin="normal" |
|||
required |
|||
name="uniter" |
|||
label="Uniter parcours" |
|||
type="text" |
|||
fullWidth |
|||
placeholder="GPESB" |
|||
variant="outlined" |
|||
value={formData.uniter} |
|||
color="warning" |
|||
onChange={handleChange} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<MdRule /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
/> |
|||
</Grid> |
|||
<Grid item xs={12} sm={12}> |
|||
<Autocomplete |
|||
options={mention} // Options array for Autocomplete |
|||
getOptionLabel={(option) => option.nom || ''} // Safely access `nom` |
|||
value={mention.find((item) => item.id === formData.mention_id) || null} // Bind selected value to form data |
|||
onChange={(event, newValue) => { |
|||
setFormData((prevData) => ({ |
|||
...prevData, |
|||
mention_id: newValue ? newValue.id : null // Store the ID of the selected mention |
|||
})) |
|||
}} |
|||
isOptionEqualToValue={(option, value) => option.id === value.id} // Ensure correct matching of options |
|||
renderInput={(params) => ( |
|||
<TextField |
|||
{...params} |
|||
label="Mention" |
|||
color="warning" |
|||
placeholder="Sélectionnez une mention" |
|||
InputProps={{ |
|||
...params.InputProps, |
|||
startAdornment: ( |
|||
<> |
|||
<InputAdornment position="start"> |
|||
<FaClipboardList /> |
|||
</InputAdornment> |
|||
{params.InputProps.startAdornment} |
|||
</> |
|||
) |
|||
}} |
|||
sx={{ |
|||
marginBottom: '5px', |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: '#ff9800' // Set border color on hover |
|||
} |
|||
} |
|||
}} |
|||
/> |
|||
)} |
|||
/> |
|||
</Grid> |
|||
</Grid> |
|||
</Box> |
|||
</DialogContent> |
|||
<DialogActions> |
|||
<Button onClick={onClose} color="error"> |
|||
Annuler |
|||
</Button> |
|||
<Button type="submit" color="warning"> |
|||
Soumettre |
|||
</Button> |
|||
</DialogActions> |
|||
</form> |
|||
</Dialog> |
|||
) |
|||
} |
|||
|
|||
export default AddParcours |
|||
@ -1,336 +0,0 @@ |
|||
import React, { useRef, useState } from 'react' |
|||
import classe from '../assets/AllStyleComponents.module.css' |
|||
import img from '../assets/admin.png' |
|||
import classeHome from '../assets/Home.module.css' |
|||
import { Box, Button, InputAdornment, TextField, Grid, Typography, Modal } from '@mui/material' |
|||
import classeAdd from '../assets/AddStudent.module.css' |
|||
import validationAddAdmin from './validation/AddAdmin' |
|||
import svgSuccess from '../assets/success.svg' |
|||
import svgError from '../assets/error.svg' |
|||
import { FaEnvelope, FaLock, FaUser } from 'react-icons/fa' |
|||
|
|||
const Admin = () => { |
|||
const [formData, setFormData] = useState({ |
|||
username: '', |
|||
email: '', |
|||
password: '', |
|||
roles: 'Enseignant' |
|||
}) |
|||
|
|||
const usernameRef = useRef() |
|||
const emailRef = useRef() |
|||
const passwordRef = useRef() |
|||
const rolesRef = useRef() |
|||
const errorUsername = useRef() |
|||
const errorEmail = useRef() |
|||
const errorPassword = useRef() |
|||
|
|||
/** |
|||
* function to set the data in state |
|||
* @param {*} e |
|||
*/ |
|||
const handleInputChange = (e) => { |
|||
const { name, value } = e.target |
|||
setFormData((prevData) => ({ |
|||
...prevData, |
|||
[name]: value |
|||
})) |
|||
} |
|||
|
|||
const handleSubmit = async (e) => { |
|||
e.preventDefault() |
|||
// Handle form submission logic |
|||
const valid = validationAddAdmin( |
|||
usernameRef.current, |
|||
emailRef.current, |
|||
passwordRef.current, |
|||
errorUsername.current, |
|||
errorEmail.current, |
|||
errorPassword.current |
|||
) |
|||
console.log(formData) |
|||
console.log(valid) |
|||
|
|||
if (valid) { |
|||
const response = await window.allUser.insertUsers(formData) |
|||
console.log(response) |
|||
if (response.success) { |
|||
setOpen(true) |
|||
setFormData({ |
|||
username: '', |
|||
email: '', |
|||
password: '', |
|||
roles: 'Enseignant' |
|||
}) |
|||
} |
|||
|
|||
if (response.code) { |
|||
setCode(422) |
|||
setOpen(true) |
|||
} |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* hook to open modal |
|||
*/ |
|||
const [open, setOpen] = useState(false) |
|||
const [code, setCode] = useState(200) |
|||
|
|||
/** |
|||
* function to close modal |
|||
*/ |
|||
const handleClose = () => setOpen(false) |
|||
|
|||
/** |
|||
* function to return the view Modal |
|||
* |
|||
* @returns {JSX} |
|||
*/ |
|||
const modals = () => ( |
|||
<Modal |
|||
open={open} |
|||
onClose={handleClose} |
|||
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 |
|||
}} |
|||
> |
|||
{code == 422 ? ( |
|||
<Typography |
|||
style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }} |
|||
> |
|||
<img src={svgError} alt="" width={50} height={50} />{' '} |
|||
<span style={{ marginLeft: '10px' }}>Email déjà pris</span> |
|||
</Typography> |
|||
) : ( |
|||
<Typography |
|||
style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }} |
|||
> |
|||
<img src={svgSuccess} alt="" width={50} height={50} />{' '} |
|||
<span>Insertion a été effectuée avec succès</span> |
|||
</Typography> |
|||
)} |
|||
<Box |
|||
sx={{ |
|||
marginTop: '2%', |
|||
display: 'flex', |
|||
gap: '20px', |
|||
alignItems: 'end', |
|||
justifyContent: 'flex-end' |
|||
}} |
|||
> |
|||
<Button onClick={handleClose} color="warning" variant="contained"> |
|||
OK |
|||
</Button> |
|||
</Box> |
|||
</Box> |
|||
</Modal> |
|||
) |
|||
|
|||
const sendData = async () => { |
|||
await window.syncro.getall() |
|||
} |
|||
|
|||
return ( |
|||
<div className={classe.mainHome}> |
|||
{modals()} |
|||
<div className={classeHome.header}> |
|||
<div className={classe.h1style}> |
|||
<div className={classeHome.blockTitle}> |
|||
<h1>Ajout d'admin</h1> |
|||
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}> |
|||
<Button color="warning" variant="contained"> |
|||
Recevoir une mise à jour au server |
|||
</Button> |
|||
<Button color="warning" variant="contained" onClick={sendData}> |
|||
Envoyer une mise à jour au server |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
{/* contenu */} |
|||
<div className={classeHome.contenaire}> |
|||
<div className={classeAdd.boxEtudiantsCard}> |
|||
<Box |
|||
sx={{ |
|||
position: 'absolute', |
|||
top: '50%', |
|||
left: '50%', |
|||
transform: 'translate(-50%, -50%)', |
|||
width: 700, |
|||
borderRadius: '3%', |
|||
bgcolor: 'background.paper', |
|||
boxShadow: 24, |
|||
p: 4 |
|||
}} |
|||
> |
|||
<Box |
|||
sx={{ |
|||
marginTop: '5%', |
|||
display: 'flex', |
|||
gap: '10px', |
|||
alignItems: 'start', |
|||
flexDirection: 'column', |
|||
fontSize: 16, |
|||
fontFamily: 'sans-serif', |
|||
justifyContent: 'flex-end' |
|||
}} |
|||
> |
|||
<span style={{ display: 'flex', marginLeft: '40%' }}> |
|||
<img src={img} alt="" height={150} width={150} /> |
|||
</span> |
|||
|
|||
<form onSubmit={handleSubmit} style={{ marginTop: '5%' }}> |
|||
<Grid container spacing={2}> |
|||
{/* matieres Algebre */} |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
label="username" |
|||
name="username" |
|||
color="warning" |
|||
fullWidth |
|||
value={formData.username} |
|||
onChange={handleInputChange} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<FaUser /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
inputRef={usernameRef} |
|||
sx={{ |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: '#ff9800' // Set the border color on hover |
|||
} |
|||
} |
|||
}} |
|||
/> |
|||
{/* error username */} |
|||
<span |
|||
className="text-danger" |
|||
ref={errorUsername} |
|||
style={{ fontSize: '13px' }} |
|||
></span> |
|||
</Grid> |
|||
{/* matieres Analyse */} |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
label="email" |
|||
name="email" |
|||
fullWidth |
|||
color="warning" |
|||
value={formData.email} |
|||
onChange={handleInputChange} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<FaEnvelope /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
inputRef={emailRef} |
|||
sx={{ |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: '#ff9800' // Set the border color on hover |
|||
} |
|||
} |
|||
}} |
|||
/> |
|||
{/* error email */} |
|||
<span |
|||
className="text-danger" |
|||
style={{ fontSize: '13px' }} |
|||
ref={errorEmail} |
|||
></span> |
|||
</Grid> |
|||
{/* matieres Mecanique general */} |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
label="password" |
|||
name="password" |
|||
fullWidth |
|||
color="warning" |
|||
value={formData.password} |
|||
onChange={handleInputChange} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<FaLock /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
inputRef={passwordRef} |
|||
sx={{ |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: '#ff9800' // Set the border color on hover |
|||
} |
|||
} |
|||
}} |
|||
/> |
|||
{/* error password */} |
|||
<span |
|||
className="text-danger" |
|||
ref={errorPassword} |
|||
style={{ fontSize: '13px' }} |
|||
></span> |
|||
</Grid> |
|||
{/* Matieres Resistance Materiaux */} |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
label="roles" |
|||
name="roles" |
|||
fullWidth |
|||
color="warning" |
|||
value={formData.roles} |
|||
onChange={handleInputChange} |
|||
disabled |
|||
InputProps={{ |
|||
startAdornment: <InputAdornment position="start"></InputAdornment> |
|||
}} |
|||
inputRef={rolesRef} |
|||
sx={{ |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: '#ff9800' // Set the border color on hover |
|||
} |
|||
} |
|||
}} |
|||
/> |
|||
</Grid> |
|||
{/* Submit Button */} |
|||
<Grid |
|||
item |
|||
xs={12} |
|||
style={{ display: 'flex', gap: '30px', justifyContent: 'flex-end' }} |
|||
> |
|||
<Button type="submit" color="warning" variant="contained"> |
|||
Enregister |
|||
</Button> |
|||
</Grid> |
|||
</Grid> |
|||
</form> |
|||
</Box> |
|||
</Box> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
export default Admin |
|||
@ -1,112 +0,0 @@ |
|||
import React, { useState } from 'react' |
|||
import { |
|||
Dialog, |
|||
DialogActions, |
|||
DialogContent, |
|||
DialogTitle, |
|||
TextField, |
|||
Button, |
|||
Autocomplete, |
|||
InputAdornment, |
|||
Box, |
|||
Grid |
|||
} from '@mui/material' |
|||
import { MdLabelImportantOutline } from 'react-icons/md' |
|||
|
|||
const AjoutTranche = ({ open, onClose, onSubmitSuccess, id }) => { |
|||
const [formData, setFormData] = useState({ |
|||
etudiant_id: id, |
|||
tranchename: '', |
|||
montant: '' |
|||
}) |
|||
|
|||
const handleChange = (e) => { |
|||
const { name, value } = e.target |
|||
setFormData({ ...formData, [name]: value }) |
|||
} |
|||
|
|||
const handleSubmit = async (e) => { |
|||
e.preventDefault() |
|||
let response = await window.etudiants.createTranche(formData) |
|||
|
|||
if (response.success) { |
|||
onClose() |
|||
onSubmitSuccess(true) |
|||
setFormData({ |
|||
etudiant_id: id, |
|||
tranchename: '', |
|||
montant: '' |
|||
}) |
|||
} |
|||
} |
|||
|
|||
return ( |
|||
<Dialog open={open} onClose={onClose}> |
|||
<form action="" onSubmit={handleSubmit}> |
|||
<DialogTitle>Ajout tranche</DialogTitle> |
|||
<DialogContent> |
|||
<Box sx={{ flexGrow: 1 }}> |
|||
<Grid container spacing={2}> |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
autoFocus |
|||
margin="normal" |
|||
required |
|||
name="tranchename" |
|||
label="Désignation" |
|||
type="text" |
|||
fullWidth |
|||
placeholder="Tranche 1" |
|||
variant="outlined" |
|||
value={formData.tranchename} |
|||
color="warning" |
|||
onChange={handleChange} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<MdLabelImportantOutline /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
/> |
|||
</Grid> |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
autoFocus |
|||
margin="normal" |
|||
required |
|||
name="montant" |
|||
label="Montant" |
|||
type="number" |
|||
fullWidth |
|||
placeholder="Montant" |
|||
variant="outlined" |
|||
value={formData.montant} |
|||
color="warning" |
|||
onChange={handleChange} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<MdLabelImportantOutline /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
/> |
|||
</Grid> |
|||
</Grid> |
|||
</Box> |
|||
</DialogContent> |
|||
<DialogActions> |
|||
<Button onClick={onClose} color="error"> |
|||
Annuler |
|||
</Button> |
|||
<Button type="submit" color="warning"> |
|||
Soumettre |
|||
</Button> |
|||
</DialogActions> |
|||
</form> |
|||
</Dialog> |
|||
) |
|||
} |
|||
|
|||
export default AjoutTranche |
|||
@ -1,203 +0,0 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import { Link, useParams } from 'react-router-dom' |
|||
import { FaPlus } from 'react-icons/fa' |
|||
import { Button, Grid, Paper, Checkbox, Modal, Typography, Box } from '@mui/material' |
|||
import { IoMdReturnRight } from 'react-icons/io' |
|||
import classe from '../assets/AllStyleComponents.module.css' |
|||
import classeAdd from '../assets/AddStudent.module.css' |
|||
import classeHome from '../assets/Home.module.css' |
|||
import svgSuccess from '../assets/success.svg' |
|||
|
|||
const AssignMatiereToMention = () => { |
|||
let { id } = useParams() |
|||
|
|||
const [mention, setMention] = useState([]) |
|||
const [matiere, setMatiere] = useState({}) |
|||
const [matiereMention, setMatiereMention] = useState([]) |
|||
const [formData, setFormData] = useState({}) |
|||
|
|||
// Fetch data on component mount |
|||
useEffect(() => { |
|||
window.matieres.getAsign({ id }).then((response) => { |
|||
setMatiereMention(response) // Set matiereMention |
|||
}) |
|||
window.mention.getMention().then((response) => { |
|||
setMention(response) // Set mention |
|||
}) |
|||
window.matieres.getMatiereByID({ id }).then((response) => { |
|||
setMatiere(response) // Set matiere |
|||
}) |
|||
}, [id]) |
|||
|
|||
// Initialize formData based on mentions and matiereMention |
|||
useEffect(() => { |
|||
if (mention.length && matiereMention.length) { |
|||
const initialFormData = mention.reduce((acc, mens) => { |
|||
// Check if the current mention ID exists in matiereMention |
|||
const isChecked = matiereMention.some((item) => item.mention_id === mens.id) |
|||
acc[mens.id] = isChecked // Set true if matched, false otherwise |
|||
return acc |
|||
}, {}) |
|||
setFormData(initialFormData) // Update formData |
|||
} |
|||
}, [mention, matiereMention]) |
|||
|
|||
/** |
|||
* Handle form submission |
|||
*/ |
|||
const formSubmit = async (e) => { |
|||
e.preventDefault() |
|||
|
|||
let response = await window.matieres.asign({ formData, id }) |
|||
console.log(response) |
|||
if (response.success) { |
|||
setOpen(true) |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* Handle checkbox change |
|||
*/ |
|||
const handleCheckboxChange = (id) => { |
|||
setFormData((prevData) => ({ |
|||
...prevData, |
|||
[id]: !prevData[id] // Toggle the checkbox value |
|||
})) |
|||
} |
|||
|
|||
/** |
|||
* hook to open modal |
|||
*/ |
|||
const [open, setOpen] = useState(false) |
|||
|
|||
/** |
|||
* function to close modal |
|||
*/ |
|||
const handleClose = () => { |
|||
setOpen(false) |
|||
} |
|||
|
|||
/** |
|||
* function to return the view Modal |
|||
* |
|||
* @returns {JSX} |
|||
*/ |
|||
const modals = () => ( |
|||
<Modal |
|||
open={open} |
|||
onClose={handleClose} |
|||
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 |
|||
}} |
|||
> |
|||
<Typography style={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}> |
|||
<img src={svgSuccess} alt="" width={50} height={50} />{' '} |
|||
<span>Changemet effectuée avec succès</span> |
|||
</Typography> |
|||
<Box |
|||
sx={{ |
|||
marginTop: '2%', |
|||
display: 'flex', |
|||
gap: '20px', |
|||
alignItems: 'end', |
|||
justifyContent: 'flex-end' |
|||
}} |
|||
> |
|||
<Button onClick={handleClose} color="warning" variant="contained"> |
|||
OK |
|||
</Button> |
|||
</Box> |
|||
</Box> |
|||
</Modal> |
|||
) |
|||
|
|||
return ( |
|||
<div className={classe.mainHome}> |
|||
{modals()} |
|||
<div className={classeAdd.header}> |
|||
<div className={classe.h1style}> |
|||
<div className={classeHome.blockTitle}> |
|||
<h1 style={{ display: 'flex', alignItems: 'center', gap: '10px' }}> |
|||
<FaPlus /> Asignation |
|||
</h1> |
|||
<Link to={'#'} onClick={() => window.history.back()}> |
|||
<Button color="warning" variant="contained"> |
|||
<IoMdReturnRight style={{ fontSize: '20px' }} /> |
|||
</Button> |
|||
</Link> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<Paper |
|||
sx={{ |
|||
height: 'auto', |
|||
minHeight: 500, |
|||
display: 'flex', |
|||
width: '100%' |
|||
}} |
|||
> |
|||
<form style={{ width: '100%', padding: '2%' }} onSubmit={formSubmit}> |
|||
<h5 style={{ textAlign: 'center', textDecoration: 'underline' }}> |
|||
Choisissez les mentions qui utilisent {matiere?.nom || 'la matière'} |
|||
</h5> |
|||
<Grid container spacing={2}> |
|||
{mention.map((mens) => ( |
|||
<Grid |
|||
item |
|||
xs={12} |
|||
sm={3} |
|||
sx={{ |
|||
display: 'flex', |
|||
justifyContent: 'space-between', |
|||
alignItems: 'center', |
|||
padding: 5 |
|||
}} |
|||
key={mens.id} |
|||
> |
|||
<span> |
|||
<b> |
|||
<i>{mens.nom}</i> |
|||
</b> |
|||
</span> |
|||
<span> |
|||
<Checkbox |
|||
checked={formData[mens.id] || false} // Bind checkbox to formData |
|||
onChange={() => handleCheckboxChange(mens.id)} // Handle change |
|||
color="success" |
|||
/> |
|||
</span> |
|||
</Grid> |
|||
))} |
|||
</Grid> |
|||
<Grid |
|||
item |
|||
xs={12} |
|||
style={{ |
|||
display: 'flex', |
|||
gap: '30px', |
|||
justifyContent: 'flex-end' |
|||
}} |
|||
> |
|||
<Button type="submit" color="warning" variant="contained"> |
|||
Enregistrer |
|||
</Button> |
|||
</Grid> |
|||
</form> |
|||
</Paper> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
export default AssignMatiereToMention |
|||
@ -1,259 +0,0 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import classe from '../assets/AllStyleComponents.module.css' |
|||
import classeAdd from '../assets/AddStudent.module.css' |
|||
import classeHome from '../assets/Home.module.css' |
|||
import { Link, useParams } from 'react-router-dom' |
|||
import { Button, Grid, Paper, Modal, Typography, Box } from '@mui/material' |
|||
import { IoMdReturnRight } from 'react-icons/io' |
|||
import { FaPlus } from 'react-icons/fa' |
|||
import OutlinedInput from '@mui/material/OutlinedInput' |
|||
import InputLabel from '@mui/material/InputLabel' |
|||
import MenuItem from '@mui/material/MenuItem' |
|||
import FormControl from '@mui/material/FormControl' |
|||
import Select from '@mui/material/Select' |
|||
import svgSuccess from '../assets/success.svg' |
|||
|
|||
const AssingMatiereToSemestre = () => { |
|||
let { id } = useParams() |
|||
|
|||
const [mentions, setMentions] = useState([]) |
|||
const [matiereSemestre, setMatiereSemestre] = useState([]) |
|||
const [matiere, setMatiere] = useState({}) |
|||
const [semestre, setSemestre] = useState([]) |
|||
|
|||
useEffect(() => { |
|||
window.matieres.asignSemestre({ id }).then((response) => { |
|||
setMentions(response) |
|||
}) |
|||
|
|||
window.matieres.getMatiereByID({ id }).then((response) => { |
|||
setMatiere(response) // Set matiere |
|||
}) |
|||
|
|||
window.matieres.getSemestreMatiere({ id }).then((response) => { |
|||
setMatiereSemestre(response) // Set matiere |
|||
}) |
|||
|
|||
window.matieres.getSemestre().then((response) => { |
|||
setSemestre(response) // Set matiere |
|||
}) |
|||
}, [id]) |
|||
|
|||
// State to manage selected semestres for each mention |
|||
const [selectedSemestres, setSelectedSemestres] = useState({}) |
|||
|
|||
// Populate the initial state for selectedSemestres |
|||
useEffect(() => { |
|||
const initialSelectedSemestres = {} |
|||
matiereSemestre.forEach((item) => { |
|||
if (!initialSelectedSemestres[item.mention_id]) { |
|||
initialSelectedSemestres[item.mention_id] = [] |
|||
} |
|||
initialSelectedSemestres[item.mention_id].push(item.semestre_id) |
|||
}) |
|||
setSelectedSemestres(initialSelectedSemestres) |
|||
}, [matiereSemestre]) |
|||
|
|||
// Handle change in Select |
|||
const handleChange = (id) => (event) => { |
|||
const { |
|||
target: { value } |
|||
} = event |
|||
|
|||
// Update state for the specific mention ID |
|||
setSelectedSemestres((prevState) => ({ |
|||
...prevState, |
|||
[id]: typeof value === 'string' ? value.split(',') : value |
|||
})) |
|||
} |
|||
|
|||
const formSubmit = async (e) => { |
|||
e.preventDefault() |
|||
|
|||
let response = await window.matieres.insertUpdateMentionSemestre({ id, selectedSemestres }) |
|||
|
|||
console.log(response) |
|||
if (response.success) { |
|||
setOpen(true) |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* hook to open modal |
|||
*/ |
|||
const [open, setOpen] = useState(false) |
|||
|
|||
/** |
|||
* function to close modal |
|||
*/ |
|||
const handleClose = () => { |
|||
setOpen(false) |
|||
} |
|||
|
|||
/** |
|||
* function to return the view Modal |
|||
* |
|||
* @returns {JSX} |
|||
*/ |
|||
const modals = () => ( |
|||
<Modal |
|||
open={open} |
|||
onClose={handleClose} |
|||
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 |
|||
}} |
|||
> |
|||
<Typography style={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}> |
|||
<img src={svgSuccess} alt="" width={50} height={50} />{' '} |
|||
<span>Changemet effectuée avec succès</span> |
|||
</Typography> |
|||
<Box |
|||
sx={{ |
|||
marginTop: '2%', |
|||
display: 'flex', |
|||
gap: '20px', |
|||
alignItems: 'end', |
|||
justifyContent: 'flex-end' |
|||
}} |
|||
> |
|||
<Button onClick={handleClose} color="warning" variant="contained"> |
|||
OK |
|||
</Button> |
|||
</Box> |
|||
</Box> |
|||
</Modal> |
|||
) |
|||
|
|||
console.log(matiereSemestre) |
|||
|
|||
// Step 1: Preprocess matiereSemestre to create a mapping |
|||
const preprocessSemestres = () => { |
|||
const mapping = {} |
|||
matiereSemestre.forEach((item) => { |
|||
if (item.matiere_id === id) { |
|||
// Filter by matiere_id if necessary |
|||
if (!mapping[item.mention_id]) { |
|||
mapping[item.mention_id] = [] |
|||
} |
|||
mapping[item.mention_id].push(item.semestre_id) |
|||
} |
|||
}) |
|||
return mapping |
|||
} |
|||
|
|||
return ( |
|||
<div className={classe.mainHome}> |
|||
{modals()} |
|||
<div className={classeAdd.header}> |
|||
<div className={classe.h1style}> |
|||
<div className={classeHome.blockTitle}> |
|||
<h1 style={{ display: 'flex', alignItems: 'center', gap: '10px' }}> |
|||
<FaPlus /> Asignation Semestre |
|||
</h1> |
|||
<Link to={'/matiere'}> |
|||
<Button color="warning" variant="contained"> |
|||
<IoMdReturnRight style={{ fontSize: '20px' }} /> |
|||
</Button> |
|||
</Link> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<Paper |
|||
sx={{ |
|||
height: 'auto', |
|||
minHeight: 500, |
|||
display: 'flex', |
|||
width: '100%' |
|||
}} |
|||
> |
|||
<form style={{ width: '100%', padding: '2%' }} onSubmit={formSubmit}> |
|||
<h5 style={{ textAlign: 'center', textDecoration: 'underline' }}> |
|||
Choisissez les semestre dans la quelle on enseigne {matiere?.nom || 'la matière'} |
|||
</h5> |
|||
<Grid container spacing={2}> |
|||
{mentions.map((mens) => ( |
|||
<Grid |
|||
item |
|||
xs={12} |
|||
sm={4} |
|||
sx={{ |
|||
display: 'flex', |
|||
justifyContent: 'space-between', |
|||
alignItems: 'center', |
|||
padding: 5 |
|||
}} |
|||
key={mens.id} |
|||
> |
|||
<div> |
|||
<div> |
|||
<b> |
|||
<i>{mens.nom}</i> |
|||
</b> |
|||
</div> |
|||
<div> |
|||
<FormControl sx={{ m: 1, width: 300 }}> |
|||
<InputLabel id={`semestre-label-${mens.id}`} color="warning"> |
|||
Semestre |
|||
</InputLabel> |
|||
<Select |
|||
labelId={`semestre-label-${mens.id}`} |
|||
id={`semestre-select-${mens.id}`} |
|||
multiple |
|||
color="warning" |
|||
size="small" |
|||
required |
|||
value={selectedSemestres[mens.id] || []} // Pre-select semestres for this mention |
|||
onChange={handleChange(mens.id)} // Pass mention ID to handler |
|||
input={<OutlinedInput label="Semestre" />} |
|||
MenuProps={{ |
|||
PaperProps: { |
|||
style: { |
|||
maxHeight: 200, // Limit dropdown height |
|||
width: 250 // Adjust dropdown width if needed |
|||
} |
|||
} |
|||
}} |
|||
> |
|||
{semestre.map((sem) => ( |
|||
<MenuItem key={sem.id} value={sem.id}> |
|||
{sem.nom} |
|||
</MenuItem> |
|||
))} |
|||
</Select> |
|||
</FormControl> |
|||
</div> |
|||
</div> |
|||
</Grid> |
|||
))} |
|||
</Grid> |
|||
<Grid |
|||
item |
|||
xs={12} |
|||
style={{ |
|||
display: 'flex', |
|||
gap: '30px', |
|||
justifyContent: 'flex-end' |
|||
}} |
|||
> |
|||
<Button type="submit" color="warning" variant="contained"> |
|||
Enregistrer |
|||
</Button> |
|||
</Grid> |
|||
</form> |
|||
</Paper> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
export default AssingMatiereToSemestre |
|||
@ -1,30 +0,0 @@ |
|||
import React from 'react' |
|||
import { |
|||
GridToolbarContainer, |
|||
GridToolbarFilterButton, |
|||
GridToolbarColumnsButton, |
|||
GridToolbarExport |
|||
} from '@mui/x-data-grid' |
|||
import { Button } from '@mui/material' |
|||
import { FaCloudUploadAlt } from 'react-icons/fa' |
|||
|
|||
const CustomBar = ({ onImport }) => { |
|||
return ( |
|||
<GridToolbarContainer> |
|||
<GridToolbarColumnsButton /> |
|||
<GridToolbarFilterButton /> |
|||
{/* Custom import button */} |
|||
<Button |
|||
variant="contained" |
|||
color="inherit" |
|||
startIcon={<FaCloudUploadAlt />} |
|||
onClick={onImport} |
|||
> |
|||
Importer |
|||
</Button> |
|||
<GridToolbarExport /> |
|||
</GridToolbarContainer> |
|||
) |
|||
} |
|||
|
|||
export default CustomBar |
|||
@ -1,52 +0,0 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import { |
|||
Dialog, |
|||
DialogActions, |
|||
DialogContent, |
|||
DialogTitle, |
|||
Button, |
|||
Box, |
|||
Typography |
|||
} from '@mui/material' |
|||
|
|||
const DeleteTranche = ({ open, onClose, id, onSubmitSuccess }) => { |
|||
const [idDelete, setIdDelete] = useState(null) |
|||
|
|||
useEffect(() => { |
|||
setIdDelete(id) |
|||
}, [id]) |
|||
|
|||
console.log(idDelete) |
|||
|
|||
const deleteOption = async () => { |
|||
if (idDelete !== null) { |
|||
const id = idDelete |
|||
let response = await window.etudiants.deleteTranche({ id }) |
|||
if (response.success) { |
|||
onSubmitSuccess(true) |
|||
onClose() |
|||
} |
|||
} |
|||
} |
|||
|
|||
return ( |
|||
<Dialog open={open} onClose={onClose}> |
|||
<DialogTitle>Suppression</DialogTitle> |
|||
<DialogContent> |
|||
<Box sx={{ flexGrow: 1, width: '300px' }}> |
|||
<Typography>Voulez vous Supprimer ?</Typography> |
|||
</Box> |
|||
</DialogContent> |
|||
<DialogActions> |
|||
<Button onClick={onClose} color="error"> |
|||
Annuler |
|||
</Button> |
|||
<Button onClick={deleteOption} color="warning"> |
|||
Soumettre |
|||
</Button> |
|||
</DialogActions> |
|||
</Dialog> |
|||
) |
|||
} |
|||
|
|||
export default DeleteTranche |
|||
@ -1,247 +0,0 @@ |
|||
import React, { useRef, useState } from 'react' |
|||
import classe from '../assets/Login.module.css' |
|||
import { FaEnvelope, FaLock, FaLockOpen } from 'react-icons/fa' |
|||
import { Link } from 'react-router-dom' |
|||
import { |
|||
Modal, |
|||
Box, |
|||
Container, |
|||
Grid, |
|||
Card, |
|||
Typography, |
|||
TextField, |
|||
Button, |
|||
InputAdornment |
|||
} from '@mui/material' |
|||
import { validationForgotPassword } from './validation/ForgotPassword' |
|||
|
|||
const ForgotPassword = () => { |
|||
/** |
|||
* hook to store data from the input field |
|||
*/ |
|||
const [email, setEmail] = useState() |
|||
const [password, setPassword] = useState() |
|||
const [passwordConfirmation, setPasswordConfirmation] = useState() |
|||
|
|||
/** |
|||
* hook to open modal and set the sattus and message |
|||
*/ |
|||
const [open, setOpen] = useState(false) |
|||
const [message, setMessage] = useState('') |
|||
const [status, setStatus] = useState(null) |
|||
|
|||
const handleClose = () => setOpen(false) |
|||
|
|||
/** |
|||
* ref for our email and password, confirm password input and the error span |
|||
*/ |
|||
const emailRef = useRef() |
|||
const passwordRef = useRef() |
|||
const passwordConfirmationRef = useRef() |
|||
const emailError = useRef() |
|||
const passwordError = useRef() |
|||
const passwordConfirmationError = useRef() |
|||
|
|||
/** |
|||
* function to return the view Modal |
|||
* |
|||
* @returns {JSX} |
|||
*/ |
|||
const modals = () => ( |
|||
<Modal |
|||
open={open} |
|||
onClose={handleClose} |
|||
aria-labelledby="modal-title" |
|||
aria-describedby="modal-description" |
|||
> |
|||
<Box |
|||
sx={{ |
|||
position: 'absolute', |
|||
top: '50%', |
|||
left: '50%', |
|||
transform: 'translate(-50%, -50%)', |
|||
width: 400, |
|||
bgcolor: 'background.paper', |
|||
boxShadow: 24, |
|||
p: 4 |
|||
}} |
|||
> |
|||
<Typography id="modal-title" variant="h6" component="h2"> |
|||
{status === 200 ? 'Success' : 'Error'} |
|||
</Typography> |
|||
<Typography id="modal-description" sx={{ mt: 2 }}> |
|||
{message} |
|||
</Typography> |
|||
<Button onClick={handleClose}>Close</Button> |
|||
</Box> |
|||
</Modal> |
|||
) |
|||
|
|||
/** |
|||
* function to send the email verification |
|||
* to change the password and redirect the user to login |
|||
* |
|||
* @param {any} e |
|||
*/ |
|||
const verification = async (e) => { |
|||
e.preventDefault() |
|||
|
|||
let validation = validationForgotPassword( |
|||
emailRef.current, |
|||
passwordRef.current, |
|||
passwordConfirmationRef.current, |
|||
emailError.current, |
|||
passwordError.current, |
|||
passwordConfirmationError.current |
|||
) |
|||
console.log(validation) |
|||
if (validation === true) { |
|||
const response = await window.allUser.forgotPassword({ |
|||
email, |
|||
password, |
|||
passwordConfirmation |
|||
}) |
|||
|
|||
if (response.status === 200) { |
|||
setMessage(response.message) |
|||
setStatus(200) |
|||
} else { |
|||
setMessage(response.message) |
|||
setStatus(response.status) |
|||
} |
|||
setOpen(true) |
|||
console.log(response) |
|||
} |
|||
} |
|||
|
|||
return ( |
|||
<Container |
|||
maxWidth={false} |
|||
sx={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }} |
|||
className={classe.container} |
|||
> |
|||
{modals()} |
|||
<Grid container justifyContent="center"> |
|||
<Grid item xs={12} md={6} lg={4}> |
|||
<Card className={`p-4 shadow ${classe.cards}`} sx={{ padding: 4, boxShadow: 3 }}> |
|||
<Typography variant="h5" align="center" gutterBottom> |
|||
Changer de mot de passe |
|||
</Typography> |
|||
<form onSubmit={verification} className={classe.formulaireLogin}> |
|||
<TextField |
|||
label="Email" |
|||
variant="outlined" |
|||
type="text" |
|||
color="secondary" |
|||
className={classe.input} |
|||
fullWidth |
|||
margin="normal" |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<FaEnvelope style={{ color: 'white' }} /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
sx={{ |
|||
'& .MuiOutlinedInput-root': { |
|||
'& fieldset': { |
|||
borderColor: 'white' // Set the border color when not focused |
|||
}, |
|||
'&:hover fieldset': { |
|||
borderColor: 'rgb(156, 39, 176)' // Set the border color on hover |
|||
} |
|||
} |
|||
}} |
|||
placeholder="Entrer email" |
|||
onChange={(e) => setEmail(e.target.value)} |
|||
inputRef={emailRef} |
|||
/> |
|||
<span ref={emailError} className="text-danger"></span> |
|||
|
|||
<TextField |
|||
label="Nouveau Mot de passe" |
|||
variant="outlined" |
|||
type="password" |
|||
className={classe.input} |
|||
color="secondary" |
|||
fullWidth |
|||
margin="normal" |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<FaLock style={{ color: 'white' }} /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
sx={{ |
|||
'& .MuiOutlinedInput-root': { |
|||
'& fieldset': { |
|||
borderColor: 'white' // Set the border color when not focused |
|||
}, |
|||
'&:hover fieldset': { |
|||
borderColor: 'rgb(156, 39, 176)' // Set the border color on hover |
|||
} |
|||
} |
|||
}} |
|||
placeholder="Mot de passe" |
|||
onChange={(e) => setPassword(e.target.value)} |
|||
inputRef={passwordRef} |
|||
/> |
|||
<span ref={passwordError} className="text-danger"></span> |
|||
|
|||
<TextField |
|||
label="Confirmation Mot de passe" |
|||
variant="outlined" |
|||
type="password" |
|||
color="secondary" |
|||
fullWidth |
|||
margin="normal" |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<FaLockOpen style={{ color: 'white' }} /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
sx={{ |
|||
'& .MuiOutlinedInput-root': { |
|||
'& fieldset': { |
|||
borderColor: 'white' // Set the border color when not focused |
|||
}, |
|||
'&:hover fieldset': { |
|||
borderColor: 'rgb(156, 39, 176)' // Set the border color on hover |
|||
} |
|||
} |
|||
}} |
|||
className={classe.input} |
|||
placeholder="Confirmation Mot de passe" |
|||
onChange={(e) => setPasswordConfirmation(e.target.value)} |
|||
inputRef={passwordConfirmationRef} |
|||
/> |
|||
<span ref={passwordConfirmationError} className="text-danger"></span> |
|||
|
|||
<Button |
|||
variant="contained" |
|||
color="secondary" |
|||
type="submit" |
|||
fullWidth |
|||
sx={{ marginTop: 2 }} |
|||
> |
|||
Modifier |
|||
</Button> |
|||
|
|||
<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '1rem' }}> |
|||
<Link to="/login" style={{ color: '#FFFFFF' }}> |
|||
Se connecter |
|||
</Link> |
|||
</div> |
|||
</form> |
|||
</Card> |
|||
</Grid> |
|||
</Grid> |
|||
</Container> |
|||
) |
|||
} |
|||
|
|||
export default ForgotPassword |
|||
@ -1,194 +0,0 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import classe from '../assets/AllStyleComponents.module.css' |
|||
import { Bar } from 'react-chartjs-2' |
|||
import { |
|||
Chart as ChartJS, |
|||
CategoryScale, |
|||
LinearScale, |
|||
BarElement, |
|||
Title, |
|||
Tooltip, |
|||
Legend |
|||
} from 'chart.js' |
|||
import classeHome from '../assets/Home.module.css' |
|||
import dclass from '../assets/Dashboard.module.css' |
|||
import dayjs from 'dayjs' |
|||
import MenuItem from '@mui/material/MenuItem' |
|||
import FormControl from '@mui/material/FormControl' |
|||
import Select from '@mui/material/Select' |
|||
import InputLabel from '@mui/material/InputLabel' |
|||
|
|||
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend) |
|||
|
|||
const Home = () => { |
|||
const [etudiants, setEtudiants] = useState([]) |
|||
const [niveau, setNiveau] = useState([]) |
|||
const [annee_scolaire, setAnnee_scolaire] = useState([]) |
|||
const [originalEtudiants, setOriginalEtudiants] = useState([]) |
|||
// Get the current year |
|||
const currentYear = dayjs().year() |
|||
|
|||
useEffect(() => { |
|||
// Fetch data and update state |
|||
window.etudiants.getDataToDashboards().then((response) => { |
|||
setEtudiants(response.etudiants) |
|||
setOriginalEtudiants(response.etudiants) |
|||
setNiveau(response.niveau) |
|||
setAnnee_scolaire(response.anne_scolaire) |
|||
}) |
|||
}, []) |
|||
|
|||
// filter all data |
|||
|
|||
// ordre des colones de filtre |
|||
const desiredOrder = ['L1', 'L2', 'L3', 'M1', 'M2', 'D1', 'D2', 'D3'] |
|||
let allNiveau = niveau.map((item) => item.nom) |
|||
allNiveau.sort((a, b) => desiredOrder.indexOf(a) - desiredOrder.indexOf(b)) |
|||
|
|||
const studentGrades = {} |
|||
|
|||
// Loop through allNiveau and set the number of students for each key |
|||
allNiveau.forEach((niveauNom) => { |
|||
// Filter etudiants based on the matching niveau |
|||
const studentCount = etudiants.filter((etudiant) => etudiant.niveau === niveauNom).length |
|||
|
|||
// Assign the student count as the value for the corresponding key in studentGrades |
|||
studentGrades[niveauNom] = studentCount |
|||
}) |
|||
const studentCounts = Object.values(studentGrades) |
|||
|
|||
// Find the maximum value using Math.max |
|||
const maxStudentCount = Math.max(...studentCounts) |
|||
|
|||
const FilterAnneeScolaire = (e) => { |
|||
let annee_scolaire = e.target.value |
|||
const filteredEtudiants = originalEtudiants.filter( |
|||
(etudiant) => etudiant.annee_scolaire === annee_scolaire |
|||
) |
|||
setEtudiants(filteredEtudiants) |
|||
if (annee_scolaire == 'general') { |
|||
setEtudiants(originalEtudiants) |
|||
} |
|||
} |
|||
// end filter all data |
|||
|
|||
// Calculate the number of classes |
|||
const numberOfClasses = Object.keys(studentGrades).length |
|||
|
|||
// Data for the Bar chart |
|||
const data = { |
|||
labels: Object.keys(studentGrades), // Class levels |
|||
datasets: [ |
|||
{ |
|||
label: 'Nombre des étudiants', |
|||
data: Object.values(studentGrades), // Student counts |
|||
backgroundColor: [ |
|||
'#FF6384', |
|||
'#36A2EB', |
|||
'#FFCE56', |
|||
'#4BC0C0', |
|||
'#9966FF', |
|||
'#FF9F40', |
|||
'#C9CBCF', |
|||
'#00A36C' |
|||
], // Colors for each bar |
|||
borderColor: [ |
|||
'#FF6384', |
|||
'#36A2EB', |
|||
'#FFCE56', |
|||
'#4BC0C0', |
|||
'#9966FF', |
|||
'#FF9F40', |
|||
'#C9CBCF', |
|||
'#00A36C' |
|||
], |
|||
borderWidth: 1 |
|||
} |
|||
] |
|||
} |
|||
|
|||
// Chart options |
|||
const options = { |
|||
responsive: true, |
|||
plugins: { |
|||
legend: { |
|||
position: 'top' |
|||
}, |
|||
title: { |
|||
display: true, |
|||
text: `Nombre des niveau (Total : ${numberOfClasses})` |
|||
} |
|||
}, |
|||
scales: { |
|||
y: { |
|||
beginAtZero: true, |
|||
max: maxStudentCount // Set max value for the Y axis |
|||
} |
|||
} |
|||
} |
|||
|
|||
return ( |
|||
<div className={classe.mainHome}> |
|||
<div className={classeHome.header}> |
|||
<div className={classe.h1style}> |
|||
<div className={classeHome.blockTitle}> |
|||
<h1>Dashboard</h1> |
|||
<FormControl |
|||
sx={{ |
|||
m: 1, |
|||
width: '30%', |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: '#ff9800' // Set the border color on hover |
|||
} |
|||
} |
|||
}} |
|||
size="small" |
|||
variant="outlined" |
|||
> |
|||
<InputLabel |
|||
id="demo-select-small-label" |
|||
sx={{ color: 'black', fontSize: '15px', textTransform: 'capitalize' }} |
|||
color="warning" |
|||
> |
|||
Année Scolaire |
|||
</InputLabel> |
|||
<Select |
|||
labelId="demo-select-small-label" |
|||
id="demo-select-small" |
|||
label="Année Scolaire" |
|||
color="warning" |
|||
defaultValue={'general'} |
|||
onChange={FilterAnneeScolaire} |
|||
sx={{ |
|||
background: 'white', |
|||
textTransform: 'capitalize', |
|||
display: 'flex', |
|||
alignItems: 'center', // Align icon and text vertically |
|||
'& .MuiSelect-icon': { |
|||
marginLeft: 'auto' // Keep the dropdown arrow to the right |
|||
} |
|||
}} |
|||
> |
|||
<MenuItem value="general" selected> |
|||
<em>Géneral</em> |
|||
</MenuItem> |
|||
{annee_scolaire.map((niveau) => ( |
|||
<MenuItem value={niveau.annee_scolaire} key={niveau.annee_scolaire}> |
|||
{niveau.annee_scolaire} |
|||
</MenuItem> |
|||
))} |
|||
</Select> |
|||
</FormControl> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
{/* display each bars */} |
|||
<div className={dclass.display}> |
|||
<Bar data={data} options={options} /> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
export default Home |
|||
@ -1,489 +0,0 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import classe from '../assets/AllStyleComponents.module.css' |
|||
import classeAdd from '../assets/AddStudent.module.css' |
|||
import classeHome from '../assets/Home.module.css' |
|||
import { Box, Button, Typography, ThemeProvider, Modal } from '@mui/material' |
|||
import { Link } from 'react-router-dom' |
|||
import { FaCloudDownloadAlt, FaCloudUploadAlt, FaFileExcel } from 'react-icons/fa' |
|||
import { IoMdReturnRight } from 'react-icons/io' |
|||
import { styled, createTheme } from '@mui/material/styles' |
|||
import * as XLSX from 'xlsx' |
|||
import Papa from 'papaparse' |
|||
import { DataGrid, GridToolbarContainer, GridToolbarColumnsButton } from '@mui/x-data-grid' |
|||
import { frFR } from '@mui/x-data-grid/locales' |
|||
import CustomBar from './CustomBar' |
|||
import dayjs from 'dayjs' |
|||
import svgSuccess from '../assets/success.svg' |
|||
import svgError from '../assets/error.svg' |
|||
import { MenuItem, Select, FormControl, InputLabel } from '@mui/material' |
|||
|
|||
const ImportMatiere = () => { |
|||
const VisuallyHiddenInput = styled('input')({ |
|||
clip: 'rect(0 0 0 0)', |
|||
clipPath: 'inset(50%)', |
|||
height: 1, |
|||
overflow: 'hidden', |
|||
position: 'absolute', |
|||
bottom: 0, |
|||
left: 0, |
|||
whiteSpace: 'nowrap', |
|||
width: 1 |
|||
}) |
|||
|
|||
const [error, setError] = useState('') |
|||
const [isInserted, setIsinserted] = useState(true) |
|||
const [message, setMessage] = useState('') |
|||
const [tableData, setTableData] = useState([]) |
|||
const [files, setFiles] = useState() |
|||
const [header, setHeader] = useState([]) |
|||
let field = [] |
|||
const [dynamicColumns, setColumns] = useState([]) |
|||
|
|||
for (let index = 0; index < header.length; index++) { |
|||
field.push(header[index].toLowerCase().replace(/\s+/g, '_')) |
|||
} |
|||
|
|||
useEffect(() => { |
|||
setColumns( |
|||
header.map((col, index) => ({ |
|||
field: field[index], // Converts the header text to field names (e.g., "Nom" -> "nom") |
|||
headerName: col, // Display the header as is |
|||
width: 150 // Adjust the width as needed |
|||
})) |
|||
) |
|||
}, [header]) |
|||
|
|||
const theme = createTheme({ |
|||
components: { |
|||
MuiIconButton: { |
|||
styleOverrides: { |
|||
root: { |
|||
color: 'gray' // Toolbar icons color |
|||
} |
|||
} |
|||
}, |
|||
MuiButton: { |
|||
styleOverrides: { |
|||
root: { |
|||
color: '#121212' // Button text color |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
|
|||
const paginationModel = { page: 0, pageSize: 5 } |
|||
|
|||
// Assuming `tableData` is an array where each entry corresponds to a student's data |
|||
const dataRow = tableData.map((etudiant, index) => { |
|||
// Dynamically create an object with fields from the header and data from `etudiant` |
|||
let row = { id: index + 1 } // Unique ID for each row |
|||
|
|||
field.forEach((fieldName, idx) => { |
|||
if (fieldName === 'date_de_naissance') { |
|||
row[fieldName] = dayjs(etudiant[idx]).format('DD-MM-YYYY') // Format date |
|||
} else { |
|||
row[fieldName] = etudiant[idx] // Assign value to field dynamically |
|||
} |
|||
}) |
|||
|
|||
return row |
|||
}) |
|||
|
|||
const handleFileChange = (event) => { |
|||
const file = event.target.files[0] |
|||
setFiles(event.target.files[0]) |
|||
if (!file) { |
|||
setError('No file selected') |
|||
return |
|||
} |
|||
|
|||
const fileExtension = file.name.split('.').pop().toLowerCase() |
|||
|
|||
if (fileExtension === 'xlsx') { |
|||
const reader = new FileReader() |
|||
reader.onload = (e) => { |
|||
const data = new Uint8Array(e.target.result) |
|||
const workbook = XLSX.read(data, { type: 'array' }) |
|||
|
|||
// Extract data from all sheets and combine |
|||
const allData = [] |
|||
workbook.SheetNames.forEach((sheetName) => { |
|||
const worksheet = workbook.Sheets[sheetName] |
|||
const rows = XLSX.utils.sheet_to_json(worksheet, { header: 1 }) |
|||
setHeader(rows[0]) // keep the header |
|||
allData.push(...rows.slice(1)) // Skip header row for each sheet |
|||
}) |
|||
setTableData(allData) |
|||
} |
|||
reader.readAsArrayBuffer(file) |
|||
} else if (fileExtension === 'csv') { |
|||
const reader = new FileReader() |
|||
reader.onload = (e) => { |
|||
Papa.parse(e.target.result, { |
|||
complete: (results) => { |
|||
setHeader(results.data[0]) // keep the header |
|||
setTableData(results.data.slice(1)) // Skip header row |
|||
}, |
|||
header: false |
|||
}) |
|||
} |
|||
reader.readAsText(file) |
|||
} else { |
|||
setError('Unsupported file format. Please upload .xlsx or .csv file.') |
|||
setTableData([]) |
|||
} |
|||
} |
|||
|
|||
const exemplaireFileExcel = [ |
|||
{ |
|||
nom: 'matiere 1', |
|||
credit: 5, |
|||
uniter: 'MUI', |
|||
heure: 39 |
|||
}, |
|||
{ |
|||
nom: 'matiere 2', |
|||
credit: 5, |
|||
uniter: 'MUI', |
|||
heure: 39 |
|||
}, |
|||
{ |
|||
nom: 'matiere 3', |
|||
credit: 5, |
|||
uniter: 'MUI', |
|||
heure: 39 |
|||
}, |
|||
{ |
|||
nom: 'matiere 4', |
|||
credit: 5, |
|||
uniter: 'MUI', |
|||
heure: 39 |
|||
}, |
|||
{ |
|||
nom: 'matiere 5', |
|||
credit: 5, |
|||
uniter: 'MUI', |
|||
heure: 39 |
|||
} |
|||
] |
|||
|
|||
const convertToExcel = () => { |
|||
// convert json to sheet |
|||
const worksheet = XLSX.utils.json_to_sheet(exemplaireFileExcel) |
|||
|
|||
// Create a new workbook and append the worksheet |
|||
const workbook = XLSX.utils.book_new() |
|||
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1') |
|||
|
|||
// Write the workbook to a Blob and create a download link |
|||
const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }) |
|||
const data = new Blob([excelBuffer], { type: 'application/octet-stream' }) |
|||
const url = URL.createObjectURL(data) |
|||
|
|||
// Trigger a download |
|||
const link = document.createElement('a') |
|||
link.href = url |
|||
link.download = 'exemplaier_matiere.xlsx' |
|||
link.click() |
|||
|
|||
// Clean up |
|||
URL.revokeObjectURL(url) |
|||
} |
|||
|
|||
const handleColumnVisibilityChange = (model) => { |
|||
// Get the currently visible columns |
|||
const visibleColumns = dynamicColumns.filter((column) => model[column.field] !== false) |
|||
|
|||
// Create a new Excel file with visible columns |
|||
createExcelFile(visibleColumns) |
|||
} |
|||
|
|||
const createExcelFile = (columns) => { |
|||
// Extract and set the header |
|||
const header = columns.reduce((acc, col) => { |
|||
acc[col.field] = col.headerName || col.field // Use headerName or field as default |
|||
return acc |
|||
}, {}) |
|||
|
|||
// Map the data rows to match the extracted headers |
|||
const worksheetData = dataRow.map((row) => { |
|||
const filteredRow = {} |
|||
columns.forEach((col) => { |
|||
const headerName = header[col.field] |
|||
filteredRow[headerName] = row[col.field] |
|||
}) |
|||
return filteredRow |
|||
}) |
|||
|
|||
// Create a worksheet from the data |
|||
const ws = XLSX.utils.json_to_sheet(worksheetData) |
|||
|
|||
// Create a workbook and add the worksheet to it |
|||
const wb = XLSX.utils.book_new() |
|||
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1') |
|||
|
|||
// Generate the Excel file as binary data |
|||
const excelFile = XLSX.write(wb, { bookType: 'xlsx', type: 'array' }) |
|||
|
|||
// Create a Blob for the Excel data |
|||
const blob = new Blob([excelFile], { |
|||
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' |
|||
}) |
|||
|
|||
// Create a link element to trigger the download |
|||
const url = URL.createObjectURL(blob) |
|||
const link = document.createElement('a') |
|||
link.href = url |
|||
link.download = 'original-file.xlsx' // Original file name or any desired name |
|||
document.body.appendChild(link) |
|||
link.click() |
|||
document.body.removeChild(link) |
|||
URL.revokeObjectURL(url) // Clean up |
|||
} |
|||
|
|||
/** |
|||
* fonction qui envoye dans le back |
|||
*/ |
|||
const handleImport = async () => { |
|||
// Code to handle file import (can open a file dialog or call handleFileChange) |
|||
|
|||
let response = await window.matieres.importExcel(files.path) |
|||
|
|||
console.log(response) |
|||
|
|||
if (response.message) { |
|||
setMessage(response.message) |
|||
} |
|||
|
|||
if (response.error) { |
|||
setIsinserted(true) |
|||
setOpen(true) |
|||
setTableData([]) |
|||
} else { |
|||
setIsinserted(false) |
|||
setOpen(true) |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* hook to open modal |
|||
*/ |
|||
const [open, setOpen] = useState(false) |
|||
|
|||
/** |
|||
* function to close modal |
|||
*/ |
|||
const handleClose = () => setOpen(false) |
|||
|
|||
/** |
|||
* function to return the view Modal |
|||
* |
|||
* @returns {JSX} |
|||
*/ |
|||
const modals = () => ( |
|||
<Modal |
|||
open={open} |
|||
onClose={handleClose} |
|||
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 |
|||
}} |
|||
> |
|||
{isInserted ? ( |
|||
<Typography |
|||
style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }} |
|||
> |
|||
<img src={svgSuccess} alt="" width={50} height={50} />{' '} |
|||
<span>Importation a été effectuée avec succès</span> |
|||
</Typography> |
|||
) : ( |
|||
<Typography |
|||
style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }} |
|||
> |
|||
<img src={svgError} alt="" width={50} height={50} />{' '} |
|||
<span> |
|||
L'importation n'a pas été effectuée |
|||
<br /> |
|||
{message} |
|||
</span> |
|||
</Typography> |
|||
)} |
|||
<Box |
|||
sx={{ |
|||
marginTop: '2%', |
|||
display: 'flex', |
|||
gap: '20px', |
|||
alignItems: 'end', |
|||
justifyContent: 'flex-end' |
|||
}} |
|||
> |
|||
<Button onClick={handleClose} color="warning" variant="contained"> |
|||
OK |
|||
</Button> |
|||
</Box> |
|||
</Box> |
|||
</Modal> |
|||
) |
|||
|
|||
// Handle header name change for a specific field and auto-export to Excel |
|||
const handleHeaderChange = (field, newHeaderName) => { |
|||
setColumns((prevColumns) => |
|||
prevColumns.map((col) => (col.field === field ? { ...col, headerName: newHeaderName } : col)) |
|||
) |
|||
} |
|||
|
|||
return ( |
|||
<div className={classe.mainHome}> |
|||
{modals()} |
|||
<div className={classeAdd.header}> |
|||
<div className={classe.h1style}> |
|||
<div className={classeHome.blockTitle}> |
|||
<h1 style={{ display: 'flex', alignItems: 'center', gap: '10px' }}> |
|||
<FaFileExcel /> |
|||
Importation de données |
|||
</h1> |
|||
<Link to={'/addmatiere'}> |
|||
<Button color="warning" variant="contained"> |
|||
<IoMdReturnRight style={{ fontSize: '20px' }} /> |
|||
</Button> |
|||
</Link> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
{/* displaying */} |
|||
<Box |
|||
sx={{ |
|||
position: 'absolute', |
|||
top: '52%', |
|||
left: '52%', |
|||
transform: 'translate(-50%, -50%)', |
|||
width: '95%', |
|||
borderRadius: '2%', |
|||
bgcolor: 'background.paper', |
|||
boxShadow: 24, |
|||
p: 4 |
|||
}} |
|||
> |
|||
<Box sx={{ mt: 2, display: 'flex', alignItems: 'center', flexDirection: 'column' }}> |
|||
<div style={{ display: 'flex', gap: '20px', marginBottom: '20px' }}> |
|||
<Button |
|||
component="label" |
|||
variant="contained" |
|||
color="warning" |
|||
startIcon={<FaCloudUploadAlt />} |
|||
> |
|||
Charger un fichier excel |
|||
<VisuallyHiddenInput type="file" onChange={handleFileChange} accept=".xlsx, .csv" /> |
|||
</Button> |
|||
<Button |
|||
component="label" |
|||
variant="contained" |
|||
color="error" |
|||
startIcon={<FaCloudDownloadAlt />} |
|||
onClick={convertToExcel} |
|||
> |
|||
Télécharger le modèle d'import |
|||
</Button> |
|||
</div> |
|||
{error && ( |
|||
<Typography color="error" variant="body2"> |
|||
{error} |
|||
</Typography> |
|||
)} |
|||
{tableData.length > 0 && ( |
|||
<ThemeProvider theme={theme}> |
|||
<div |
|||
style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }} |
|||
> |
|||
{/* Dropdowns for each column */} |
|||
{dynamicColumns.map((col) => ( |
|||
<FormControl |
|||
key={col.field} |
|||
sx={{ |
|||
m: 1, |
|||
width: '100%', |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: '#ff9800' // Set the border color on hover |
|||
} |
|||
} |
|||
}} |
|||
size="small" |
|||
color="warning" |
|||
variant="outlined" |
|||
style={{ margin: 10, width: 200 }} |
|||
> |
|||
<InputLabel id={col.headerName}>{col.headerName}</InputLabel> |
|||
<Select |
|||
labelId={col.headerName} |
|||
value={col.headerName} |
|||
label={col.headerName} |
|||
color="warning" |
|||
name={col.headerName} |
|||
onChange={(e) => handleHeaderChange(col.field, e.target.value)} |
|||
> |
|||
<MenuItem value={col.headerName}>{col.headerName}</MenuItem> |
|||
<MenuItem value={'nom'}>nom</MenuItem> |
|||
<MenuItem value={'credit'}>credit</MenuItem> |
|||
<MenuItem value={`uniter`}>uniter d'enseignement</MenuItem> |
|||
<MenuItem value={`ue`}>UE</MenuItem> |
|||
</Select> |
|||
</FormControl> |
|||
))} |
|||
</div> |
|||
<div |
|||
style={{ |
|||
display: 'flex', |
|||
alignItems: 'center', |
|||
justifyContent: 'center', |
|||
flexDirection: 'column', |
|||
width: '100%' |
|||
}} |
|||
> |
|||
<DataGrid |
|||
rows={dataRow} |
|||
columns={dynamicColumns} |
|||
initialState={{ pagination: { paginationModel } }} |
|||
onColumnVisibilityModelChange={handleColumnVisibilityChange} // Listen for column visibility changes |
|||
pageSizeOptions={[5, 10]} |
|||
disableRowSelectionOnClick |
|||
sx={{ |
|||
width: '100%', |
|||
height: '100%', |
|||
minHeight: 400, |
|||
maxWidth: '100%', // Prevents grid from exceeding the container width |
|||
'@media (max-width: 600px)': { |
|||
width: '100%', |
|||
height: 'auto', // Adjust height for smaller screens |
|||
fontSize: '0.8rem' // Smaller font size for better readability on small screens |
|||
}, |
|||
'@media (max-width: 960px)': { |
|||
fontSize: '1rem' // Adjust font size for medium screens |
|||
} |
|||
}} |
|||
slots={{ toolbar: CustomBar }} |
|||
slotProps={{ toolbar: { onImport: handleImport } }} |
|||
localeText={frFR.components.MuiDataGrid.defaultProps.localeText} |
|||
/> |
|||
</div> |
|||
</ThemeProvider> |
|||
)} |
|||
</Box> |
|||
</Box> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
export default ImportMatiere |
|||
@ -1,397 +0,0 @@ |
|||
import React, { useState } from 'react' |
|||
import classe from '../assets/AllStyleComponents.module.css' |
|||
import classeAdd from '../assets/AddStudent.module.css' |
|||
import classeHome from '../assets/Home.module.css' |
|||
import { Box, Button, Typography, ThemeProvider, Modal } from '@mui/material' |
|||
import { Link } from 'react-router-dom' |
|||
import { FaCloudDownloadAlt, FaCloudUploadAlt, FaFileExcel } from 'react-icons/fa' |
|||
import { IoMdReturnRight } from 'react-icons/io' |
|||
import { styled, createTheme } from '@mui/material/styles' |
|||
import * as XLSX from 'xlsx' |
|||
import Papa from 'papaparse' |
|||
import { DataGrid, GridToolbarContainer, GridToolbarColumnsButton } from '@mui/x-data-grid' |
|||
import { frFR } from '@mui/x-data-grid/locales' |
|||
import CustomBar from './CustomBar' |
|||
import dayjs from 'dayjs' |
|||
import svgSuccess from '../assets/success.svg' |
|||
|
|||
const ImportNiveau = () => { |
|||
const VisuallyHiddenInput = styled('input')({ |
|||
clip: 'rect(0 0 0 0)', |
|||
clipPath: 'inset(50%)', |
|||
height: 1, |
|||
overflow: 'hidden', |
|||
position: 'absolute', |
|||
bottom: 0, |
|||
left: 0, |
|||
whiteSpace: 'nowrap', |
|||
width: 1 |
|||
}) |
|||
|
|||
const [error, setError] = useState('') |
|||
const [tableData, setTableData] = useState([]) |
|||
const [files, setFiles] = useState() |
|||
const [header, setHeader] = useState([]) |
|||
let field = [] |
|||
|
|||
for (let index = 0; index < header.length; index++) { |
|||
field.push(header[index].toLowerCase().replace(/\s+/g, '_')) |
|||
} |
|||
|
|||
const dynamicColumns = header.map((col, index) => ({ |
|||
field: col.toLowerCase().replace(/\s+/g, '_'), // Converts the header text to field names (e.g., "Nom" -> "nom") |
|||
headerName: col, // Display the header as is |
|||
width: 150 // Adjust the width as needed |
|||
})) |
|||
|
|||
const theme = createTheme({ |
|||
components: { |
|||
MuiIconButton: { |
|||
styleOverrides: { |
|||
root: { |
|||
color: 'gray' // Toolbar icons color |
|||
} |
|||
} |
|||
}, |
|||
MuiButton: { |
|||
styleOverrides: { |
|||
root: { |
|||
color: '#121212' // Button text color |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
|
|||
const paginationModel = { page: 0, pageSize: 5 } |
|||
|
|||
// Assuming `tableData` is an array where each entry corresponds to a student's data |
|||
const dataRow = tableData.map((etudiant, index) => { |
|||
// Dynamically create an object with fields from the header and data from `etudiant` |
|||
let row = { id: index + 1 } // Unique ID for each row |
|||
|
|||
field.forEach((fieldName, idx) => { |
|||
if (fieldName === 'date_de_naissance') { |
|||
row[fieldName] = dayjs(etudiant[idx]).format('DD-MM-YYYY') // Format date |
|||
} else { |
|||
row[fieldName] = etudiant[idx] // Assign value to field dynamically |
|||
} |
|||
}) |
|||
|
|||
return row |
|||
}) |
|||
|
|||
const handleFileChange = (event) => { |
|||
const file = event.target.files[0] |
|||
setFiles(event.target.files[0]) |
|||
if (!file) { |
|||
setError('No file selected') |
|||
return |
|||
} |
|||
|
|||
const fileExtension = file.name.split('.').pop().toLowerCase() |
|||
|
|||
if (fileExtension === 'xlsx') { |
|||
const reader = new FileReader() |
|||
reader.onload = (e) => { |
|||
const data = new Uint8Array(e.target.result) |
|||
const workbook = XLSX.read(data, { type: 'array' }) |
|||
|
|||
// Extract data from all sheets and combine |
|||
const allData = [] |
|||
workbook.SheetNames.forEach((sheetName) => { |
|||
const worksheet = workbook.Sheets[sheetName] |
|||
const rows = XLSX.utils.sheet_to_json(worksheet, { header: 1 }) |
|||
setHeader(rows[0]) // keep the header |
|||
allData.push(...rows.slice(1)) // Skip header row for each sheet |
|||
}) |
|||
setTableData(allData) |
|||
} |
|||
reader.readAsArrayBuffer(file) |
|||
} else if (fileExtension === 'csv') { |
|||
const reader = new FileReader() |
|||
reader.onload = (e) => { |
|||
Papa.parse(e.target.result, { |
|||
complete: (results) => { |
|||
setHeader(results.data[0]) // keep the header |
|||
setTableData(results.data.slice(1)) // Skip header row |
|||
}, |
|||
header: false |
|||
}) |
|||
} |
|||
reader.readAsText(file) |
|||
} else { |
|||
setError('Unsupported file format. Please upload .xlsx or .csv file.') |
|||
setTableData([]) |
|||
} |
|||
} |
|||
|
|||
const exemplaireFileExcel = [ |
|||
{ |
|||
Nom: 'L1' |
|||
}, |
|||
{ |
|||
Nom: 'L2' |
|||
}, |
|||
{ |
|||
Nom: 'L3' |
|||
}, |
|||
{ |
|||
Nom: 'M1' |
|||
}, |
|||
{ |
|||
Nom: 'M2' |
|||
} |
|||
] |
|||
|
|||
const convertToExcel = () => { |
|||
// convert json to sheet |
|||
const worksheet = XLSX.utils.json_to_sheet(exemplaireFileExcel) |
|||
|
|||
// Create a new workbook and append the worksheet |
|||
const workbook = XLSX.utils.book_new() |
|||
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1') |
|||
|
|||
// Write the workbook to a Blob and create a download link |
|||
const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }) |
|||
const data = new Blob([excelBuffer], { type: 'application/octet-stream' }) |
|||
const url = URL.createObjectURL(data) |
|||
|
|||
// Trigger a download |
|||
const link = document.createElement('a') |
|||
link.href = url |
|||
link.download = 'exemplaire_niveau.xlsx' |
|||
link.click() |
|||
|
|||
// Clean up |
|||
URL.revokeObjectURL(url) |
|||
} |
|||
|
|||
const handleColumnVisibilityChange = (model) => { |
|||
// Get the currently visible columns |
|||
const visibleColumns = dynamicColumns.filter((column) => model[column.field] !== false) |
|||
|
|||
// Create a new Excel file with visible columns |
|||
createExcelFile(visibleColumns) |
|||
} |
|||
|
|||
const createExcelFile = (columns) => { |
|||
// Extract and set the header |
|||
const header = columns.reduce((acc, col) => { |
|||
acc[col.field] = col.headerName || col.field // Use headerName or field as default |
|||
return acc |
|||
}, {}) |
|||
|
|||
// Map the data rows to match the extracted headers |
|||
const worksheetData = dataRow.map((row) => { |
|||
const filteredRow = {} |
|||
columns.forEach((col) => { |
|||
const headerName = header[col.field] |
|||
filteredRow[headerName] = row[col.field] |
|||
}) |
|||
return filteredRow |
|||
}) |
|||
|
|||
// Create a worksheet from the data |
|||
const ws = XLSX.utils.json_to_sheet(worksheetData) |
|||
|
|||
// Create a workbook and add the worksheet to it |
|||
const wb = XLSX.utils.book_new() |
|||
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1') |
|||
|
|||
// Generate the Excel file as binary data |
|||
const excelFile = XLSX.write(wb, { bookType: 'xlsx', type: 'array' }) |
|||
|
|||
// Create a Blob for the Excel data |
|||
const blob = new Blob([excelFile], { |
|||
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' |
|||
}) |
|||
|
|||
// Create a link element to trigger the download |
|||
const url = URL.createObjectURL(blob) |
|||
const link = document.createElement('a') |
|||
link.href = url |
|||
link.download = 'original-file.xlsx' // Original file name or any desired name |
|||
document.body.appendChild(link) |
|||
link.click() |
|||
document.body.removeChild(link) |
|||
URL.revokeObjectURL(url) // Clean up |
|||
} |
|||
|
|||
/** |
|||
* fonction qui envoye dans le back |
|||
*/ |
|||
const handleImport = async () => { |
|||
// Code to handle file import (can open a file dialog or call handleFileChange) |
|||
|
|||
let response = await window.niveaus.importNiveau(files.path) |
|||
|
|||
console.log(response) |
|||
if (response.success) { |
|||
setOpen(true) |
|||
setTableData([]) |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* hook to open modal |
|||
*/ |
|||
const [open, setOpen] = useState(false) |
|||
|
|||
/** |
|||
* function to close modal |
|||
*/ |
|||
const handleClose = () => setOpen(false) |
|||
|
|||
/** |
|||
* function to return the view Modal |
|||
* |
|||
* @returns {JSX} |
|||
*/ |
|||
const modals = () => ( |
|||
<Modal |
|||
open={open} |
|||
onClose={handleClose} |
|||
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 |
|||
}} |
|||
> |
|||
<Typography |
|||
style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }} |
|||
> |
|||
<img src={svgSuccess} alt="" width={50} height={50} />{' '} |
|||
<span>Importation a été effectuée avec succès</span> |
|||
</Typography> |
|||
<Box |
|||
sx={{ |
|||
marginTop: '2%', |
|||
display: 'flex', |
|||
gap: '20px', |
|||
alignItems: 'end', |
|||
justifyContent: 'flex-end' |
|||
}} |
|||
> |
|||
<Button onClick={handleClose} color="warning" variant="contained"> |
|||
OK |
|||
</Button> |
|||
</Box> |
|||
</Box> |
|||
</Modal> |
|||
) |
|||
|
|||
return ( |
|||
<div className={classe.mainHome}> |
|||
{modals()} |
|||
<div className={classeAdd.header}> |
|||
<div className={classe.h1style}> |
|||
<div className={classeHome.blockTitle}> |
|||
<h1 style={{ display: 'flex', alignItems: 'center', gap: '10px' }}> |
|||
<FaFileExcel /> |
|||
Importation de données |
|||
</h1> |
|||
<Link to={'/addniveau'}> |
|||
<Button color="warning" variant="contained"> |
|||
<IoMdReturnRight style={{ fontSize: '20px' }} /> |
|||
</Button> |
|||
</Link> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
{/* displaying */} |
|||
<Box |
|||
sx={{ |
|||
position: 'absolute', |
|||
top: '52%', |
|||
left: '52%', |
|||
transform: 'translate(-50%, -50%)', |
|||
width: '95%', |
|||
borderRadius: '2%', |
|||
bgcolor: 'background.paper', |
|||
boxShadow: 24, |
|||
p: 4 |
|||
}} |
|||
> |
|||
<Box sx={{ mt: 2, display: 'flex', alignItems: 'center', flexDirection: 'column' }}> |
|||
<div style={{ display: 'flex', gap: '20px', marginBottom: '20px' }}> |
|||
<Button |
|||
component="label" |
|||
variant="contained" |
|||
color="warning" |
|||
startIcon={<FaCloudUploadAlt />} |
|||
> |
|||
Charger un fichier excel |
|||
<VisuallyHiddenInput type="file" onChange={handleFileChange} accept=".xlsx, .csv" /> |
|||
</Button> |
|||
<Button |
|||
component="label" |
|||
variant="contained" |
|||
color="error" |
|||
startIcon={<FaCloudDownloadAlt />} |
|||
onClick={convertToExcel} |
|||
> |
|||
Télécharger le modèle d'import |
|||
</Button> |
|||
</div> |
|||
{error && ( |
|||
<Typography color="error" variant="body2"> |
|||
{error} |
|||
</Typography> |
|||
)} |
|||
{tableData.length > 0 && ( |
|||
<ThemeProvider theme={theme}> |
|||
<div |
|||
style={{ |
|||
display: 'flex', |
|||
alignItems: 'center', |
|||
justifyContent: 'center', |
|||
flexDirection: 'column', |
|||
width: '100%' |
|||
}} |
|||
> |
|||
<DataGrid |
|||
rows={dataRow} |
|||
columns={dynamicColumns} |
|||
initialState={{ pagination: { paginationModel } }} |
|||
onColumnVisibilityModelChange={handleColumnVisibilityChange} // Listen for column visibility changes |
|||
pageSizeOptions={[5, 10]} |
|||
disableRowSelectionOnClick |
|||
sx={{ |
|||
width: '100%', |
|||
height: '100%', |
|||
minHeight: 400, |
|||
maxWidth: '100%', // Prevents grid from exceeding the container width |
|||
'@media (max-width: 600px)': { |
|||
width: '100%', |
|||
height: 'auto', // Adjust height for smaller screens |
|||
fontSize: '0.8rem' // Smaller font size for better readability on small screens |
|||
}, |
|||
'@media (max-width: 960px)': { |
|||
fontSize: '1rem' // Adjust font size for medium screens |
|||
} |
|||
}} |
|||
slots={{ toolbar: CustomBar }} |
|||
slotProps={{ toolbar: { onImport: handleImport } }} |
|||
localeText={frFR.components.MuiDataGrid.defaultProps.localeText} |
|||
/> |
|||
</div> |
|||
</ThemeProvider> |
|||
)} |
|||
</Box> |
|||
</Box> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
export default ImportNiveau |
|||
@ -1,133 +0,0 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import { |
|||
Dialog, |
|||
DialogActions, |
|||
DialogContent, |
|||
DialogTitle, |
|||
TextField, |
|||
Button, |
|||
InputAdornment, |
|||
Box, |
|||
Grid, |
|||
FormControl, |
|||
InputLabel, |
|||
Select, |
|||
OutlinedInput, |
|||
MenuItem |
|||
} from '@mui/material' |
|||
|
|||
|
|||
const IpConfig = ({ open, onClose }) => { |
|||
|
|||
const [localIp, setLocalIp] = useState(""); |
|||
const [formData, setFormData] = useState({ |
|||
ipname: "", |
|||
id: '', |
|||
}) |
|||
const [ip, setIp] = useState({}); |
|||
|
|||
useEffect(() => { |
|||
|
|||
window.notesysteme.getIPConfig().then((response) => { |
|||
setIp(response) |
|||
}) |
|||
|
|||
const getLocalIP = async () => { |
|||
const pc = new RTCPeerConnection(); |
|||
pc.createDataChannel(""); // Create a data channel |
|||
pc.createOffer().then((offer) => pc.setLocalDescription(offer)); |
|||
|
|||
pc.onicecandidate = (event) => { |
|||
if (event && event.candidate) { |
|||
const ipRegex = /([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3})/; |
|||
const match = ipRegex.exec(event.candidate.candidate); |
|||
if (match) setLocalIp(match[1]); |
|||
pc.close(); |
|||
} |
|||
}; |
|||
}; |
|||
|
|||
getLocalIP(); |
|||
}, []); |
|||
|
|||
useEffect(() => { |
|||
if (ip) { |
|||
setFormData((prevData) => ({ |
|||
...prevData, |
|||
ipname: ip.ipname, |
|||
id: ip.id |
|||
})) |
|||
} |
|||
|
|||
}, [ip]); |
|||
|
|||
const handleChange = (e) => { |
|||
const { name, value } = e.target |
|||
setFormData({ ...formData, [name]: value }) |
|||
} |
|||
|
|||
const formSubmit = async (e) => { |
|||
e.preventDefault() |
|||
|
|||
if (ip == undefined) { |
|||
let response = await window.notesysteme.createIPConfig(formData) |
|||
console.log('running the creation: ', response); |
|||
if (response.changes) { |
|||
window.notesysteme.getIPConfig().then((response) => { |
|||
setIp(response) |
|||
}) |
|||
onClose() |
|||
} |
|||
} else { |
|||
let response = await window.notesysteme.updateIPConfig(formData) |
|||
console.log('running the update: ', response); |
|||
if (response.changes) { |
|||
window.notesysteme.getIPConfig().then((response) => { |
|||
setIp(response) |
|||
}) |
|||
onClose() |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
return ( |
|||
<Dialog open={open} onClose={onClose}> |
|||
<form action="" onSubmit={formSubmit}> |
|||
<DialogTitle>Configuration de l'adresse IP</DialogTitle> |
|||
<div style={{textAlign:"end"}}>Votre Local IP: {localIp || "Detecting..."}</div> |
|||
<DialogContent> |
|||
<Box sx={{ flexGrow: 1 }}> |
|||
<Grid container spacing={2}> |
|||
<Grid item xs={12} sm={12}> |
|||
<TextField |
|||
autoFocus |
|||
margin="dense" |
|||
name="ipname" |
|||
required |
|||
label="IP du PC serveur" |
|||
type="text" |
|||
fullWidth |
|||
variant="outlined" |
|||
value={formData.ipname} |
|||
color="warning" |
|||
onChange={handleChange} |
|||
/> |
|||
</Grid> |
|||
</Grid> |
|||
</Box> |
|||
</DialogContent> |
|||
<DialogActions> |
|||
<Button onClick={onClose} color="warning"> |
|||
Annuler |
|||
</Button> |
|||
<Button type="submit" color="warning"> |
|||
Soumettre |
|||
</Button> |
|||
</DialogActions> |
|||
</form> |
|||
</Dialog> |
|||
) |
|||
} |
|||
|
|||
export default IpConfig |
|||
@ -1,157 +0,0 @@ |
|||
import { useRef, useState } from 'react' |
|||
// import { Container, Row, Col, Form, Button, Card, InputGroup } from 'react-bootstrap'; |
|||
import { Container, Grid, Card, Typography, TextField, Button, InputAdornment } from '@mui/material' |
|||
import { FaUserCircle, FaLock, FaUser } from 'react-icons/fa' |
|||
import classe from '../assets/Login.module.css' |
|||
import { useAuthContext } from '../contexts/AuthContext' |
|||
import { Link } from 'react-router-dom' |
|||
import { ValidationLogin, invalidCredential } from './validation/Login' |
|||
|
|||
const Login = () => { |
|||
/** |
|||
* token from the AuthContext in the context folder |
|||
*/ |
|||
const { setToken } = useAuthContext() |
|||
|
|||
/** |
|||
* hook to store our data from the input element |
|||
*/ |
|||
const [username, setUsername] = useState() |
|||
const [password, setPassword] = useState() |
|||
|
|||
/** |
|||
* ref for our username and password input and the error span |
|||
*/ |
|||
const userNameRef = useRef() |
|||
const passwordRef = useRef() |
|||
const userNameError = useRef() |
|||
const passwordError = useRef() |
|||
|
|||
/** |
|||
* function to send the data to the IPCRender |
|||
* and make login |
|||
* |
|||
* @param {any} e |
|||
*/ |
|||
const formLogin = async (e) => { |
|||
e.preventDefault() |
|||
|
|||
let validate = ValidationLogin( |
|||
userNameRef.current, |
|||
passwordRef.current, |
|||
userNameError.current, |
|||
passwordError.current |
|||
) |
|||
|
|||
if (validate) { |
|||
const response = await window.allUser.login({ username, password }) |
|||
|
|||
if (response.success) { |
|||
// Redirect to main window |
|||
setToken(JSON.stringify(response.user)) |
|||
} else { |
|||
invalidCredential(userNameError.current, response.error) |
|||
} |
|||
} |
|||
} |
|||
|
|||
return ( |
|||
<Container |
|||
maxWidth={false} |
|||
sx={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }} |
|||
className={classe.container} |
|||
> |
|||
<Grid container justifyContent="center"> |
|||
<Grid item xs={12} md={6} lg={4}> |
|||
<Card className={`p-4 shadow ` + classe.cards} sx={{ padding: 4, boxShadow: 3 }}> |
|||
<div style={{ textAlign: 'center', marginBottom: '1rem' }}> |
|||
<FaUserCircle size={60} color="dark" className="text-light" /> |
|||
</div> |
|||
<Typography variant="h5" align="center" className="text-light" gutterBottom> |
|||
Université de Toamasina |
|||
</Typography> |
|||
<form onSubmit={formLogin} className={classe.formulaireLogin}> |
|||
<TextField |
|||
label="Nom d'utilisateur" |
|||
color="secondary" |
|||
variant="outlined" |
|||
fullWidth |
|||
placeholder="Nom d'utilisateur" |
|||
margin="normal" |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<FaUser style={{ color: 'white' }} /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
className={classe.input} |
|||
onChange={(e) => setUsername(e.target.value)} |
|||
inputRef={userNameRef} |
|||
sx={{ |
|||
'& .MuiOutlinedInput-root': { |
|||
'& fieldset': { |
|||
borderColor: 'white' // Set the border color when not focused |
|||
}, |
|||
'&:hover fieldset': { |
|||
borderColor: 'rgb(156, 39, 176)' // Set the border color on hover |
|||
} |
|||
} |
|||
}} |
|||
/> |
|||
<span className="text-danger" ref={userNameError}></span> |
|||
<TextField |
|||
label="Mot de passe" |
|||
color="secondary" |
|||
variant="outlined" |
|||
type="password" |
|||
fullWidth |
|||
placeholder="Mot de passe" |
|||
margin="normal" |
|||
className={classe.input} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<FaLock style={{ color: 'white' }} /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
onChange={(e) => setPassword(e.target.value)} |
|||
inputRef={passwordRef} |
|||
sx={{ |
|||
'& .MuiOutlinedInput-root': { |
|||
'& fieldset': { |
|||
borderColor: 'white' // Set the border color when not focused |
|||
}, |
|||
'&:hover fieldset': { |
|||
borderColor: 'rgb(156, 39, 176)' // Set the border color on hover |
|||
} |
|||
} |
|||
}} |
|||
/> |
|||
<span ref={passwordError} className="text-danger"></span> |
|||
|
|||
<Button |
|||
variant="contained" |
|||
color="secondary" |
|||
type="submit" |
|||
fullWidth |
|||
sx={{ marginTop: 2 }} |
|||
> |
|||
Se connecter |
|||
</Button> |
|||
|
|||
<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '1rem' }}> |
|||
<Link to="/forgotpassword" className="text-light"> |
|||
Mot de passe oublié ? |
|||
</Link> |
|||
</div> |
|||
</form> |
|||
</Card> |
|||
</Grid> |
|||
</Grid> |
|||
</Container> |
|||
) |
|||
} |
|||
|
|||
export default Login |
|||
@ -1,98 +0,0 @@ |
|||
import React, { useState } from 'react' |
|||
import { Box, Button, Typography, Grid, Paper } from '@mui/material' |
|||
import { GrManual } from 'react-icons/gr' |
|||
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack5' |
|||
import { FaAngleDoubleLeft, FaAngleDoubleRight } from 'react-icons/fa' |
|||
import pdfUrl from '../assets/manuel.pdf' |
|||
import classe from '../assets/AllStyleComponents.module.css' |
|||
import classeAdd from '../assets/AddStudent.module.css' |
|||
import classeHome from '../assets/Home.module.css' |
|||
|
|||
const Manuel = () => { |
|||
const [numPages, setNumPages] = useState(null) // Use correct name |
|||
const [pageNumber, setPageNumber] = useState(1) |
|||
|
|||
// Fix the onDocumentSuccess function |
|||
function onDocumentSuccess({ numPages }) { |
|||
setNumPages(numPages) // Use the correct property |
|||
} |
|||
|
|||
const prevPage = () => { |
|||
if (pageNumber > 1) { |
|||
setPageNumber(pageNumber - 1) |
|||
} |
|||
} |
|||
|
|||
const nextPage = () => { |
|||
if (pageNumber < numPages) { |
|||
setPageNumber(pageNumber + 1) |
|||
} |
|||
} |
|||
|
|||
return ( |
|||
<div className={classe.mainHome}> |
|||
<div className={classeAdd.header}> |
|||
<div className={classe.h1style}> |
|||
<div className={classeHome.blockTitle}> |
|||
<h1 style={{ display: 'flex', alignItems: 'center', gap: '10px' }}> |
|||
<GrManual /> Manuel d'utilisation |
|||
</h1> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<Paper |
|||
sx={{ |
|||
height: 'auto', |
|||
minHeight: 500, |
|||
display: 'flex', |
|||
alignItems: 'center', |
|||
justifyContent: 'center', |
|||
flexDirection: 'column', |
|||
width: '100%' |
|||
}} |
|||
> |
|||
<Grid sx={{ display: 'flex', gap: '20px', padding: '1%' }}> |
|||
<Button color="warning" variant="contained" onClick={prevPage}> |
|||
<FaAngleDoubleLeft /> |
|||
</Button> |
|||
<Button color="warning" variant="contained" onClick={nextPage}> |
|||
<FaAngleDoubleRight /> |
|||
</Button> |
|||
</Grid> |
|||
|
|||
<Typography variant="h6"> |
|||
Page {pageNumber} sur {numPages} |
|||
</Typography> |
|||
|
|||
<div |
|||
style={{ |
|||
display: 'flex', |
|||
alignItems: 'center', |
|||
justifyContent: 'center', |
|||
width: '100%' |
|||
}} |
|||
> |
|||
<Document |
|||
file={pdfUrl} |
|||
onLoadSuccess={onDocumentSuccess} |
|||
loading={<div>Chargement du Manuel...</div>} |
|||
error={<div>Une erreur s'est produite lors du chargement du Manuel.</div>} |
|||
> |
|||
<Page pageNumber={pageNumber} width={1200} /> |
|||
</Document> |
|||
</div> |
|||
|
|||
<Grid sx={{ display: 'flex', gap: '20px', padding: '1%' }}> |
|||
<Button color="warning" variant="contained" onClick={prevPage}> |
|||
<FaAngleDoubleLeft /> |
|||
</Button> |
|||
<Button color="warning" variant="contained" onClick={nextPage}> |
|||
<FaAngleDoubleRight /> |
|||
</Button> |
|||
</Grid> |
|||
</Paper> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
export default Manuel |
|||
@ -1,261 +0,0 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import classe from '../assets/AllStyleComponents.module.css' |
|||
import classeAdd from '../assets/AddStudent.module.css' |
|||
import classeHome from '../assets/Home.module.css' |
|||
import { Link } from 'react-router-dom' |
|||
import { Box, Button, InputAdornment, Typography, Modal, TextField, Grid } from '@mui/material' |
|||
import { BsBookmarkPlusFill } from 'react-icons/bs' |
|||
import { FaClipboardList, FaPenToSquare, FaTrash } from 'react-icons/fa6' |
|||
import Paper from '@mui/material/Paper' |
|||
import { createTheme, ThemeProvider } from '@mui/material/styles' |
|||
import { DataGrid, GridToolbar } from '@mui/x-data-grid' |
|||
import { frFR } from '@mui/x-data-grid/locales' |
|||
import { Tooltip } from 'react-tooltip' |
|||
import warning from '../assets/warning.svg' |
|||
import success from '../assets/success.svg' |
|||
|
|||
const Mentions = () => { |
|||
const theme = createTheme({ |
|||
components: { |
|||
MuiIconButton: { |
|||
styleOverrides: { |
|||
root: { |
|||
color: 'gray' // Change the color of toolbar icons |
|||
} |
|||
} |
|||
}, |
|||
MuiButton: { |
|||
styleOverrides: { |
|||
root: { |
|||
color: '#121212' // Change the color of toolbar icons |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
|
|||
const [isDeleted, setIsDeleted] = useState(false) |
|||
const [ids, setIds] = useState(0) |
|||
|
|||
const [mentions, setMentions] = useState([]) |
|||
|
|||
useEffect(() => { |
|||
window.mention.getMention().then((response) => { |
|||
setMentions(response) |
|||
}) |
|||
}, []) |
|||
|
|||
const columns = [ |
|||
{ field: 'nom', headerName: 'Nom', width: 350 }, |
|||
{ field: 'uniter', headerName: 'Unité ', width: 180 }, |
|||
{ |
|||
field: 'action', |
|||
headerName: 'Action', |
|||
flex: 1, |
|||
renderCell: (params) => ( |
|||
<div style={{ display: 'flex', gap: '10px' }}> |
|||
<Link to={`/singlemention/${params.value}`}> |
|||
<Button color="warning" variant="contained"> |
|||
<FaPenToSquare |
|||
style={{ fontSize: '20px', color: 'white' }} |
|||
className={`update${params.value}`} |
|||
/> |
|||
<Tooltip |
|||
anchorSelect={`.update${params.value}`} |
|||
style={{ fontSize: '15px', zIndex: 22 }} |
|||
place="top" |
|||
> |
|||
Modifier |
|||
</Tooltip> |
|||
</Button> |
|||
</Link> |
|||
<Link |
|||
to={`#`} |
|||
onClick={() => { |
|||
setIds(params.row.id) |
|||
setOpen(true) |
|||
}} |
|||
> |
|||
<Button color="error" variant="contained"> |
|||
<FaTrash |
|||
style={{ fontSize: '20px', color: 'white' }} |
|||
className={`update${params.value}`} |
|||
/> |
|||
<Tooltip |
|||
anchorSelect={`.update${params.value}`} |
|||
style={{ fontSize: '15px', zIndex: 22 }} |
|||
place="top" |
|||
> |
|||
Supprimer |
|||
</Tooltip> |
|||
</Button> |
|||
</Link> |
|||
</div> |
|||
) |
|||
} |
|||
] |
|||
|
|||
const paginationModel = { page: 0, pageSize: 5 } |
|||
|
|||
const dataRow = mentions.map((men) => ({ |
|||
id: men.id, // Ensure this exists and is unique for each etudiant |
|||
nom: men.nom, |
|||
uniter: men.uniter, |
|||
action: men.id // Ensure this is a valid URL for the image |
|||
})) |
|||
|
|||
const deleteButton = async (id) => { |
|||
let response = await window.mention.deleteMention({ id }) |
|||
if (response.success) { |
|||
const updatedMentions = mentions.filter((mention) => mention.id !== id) |
|||
setMentions(updatedMentions) |
|||
setIsDeleted(true) |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* hook to open modal |
|||
*/ |
|||
const [open, setOpen] = useState(false) |
|||
|
|||
/** |
|||
* function to close modal |
|||
*/ |
|||
const handleClose = () => { |
|||
setOpen(false) |
|||
setIsDeleted(false) |
|||
} |
|||
|
|||
/** |
|||
* function to return the view Modal |
|||
* |
|||
* @returns {JSX} |
|||
*/ |
|||
const modals = () => ( |
|||
<Modal |
|||
open={open} |
|||
onClose={handleClose} |
|||
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>Suprimer avec succèss</span> |
|||
</Typography> |
|||
) : ( |
|||
<Typography |
|||
style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }} |
|||
> |
|||
<img src={warning} alt="" width={50} height={50} />{' '} |
|||
<span>Voulez vous supprimer ce mention ?</span> |
|||
</Typography> |
|||
)} |
|||
<Box |
|||
sx={{ |
|||
marginTop: '2%', |
|||
display: 'flex', |
|||
gap: '20px', |
|||
alignItems: 'end', |
|||
justifyContent: 'flex-end' |
|||
}} |
|||
> |
|||
{isDeleted ? ( |
|||
<Button onClick={handleClose} color="warning" variant="contained"> |
|||
OK |
|||
</Button> |
|||
) : ( |
|||
<div> |
|||
<Button |
|||
onClick={() => deleteButton(ids)} |
|||
sx={{ mr: 1 }} |
|||
color="warning" |
|||
variant="contained" |
|||
> |
|||
Oui |
|||
</Button> |
|||
<Button onClick={handleClose} color="warning" variant="contained"> |
|||
Non |
|||
</Button> |
|||
</div> |
|||
)} |
|||
</Box> |
|||
</Box> |
|||
</Modal> |
|||
) |
|||
|
|||
return ( |
|||
<div className={classe.mainHome}> |
|||
{modals()} |
|||
<div className={classeAdd.header}> |
|||
<div className={classe.h1style}> |
|||
<div className={classeHome.blockTitle}> |
|||
<h1 style={{ display: 'flex', alignItems: 'center', gap: '10px' }}> |
|||
<FaClipboardList /> |
|||
Mentions |
|||
</h1> |
|||
<Link to={'/addmention'}> |
|||
<Button color="warning" variant="contained"> |
|||
<BsBookmarkPlusFill style={{ fontSize: '20px' }} /> AJouter |
|||
</Button> |
|||
</Link> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
{/* displaying data */} |
|||
<div className={classeHome.boxEtudiantsCard}> |
|||
<div style={{ display: 'flex', justifyContent: 'center' }}> |
|||
<Paper |
|||
sx={{ |
|||
height: 'auto', // Auto height to make the grid responsive |
|||
minHeight: 500, // Ensures a minimum height |
|||
display: 'flex', |
|||
// alignItems: "center", |
|||
// justifyContent: "center", |
|||
width: '100%' |
|||
}} |
|||
> |
|||
<ThemeProvider theme={theme}> |
|||
<DataGrid |
|||
rows={dataRow} |
|||
columns={columns} |
|||
initialState={{ pagination: { paginationModel } }} |
|||
pageSizeOptions={[5, 10]} |
|||
sx={{ |
|||
border: 0, |
|||
width: '100%', // Ensures the DataGrid takes full width |
|||
height: '100%', // Ensures it grows to fit content |
|||
minHeight: 400, // Minimum height for the DataGrid |
|||
display: 'flex', |
|||
justifyContent: 'center', |
|||
'@media (max-width: 600px)': { |
|||
width: '100%', // 100% width on small screens |
|||
height: 'auto' // Allow height to grow with content |
|||
} |
|||
}} |
|||
slots={{ toolbar: GridToolbar }} |
|||
localeText={frFR.components.MuiDataGrid.defaultProps.localeText} |
|||
/> |
|||
</ThemeProvider> |
|||
</Paper> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
export default Mentions |
|||
@ -1,343 +0,0 @@ |
|||
import React, { useRef, useState } from 'react' |
|||
import { |
|||
Modal, |
|||
Box, |
|||
Typography, |
|||
Button, |
|||
InputAdornment, |
|||
TextField, |
|||
Card, |
|||
Grid, |
|||
Container |
|||
} from '@mui/material' |
|||
import { |
|||
FaUser, |
|||
FaIdBadge, |
|||
FaBirthdayCake, |
|||
FaGraduationCap, |
|||
FaCalendarAlt, |
|||
FaFileUpload |
|||
} from 'react-icons/fa' |
|||
|
|||
const ModalAddEtudiants = ({ open, handleClose }) => { |
|||
/** |
|||
* hook for storing data in the input |
|||
*/ |
|||
const [formData, setFormData] = useState({ |
|||
nom: '', |
|||
prenom: '', |
|||
photos: null, |
|||
date_de_naissances: '', |
|||
niveau: '', |
|||
annee_scolaire: '', |
|||
num_inscription: '' |
|||
}) |
|||
|
|||
/** |
|||
* ref for each input |
|||
*/ |
|||
const nomRef = useRef() |
|||
const prenomRef = useRef() |
|||
const date_de_naissancesRef = useRef() |
|||
const niveauRef = useRef() |
|||
const annee_scolaireRef = useRef() |
|||
const numero_inscriptionRef = useRef() |
|||
const photosRef = useRef() |
|||
|
|||
/** |
|||
* function to set the data in state |
|||
* @param {*} e |
|||
*/ |
|||
const handleInputChange = (e) => { |
|||
const { name, value } = e.target |
|||
setFormData((prevData) => ({ |
|||
...prevData, |
|||
[name]: value |
|||
})) |
|||
} |
|||
|
|||
const handleFileChange = (e) => { |
|||
let img_file = e.target.files[0] |
|||
const reader = new FileReader() |
|||
reader.readAsDataURL(img_file) |
|||
reader.onload = (ev) => { |
|||
const url = ev.target.result |
|||
// initialisation de nouvelle imageURL |
|||
const image = document.createElement('img') |
|||
image.src = url |
|||
|
|||
// create a new image |
|||
image.onload = (event) => { |
|||
let canvas = document.createElement('canvas') |
|||
let ratio = 250 / event.target.width |
|||
canvas.width = 250 |
|||
canvas.height = event.target.height * ratio |
|||
const context = canvas.getContext('2d') |
|||
context.drawImage(image, 0, 0, canvas.width, canvas.height) |
|||
|
|||
// new url |
|||
const new_URL = canvas.toDataURL('image/jpeg', 90) |
|||
// rendement de l'url a notre variable global |
|||
setFormData((prevData) => ({ |
|||
...prevData, |
|||
photos: new_URL |
|||
})) |
|||
} |
|||
} |
|||
} |
|||
|
|||
const handleSubmit = async (e) => { |
|||
e.preventDefault() |
|||
// Handle form submission logic |
|||
const response = await window.etudiants.insertEtudiant(formData) |
|||
console.log(response) |
|||
} |
|||
|
|||
return ( |
|||
<Modal |
|||
open={open} |
|||
onClose={handleClose} |
|||
aria-labelledby="modal-title" |
|||
aria-describedby="modal-description" |
|||
> |
|||
<Box |
|||
sx={{ |
|||
position: 'absolute', |
|||
top: '50%', |
|||
left: '50%', |
|||
transform: 'translate(-50%, -50%)', |
|||
width: 600, |
|||
bgcolor: 'background.paper', |
|||
boxShadow: 24, |
|||
p: 4 |
|||
}} |
|||
> |
|||
<Typography id="modal-title" variant="h6" component="h2"> |
|||
Ajoutez un etudiants |
|||
</Typography> |
|||
<Box |
|||
sx={{ |
|||
marginTop: '2%', |
|||
display: 'flex', |
|||
gap: '20px', |
|||
alignItems: 'end', |
|||
justifyContent: 'flex-end' |
|||
}} |
|||
> |
|||
<form onSubmit={handleSubmit}> |
|||
<Grid container spacing={2}> |
|||
{/* Nom and Prenom Fields */} |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
label="Nom" |
|||
name="nom" |
|||
color="secondary" |
|||
fullWidth |
|||
value={formData.nom} |
|||
onChange={handleInputChange} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<FaUser /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
inputRef={nomRef} |
|||
sx={{ |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: 'rgb(156, 39, 176)' // Set the border color on hover |
|||
} |
|||
} |
|||
}} |
|||
/> |
|||
</Grid> |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
label="Prenom" |
|||
name="prenom" |
|||
fullWidth |
|||
color="secondary" |
|||
value={formData.prenom} |
|||
onChange={handleInputChange} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<FaUser /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
inputRef={prenomRef} |
|||
sx={{ |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: 'rgb(156, 39, 176)' // Set the border color on hover |
|||
} |
|||
} |
|||
}} |
|||
/> |
|||
</Grid> |
|||
|
|||
{/* Date de Naissance and Niveau Fields */} |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
label="Date de Naissance" |
|||
name="date_de_naissances" |
|||
fullWidth |
|||
color="secondary" |
|||
value={formData.date_de_naissances} |
|||
onChange={handleInputChange} |
|||
type="date" |
|||
InputLabelProps={{ shrink: true }} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<FaBirthdayCake /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
inputRef={date_de_naissancesRef} |
|||
sx={{ |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: 'rgb(156, 39, 176)' // Set the border color on hover |
|||
} |
|||
} |
|||
}} |
|||
/> |
|||
</Grid> |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
label="Niveau" |
|||
name="niveau" |
|||
fullWidth |
|||
color="secondary" |
|||
value={formData.niveau} |
|||
onChange={handleInputChange} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<FaGraduationCap /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
inputRef={niveauRef} |
|||
sx={{ |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: 'rgb(156, 39, 176)' // Set the border color on hover |
|||
} |
|||
} |
|||
}} |
|||
/> |
|||
</Grid> |
|||
|
|||
{/* Année Scolaire and Numéro d'Inscription Fields */} |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
label="Année Scolaire" |
|||
name="annee_scolaire" |
|||
fullWidth |
|||
color="secondary" |
|||
value={formData.annee_scolaire} |
|||
onChange={handleInputChange} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<FaCalendarAlt /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
inputRef={annee_scolaireRef} |
|||
sx={{ |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: 'rgb(156, 39, 176)' // Set the border color on hover |
|||
} |
|||
} |
|||
}} |
|||
/> |
|||
</Grid> |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
label="Numéro d'Inscription" |
|||
name="num_inscription" |
|||
fullWidth |
|||
color="secondary" |
|||
value={formData.num_inscription} |
|||
onChange={handleInputChange} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<FaIdBadge /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
inputRef={numero_inscriptionRef} |
|||
sx={{ |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: 'rgb(156, 39, 176)' // Set the border color on hover |
|||
} |
|||
} |
|||
}} |
|||
/> |
|||
</Grid> |
|||
|
|||
{/* Photos Field */} |
|||
<Grid item xs={12}> |
|||
<TextField |
|||
label="Photos" |
|||
name="photos" |
|||
fullWidth |
|||
color="secondary" |
|||
onChange={handleFileChange} |
|||
type="file" |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<FaFileUpload /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
InputLabelProps={{ |
|||
shrink: true |
|||
}} |
|||
inputRef={photosRef} |
|||
sx={{ |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: 'rgb(156, 39, 176)' // Set the border color on hover |
|||
} |
|||
} |
|||
}} |
|||
/> |
|||
</Grid> |
|||
|
|||
{/* Submit Button */} |
|||
<Grid |
|||
item |
|||
xs={12} |
|||
style={{ display: 'flex', gap: '30px', justifyContent: 'flex-end' }} |
|||
> |
|||
<Button type="submit" color="secondary" variant="contained"> |
|||
Enregister |
|||
</Button> |
|||
<Button |
|||
onClick={handleClose} |
|||
color="error" |
|||
variant="contained" |
|||
sx={{ width: '30px' }} |
|||
> |
|||
Close |
|||
</Button> |
|||
</Grid> |
|||
</Grid> |
|||
</form> |
|||
</Box> |
|||
</Box> |
|||
</Modal> |
|||
) |
|||
} |
|||
|
|||
export default ModalAddEtudiants |
|||
@ -1,178 +0,0 @@ |
|||
import React, { useEffect, useRef, useState } from 'react' |
|||
import { |
|||
Dialog, |
|||
DialogActions, |
|||
DialogContent, |
|||
DialogTitle, |
|||
TextField, |
|||
Button, |
|||
InputAdornment, |
|||
Box, |
|||
Grid |
|||
} from '@mui/material' |
|||
import ChangeCapital from './function/ChangeCapitalLetter' |
|||
import ChangeCapitalize from './function/ChangeCapitalizeLetter' |
|||
import { PiChalkboardTeacher } from 'react-icons/pi' |
|||
import { MdContactPhone, MdDateRange } from 'react-icons/md' |
|||
|
|||
const ModalAddProf = ({ open, onClose, matiere_id, onSubmitSuccess }) => { |
|||
const [formData, setFormData] = useState({ |
|||
nom_enseignant: '', |
|||
prenom_enseignant: '', |
|||
contact: '', |
|||
date: '', |
|||
matiere_id: '' |
|||
}) |
|||
|
|||
const nomRefs = useRef() |
|||
const prenomRefs = useRef() |
|||
|
|||
const handleChange = (e) => { |
|||
const { name, value } = e.target |
|||
setFormData({ ...formData, [name]: value }) |
|||
} |
|||
|
|||
useEffect(() => { |
|||
setFormData((prev) => ({ |
|||
...prev, |
|||
matiere_id: matiere_id |
|||
})) |
|||
}, [matiere_id]) |
|||
|
|||
const handleSubmit = async (e) => { |
|||
e.preventDefault() |
|||
let response = await window.matieres.insertProf(formData) |
|||
console.log(response) |
|||
|
|||
if (response.success) { |
|||
onSubmitSuccess(true) |
|||
onClose() // Close the modal after submission |
|||
setFormData({ |
|||
nom_enseignant: '', |
|||
prenom_enseignant: '', |
|||
contact: '', |
|||
date: '', |
|||
matiere_id: '' |
|||
}) |
|||
} |
|||
} |
|||
|
|||
return ( |
|||
<Dialog open={open} onClose={onClose}> |
|||
<form action="" onSubmit={handleSubmit}> |
|||
<DialogTitle>Information sur enseignant</DialogTitle> |
|||
<DialogContent> |
|||
<Box sx={{ flexGrow: 1 }}> |
|||
<Grid container spacing={2}> |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
autoFocus |
|||
margin="normal" |
|||
required |
|||
name="nom_enseignant" |
|||
label="Nom du professeur" |
|||
type="text" |
|||
fullWidth |
|||
placeholder="Nom du professeur" |
|||
variant="outlined" |
|||
value={formData.nom_enseignant} |
|||
color="warning" |
|||
inputRef={nomRefs} |
|||
onInput={() => ChangeCapital(nomRefs)} |
|||
onChange={handleChange} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<PiChalkboardTeacher /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
/> |
|||
</Grid> |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
autoFocus |
|||
margin="normal" |
|||
required |
|||
name="prenom_enseignant" |
|||
label="Prenom du professeur" |
|||
type="text" |
|||
fullWidth |
|||
placeholder="Prenom du professeur" |
|||
variant="outlined" |
|||
value={formData.prenom_enseignant} |
|||
color="warning" |
|||
inputRef={prenomRefs} |
|||
onInput={() => ChangeCapitalize(prenomRefs)} |
|||
onChange={handleChange} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<PiChalkboardTeacher /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
/> |
|||
</Grid> |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
autoFocus |
|||
margin="normal" |
|||
required |
|||
name="contact" |
|||
label="Contact" |
|||
type="number" |
|||
fullWidth |
|||
placeholder="Contact" |
|||
variant="outlined" |
|||
value={formData.contact} |
|||
color="warning" |
|||
onChange={handleChange} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<MdContactPhone /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
/> |
|||
</Grid> |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
autoFocus |
|||
margin="normal" |
|||
required |
|||
name="date" |
|||
label="Date de prise du poste" |
|||
type="date" |
|||
fullWidth |
|||
variant="outlined" |
|||
value={formData.date} |
|||
color="warning" |
|||
onChange={handleChange} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<MdDateRange /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
/> |
|||
</Grid> |
|||
</Grid> |
|||
</Box> |
|||
</DialogContent> |
|||
<DialogActions> |
|||
<Button onClick={onClose} color="error"> |
|||
Annuler |
|||
</Button> |
|||
<Button type="submit" color="warning"> |
|||
Soumettre |
|||
</Button> |
|||
</DialogActions> |
|||
</form> |
|||
</Dialog> |
|||
) |
|||
} |
|||
|
|||
export default ModalAddProf |
|||
@ -1,97 +0,0 @@ |
|||
import React, { useState } from 'react' |
|||
import { Dialog, DialogActions, DialogContent, DialogTitle, TextField, Button } from '@mui/material' |
|||
import PDFEditorCertificat from './function/PDFEditorCertificate' |
|||
|
|||
const ModalCertificate = ({ open, onClose, json }) => { |
|||
const [formData, setFormData] = useState({ |
|||
pere: '', |
|||
mere: '', |
|||
chefService: '' |
|||
}) |
|||
|
|||
const handleChange = (e) => { |
|||
const { name, value } = e.target |
|||
setFormData({ ...formData, [name]: value }) |
|||
} |
|||
|
|||
const handleSubmit = (e) => { |
|||
e.preventDefault() |
|||
console.log('Form submitted:', formData, json) |
|||
let data = { |
|||
f1: json.nomPrenom, |
|||
f2: json.naissances, |
|||
f3: formData.pere, |
|||
f4: formData.mere, |
|||
f5: json.niveau, |
|||
f6: json.mention, |
|||
f7: json.inscri, |
|||
f8: json.annee, |
|||
f9: formData.chefService |
|||
} |
|||
// Handle the form submission (e.g., send to a server or process data) |
|||
PDFEditorCertificat(data) |
|||
setFormData({ |
|||
mere: '', |
|||
pere: '', |
|||
chefService: '' |
|||
}) |
|||
onClose() // Close the modal after submission |
|||
} |
|||
|
|||
return ( |
|||
<Dialog open={open} onClose={onClose}> |
|||
<form action=""> |
|||
<DialogTitle>Informations sur l'élève</DialogTitle> |
|||
<DialogContent> |
|||
<TextField |
|||
autoFocus |
|||
margin="dense" |
|||
required |
|||
name="pere" |
|||
label="Père de l'élève" |
|||
type="text" |
|||
fullWidth |
|||
variant="outlined" |
|||
value={formData.pere} |
|||
color="warning" |
|||
onChange={handleChange} |
|||
/> |
|||
<TextField |
|||
margin="dense" |
|||
name="mere" |
|||
required |
|||
label="Mère de l'élève" |
|||
type="text" |
|||
fullWidth |
|||
variant="outlined" |
|||
value={formData.mere} |
|||
color="warning" |
|||
onChange={handleChange} |
|||
/> |
|||
<TextField |
|||
margin="dense" |
|||
name="chefService" |
|||
label="Chef de service de scolarité" |
|||
type="text" |
|||
fullWidth |
|||
required |
|||
color="warning" |
|||
variant="outlined" |
|||
value={formData.chefService} |
|||
onChange={handleChange} |
|||
/> |
|||
</DialogContent> |
|||
<DialogActions> |
|||
<Button onClick={onClose} color="warning" variant="contained"> |
|||
Annuler |
|||
</Button> |
|||
<Button onClick={handleSubmit} type="submit" color="warning" variant="contained"> |
|||
Soumettre |
|||
</Button> |
|||
</DialogActions> |
|||
</form> |
|||
</Dialog> |
|||
) |
|||
} |
|||
|
|||
export default ModalCertificate |
|||
@ -1,89 +0,0 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import { |
|||
Dialog, |
|||
DialogActions, |
|||
DialogContent, |
|||
DialogTitle, |
|||
TextField, |
|||
Button, |
|||
InputAdornment |
|||
} from '@mui/material' |
|||
import { FaTimes } from 'react-icons/fa' |
|||
|
|||
const ModalFormMultiplicateur = ({ open, onClose }) => { |
|||
const [formData, setFormData] = useState({ |
|||
id: '', |
|||
multiplicateur: '' |
|||
}) |
|||
|
|||
const [Multiplicateur, setMultiplicateur] = useState(0) |
|||
|
|||
useEffect(() => { |
|||
window.matieres.getNessesary().then((response) => { |
|||
setMultiplicateur(response) |
|||
}) |
|||
}, []) |
|||
|
|||
useEffect(() => { |
|||
setFormData((prev) => ({ |
|||
...prev, |
|||
id: Multiplicateur.id, |
|||
multiplicateur: Multiplicateur.uniter_heure |
|||
})) |
|||
}, [Multiplicateur]) |
|||
|
|||
const handleChange = (e) => { |
|||
const { name, value } = e.target |
|||
setFormData({ ...formData, [name]: value }) |
|||
} |
|||
|
|||
const handleSubmit = async (e) => { |
|||
e.preventDefault() |
|||
console.log(formData) |
|||
let response = await window.matieres.updateNessesary(formData) |
|||
|
|||
if (response.success) { |
|||
onClose() // Close the modal after submission |
|||
} |
|||
} |
|||
|
|||
return ( |
|||
<Dialog open={open} onClose={onClose}> |
|||
<form action="" onSubmit={handleSubmit}> |
|||
<DialogTitle>Changer le multiplicateur</DialogTitle> |
|||
<DialogContent> |
|||
<TextField |
|||
autoFocus |
|||
margin="dense" |
|||
required |
|||
name="multiplicateur" |
|||
label="Multiplicateur crédit-heure" |
|||
type="text" |
|||
fullWidth |
|||
variant="outlined" |
|||
value={formData.multiplicateur} |
|||
color="warning" |
|||
onChange={handleChange} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<FaTimes /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
/> |
|||
</DialogContent> |
|||
<DialogActions> |
|||
<Button onClick={onClose} color="error"> |
|||
Annuler |
|||
</Button> |
|||
<Button type="submit" color="warning"> |
|||
Soumettre |
|||
</Button> |
|||
</DialogActions> |
|||
</form> |
|||
</Dialog> |
|||
) |
|||
} |
|||
|
|||
export default ModalFormMultiplicateur |
|||
@ -1,54 +0,0 @@ |
|||
import React, { useState } from 'react' |
|||
import { |
|||
Dialog, |
|||
DialogActions, |
|||
DialogContent, |
|||
DialogTitle, |
|||
TextField, |
|||
Button, |
|||
InputAdornment, |
|||
Box, |
|||
Grid |
|||
} from '@mui/material' |
|||
import { PiChalkboardTeacher } from 'react-icons/pi' |
|||
|
|||
const ModalProcessFichePresence = ({ open, onClose, matiere_id }) => { |
|||
const [formData, setFormData] = useState({ |
|||
matiere: '' |
|||
}) |
|||
return ( |
|||
<Dialog open={open} onClose={onClose}> |
|||
<DialogTitle>Option sur la la fiches</DialogTitle> |
|||
<DialogContent> |
|||
<Box sx={{ flexGrow: 1 }}> |
|||
<Grid container spacing={2}> |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
autoFocus |
|||
margin="normal" |
|||
required |
|||
name="nom_enseignant" |
|||
label="Nom du professeur" |
|||
type="text" |
|||
fullWidth |
|||
placeholder="Nom du professeur" |
|||
variant="outlined" |
|||
value={formData.matiere} |
|||
color="warning" |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<PiChalkboardTeacher /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
/> |
|||
</Grid> |
|||
</Grid> |
|||
</Box> |
|||
</DialogContent> |
|||
</Dialog> |
|||
) |
|||
} |
|||
|
|||
export default ModalProcessFichePresence |
|||
@ -1,66 +0,0 @@ |
|||
import React, { useState } from 'react' |
|||
import { Dialog, DialogActions, DialogContent, DialogTitle, TextField, Button } from '@mui/material' |
|||
import PDFEditorRecepice from './function/PDFEditorRecepisse' |
|||
|
|||
const ModalRecepice = ({ open, onClose, json }) => { |
|||
const [formData, setFormData] = useState({ |
|||
nom: '' |
|||
}) |
|||
|
|||
const handleChange = (e) => { |
|||
const { name, value } = e.target |
|||
setFormData({ ...formData, [name]: value }) |
|||
} |
|||
|
|||
const handleSubmit = (e) => { |
|||
e.preventDefault() |
|||
console.log('Form submitted:', formData) |
|||
let data = { |
|||
f1: json.mention, |
|||
f2: json.niveau, |
|||
f3: json.nomPrenom, |
|||
f4: json.inscri, |
|||
f6: json.annee, |
|||
f7: formData.nom |
|||
} |
|||
// Handle the form submission (e.g., send to a server or process data) |
|||
PDFEditorRecepice(data) |
|||
setFormData({ |
|||
nom: '' |
|||
}) |
|||
onClose() // Close the modal after submission |
|||
} |
|||
|
|||
return ( |
|||
<Dialog open={open} onClose={onClose}> |
|||
<form action=""> |
|||
<DialogTitle>Informations suplementaire</DialogTitle> |
|||
<DialogContent> |
|||
<TextField |
|||
autoFocus |
|||
margin="dense" |
|||
required |
|||
name="nom" |
|||
label="Nom et prenom du chef de services" |
|||
type="text" |
|||
fullWidth |
|||
variant="outlined" |
|||
value={formData.nom} |
|||
color="warning" |
|||
onChange={handleChange} |
|||
/> |
|||
</DialogContent> |
|||
<DialogActions> |
|||
<Button onClick={onClose} color="warning" variant="contained"> |
|||
Annuler |
|||
</Button> |
|||
<Button onClick={handleSubmit} type="submit" color="warning" variant="contained"> |
|||
Soumettre |
|||
</Button> |
|||
</DialogActions> |
|||
</form> |
|||
</Dialog> |
|||
) |
|||
} |
|||
|
|||
export default ModalRecepice |
|||
@ -1,84 +0,0 @@ |
|||
import React, { useRef, useState } from 'react' |
|||
import { Dialog, DialogActions, DialogContent, DialogTitle, TextField, Button } from '@mui/material' |
|||
import PDFEditorStage from './function/PDFEditorStage' |
|||
import ChangeCapital from './function/ChangeCapitalLetter' |
|||
import ChangeCapitalize from './function/ChangeCapitalizeLetter' |
|||
|
|||
const ModalStage = ({ open, onClose }) => { |
|||
const [formData, setFormData] = useState({ |
|||
nom: '', |
|||
prenom: '' |
|||
}) |
|||
|
|||
const handleChange = (e) => { |
|||
const { name, value } = e.target |
|||
setFormData({ ...formData, [name]: value }) |
|||
} |
|||
|
|||
const handleSubmit = (e) => { |
|||
e.preventDefault() |
|||
console.log('Form submitted:', formData) |
|||
let data = { |
|||
f1: formData.nom + ' ' + formData.prenom |
|||
} |
|||
// Handle the form submission (e.g., send to a server or process data) |
|||
PDFEditorStage(data) |
|||
setFormData({ |
|||
nom: '', |
|||
prenom: '' |
|||
}) |
|||
onClose() // Close the modal after submission |
|||
} |
|||
|
|||
const nomRef = useRef() |
|||
const prenomRef = useRef() |
|||
|
|||
return ( |
|||
<Dialog open={open} onClose={onClose}> |
|||
<form action=""> |
|||
<DialogTitle>Informations suplementaire</DialogTitle> |
|||
<DialogContent> |
|||
<TextField |
|||
autoFocus |
|||
margin="dense" |
|||
required |
|||
name="nom" |
|||
label="Nom du directeur" |
|||
type="text" |
|||
fullWidth |
|||
variant="outlined" |
|||
value={formData.nom} |
|||
inputRef={nomRef} |
|||
onInput={() => ChangeCapital(nomRef)} |
|||
color="warning" |
|||
onChange={handleChange} |
|||
/> |
|||
<TextField |
|||
margin="dense" |
|||
name="prenom" |
|||
required |
|||
label="Prenom du directeur" |
|||
type="text" |
|||
fullWidth |
|||
variant="outlined" |
|||
inputRef={prenomRef} |
|||
value={formData.prenom} |
|||
onInput={() => ChangeCapitalize(prenomRef)} |
|||
color="warning" |
|||
onChange={handleChange} |
|||
/> |
|||
</DialogContent> |
|||
<DialogActions> |
|||
<Button onClick={onClose} color="warning" variant="contained"> |
|||
Annuler |
|||
</Button> |
|||
<Button onClick={handleSubmit} type="submit" color="warning" variant="contained"> |
|||
Soumettre |
|||
</Button> |
|||
</DialogActions> |
|||
</form> |
|||
</Dialog> |
|||
) |
|||
} |
|||
|
|||
export default ModalStage |
|||
@ -1,107 +0,0 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import { |
|||
Dialog, |
|||
DialogActions, |
|||
DialogContent, |
|||
DialogTitle, |
|||
TextField, |
|||
Button, |
|||
Autocomplete, |
|||
InputAdornment |
|||
} from '@mui/material' |
|||
import { MdRule } from 'react-icons/md' |
|||
|
|||
const ModalUpdateParcoursEtudiant = ({ open, onClose, user_id, onSubmit }) => { |
|||
const [formData, setFormData] = useState({ |
|||
parcours: '', |
|||
user_id: '' |
|||
}) |
|||
const [parcours, setParcours] = useState([]) |
|||
|
|||
useEffect(() => { |
|||
window.notesysteme.getParcours().then((response) => { |
|||
setParcours(response) |
|||
}) |
|||
}, []) |
|||
|
|||
useEffect(() => { |
|||
if (user_id) { |
|||
setFormData((prevData) => ({ |
|||
...prevData, |
|||
user_id: user_id |
|||
})) |
|||
} |
|||
}, [user_id]) |
|||
|
|||
const handleSubmit = async (e) => { |
|||
e.preventDefault() |
|||
|
|||
let response = await window.etudiants.changeParcours(formData) |
|||
|
|||
if (response.changes) { |
|||
onSubmit(true, formData.parcours) |
|||
onClose() |
|||
} |
|||
} |
|||
|
|||
return ( |
|||
<Dialog open={open} onClose={onClose}> |
|||
<form action=""> |
|||
<DialogTitle>Ajouter un parcours</DialogTitle> |
|||
<DialogContent> |
|||
<Autocomplete |
|||
options={parcours} // Options array for Autocomplete |
|||
getOptionLabel={(option) => option.nom || ''} // Display `nom` |
|||
value={parcours.find((item) => item.nom === formData.parcours) || null} // Find selected option based on `nom` |
|||
onChange={(event, newValue) => { |
|||
setFormData((prevData) => ({ |
|||
...prevData, |
|||
parcours: newValue ? newValue.nom : '' // Store only `nom` |
|||
})) |
|||
}} |
|||
size="small" |
|||
isOptionEqualToValue={(option, value) => option.nom === value?.nom} // Ensure correct matching |
|||
renderInput={(params) => ( |
|||
<TextField |
|||
{...params} |
|||
label="Parcours" |
|||
margin="normal" |
|||
color="warning" |
|||
placeholder="Sélectionnez une mention" |
|||
InputProps={{ |
|||
...params.InputProps, |
|||
startAdornment: ( |
|||
<> |
|||
<InputAdornment position="start"> |
|||
<MdRule /> |
|||
</InputAdornment> |
|||
{params.InputProps.startAdornment} |
|||
</> |
|||
) |
|||
}} |
|||
sx={{ |
|||
marginBottom: '5px', |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: '#ff9800' // Set border color on hover |
|||
} |
|||
} |
|||
}} |
|||
/> |
|||
)} |
|||
/> |
|||
</DialogContent> |
|||
<DialogActions> |
|||
<Button onClick={onClose} color="warning" variant="contained"> |
|||
Annuler |
|||
</Button> |
|||
<Button onClick={handleSubmit} type="submit" color="warning" variant="contained"> |
|||
Soumettre |
|||
</Button> |
|||
</DialogActions> |
|||
</form> |
|||
</Dialog> |
|||
) |
|||
} |
|||
|
|||
export default ModalUpdateParcoursEtudiant |
|||
@ -1,140 +0,0 @@ |
|||
import React, { useState } from 'react' |
|||
import classe from '../assets/Navbar.module.css' |
|||
import icon from '../assets/logo.ico' |
|||
import { FaTimes, FaRegWindowMinimize } from 'react-icons/fa' |
|||
import { useAuthContext } from '../contexts/AuthContext' |
|||
import { Modal, Box, Typography, Button } from '@mui/material' |
|||
import { useNavigate } from 'react-router-dom' |
|||
|
|||
const Navbar = () => { |
|||
const { token, setToken } = useAuthContext() |
|||
const navigate = useNavigate() |
|||
|
|||
/** |
|||
* function to quit app |
|||
*/ |
|||
const quitApp = () => { |
|||
if (token !== null) { |
|||
setOpen(true) |
|||
} else { |
|||
quit() |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* function to minimize the app |
|||
* if the user try to open something |
|||
* in the desktop |
|||
*/ |
|||
const minimize = async () => { |
|||
await window.allUser.minimize() |
|||
} |
|||
|
|||
/** |
|||
* hook to open modal |
|||
*/ |
|||
const [open, setOpen] = useState(false) |
|||
|
|||
/** |
|||
* function to close modal |
|||
*/ |
|||
const handleClose = () => setOpen(false) |
|||
|
|||
/** |
|||
* function to quit |
|||
*/ |
|||
const quit = async () => { |
|||
await window.allUser.quit() |
|||
} |
|||
|
|||
/** |
|||
* function after user click yes button in the modal |
|||
*/ |
|||
const logoutAndQuit = () => { |
|||
localStorage.removeItem('ACCESS_TOKEN') |
|||
setToken(null) |
|||
navigate('/login') |
|||
quit() |
|||
} |
|||
|
|||
/** |
|||
* function to return the view Modal |
|||
* |
|||
* @returns {JSX} |
|||
*/ |
|||
const modals = () => ( |
|||
<Modal |
|||
open={open} |
|||
onClose={handleClose} |
|||
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 |
|||
}} |
|||
> |
|||
<Typography id="modal-title" variant="h6" component="h2"> |
|||
Notification |
|||
</Typography> |
|||
<Typography id="modal-description" sx={{ mt: 2 }}> |
|||
Déconnecter et quitter ? |
|||
</Typography> |
|||
<Box |
|||
sx={{ |
|||
marginTop: '2%', |
|||
display: 'flex', |
|||
gap: '20px', |
|||
alignItems: 'end', |
|||
justifyContent: 'flex-end' |
|||
}} |
|||
> |
|||
<Button |
|||
color="warning" |
|||
variant="contained" |
|||
onClick={logoutAndQuit} |
|||
sx={{ width: '10px' }} |
|||
> |
|||
Oui |
|||
</Button> |
|||
<Button onClick={handleClose} color="error" variant="contained" sx={{ width: '10px' }}> |
|||
Non |
|||
</Button> |
|||
</Box> |
|||
</Box> |
|||
</Modal> |
|||
) |
|||
|
|||
return ( |
|||
<> |
|||
<div className={classe.navnar}> |
|||
{modals()} |
|||
<div className={classe.gauche}> |
|||
<img src={icon} alt="" width={20} height={20} className="rounded-circle" /> |
|||
<span style={{ fontWeight: 'bold', paddingLeft: '2%' }}>Université de Toamasina</span> |
|||
</div> |
|||
<div className={classe.droite}> |
|||
<FaRegWindowMinimize |
|||
style={{ |
|||
fontSize: '20px', |
|||
cursor: 'pointer', |
|||
paddingBottom: '11%', |
|||
fontWeight: 'bold' |
|||
}} |
|||
onClick={minimize} |
|||
/> |
|||
<FaTimes style={{ fontSize: '20px', cursor: 'pointer' }} onClick={quitApp} /> |
|||
</div> |
|||
</div> |
|||
</> |
|||
) |
|||
} |
|||
|
|||
export default Navbar |
|||
@ -1,264 +0,0 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import { Link } from 'react-router-dom' |
|||
import { createTheme, ThemeProvider } from '@mui/material/styles' |
|||
import { DataGrid } from '@mui/x-data-grid' |
|||
import { frFR } from '@mui/x-data-grid/locales' |
|||
import Paper from '@mui/material/Paper' |
|||
import { Box, Button, InputAdornment, Typography, Modal, TextField, Grid } from '@mui/material' |
|||
import classe from '../assets/AllStyleComponents.module.css' |
|||
import classeHome from '../assets/Home.module.css' |
|||
import { GiUpgrade } from 'react-icons/gi' |
|||
import { FaPenToSquare, FaTrash } from 'react-icons/fa6' |
|||
import { Tooltip } from 'react-tooltip' |
|||
import warning from '../assets/warning.svg' |
|||
import success from '../assets/success.svg' |
|||
|
|||
const Niveau = () => { |
|||
const [niveaus, setNiveau] = useState([]) |
|||
|
|||
useEffect(() => { |
|||
window.niveaus.getNiveau().then((response) => { |
|||
setNiveau(response) |
|||
}) |
|||
}, []) |
|||
|
|||
const [isDeleted, setIsDeleted] = useState(false) |
|||
const [ids, setIds] = useState(0) |
|||
|
|||
const columns = [ |
|||
{ field: 'nom', headerName: 'Nom', width: 200 }, |
|||
{ |
|||
field: 'action', |
|||
headerName: 'Action', |
|||
flex: 1, |
|||
renderCell: (params) => ( |
|||
<div style={{ display: 'flex', gap: '10px' }}> |
|||
<Link to={`/single/niveau/${params.value}`}> |
|||
<Button color="warning" variant="contained"> |
|||
<FaPenToSquare |
|||
style={{ fontSize: '20px', color: 'white' }} |
|||
className={`update${params.value}`} |
|||
/> |
|||
<Tooltip |
|||
anchorSelect={`.update${params.value}`} |
|||
style={{ fontSize: '15px', zIndex: 22 }} |
|||
place="top" |
|||
> |
|||
Modifier |
|||
</Tooltip> |
|||
</Button> |
|||
</Link> |
|||
<Link |
|||
to={`#`} |
|||
onClick={() => { |
|||
setIds(params.row.id) |
|||
setOpen(true) |
|||
}} |
|||
> |
|||
<Button color="error" variant="contained"> |
|||
<FaTrash |
|||
style={{ fontSize: '20px', color: 'white' }} |
|||
className={`delete${params.value}`} |
|||
/> |
|||
<Tooltip |
|||
anchorSelect={`.delete${params.value}`} |
|||
style={{ fontSize: '15px', zIndex: 22 }} |
|||
place="top" |
|||
> |
|||
Supprimer |
|||
</Tooltip> |
|||
</Button> |
|||
</Link> |
|||
</div> |
|||
) |
|||
} |
|||
] |
|||
|
|||
const paginationModel = { page: 0, pageSize: 5 } |
|||
|
|||
const dataRow = niveaus.map((niveau) => ({ |
|||
id: niveau.id, |
|||
nom: niveau.nom, |
|||
action: niveau.id |
|||
})) |
|||
|
|||
const theme = createTheme({ |
|||
components: { |
|||
MuiIconButton: { |
|||
styleOverrides: { |
|||
root: { |
|||
color: 'gray' // Change the color of toolbar icons |
|||
} |
|||
} |
|||
}, |
|||
MuiButton: { |
|||
styleOverrides: { |
|||
root: { |
|||
color: '#121212' // Change the color of toolbar icons |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
|
|||
/** |
|||
* hook to open modal |
|||
*/ |
|||
const [open, setOpen] = useState(false) |
|||
|
|||
/** |
|||
* function to close modal |
|||
*/ |
|||
const handleClose = () => { |
|||
setOpen(false) |
|||
setIsDeleted(false) |
|||
} |
|||
|
|||
const deleteButton = async (id) => { |
|||
let response = await window.niveaus.deleteNiveaus({ id }) |
|||
console.log(response); |
|||
|
|||
if (response.success) { |
|||
const updatedNiveaus = niveaus.filter((niveau) => niveau.id !== id) |
|||
setNiveau(updatedNiveaus) |
|||
setIsDeleted(true) |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* function to return the view Modal |
|||
* |
|||
* @returns {JSX} |
|||
*/ |
|||
const modals = () => ( |
|||
<Modal |
|||
open={open} |
|||
onClose={handleClose} |
|||
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>Suprimer avec succèss</span> |
|||
</Typography> |
|||
) : ( |
|||
<Typography |
|||
style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }} |
|||
> |
|||
<img src={warning} alt="" width={50} height={50} />{' '} |
|||
<span>Voulez vous supprimer ce niveau ?</span> |
|||
</Typography> |
|||
)} |
|||
<Box |
|||
sx={{ |
|||
marginTop: '2%', |
|||
display: 'flex', |
|||
gap: '20px', |
|||
alignItems: 'end', |
|||
justifyContent: 'flex-end' |
|||
}} |
|||
> |
|||
{isDeleted ? ( |
|||
<Button onClick={handleClose} color="warning" variant="contained"> |
|||
OK |
|||
</Button> |
|||
) : ( |
|||
<div> |
|||
<Button |
|||
onClick={() => deleteButton(ids)} |
|||
sx={{ mr: 1 }} |
|||
color="warning" |
|||
variant="contained" |
|||
> |
|||
Oui |
|||
</Button> |
|||
<Button onClick={handleClose} color="warning" variant="contained"> |
|||
Non |
|||
</Button> |
|||
</div> |
|||
)} |
|||
</Box> |
|||
</Box> |
|||
</Modal> |
|||
) |
|||
|
|||
return ( |
|||
<div className={classe.mainHome}> |
|||
{modals()} |
|||
<div className={classeHome.header}> |
|||
<div className={classe.h1style}> |
|||
<div className={classeHome.blockTitle}> |
|||
<h1>Niveau</h1> |
|||
<Link to={'/addniveau'}> |
|||
<Button color="warning" variant="contained"> |
|||
<GiUpgrade style={{ fontSize: '20px', color: 'white' }} /> Ajouter |
|||
</Button> |
|||
</Link> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
{/* display the data-grid niveau */} |
|||
<div className={classeHome.boxEtudiantsCard}> |
|||
<div style={{ display: 'flex', justifyContent: 'center' }}> |
|||
<Paper |
|||
sx={{ |
|||
height: 'auto', // Auto height to make the grid responsive |
|||
width: '100%', |
|||
minHeight: 500, // Ensures a minimum height |
|||
display: 'flex' |
|||
}} |
|||
> |
|||
<ThemeProvider theme={theme}> |
|||
<div |
|||
style={{ |
|||
display: 'flex', |
|||
alignItems: 'center', |
|||
justifyContent: 'center', |
|||
width: '100%', // Make it responsive to full width |
|||
flexDirection: 'column' // Stacks content vertically on smaller screens |
|||
}} |
|||
> |
|||
<DataGrid |
|||
rows={dataRow} |
|||
columns={columns} |
|||
initialState={{ pagination: { paginationModel } }} |
|||
pageSizeOptions={[5, 10]} |
|||
sx={{ |
|||
border: 0, |
|||
width: '100%', // Ensures the DataGrid takes full width |
|||
height: '50%', // Ensures it grows to fit content |
|||
minHeight: 400, // Minimum height for the DataGrid |
|||
display: 'flex', |
|||
justifyContent: 'center', |
|||
'@media (max-width: 600px)': { |
|||
width: '100%', // 100% width on small screens |
|||
height: 'auto' // Allow height to grow with content |
|||
} |
|||
}} |
|||
localeText={frFR.components.MuiDataGrid.defaultProps.localeText} |
|||
/> |
|||
</div> |
|||
</ThemeProvider> |
|||
</Paper> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
export default Niveau |
|||
@ -1,11 +0,0 @@ |
|||
import React from 'react' |
|||
|
|||
const NotFound = () => { |
|||
return ( |
|||
<div> |
|||
<h1>404 Not Found</h1> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
export default NotFound |
|||
@ -1,372 +0,0 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import { useParams, Link } from 'react-router-dom' |
|||
import classe from '../assets/AllStyleComponents.module.css' |
|||
import classeHome from '../assets/Home.module.css' |
|||
import Paper from '@mui/material/Paper' |
|||
import { DataGrid, GridToolbar } from '@mui/x-data-grid' |
|||
import { frFR } from '@mui/x-data-grid/locales' |
|||
import { createTheme, ThemeProvider } from '@mui/material/styles' |
|||
import { IoNewspaperOutline } from 'react-icons/io5' |
|||
import { IoMdReturnRight } from 'react-icons/io' |
|||
import { Button, Modal, Box } from '@mui/material' |
|||
import { Tooltip } from 'react-tooltip' |
|||
import ReleverNotes from './ReleverNotes' |
|||
import { FaDownload } from 'react-icons/fa' |
|||
|
|||
const Noteclasse = () => { |
|||
const { niveau, scolaire } = useParams() |
|||
|
|||
const [etudiants, setEtudiants] = useState([]) |
|||
const [mention, setMention] = useState([]) |
|||
const [session, setSession] = useState([]) |
|||
|
|||
const formData = { |
|||
niveau, |
|||
scolaire |
|||
} |
|||
|
|||
useEffect(() => { |
|||
window.notes.getMoyenne(formData).then((response) => { |
|||
setEtudiants(response) |
|||
}) |
|||
window.noteRepech.getMoyenneRepech(formData).then((response) => { |
|||
setSession(response) |
|||
}) |
|||
window.mention.getMention().then((response) => { |
|||
setMention(response) |
|||
}) |
|||
}, []) |
|||
|
|||
let dataToMap = [] |
|||
|
|||
function returnmention(id) { |
|||
let mentions |
|||
for (let index = 0; index < mention.length; index++) { |
|||
if (mention[index].id == id) { |
|||
mentions = mention[index].nom |
|||
} |
|||
} |
|||
return mentions |
|||
} |
|||
|
|||
function checkNull(params) { |
|||
if (params == null || params == undefined) { |
|||
return null |
|||
} |
|||
return params |
|||
} |
|||
|
|||
function compareSessionNotes(session1, session2) { |
|||
let notes |
|||
if (session2) { |
|||
if (session1 < session2.note) { |
|||
notes = session2.note |
|||
} else { |
|||
notes = session1 |
|||
} |
|||
} else { |
|||
notes = session1 |
|||
} |
|||
return notes |
|||
} |
|||
|
|||
for (let index = 0; index < etudiants.length; index++) { |
|||
let total = 0 |
|||
let note = 0 |
|||
let totalCredit = 0 |
|||
|
|||
// Create a new object for each student |
|||
let modelJson = { |
|||
id: '', |
|||
nom: '', |
|||
prenom: '', |
|||
photos: '', |
|||
moyenne: '', |
|||
mention: '', |
|||
anneescolaire: '' |
|||
} |
|||
|
|||
for (let j = 0; j < etudiants[index].length; j++) { |
|||
modelJson.id = etudiants[index][j].etudiant_id |
|||
modelJson.nom = etudiants[index][j].nom |
|||
modelJson.prenom = etudiants[index][j].prenom |
|||
modelJson.photos = etudiants[index][j].photos |
|||
modelJson.mention = etudiants[index][j].mention_id |
|||
modelJson.anneescolaire = etudiants[index][j].annee_scolaire |
|||
|
|||
// console.log(checkNull(session[index][j])); |
|||
if (session[index]) { |
|||
note += |
|||
compareSessionNotes(etudiants[index][j].note, checkNull(session[index][j])) * |
|||
etudiants[index][j].credit |
|||
} else { |
|||
note += etudiants[index][j].note * etudiants[index][j].credit |
|||
} |
|||
totalCredit += etudiants[index][j].credit |
|||
} |
|||
|
|||
total = note / totalCredit |
|||
modelJson.moyenne = total.toFixed(2) |
|||
|
|||
// Add the new object to the array |
|||
dataToMap.push(modelJson) |
|||
} |
|||
|
|||
function checkNumberSession(id) { |
|||
let sessionNumber |
|||
for (let index = 0; index < session.length; index++) { |
|||
for (let j = 0; j < session[index].length; j++) { |
|||
if (session[index][j].etudiant_id == id) { |
|||
sessionNumber = 2 |
|||
} else { |
|||
sessionNumber = 1 |
|||
} |
|||
} |
|||
} |
|||
return sessionNumber |
|||
} |
|||
|
|||
const theme = createTheme({ |
|||
components: { |
|||
MuiIconButton: { |
|||
styleOverrides: { |
|||
root: { |
|||
color: 'gray' // Change the color of toolbar icons |
|||
} |
|||
} |
|||
}, |
|||
MuiButton: { |
|||
styleOverrides: { |
|||
root: { |
|||
color: '#121212' // Change the color of toolbar icons |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
|
|||
const paginationModel = { page: 0, pageSize: 5 } |
|||
|
|||
const columns = [ |
|||
{ field: 'nom', headerName: 'Nom', width: 170 }, |
|||
{ field: 'prenom', headerName: 'Prenom', width: 160 }, |
|||
{ field: 'session', headerName: 'Nombre de Session', width: 180 }, |
|||
{ field: 'mention', headerName: 'Mention', width: 180 }, |
|||
{ field: 'moyenne', headerName: 'Moyenne Général', width: 160 }, |
|||
{ |
|||
field: 'photos', |
|||
headerName: 'Photos', |
|||
width: 100, |
|||
renderCell: (params) => ( |
|||
<img |
|||
src={params.value} // Correct the access to the image source |
|||
alt={'image pdp'} |
|||
style={{ width: 50, height: 50, borderRadius: '50%', objectFit: 'cover' }} |
|||
/> |
|||
) |
|||
}, |
|||
{ |
|||
field: 'action', |
|||
headerName: 'Action', |
|||
flex: 1, |
|||
renderCell: (params) => ( |
|||
<div style={{ display: 'flex', gap: '10px' }}> |
|||
<Link to={`#`} onClick={() => sendData(params.value)}> |
|||
{/* <IoEyeSharp style={{fontSize:"20px", color:"white"}} /> */} |
|||
<Button color="warning" variant="contained" className={`update${params.value}`}> |
|||
<IoNewspaperOutline style={{ fontSize: '20px', color: 'white' }} /> |
|||
</Button> |
|||
<Tooltip |
|||
anchorSelect={`.update${params.value}`} |
|||
style={{ fontSize: '13px', zIndex: 22 }} |
|||
place="bottom-end" |
|||
> |
|||
Imprimer un relevé de notes |
|||
</Tooltip> |
|||
</Link> |
|||
</div> |
|||
) |
|||
} |
|||
] |
|||
|
|||
const dataTable = dataToMap.map((data) => ({ |
|||
id: data.id, |
|||
nom: data.nom, |
|||
prenom: data.prenom, |
|||
photos: data.photos, |
|||
mention: returnmention(data.mention), |
|||
session: checkNumberSession(data.id), |
|||
moyenne: data.moyenne, |
|||
action: data.id |
|||
})) |
|||
|
|||
const [openCard, setOpenCart] = useState(false) |
|||
const [bolll, setBolll] = useState(false) |
|||
const [form, setForm] = useState({ |
|||
id: '', |
|||
niveau: '', |
|||
anneescolaire: '' |
|||
}) |
|||
const [selectedId, setSelectedId] = useState(null) // Store id dynamically |
|||
|
|||
const sendData = (id) => { |
|||
setSelectedId(id) |
|||
// if (selectedId !== null) { |
|||
setOpenCart(true) |
|||
// } |
|||
} |
|||
|
|||
useEffect(() => { |
|||
if (selectedId !== null) { |
|||
const foundData = dataToMap.find((item) => item.id === selectedId) |
|||
if (foundData) { |
|||
setForm((prevForm) => ({ |
|||
...prevForm, |
|||
id: foundData.id, |
|||
anneescolaire: foundData.anneescolaire, |
|||
niveau: niveau |
|||
})) // Update form with the found object |
|||
} |
|||
} |
|||
}, [openCard, selectedId]) |
|||
console.log(form) |
|||
const downloadButton = () => { |
|||
setBolll(true) |
|||
} |
|||
|
|||
/** |
|||
* function to close modal |
|||
*/ |
|||
const handleCloseCart = () => { |
|||
setBolll(false) |
|||
setOpenCart(false) |
|||
} |
|||
|
|||
const modalReleverNotes = () => { |
|||
return ( |
|||
<Modal |
|||
open={openCard} |
|||
onClose={handleCloseCart} |
|||
aria-labelledby="modal-title" |
|||
aria-describedby="modal-description" |
|||
sx={{ |
|||
overflow: 'auto' |
|||
}} |
|||
> |
|||
<Box |
|||
sx={{ |
|||
boxShadow: 24, |
|||
p: 4, |
|||
overflow: 'auto', |
|||
position: 'relative' |
|||
}} |
|||
> |
|||
<ReleverNotes |
|||
id={form.id} |
|||
anneescolaire={scolaire} |
|||
niveau={form.niveau} |
|||
refs={bolll} |
|||
/> |
|||
<Button |
|||
color="warning" |
|||
variant="contained" |
|||
onClick={downloadButton} |
|||
sx={{ position: 'absolute', top: '2%', right: '10%' }} |
|||
> |
|||
<FaDownload /> |
|||
Télécharger |
|||
</Button> |
|||
<button |
|||
style={{ |
|||
position: 'absolute', |
|||
top: '2.5%', |
|||
right: '23%', |
|||
border: 'none', |
|||
background: 'orange', |
|||
outline: 'none', |
|||
borderRadius: '100px' |
|||
}} |
|||
onClick={handleCloseCart} |
|||
> |
|||
X |
|||
</button> |
|||
</Box> |
|||
</Modal> |
|||
) |
|||
} |
|||
|
|||
return ( |
|||
<div className={classe.mainHome}> |
|||
{modalReleverNotes()} |
|||
<div className={classeHome.header}> |
|||
<div className={classe.h1style}> |
|||
<div className={classeHome.blockTitle}> |
|||
<h1> |
|||
Notes des {niveau} en {scolaire} |
|||
</h1> |
|||
<div style={{ display: 'flex', gap: '10px' }}> |
|||
<Link to={`/resultat/${niveau}/${scolaire}`}> |
|||
<Button color="warning" variant="contained"> |
|||
Resultat |
|||
</Button> |
|||
</Link> |
|||
<Link to={'#'} onClick={() => window.history.back()}> |
|||
<Button color="warning" variant="contained"> |
|||
<IoMdReturnRight style={{ fontSize: '20px' }} /> |
|||
</Button> |
|||
</Link> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div className={classeHome.boxEtudiantsCard}> |
|||
<div style={{ display: 'flex', justifyContent: 'center' }}> |
|||
<Paper |
|||
sx={{ |
|||
height: 'auto', // Auto height to make the grid responsive |
|||
width: '100%', |
|||
minHeight: 500, // Ensures a minimum height |
|||
display: 'flex' |
|||
}} |
|||
> |
|||
<ThemeProvider theme={theme}> |
|||
<div |
|||
style={{ |
|||
display: 'flex', |
|||
alignItems: 'center', |
|||
justifyContent: 'center', |
|||
width: '100%', // Make it responsive to full width |
|||
flexDirection: 'column' // Stacks content vertically on smaller screens |
|||
}} |
|||
> |
|||
<DataGrid |
|||
rows={dataTable} |
|||
columns={columns} |
|||
initialState={{ pagination: { paginationModel } }} |
|||
pageSizeOptions={[5, 10]} |
|||
sx={{ |
|||
border: 0, |
|||
width: '100%', // Ensures the DataGrid takes full width |
|||
height: '50%', // Ensures it grows to fit content |
|||
minHeight: 400, // Minimum height for the DataGrid |
|||
display: 'flex', |
|||
justifyContent: 'center', |
|||
'@media (max-width: 600px)': { |
|||
width: '100%', // 100% width on small screens |
|||
height: 'auto' // Allow height to grow with content |
|||
} |
|||
}} |
|||
slots={{ toolbar: GridToolbar }} |
|||
localeText={frFR.components.MuiDataGrid.defaultProps.localeText} |
|||
/> |
|||
</div> |
|||
</ThemeProvider> |
|||
</Paper> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
export default Noteclasse |
|||
@ -1,176 +0,0 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import { Button } from '@mui/material' |
|||
import { createTheme, ThemeProvider } from '@mui/material/styles' |
|||
import { IoEyeSharp } from 'react-icons/io5' |
|||
import { frFR } from '@mui/x-data-grid/locales' |
|||
import { Tooltip } from 'react-tooltip' |
|||
import Paper from '@mui/material/Paper' |
|||
import { DataGrid, GridToolbar } from '@mui/x-data-grid' |
|||
import classe from '../assets/AllStyleComponents.module.css' |
|||
import classeHome from '../assets/Home.module.css' |
|||
import { Link } from 'react-router-dom' |
|||
|
|||
const Notes = () => { |
|||
const theme = createTheme({ |
|||
components: { |
|||
MuiIconButton: { |
|||
styleOverrides: { |
|||
root: { |
|||
color: 'gray' // Change the color of toolbar icons |
|||
} |
|||
} |
|||
}, |
|||
MuiButton: { |
|||
styleOverrides: { |
|||
root: { |
|||
color: '#121212' // Change the color of toolbar icons |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
|
|||
const paginationModel = { page: 0, pageSize: 5 } |
|||
|
|||
const columns = [ |
|||
{ field: 'niveau', headerName: 'Niveau', width: 170 }, |
|||
{ field: 'annee_scolaire', headerName: 'Année scolaire', width: 160 }, |
|||
// { field:'moyenne', headerName:'Moyenne de classe', width:160}, |
|||
{ |
|||
field: 'action', |
|||
headerName: 'Action', |
|||
flex: 1, |
|||
renderCell: (params) => ( |
|||
<div style={{ display: 'flex', gap: '10px' }}> |
|||
<Link to={`/noteclass/${params.row.niveau}/${params.row.annee_scolaire}`}> |
|||
<Button color="warning" variant="contained" className={`update${params.value}`}> |
|||
<IoEyeSharp style={{ fontSize: '20px', color: 'white' }} /> |
|||
</Button> |
|||
<Tooltip |
|||
anchorSelect={`.update${params.value}`} |
|||
style={{ fontSize: '13px', zIndex: 22 }} |
|||
place="bottom-end" |
|||
> |
|||
Voir tous les etudiants dans ce niveau |
|||
</Tooltip> |
|||
</Link> |
|||
</div> |
|||
) |
|||
} |
|||
] |
|||
|
|||
/** |
|||
* hook for dispplaying note |
|||
*/ |
|||
const [blockNotes, SetBlockNotes] = useState([]) |
|||
|
|||
useEffect(() => { |
|||
window.notes.getblockNote().then((response) => { |
|||
SetBlockNotes(response) |
|||
}) |
|||
}, []) |
|||
|
|||
const calculMoyenneDeClasse = (L1, annee) => { |
|||
let data = blockNotes.allData |
|||
let note = 0 |
|||
let someId = [] |
|||
let total = 0 |
|||
let totalEtudiant = [] |
|||
let id = [] |
|||
let totalCredit = 0 |
|||
|
|||
if (data != undefined) { |
|||
for (let index = 0; index < data.length; index++) { |
|||
for (let j = 0; j < data[index].length; j++) { |
|||
if (data[index][j].niveau == L1 && data[index][j].annee_scolaire == annee) { |
|||
totalEtudiant.push(data[index][j]) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
for (let index = 0; index < totalEtudiant.length; index++) { |
|||
someId.push(totalEtudiant[index].etudiant_id) |
|||
id = [...new Set(someId)] |
|||
note += totalEtudiant[index].note * totalEtudiant[index].credit |
|||
totalCredit += totalEtudiant[index].credit |
|||
} |
|||
total = note / totalCredit |
|||
|
|||
return total.toFixed(2) |
|||
} |
|||
|
|||
let dataRow |
|||
if (blockNotes.response) { |
|||
dataRow = blockNotes.response.map((note, index) => ({ |
|||
id: index, |
|||
niveau: note.etudiant_niveau, |
|||
moyenne: calculMoyenneDeClasse(note.etudiant_niveau, note.annee_scolaire), |
|||
annee_scolaire: note.annee_scolaire, |
|||
action: note.niveau |
|||
})) |
|||
} else { |
|||
dataRow = [] |
|||
} |
|||
|
|||
return ( |
|||
<div className={classe.mainHome}> |
|||
<div className={classeHome.header}> |
|||
<div className={classe.h1style}> |
|||
<div className={classeHome.blockTitle}> |
|||
<h1>Notes</h1> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
{/* display the data-grid students */} |
|||
<div className={classeHome.boxEtudiantsCard}> |
|||
<div style={{ display: 'flex', justifyContent: 'center' }}> |
|||
<Paper |
|||
sx={{ |
|||
height: 'auto', // Auto height to make the grid responsive |
|||
width: '100%', |
|||
minHeight: 500, // Ensures a minimum height |
|||
display: 'flex' |
|||
}} |
|||
> |
|||
<ThemeProvider theme={theme}> |
|||
<div |
|||
style={{ |
|||
display: 'flex', |
|||
alignItems: 'center', |
|||
justifyContent: 'center', |
|||
width: '100%', // Make it responsive to full width |
|||
flexDirection: 'column' // Stacks content vertically on smaller screens |
|||
}} |
|||
> |
|||
<DataGrid |
|||
rows={dataRow} |
|||
columns={columns} |
|||
initialState={{ pagination: { paginationModel } }} |
|||
pageSizeOptions={[5, 10]} |
|||
sx={{ |
|||
border: 0, |
|||
width: '100%', // Ensures the DataGrid takes full width |
|||
height: '50%', // Ensures it grows to fit content |
|||
minHeight: 400, // Minimum height for the DataGrid |
|||
display: 'flex', |
|||
justifyContent: 'center', |
|||
'@media (max-width: 600px)': { |
|||
width: '100%', // 100% width on small screens |
|||
height: 'auto' // Allow height to grow with content |
|||
} |
|||
}} |
|||
slots={{ toolbar: GridToolbar }} |
|||
localeText={frFR.components.MuiDataGrid.defaultProps.localeText} |
|||
/> |
|||
</div> |
|||
</ThemeProvider> |
|||
</Paper> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
export default Notes |
|||
@ -1,279 +0,0 @@ |
|||
import { useState } from 'react' |
|||
import classe from '../assets/AllStyleComponents.module.css' |
|||
import img from '../assets/para.png' |
|||
import classeHome from '../assets/Home.module.css' |
|||
import { Box, Button, InputAdornment, TextField, Grid, Modal, Typography } from '@mui/material' |
|||
import classeAdd from '../assets/AddStudent.module.css' |
|||
import { useAuthContext } from '../contexts/AuthContext' |
|||
import { FaEnvelope, FaLock, FaUser } from 'react-icons/fa' |
|||
import svgSuccess from '../assets/success.svg' |
|||
import svgError from '../assets/error.svg' |
|||
import { Link } from 'react-router-dom' |
|||
import { GrConfigure } from 'react-icons/gr' |
|||
import IpConfig from './IpConfig' |
|||
|
|||
const Setting = () => { |
|||
const { token, setToken } = useAuthContext() |
|||
|
|||
const userInfo = JSON.parse(token) |
|||
|
|||
const [formData, setFormData] = useState({ |
|||
username: userInfo.username, |
|||
email: userInfo.email, |
|||
password: '', |
|||
id: userInfo.id |
|||
}) |
|||
|
|||
/** |
|||
* function to set the data in state |
|||
* @param {*} e |
|||
*/ |
|||
const handleInputChange = (e) => { |
|||
const { name, value } = e.target |
|||
setFormData((prevData) => ({ |
|||
...prevData, |
|||
[name]: value |
|||
})) |
|||
} |
|||
|
|||
const handleSubmit = async (e) => { |
|||
e.preventDefault() |
|||
// Handle form submission logic |
|||
const response = await window.allUser.updateUsers(formData) |
|||
console.log(response) |
|||
if (response.success) { |
|||
setOpen(true) |
|||
setCode(200) |
|||
setToken(JSON.stringify(response.users)) |
|||
setFormData({ |
|||
username: response.username, |
|||
email: response.email, |
|||
password: '', |
|||
id: userInfo.id |
|||
}) |
|||
} else { |
|||
setCode(422) |
|||
setOpen(true) |
|||
} |
|||
} |
|||
/** |
|||
* hook to open modal |
|||
*/ |
|||
const [open, setOpen] = useState(false) |
|||
const [code, setCode] = useState(200) |
|||
|
|||
/** |
|||
* function to close modal |
|||
*/ |
|||
const handleClose = () => setOpen(false) |
|||
|
|||
/** |
|||
* function to return the view Modal |
|||
* |
|||
* @returns {JSX} |
|||
*/ |
|||
const modals = () => ( |
|||
<Modal |
|||
open={open} |
|||
onClose={handleClose} |
|||
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 |
|||
}} |
|||
> |
|||
{code == 422 ? ( |
|||
<Typography |
|||
style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }} |
|||
> |
|||
<img src={svgError} alt="" width={50} height={50} />{' '} |
|||
<span style={{ marginLeft: '10px' }}>Email déjà pris</span> |
|||
</Typography> |
|||
) : ( |
|||
<Typography |
|||
style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }} |
|||
> |
|||
<img src={svgSuccess} alt="" width={100} height={100} />{' '} |
|||
<span>Modification a été effectuée avec succès</span> |
|||
</Typography> |
|||
)} |
|||
<Box |
|||
sx={{ |
|||
marginTop: '2%', |
|||
display: 'flex', |
|||
gap: '20px', |
|||
alignItems: 'end', |
|||
justifyContent: 'flex-end' |
|||
}} |
|||
> |
|||
<Button onClick={handleClose} color="warning" variant="contained"> |
|||
OK |
|||
</Button> |
|||
</Box> |
|||
</Box> |
|||
</Modal> |
|||
) |
|||
|
|||
const [openConfig, setOpenCOnfig] = useState(false) |
|||
const onCloseConfig = () => setOpenCOnfig(false) |
|||
|
|||
const openCOnfigFunction = () => setOpenCOnfig(true) |
|||
|
|||
return ( |
|||
<div className={classe.mainHome}> |
|||
{modals()} |
|||
<IpConfig onClose={onCloseConfig} open={openConfig} /> |
|||
<div className={classeHome.header}> |
|||
<div className={classe.h1style}> |
|||
<div className={classeHome.blockTitle}> |
|||
<h1>setting</h1> |
|||
<Link to={'#'} onClick={openCOnfigFunction}> |
|||
<Button color="warning" variant="contained"> |
|||
<GrConfigure style={{ fontSize: '20px' }} /> IP configuration |
|||
</Button> |
|||
</Link> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
{/* contenu */} |
|||
<div className={classeHome.contenaire}> |
|||
<div className={classeAdd.boxEtudiantsCard}> |
|||
<Box |
|||
sx={{ |
|||
position: 'absolute', |
|||
top: '50%', |
|||
left: '50%', |
|||
transform: 'translate(-50%, -50%)', |
|||
width: 700, |
|||
borderRadius: '3%', |
|||
bgcolor: 'background.paper', |
|||
boxShadow: 24, |
|||
p: 4 |
|||
}} |
|||
> |
|||
<Box |
|||
sx={{ |
|||
marginTop: '5%', |
|||
display: 'flex', |
|||
gap: '10px', |
|||
alignItems: 'start', |
|||
flexDirection: 'column', |
|||
fontSize: 16, |
|||
fontFamily: 'sans-serif', |
|||
justifyContent: 'flex-end' |
|||
}} |
|||
> |
|||
<span style={{ display: 'flex', marginLeft: '40%' }}> |
|||
<img src={img} alt="" height={150} width={150} /> |
|||
</span> |
|||
|
|||
<form onSubmit={handleSubmit} style={{ marginTop: '5%' }}> |
|||
{/* */} |
|||
<Grid container spacing={2}> |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
label="Nom d'utilisateur" |
|||
name="username" |
|||
color="warning" |
|||
fullWidth |
|||
value={formData.username} |
|||
onChange={handleInputChange} |
|||
required |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<FaUser /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
sx={{ |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: '#ff9800' // Set the border color on hover |
|||
} |
|||
} |
|||
}} |
|||
/> |
|||
</Grid> |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
label="Email" |
|||
name="email" |
|||
fullWidth |
|||
required |
|||
color="warning" |
|||
value={formData.email} |
|||
onChange={handleInputChange} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<FaEnvelope /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
sx={{ |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: '#ff9800' // Set the border color on hover |
|||
} |
|||
} |
|||
}} |
|||
/> |
|||
</Grid> |
|||
{/* matieres Mecanique general */} |
|||
<Grid item xs={12} sm={12}> |
|||
<TextField |
|||
label="Mot de passe" |
|||
name="password" |
|||
fullWidth |
|||
helperText="À laisser vide si vous ne voulez pas le modifier" |
|||
color="warning" |
|||
value={formData.password} |
|||
onChange={handleInputChange} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<FaLock /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
sx={{ |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: '#ff9800' // Set the border color on hover |
|||
} |
|||
} |
|||
}} |
|||
/> |
|||
</Grid> |
|||
{/* Matieres Resistance Materiaux */} |
|||
{/* Submit Button */} |
|||
<Grid |
|||
item |
|||
xs={12} |
|||
style={{ display: 'flex', gap: '30px', justifyContent: 'flex-end' }} |
|||
> |
|||
<Button type="submit" color="warning" variant="contained"> |
|||
Enregister |
|||
</Button> |
|||
</Grid> |
|||
</Grid> |
|||
</form> |
|||
</Box> |
|||
</Box> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
export default Setting |
|||
@ -1,594 +0,0 @@ |
|||
import React, { useEffect, useRef, useState } from 'react' |
|||
import classe from '../assets/AllStyleComponents.module.css' |
|||
import classeHome from '../assets/Home.module.css' |
|||
import Paper from '@mui/material/Paper' |
|||
import jsPDF from 'jspdf' |
|||
import html2Canvas from 'html2canvas' |
|||
import logoRelerev1 from '../assets/logorelever.png' |
|||
import logoRelerev2 from '../assets/logorelever2.png' |
|||
import dayjs from 'dayjs' |
|||
import getSemestre from './function/GetSemestre' |
|||
import { descisionJury, getmentionAfterNotes } from './function/FonctionRelever' |
|||
|
|||
const ReleverNotes = ({ id, anneescolaire, niveau, refs }) => { |
|||
const [etudiant, setEtudiant] = useState([]) |
|||
const [matieres, setMatieres] = useState([]) |
|||
const [notes, setNotes] = useState([]) |
|||
|
|||
const handleDownloadPDF = async () => { |
|||
const input = Telever.current |
|||
|
|||
// Set a high scale for better quality |
|||
const scale = 3 |
|||
|
|||
html2Canvas(input, { |
|||
scale, // Increase resolution |
|||
useCORS: true, // Handle cross-origin images |
|||
allowTaint: true |
|||
}).then((canvas) => { |
|||
const imgData = canvas.toDataURL('image/png') |
|||
|
|||
// Create a PDF with dimensions matching the captured content |
|||
const pdf = new jsPDF({ |
|||
orientation: 'portrait', |
|||
unit: 'mm', |
|||
format: 'a4' |
|||
}) |
|||
|
|||
const imgWidth = 210 // A4 width in mm |
|||
const pageHeight = 297 // A4 height in mm |
|||
const imgHeight = (canvas.height * imgWidth) / canvas.width |
|||
|
|||
let position = 0 |
|||
|
|||
pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight, '', 'FAST') |
|||
|
|||
// Handle multi-page case |
|||
while (position + imgHeight >= pageHeight) { |
|||
position -= pageHeight |
|||
pdf.addPage() |
|||
pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight, '', 'FAST') |
|||
} |
|||
|
|||
pdf.save('document.pdf') |
|||
}) |
|||
} |
|||
|
|||
useEffect(() => { |
|||
if (!id) { |
|||
// id doesn't exist, you might want to retry, or do nothing |
|||
// For example, refetch later or show an error |
|||
return |
|||
} |
|||
window.etudiants.getSingle({ id }).then((response) => { |
|||
setEtudiant(response) |
|||
}) |
|||
|
|||
window.mention.getMention().then((response) => { |
|||
setMatieres(response) |
|||
}) |
|||
|
|||
window.notes.noteRelerer({ id, anneescolaire, niveau }).then((response) => { |
|||
setNotes(response) |
|||
}) |
|||
}, [id]) |
|||
|
|||
const Telever = useRef() |
|||
|
|||
useEffect(() => { |
|||
if (refs) { |
|||
handleDownloadPDF() |
|||
} |
|||
}, [refs]) |
|||
|
|||
const [matiereWithSemestre, setMatiereWithSemestre] = useState([]) |
|||
const [matiereWithSemestreRepech, setMatiereWithSemestreRepech] = useState([]) |
|||
|
|||
useEffect(() => { |
|||
if (!notes.noteNormal || !notes.semestre || !notes.noteRepech) return // Ensure data exists |
|||
|
|||
const updatedMatieres = notes.noteNormal.map((matiere) => { |
|||
// Get the semesters based on the student's niveau |
|||
const semesters = getSemestre(matiere.etudiant_niveau) |
|||
|
|||
// Find the matched semestre based on the conditions |
|||
const matchedSemestre = notes.semestre.find( |
|||
(sem) => |
|||
sem.matiere_id === matiere.matiere_id && |
|||
sem.mention_id === matiere.mention_id && |
|||
(sem.nom === semesters[0] || sem.nom === semesters[1]) // Check if the semester matches |
|||
) |
|||
|
|||
return { |
|||
...matiere, |
|||
semestre: matchedSemestre ? matchedSemestre.nom : null // Add 'semestre' or set null if no match |
|||
} |
|||
}) |
|||
|
|||
const updatedMatieresRepech = notes.noteRepech.map((matiere) => { |
|||
// Get the semesters based on the student's niveau |
|||
const semesters = getSemestre(matiere.etudiant_niveau) |
|||
|
|||
// Find the matched semestre based on the conditions |
|||
const matchedSemestre = notes.semestre.find( |
|||
(sem) => |
|||
sem.matiere_id === matiere.matiere_id && |
|||
sem.mention_id === matiere.mention_id && |
|||
(sem.nom === semesters[0] || sem.nom === semesters[1]) // Check if the semester matches |
|||
) |
|||
|
|||
// Return the updated matiere with the matched semestre or null if no match |
|||
return { |
|||
...matiere, |
|||
semestre: matchedSemestre ? matchedSemestre.nom : null // Add 'semestre' or set null if no match |
|||
} |
|||
}) |
|||
|
|||
setMatiereWithSemestre(updatedMatieres) |
|||
setMatiereWithSemestreRepech(updatedMatieresRepech) |
|||
}, [notes]) |
|||
|
|||
function compareMention(mentionID) { |
|||
let statusText |
|||
|
|||
matieres.map((statu) => { |
|||
if (mentionID == statu.id) { |
|||
statusText = statu.nom |
|||
} |
|||
}) |
|||
|
|||
return statusText ? statusText.charAt(0).toUpperCase() + statusText.slice(1) : statusText |
|||
} |
|||
|
|||
// data are finaly get and ready for the traitement below |
|||
|
|||
// Merging the arrays based on matiere_id |
|||
matiereWithSemestre.forEach((item1) => { |
|||
// Find the corresponding item in array2 based on matiere_id |
|||
let matchingItem = matiereWithSemestreRepech.find( |
|||
(item2) => item2.matiere_id === item1.matiere_id |
|||
) |
|||
|
|||
// If there's a match, add noterepech from array2, otherwise use the note from array1 |
|||
item1.noterepech = matchingItem ? matchingItem.note : item1.note |
|||
}) |
|||
|
|||
// step 1 group all by semestre |
|||
const groupedDataBySemestre = matiereWithSemestre.reduce((acc, matiere) => { |
|||
const { semestre } = matiere |
|||
|
|||
if (!acc[semestre]) { |
|||
acc[semestre] = [] |
|||
} |
|||
|
|||
acc[semestre].push(matiere) |
|||
|
|||
return acc |
|||
}, {}) |
|||
|
|||
const compareMoyenne = (normal, rattrapage) => { |
|||
const note = Math.max(Number(normal), Number(rattrapage)) |
|||
return note >= 10 ? 'Admis' : 'Ajourné' |
|||
} |
|||
|
|||
const TbodyContent = () => { |
|||
return ( |
|||
<> |
|||
{Object.entries(groupedDataBySemestre).map(([semestre, matieres]) => { |
|||
// Group by unite_enseignement inside each semestre |
|||
const groupedByUnite = matieres.reduce((acc, matiere) => { |
|||
if (!acc[matiere.unite_enseignement]) { |
|||
acc[matiere.unite_enseignement] = [] |
|||
} |
|||
acc[matiere.unite_enseignement].push(matiere) |
|||
return acc |
|||
}, {}) |
|||
|
|||
return ( |
|||
<tbody key={semestre} style={{ border: 'none' }}> |
|||
{Object.entries(groupedByUnite).map(([unite, matieres], uniteIndex) => ( |
|||
<> |
|||
{matieres.map((matiere, matiereIndex) => ( |
|||
<tr key={matiere.id} style={{ border: 'none' }}> |
|||
{/* Display 'semestre' only for the first row of the first unite_enseignement */} |
|||
{uniteIndex === 0 && matiereIndex === 0 && ( |
|||
<td |
|||
rowSpan={ |
|||
Object.values(groupedByUnite).flat().length + |
|||
Object.values(groupedByUnite).flat().length |
|||
} |
|||
style={{ |
|||
fontWeight: 'bold', |
|||
textAlign: 'center', |
|||
paddingTop: '8px', |
|||
borderRight: 'solid 1px black', |
|||
borderBottom: 'solid 1px black', |
|||
background: '#bdbcbc', |
|||
borderLeft: 'solid 1px black' |
|||
}} |
|||
> |
|||
{semestre} |
|||
</td> |
|||
)} |
|||
|
|||
{/* Display 'unite_enseignement' only for the first row of each group */} |
|||
{matiereIndex === 0 && ( |
|||
<td |
|||
rowSpan={matieres.length} |
|||
style={{ |
|||
fontWeight: 'bold', |
|||
textAlign: 'center', |
|||
borderRight: 'solid 1px black', |
|||
// borderBottom: 'solid 1px black', |
|||
borderTop: 'solid 1px black' |
|||
}} |
|||
> |
|||
{unite} |
|||
</td> |
|||
)} |
|||
|
|||
{/* Matiere Data */} |
|||
<td style={{ borderRight: 'solid 1px black', borderTop: 'solid 1px black' }}> |
|||
{matiere.nom} |
|||
</td> |
|||
<td style={{ borderRight: 'solid 1px black', borderTop: 'solid 1px black' }}> |
|||
{matiere.credit} |
|||
</td> |
|||
<td style={{ borderRight: 'solid 1px black', borderTop: 'solid 1px black' }}> |
|||
{matiere.note} |
|||
</td> |
|||
<td style={{ borderRight: 'solid 1px black', borderTop: 'solid 1px black' }}> |
|||
{matiere.credit} |
|||
</td> |
|||
<td style={{ borderRight: 'solid 1px black', borderTop: 'solid 1px black' }}> |
|||
{matiere.noterepech} |
|||
</td> |
|||
|
|||
{/* Display the comparison value only once */} |
|||
{matiereIndex === 0 && ( |
|||
<td |
|||
rowSpan={matieres.length} |
|||
style={{ |
|||
fontWeight: 'bold', |
|||
textAlign: 'center', |
|||
borderRight: 'solid 1px black', |
|||
borderTop: 'solid 1px black' |
|||
}} |
|||
> |
|||
{/* Replace 'hgh' with your logic for displaying the comparison */} |
|||
{compareMoyenne( |
|||
( |
|||
matieres.reduce((total, matiere) => total + matiere.note, 0) / |
|||
matieres.length |
|||
).toFixed(2), |
|||
( |
|||
matieres.reduce((total, matiere) => total + matiere.noterepech, 0) / |
|||
matieres.length |
|||
).toFixed(2) |
|||
)} |
|||
</td> |
|||
)} |
|||
</tr> |
|||
))} |
|||
|
|||
{/* Add Total Row for 'unite_enseignement' */} |
|||
<tr |
|||
style={{ background: '#bdbcbc', border: 'none', borderLeft: 'solid 1px black' }} |
|||
> |
|||
<td |
|||
colSpan={2} |
|||
style={{ |
|||
textAlign: 'right', |
|||
fontWeight: 'bold', |
|||
borderRight: 'solid 1px black', |
|||
borderBottom: 'none', |
|||
borderLeft: 'solid 1px black', |
|||
borderTop: 'solid 1px black' |
|||
}} |
|||
> |
|||
Total de Credit et Moyenne des Notes |
|||
</td> |
|||
<td |
|||
style={{ |
|||
textAlign: 'center', |
|||
fontWeight: 'bold', |
|||
borderRight: 'solid 1px black', |
|||
borderTop: 'solid 1px black' |
|||
}} |
|||
> |
|||
{/* Calculate Total de Credit */} |
|||
{matieres.reduce((total, matiere) => total + matiere.credit, 0)} |
|||
</td> |
|||
<td |
|||
style={{ |
|||
textAlign: 'center', |
|||
fontWeight: 'bold', |
|||
borderRight: 'solid 1px black', |
|||
borderTop: 'solid 1px black' |
|||
}} |
|||
className="moyenneNotes" |
|||
> |
|||
{/* Calculate Moyenne des Notes */} |
|||
{( |
|||
matieres.reduce((total, matiere) => total + matiere.note, 0) / |
|||
matieres.length |
|||
).toFixed(2)}{' '} |
|||
{/* Format to 2 decimal places */} |
|||
</td> |
|||
<td |
|||
style={{ |
|||
textAlign: 'center', |
|||
fontWeight: 'bold', |
|||
borderTop: 'solid 1px black', |
|||
borderRight: 'solid 1px black' |
|||
}} |
|||
> |
|||
{matieres.reduce((total, matiere) => total + matiere.credit, 0)} |
|||
</td> |
|||
<td |
|||
style={{ |
|||
textAlign: 'center', |
|||
fontWeight: 'bold', |
|||
borderRight: 'solid 1px black', |
|||
borderTop: 'solid 1px black' |
|||
}} |
|||
className="moyenneNotesRattrapage" |
|||
> |
|||
{( |
|||
matieres.reduce((total, matiere) => total + matiere.noterepech, 0) / |
|||
matieres.length |
|||
).toFixed(2)} |
|||
</td> |
|||
<td |
|||
style={{ |
|||
textAlign: 'center', |
|||
fontWeight: 'bold', |
|||
borderRight: 'solid 1px black', |
|||
borderTop: 'solid 1px black' |
|||
}} |
|||
></td> |
|||
</tr> |
|||
</> |
|||
))} |
|||
</tbody> |
|||
) |
|||
})} |
|||
</> |
|||
) |
|||
} |
|||
|
|||
const totalNotes = () => { |
|||
let totalNotes = document.querySelectorAll('.moyenneNotes') |
|||
let totalNotesRepech = document.querySelectorAll('.moyenneNotesRattrapage') |
|||
|
|||
let TotalNoteNumber = 0 |
|||
let TotalNoteNumberRepech = 0 |
|||
|
|||
totalNotes.forEach((notes) => { |
|||
TotalNoteNumber += Number(notes.textContent / totalNotes.length) |
|||
// console.log(notes.textContent); |
|||
}) |
|||
|
|||
totalNotesRepech.forEach((notes) => { |
|||
TotalNoteNumberRepech += Number(notes.textContent / totalNotes.length) |
|||
// console.log(notes.textContent); |
|||
}) |
|||
|
|||
let note = Math.max(TotalNoteNumber, TotalNoteNumberRepech) |
|||
|
|||
return note |
|||
} |
|||
|
|||
const [note, setNote] = useState(0) |
|||
|
|||
useEffect(() => { |
|||
setNote(totalNotes()) |
|||
}, [TbodyContent]) |
|||
|
|||
return ( |
|||
<div className={classe.mainHome}> |
|||
<div className={classeHome.boxEtudiantsCard}> |
|||
<div style={{ display: 'flex', justifyContent: 'center' }}> |
|||
<Paper |
|||
sx={{ |
|||
// width: "100%", |
|||
height: 'auto', // Auto height to make the grid responsive |
|||
minHeight: 500, // Ensures a minimum height |
|||
display: 'flex', |
|||
padding: '1%', |
|||
width: '70%', |
|||
marginTop: '2%', |
|||
justifyContent: 'center' |
|||
}} |
|||
ref={Telever} |
|||
> |
|||
<div style={{ width: '80%' }}> |
|||
<div |
|||
style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }} |
|||
> |
|||
<img src={logoRelerev1} alt="image en tete" width={70} /> |
|||
<img src={logoRelerev2} alt="image en tete" width={70} /> |
|||
</div> |
|||
<hr style={{ margin: 0, border: 'solid 1px black' }} /> |
|||
<h4 style={{ textTransform: 'uppercase', textAlign: 'center', marginBottom: 0 }}> |
|||
Releve de notes |
|||
</h4> |
|||
<hr style={{ margin: 0, border: 'solid 1px black' }} /> |
|||
{/* block info */} |
|||
<div style={{ marginTop: '2px', display: 'flex' }}> |
|||
{/* gauche */} |
|||
<div style={{ display: 'flex', width: '60%' }}> |
|||
{/* gauche gauche */} |
|||
<div style={{ width: '40%' }}> |
|||
<span> |
|||
<b>Nom</b> |
|||
</span> |
|||
<br /> |
|||
<span> |
|||
<b>Prenom</b> |
|||
</span> |
|||
<br /> |
|||
<span> |
|||
<b>Date de naissance</b> |
|||
</span> |
|||
<br /> |
|||
<span> |
|||
<b>Codage</b> |
|||
</span> |
|||
</div> |
|||
{/* gauche droite */} |
|||
<div style={{ width: '60%' }}> |
|||
<span>: {etudiant.nom}</span> |
|||
<br /> |
|||
<span>: {etudiant.prenom}</span> |
|||
<br /> |
|||
<span>: {dayjs(etudiant.date_de_naissances).format('DD/MM/YYYY')}</span> |
|||
<br /> |
|||
<span>: {etudiant.num_inscription}</span> |
|||
</div> |
|||
</div> |
|||
{/* droite */} |
|||
<div style={{ display: 'flex', width: '40%' }}> |
|||
{/* droite gauche */} |
|||
<div style={{ width: '30%' }}> |
|||
<span> |
|||
<b>Annee U</b> |
|||
</span> |
|||
<br /> |
|||
<span> |
|||
<b>Niveau</b> |
|||
</span> |
|||
<br /> |
|||
<span> |
|||
<b>Parcours</b> |
|||
</span> |
|||
</div> |
|||
{/* droite droite */} |
|||
<div style={{ width: '70%' }}> |
|||
<span>: {etudiant.annee_scolaire}</span> |
|||
<br /> |
|||
<span>: {etudiant.niveau}</span> |
|||
<br /> |
|||
<span>: {compareMention(etudiant.mention_id)}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
{/* table */} |
|||
<table style={{ marginTop: '5px', borderCollapse: 'collapse' }}> |
|||
<thead> |
|||
<tr style={{ borderTop: 'solid 1px black', textAlign: 'center' }}> |
|||
<th colSpan={3}></th> |
|||
<th |
|||
colSpan={4} |
|||
style={{ |
|||
background: '#bdbcbc', |
|||
borderLeft: 'solid 1px black', |
|||
borderRight: 'solid 1px black' |
|||
}} |
|||
> |
|||
Session |
|||
</th> |
|||
<th></th> |
|||
</tr> |
|||
<tr style={{ borderTop: 'solid 1px black', textAlign: 'center' }}> |
|||
<th style={{ borderLeft: 'solid 1px black' }}></th> |
|||
<th style={{ borderLeft: 'solid 1px black' }}></th> |
|||
<th style={{ borderLeft: 'solid 1px black' }}></th> |
|||
<th |
|||
colSpan={2} |
|||
style={{ background: '#bdbcbc', borderLeft: 'solid 1px black' }} |
|||
> |
|||
Normale |
|||
</th> |
|||
<th |
|||
colSpan={2} |
|||
style={{ background: '#bdbcbc', borderLeft: 'solid 1px black' }} |
|||
> |
|||
Rattrapage |
|||
</th> |
|||
<th |
|||
style={{ borderLeft: 'solid 1px black', borderRight: 'solid 1px black' }} |
|||
></th> |
|||
</tr> |
|||
<tr |
|||
style={{ |
|||
borderTop: 'solid 1px black', |
|||
// borderBottom: 'solid 1px black', |
|||
background: '#bdbcbc', |
|||
textAlign: 'center' |
|||
}} |
|||
> |
|||
<th style={{ borderLeft: 'solid 1px black', borderBottom: 'solid 1px black' }}> |
|||
semestre |
|||
</th> |
|||
<th style={{ borderLeft: 'solid 1px black' }}>UE</th> |
|||
<th style={{ borderLeft: 'solid 1px black' }}>EC</th> |
|||
<th style={{ borderLeft: 'solid 1px black', padding: '0 5px' }}>crédit</th> |
|||
<th style={{ borderLeft: 'solid 1px black', padding: '0 5px' }}>Notes</th> |
|||
<th style={{ borderLeft: 'solid 1px black', padding: '0 5px' }}>crédit</th> |
|||
<th style={{ borderLeft: 'solid 1px black', padding: '0 5px' }}>Notes</th> |
|||
<th style={{ borderLeft: 'solid 1px black', borderRight: 'solid 1px black' }}> |
|||
Observation |
|||
</th> |
|||
</tr> |
|||
</thead> |
|||
<TbodyContent /> |
|||
<tbody style={{ fontWeight: 'bold' }}> |
|||
<tr style={{ border: 'solid 1px black' }}> |
|||
<td |
|||
colSpan={2} |
|||
style={{ |
|||
borderRight: 'solid 1px black', |
|||
textAlign: 'left', |
|||
paddingLeft: '2%' |
|||
}} |
|||
> |
|||
Moyenne |
|||
</td> |
|||
<td style={{ borderRight: 'solid 1px black' }}>{note.toFixed(2)}</td> |
|||
<td style={{ borderRight: 'solid 1px black' }}>/20</td> |
|||
<td colSpan={4}></td> |
|||
</tr> |
|||
<tr style={{ border: 'solid 1px black' }}> |
|||
<td |
|||
colSpan={3} |
|||
style={{ |
|||
borderRight: 'solid 1px black', |
|||
textAlign: 'left', |
|||
paddingLeft: '2%' |
|||
}} |
|||
> |
|||
Mention:{' '} |
|||
<span style={{ marginLeft: '3%' }}>{getmentionAfterNotes(note)}</span> |
|||
</td> |
|||
<td colSpan={5} style={{ textAlign: 'left', paddingLeft: '1%' }}> |
|||
Décision du Jury:{' '} |
|||
<span style={{ marginLeft: '3%' }}> |
|||
{descisionJury(note, etudiant.niveau)} |
|||
</span> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
<div style={{ textAlign: 'right', marginRight: '20%' }}> |
|||
<p> |
|||
<b>Toamasine le</b> |
|||
</p> |
|||
{/* texte hidden for place in signature */} |
|||
<p style={{ visibility: 'hidden' }}> |
|||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis delectus |
|||
perspiciatis nisi aliquid eos adipisci cumque amet ratione error voluptatum. |
|||
Expedita velit enim nulla nam? Vitae fuga enim et temporibus. Lorem ipsum dolor |
|||
sit amet, consectetur adipisicing elit. Mollitia, assumenda? |
|||
</p> |
|||
</div> |
|||
</div> |
|||
</Paper> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
export default ReleverNotes |
|||
@ -1,383 +0,0 @@ |
|||
import React, { useEffect, useRef, useState } from 'react' |
|||
import { Link, useParams } from 'react-router-dom' |
|||
import { IoMdReturnRight } from 'react-icons/io' |
|||
import { |
|||
Box, |
|||
InputAdornment, |
|||
Typography, |
|||
Modal, |
|||
TextField, |
|||
Grid, |
|||
Button, |
|||
Autocomplete |
|||
} from '@mui/material' |
|||
import { BsBookmarkPlusFill } from 'react-icons/bs' |
|||
import svgSuccess from '../assets/success.svg' |
|||
import svgError from '../assets/error.svg' |
|||
import { MdOutlineNumbers } from 'react-icons/md' |
|||
import ChangeCapital from './function/ChangeCapitalLetter' |
|||
import { CiCalendar } from 'react-icons/ci' |
|||
import { IoBookmark } from 'react-icons/io5' |
|||
import { FaClipboardList, FaClock } from 'react-icons/fa' |
|||
import classe from '../assets/AllStyleComponents.module.css' |
|||
import classeHome from '../assets/Home.module.css' |
|||
|
|||
const SingleMatiere = () => { |
|||
const { id } = useParams() |
|||
const [matiere, setMatiere] = useState(null) |
|||
const [mentions, setMentions] = useState([]) |
|||
const [formData, setFormData] = useState({ |
|||
nom: '', |
|||
credit: '', |
|||
uniter: '', |
|||
ue: '', |
|||
id: id |
|||
}) |
|||
|
|||
const [message, setMessage] = useState('') |
|||
const [status, setStatus] = useState(200) |
|||
const [open, setOpen] = useState(false) |
|||
const uniterRef = useRef() |
|||
const ueRef = useRef() |
|||
|
|||
// Helper function to convert a string of IDs to an array |
|||
const stringToArray = (data) => (data ? data.split(',').map(Number) : []) |
|||
|
|||
useEffect(() => { |
|||
// Fetch single matiere data by ID |
|||
window.matieres.getMatiereByID({ id }).then((response) => { |
|||
setMatiere(response) |
|||
}) |
|||
|
|||
// Fetch mentions data |
|||
window.mention.getMention().then((response) => { |
|||
setMentions(Array.isArray(response) ? response : []) |
|||
}) |
|||
}, [id]) |
|||
|
|||
useEffect(() => { |
|||
if (matiere) { |
|||
setFormData((prev) => ({ |
|||
...prev, |
|||
nom: matiere.nom || '', |
|||
credit: matiere.credit || '', |
|||
uniter: matiere.unite_enseignement || '', |
|||
ue: matiere.ue || '', |
|||
id: matiere.id || id |
|||
})) |
|||
} |
|||
}, [matiere, id]) |
|||
|
|||
const handleChange = (e) => { |
|||
const { name, value } = e.target |
|||
setFormData((prevData) => ({ |
|||
...prevData, |
|||
[name]: value |
|||
})) |
|||
} |
|||
|
|||
const handleSubmit = async (e) => { |
|||
e.preventDefault() |
|||
const response = await window.matieres.updateMatiere(formData) |
|||
console.log(response) |
|||
if (response.success) { |
|||
setStatus(200) |
|||
setMessage('Modification a été effectuée avec succès') |
|||
} else { |
|||
setStatus(400) |
|||
setMessage('La matière existe déjà dans la base !') |
|||
} |
|||
setOpen(true) |
|||
} |
|||
|
|||
const handleClose = () => setOpen(false) |
|||
|
|||
const modals = () => ( |
|||
<Modal |
|||
open={open} |
|||
onClose={handleClose} |
|||
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 |
|||
}} |
|||
> |
|||
<Typography |
|||
sx={{ |
|||
display: 'flex', |
|||
flexDirection: 'column', |
|||
alignItems: 'center', |
|||
gap: 2 |
|||
}} |
|||
> |
|||
<img src={status === 200 ? svgSuccess : svgError} alt="" width={70} height={70} /> |
|||
<span>{message}</span> |
|||
</Typography> |
|||
<Box |
|||
sx={{ |
|||
marginTop: 2, |
|||
display: 'flex', |
|||
justifyContent: 'flex-end' |
|||
}} |
|||
> |
|||
<Button onClick={handleClose} color="warning" variant="contained"> |
|||
OK |
|||
</Button> |
|||
</Box> |
|||
</Box> |
|||
</Modal> |
|||
) |
|||
|
|||
return ( |
|||
<div className={classe.mainHome}> |
|||
{modals()} |
|||
<div className={classeHome.header}> |
|||
<div className={classe.h1style}> |
|||
<div className={classeHome.blockTitle}> |
|||
<h1>Mise à jour des matières</h1> |
|||
<div style={{ display: 'flex', gap: '20px' }}> |
|||
<Link to="/matiere"> |
|||
<Button color="warning" variant="contained"> |
|||
<IoMdReturnRight style={{ fontSize: '20px' }} /> |
|||
</Button> |
|||
</Link> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div className={classeHome.boxEtudiantsCard}> |
|||
<Box |
|||
sx={{ |
|||
position: 'absolute', |
|||
top: '55%', |
|||
left: '50%', |
|||
transform: 'translate(-50%, -50%)', |
|||
width: 700, |
|||
borderRadius: 2, |
|||
bgcolor: 'background.paper', |
|||
boxShadow: 24, |
|||
p: 4 |
|||
}} |
|||
> |
|||
<form onSubmit={handleSubmit} style={{ width: '100%' }}> |
|||
<h4 style={{ textAlign: 'center' }}>Mise à jour</h4> |
|||
<Grid container spacing={2}> |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
label="Nom" |
|||
name="nom" |
|||
color="warning" |
|||
fullWidth |
|||
value={formData.nom} |
|||
onChange={handleChange} |
|||
required |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<BsBookmarkPlusFill /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
sx={{ |
|||
marginBottom: '5px', |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: '#ff9800' // Set the border color on hover |
|||
} |
|||
} |
|||
}} |
|||
/> |
|||
</Grid> |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
label="Crédit" |
|||
name="credit" |
|||
color="warning" |
|||
fullWidth |
|||
placeholder="Crédit pour la matiere" |
|||
type="number" |
|||
value={formData.credit} |
|||
onChange={handleChange} |
|||
required |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<MdOutlineNumbers /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
inputProps={{ min: 1 }} |
|||
// inputRef={creditRef} |
|||
sx={{ |
|||
marginBottom: '5px', |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: '#ff9800' // Set the border color on hover |
|||
} |
|||
} |
|||
}} |
|||
/> |
|||
</Grid> |
|||
{/* <Grid item xs={12} sm={6}> |
|||
<TextField |
|||
label="Semestre" |
|||
name="semestre" |
|||
color='warning' |
|||
fullWidth |
|||
placeholder='exemple S1, S2, S3, S4' |
|||
type='text' |
|||
required |
|||
value={formData.semestre} |
|||
onChange={handleChange} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<CiCalendar /> |
|||
</InputAdornment> |
|||
), |
|||
}} |
|||
inputProps={{ min: 1 }} |
|||
// inputRef={semestreRef} |
|||
sx={{ |
|||
marginBottom:"5px", |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: '#ff9800', // Set the border color on hover |
|||
}, |
|||
}, |
|||
}} |
|||
/> |
|||
</Grid> */} |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
label="Unité d'enseignement" |
|||
name="uniter" |
|||
color="warning" |
|||
fullWidth |
|||
placeholder="Le matiere sera dans quelle unité d'enseignement" |
|||
value={formData.uniter} |
|||
onChange={handleChange} |
|||
onInput={() => ChangeCapital(uniterRef)} |
|||
required |
|||
inputRef={uniterRef} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<IoBookmark /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
inputProps={{ min: 1 }} |
|||
// inputRef={uniterRef} |
|||
sx={{ |
|||
marginBottom: '5px', |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: '#ff9800' // Set the border color on hover |
|||
} |
|||
} |
|||
}} |
|||
/> |
|||
</Grid> |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
label="UE" |
|||
name="ue" |
|||
color="warning" |
|||
fullWidth |
|||
placeholder="UE" |
|||
value={formData.ue} |
|||
onChange={handleChange} |
|||
onInput={() => ChangeCapital(ueRef)} |
|||
inputRef={ueRef} |
|||
type="text" |
|||
required |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<FaClock /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
inputProps={{ min: 1 }} |
|||
// inputRef={uniterRef} |
|||
sx={{ |
|||
marginBottom: '5px', |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: '#ff9800' // Set the border color on hover |
|||
} |
|||
} |
|||
}} |
|||
/> |
|||
</Grid> |
|||
{/* <Grid item xs={12} sm={6}> |
|||
<Autocomplete |
|||
multiple |
|||
options={mentions} |
|||
getOptionLabel={(option) => option.nom || ''} |
|||
value={mentions.filter((mention) => |
|||
formData.mention_id.includes(mention.id) |
|||
)} |
|||
onChange={(event, newValue) => { |
|||
setFormData((prevData) => ({ |
|||
...prevData, |
|||
mention_id: newValue.map((item) => item.id), |
|||
})); |
|||
}} |
|||
isOptionEqualToValue={(option, value) => |
|||
option.id === value.id |
|||
} |
|||
renderInput={(params) => ( |
|||
<TextField |
|||
{...params} |
|||
label="Mentions" |
|||
color="warning" |
|||
fullWidth |
|||
InputProps={{ |
|||
...params.InputProps, |
|||
startAdornment: ( |
|||
<> |
|||
<InputAdornment position="start"> |
|||
<FaClipboardList /> |
|||
</InputAdornment> |
|||
{params.InputProps.startAdornment} |
|||
</> |
|||
), |
|||
}} |
|||
sx={{ |
|||
marginBottom: "5px", |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: '#ff9800', // Set border color on hover |
|||
}, |
|||
}, |
|||
}} |
|||
/> |
|||
)} |
|||
/> |
|||
</Grid> */} |
|||
</Grid> |
|||
<Box sx={{ textAlign: 'center', marginTop: 2 }}> |
|||
<Button type="submit" color="warning" variant="contained"> |
|||
Mettre à jour |
|||
</Button> |
|||
</Box> |
|||
</form> |
|||
</Box> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
export default SingleMatiere |
|||
@ -1,223 +0,0 @@ |
|||
import React, { useEffect, useRef, useState } from 'react' |
|||
import classe from '../assets/AllStyleComponents.module.css' |
|||
import classeAdd from '../assets/AddStudent.module.css' |
|||
import classeHome from '../assets/Home.module.css' |
|||
import { FaPenToSquare } from 'react-icons/fa6' |
|||
import { IoMdReturnRight } from 'react-icons/io' |
|||
import { Link, useParams } from 'react-router-dom' |
|||
import { Box, Button, InputAdornment, Typography, Modal, TextField, Grid } from '@mui/material' |
|||
import validationSingleNiveau from './validation/SingleNiveau' |
|||
import svgSuccess from '../assets/success.svg' |
|||
|
|||
const SingleNiveau = () => { |
|||
const { id } = useParams() |
|||
|
|||
const [niveau, setNiveau] = useState([]) |
|||
const [allNiveau, setAllNiveau] = useState([]) |
|||
|
|||
useEffect(() => { |
|||
window.niveaus.getSingleNiveau({ id }).then((response) => { |
|||
setNiveau(response) |
|||
}) |
|||
|
|||
window.niveaus.getNiveau().then((response) => { |
|||
setAllNiveau(response) |
|||
}) |
|||
}, []) |
|||
|
|||
useEffect(() => { |
|||
if (niveau) { |
|||
setFormData({ |
|||
nom: niveau.nom || '', |
|||
id: niveau.id || id |
|||
}) |
|||
} |
|||
}, [niveau]) |
|||
|
|||
const [formData, setFormData] = useState({ |
|||
nom: '', |
|||
id: id |
|||
}) |
|||
|
|||
const handleChange = (e) => { |
|||
const { name, value } = e.target |
|||
setFormData({ |
|||
...formData, |
|||
[name]: value |
|||
}) |
|||
} |
|||
|
|||
const handleSubmit = async (e) => { |
|||
e.preventDefault() |
|||
let niveauNom = [] |
|||
allNiveau.map((niv) => { |
|||
niveauNom.push(niv.nom) |
|||
}) |
|||
// let validation = validationSingleNiveau(nomRef.current, errorRef.current, niveauNom) |
|||
|
|||
// if (validation) { |
|||
let response = await window.niveaus.updateSingleNiveau(formData) |
|||
console.log(response) |
|||
|
|||
if (response.success) { |
|||
setOpen(true) |
|||
} |
|||
|
|||
if (!response.success) { |
|||
errorRef.current.textContent = `${formData.nom} existe déjà` |
|||
} |
|||
// } |
|||
} |
|||
|
|||
/** |
|||
* hook to open modal |
|||
*/ |
|||
const [open, setOpen] = useState(false) |
|||
|
|||
/** |
|||
* function to close modal |
|||
*/ |
|||
const handleClose = () => setOpen(false) |
|||
|
|||
/** |
|||
* function to return the view Modal |
|||
* |
|||
* @returns {JSX} |
|||
*/ |
|||
const modals = () => ( |
|||
<Modal |
|||
open={open} |
|||
onClose={handleClose} |
|||
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 |
|||
}} |
|||
> |
|||
<Typography |
|||
style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }} |
|||
> |
|||
<img src={svgSuccess} alt="" width={70} height={70} />{' '} |
|||
<span>Modification a été effectuée avec succès</span> |
|||
</Typography> |
|||
<Box |
|||
sx={{ |
|||
marginTop: '2%', |
|||
display: 'flex', |
|||
gap: '20px', |
|||
alignItems: 'end', |
|||
justifyContent: 'flex-end' |
|||
}} |
|||
> |
|||
<Button onClick={handleClose} color="warning" variant="contained"> |
|||
OK |
|||
</Button> |
|||
</Box> |
|||
</Box> |
|||
</Modal> |
|||
) |
|||
|
|||
const nomRef = useRef() |
|||
const errorRef = useRef() |
|||
|
|||
return ( |
|||
<div className={classe.mainHome}> |
|||
{modals()} |
|||
<div className={classeAdd.header}> |
|||
<div className={classe.h1style}> |
|||
<div className={classeHome.blockTitle}> |
|||
<h1 style={{ display: 'flex', alignItems: 'center', gap: '10px' }}> |
|||
<FaPenToSquare /> |
|||
Mise à jour niveau |
|||
</h1> |
|||
<Link to={'/niveau'}> |
|||
<Button color="warning" variant="contained"> |
|||
<IoMdReturnRight style={{ fontSize: '20px' }} /> |
|||
</Button> |
|||
</Link> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div className={classeHome.boxEtudiantsCard}> |
|||
<Box |
|||
sx={{ |
|||
position: 'absolute', |
|||
top: '55%', |
|||
left: '50%', |
|||
transform: 'translate(-50%, -50%)', |
|||
width: 700, |
|||
borderRadius: '2%', |
|||
bgcolor: 'background.paper', |
|||
boxShadow: 24, |
|||
p: 4 |
|||
}} |
|||
> |
|||
<Box |
|||
sx={{ |
|||
marginTop: '2%', |
|||
display: 'flex', |
|||
width: '100%', |
|||
gap: '20px', |
|||
alignItems: 'start', |
|||
justifyContent: 'center' |
|||
}} |
|||
> |
|||
<form onSubmit={handleSubmit} style={{ width: '100%' }}> |
|||
<h4 style={{ textAlign: 'center' }}>modification niveau</h4> |
|||
<Grid container spacing={2}> |
|||
{/* Nom Fields */} |
|||
<Grid item xs={12} sm={12}> |
|||
<TextField |
|||
label="Nom" |
|||
name="nom" |
|||
color="warning" |
|||
fullWidth |
|||
value={formData.nom} |
|||
onChange={handleChange} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start">{/* <FaUser /> */}</InputAdornment> |
|||
) |
|||
}} |
|||
inputRef={nomRef} |
|||
sx={{ |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: '#ff9800' // Set the border color on hover |
|||
} |
|||
} |
|||
}} |
|||
/> |
|||
<span className="text-danger" ref={errorRef}></span> |
|||
</Grid> |
|||
|
|||
{/* Submit Button */} |
|||
<Grid |
|||
item |
|||
xs={12} |
|||
style={{ display: 'flex', gap: '30px', justifyContent: 'flex-end' }} |
|||
> |
|||
<Button type="submit" color="warning" variant="contained"> |
|||
Enregister |
|||
</Button> |
|||
</Grid> |
|||
</Grid> |
|||
</form> |
|||
</Box> |
|||
</Box> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
export default SingleNiveau |
|||
@ -1,364 +0,0 @@ |
|||
import React, { useEffect, useRef, useState } from 'react' |
|||
import { useParams, Link } from 'react-router-dom' |
|||
import Paper from '@mui/material/Paper' |
|||
import classe from '../assets/AllStyleComponents.module.css' |
|||
import classeHome from '../assets/Home.module.css' |
|||
import { IoMdReturnRight } from 'react-icons/io' |
|||
import { Button } from '@mui/material' |
|||
import { Box, InputAdornment, Typography, Modal, TextField, Grid } from '@mui/material' |
|||
import { CgNotes } from 'react-icons/cg' |
|||
import svgSuccess from '../assets/success.svg' |
|||
import svgError from '../assets/error.svg' |
|||
|
|||
const SingleNotes = () => { |
|||
let { id, niveau, scolaire } = useParams() |
|||
const [notes, setNotes] = useState([]) |
|||
const [notesRepech, setNotesRepech] = useState([]) |
|||
const [formData, setFormData] = useState({}) |
|||
const [formData2, setFormData2] = useState({}) |
|||
const [etudiant, setEtudiant] = useState([]) |
|||
let annee_scolaire = scolaire |
|||
const [screenRattrapage, setScreenRattrapage] = useState(false) |
|||
|
|||
useEffect(() => { |
|||
window.etudiants.getSingle({ id }).then((response) => { |
|||
setEtudiant(response) |
|||
}) |
|||
}, []) |
|||
|
|||
useEffect(() => { |
|||
let mention_id = etudiant.mention_id |
|||
window.notes.getNotes({ id, niveau, mention_id }).then((response) => { |
|||
setNotes(response) |
|||
}) |
|||
|
|||
window.noteRepech.getNotesRepech({ id, niveau, mention_id }).then((response) => { |
|||
setNotesRepech(response) |
|||
}) |
|||
}, [etudiant]) |
|||
|
|||
console.log(notes) |
|||
/** |
|||
* Update formData whenever matieres change |
|||
*/ |
|||
useEffect(() => { |
|||
const initialFormData = notes.reduce((acc, mat) => { |
|||
acc[mat.id] = mat.note // Initialize each key with an empty string |
|||
return acc |
|||
}, {}) |
|||
setFormData(initialFormData) |
|||
}, [notes]) // Dependency array ensures this runs whenever `matieres` is updated |
|||
|
|||
/** |
|||
* Update formData2 whenever matieres change |
|||
*/ |
|||
useEffect(() => { |
|||
const initialFormData = notesRepech.reduce((acc, mat) => { |
|||
acc[mat.id] = mat.note // Initialize each key with an empty string |
|||
return acc |
|||
}, {}) |
|||
setFormData2(initialFormData) |
|||
}, [notesRepech]) // Dependency array ensures this runs whenever `matieres` is updated |
|||
|
|||
const submitForm = async (e) => { |
|||
e.preventDefault() |
|||
let mention_id = etudiant.mention_id |
|||
console.log('normal submited') |
|||
let annee_scolaire = etudiant.annee_scolaire |
|||
let response = await window.notes.updateNote({ |
|||
formData, |
|||
niveau, |
|||
id, |
|||
mention_id, |
|||
annee_scolaire |
|||
}) |
|||
|
|||
if (response.changes) { |
|||
setMessage('Modification des notes terminer avec succès') |
|||
setStatus(200) |
|||
setOpen(true) |
|||
window.noteRepech.getNotesRepech({ id, niveau, mention_id }).then((response) => { |
|||
setNotesRepech(response) |
|||
}) |
|||
|
|||
window.notes.getNotes({ id, niveau, mention_id }).then((response) => { |
|||
setNotes(response) |
|||
}) |
|||
} |
|||
} |
|||
|
|||
const submitForm2 = async (e) => { |
|||
e.preventDefault() |
|||
let mention_id = etudiant.mention_id |
|||
console.log('rattrapage submited') |
|||
let response = await window.noteRepech.updateNoteRepech({ formData2, niveau, id }) |
|||
|
|||
console.log(response) |
|||
if (response.changes) { |
|||
setMessage('Modification des notes terminer avec succès') |
|||
setStatus(200) |
|||
setOpen(true) |
|||
window.noteRepech.getNotesRepech({ id, niveau, mention_id }).then((response) => { |
|||
setNotesRepech(response) |
|||
}) |
|||
|
|||
window.notes.getNotes({ id, niveau, mention_id }).then((response) => { |
|||
setNotes(response) |
|||
}) |
|||
} |
|||
} |
|||
|
|||
const [status, setStatus] = useState(200) |
|||
const [message, setMessage] = useState('') |
|||
|
|||
/** |
|||
* hook to open modal |
|||
*/ |
|||
const [open, setOpen] = useState(false) |
|||
|
|||
/** |
|||
* function to close modal |
|||
*/ |
|||
const handleClose = () => setOpen(false) |
|||
|
|||
/** |
|||
* function to return the view Modal |
|||
* |
|||
* @returns {JSX} |
|||
*/ |
|||
const modals = () => ( |
|||
<Modal |
|||
open={open} |
|||
onClose={handleClose} |
|||
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 |
|||
}} |
|||
> |
|||
{status === 200 ? ( |
|||
<Typography |
|||
style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }} |
|||
> |
|||
<img src={svgSuccess} alt="" width={50} height={50} /> <span>{message}</span> |
|||
</Typography> |
|||
) : ( |
|||
<Typography |
|||
style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }} |
|||
> |
|||
<img src={svgError} alt="" width={50} height={50} /> <span>{message}</span> |
|||
</Typography> |
|||
)} |
|||
<Box |
|||
sx={{ |
|||
marginTop: '2%', |
|||
display: 'flex', |
|||
gap: '20px', |
|||
alignItems: 'end', |
|||
justifyContent: 'flex-end' |
|||
}} |
|||
> |
|||
<Button onClick={handleClose} color="warning" variant="contained"> |
|||
OK |
|||
</Button> |
|||
</Box> |
|||
</Box> |
|||
</Modal> |
|||
) |
|||
|
|||
const nom = useRef() |
|||
|
|||
const changeScreen = () => { |
|||
setScreenRattrapage(!screenRattrapage) |
|||
} |
|||
|
|||
return ( |
|||
<div className={classe.mainHome}> |
|||
{modals()} |
|||
<div className={classeHome.header}> |
|||
<div className={classe.h1style}> |
|||
<div className={classeHome.blockTitle}> |
|||
<h1>Mise a jour des notes</h1> |
|||
<div style={{ display: 'flex', gap: '20px' }}> |
|||
<Link onClick={() => window.history.back()}> |
|||
<Button color="warning" variant="contained"> |
|||
<IoMdReturnRight style={{ fontSize: '20px' }} /> |
|||
</Button> |
|||
</Link> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
{/* displaying the form */} |
|||
<div className={classeHome.boxEtudiantsCard}> |
|||
<Box |
|||
sx={{ |
|||
position: 'absolute', |
|||
top: '55%', |
|||
left: '50%', |
|||
transform: 'translate(-50%, -50%)', |
|||
width: 700, |
|||
borderRadius: '2%', |
|||
bgcolor: 'background.paper', |
|||
boxShadow: 24, |
|||
overflowY: 'auto', |
|||
p: 4 |
|||
}} |
|||
> |
|||
<Box |
|||
sx={{ |
|||
marginTop: '2%', |
|||
display: 'flex', |
|||
width: '100%', |
|||
height: '70vh', |
|||
gap: '20px', |
|||
alignItems: 'start', |
|||
justifyContent: 'center' |
|||
}} |
|||
> |
|||
{!screenRattrapage ? ( |
|||
<form action="" onSubmit={submitForm}> |
|||
<h4 style={{ textAlign: 'center' }}>Mise a jour des notes</h4> |
|||
{/* {/* map the all matiere and note to the form */} |
|||
<Grid container spacing={2}> |
|||
{notes.map((note) => ( |
|||
<Grid item xs={12} sm={3} key={note.nom}> |
|||
<TextField |
|||
label={note.nom} |
|||
name={note.matiere_id} |
|||
color="warning" |
|||
fullWidth |
|||
placeholder="point séparateur" |
|||
className="inputToValidateExport" |
|||
value={formData[note.matiere_id] || ''} // Access the correct value from formData |
|||
onChange={ |
|||
(e) => setFormData({ ...formData, [note.id]: e.target.value }) // Update the specific key |
|||
} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<CgNotes /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
inputRef={nom} |
|||
sx={{ |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: '#ff9800' // Set the border color on hover |
|||
} |
|||
}, |
|||
'& .MuiInputBase-input::placeholder': { |
|||
fontSize: '11px' // Set the placeholder font size |
|||
} |
|||
}} |
|||
/> |
|||
</Grid> |
|||
))} |
|||
</Grid> |
|||
<Grid |
|||
item |
|||
xs={12} |
|||
style={{ |
|||
display: 'flex', |
|||
gap: '30px', |
|||
justifyContent: 'flex-end', |
|||
marginTop: '2%' |
|||
}} |
|||
> |
|||
<Button type="button" color="warning" variant="contained" onClick={changeScreen}> |
|||
Voir les notes de rattrapage |
|||
</Button> |
|||
<Button type="submit" color="warning" variant="contained"> |
|||
Enregister |
|||
</Button> |
|||
</Grid> |
|||
</form> |
|||
) : ( |
|||
<form action="" onSubmit={submitForm2}> |
|||
<h4 style={{ textAlign: 'center' }}>Mise a jour des notes de Rattrapage</h4> |
|||
{/* {/* map the all matiere and note to the form */} |
|||
<Grid container spacing={2}> |
|||
{notesRepech.length === 0 ? ( |
|||
// Show this message if notesRepech is empty |
|||
<Grid item xs={12}> |
|||
<h4 style={{ textAlign: 'center', color: 'green' }}> |
|||
L'étudiant a validé tous les crédits. |
|||
</h4> |
|||
</Grid> |
|||
) : ( |
|||
// Render form fields if notesRepech contains data |
|||
notesRepech.map((note) => ( |
|||
<Grid item xs={12} sm={4} key={note.nom}> |
|||
<TextField |
|||
label={note.nom} |
|||
name={note.matiere_id} |
|||
color="warning" |
|||
fullWidth |
|||
placeholder="point séparateur" |
|||
className="inputToValidateExport" |
|||
value={formData2[note.matiere_id] || ''} // Access the correct value from formData2 |
|||
onChange={ |
|||
(e) => setFormData2({ ...formData2, [note.id]: e.target.value }) // Update the specific key |
|||
} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<CgNotes /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
inputRef={nom} |
|||
sx={{ |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: '#ff9800' // Set the border color on hover |
|||
} |
|||
}, |
|||
'& .MuiInputBase-input::placeholder': { |
|||
fontSize: '11px' // Set the placeholder font size |
|||
} |
|||
}} |
|||
/> |
|||
</Grid> |
|||
)) |
|||
)} |
|||
</Grid> |
|||
|
|||
<Grid |
|||
item |
|||
xs={12} |
|||
style={{ |
|||
display: 'flex', |
|||
gap: '30px', |
|||
justifyContent: 'flex-end', |
|||
marginTop: '2%' |
|||
}} |
|||
> |
|||
<Button type="button" color="warning" variant="contained" onClick={changeScreen}> |
|||
Voir les notes session normale |
|||
</Button> |
|||
<Button type="submit" color="warning" variant="contained"> |
|||
Enregister |
|||
</Button> |
|||
</Grid> |
|||
</form> |
|||
)} |
|||
</Box> |
|||
</Box> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
export default SingleNotes |
|||
@ -1,272 +0,0 @@ |
|||
import React, { useEffect, useRef, useState } from 'react' |
|||
import classe from '../assets/AllStyleComponents.module.css' |
|||
import classeHome from '../assets/Home.module.css' |
|||
import { Link, useParams } from 'react-router-dom' |
|||
import { IoMdReturnRight } from 'react-icons/io' |
|||
import { Box, InputAdornment, Typography, Modal, TextField, Grid, Button } from '@mui/material' |
|||
import ChangeCapital from './function/ChangeCapitalLetter' |
|||
import { FaClipboardList } from 'react-icons/fa6' |
|||
import { IoBookmark } from 'react-icons/io5' |
|||
import svgSuccess from '../assets/success.svg' |
|||
|
|||
const SinleMention = () => { |
|||
const { id } = useParams() |
|||
const [mentions, setMention] = useState([]) |
|||
const [formData, setFormData] = useState({ |
|||
nom: '', |
|||
uniter: '', |
|||
id: '' |
|||
}) |
|||
|
|||
const [errors, setErrors] = useState({ |
|||
nom: false, |
|||
uniter: false |
|||
}) |
|||
|
|||
useEffect(() => { |
|||
window.mention.getSingleMention({ id }).then((response) => { |
|||
setMention(response) |
|||
}) |
|||
}, []) |
|||
|
|||
useEffect(() => { |
|||
if (mentions) { |
|||
setFormData({ |
|||
nom: mentions.nom || '', |
|||
uniter: mentions.uniter || '', |
|||
id: mentions.id || id |
|||
}) |
|||
} |
|||
}, [mentions]) |
|||
|
|||
const nomRef = useRef() |
|||
const uniterRef = useRef() |
|||
|
|||
/** |
|||
* function to set the data in state |
|||
* @param {*} e |
|||
*/ |
|||
const handleInputChange = (e) => { |
|||
const { name, value } = e.target |
|||
setFormData({ |
|||
...formData, |
|||
[name]: value |
|||
}) |
|||
setErrors({ |
|||
...errors, |
|||
[name]: false // Reset the error when user starts typing |
|||
}) |
|||
} |
|||
|
|||
// Helper function to get helperText dynamically |
|||
const getHelperText = (field) => (errors[field] ? 'Ce champ est requis.' : '') |
|||
|
|||
const formSubmit = async (e) => { |
|||
e.preventDefault() |
|||
const newErrors = {} |
|||
let hasError = false |
|||
|
|||
// Check for empty fields |
|||
Object.keys(formData).forEach((key) => { |
|||
const value = formData[key] |
|||
if (typeof value === 'string' && !value.trim()) { |
|||
newErrors[key] = true // Set error for empty fields |
|||
hasError = true |
|||
} |
|||
}) |
|||
|
|||
setErrors(newErrors) |
|||
|
|||
if (!hasError) { |
|||
try { |
|||
let response = await window.mention.updateMention(formData) |
|||
|
|||
if (response.success) { |
|||
setOpen(true) |
|||
} |
|||
} catch (error) { |
|||
console.log(error) |
|||
} |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* hook to open modal |
|||
*/ |
|||
const [open, setOpen] = useState(false) |
|||
|
|||
/** |
|||
* function to close modal |
|||
*/ |
|||
const handleClose = () => { |
|||
setOpen(false) |
|||
} |
|||
|
|||
/** |
|||
* function to return the view Modal |
|||
* |
|||
* @returns {JSX} |
|||
*/ |
|||
const modals = () => ( |
|||
<Modal |
|||
open={open} |
|||
onClose={handleClose} |
|||
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 |
|||
}} |
|||
> |
|||
<Typography style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}> |
|||
<img src={svgSuccess} alt="" width={50} height={50} />{' '} |
|||
<span>Mention modifier avec succes</span> |
|||
</Typography> |
|||
<Box |
|||
sx={{ |
|||
marginTop: '2%', |
|||
display: 'flex', |
|||
gap: '20px', |
|||
alignItems: 'end', |
|||
justifyContent: 'flex-end' |
|||
}} |
|||
> |
|||
<Button onClick={handleClose} color="warning" variant="contained"> |
|||
OK |
|||
</Button> |
|||
</Box> |
|||
</Box> |
|||
</Modal> |
|||
) |
|||
|
|||
return ( |
|||
<div className={classe.mainHome}> |
|||
{modals()} |
|||
<div className={classeHome.header}> |
|||
<div className={classe.h1style}> |
|||
<div className={classeHome.blockTitle}> |
|||
<h1>Mise a jour mention</h1> |
|||
<div style={{ display: 'flex', gap: '20px' }}> |
|||
<Link to={'/mention'}> |
|||
<Button color="warning" variant="contained"> |
|||
<IoMdReturnRight style={{ fontSize: '20px' }} /> |
|||
</Button> |
|||
</Link> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div className={classeHome.boxEtudiantsCard}> |
|||
<Box |
|||
sx={{ |
|||
position: 'absolute', |
|||
top: '55%', |
|||
left: '50%', |
|||
transform: 'translate(-50%, -50%)', |
|||
width: 700, |
|||
borderRadius: '2%', |
|||
bgcolor: 'background.paper', |
|||
boxShadow: 24, |
|||
p: 4 |
|||
}} |
|||
> |
|||
<Box |
|||
sx={{ |
|||
marginTop: '2%', |
|||
display: 'flex', |
|||
width: '100%', |
|||
gap: '20px', |
|||
alignItems: 'start', |
|||
justifyContent: 'center' |
|||
}} |
|||
> |
|||
<form action="" style={{ width: '100%' }} onSubmit={formSubmit}> |
|||
<Grid container spacing={2}> |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
label="Nom" |
|||
error={errors.nom} |
|||
name="nom" |
|||
color="warning" |
|||
fullWidth |
|||
placeholder="GENIE DES MINES" |
|||
value={formData.nom} |
|||
onChange={handleInputChange} |
|||
onInput={() => ChangeCapital(nomRef)} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<FaClipboardList /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
helperText={getHelperText('nom')} |
|||
inputRef={nomRef} |
|||
sx={{ |
|||
marginBottom: '5px', |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: '#ff9800' // Set the border color on hover |
|||
} |
|||
} |
|||
}} |
|||
/> |
|||
</Grid> |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
label="Unité" |
|||
error={errors.uniter} |
|||
helperText={getHelperText('uniter')} |
|||
name="uniter" |
|||
color="warning" |
|||
fullWidth |
|||
placeholder="GM" |
|||
value={formData.uniter} |
|||
onChange={handleInputChange} |
|||
onInput={() => ChangeCapital(uniterRef)} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<IoBookmark /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
inputRef={uniterRef} |
|||
sx={{ |
|||
marginBottom: '5px', |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: '#ff9800' // Set the border color on hover |
|||
} |
|||
} |
|||
}} |
|||
/> |
|||
</Grid> |
|||
<Grid |
|||
item |
|||
xs={12} |
|||
style={{ display: 'flex', gap: '30px', justifyContent: 'flex-end' }} |
|||
> |
|||
<Button type="submit" color="warning" variant="contained"> |
|||
Enregister |
|||
</Button> |
|||
</Grid> |
|||
</Grid> |
|||
</form> |
|||
</Box> |
|||
</Box> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
export default SinleMention |
|||
@ -1,365 +0,0 @@ |
|||
import React, { useEffect, useRef, useState } from 'react' |
|||
import classe from '../assets/AllStyleComponents.module.css' |
|||
import classeAdd from '../assets/AddStudent.module.css' |
|||
import classeHome from '../assets/Home.module.css' |
|||
import { IoMdPersonAdd, IoMdReturnRight } from 'react-icons/io' |
|||
import { Link } from 'react-router-dom' |
|||
import { Box, Button, InputAdornment, Typography, Modal, TextField, Grid } from '@mui/material' |
|||
import { CgNotes } from 'react-icons/cg' |
|||
import { FaAngleDoubleUp, FaAngleDoubleDown, FaCog } from 'react-icons/fa' |
|||
import validateNOteSystem from './validation/NoteSystem' |
|||
import svgError from '../assets/error.svg' |
|||
import svgSuccess from '../assets/success.svg' |
|||
import { Tooltip } from 'react-tooltip' |
|||
import ModalFormMultiplicateur from './ModalFormMultiplicateur' |
|||
|
|||
const SystemeNote = () => { |
|||
const [formData, setFormData] = useState({ |
|||
id: '', |
|||
admis: '', |
|||
redouble: '', |
|||
renvoyer: '' |
|||
}) |
|||
|
|||
const [noteSy, setNoteSy] = useState([]) |
|||
const [status, setStatus] = useState(200) |
|||
|
|||
/** |
|||
* function to set the data in state |
|||
* @param {*} e |
|||
*/ |
|||
const handleInputChange = (e) => { |
|||
const { name, value } = e.target |
|||
setFormData((prevData) => ({ |
|||
...prevData, |
|||
[name]: value |
|||
})) |
|||
} |
|||
|
|||
useEffect(() => { |
|||
window.notesysteme.getSyteme().then((response) => { |
|||
setNoteSy(response) |
|||
}) |
|||
}, []) |
|||
|
|||
useEffect(() => { |
|||
if (noteSy) { |
|||
setFormData({ |
|||
id: noteSy.id, |
|||
admis: noteSy.admis || 0, |
|||
redouble: noteSy.redouble || 0, |
|||
renvoyer: noteSy.renvoyer || 0 |
|||
}) |
|||
} |
|||
}, [noteSy]) |
|||
|
|||
console.log(noteSy) |
|||
|
|||
const formSubmit = async (e) => { |
|||
e.preventDefault() |
|||
let valid = validateNOteSystem(admisRef.current, redoubleRef.current, renvoyerRef.current) |
|||
|
|||
if (valid) { |
|||
let response = await window.notesysteme.updateNoteSysteme(formData) |
|||
console.log(response) |
|||
if (response.success) { |
|||
setStatus(200) |
|||
setOpen(true) |
|||
} |
|||
} else { |
|||
setStatus(400) |
|||
setOpen(true) |
|||
} |
|||
} |
|||
|
|||
const admisRef = useRef() |
|||
const redoubleRef = useRef() |
|||
const renvoyerRef = useRef() |
|||
|
|||
/** |
|||
* hook to open modal |
|||
*/ |
|||
const [open, setOpen] = useState(false) |
|||
|
|||
/** |
|||
* function to close modal |
|||
*/ |
|||
const handleClose = () => setOpen(false) |
|||
|
|||
/** |
|||
* function to return the view Modal |
|||
* |
|||
* @returns {JSX} |
|||
*/ |
|||
const modals = () => ( |
|||
<Modal |
|||
open={open} |
|||
onClose={handleClose} |
|||
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 |
|||
}} |
|||
> |
|||
{status === 200 ? ( |
|||
<Typography |
|||
style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }} |
|||
> |
|||
<img src={svgSuccess} alt="" width={70} height={70} />{' '} |
|||
<span>Modification des notes a été effectuée avec succès</span> |
|||
</Typography> |
|||
) : ( |
|||
<Typography |
|||
style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }} |
|||
> |
|||
<img src={svgError} alt="" width={70} height={70} />{' '} |
|||
<span>Vérifiez les champs vides ou les séparateurs (doivent être un point)</span> |
|||
</Typography> |
|||
)} |
|||
<Box |
|||
sx={{ |
|||
marginTop: '2%', |
|||
display: 'flex', |
|||
gap: '20px', |
|||
alignItems: 'end', |
|||
justifyContent: 'flex-end' |
|||
}} |
|||
> |
|||
<Button onClick={handleClose} color="warning" variant="contained"> |
|||
OK |
|||
</Button> |
|||
</Box> |
|||
</Box> |
|||
</Modal> |
|||
) |
|||
|
|||
const [openForm, setOpenForm] = useState(false) |
|||
|
|||
const closeForm = () => { |
|||
setOpenForm(false) |
|||
} |
|||
|
|||
const openThisForm = () => { |
|||
setOpenForm(true) |
|||
} |
|||
|
|||
return ( |
|||
<div className={classe.mainHome}> |
|||
<style> |
|||
{` |
|||
.custom-tooltips { |
|||
font-size: 15px; |
|||
border: solid 1px white !important; |
|||
border-radius: 4px; |
|||
text-transform: capitalize; |
|||
font-weight: 600; |
|||
} |
|||
`} |
|||
</style> |
|||
{modals()} |
|||
<ModalFormMultiplicateur open={openForm} onClose={closeForm} /> |
|||
<div className={classeAdd.header}> |
|||
<div className={classe.h1style}> |
|||
<div className={classeHome.blockTitle}> |
|||
<h1 style={{ display: 'flex', alignItems: 'center', gap: '10px' }}> |
|||
<CgNotes /> |
|||
Système d'organisation des notes |
|||
</h1> |
|||
<Link to={'#'} className="infocog" onClick={openThisForm}> |
|||
<Button color="warning" variant="contained"> |
|||
<FaCog style={{ fontSize: '20px' }} /> |
|||
</Button> |
|||
</Link> |
|||
<Tooltip anchorSelect=".infocog" place="top" className="custom-tooltips"> |
|||
Changer le multiplicateur (credit * M) |
|||
</Tooltip> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div className={classeAdd.boxEtudiantsCard}> |
|||
<Box |
|||
sx={{ |
|||
position: 'absolute', |
|||
top: '55%', |
|||
left: '50%', |
|||
transform: 'translate(-50%, -50%)', |
|||
width: 1050, |
|||
borderRadius: '2%', |
|||
bgcolor: 'background.paper', |
|||
boxShadow: 24, |
|||
overflowY: 'auto', |
|||
p: 4 |
|||
}} |
|||
className="table-responsive" |
|||
> |
|||
<Box |
|||
sx={{ |
|||
marginTop: '2%', |
|||
display: 'flex', |
|||
width: '100%', |
|||
height: '40vh', |
|||
gap: '20px', |
|||
alignItems: 'start', |
|||
justifyContent: 'center' |
|||
}} |
|||
> |
|||
<form onSubmit={formSubmit}> |
|||
<table className={'table table-bordered table-responsive'}> |
|||
<thead className="bg-warning"> |
|||
<tr style={{ fontWeight: 'bold' }}> |
|||
<td style={{ color: 'gray' }}>Status :</td> |
|||
<td style={{ color: 'gray' }}>Admis</td> |
|||
<td style={{ color: 'gray' }}>Redouble</td> |
|||
<td style={{ color: 'gray' }}>Renvoyer</td> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td style={{ color: 'gray', fontWeight: 'bold' }}>Notes :</td> |
|||
<td> |
|||
{/* <Grid container spacing={2}> */} |
|||
<Grid item xs={12} sm={3}> |
|||
<TextField |
|||
label={'Notes pour etre admis'} |
|||
name={'admis'} |
|||
color="warning" |
|||
fullWidth |
|||
placeholder="point séparateur" |
|||
className="inputToValidateExport" |
|||
value={formData.admis} // Access the correct value from formData |
|||
onChange={handleInputChange} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<CgNotes /> |
|||
</InputAdornment> |
|||
), |
|||
endAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<FaAngleDoubleUp className="text-success" /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
inputRef={admisRef} |
|||
sx={{ |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: '#ff9800' // Set the border color on hover |
|||
} |
|||
}, |
|||
'& .MuiInputBase-input::placeholder': { |
|||
fontSize: '11px' // Set the placeholder font size |
|||
} |
|||
}} |
|||
/> |
|||
</Grid> |
|||
{/* </Grid> */} |
|||
</td> |
|||
<td> |
|||
{/* <Grid container spacing={2}> */} |
|||
<Grid item xs={12} sm={3}> |
|||
<TextField |
|||
label={'Notes pour redoubler'} |
|||
name={'redouble'} |
|||
color="warning" |
|||
fullWidth |
|||
placeholder="point séparateur" |
|||
className="inputToValidateExport" |
|||
value={formData.redouble} // Access the correct value from formData |
|||
onChange={handleInputChange} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<CgNotes /> |
|||
</InputAdornment> |
|||
), |
|||
endAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<FaAngleDoubleDown className="text-danger" /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
inputRef={redoubleRef} |
|||
sx={{ |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: '#ff9800' // Set the border color on hover |
|||
} |
|||
}, |
|||
'& .MuiInputBase-input::placeholder': { |
|||
fontSize: '11px' // Set the placeholder font size |
|||
} |
|||
}} |
|||
/> |
|||
</Grid> |
|||
{/* </Grid> */} |
|||
</td> |
|||
<td> |
|||
{/* <Grid container spacing={2}> */} |
|||
<Grid item xs={12} sm={3}> |
|||
<TextField |
|||
label={'Notes pour etre renvoyer'} |
|||
name={'renvoyer'} |
|||
color="warning" |
|||
fullWidth |
|||
placeholder="point séparateur" |
|||
className="inputToValidateExport" |
|||
value={formData.renvoyer} // Access the correct value from formData |
|||
onChange={handleInputChange} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<CgNotes /> |
|||
</InputAdornment> |
|||
), |
|||
endAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<FaAngleDoubleDown className="text-danger" /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
inputRef={renvoyerRef} |
|||
sx={{ |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: '#ff9800' // Set the border color on hover |
|||
} |
|||
}, |
|||
'& .MuiInputBase-input::placeholder': { |
|||
fontSize: '11px' // Set the placeholder font size |
|||
} |
|||
}} |
|||
/> |
|||
</Grid> |
|||
{/* </Grid> */} |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
<Grid |
|||
item |
|||
xs={12} |
|||
style={{ display: 'flex', gap: '30px', justifyContent: 'flex-end' }} |
|||
> |
|||
<Button type="submit" color="warning" variant="contained"> |
|||
Enregister |
|||
</Button> |
|||
</Grid> |
|||
</form> |
|||
</Box> |
|||
</Box> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
export default SystemeNote |
|||
@ -1,194 +0,0 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import { useParams, Link } from 'react-router-dom' |
|||
import classe from '../assets/AllStyleComponents.module.css' |
|||
import classeHome from '../assets/Home.module.css' |
|||
import Paper from '@mui/material/Paper' |
|||
import { Button, Modal, Box } from '@mui/material' |
|||
import { IoMdReturnRight } from 'react-icons/io' |
|||
import AjoutTranche from './AjoutTranche' |
|||
import { Tooltip } from 'react-tooltip' |
|||
import { FaPenToSquare } from 'react-icons/fa6' |
|||
import { FaTrash } from 'react-icons/fa' |
|||
import UpdateTranche from './UpdateTranche' |
|||
import DeleteTranche from './DeleteTranche' |
|||
|
|||
const TrancheEcolage = () => { |
|||
const { id } = useParams() |
|||
const [tranche, setTranche] = useState([]) |
|||
const [etudiant, setEtudiant] = useState({}) |
|||
|
|||
useEffect(() => { |
|||
window.etudiants.getTranche({ id }).then((response) => { |
|||
setTranche(response) |
|||
}) |
|||
|
|||
window.etudiants.getSingle({ id }).then((response) => { |
|||
setEtudiant(response) |
|||
}) |
|||
}, []) |
|||
|
|||
const [openAdd, setOpenAdd] = useState(false) |
|||
const onCloseAdd = () => setOpenAdd(false) |
|||
|
|||
const openAddFunction = () => { |
|||
setOpenAdd(true) |
|||
} |
|||
|
|||
const [isSubmited, setIsSubmited] = useState(false) |
|||
const handleFormSubmit = (status) => { |
|||
setIsSubmited(status) |
|||
} |
|||
|
|||
const [openUpdate, setOpenUpdate] = useState(false) |
|||
const onCloseUpdate = () => setOpenUpdate(false) |
|||
const [idToSend, setIdToSend] = useState(null) |
|||
const [idToSend2, setIdToSend2] = useState(null) |
|||
|
|||
const openUpdateFunction = (id) => { |
|||
setOpenUpdate(true) |
|||
setIdToSend(id) |
|||
} |
|||
|
|||
const [openDelete, setOpenDelete] = useState(false) |
|||
const onCloseDelete = () => setOpenDelete(false) |
|||
const openDeleteFunction = (id) => { |
|||
setOpenDelete(true) |
|||
setIdToSend2(id) |
|||
} |
|||
|
|||
useEffect(() => { |
|||
if (isSubmited) { |
|||
window.etudiants.getTranche({ id }).then((response) => { |
|||
setTranche(response) |
|||
}) |
|||
setIsSubmited(false) |
|||
} |
|||
}, [isSubmited]) |
|||
|
|||
return ( |
|||
<div className={classe.mainHome}> |
|||
<AjoutTranche |
|||
id={id} |
|||
onClose={onCloseAdd} |
|||
onSubmitSuccess={handleFormSubmit} |
|||
open={openAdd} |
|||
/> |
|||
<UpdateTranche |
|||
onClose={onCloseUpdate} |
|||
onSubmitSuccess={handleFormSubmit} |
|||
open={openUpdate} |
|||
id={idToSend} |
|||
/> |
|||
<DeleteTranche |
|||
id={idToSend2} |
|||
onClose={onCloseDelete} |
|||
onSubmitSuccess={handleFormSubmit} |
|||
open={openDelete} |
|||
/> |
|||
<div className={classeHome.header}> |
|||
<div className={classe.h1style}> |
|||
<div className={classeHome.blockTitle}> |
|||
<h1>Tranche d'Ecolage</h1> |
|||
<div style={{ display: 'flex', gap: '10px' }}> |
|||
<Link to={'#'} onClick={openAddFunction}> |
|||
<Button color="warning" variant="contained"> |
|||
Ajouter |
|||
</Button> |
|||
</Link> |
|||
<Link to={'#'} onClick={() => window.history.back()}> |
|||
<Button color="warning" variant="contained"> |
|||
<IoMdReturnRight style={{ fontSize: '20px' }} /> |
|||
</Button> |
|||
</Link> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div className={classeHome.boxEtudiantsCard}> |
|||
<Paper |
|||
sx={{ |
|||
height: 'auto', // Auto height to make the grid responsive |
|||
width: '100%', |
|||
// minHeight: 500, // Ensures a minimum height |
|||
display: 'flex', |
|||
padding: '2%' |
|||
}} |
|||
> |
|||
<table className="table table-bordered table-striped text-center shadow-sm" id="myTable2"> |
|||
<thead className="table-secondary"> |
|||
<tr> |
|||
<td colSpan={4} className="py-3"> |
|||
<h6> |
|||
Evolution d'écolage de {etudiant.nom} {etudiant.prenom} |
|||
</h6> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th>Tranche N°</th> |
|||
<th>Désignation</th> |
|||
<th>Montant</th> |
|||
<th>Action</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
{tranche.map((tranch, index) => ( |
|||
<tr key={tranch.id}> |
|||
<td>{index + 1}</td> |
|||
<td>{tranch.tranchename}</td> |
|||
<td>{Number(tranch.montant).toLocaleString(0, 3)}</td> |
|||
<td |
|||
className="fw-bold" |
|||
style={{ |
|||
display: 'flex', |
|||
gap: '10px', |
|||
alignItems: 'center', |
|||
justifyContent: 'center' |
|||
}} |
|||
> |
|||
<Button |
|||
variant="contained" |
|||
color="warning" |
|||
onClick={() => openUpdateFunction(tranch.id)} |
|||
> |
|||
<FaPenToSquare |
|||
style={{ fontSize: '20px', color: 'white' }} |
|||
className={`update${tranch.id}`} |
|||
/> |
|||
<Tooltip |
|||
anchorSelect={`.update${tranch.id}`} |
|||
className="custom-tooltip" |
|||
place="top" |
|||
> |
|||
Modifier |
|||
</Tooltip> |
|||
</Button> |
|||
<Button |
|||
variant="contained" |
|||
color="error" |
|||
onClick={() => openDeleteFunction(tranch.id)} |
|||
> |
|||
<FaTrash |
|||
style={{ fontSize: '20px', color: 'white' }} |
|||
className={`delete${tranch.id}`} |
|||
/> |
|||
<Tooltip |
|||
anchorSelect={`.delete${tranch.id}`} |
|||
className="custom-tooltip" |
|||
place="top" |
|||
> |
|||
Supprimer |
|||
</Tooltip> |
|||
</Button> |
|||
</td> |
|||
</tr> |
|||
))} |
|||
</tbody> |
|||
</table> |
|||
</Paper> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
export default TrancheEcolage |
|||
@ -1,179 +0,0 @@ |
|||
import React, { useEffect, useRef, useState } from 'react' |
|||
import { |
|||
Dialog, |
|||
DialogActions, |
|||
DialogContent, |
|||
DialogTitle, |
|||
TextField, |
|||
Button, |
|||
InputAdornment, |
|||
Box, |
|||
Grid |
|||
} from '@mui/material' |
|||
import ChangeCapital from './function/ChangeCapitalLetter' |
|||
import ChangeCapitalize from './function/ChangeCapitalizeLetter' |
|||
import { PiChalkboardTeacher } from 'react-icons/pi' |
|||
import { MdContactPhone, MdDateRange } from 'react-icons/md' |
|||
|
|||
const UpdateModalProf = ({ open, onClose, matiere_id, onSubmitSuccess }) => { |
|||
const [formData, setFormData] = useState({ |
|||
nom_enseignant: '', |
|||
prenom_enseignant: '', |
|||
contact: '', |
|||
date: '', |
|||
matiere_id: '' |
|||
}) |
|||
|
|||
const nomRefs = useRef() |
|||
const prenomRefs = useRef() |
|||
|
|||
const handleChange = (e) => { |
|||
const { name, value } = e.target |
|||
setFormData({ ...formData, [name]: value }) |
|||
} |
|||
|
|||
useEffect(() => { |
|||
let id = matiere_id |
|||
if (id !== '') { |
|||
window.matieres.getSingleProf({ id }).then((response) => { |
|||
setFormData((prev) => ({ |
|||
...prev, |
|||
nom_enseignant: response.nom_enseignant, |
|||
prenom_enseignant: response.prenom_enseignant, |
|||
contact: response.contact, |
|||
date: response.date, |
|||
matiere_id: matiere_id |
|||
})) |
|||
}) |
|||
} |
|||
}, [matiere_id]) |
|||
|
|||
const handleSubmit = async (e) => { |
|||
e.preventDefault() |
|||
let response = await window.matieres.updateProf(formData) |
|||
|
|||
if (response.success) { |
|||
onSubmitSuccess(true) |
|||
onClose() // Close the modal after submission |
|||
} |
|||
} |
|||
|
|||
return ( |
|||
<Dialog open={open} onClose={onClose}> |
|||
<form action="" onSubmit={handleSubmit}> |
|||
<DialogTitle>mise à jour enseignant</DialogTitle> |
|||
<DialogContent> |
|||
<Box sx={{ flexGrow: 1 }}> |
|||
<Grid container spacing={2}> |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
autoFocus |
|||
margin="normal" |
|||
required |
|||
name="nom_enseignant" |
|||
label="Nom du professeur" |
|||
type="text" |
|||
fullWidth |
|||
placeholder="Nom du professeur" |
|||
variant="outlined" |
|||
value={formData.nom_enseignant} |
|||
color="warning" |
|||
inputRef={nomRefs} |
|||
onInput={() => ChangeCapital(nomRefs)} |
|||
onChange={handleChange} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<PiChalkboardTeacher /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
/> |
|||
</Grid> |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
autoFocus |
|||
margin="normal" |
|||
required |
|||
name="prenom_enseignant" |
|||
label="Prenom du professeur" |
|||
type="text" |
|||
fullWidth |
|||
placeholder="Prenom du professeur" |
|||
variant="outlined" |
|||
value={formData.prenom_enseignant} |
|||
color="warning" |
|||
inputRef={prenomRefs} |
|||
onInput={() => ChangeCapitalize(prenomRefs)} |
|||
onChange={handleChange} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<PiChalkboardTeacher /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
/> |
|||
</Grid> |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
autoFocus |
|||
margin="normal" |
|||
required |
|||
name="contact" |
|||
label="Contact" |
|||
type="number" |
|||
fullWidth |
|||
placeholder="Contact" |
|||
variant="outlined" |
|||
value={formData.contact} |
|||
color="warning" |
|||
onChange={handleChange} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<MdContactPhone /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
/> |
|||
</Grid> |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
autoFocus |
|||
margin="normal" |
|||
required |
|||
name="date" |
|||
label="Date de prise du poste" |
|||
type="date" |
|||
fullWidth |
|||
variant="outlined" |
|||
value={formData.date} |
|||
color="warning" |
|||
onChange={handleChange} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<MdDateRange /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
/> |
|||
</Grid> |
|||
</Grid> |
|||
</Box> |
|||
</DialogContent> |
|||
<DialogActions> |
|||
<Button onClick={onClose} color="error"> |
|||
Annuler |
|||
</Button> |
|||
<Button type="submit" color="warning"> |
|||
Soumettre |
|||
</Button> |
|||
</DialogActions> |
|||
</form> |
|||
</Dialog> |
|||
) |
|||
} |
|||
|
|||
export default UpdateModalProf |
|||
@ -1,178 +0,0 @@ |
|||
import React, { useEffect, useRef, useState } from 'react' |
|||
import { |
|||
Dialog, |
|||
DialogActions, |
|||
DialogContent, |
|||
DialogTitle, |
|||
TextField, |
|||
Button, |
|||
Autocomplete, |
|||
InputAdornment, |
|||
Box, |
|||
Grid |
|||
} from '@mui/material' |
|||
import { MdRule } from 'react-icons/md' |
|||
import { FaClipboardList } from 'react-icons/fa' |
|||
|
|||
const AddParcours = ({ open, onClose, onSubmitSuccess, id }) => { |
|||
const [formData, setFormData] = useState({ |
|||
nom: '', |
|||
uniter: '', |
|||
mention_id: '', |
|||
id: '' |
|||
}) |
|||
|
|||
const [mention, setMention] = useState([]) |
|||
const [parcour, setParcour] = useState([]) |
|||
|
|||
useEffect(() => { |
|||
window.mention.getMention().then((response) => { |
|||
setMention(response) |
|||
}) |
|||
}, []) |
|||
|
|||
useEffect(() => { |
|||
if (id) { |
|||
window.notesysteme.getSingleParcours({ id }).then((response) => { |
|||
setParcour(response) |
|||
}) |
|||
} |
|||
}, [id]) |
|||
|
|||
useEffect(() => { |
|||
if (parcour) { |
|||
setFormData({ |
|||
nom: parcour.nom, |
|||
uniter: parcour.uniter, |
|||
mention_id: parcour.mention_id, |
|||
id: parcour.id |
|||
}) |
|||
} |
|||
}, [parcour]) |
|||
|
|||
const handleChange = (e) => { |
|||
const { name, value } = e.target |
|||
setFormData({ ...formData, [name]: value }) |
|||
} |
|||
|
|||
const handleSubmit = async (e) => { |
|||
e.preventDefault() |
|||
let response = await window.notesysteme.updateParcours(formData) |
|||
|
|||
if (response.success) { |
|||
onSubmitSuccess(true) |
|||
onClose() // Close the modal after submission |
|||
} |
|||
} |
|||
|
|||
return ( |
|||
<Dialog open={open} onClose={onClose}> |
|||
<form action="" onSubmit={handleSubmit}> |
|||
<DialogTitle>Mise à jour du parcour</DialogTitle> |
|||
<DialogContent> |
|||
<Box sx={{ flexGrow: 1 }}> |
|||
<Grid container spacing={2}> |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
autoFocus |
|||
margin="normal" |
|||
required |
|||
name="nom" |
|||
label="Nom du parcours" |
|||
type="text" |
|||
fullWidth |
|||
placeholder="Nom du parcours" |
|||
variant="outlined" |
|||
value={formData.nom} |
|||
color="warning" |
|||
onChange={handleChange} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<MdRule /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
/> |
|||
</Grid> |
|||
<Grid item xs={12} sm={6}> |
|||
<TextField |
|||
autoFocus |
|||
margin="normal" |
|||
required |
|||
name="uniter" |
|||
label="Uniter parcours" |
|||
type="text" |
|||
fullWidth |
|||
placeholder="GPESB" |
|||
variant="outlined" |
|||
value={formData.uniter} |
|||
color="warning" |
|||
onChange={handleChange} |
|||
InputProps={{ |
|||
startAdornment: ( |
|||
<InputAdornment position="start"> |
|||
<MdRule /> |
|||
</InputAdornment> |
|||
) |
|||
}} |
|||
/> |
|||
</Grid> |
|||
<Grid item xs={12} sm={12}> |
|||
<Autocomplete |
|||
options={mention} // Options array for Autocomplete |
|||
getOptionLabel={(option) => option.nom || ''} // Safely access `nom` |
|||
value={mention.find((item) => item.id === formData.mention_id) || null} // Bind selected value to form data |
|||
onChange={(event, newValue) => { |
|||
setFormData((prevData) => ({ |
|||
...prevData, |
|||
mention_id: newValue ? newValue.id : null // Store the ID of the selected mention |
|||
})) |
|||
}} |
|||
isOptionEqualToValue={(option, value) => option.id === value.id} // Ensure correct matching of options |
|||
renderInput={(params) => ( |
|||
<TextField |
|||
{...params} |
|||
label="Mention" |
|||
color="warning" |
|||
placeholder="Sélectionnez une mention" |
|||
InputProps={{ |
|||
...params.InputProps, |
|||
startAdornment: ( |
|||
<> |
|||
<InputAdornment position="start"> |
|||
<FaClipboardList /> |
|||
</InputAdornment> |
|||
{params.InputProps.startAdornment} |
|||
</> |
|||
) |
|||
}} |
|||
sx={{ |
|||
marginBottom: '5px', |
|||
'& .MuiOutlinedInput-root': { |
|||
'&:hover fieldset': { |
|||
borderColor: '#ff9800' // Set border color on hover |
|||
} |
|||
} |
|||
}} |
|||
/> |
|||
)} |
|||
/> |
|||
</Grid> |
|||
</Grid> |
|||
</Box> |
|||
</DialogContent> |
|||
<DialogActions> |
|||
<Button onClick={onClose} color="error"> |
|||
Annuler |
|||
</Button> |
|||
<Button type="submit" color="warning"> |
|||
Soumettre |
|||
</Button> |
|||
</DialogActions> |
|||
</form> |
|||
</Dialog> |
|||
) |
|||
} |
|||
|
|||
export default AddParcours |
|||
@ -1,5 +0,0 @@ |
|||
const calculNote = (note, coeficient) => { |
|||
return note * coeficient |
|||
} |
|||
|
|||
export default calculNote |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue