mise en forme du fomulaire avec données bdd

server-api/api.js

@@ -213,4 +213,40 @@ app.get('/Contact/AllWithCustomerName', (req, res) => {
         console.log(result);
         res.send(result);
     });
-});
+});
+
+app.get('/Entreprise/All', (req, res) => {
+    let sql = 'SELECT * FROM customers ORDER BY name';
+    db.query(sql, (err, result) => {
+        if (err) throw err;
+        console.log(result);
+        res.send(result);
+    });
+});
+
+app.get('/Contact/Exist/:login', (req, res) => {
+    
+    const login = req.params.login;
+    let sql = 'SELECT idContact FROM contact WHERE login = ?';
+
+    db.query(sql, [login], (err, result) => {
+        if (err) throw err;
+
+        console.log(result);
+        res.send(result);
+    });
+});
+
+app.post('/Contact/Add', (req, res) => {
+    
+    let form = req.body;
+
+    console.log(form);
+
+    const sql = `INSERT INTO contact(name, firstname, mail, phone, idUser, idCustomer) VALUES ('${form.name}', '${form.firstname}', '${form.mail}',  '${form.phone}' , '${form.idrole}', '${form.idUser}', '${form.idCustomer}' )`;
+    db.query(sql , (err, result) => { 
+        if (err) throw err;
+        console.log(result);
+        res.send('Post added...' + result.insertId);
+    });
+});

src/App.js

@@ -13,6 +13,7 @@ import Calendrier from './pages/Calendrier';
 import Repertoire from './pages/Repertoire';
 import Parametres from './pages/Parametres';
 import Chargement from './pages/Chargement';
+import AddContact from './components/Contact/AddContact'
 import { Component } from 'fullcalendar';
 import RestartPassword from './pages/RestartPassword';
 
@@ -38,6 +39,7 @@ const App = () => {
         <Route path="/Repertoire" element={<Repertoire />} />
         <Route path="/Parametres" element={<Parametres />} />
         <Route path="/Chargement" element={<Chargement />} />
+        <Route path="/Repertoire/add" element={<AddContact />} />
         </Routes>
       </BrowserRouter>
     );

src/components/Contact/AddContact.js

@@ -1,40 +1,93 @@
-import React, {useState} from 'react'
+import React, { useState, useEffect } from 'react';
-import {useNavigate} from 'react-router-dom';
+import axios from 'axios'
+import NavigationDashboard from '../NavigationDashboard.js';
+import CryptoJS from 'crypto-js';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import { NavLink } from 'react-router-dom';
+import { useNavigate } from "react-router-dom";
+import { Button } from '@mui/material';
 // HERE ABOVE useHistory IS REPLACED WITH useNavigate 
 
+const api = axios.create({
+    baseURL: 'http://localhost:8080'
+  })
+
 function AddContact(props) {
+
+    const [loginError, setLoginError] = useState(false);    
+    const [entreprises, setEntreprises] = useState([]);
+    const [selectedIdEntreprise, setSelectedIdEntreprise] = useState(1);
     
     const navigate=useNavigate();
-    const [User, setUser] = useState({name:"", email:""});
     
-    let add = (e) => {
+    useEffect(() =>{
-        e.preventDefault();
+        api.get('/Entreprise/All').then((response) => {
-        if(User.name === "" || User.email === ""){
+            setEntreprises(response.data);
-            alert("All fields are mandatory!!!");
+        });
-            return
+    }, []);
-        }
+
-        // THIS IS USED TO SHOW THE LIST DATA ON THE APP.JS FILE 
+    function handleChangeEntreprise(event){
-        props.addContactHandler(User);
+        setSelectedIdEntreprise(event.target.value);
-        // THIS IS USED FOR WHEN THE ADD BUTTON IS PRESSED THE INPUT FILED AGAIN GETS EMPTY
+    };
-        setUser({name:"", email:""});
+
-        //console.log(props);
+    function checkAdd(event){
-        navigate('/');
+        
-    }
+        event.preventDefault();
+
+        const formData = new FormData(event.currentTarget);
+        const values = Object.fromEntries(formData.entries());
+        console.log(values.name);
+        api.get('/Contact/Exist/'+ values.login).then((response) => {
+            const login = response.data;
+            if (login.length > 0){
+                setLoginError(true);
+            }
+            else {
+                setLoginError(false);
+
+                api.post('/Contact/Add', values).then (function(response) {
+                    console.log(response.data);
+                });
+
+                navigate("/Repertoire");
+            }
+        });
+    };
     
     return (
-        <div className='ui main'>
+        <div className='addContactPage'>
-            <h2>Add Contact</h2>
+            <h2>Ajouter un nouveau contact</h2>
-            <form className='ui form' onSubmit={add}>
+            <div className="Formulaire">
-                <div className='field'>
+                    <form className="form" onSubmit={checkAdd}>
-                    <label>Name</label>
+                        <table className="Formulaire_de_connexion">
-                    <input type="text" name="Name" placeholder='Name' value={User.name} onChange={e => setUser({...User, name: e.target.value})}/>
+                            <tr>
-                </div>
+                                <div className="texte_côté">
-                <div className='field'>
+                                    <p>Nom :</p>
-                    <label>Email</label>
+                                    <p>Prénom :</p>
-                    <input type="text" name="Email" placeholder='Email' value={User.email} onChange={e => setUser({...User, email: e.target.value})}/>
+                                    <p>Téléphone :</p>
+                                    <p>Email :</p>
+                                    <p>Entreprise :</p>
+                                </div>
+                            </tr>
+                            <tr>
+                                <input id="nom" name='name' className="texte_zone" type="text" placeholder="Nom..." required/>
+                                <input id="prenom" name='firstname' className="texte_zone" type="text" placeholder="Prénom..." required/>
+                                <input id="phone" name='phone' className="texte_zone" type="tel" 
+                                    placeholder="Téléphone..." pattern="[0-9]{10}" required/>
+                                <input id="email" name='mail' className="texte_zone" type="email" placeholder="Email..." required/>
+                                <Select name='idcustomer' value={selectedIdEntreprise} onChange={handleChangeEntreprise}>
+                                    {entreprises.map(entreprise => (<MenuItem value={entreprise.idCustomer}>{entreprise.name}</MenuItem>))}
+                                </Select>
+                            </tr>
+                        </table>
+                        <p>{loginError === true?"L'identifiant existe déja":''}</p>
+                        <div className="bouton_submit">
+                            <button className="bouton_val" type="submit">Valider</button>
+                            <NavLink className="bouton_ann" to="/Repertoire">Retour</NavLink>
+                        </div>
+                    </form>
                 </div>
-                <button className='ui secondary button'>Add</button>
-            </form>
         </div>
     )
 }

