|
|
|
@ -9,133 +9,163 @@ import ContactDetail from '../components/Contact/ContactDetail';
|
|
|
|
import EditContact from '../components/Contact/EditContact';
|
|
|
|
import EditContact from '../components/Contact/EditContact';
|
|
|
|
import axios from 'axios';
|
|
|
|
import axios from 'axios';
|
|
|
|
import user from '../images/user.jpg';
|
|
|
|
import user from '../images/user.jpg';
|
|
|
|
import {Link,useLocation} from'react-router-dom';
|
|
|
|
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({
|
|
|
|
const api = axios.create({
|
|
|
|
baseURL: 'http://localhost:8080'
|
|
|
|
baseURL: 'http://localhost:8080'
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
function Admin_list() {
|
|
|
|
function Repertoire() {
|
|
|
|
|
|
|
|
|
|
|
|
const [contact, setContacts] = useState([]);
|
|
|
|
const [contacts, setContacts] = useState([]);
|
|
|
|
const [SearchTerm, setSearchTerm] = useState("");
|
|
|
|
const [SearchTerm, setSearchTerm] = useState("");
|
|
|
|
const [SearchResults, setSearchResults] = useState([]);
|
|
|
|
const [SearchResults, setSearchResults] = useState([]);
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() =>{
|
|
|
|
useEffect(() => {
|
|
|
|
api.get('/Contact/All/').then((response) => {
|
|
|
|
api.get('/Contact/All').then((response) => {
|
|
|
|
setContacts(response.data);
|
|
|
|
setContacts(response.data);
|
|
|
|
setSearchTerm(response.data[0].idcontact);
|
|
|
|
setSearchTerm(response.data[0].idcontact);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}, []);
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
|
|
const handleClick = (event, idcontact) => {
|
|
|
|
|
|
|
|
setSearchTerm(idContact);
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<div className='main'>
|
|
|
|
<div className="page_admin">
|
|
|
|
<div className='ui center aligned card'>
|
|
|
|
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>
|
|
|
|
<div className='image'>
|
|
|
|
{/* Create a page to delete an user in the admin page*/}
|
|
|
|
<img src={user} alt='user'></img>
|
|
|
|
<NavigationDashboard />
|
|
|
|
</div>
|
|
|
|
<div className="Titre_Formulaire_Rech">
|
|
|
|
<div className='content'>
|
|
|
|
<p className="Titre">Admin</p>
|
|
|
|
<div className='header'>{name}</div>
|
|
|
|
<p className="Sous-titre">Liste des utilisateurs</p>
|
|
|
|
<div className='description'>{email}</div>
|
|
|
|
<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>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<Link to="/">
|
|
|
|
|
|
|
|
<div className='center div'>
|
|
|
|
|
|
|
|
<button className='ui red button center aligned '>Contact List</button>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</Link>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function Repertoire() {
|
|
|
|
// function Repertoire() {
|
|
|
|
|
|
|
|
|
|
|
|
// // NOW WITH THE USE OF HOOKS WE WILL GET THE CONTACTS
|
|
|
|
// // NOW WITH THE USE OF HOOKS WE WILL GET THE CONTACTS
|
|
|
|
// const LOCAL_STORAGE_KEY = "contacts"
|
|
|
|
// const LOCAL_STORAGE_KEY = "contacts"
|
|
|
|
// const [contacts, setContacts] = useState([]);
|
|
|
|
// const [contacts, setContacts] = useState([]);
|
|
|
|
// const [SearchTerm, setSearchTerm] = useState("");
|
|
|
|
// const [SearchTerm, setSearchTerm] = useState("");
|
|
|
|
// const [SearchResults, setSearchResults] = useState([]);
|
|
|
|
// const [SearchResults, setSearchResults] = useState([]);
|
|
|
|
|
|
|
|
|
|
|
|
// const addContactHandler = async (contact) => {
|
|
|
|
// const addContactHandler = async (contact) => {
|
|
|
|
// const request = {
|
|
|
|
// const request = {
|
|
|
|
// id: uuid(),
|
|
|
|
// id: uuid(),
|
|
|
|
// ...contact
|
|
|
|
// ...contact
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// const response = await api.post("/contacts", request)
|
|
|
|
// const response = await api.post("/contacts", request)
|
|
|
|
// setContacts([...contacts, response.data]);
|
|
|
|
// setContacts([...contacts, response.data]);
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
// // UPDATE CONTACT
|
|
|
|
// // UPDATE CONTACT
|
|
|
|
// const updateContactHandler = async (contact) => {
|
|
|
|
// const updateContactHandler = async (contact) => {
|
|
|
|
// const response = await api.put(`/contacts/${contact.id}`, contact);
|
|
|
|
// const response = await api.put(`/contacts/${contact.id}`, contact);
|
|
|
|
// const { id, name, email } = response.data;
|
|
|
|
// const { id, name, email } = response.data;
|
|
|
|
// setContacts(contacts.map(contact => {
|
|
|
|
// setContacts(contacts.map(contact => {
|
|
|
|
// return contact.id === id ? { ...response.data } : contact;
|
|
|
|
// return contact.id === id ? { ...response.data } : contact;
|
|
|
|
// }))
|
|
|
|
// }))
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
// // FOR DELETING THE ITEMS
|
|
|
|
// // FOR DELETING THE ITEMS
|
|
|
|
// const removeContactHandler = async (id) => {
|
|
|
|
// const removeContactHandler = async (id) => {
|
|
|
|
// await api.delete(`/contacts/${id}`);
|
|
|
|
// await api.delete(`/contacts/${id}`);
|
|
|
|
// const newContactList = contacts.filter((contact) => {
|
|
|
|
// const newContactList = contacts.filter((contact) => {
|
|
|
|
// return contact.id !== id;
|
|
|
|
// return contact.id !== id;
|
|
|
|
// });
|
|
|
|
// });
|
|
|
|
// setContacts(newContactList);
|
|
|
|
// setContacts(newContactList);
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
// // SEARCHING THE CONTACTS
|
|
|
|
// // SEARCHING THE CONTACTS
|
|
|
|
// const searchHandler = (searchTerm) => {
|
|
|
|
// const searchHandler = (searchTerm) => {
|
|
|
|
// setSearchTerm(searchTerm);
|
|
|
|
// setSearchTerm(searchTerm);
|
|
|
|
// if (searchTerm !== "") {
|
|
|
|
// if (searchTerm !== "") {
|
|
|
|
// const newContactList = contacts.filter((contact) => {
|
|
|
|
// const newContactList = contacts.filter((contact) => {
|
|
|
|
// return Object.values(contact).join(" ").toLowerCase().includes(searchTerm.toLowerCase());
|
|
|
|
// return Object.values(contact).join(" ").toLowerCase().includes(searchTerm.toLowerCase());
|
|
|
|
// });
|
|
|
|
// });
|
|
|
|
// setSearchResults(newContactList);
|
|
|
|
// setSearchResults(newContactList);
|
|
|
|
// } else {
|
|
|
|
// } else {
|
|
|
|
// setSearchResults(contacts);
|
|
|
|
// setSearchResults(contacts);
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
// useEffect(() => {
|
|
|
|
// useEffect(() => {
|
|
|
|
// const retrieveContacts = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY));
|
|
|
|
// const retrieveContacts = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY));
|
|
|
|
// if (retrieveContacts) setContacts(retrieveContacts);
|
|
|
|
// if (retrieveContacts) setContacts(retrieveContacts);
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// , []);
|
|
|
|
// , []);
|
|
|
|
|
|
|
|
|
|
|
|
// useEffect(() => {
|
|
|
|
// useEffect(() => {
|
|
|
|
// localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(contacts));
|
|
|
|
// localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(contacts));
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// , [contacts]);
|
|
|
|
// , [contacts]);
|
|
|
|
|
|
|
|
|
|
|
|
// return (
|
|
|
|
// return (
|
|
|
|
// <div className="ui container">
|
|
|
|
// <div className="ui container">
|
|
|
|
// <Router>
|
|
|
|
// <Router>
|
|
|
|
// <Header />
|
|
|
|
// <Header />
|
|
|
|
// <Routes>
|
|
|
|
// <Routes>
|
|
|
|
// <Route path="/Repertoire/"
|
|
|
|
// <Route path="/Repertoire/"
|
|
|
|
// element={<ContactList contacts={SearchTerm.length < 1 ? contacts : SearchResults} getContactId={removeContactHandler} term={SearchTerm} searchKeyword={searchHandler} />}
|
|
|
|
// element={<ContactList contacts={SearchTerm.length < 1 ? contacts : SearchResults} getContactId={removeContactHandler} term={SearchTerm} searchKeyword={searchHandler} />}
|
|
|
|
// render={(props)=><ContactList contacts={contacts} getContactId={removeContactHandler} {...props} />}
|
|
|
|
// render={(props)=><ContactList contacts={contacts} getContactId={removeContactHandler} {...props} />}
|
|
|
|
// />
|
|
|
|
// />
|
|
|
|
// <Route path="/Repertoire/add"
|
|
|
|
// <Route path="/Repertoire/add"
|
|
|
|
// element={<AddContact addContactHandler={addContactHandler} />}
|
|
|
|
// element={<AddContact addContactHandler={addContactHandler} />}
|
|
|
|
// //render={(props)=><AddContact {...props} addContactHandler={addContactHandler}/>}
|
|
|
|
// //render={(props)=><AddContact {...props} addContactHandler={addContactHandler}/>}
|
|
|
|
// />
|
|
|
|
// />
|
|
|
|
// <Route path="Repertoire/edit"
|
|
|
|
// <Route path="Repertoire/edit"
|
|
|
|
// element={<EditContact updateContactHandler={updateContactHandler} />}
|
|
|
|
// element={<EditContact updateContactHandler={updateContactHandler} />}
|
|
|
|
// />
|
|
|
|
// />
|
|
|
|
// <Route path="/Repertoire/contact/:id" element={<ContactDetail />} />
|
|
|
|
// <Route path="/Repertoire/contact/:id" element={<ContactDetail />} />
|
|
|
|
// </Routes>
|
|
|
|
// </Routes>
|
|
|
|
// {/* <AddContact addContactHandler={addContactHandler}/> */}
|
|
|
|
// {/* <AddContact addContactHandler={addContactHandler}/> */}
|
|
|
|
// {/*Here in contact list props are used to get the values in the above contact array*/}
|
|
|
|
// {/*Here in contact list props are used to get the values in the above contact array*/}
|
|
|
|
// {/* <ContactList contacts={contacts} getContactId={removeContactHandler}/> */}
|
|
|
|
// {/* <ContactList contacts={contacts} getContactId={removeContactHandler}/> */}
|
|
|
|
// </Router>
|
|
|
|
// </Router>
|
|
|
|
// </div>
|
|
|
|
// </div>
|
|
|
|
// )
|
|
|
|
// )
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
|
|
export default Repertoire;
|
|
|
|
export default Repertoire;
|
