maxence.lanone
/
JTT_CrM_test_ci
forked from CRM_Production/JTT_CrM
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Debut ajout modif page + erreur à corrigé API

Browse Source
master
Jeremy DUCOURTHIAL 3 years ago
parent 4a2234fedc
commit d891c1c9fd
7 changed files with 195 additions and 19 deletions
Show Stats Download Patch File Download Diff File

14
server-api/api.js
Unescape View File

@ -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;

6
src/App.js
Unescape View File

@ -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 />} />

7
src/components/NavigationAdmin.js
Unescape View File

@ -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">

17
src/pages/Admin.js → src/pages/Admin_create.js
Unescape View File

@ -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;

101
src/pages/Admin_list.js
Unescape View File

@ -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;

64
src/pages/Admin_modif.js
Unescape View File

@ -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="prénom" className="texte_zone" type="text" placeholder="Prénom..."/>
<input id="rôle" className="texte_zone" type="text" placeholder="Rôle..."/>
<input id="identifiant" className="texte_zone" type="text" placeholder="Identifiant..."/>
<input id="password" className="texte_zone" type="password" placeholder="Mot de passe (par default)..."/>
<input id="nom" value={currentUser[0].lastname} name='lastname' className="texte_zone" type="text" placeholder="Nom..." required/>
{/*
<input id="prenom" value={selectedUser[0].firstname} name='firstname' className="texte_zone" type="text" placeholder="Prénom..." required/>
<input id="phone" value={selectedUser[0].phone} name='phone' className="texte_zone" type="tel"
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">

5
src/pages/Connexion.js
Unescape View File

@ -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 />);
}

Write Preview
Loading…
Cancel
Save