src/pages/Repertoire.js

@@ -4,7 +4,8 @@ import axios from 'axios';
 import user from '../images/user.jpg';
 import { TableContainer, Table, TableHead, TableBody, TableRow, TableCell } from '@mui/material';
 import { Paper } from '@mui/material';
-
+import { NavLink } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 const api = axios.create({
     baseURL: 'http://localhost:8080'
@@ -12,7 +13,7 @@ const api = axios.create({
 
 function Repertoire() {
 
-    const [theme, setTheme] = useState("light");    
+    const [theme, setTheme] = useState("light");
     if (localStorage.getItem('theme') && localStorage.getItem("theme") !== '' && localStorage.getItem("theme") !== theme) {
         setTheme(localStorage.getItem("theme"))
     }
@@ -21,7 +22,7 @@ function Repertoire() {
     const [SearchTerm, setSearchTerm] = useState("");
     const [SearchResults, setSearchResults] = useState([]);
     const [customers, setCustomers] = useState([]);
-    
+
 
     useEffect(() => {
         api.get('/Contact/AllWithCustomerName').then((response) => {
@@ -62,7 +63,9 @@ function Repertoire() {
                                 <i class="uil uil-search search-icon"></i>
                             </span>
                         </div>
-                        <button onClick={ajouter()} className="boutonAddContact">Ajouter</button>
+                        <NavLink to="/Repertoire/add">
+                            <button className="boutonAddContact">Ajouter</button>
+                        </NavLink>
                     </span>
                     <TableContainer component={Paper} className="tabListContact">
                         <Table>
@@ -119,10 +122,44 @@ function Repertoire() {
     );
 };
 
-function ajouter() {
+function AddContact(props) {
-    console.log("ajouter");
+
+    const navigate = useNavigate();
+    const [User, setUser] = useState({ name: "", email: "" });
+
+    let add = (e) => {
+        e.preventDefault();
+        if (User.name === "" || User.email === "") {
+            alert("All fields are mandatory!!!");
+            return
+        }
+        // THIS IS USED TO SHOW THE LIST DATA ON THE APP.JS FILE 
+        props.addContactHandler(User);
+        // THIS IS USED FOR WHEN THE ADD BUTTON IS PRESSED THE INPUT FILED AGAIN GETS EMPTY
+        setUser({ name: "", email: "" });
+        //console.log(props);
+        navigate('/');
+    }
+        return (
+            <div className='ui main'>
+                <h2>Add Contact</h2>
+                <form className='ui form' onSubmit={add}>
+                    <div className='field'>
+                        <label>Name</label>
+                        <input type="text" name="Name" placeholder='Name' value={User.name} onChange={e => setUser({ ...User, name: e.target.value })} />
+                    </div>
+                    <div className='field'>
+                        <label>Email</label>
+                        <input type="text" name="Email" placeholder='Email' value={User.email} onChange={e => setUser({ ...User, email: e.target.value })} />
+                    </div>
+                    <button className='ui secondary button'>Add</button>
+                </form>
+            </div>
+        );
 };
 
+
+
 // function Repertoire() {
 
 //     // NOW WITH THE USE OF HOOKS WE WILL GET THE CONTACTS

src/styles/components/_repertoire.scss

@@ -177,6 +177,7 @@ body {
                         margin: 30px 30px;
                         border-radius: 25px;
                         box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+                        text-decoration-line: none;
                     }
 
                     .input_box {

src/styles/components/contact/_addContact.scss

@@ -0,0 +1,8 @@
+.addContactPage{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+
+    
+}

src/styles/index.scss

@@ -7,4 +7,5 @@
 @import "./components/calendrier";
 @import "./components/parametre";
 @import "./components/repertoire";
-@import "./components/chargement"
+@import "./components/chargement";
+@import "./components/contact/addContact";