maxence.lanone
/
JTT_CrM_test_ci
forked from CRM_Production/JTT_CrM
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Modification page compte, manque un poil de css

Browse Source
master
Tristan BARLET 2 years ago
parent edd5c3ca8e
commit bfc7762c98
2 changed files with 90 additions and 35 deletions
Show Stats Download Patch File Download Diff File

13
server-api/api.js
Unescape View File

@ -318,6 +318,19 @@ app.put('/User/Update/:id', (req, res) => {
res.send('Post update...'); res.send('Post update...');
}); });
}); });
app.put('/User/UpdateByClient/:id', (req, res) => {
const id = req.params.id;
let form = req.body;
const sql = `UPDATE users SET lastname = ?, firstname = ?, phone = ?, mail = ? WHERE (iduser = ?)`;
db.query(sql, [form.lastName, form.firstName, form.phone, form.mail, id], (err, result) => {
if (err) throw err;
console.log(result);
res.send('Post update...');
});
});
app.put('/User/Update/Image/:id', (req, res) => { app.put('/User/Update/Image/:id', (req, res) => {
const id = req.params.id; const id = req.params.id;

112
src/pages/Compte.js
Unescape View File

@ -15,7 +15,7 @@ function Compte() {
const [theme, setTheme] = useState("light"); const [theme, setTheme] = useState("light");
const nomInputRef = useRef(); const nomInputRef = useRef();
const prenomInputRef = useRef(); const prenomInputRef = useRef();
const [modification, setModification] = useState(false); const [modificationInfo, setModificationInfo] = useState(false);
const [selectedFile, setSelectedFile] = useState([]); const [selectedFile, setSelectedFile] = useState([]);
const [fileBase64String, setFileBase64String] = useState(""); const [fileBase64String, setFileBase64String] = useState("");
const [lastName, setLastName] = useState(""); const [lastName, setLastName] = useState("");
@ -25,6 +25,8 @@ function Compte() {
const [image, setImage] = useState(""); const [image, setImage] = useState("");
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [error, setError] = useState(null); const [error, setError] = useState(null);
const [formData, setFormData] = useState();
function handleFileChange(event) { function handleFileChange(event) {
const file = event.target.files[0]; const file = event.target.files[0];
@ -54,21 +56,29 @@ function Compte() {
fileReader.readAsDataURL(file); fileReader.readAsDataURL(file);
} }
const handleSubmit = (event) => {
event.preventDefault();
// envoyer les données modifiées au serveur ici
api.put('/User/UpdateByClient/' + Session.get("idUser"), formData).then(response => {
// Traitez la réponse du serveur
});
setModificationInfo(false);
setLastName(formData.lastName);
setFirstName(formData.firstName);
setPhone(formData.phone);
setMail(formData.mail);
}
const handleChange = (event) => {
setFormData({...formData, [event.target.name]: event.target.value });
}
if (localStorage.getItem('theme') && localStorage.getItem("theme") !== '' && localStorage.getItem("theme") !== theme) { if (localStorage.getItem('theme') && localStorage.getItem("theme") !== '' && localStorage.getItem("theme") !== theme) {
setTheme(localStorage.getItem("theme")) setTheme(localStorage.getItem("theme"))
} }
/*const [file, setFile] = useState();
function handleChange(e) {
setFile(URL.createObjectURL(e.target.files[0]));
}*/
const modificationHandler = () => {
setModification((modification) => !modification)
console.log(modification)
}
useEffect(() => { useEffect(() => {
@ -82,27 +92,16 @@ function Compte() {
}); });
}, []); }, []);
function handleChangeLastName(event) { useEffect(() => {
//setLastName(event.target.value); setFormData({
const enteredLastName = nomInputRef.current.value; firstName: firstName,
lastName: lastName,
//mettre à jour le state mail: mail,
setLastName({ phone: phone,
...lastName,
"nom": enteredLastName,
}) })
}; }, [null, modificationInfo]);
function handleChangeFirstName(event) {
//setFirstName(event.target.value);
const enteredFirstName = prenomInputRef.current.value;
//mettre à jour le state
setFirstName({
...firstName,
"prenom": enteredFirstName,
})
};
return ( return (
<body className={theme}> <body className={theme}>
@ -119,7 +118,7 @@ function Compte() {
</div> </div>
<div className="bas_de_page"> <div className="bas_de_page">
<NavigationDashboard /> <NavigationDashboard />
<div className="Compte"> <form className="Compte" onSubmit={handleSubmit}>
<div className="name_picture"> <div className="name_picture">
<div className="picture"> <div className="picture">
<div id="display_image"> <div id="display_image">
@ -132,14 +131,38 @@ function Compte() {
</div> </div>
<div className="name"> <div className="name">
<div className="presentationNom"> <div className="presentationNom">
<p id="texte" className="def">Nom Complet :</p> <p id="texte" className="def">Nom Complet :</p>
{!modification && <p>{firstName + " " + lastName}</p>} {modificationInfo ?
{modification && (<input type="text" value={firstName + " " + lastName} onChange={e => { handleChangeLastName(e); handleChangeFirstName(e) }} ref={nomInputRef + prenomInputRef}></input>)} <div>
<input
name="firstName"
placeholder="firstName"
value={formData.firstName}
onChange={handleChange}
/>
<input
name="lastName"
placeholder="lastName"
value={formData.lastName}
onChange={handleChange}
/>
</div>
:
<p>{firstName + " " + lastName}</p>
}
</div> </div>
<div className='bouton_submit'> <div className='bouton_submit'>
<button id="bouton" className="bouton_modifierNom" type="submit" onClick={modificationHandler}>{!modification ? "Modifier" : "Envoyer"}</button> {modificationInfo ?
<div>
<div id="bouton" className="bouton_modifierNom" onClick={() => setModificationInfo(false)}>Annuler</div>
<button id="bouton" className="bouton_modifierNom" type='submit' >Valider</button>
</div>
:
<div id="bouton" className="bouton_modifierNom" onClick={() => setModificationInfo(true)}>Modifier</div>
}
</div> </div>
</div> </div>
</div> </div>
@ -147,7 +170,16 @@ function Compte() {
<p className="description">Informations personnelles</p> <p className="description">Informations personnelles</p>
<div className="parti_mail"> <div className="parti_mail">
<p className="def">Mail :</p> <p className="def">Mail :</p>
<input id="mail" value={mail} name="mail" className="mail" type="text" disabled /> {modificationInfo ?
<input
name="mail"
placeholder={mail}
value={formData.mail}
onChange={handleChange}
/>
:
<input id="mail" value={mail} name="mail" className="mail" type="text" disabled />
}
</div> </div>
<div className="parti_pays"> <div className="parti_pays">
<p className="def">Pays ou Région :</p> <p className="def">Pays ou Région :</p>
@ -155,7 +187,17 @@ function Compte() {
</div> </div>
<div className="parti_tel"> <div className="parti_tel">
<p className="def">Tel :</p> <p className="def">Tel :</p>
<input id="tel" value={phone} name="tel" className="tel" type="text" disabled /> {modificationInfo ?
<input
name="phone"
placeholder={phone}
value={formData.phone}
onChange={handleChange}
/>
:
<input id="phone" value={phone} name="tel" className="tel" type="text" disabled />
}
</div> </div>
</div> </div>
<div className="infoEntreprise"> <div className="infoEntreprise">
@ -173,7 +215,7 @@ function Compte() {
<p className="nbClient">200</p> <p className="nbClient">200</p>
</div> </div>
</div> </div>
</div> </form>
</div> </div>
</div> </div>
</body > </body >

Write Preview
Loading…
Cancel
Save