From 6f0ed413fe70fe70077c1c24d310259fe5194ca6 Mon Sep 17 00:00:00 2001 From: Maxence Lanone Date: Thu, 17 Nov 2022 10:43:54 +0100 Subject: [PATCH] ajout liste contact dans page repertoire + ajout images svg light --- server-api/api.js | 11 ++ src/api/contacts.js | 6 - src/img/logo_calendrier_light.svg | 1 + src/img/logo_calendrier_vide_light.svg | 1 + src/img/logo_graph_light.svg | 1 + src/img/logo_graph_vide_light.svg | 1 + src/img/logo_group_light.svg | 1 + src/img/logo_group_vide_light.svg | 1 + src/img/logo_parametre_light.svg | 1 + src/img/logo_parametre_vide_light.svg | 1 + src/img/logo_personEntouré_light.svg | 1 + src/img/logo_person_light.svg | 1 + src/img/logo_person_vide_light.svg | 1 + src/img/logo_speed_light.svg | 1 + src/img/logo_speed_vide_light.svg | 1 + src/pages/Repertoire.js | 244 ++++++++++++++----------- 16 files changed, 161 insertions(+), 113 deletions(-) delete mode 100644 src/api/contacts.js create mode 100644 src/img/logo_calendrier_light.svg create mode 100644 src/img/logo_calendrier_vide_light.svg create mode 100644 src/img/logo_graph_light.svg create mode 100644 src/img/logo_graph_vide_light.svg create mode 100644 src/img/logo_group_light.svg create mode 100644 src/img/logo_group_vide_light.svg create mode 100644 src/img/logo_parametre_light.svg create mode 100644 src/img/logo_parametre_vide_light.svg create mode 100644 src/img/logo_personEntouré_light.svg create mode 100644 src/img/logo_person_light.svg create mode 100644 src/img/logo_person_vide_light.svg create mode 100644 src/img/logo_speed_light.svg create mode 100644 src/img/logo_speed_vide_light.svg diff --git a/server-api/api.js b/server-api/api.js index e9eb6ba..149ebdb 100644 --- a/server-api/api.js +++ b/server-api/api.js @@ -164,4 +164,15 @@ app.post('/User/Update/:id', (req, res) => { console.log(result); res.send('Post added...' + result.insertId); }); +}); + +//Api pour les contacts de la page repertoire + +app.get('/Contact/All', (req, res) => { + let sql = 'SELECT * FROM contacts ORDER BY idcontact'; + db.query(sql, (err, result) => { + if (err) throw err; + console.log(result); + res.send(result); + }); }); \ No newline at end of file diff --git a/src/api/contacts.js b/src/api/contacts.js deleted file mode 100644 index 571bdf0..0000000 --- a/src/api/contacts.js +++ /dev/null @@ -1,6 +0,0 @@ -import axios from 'axios'; - - -export default axios.create({ - baseURL:"http://localhost:3007/", -}); \ No newline at end of file diff --git a/src/img/logo_calendrier_light.svg b/src/img/logo_calendrier_light.svg new file mode 100644 index 0000000..dc57ec2 --- /dev/null +++ b/src/img/logo_calendrier_light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/img/logo_calendrier_vide_light.svg b/src/img/logo_calendrier_vide_light.svg new file mode 100644 index 0000000..ecc362c --- /dev/null +++ b/src/img/logo_calendrier_vide_light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/img/logo_graph_light.svg b/src/img/logo_graph_light.svg new file mode 100644 index 0000000..96eb267 --- /dev/null +++ b/src/img/logo_graph_light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/img/logo_graph_vide_light.svg b/src/img/logo_graph_vide_light.svg new file mode 100644 index 0000000..60c8a0c --- /dev/null +++ b/src/img/logo_graph_vide_light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/img/logo_group_light.svg b/src/img/logo_group_light.svg new file mode 100644 index 0000000..f0843a5 --- /dev/null +++ b/src/img/logo_group_light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/img/logo_group_vide_light.svg b/src/img/logo_group_vide_light.svg new file mode 100644 index 0000000..87c00b4 --- /dev/null +++ b/src/img/logo_group_vide_light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/img/logo_parametre_light.svg b/src/img/logo_parametre_light.svg new file mode 100644 index 0000000..5d63cba --- /dev/null +++ b/src/img/logo_parametre_light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/img/logo_parametre_vide_light.svg b/src/img/logo_parametre_vide_light.svg new file mode 100644 index 0000000..0b7e64e --- /dev/null +++ b/src/img/logo_parametre_vide_light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/img/logo_personEntouré_light.svg b/src/img/logo_personEntouré_light.svg new file mode 100644 index 0000000..15eaccc --- /dev/null +++ b/src/img/logo_personEntouré_light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/img/logo_person_light.svg b/src/img/logo_person_light.svg new file mode 100644 index 0000000..b0af0b5 --- /dev/null +++ b/src/img/logo_person_light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/img/logo_person_vide_light.svg b/src/img/logo_person_vide_light.svg new file mode 100644 index 0000000..88082df --- /dev/null +++ b/src/img/logo_person_vide_light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/img/logo_speed_light.svg b/src/img/logo_speed_light.svg new file mode 100644 index 0000000..68ba5a3 --- /dev/null +++ b/src/img/logo_speed_light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/img/logo_speed_vide_light.svg b/src/img/logo_speed_vide_light.svg new file mode 100644 index 0000000..55f0e56 --- /dev/null +++ b/src/img/logo_speed_vide_light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/Repertoire.js b/src/pages/Repertoire.js index e2c8155..fa9e4e1 100644 --- a/src/pages/Repertoire.js +++ b/src/pages/Repertoire.js @@ -9,133 +9,163 @@ import ContactDetail from '../components/Contact/ContactDetail'; import EditContact from '../components/Contact/EditContact'; import axios from 'axios'; 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({ 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) => { + useEffect(() => { + api.get('/Contact/All').then((response) => { setContacts(response.data); setSearchTerm(response.data[0].idcontact); }); }, []); - const handleClick = (event, idcontact) => { - setSearchTerm(idContact); - }; return ( -
-
-
- user -
-
-
{name}
-
{email}
+
+ + {/* Create a page to delete an user in the admin page*/} + +
+

