From 1f58e67d7b2be68dc6c9508585aafc8a9110514d Mon Sep 17 00:00:00 2001 From: cherif Date: Sat, 26 Nov 2022 10:57:10 +0100 Subject: [PATCH] 26/11/22 - 10h30 --- src/components/Account.js | 10 +- src/components/DisplayDetailClass_new.js | 15 +- src/components/DisplayUserGoals.js | 53 +++- src/components/ProfilObjectif.js | 16 +- src/components/UpdateUserGoals.js | 228 +++++++++++++----- src/components/UpdateUserProfil.js | 0 src/styles/components/_account.scss | 2 +- .../components/_displaydetailclass.scss | 4 +- .../components/_displaydetailclass_new.scss | 10 +- src/styles/components/_displayusergoals.scss | 32 ++- src/styles/components/_inscription.scss | 1 - src/styles/components/_profilobjectif.scss | 21 +- src/styles/components/_updateusergoals.scss | 51 +++- src/styles/index.scss | 3 +- 14 files changed, 355 insertions(+), 91 deletions(-) create mode 100644 src/components/UpdateUserProfil.js diff --git a/src/components/Account.js b/src/components/Account.js index 3e357e7..fa47dbe 100644 --- a/src/components/Account.js +++ b/src/components/Account.js @@ -18,6 +18,7 @@ import Footer from "./Fotter"; import Header from "./Header"; import UpgradeToPro from "./UpgradeToPro" import Profil_Objectif from "./ProfilObjectif"; +import { useLocation } from "react-router-dom"; function Account() { const [menu, setmenu] = useState("affichage"); @@ -43,7 +44,7 @@ function Account() { const formData = new FormData(); //alert("stored_user = "+stored_user); - + const location = useLocation(); useEffect(() => { getImage(); @@ -71,6 +72,13 @@ function Account() { fetchData(); + + if (location && location.state && location.state.menu) { + displayProfil_Objectif(); + } + + + }, []); const [myimage, setmyimage] = useState(); diff --git a/src/components/DisplayDetailClass_new.js b/src/components/DisplayDetailClass_new.js index 73c3764..97441de 100644 --- a/src/components/DisplayDetailClass_new.js +++ b/src/components/DisplayDetailClass_new.js @@ -580,7 +580,7 @@ Si non, on utilise le formumaire de mysy,.
Descriptions {DetailTraining["description"] && -

+

{parse(String(DetailTraining["description"]))}

} @@ -590,9 +590,8 @@ Si non, on utilise le formumaire de mysy,. {DetailTraining["objectif"] &&
Objectif -

- {parse(String(DetailTraining["objectif"]))}   laa - {String(DetailTraining["objectif"]).length} +

+ {parse(String(DetailTraining["objectif"]))}  

} @@ -600,7 +599,7 @@ Si non, on utilise le formumaire de mysy,.
{DetailTraining["prerequis"] &&
Pré-requis {DetailTraining["prerequis"] && -

+

{parse(String(DetailTraining["prerequis"]))}  

} {!DetailTraining["prerequis"] &&

@@ -611,7 +610,7 @@ Si non, on utilise le formumaire de mysy,. {DetailTraining["pourqui"] &&

Pour Qui {DetailTraining["pourqui"] && -

+

{parse(String(DetailTraining["pourqui"]))}  

} {!DetailTraining["pourqui"] &&

@@ -624,7 +623,7 @@ Si non, on utilise le formumaire de mysy,. {DetailTraining["programme"] &&

Programme - {DetailTraining["programme"] &&

+ {DetailTraining["programme"] &&

{parse(String(DetailTraining["programme"]))}  

} {!DetailTraining["programme"] &&

@@ -636,7 +635,7 @@ Si non, on utilise le formumaire de mysy,. {DetailTraining["plus_produit"] &&

Points forts {DetailTraining["plus_produit"] && -

+

{parse(String(DetailTraining["plus_produit"]))}  

} diff --git a/src/components/DisplayUserGoals.js b/src/components/DisplayUserGoals.js index 310ed4a..1a45607 100644 --- a/src/components/DisplayUserGoals.js +++ b/src/components/DisplayUserGoals.js @@ -11,6 +11,8 @@ import { AiOutlineEdit } from "react-icons/ai"; import { getCookie } from 'react-use-cookie'; import parse from 'html-react-parser'; import UpdateUserGoals from './UpdateUserGoals'; +import { IoCloseCircleOutline, IoAddCircleOutline } from "react-icons/io5"; + function DisplayUserGoals(props) { const columns = [ @@ -44,6 +46,8 @@ function DisplayUserGoals(props) { function handleClick(event, cellValues) { Editobjectif(event, cellValues); + setaddnewgoals(""); + setopenclosebton(true); //console.log(cellValues); } @@ -53,7 +57,7 @@ function DisplayUserGoals(props) { function Editobjectif(event, cellValues) { setrefobjtoupdate(cellValues.row.name); setupdateobjectif(true); - //alert(" traitement de "+cellValues.row.name); + //alert(" traitement de "+cellValues.row.name); } @@ -100,19 +104,56 @@ function DisplayUserGoals(props) { function closeUpdateUserGoals() { setupdateobjectif(false); + setaddnewgoals(""); + setupdateobjectif(false); + setopenclosebton(false); } + + + const [addnewgoals, setaddnewgoals] = useState(""); + const [openclosebton, setopenclosebton] = useState(false); + + + function handleAddGoal() { + setaddnewgoals("1"); + setupdateobjectif(false); + setopenclosebton(true); + } + + function closehandleAddGoal() { + setaddnewgoals(""); + setupdateobjectif(false); + } + + return (
- {updateobjectif &&
- -
- -
+ +
} + {String(addnewgoals) === "1" &&
+ + +
} + +
+
+
 
+ +
+ {!openclosebton && } + + {openclosebton && } +
+ +
+
{String(listgoals_api) === "true" &&
diff --git a/src/components/ProfilObjectif.js b/src/components/ProfilObjectif.js index 83247af..31dd9a1 100644 --- a/src/components/ProfilObjectif.js +++ b/src/components/ProfilObjectif.js @@ -2,25 +2,31 @@ import React, { useState, useEffect } from "react"; import { useForm } from "react-hook-form"; import { useHistory } from "react-router-dom"; import { Helmet } from "react-helmet"; -import DisplayUserGoals from "./DisplayUserGoals"; +import DisplayUserGoals from "./DisplayUserGoals"; +import { IoCloseCircleOutline, IoAddCircleOutline } from "react-icons/io5"; +import { Button, Form, FormGroup, Label } from "reactstrap"; +import UpdateUserGoals from "./UpdateUserGoals"; function ProfilObjectif() { const history = useHistory(); + + return ( +

En cours de construction

- +
- +

-
-
+
+
diff --git a/src/components/UpdateUserGoals.js b/src/components/UpdateUserGoals.js index ed99df4..6e60255 100644 --- a/src/components/UpdateUserGoals.js +++ b/src/components/UpdateUserGoals.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect, } from "react"; +import React, { useRef, useState, useEffect, } from "react"; import { useForm } from "react-hook-form"; import { Button, } from "reactstrap"; import axios from "axios"; @@ -10,17 +10,25 @@ import TextField from '@mui/material/TextField'; import AccountCircle from '@mui/icons-material/AccountCircle'; import moment from "moment"; import { getCookie } from 'react-use-cookie'; +import { AiTwotoneEdit, AiTwotoneSave } from "react-icons/ai"; +import { useHistory } from "react-router-dom"; +import { format } from 'date-fns'; +import DatePicker from "react-datepicker"; + +import "react-datepicker/dist/react-datepicker.css"; +import { Editor } from '@tinymce/tinymce-react'; function UpdateUserGoals(props) { - //alert(" UpdateUserGoals "+props.name_obj); const [fields1desabled, setfields1desabled] = useState(true); const url = process.env.REACT_APP_API_URL + "myclass/api/add_update_user_objectif/"; - - const [defaultdate, setdefaultdate] = useState(new Date().setDate(new Date().getDate() + 10)); - const [mindate, setmindate] = useState(new Date().setDate(new Date().getDate() + 10)); + const [mindate, setmindate] = useState(new Date().setDate(new Date().getDate() + 1)); + const history = useHistory(); + const editorRef_description = useRef(null); + const [datamodification, setdatamodification] = useState("0"); + const [field_description, setfield_description] = useState(""); useEffect(() => { @@ -30,8 +38,7 @@ function UpdateUserGoals(props) { function cleanField() { document.getElementsByName("name")[0].value = ""; - document.getElementById("description").value = ""; - document.getElementsByName("date_souhaite")[0].value = { defaultdate }; + document.getElementsByName("domaine")[0].value = ""; document.getElementsByName("niveau")[0].value = ""; } @@ -39,22 +46,27 @@ function UpdateUserGoals(props) { const [recorddata_api, setrecorddata_api] = useState(); const [recorddata_api_message, setrecorddata_api_message] = useState(); const [recorddata_api_result, setrecorddata_api_result] = useState([]); - function RecordData() { const formData = new FormData(); const url = process.env.REACT_APP_API_URL + "myclass/api/add_update_user_objectif/"; var name = document.getElementsByName("name")[0].value; - var description = document.getElementsByName("description")[0].value; - var date_souhaite = document.getElementsByName("date_souhaite")[0].value; + var date_souhaite = format(StartDate, 'dd/MM/yyyy') var domaine = document.getElementsByName("domaine")[0].value; var niveau = document.getElementsByName("niveau")[0].value; + var description_new = ""; + if (editorRef_description.current) { + description_new = editorRef_description.current.getContent(); + } + + + const stored_cookie = getCookie('tokenmysych'); formData.append('token', stored_cookie); formData.append('name', name); - formData.append('description', description); + formData.append('description', description_new); formData.append('date_souhaite', date_souhaite); formData.append('domaine', domaine); formData.append('niveau', niveau); @@ -71,7 +83,15 @@ function UpdateUserGoals(props) { console.log('Success:', result['message'], "result['status'] = ", result['status']); if (String(result['status']) === String("true")) { setrecorddata_api("true"); - setrecorddata_api_result(result['message']) + setrecorddata_api_result(result['message']); + + history.push({ + pathname: "/mysy-user-account/", + state: { + menu: "profil_objectif" + } + }); + { window.location.reload() } } else { @@ -122,9 +142,9 @@ function UpdateUserGoals(props) { } if (mylocalobj.description) { - document.getElementById("description").value = mylocalobj.description; - //document.getElementById("description").disabled = true; - //document.getElementById("description").style.backgroundColor = "#ECEFF1"; + + + setfield_description(mylocalobj.description); } if (mylocalobj.domaine) { @@ -134,22 +154,16 @@ function UpdateUserGoals(props) { } if (mylocalobj.date_souhaite) { - //alert("mylocalobj.date_souhaite = "+mylocalobj.date_souhaite); - var al = moment(mylocalobj.date_souhaite).format('YYYY-DD-MM'); - //alert(" AL = "+al); - document.getElementsByName("date_souhaite")[0].value = al; - //document.getElementsByName("date_souhaite")[0].disabled = true; - //document.getElementsByName("date_souhaite")[0].style.backgroundColor = "#ECEFF1"; + + var va = new Date(moment(mylocalobj.date_souhaite, "DD/MM/YYYY")) + setStartDate(va); + } - if (mylocalobj.domaine) { - document.getElementsByName("domaine")[0].value = mylocalobj.domaine; - document.getElementsByName("domaine")[0].disabled = true; - document.getElementsByName("domaine")[0].style.backgroundColor = "#ECEFF1"; - } + if (mylocalobj.niveau) { - document.getElementsByName("niveau")[0].value = mylocalobj.date_souhaite; + document.getElementsByName("niveau")[0].value = mylocalobj.niveau; document.getElementsByName("niveau")[0].disabled = true; document.getElementsByName("niveau")[0].style.backgroundColor = "#ECEFF1"; } @@ -170,24 +184,88 @@ function UpdateUserGoals(props) { }).catch((error) => { - console.warn('getGolData : Not good man :( mysearchtext = '); + console.warn('getGolData : Not good man :( mysearchtext = ', error); setgetGolData_api("false"); }) } + const [fiedsupdated, setfiedsupdated] = useState(false); + function updateBox() { - setfields1desabled(false); + setfiedsupdated(true); + } + const [editfields, seteditfields] = useState(false); + function enablefieds1() { + + + document.getElementsByName("domaine")[0].disabled = false; + document.getElementsByName("niveau")[0].disabled = false; + + + document.getElementsByName("domaine")[0].style.background = "#fff"; + document.getElementsByName("niveau")[0].style.background = "#fff"; + + seteditfields(true); + + } + + function desablefield1() { + document.getElementsByName("name")[0].disabled = true; + //document.getElementsByName("date_souhaite")[0].disabled = true; + document.getElementsByName("domaine")[0].disabled = true; + document.getElementsByName("niveau")[0].disabled = true; + + document.getElementsByName("name")[0].style.background = "#ECEFF1"; + //document.getElementsByName("date_souhaite")[0].style.background = "#ECEFF1"; + document.getElementsByName("domaine")[0].style.background = "#ECEFF1"; + document.getElementsByName("niveau")[0].style.background = "#ECEFF1"; + + seteditfields(false); + + } + + const [StartDate, setStartDate] = useState(new Date()); + const [mydate_val, setmydate_val] = useState(); + const handleChangeDate = (date) => { + //alert(" date = " + format(date, 'dd/MM/yyyy')); + setStartDate(date); + setfiedsupdated(true); + + } + + const [editor_tochange, seteditor_tochange] = useState(""); + function editor_keyup() { + seteditor_tochange("1"); + } + + function DataUpdated() { + setdatamodification("1"); + } + + + return (
-
+ + +
+ + + {String(getGolData_api) === String("false") &&
Impossible d'afficher le detail de l'objectif
} + + {String(recorddata_api) === String("true") &&
L'objectif a été ajouté/mise à jour
} + + {String(recorddata_api) === String("false") &&
{recorddata_api_message}
} + + :not(style)': { m: 1 }, width: '100%', }} - onChange={updateBox} > + onChange={updateBox} > - +
+ Data Souhaitée : + - /> -
- +
+ + +
+
+
Description
+ editorRef_description.current = editor} + initialValue={field_description} + onKeyUp={editor_keyup} + onEditorChange={(newValue, editor) => { + + if (String(editor_tochange) === "1") { + //alert(" change"); + DataUpdated() + seteditor_tochange(""); + setfiedsupdated(true); + } + }} + + init={{ + resize: false, + height: 220, + menubar: false, + plugins: [ + 'advlist autolink lists link image charmap print preview anchor', + 'searchreplace visualblocks code fullscreen', + 'insertdatetime media table paste code help wordcount' + ], + toolbar: 'undo redo | casechange blocks | bold italic backcolor | ' + + 'alignleft aligncenter alignright alignjustify | ' + + 'bullist numlist checklist outdent indent | removeformat | a11ycheck code table help', + content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px; }' + }} + /> + +
+
+
+
+ - />
- {fields1desabled == false &&
+ + {fiedsupdated &&
/!\ Pensez à enregistrer les modifications
} + + {(!props.name_obj || fiedsupdated) &&
- +
-
- +
+
} - {fields1desabled == true && - - } + {/*props.name_obj && String(props.name_obj).length > 2 && !editfields &&
+ +
+ */}
diff --git a/src/components/UpdateUserProfil.js b/src/components/UpdateUserProfil.js new file mode 100644 index 0000000..e69de29 diff --git a/src/styles/components/_account.scss b/src/styles/components/_account.scss index ffc70c4..8bd5314 100644 --- a/src/styles/components/_account.scss +++ b/src/styles/components/_account.scss @@ -1046,7 +1046,7 @@ text-align: left; color: rgb(10, 42, 77); background-color: white; - margin-right: 5px; + margin-right: 10px; } .div_droite_haut { diff --git a/src/styles/components/_displaydetailclass.scss b/src/styles/components/_displaydetailclass.scss index 48e5e7d..ce3ea8c 100644 --- a/src/styles/components/_displaydetailclass.scss +++ b/src/styles/components/_displaydetailclass.scss @@ -1446,7 +1446,7 @@ p { font-family: "verdana", "Quicksand", "Signika", sans-serif; - line-height: 1.43; + line-height: 1.7; font-size: 0.9rem; margin-bottom: 4px; color: #3b3e40; @@ -1953,7 +1953,7 @@ p { font-family: "verdana", "Quicksand", "Signika", sans-serif; - line-height: 1.43; + line-height: 1.7; font-size: 0.95rem; margin-bottom: 4px; color: #3b3e40; diff --git a/src/styles/components/_displaydetailclass_new.scss b/src/styles/components/_displaydetailclass_new.scss index 6de39fb..8b4f191 100644 --- a/src/styles/components/_displaydetailclass_new.scss +++ b/src/styles/components/_displaydetailclass_new.scss @@ -99,6 +99,7 @@ padding-bottom: 2rem; margin-top: 1rem; padding-top: 1rem; + background: #F4F6F6; } .hilightsoustitre { @@ -142,6 +143,7 @@ padding-top: 10px; width: 98%; max-height: 5rem; + background-color: white; } .titre_formation { @@ -431,6 +433,7 @@ } .right_box { + float: left; border: 1px solid black; border-width: 2px; @@ -448,6 +451,7 @@ padding-bottom: 2rem; margin-top: 0.5rem; padding-top: 1rem; + background: #F4F6F6; //background-color: #f8f9f9; //overflow-y:scroll; } @@ -492,6 +496,7 @@ padding-top: 10px; width: 100%; max-height: 8rem; + background-color: white; } @@ -805,6 +810,7 @@ padding-bottom: 2rem; margin-top: 0.5rem; padding-top: 1rem; + background: #F4F6F6; //background-color: #f8f9f9; //overflow-y:scroll; } @@ -848,6 +854,7 @@ padding-top: 10px; width: 100%; max-height: 11rem; + background-color: white; } @@ -1158,7 +1165,7 @@ padding-bottom: 2rem; margin-top: 0.5rem; padding-top: 1rem; - background-color: #f8f9f9; + background: #F4F6F6; //overflow-y:scroll; } @@ -1205,6 +1212,7 @@ padding-top: 10px; width: 100%; max-height: 12rem; + background-color: white; } .titre_formation { diff --git a/src/styles/components/_displayusergoals.scss b/src/styles/components/_displayusergoals.scss index 5569de9..4a929e2 100644 --- a/src/styles/components/_displayusergoals.scss +++ b/src/styles/components/_displayusergoals.scss @@ -28,8 +28,8 @@ .div_row { float: left; - border:0px solid black; - border-width: 0.01rem; + //border:0px solid black; + //border-width: 0.01rem; width: 100%; margin-bottom: 1rem; border-radius: 1rem; @@ -62,5 +62,33 @@ background-color: gray; font-weight: normal; } + + + .bton_ajouter_obj{ + border-radius: 7px; + font-size: small; + padding: 0.3rem; + width: 60%; + background-color: #619E31; + color: white; + } + + .bton_enreg { + border-radius: 7px; + font-size: small; + padding: 0.3rem; + width: 60%; + background-color: #81BC3A; + color: white; + } + + .bton_annnule { + border-radius: 7px; + font-size: small; + padding: 0.3rem; + width: 60%; + background-color: white; + color: red; + } } } diff --git a/src/styles/components/_inscription.scss b/src/styles/components/_inscription.scss index 2e3a03c..e2662a5 100644 --- a/src/styles/components/_inscription.scss +++ b/src/styles/components/_inscription.scss @@ -435,7 +435,6 @@ padding: 0.3rem; width: 60%; background-color: "#81BC3A"!important; - } diff --git a/src/styles/components/_profilobjectif.scss b/src/styles/components/_profilobjectif.scss index 99ca582..7177998 100644 --- a/src/styles/components/_profilobjectif.scss +++ b/src/styles/components/_profilobjectif.scss @@ -28,8 +28,8 @@ .div_row { float: left; - border:0px solid black; - border-width: 0.01rem; + //border:0px solid black; + //border-width: 0.01rem; width: 100%; margin-bottom: 1rem; border-radius: 1rem; @@ -63,5 +63,22 @@ font-weight: normal; } + .div_row_gauche { + float: left; + // border:1px solid black; + // border-width:0.01rem; + width: 45%; + border-radius: 1rem; + } + + .div_row_droite { + float: right; + //border:1px solid black; + //border-width:0.01rem; + width: 45%; + border-radius: 1rem; + } + + } } diff --git a/src/styles/components/_updateusergoals.scss b/src/styles/components/_updateusergoals.scss index 45cade4..7a245b2 100644 --- a/src/styles/components/_updateusergoals.scss +++ b/src/styles/components/_updateusergoals.scss @@ -1,4 +1,4 @@ -.updateusergoals { +.updateusergoals{ .h1_transparent { color: transparent; font-size: 0.1rem; @@ -28,8 +28,8 @@ .div_row { float: left; - border:0px solid black; - border-width: 0.01rem; + //border:0px solid black; + //border-width: 0.01rem; width: 100%; margin-bottom: 1rem; border-radius: 1rem; @@ -62,6 +62,51 @@ background-color: gray; font-weight: normal; } + + .bton_enreg { + border-radius: 7px; + font-size: small; + padding: 0.3rem; + width: 60%; + background-color: #81BC3A; + color: white; + } + + .bton_annnule { + border-radius: 7px; + font-size: small; + padding: 0.3rem; + width: 60%; + background-color: white; + color: red; + } + + .training_text { + padding: 5px; + float: left; + height: 220px !important; + min-height: 220px !important; + max-height: 220px !important; + margin-bottom: 10px; + width: 100%; + } + + .plus_produit_desabled { + width: 100% !important; + margin-right: 2rem !important; + margin-bottom: 1rem !important; + max-height: 200px !important; + } + .titre_training_text { + font-size: small; + padding-left: 5px; + width: 50%; + } + + .tox-statusbar__branding { + display: none !important; + } + } } \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss index d3a8fd9..3daf9a4 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -55,4 +55,5 @@ @import "./components/stripe_payment"; @import "./components/inscription"; @import "./components/gestionadministrative"; -@import "./components/toggleswitch"; \ No newline at end of file +@import "./components/toggleswitch"; +@import "./components/updateusergoals"; \ No newline at end of file