Debut ajout modif page + erreur à corrigé API

server-api/api.js

@@ -58,6 +58,20 @@ app.get('/Customer/Id/:id', (req, res) => {
     });
 }); 
 
+app.get('/User/Id/:id', (req, res) => {
+
+    const id = req.params.id;
+    let sql = 'SELECT lastname,firstname,phone,mail,login,idrole FROM users WHERE iduser = ?';
+
+    db.query(sql, [id], (err, result) => {
+        if (err) throw err;
+
+        console.log(result);
+        res.send(result);
+    });
+}); 
+
+
 app.get('/User/Auth/:login/:pwd', (req, res) => {
 
     const login = req.params.login;

src/App.js

@@ -2,19 +2,21 @@ import React from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import Compte from './pages/Compte';
 import Connexion from './pages/Connexion';
-import Admin from './pages/Admin';
 import Admin_modif from './pages/Admin_modif';
 import Admin_supp from './pages/Admin_supp';
 import Dashboard from './pages/Dashboard';
 import Analyse from './pages/Analyse';
+import Admin_list from './pages/Admin_list';
+import Admin_create from './pages/Admin_create';
 
 const App = () => {
   return (
     <BrowserRouter>
      <Routes>
       <Route path="/" element={<Connexion />} />
-      <Route path="/Admin" element={<Admin />} />
+      <Route path="/Admin_create" element={<Admin_create />} />
       <Route path="/Account" element={<Compte />} />
+      <Route path="/Admin_list" element={<Admin_list />} />
       <Route path="/Admin_modif" element={<Admin_modif />} />
       <Route path="/Admin_supp" element={<Admin_supp />} />
       <Route path="/Dashboard" element={<Dashboard />} />

src/components/NavigationAdmin.js

@@ -1,15 +1,16 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 
-const NavigationAdmin = () => {
+const NavigationAdmin = (props) => {
+    
     return (
 
         <div className="nav_bar_verticale">
             <img className="logo" srcSet="./LogoApp.svg"></img>
-            <NavLink className="create_user" to="/Admin">
+            <NavLink className="create_user" to="/Admin_create">
                 <button id="bouton_créer" className="bouton" type="button" value="Créer un utilisateur" onClick={changeColor}>Créer utilisateur</button>
             </NavLink>
-            <NavLink className="modify_user" to="/Admin_modif">
+            <NavLink className="modify_user" to="/Admin_modif" state={{ iduser: props.iduser }}>
                 <button id="bouton_modif" className="bouton" type="button" value="Modifier un utilisateur" onClick={changeColor2}>Modifier utilisateur</button>
             </NavLink>
             <NavLink className="delete_user" to="/Admin_supp">

src/pages/Admin_create.js

@@ -4,16 +4,21 @@ import NavigationAdmin from '../components/NavigationAdmin.js';
 import CryptoJS from 'crypto-js';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
+import { NavLink } from 'react-router-dom';
+import { useNavigate } from "react-router-dom";
+import { Button } from '@mui/material';
 
 const api = axios.create({
     baseURL: 'http://localhost:8080'
   })
 
-function Admin() {
+function Admin_create() {
 
     const [loginError, setLoginError] = useState(false);    
     const [roles, setRoles] = useState([]);
     const [selectedIdRole, setSelectedIdRole] = useState(1);
+
+    const navigate = useNavigate();
  
     useEffect(() =>{
         api.get('/Role/All/').then((response) => {
@@ -45,13 +50,15 @@ function Admin() {
                 api.post('/User/Add', values).then (function(response) {
                     console.log(response.data);
                 });
+
+                navigate("/Admin_list");
             }
         });
     };
 
     return (
         <div className="page_admin">
-            <NavigationAdmin />
+            {/*<NavigationAdmin />*/}
             {/* Create a admin page */}
             <div className="Titre_Formulaire">
                 <p className="Titre">Admin</p>
@@ -92,7 +99,9 @@ function Admin() {
                         <p>{loginError === true?"L'identifiant existe déja":''}</p>
                         <div className="bouton_submit">
                             <button className="bouton_val" type="submit">Valider</button>
-                            <button className="bouton_ann" type='reset'>Annuler</button>
+                            <NavLink className="bouton_ann" to="/Admin_list">
+                                <button className="bouton_ann" type="button">Retour</button>
+                            </NavLink>
                         </div>
                     </form>
                 </div>
@@ -101,4 +110,4 @@ function Admin() {
     );
 };
 
-export default Admin;
+export default Admin_create;

src/pages/Admin_list.js

@@ -0,0 +1,101 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios'
+import NavigationAdmin from '../components/NavigationAdmin.js';
+import { TableContainer,Table,TableHead,TableBody,TableRow,TableCell } from '@mui/material';
+import { Paper } from '@mui/material';
+
+const api = axios.create({
+    baseURL: 'http://localhost:8080'
+  })
+
+function Admin_list() {
+
+    const [users, setUsers] = useState([]);
+    const [selectedIdUser, setSelectedIdUser] = useState();
+
+    useEffect(() =>{
+        api.get('/User/All/').then((response) => {
+            setUsers(response.data);
+            setSelectedIdUser(response.data[0].iduser);
+        });
+    }, []);
+
+    const handleClick = (event, iduser) => {
+        setSelectedIdUser(iduser);
+    };
+
+    return (
+        <div className="page_admin">
+            <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>
+            {/* Create a page to delete an user in the admin page*/}
+            <NavigationAdmin iduser={selectedIdUser}/>
+            <div className="Titre_Formulaire_Rech">
+                <p className="Titre">Admin</p>
+                <p className="Sous-titre">Liste des utilisateurs</p>
+                <div className="rechLogo">
+                    <div className="input_box">
+                    <input type="search" placeholder="Rechercher..."/>
+                        <span className="search">
+                            <i class="uil uil-search search-icon"></i>
+                        </span>
+                    </div>
+                    {/*
+                    <form className="formulaire">
+                        <table className="Formulaire_de_recherche">
+                            <tr className="tr_bouton">
+                                <div className="bouton_personnes">
+                                    <p className="bouton_personne1">
+                                        <strong>Dupont Jacques</strong>
+                                    </p>
+                                    <p className="bouton_personne2">
+                                        <strong>Carreau Alexis</strong>
+                                    </p>
+                                </div>
+                            </tr>
+                            <tr>
+                                <div id="style" className='bouton_submit'>
+                                    <button className="bouton_sup" type="submit" onClick="document.getElementById('style').style.backgroundColor='green'">Supprimer</button>
+                                    <button className="bouton_ann" type="submit" onClick="document.getElementById('style').style.backgroundColor='red'">Annuler</button>
+                                </div>
+                            </tr>
+                        </table>
+                    </form>
+                    */}
+                    <TableContainer component={Paper} sx={{ maxHeight: 0.8 }}>
+                        <Table aria-label="simple table" size="small" stickyHeader>
+                            <TableHead >
+                                <TableRow>
+                                    <TableCell sx={{ bgcolor: 'info.main'}} align="left">Nom</TableCell>
+                                    <TableCell sx={{ bgcolor: 'info.main'}} align="center">Prénom</TableCell>
+                                    <TableCell sx={{ bgcolor: 'info.main'}} align="center">Identifiant</TableCell>
+                                    <TableCell sx={{ bgcolor: 'info.main'}} align="center">Téléphone</TableCell>
+                                    <TableCell sx={{ bgcolor: 'info.main'}} align="center">Email</TableCell>
+                                    <TableCell sx={{ bgcolor: 'info.main'}} align="center">Rôle</TableCell>
+                                </TableRow>
+                            </TableHead>
+                            <TableBody >
+                                {users.map((user) => (
+                                    <TableRow
+                                        key={user.iduser}
+                                        hover
+                                        onClick={(event) => handleClick(event, user.iduser)}
+                                        selected={user.iduser === selectedIdUser}
+                                    >
+                                        <TableCell align="left">{user.lastname}</TableCell>
+                                        <TableCell align="center">{user.firstname}</TableCell>
+                                        <TableCell align="center">{user.login}</TableCell>
+                                        <TableCell align="center">{user.phone}</TableCell>
+                                        <TableCell align="center">{user.mail}</TableCell>
+                                        <TableCell align="center">{user.name}</TableCell>
+                                    </TableRow>
+                                ))}
+                            </TableBody>
+                        </Table>
+                    </TableContainer>
+                </div>
+            </div>
+         </div>
+    );
+};
+
+export default Admin_list;

src/pages/Admin_modif.js

@@ -1,8 +1,42 @@
-import React from 'react';
+import axios from 'axios'
+import React, { useState, useEffect } from 'react';
 import NavigationAdmin from '../components/NavigationAdmin.js';
-import Admin from './Admin.js';
+import Admin from './Admin_create.js';
+import { useLocation } from "react-router-dom"
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+
+const api = axios.create({
+    baseURL: 'http://localhost:8080'
+  })
+
+function Admin_modif() {
+    const location = useLocation();
+    const { iduser } = location.state;
+
+    const [currentUser, setCurrentUser] = useState([]);
+    const [roles, setRoles] = useState([]);
+    const [selectedIdRole, setSelectedIdRole] = useState(1);
+
+    useEffect(() =>{
+        const apiString = '/User/Id/' + iduser;
+        api.get(apiString).then((response) => {
+            console.log(response.data);
+            setCurrentUser(response.data);
+            setSelectedIdRole(response.data[0].idrole);
+        });
+    });
+
+    useEffect(() =>{
+        api.get('/Role/All/').then((response) => {
+            setRoles(response.data);
+        });
+    }, []);
+
+    function handleChangeRole(event){
+        setSelectedIdRole(event.target.value);
+    };
 
-const Admin_modif = () => {
     return (
         <div className="page_admin">
             <NavigationAdmin />
@@ -23,11 +57,25 @@ const Admin_modif = () => {
                                 </div>
                             </tr>
                             <tr>
-                                <input id="nom" className="texte_zone" type="text" placeholder="Nom..."/>
+                                <input id="nom" value={currentUser[0].lastname} name='lastname' className="texte_zone" type="text" placeholder="Nom..." required/>
-                                <input id="prénom" className="texte_zone" type="text" placeholder="Prénom..."/>
+                                {/*
-                                <input id="rôle" className="texte_zone" type="text" placeholder="Rôle..."/>
+                                <input id="prenom" value={selectedUser[0].firstname} name='firstname' className="texte_zone" type="text" placeholder="Prénom..." required/>
-                                <input id="identifiant" className="texte_zone" type="text" placeholder="Identifiant..."/>
+                                <input id="phone" value={selectedUser[0].phone} name='phone' className="texte_zone" type="tel" 
-                                <input id="password" className="texte_zone" type="password" placeholder="Mot de passe (par default)..."/>
+                                    placeholder="Téléphone..." pattern="[0-9]{10}" required/>
+                                <input id="email" value={selectedUser[0].mail} name='mail' className="texte_zone" type="email" placeholder="Email..." required/>
+                                */}
+                                <Select
+                                    name='idrole'
+                                    value={selectedIdRole}
+                                    onChange={handleChangeRole}
+                                >
+                                    {roles.map(role => (
+                                        <MenuItem value={role.idRole}>{role.name}</MenuItem>    
+                                    ))}
+                                </Select>
+                                {/*
+                                <input id="identifiant" value={selectedUser[0].login} name='login' className="texte_zone" type="text" placeholder="Identifiant..." required/>
+                                    */}
                             </tr>
                             <tr>
                                 <div className="button_submit">

src/pages/Connexion.js

@@ -1,8 +1,9 @@
 import axios from 'axios'
 import React, { useState } from 'react';
 import CryptoJS from 'crypto-js';
-import Admin from './Admin.js'
+import Admin from './Admin_create.js'
 import Dashboard from './Dashboard.js';
+import Admin_list from './Admin_list.js';
 
 const api = axios.create({
     baseURL: 'http://localhost:8080'
@@ -67,7 +68,7 @@ function Connexion() {
         });
         console.log("RoleUser: " + roleUser);
         if (roleUser === 4)
-            return (<Admin />);
+            return (<Admin_list />);
         else if (roleUser === 1)
             return (<Dashboard />);
     }