diff --git a/server-api/api.js b/server-api/api.js index a06ba61..5c9f1be 100644 --- a/server-api/api.js +++ b/server-api/api.js @@ -428,6 +428,23 @@ app.get('/Contact/:iduser', (req, res) => { }); }); +app.delete('/Contact/Delete/:id', (req, res) => { + + const id = req.params.id; + + const sql = `DELETE FROM contacts WHERE (idcontact = ?)`; + db.query + (sql, [ + id + ], (err, result) => { + if (err) throw err; + console.log(result); + res.send('Post delete...'); + }); +}); + +//Api pour les events de la page agenda + app.post('/Event/Add', (req, res) => { let form = req.body; diff --git a/src/pages/Repertoire.js b/src/pages/Repertoire.js index 6aa5662..6bbc0f1 100644 --- a/src/pages/Repertoire.js +++ b/src/pages/Repertoire.js @@ -40,6 +40,14 @@ function Repertoire() { }); }, []); + function handleDeleteClick(contact) { + api.delete('/Contact/Delete/' + contact.idcontact).then((response) => { + const newContacts = contacts.filter((c) => c.idcontact !== contact.idcontact); + setContacts(newContacts); + }); + + } + return (
@@ -73,6 +81,7 @@ function Repertoire() { Nom Prénom Entreprise + Supprimer @@ -82,6 +91,7 @@ function Repertoire() { {contact.lastname} {contact.firstname} {contact.name} + ))} @@ -121,6 +131,23 @@ function Repertoire() { ); }; +function SupprimerContact(props) { + + const navigate = useNavigate(); + const deleteContact = (id) => { + api.delete('/Contact/' + id).then(() => { + props.getContactList(); + }); + }; + + return ( +
+

Supprimer Contact

+ +
+ ); +} + function AddContact(props) { const navigate = useNavigate(); diff --git a/src/styles/components/_repertoire.scss b/src/styles/components/_repertoire.scss index ca03db9..099b831 100644 --- a/src/styles/components/_repertoire.scss +++ b/src/styles/components/_repertoire.scss @@ -268,6 +268,41 @@ body { object-fit: cover; border: 1px solid black; } + .boutonSuppContact { + color: #ff3838; + border-color: #ff3838; + background-color: transparent; + border: 1px solid #ff3838; + border-radius: .375rem; + padding: .375rem .75rem; + gap: 1rem; + font-size: 1rem; + line-height: 1.5; + transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; + + &:hover { + color: #fff; + background-color: #ff3838; + border-color: #ff3838; + } + &:focus { + color: #fff; + background-color: #ff3838; + border-color: #ff3838; + box-shadow: 0 0 0 0.2rem rgba(56, 116, 255, 0.5); + } + &:active { + color: #fff; + background-color: #ff3838; + border-color: #ff3838; + box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0); + } + &:disabled { + color: #ff3838; + background-color: transparent; + border-color: #ff3838; + } + } } } }