forked from CRM_Production/JTT_CrM
commit
e6422dbc2d
@ -0,0 +1 @@
|
||||
703
|
||||
@ -0,0 +1 @@
|
||||
703
|
||||
@ -1,42 +1,97 @@
|
||||
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
|
||||
|
||||
function AddContact(props) {
|
||||
const api = axios.create({
|
||||
baseURL: 'http://localhost:8080'
|
||||
})
|
||||
|
||||
function AddContact() {
|
||||
|
||||
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);
|
||||
console.log(entreprises);
|
||||
});
|
||||
}, []);
|
||||
|
||||
function handleChangeEntreprise(event){
|
||||
setSelectedIdEntreprise(event.target.value);
|
||||
console.log("je suis dans handleChangeEntreprise");
|
||||
};
|
||||
|
||||
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.idcontact).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'>
|
||||
<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 className='addContactPage'>
|
||||
<h2>Ajouter un nouveau contact</h2>
|
||||
<div className="Formulaire">
|
||||
<form className="form" onSubmit={checkAdd}>
|
||||
<table className="Formulaire_de_connexion">
|
||||
<tr>
|
||||
<div className="texte_côté">
|
||||
<p>Nom :</p>
|
||||
<p>Prénom :</p>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
export default AddContact
|
||||
export default AddContact;
|
||||
|
||||
@ -0,0 +1,8 @@
|
||||
.addContactPage{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
|
||||
}
|
||||
Loading…
Reference in new issue