gestion bug affichage ensemble page admin

master
Clément VERDOIRE 3 years ago
parent 400c939e48
commit 2130aa56b1

@ -63,7 +63,7 @@ function Admin_create() {
<div className="Formulaire"> <div className="Formulaire">
<form className="form" onSubmit={checkAdd}> <form className="form" onSubmit={checkAdd}>
<table className="Formulaire_de_connexion"> <table className="Formulaire_de_connexion">
<tr> <tr className="one-2">
<div className="texte_côté"> <div className="texte_côté">
<p>Nom :</p> <p>Nom :</p>
<p>Prénom :</p> <p>Prénom :</p>
@ -74,7 +74,7 @@ function Admin_create() {
<p>Mot de passe :</p> <p>Mot de passe :</p>
</div> </div>
</tr> </tr>
<tr> <tr className="two-2">
<input id="nom" name='lastname' className="texte_zone" type="text" placeholder="Nom..." required/> <input id="nom" name='lastname' className="texte_zone" type="text" placeholder="Nom..." required/>
<input id="prenom" name='firstname' className="texte_zone" type="text" placeholder="Prénom..." required/> <input id="prenom" name='firstname' className="texte_zone" type="text" placeholder="Prénom..." required/>
<input id="phone" name='phone' className="texte_zone" type="tel" <input id="phone" name='phone' className="texte_zone" type="tel"

@ -96,9 +96,9 @@ function Admin_modif() {
<div className="Formulaire"> <div className="Formulaire">
<form className="form" onSubmit={checkModif}> <form className="form" onSubmit={checkModif}>
<table className="Formulaire_de_connexion"> <table className="Formulaire_de_connexion">
<tr> <tr className="one">
<div className="texte_côté"> <div className="texte_côté">
<p>Nom :</p> <div>Nom :</div>
<p>Prénom :</p> <p>Prénom :</p>
<p>Login :</p> <p>Login :</p>
<p>Rôle :</p> <p>Rôle :</p>
@ -106,7 +106,7 @@ function Admin_modif() {
<p>Mail :</p> <p>Mail :</p>
</div> </div>
</tr> </tr>
<tr> <tr className="two">
<input id="nom" value={lastName} onChange={handleChangeLastName} name="lastname" className="texte_zone" type="text" placeholder="Nom..." required/> <input id="nom" value={lastName} onChange={handleChangeLastName} name="lastname" className="texte_zone" type="text" placeholder="Nom..." required/>
<input id="prenom" value={firstName} onChange={handleChangeFirstName} name="firstname" className="texte_zone" type="text" placeholder="Prénom..." required/> <input id="prenom" value={firstName} onChange={handleChangeFirstName} name="firstname" className="texte_zone" type="text" placeholder="Prénom..." required/>
<input id="identifiant" value={login} onChange={handleChangeLogin} name="login" className="texte_zone" type="text" placeholder="Identifiant..." required/> <input id="identifiant" value={login} onChange={handleChangeLogin} name="login" className="texte_zone" type="text" placeholder="Identifiant..." required/>
@ -124,8 +124,8 @@ function Admin_modif() {
<input id="email" value={mail} onChange={handleChangeMail} name="mail" className="texte_zone" type="email" placeholder="Email..." required/> <input id="email" value={mail} onChange={handleChangeMail} name="mail" className="texte_zone" type="email" placeholder="Email..." required/>
<input id="identifiant" value={login} onChange={handleChangeLogin} name="login" className="texte_zone" type="text" placeholder="Identifiant..." required/> <input id="identifiant" value={login} onChange={handleChangeLogin} name="login" className="texte_zone" type="text" placeholder="Identifiant..." required/>
</tr> </tr>
<tr> <tr className="three">
<NavLink className="button_submit" to="/RestartPassword" state={{ iduser:iduser }}>Réinitialiser le mot de passe</NavLink> <NavLink className="button_submit" to="/RestartPassword" state={{ iduser:iduser }}>Réinitialiser mot de passe</NavLink>
</tr> </tr>
</table> </table>
<div className="bouton_submit"> <div className="bouton_submit">

@ -2,15 +2,15 @@ import React, { useState, useEffect } from 'react';
import axios from 'axios' import axios from 'axios'
import NavigationAdmin from '../components/NavigationAdmin.js'; import NavigationAdmin from '../components/NavigationAdmin.js';
import { NavLink, useLocation } from "react-router-dom"; import { NavLink, useLocation } from "react-router-dom";
import { TableContainer,Table,TableHead,TableBody,TableRow,TableCell } from '@mui/material'; import { TableContainer, Table, TableHead, TableBody, TableRow, TableCell } from '@mui/material';
import { Paper } from '@mui/material'; import { Paper } from '@mui/material';
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
const api = axios.create({ const api = axios.create({
baseURL: 'http://localhost:8080' baseURL: 'http://localhost:8080'
}) })
function Admin_supp(){ function Admin_supp() {
const location = useLocation(); const location = useLocation();
const { iduser } = location.state; const { iduser } = location.state;
@ -19,7 +19,7 @@ function Admin_supp(){
const navigate = useNavigate(); const navigate = useNavigate();
useEffect(() =>{ useEffect(() => {
const apiString = '/User/Id/' + iduser; const apiString = '/User/Id/' + iduser;
api.get(apiString).then((response) => { api.get(apiString).then((response) => {
console.log(response.data[0]); console.log(response.data[0]);
@ -27,8 +27,8 @@ function Admin_supp(){
}); });
}, []); }, []);
function checkDelete(event){ function checkDelete(event) {
event.preventDefault(); event.preventDefault();
const apiString = '/User/Delete/' + iduser; const apiString = '/User/Delete/' + iduser;
@ -50,11 +50,11 @@ function Admin_supp(){
<Table aria-label="simple table" size="small" stickyHeader> <Table aria-label="simple table" size="small" stickyHeader>
<TableHead > <TableHead >
<TableRow> <TableRow>
<TableCell sx={{ bgcolor: 'info.main'}} align="left">Nom</TableCell> <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">Prénom</TableCell>
<TableCell sx={{ bgcolor: 'info.main'}} align="center">Identifiant</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">Téléphone</TableCell>
<TableCell sx={{ bgcolor: 'info.main'}} align="center">Email</TableCell> <TableCell sx={{ bgcolor: 'info.main' }} align="center">Email</TableCell>
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody > <TableBody >
@ -68,13 +68,13 @@ function Admin_supp(){
</TableBody> </TableBody>
</Table> </Table>
</TableContainer> </TableContainer>
</div> <div className="bouton_submit">
<div className="bouton_submit"> <button className="bouton_val" onClick={checkDelete}>Valider</button>
<button onClick={checkDelete}>Valider</button> <NavLink className="bouton_ann" to="/Admin_list">Retour</NavLink>
<NavLink className="bouton_ann" to="/Admin_list">Retour</NavLink> </div>
</div> </div>
</div> </div>
</div> </div>
); );
}; };

@ -1,10 +1,10 @@
.dark{ .dark {
background-color: $xiketic; background-color: $xiketic;
color: white; color: white;
} }
body { body {
.page_admin { .page_admin {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -48,21 +48,21 @@ body {
text-decoration: none; text-decoration: none;
align-self: center; align-self: center;
} }
.modify_user { .modify_user {
display: flex; display: flex;
padding: 5px; padding: 5px;
text-decoration: none; text-decoration: none;
align-self: center; align-self: center;
} }
.delete_user { .delete_user {
display: flex; display: flex;
padding: 5px; padding: 5px;
text-decoration: none; text-decoration: none;
align-self: center; align-self: center;
} }
.list_devis { .list_devis {
display: flex; display: flex;
padding: 5px; padding: 5px;
@ -109,12 +109,12 @@ body {
} }
} }
.Titre_Formulaire{ .Titre_Formulaire {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 10px 10px 10px 0px; margin: 10px;
padding: 10px; padding: 10px;
flex-basis: 100%; width: 100%;
background: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.3);
border-radius: 15px; border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
@ -123,11 +123,6 @@ body {
.Titre { .Titre {
display: flex; display: flex;
/*background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);*/
margin: 10px; margin: 10px;
font-size: 70px; font-size: 70px;
font-weight: bold; font-weight: bold;
@ -135,78 +130,131 @@ body {
.Sous-titre { .Sous-titre {
display: flex; display: flex;
/*background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);*/
margin: 10px; margin: 10px;
font-size: 40px; font-size: 40px;
font-weight: bold; font-weight: bold;
} }
.Formulaire{
.Formulaire {
display: flex; display: flex;
flex-direction: column; flex-direction: row;
align-items: center; justify-content: center;
/*background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);*/
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
.form{ .form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-self: center; margin-top: 60px;
font-size: 30px; font-size: 30px;
width: 80%;
.Formulaire_de_connexion { .Formulaire_de_connexion {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin-top: 5%; justify-content: space-between;
/*background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); .one {
backdrop-filter: blur(3px); display: flex;
-webkit-backdrop-filter: blur(15px);*/
.texte_côté {
display:flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; width: 24%;
height: 100%;
.texte_côté {
display: flex;
flex-direction: column;
justify-content: space-around;
margin-left: 80px;
height: 85%;
}
}
.one-2 {
display: flex;
flex-direction: column;
width: 60%;
.texte_côté {
display: flex;
flex-direction: column;
justify-content: space-around;
margin-left: 150px;
height: 100%;
}
} }
.two {
display: flex;
flex-direction: column;
width: 46%;
}
.two-2 {
display: flex;
flex-direction: column;
width: 46%;
}
.three {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 316px;
width: 29%;
font-size: 23px;
bottom: auto;
.button_submit {
display: flex;
background-color: grey;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(30px);
color: rgb(255, 255, 255);
cursor: pointer;
font-size: 25px;
border-radius: 15px;
width: 308px;
text-decoration: none;
&:hover {
box-shadow: 0, 5px, 35px, 0 rgba(0, 0, 0, 1);
color: white;
background-color: rgba(114, 114, 114, 0.371);
}
&:active {
background-color: rgba(68, 68, 68, 0.972);
}
}
}
input { input {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 10px;
} }
.button_submit { .button_submit {
display: flex; display: flex;
margin-top: 150%;
margin-bottom: 2%; margin-bottom: 2%;
padding-left: 10px; padding-left: 10px;
.bouton_réini{ .bouton_réini {
background-color: rgb(190, 189, 189); background-color: rgb(190, 189, 189);
border-radius: 5px; border-radius: 5px;
border: 1px solid black; border: 1px solid black;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
cursor: pointer; cursor: pointer;
} }
} }
} }
} }
} }
.texte { .texte {
align-self: center; align-self: center;
@ -215,7 +263,7 @@ body {
} }
.texte_zone { .texte_zone {
width: 600px; width: 599px;
height: 50px; height: 50px;
background-color: transparent; background-color: transparent;
border-radius: 5px; border-radius: 5px;
@ -235,7 +283,7 @@ body {
height: 30px; height: 30px;
margin-top: 5%; margin-top: 5%;
.bouton_val{ .bouton_val {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -259,7 +307,7 @@ body {
} }
} }
.bouton_ann{ .bouton_ann {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -276,7 +324,7 @@ body {
color: white; color: white;
background-color: rgba(114, 114, 114, 0.371); background-color: rgba(114, 114, 114, 0.371);
} }
&:active { &:active {
background-color: rgba(68, 68, 68, 0.972); background-color: rgba(68, 68, 68, 0.972);
} }
@ -284,7 +332,7 @@ body {
} }
} }
.Titre_Formulaire_Rech{ .Titre_Formulaire_Rech {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 10px 10px 10px 0px; margin: 10px 10px 10px 0px;
@ -298,11 +346,6 @@ body {
.Titre { .Titre {
display: flex; display: flex;
/*background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);*/
margin: 10px; margin: 10px;
font-size: 70px; font-size: 70px;
font-weight: bold; font-weight: bold;
@ -310,11 +353,6 @@ body {
.Sous-titre { .Sous-titre {
display: flex; display: flex;
/*background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);*/
margin: 10px; margin: 10px;
font-size: 40px; font-size: 40px;
font-weight: bold; font-weight: bold;
@ -323,14 +361,7 @@ body {
.rechLogo { .rechLogo {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-basis: 100%; height: 50%;
/*background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);*/
//margin: 10px;
//padding: 10px;
align-items: center; align-items: center;
margin-top: 5%; margin-top: 5%;
@ -342,7 +373,6 @@ body {
height: 40px; height: 40px;
max-width: 350px; max-width: 350px;
width: 100%; width: 100%;
//margin: 30px 30px;
border-radius: 25px; border-radius: 25px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
@ -376,17 +406,69 @@ body {
} }
} }
} }
.bouton_submit {
display: flex;
flex-direction: row;
justify-content: space-around;
align-self: center;
width: 600px;
height: 30px;
margin-top: 5%;
.bouton_val {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 150px;
height: 40px;
font-size: 20px;
text-decoration: none;
color: white;
background-color: grey;
border-radius: 15px;
border: 0;
&:hover {
color: white;
background-color: rgba(114, 114, 114, 0.371);
}
&:active {
background-color: rgba(68, 68, 68, 0.972);
}
}
.bouton_ann {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 150px;
height: 40px;
font-size: 20px;
text-decoration: none;
color: white;
background-color: grey;
border-radius: 15px;
&:hover {
color: white;
background-color: rgba(114, 114, 114, 0.371);
}
&:active {
background-color: rgba(68, 68, 68, 0.972);
}
}
}
} }
.formulaire { .formulaire {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-basis: 100%; flex-basis: 100%;
/*background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);*/
.bouton_personnes { .bouton_personnes {
display: flex; display: flex;
@ -394,10 +476,7 @@ body {
justify-content: space-between; justify-content: space-between;
width: 350px; width: 350px;
margin: 20px 0 0 0; margin: 20px 0 0 0;
/*background: rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);*/
} }
.bouton_submit { .bouton_submit {
@ -406,7 +485,7 @@ body {
justify-content: space-between; justify-content: space-between;
padding: 30px 0 0 0; padding: 30px 0 0 0;
.bouton_sup{ .bouton_sup {
display: flex; display: flex;
background-color: grey; background-color: grey;
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
@ -418,36 +497,13 @@ body {
width: 30%; width: 30%;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
&:hover {
box-shadow: 0, 5px, 35px, 0 rgba(0, 0, 0, 1);
color: white;
background-color: rgba(114, 114, 114, 0.371);
}
&:active {
background-color: rgba(68, 68, 68, 0.972);
}
}
.bouton_ann{
display: flex;
background-color: grey;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(30px);
color: rgb(255, 255, 255);
cursor: pointer;
font-size: 15px;
border-radius: 15px;
width: 30%;
align-items: center;
&:hover { &:hover {
box-shadow: 0, 5px, 35px, 0 rgba(0, 0, 0, 1); box-shadow: 0, 5px, 35px, 0 rgba(0, 0, 0, 1);
color: white; color: white;
background-color: rgba(114, 114, 114, 0.371); background-color: rgba(114, 114, 114, 0.371);
} }
&:active { &:active {
background-color: rgba(68, 68, 68, 0.972); background-color: rgba(68, 68, 68, 0.972);
} }
@ -477,7 +533,7 @@ body {
color: white; color: white;
background-color: rgba(114, 114, 114, 0.371); background-color: rgba(114, 114, 114, 0.371);
} }
&:active { &:active {
background-color: rgba(68, 68, 68, 0.972); background-color: rgba(68, 68, 68, 0.972);
} }
@ -500,7 +556,7 @@ body {
color: white; color: white;
background-color: rgba(114, 114, 114, 0.371); background-color: rgba(114, 114, 114, 0.371);
} }
&:active { &:active {
background-color: rgba(68, 68, 68, 0.972); background-color: rgba(68, 68, 68, 0.972);
} }

Loading…
Cancel
Save