From 49275fbe90c852a1b35156d7a87218916462456b Mon Sep 17 00:00:00 2001 From: Maxence Lanone Date: Sun, 27 Nov 2022 15:10:20 +0100 Subject: [PATCH] =?UTF-8?q?mise=20en=20forme=20du=20fomulaire=20avec=20don?= =?UTF-8?q?n=C3=A9es=20bdd?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- server-api/api.js | 38 +++++- src/App.js | 2 + src/components/Contact/AddContact.js | 109 +++++++++++++----- src/pages/Repertoire.js | 49 +++++++- src/styles/components/_repertoire.scss | 1 + .../components/contact/_addContact.scss | 8 ++ src/styles/index.scss | 3 +- 7 files changed, 174 insertions(+), 36 deletions(-) create mode 100644 src/styles/components/contact/_addContact.scss diff --git a/server-api/api.js b/server-api/api.js index c95ec21..8117453 100644 --- a/server-api/api.js +++ b/server-api/api.js @@ -213,4 +213,40 @@ app.get('/Contact/AllWithCustomerName', (req, res) => { console.log(result); res.send(result); }); -}); \ No newline at end of file +}); + +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); + }); +}); diff --git a/src/App.js b/src/App.js index f2910b2..552dbb7 100644 --- a/src/App.js +++ b/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 = () => { } /> } /> } /> + } /> ); diff --git a/src/components/Contact/AddContact.js b/src/components/Contact/AddContact.js index c9c0c60..26a6e71 100644 --- a/src/components/Contact/AddContact.js +++ b/src/components/Contact/AddContact.js @@ -1,40 +1,93 @@ -import React, {useState} from 'react' -import {useNavigate} from 'react-router-dom'; +import React, { useState, useEffect } from 'react'; +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) => { - 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('/'); - } + useEffect(() =>{ + api.get('/Entreprise/All').then((response) => { + setEntreprises(response.data); + }); + }, []); + + function handleChangeEntreprise(event){ + setSelectedIdEntreprise(event.target.value); + }; + + function checkAdd(event){ + + 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 ( -
-

Add Contact

-
-
- - setUser({...User, name: e.target.value})}/> -
-
- - setUser({...User, email: e.target.value})}/> +
+

Ajouter un nouveau contact

+
+ + + +
+

Nom :

+

Prénom :

+

Téléphone :

+

Email :

+

Entreprise :

+
+ + + + + + + + +
+

{loginError === true?"L'identifiant existe déja":''}

+
+ + Retour +
+
- -
) } diff --git a/src/pages/Repertoire.js b/src/pages/Repertoire.js index 2c75f50..e52d96d 100644 --- a/src/pages/Repertoire.js +++ b/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() {
- + + + @@ -119,10 +122,44 @@ function Repertoire() { ); }; -function ajouter() { - console.log("ajouter"); +function AddContact(props) { + + 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 ( +
+

Add Contact

+
+
+ + setUser({ ...User, name: e.target.value })} /> +
+
+ + setUser({ ...User, email: e.target.value })} /> +
+ + +
+ ); }; + + // function Repertoire() { // // NOW WITH THE USE OF HOOKS WE WILL GET THE CONTACTS diff --git a/src/styles/components/_repertoire.scss b/src/styles/components/_repertoire.scss index 7ed5f78..452f105 100644 --- a/src/styles/components/_repertoire.scss +++ b/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 { diff --git a/src/styles/components/contact/_addContact.scss b/src/styles/components/contact/_addContact.scss new file mode 100644 index 0000000..b79b38c --- /dev/null +++ b/src/styles/components/contact/_addContact.scss @@ -0,0 +1,8 @@ +.addContactPage{ + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + + +} \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss index ac6a812..eb40ba3 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -7,4 +7,5 @@ @import "./components/calendrier"; @import "./components/parametre"; @import "./components/repertoire"; -@import "./components/chargement" \ No newline at end of file +@import "./components/chargement"; +@import "./components/contact/addContact"; \ No newline at end of file