Admin

+

Liste des utilisateurs

+
+
+ + + + +
+ + + + + Nom + Prénom + Identifiant + Téléphone + + + + {contacts.map((contact) => ( + handleClick(event, contact.idcontact)} + // selected={contact.idcontact === selectedIdcontact} + > + {contact.lastname} + {contact.firstname} + {contact.phone} + {contact.mail} + + ))} + +
+
- -
- -
-
); } -function Repertoire() { - - // // NOW WITH THE USE OF HOOKS WE WILL GET THE CONTACTS - // const LOCAL_STORAGE_KEY = "contacts" - // const [contacts, setContacts] = useState([]); - // const [SearchTerm, setSearchTerm] = useState(""); - // const [SearchResults, setSearchResults] = useState([]); - - // const addContactHandler = async (contact) => { - // const request = { - // id: uuid(), - // ...contact - // } - // const response = await api.post("/contacts", request) - // setContacts([...contacts, response.data]); - // } - - // // UPDATE CONTACT - // const updateContactHandler = async (contact) => { - // const response = await api.put(`/contacts/${contact.id}`, contact); - // const { id, name, email } = response.data; - // setContacts(contacts.map(contact => { - // return contact.id === id ? { ...response.data } : contact; - // })) - // } - - // // FOR DELETING THE ITEMS - // const removeContactHandler = async (id) => { - // await api.delete(`/contacts/${id}`); - // const newContactList = contacts.filter((contact) => { - // return contact.id !== id; - // }); - // setContacts(newContactList); - // } - - // // SEARCHING THE CONTACTS - // const searchHandler = (searchTerm) => { - // setSearchTerm(searchTerm); - // if (searchTerm !== "") { - // const newContactList = contacts.filter((contact) => { - // return Object.values(contact).join(" ").toLowerCase().includes(searchTerm.toLowerCase()); - // }); - // setSearchResults(newContactList); - // } else { - // setSearchResults(contacts); - // } - // } - - // useEffect(() => { - // const retrieveContacts = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)); - // if (retrieveContacts) setContacts(retrieveContacts); - // } - // , []); - - // useEffect(() => { - // localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(contacts)); - // } - // , [contacts]); - - // return ( - //
- // - //
- // - // } - // render={(props)=>} - // /> - // } - // //render={(props)=>} - // /> - // } - // /> - // } /> - // - // {/* */} - // {/*Here in contact list props are used to get the values in the above contact array*/} - // {/* */} - // - //
- // ) - - -}; +// function Repertoire() { + +// // NOW WITH THE USE OF HOOKS WE WILL GET THE CONTACTS +// const LOCAL_STORAGE_KEY = "contacts" +// const [contacts, setContacts] = useState([]); +// const [SearchTerm, setSearchTerm] = useState(""); +// const [SearchResults, setSearchResults] = useState([]); + +// const addContactHandler = async (contact) => { +// const request = { +// id: uuid(), +// ...contact +// } +// const response = await api.post("/contacts", request) +// setContacts([...contacts, response.data]); +// } + +// // UPDATE CONTACT +// const updateContactHandler = async (contact) => { +// const response = await api.put(`/contacts/${contact.id}`, contact); +// const { id, name, email } = response.data; +// setContacts(contacts.map(contact => { +// return contact.id === id ? { ...response.data } : contact; +// })) +// } + +// // FOR DELETING THE ITEMS +// const removeContactHandler = async (id) => { +// await api.delete(`/contacts/${id}`); +// const newContactList = contacts.filter((contact) => { +// return contact.id !== id; +// }); +// setContacts(newContactList); +// } + +// // SEARCHING THE CONTACTS +// const searchHandler = (searchTerm) => { +// setSearchTerm(searchTerm); +// if (searchTerm !== "") { +// const newContactList = contacts.filter((contact) => { +// return Object.values(contact).join(" ").toLowerCase().includes(searchTerm.toLowerCase()); +// }); +// setSearchResults(newContactList); +// } else { +// setSearchResults(contacts); +// } +// } + +// useEffect(() => { +// const retrieveContacts = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)); +// if (retrieveContacts) setContacts(retrieveContacts); +// } +// , []); + +// useEffect(() => { +// localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(contacts)); +// } +// , [contacts]); + +// return ( +//
+// +//
+// +// } +// render={(props)=>} +// /> +// } +// //render={(props)=>} +// /> +// } +// /> +// } /> +// +// {/* */} +// {/*Here in contact list props are used to get the values in the above contact array*/} +// {/* */} +// +//
+// ) + + +// }; export default Repertoire; \ No newline at end of file