|
|
|
|
@ -11,47 +11,77 @@ import axios from 'axios';
|
|
|
|
|
import user from '../images/user.jpg';
|
|
|
|
|
import { Link, useLocation } from 'react-router-dom';
|
|
|
|
|
|
|
|
|
|
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() {
|
|
|
|
|
function Repertoire() {
|
|
|
|
|
|
|
|
|
|
const [contact, setContacts] = useState([]);
|
|
|
|
|
const [contacts, setContacts] = useState([]);
|
|
|
|
|
const [SearchTerm, setSearchTerm] = useState("");
|
|
|
|
|
const [SearchResults, setSearchResults] = useState([]);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
api.get('/Contact/All/').then((response) => {
|
|
|
|
|
api.get('/Contact/All').then((response) => {
|
|
|
|
|
setContacts(response.data);
|
|
|
|
|
setSearchTerm(response.data[0].idcontact);
|
|
|
|
|
});
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
const handleClick = (event, idcontact) => {
|
|
|
|
|
setSearchTerm(idContact);
|
|
|
|
|
};
|
|
|
|
|
return (
|
|
|
|
|
<div className='main'>
|
|
|
|
|
<div className='ui center aligned card'>
|
|
|
|
|
<div className='image'>
|
|
|
|
|
<img src={user} alt='user'></img>
|
|
|
|
|
</div>
|
|
|
|
|
<div className='content'>
|
|
|
|
|
<div className='header'>{name}</div>
|
|
|
|
|
<div className='description'>{email}</div>
|
|
|
|
|
<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*/}
|
|
|
|
|
<NavigationDashboard />
|
|
|
|
|
<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>
|
|
|
|
|
<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>
|
|
|
|
|
</TableRow>
|
|
|
|
|
</TableHead>
|
|
|
|
|
<TableBody >
|
|
|
|
|
{contacts.map((contact) => (
|
|
|
|
|
<TableRow
|
|
|
|
|
key={contact.idcontact}
|
|
|
|
|
hover
|
|
|
|
|
// onClick={(event) => handleClick(event, contact.idcontact)}
|
|
|
|
|
// selected={contact.idcontact === selectedIdcontact}
|
|
|
|
|
>
|
|
|
|
|
<TableCell align="left">{contact.lastname}</TableCell>
|
|
|
|
|
<TableCell align="center">{contact.firstname}</TableCell>
|
|
|
|
|
<TableCell align="center">{contact.phone}</TableCell>
|
|
|
|
|
<TableCell align="center">{contact.mail}</TableCell>
|
|
|
|
|
</TableRow>
|
|
|
|
|
))}
|
|
|
|
|
</TableBody>
|
|
|
|
|
</Table>
|
|
|
|
|
</TableContainer>
|
|
|
|
|
</div>
|
|
|
|
|
<Link to="/">
|
|
|
|
|
<div className='center div'>
|
|
|
|
|
<button className='ui red button center aligned '>Contact List</button>
|
|
|
|
|
</div>
|
|
|
|
|
</Link>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function Repertoire() {
|
|
|
|
|
// function Repertoire() {
|
|
|
|
|
|
|
|
|
|
// // NOW WITH THE USE OF HOOKS WE WILL GET THE CONTACTS
|
|
|
|
|
// const LOCAL_STORAGE_KEY = "contacts"
|
|
|
|
|
@ -136,6 +166,6 @@ function Repertoire() {
|
|
|
|
|
// )
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
export default Repertoire;
|
