Merge remote-tracking branch 'refs/remotes/origin/master'

server-api/api.js

@@ -319,6 +319,18 @@ app.put('/User/Update/:id', (req, res) => {
     });
 });
 
+app.put('/User/Update/Image/:id', (req, res) => {
+    const id = req.params.id;
+    let form = req.body;
+
+    const sql = `UPDATE users SET image = ? WHERE (iduser = ?)`;
+    db.query(sql, [form.image, id], (err, result) => {
+        if (err) throw err;
+        console.log(result);
+        res.send('Post image update...');
+    });
+});
+
 app.put('/User/Update/Password/:id', (req, res) => {
 
     const id = req.params.id;
@@ -416,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;

src/pages/Compte.js

@@ -5,6 +5,7 @@ import NavigationDashboard from '../components/NavigationDashboard';
 import img1 from '../img/logo_personEntouré.svg';
 import axios from 'axios'
 import Session from 'react-session-api';
+import { render } from '@testing-library/react';
 
 const api = axios.create({
     baseURL: 'http://localhost:8080'
@@ -15,7 +16,12 @@ function Compte() {
     const nomInputRef = useRef();
     const prenomInputRef = useRef();
     const [modification, setModification] = useState(false);
-    const convert2base64 = e => {
+    const [imageBase64, setImageBase64] = useState("");
+    const [selectedFile, setSelectedFile] = useState([]);
+    const [fileBase64String, setFileBase64String] = useState("");
+
+
+    const convert2base64 = (e) => {
         const file = e.target.files[0];
         const reader = new FileReader();
 
@@ -24,17 +30,43 @@ function Compte() {
         }
 
         reader.readAsDataURL(file);
+
+        encodeFileBase64(file);
+
+        setSelectedFile(e.target.files);
+        console.log(e.target.files[0])
+        console.log(e.target.files[0].name);
+        console.log(e.target.files[0].size);
+        console.log(e.target.files[0].type);
     };
 
+    const encodeFileBase64 = (file) => {
+        var reader = new FileReader();
+        if(file) {
+            reader.readAsDataURL(file);
+            reader.onload = () => {
+                var Base64 = reader.result;
+                console.log("Base64 : " + Base64);
+                setFileBase64String(Base64);
+            };
+            reader.onerror = (error) => {
+                console.log('Error: ', error);
+            };
+        }
+    }
+
+    // encodeFileBase64(selectedFile[0]);
+
+
+
     if (localStorage.getItem('theme') && localStorage.getItem("theme") !== '' && localStorage.getItem("theme") !== theme) {
         setTheme(localStorage.getItem("theme"))
     }
 
-    const [file, setFile] = useState();
+    /*const [file, setFile] = useState();
     function handleChange(e) {
-        console.log(e.target.files);
         setFile(URL.createObjectURL(e.target.files[0]));
-    }
+    }*/
 
     const modificationHandler = () => {
         setModification((modification) => !modification)
@@ -46,6 +78,8 @@ function Compte() {
     const [phone, setPhone] = useState("");
     const [mail, setMail] = useState("");
     const [image, setImage] = useState("");
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
 
     useEffect(() => {
         const apiString = '/User/Id/' + Session.get("idUser");
@@ -58,17 +92,26 @@ function Compte() {
         });
     }, []);
 
-    const handleImageAdding = (e) => {
-        const bdd = { image };
-
-        fetch('http://localhost:8080', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(bdd)
-        })
-            .then(() => {
-                console.log('Image ajoutée');
-            })
+    const handleAddingImage = e => {
+        console.log("handleAddingImage");
+        e.preventDefault();
+        setLoading(true);
+        setError(null);
+        
+        const formData = new FormData(convert2base64(e));
+        formData.append('image', image);
+
+        console.log("formData : " + formData);
+
+        api.put('User/Update/Image/'+Session.get("idUser"), formData).then(response => {
+            console.log(response.data)
+        // Traitez la réponse du serveur
+        setLoading(false);
+        }).catch(error => {
+        // Traitez l'erreur
+        setLoading(false);
+        setError(error);
+        });
     }
 
     function handleChangeLastName(event) {
@@ -112,8 +155,8 @@ function Compte() {
                         <div className="name_picture">
                             <div className="picture">
                                 <div id="display_image">
-                                    <img src={img1} srcSet={image} id="img" className="img" />
-                                    <div> <input id="fileUpload" type="file" onChange={e => { convert2base64(e); handleChange(e); handleImageAdding() }}></input></div>
+                                    <img src={image === "" ? img1 : image} id="img" className="img" />
+                                    <div> <input id="fileUpload" type="file" onChange={handleAddingImage}></input></div>
                                 </div>
                                 <label className="fileUpload" htmlFor="fileUpload">Ajoutez votre photo</label>
                             </div>

src/pages/Repertoire.js

@@ -40,12 +40,22 @@ function Repertoire() {
         });
     }, []);
 
+    
+
     function onClickDetail() {
         return <NavLink to="/Repertoire/add">
             
         </NavLink>
     }
 
+    function handleDeleteClick(contact) {
+        api.delete('/Contact/Delete/' + contact.idcontact).then((response) => {
+            const newContacts = contacts.filter((c) => c.idcontact !== contact.idcontact);
+            setContacts(newContacts);
+        });
+    
+      }
+
     return (
         <body className={theme}>
             <div className="page_repertoire">
@@ -79,6 +89,7 @@ function Repertoire() {
                                         <TableCell>Nom</TableCell>
                                         <TableCell>Prénom</TableCell>
                                         <TableCell>Entreprise</TableCell>
+                                        <TableCell>Supprimer</TableCell>
                                     </TableRow>
                                 </TableHead>
                                 <TableBody>
@@ -92,7 +103,8 @@ function Repertoire() {
                                                     <TableCell>{contact.name}</TableCell>
                                                
                                                 
-                                            </TableRow>
+                                                <TableCell><button className="boutonSuppContact" onClick={() => handleDeleteClick(contact)}>Supprimer</button></TableCell>
+                                        </TableRow>
                                         ))}
                                     
                                 </TableBody>
@@ -132,6 +144,23 @@ function Repertoire() {
     );
 };
 
+function SupprimerContact(props) {
+
+    const navigate = useNavigate();
+    const deleteContact = (id) => {
+        api.delete('/Contact/' + id).then(() => {
+            props.getContactList();
+        });
+    };
+
+    return (
+        <div className="ui main">
+            <h2>Supprimer Contact</h2>
+            <button className="ui button blue" onClick={() => deleteContact(props.id)}>Supprimer</button>
+        </div>
+    );
+}
+
 function AddContact(props) {
 
     const navigate = useNavigate();

src/styles/components/_compte.scss

@@ -45,6 +45,12 @@ body {
     }
 
 
+    .bas_de_page {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        width: auto;
+        height: 86%;
     .bas_de_page {
         display: flex;
         flex-direction: row;
@@ -443,6 +449,7 @@ body {
     }
 }
 
+
 #fileUpload[type="file"] {
     display: none;
 }

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;
+                    }
+                }
             }
         }
     }