recette2
cherif 2024-12-30 14:46:28 +01:00
parent 5e7b596317
commit c44699df1d
9 changed files with 938 additions and 68 deletions

View File

@ -7,9 +7,7 @@
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description"
content="Trouver des Formations et Tutoriels d'excellente qualité : Gratuit ou payant / A distance ou en presentiel, etc." />
<meta name="robots" content="index,follow" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/MYSY-LOGO-BLUE_192.png" />
<!--
@ -26,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Formation & Tutoriel Gratuit ou payant Excellente qualité</title>
<link rel="canonical" href="https://www.mysy-training.com/" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-37423053-2"></script>

View File

@ -42,8 +42,50 @@ import { MdDeleteForever } from "react-icons/md";
import { AddCircleOutline } from "@mui/icons-material";
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
import TextField from '@mui/material/TextField';
import CancelPresentationIcon from '@mui/icons-material/CancelPresentation';
import { IconButton } from '@material-ui/core';
import { makeStyles } from "@material-ui/core/styles";
import Paper from '@material-ui/core/Paper';
import Draggable from 'react-draggable';
function PaperComponent(props) {
return (
<Draggable
handle="#draggable-dialog-title"
cancel={'[class*="MuiDialogContent-root"]'}
>
<Paper {...props} />
</Draggable>
);
}
const useStyles = makeStyles((theme) => ({
dialog: {
position: 'absolute',
// left: 10,
top: 400
},
paper: {
overflowY: 'unset',
},
customizedButton: {
position: 'absolute',
left: '98%',
top: '-3%',
backgroundColor: 'lightgray',
color: 'gray',
},
}));
const Article = (props) => {
const classes = useStyles();
const history = useHistory();
const [isLoading, setLoading] = useState();
@ -106,7 +148,7 @@ const Article = (props) => {
setLoading(false);
if (String(res.data.status) === "true") {
//console.log(" In Get_Partner_Article_Avis_Data res.data.status = " + res.data.status);
//console.log(" In Get_Partner_Article_Avis_Data res.data.message r_class = " + res.data.message);
// console.log(" In Get_Partner_Article_Avis_Data res.data.message r_class = " + res.data.message);
setGet_Partner_Article_Avis_Data_api("true");
setGet_Partner_Article_Avis_Data_result(res.data.message);
@ -142,6 +184,15 @@ const Article = (props) => {
if (mylocal_document.img_path) {
setarticle_avis_img_path(mylocal_document.img_path);
} else {
setarticle_avis_img_path("");
}
if (mylocal_document.meta_description) {
setarticle_avis_meta_description(mylocal_document.meta_description);
} else {
setarticle_avis_meta_description("");
}
@ -258,6 +309,7 @@ const Article = (props) => {
const [article_avis_internal_url, setarticle_avis_internal_url] = React.useState("");
const [article_avis_display_header_img, setarticle_avis_display_header_img] = React.useState(false);
const [article_avis_img_path, setarticle_avis_img_path] = React.useState("");
const [article_avis_meta_description, setarticle_avis_meta_description] = React.useState("");
function Add_Update_Article_Avis() {
@ -270,6 +322,17 @@ const Article = (props) => {
form.append("qualite", "");
form.append("note", "");
if (img_img_article_file2) {
form.append('File', img_img_article_file2);
form.append('img_file_name', img_img_article_file2.name);
}
else {
form.append('File', "");
form.append('img_file_name', "");
}
if (!article_avis_img_path || String(article_avis_img_path).trim() === "") {
alert(" Vous devez saisir une image à afficher avec l'article ");
return;
@ -302,8 +365,18 @@ const Article = (props) => {
form.append("user_longitude", longitude);
form.append("user_state", state);
// Si une balise meta description n'est pas fourni, alors on lui donne le titre
var local_meta_description = "";
if (article_avis_meta_description) {
local_meta_description = String(article_avis_meta_description).trim().toLocaleLowerCase().substring(0, 154);
} else {
local_meta_description = String(article_avis_title_formation).trim().toLocaleLowerCase().substring(0, 154);
}
form.append("meta_description", local_meta_description);
//console.log(" ## form = ", form);
console.log(" ## form = ", form);
var myurl = "";
if (selected_id && String(selected_id).length > 3) {
@ -378,7 +451,229 @@ const Article = (props) => {
}
/**** Gestion image de l'article */
const [logo_file_name, setlogo_file_name] = useState();
const hiddenFileInput_logo = React.useRef(null);
const [GetLms_Themes_img_article_Img, setGetLms_Themes_img_article_Img] = useState("");
const [handleSubmission_img_article_api, sethandleSubmission_img_article_api] = useState();
const [handleSubmission_img_article_result, sethandleSubmission_img_article_result] = useState();
const [handleSubmission_img_article_message, sethandleSubmission_img_article_message] = useState();
const [img_img_article_file, setimg_img_article_file] = useState();
const [img_bg_file, setimg_bg_file] = useState();
const [img_img_article_file2, setimg_img_article_file2] = useState();
const [img_bg_file2, setimg_bg_file2] = useState();
const handleSubmission_logo = event => {
clear_message();
const fileUploaded = event.target.files[0];
let file_size = event.target.files[0].size;
let file_type = event.target.files[0].type;
//console.log("file_size = ", file_size, " file_type = ", file_type);
//console.log(" fileUploaded = ", fileUploaded);
if (file_size > 1000000) {
alert("Le fichier ne doit pas dépasser un 1 Méga octets");
return;
}
//image/png
if (String(file_type) !== "image/png") {
alert("Le fichier n'est pas au format PNG");
return;
}
setLoading(true);
var _URL = window.URL || window.webkitURL;
var file, img;
var img_height, img_width;
if ((file = event.target.files[0])) {
img = new Image();
var objectUrl = _URL.createObjectURL(file);
img.onload = function () {
img_height = this.height;
img_width = this.width;
_URL.revokeObjectURL(objectUrl);
console.log(" img_width = ", img_width, " img_height = ", img_height)
if (parseFloat(img_width) > 130 && parseFloat(img_width) < 1000 &&
parseFloat(img_height) > 130 && parseFloat(img_height) < 1000) {
//console.log(" img_height est = ", img_height, " < à 1500 ");
// Verification que le nom du fichier est alpha numerique
/*var regExp = /^[A-Za-z0-9]+$/;
if (!regExp.test(event.target.files[0].name)) {
sethandleSubmission_img_article_message(" Le nom de l'image comporte des caractères non alphanumériques");
sethandleSubmission_img_article_api("false");
setLoading(false);
return
}*/
if (String(event.target.files[0].name).length > 50) {
sethandleSubmission_img_article_message(" Le nom du fichier est trop long. il doit faire moins de 50 caractère");
sethandleSubmission_img_article_api("false");
setLoading(false);
return
}
setlogo_file_name(event.target.files[0].name);
setimg_img_article_file(URL.createObjectURL(event.target.files[0]));
setimg_img_article_file2(event.target.files[0]);
} else {
sethandleSubmission_img_article_message(" La taille de l'image est incorrecte. Larg = " + String(img_width) + " px Long = " + String(img_height) + " px");
sethandleSubmission_img_article_api("false");
setLoading(false);
return;
}
//console.log(" after img_width = ", img_width, " after img_height = ", img_height)
};
img.src = objectUrl;
}
setLoading(false);
};
function clear_message() {
sethandleSubmission_img_article_message();
sethandleSubmission_img_article_api();
}
const [Send_img_article_Img_api, setSend_img_article_Img_api] = useState();
const [Send_img_article_Img_result, setSend_img_article_Img_result] = useState();
const [Send_img_article_Img_message, setSend_img_article_Img_message] = useState();
function Send_img_article_Img() {
clear_message();
setLoading(true);
const formData = new FormData();
formData.append('File', img_img_article_file2);
//formData.append('token', 'K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA');
const stored_cookie = getCookie('tokenmysypart');
formData.append("token", stored_cookie);
console.log(" ## le nom du fichier est : ", img_img_article_file2.name);
fetch(
process.env.REACT_APP_API_URL + "myclass/api/Blog_Img_Store_Article_Image/",
{
method: 'POST',
body: formData,
}
)
.then((response) => response.json())
.then((result) => {
//console.log('Success:', result['message']);
if (String(result['status']) === String("true")) {
setSend_img_article_Img_api("true");
alert(" La mise à jour du logo a été correctement effectuée. ");
} else if (String(result['status']) === String("Err_Connexion")) {
alert('Erreur: ' + result['message']);
history.push("/Connexion");
}
else {
setSend_img_article_Img_api("false");
setSend_img_article_Img_message(result['message']);
}
setLoading(false);
})
.catch((error) => {
console.error('Error:', error);
setSend_img_article_Img_api("false");
setLoading(false);
});
}
const [Delete_img_article_Img_api, setDelete_img_article_Img_api] = useState();
const [Delete_img_article_Img_result, setDelete_img_article_Img_result] = useState();
const [Delete_img_article_Img_message, setDelete_img_article_Img_message] = useState();
function Delete_img_article_Img() {
clear_message();
setLoading(true);
const formData = new FormData();
//formData.append('token', 'K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA');
const stored_cookie = getCookie('tokenmysypart');
formData.append("token", stored_cookie);
fetch(
process.env.REACT_APP_API_URL + "myclass/api/Lms_Delete_img_article_File/",
{
method: 'POST',
body: formData,
}
)
.then((response) => response.json())
.then((result) => {
//console.log('Success:', result['message']);
if (String(result['status']) === String("true")) {
setDelete_img_article_Img_api("true");
setGetLms_Themes_img_article_Img('');
alert(" Le logo a été correctement supprimé ");
} else if (String(result['status']) === String("Err_Connexion")) {
alert('Erreur: ' + result['message']);
history.push("/Connexion");
}
else {
setDelete_img_article_Img_api("false");
setDelete_img_article_Img_message(result['message']);
}
setLoading(false);
})
.catch((error) => {
console.error('Error:', error);
setDelete_img_article_Img_api("false");
setDelete_img_article_Img_message(" Impossible de supprimer le fichier logo");
setLoading(false);
});
}
const changeHandler2_logo = (event) => {
clear_message();
hiddenFileInput_logo.current.click();
};
function Annule_img_article_img() {
clear_message();
setimg_img_article_file();
setimg_img_article_file2();
sethandleSubmission_img_article_message();
setSend_img_article_Img_api();
setSend_img_article_Img_message();
setlogo_file_name();
}
/***** Fin gestion de l'image de l'article */
return (
<div className="article">
@ -388,8 +683,30 @@ const Article = (props) => {
{/*** GESTION article */}
<Dialog
open={Dialog_article_avis_open}
onClose={Dialog_article_avis_handleClose}
// onClose={Dialog_article_avis_handleClose}
className="displaypartnersession"
static
onClose={() => null}
PaperProps={{
className: classes.paper, // Apply the paper style
style: {
overflowY: 'unset',
position: 'absolute',
top: '5rem',
margin: "2px",
},
}}
hideBackdrop={true}
disableScrollLock
classes={{
paper: classes.dialog
}}
PaperComponent={PaperComponent}
aria-labelledby="draggable-dialog-title"
>
<DialogTitle>Votre article </DialogTitle>
@ -453,7 +770,7 @@ const Article = (props) => {
<div className="div_row_droite_dialog_session" style={{ "textAlign": 'right' }}>
<Checkbox
name="document_join_pdf"
className="disabled_style session_caract_Dialog_DatePicker"
className="disabled_style session_caract_Dialog_DatePicker"
checked={article_avis_display_header_img}
onChange={(e) => {
setarticle_avis_display_header_img(e.target.checked);
@ -470,27 +787,142 @@ const Article = (props) => {
</div>
<div className="div_row_dialog" >
<div className="div_row_dialog" >
<div className="div_row_dialog" style={{ "textAlign": 'left' }}>
<input
type='text'
name='img_url'
id='img_url'
value={article_avis_img_path}
onChange={(e) => {
setarticle_avis_img_path(e.target.value);
setis_data_changed("1");
}}
className='disabled_style_width_100_percent'
<div className="div_row_dialog" >
<div className="div_row_dialog" style={{ "textAlign": 'left' }}>
<input
type='text'
name='img_url'
id='img_url'
value={article_avis_img_path}
onChange={(e) => {
setarticle_avis_img_path(e.target.value);
setis_data_changed("1");
}}
className='disabled_style_width_100_percent'
></input>
></input>
</div>
</div>
</div>
</div>
<div className="div_row_dialog">
<div className="div_row_dialog" style={{ "textAlign": 'left' }}>
<b> Image Url (a poster) </b>
</div>
----------------
<div className="div_row_dialog" >
<div className="div_row"> Import du logo <br />
<div className="div_row" style={{ "border": "None" }}>
&nbsp;
</div>
<Button variant="outlined" onClick={changeHandler2_logo} className="detail_class_submenu" style={{
"background": "#c8cfd5",
"minWidth": "15rem", "color": "black", "width": "auto"
}}
id='menu_import_formation' name='menu_import_formation'>Choisir une image &nbsp; <br />
</Button><br />
<nav className="koUpdateData" style={{ "color": "orange" }}>
<Tooltip className="tooltip_css" id="tooltip_2" />
<a data-tooltip-id="tooltip_2" data-tooltip-html="Respecter ces critères vous aide à avoir un meilleur affichage">
<i> Important : Taille du logo : longueur entre 140px et 250px et largeur entre 60px et 150px, au format PNG <br />
Le nom du fichier ne contient que des caractères alphanumériques </i>
</a>
</nav>
{logo_file_name && <nav className="okUpdateData"><i>{logo_file_name}</i></nav>}
<input type="file"
accept=".png"
ref={hiddenFileInput_logo}
style={{ display: 'none' }}
name="liste_formation_file"
onChange={handleSubmission_logo}
/>
{img_img_article_file && <nav> Fichier à importer : {img_img_article_file.name} <br />
<img src={img_img_article_file} alt={""} />
<br />
</nav>}
{String(Send_img_article_Img_api) === "true" && <div className="okUpdateData"> La mise à jour a été correctement faite</div>}
{String(Send_img_article_Img_api) === "false" && <div className="koUpdateData"> {Send_img_article_Img_message}</div>}
{String(handleSubmission_img_article_api) === "false" && <div className="koUpdateData"> {handleSubmission_img_article_message}</div>}
<br />
<div className="div_row">
<div className="div_row" style={{ "border": "None" }}>
&nbsp;
</div>
{<div className="div_row" style={{ "border": "None", "color": "orange", "textAlign": "center" }}>
<div className="div_row_gauche " style={{ "textAlign": 'left', 'marginLeft': '15px' }}>
<Button variant="contained" className="btn_modif" onClick={Annule_img_article_img}>Annuler
</Button>
</div>
<div className="div_row_droite" style={{ "textAlign": 'right', 'marginRight': '15px' }}>
<Button variant="contained" className="btn_enreg" onClick={Send_img_article_Img}>Enregistrer
</Button>
</div>
</div>}
<div className="div_row" style={{ "border": "None" }}>
&nbsp;
</div>
</div>
</div>
---------------
</div>
</div>
<div className="div_row_dialog">
<div className="div_row_dialog" style={{ "textAlign": 'left' }}>
<b> Meta description u</b>
<div className="div_row_dialog" >
<TextField
maxRows={4}
minRows={4}
inputProps={{ maxLength: 154 }}
multiline
sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
name="meta_description"
id="meta_description"
fullWidth
value={article_avis_meta_description}
onChange={(e) => {
setarticle_avis_meta_description(e.target.value);
setis_data_changed("1");
}
}
/>
</div>
</div>
</div>
<div className="div_row_dialog">
<div className="div_row_dialog" style={{ "textAlign": 'left' }}>
@ -542,9 +974,17 @@ const Article = (props) => {
</DialogContent>
<DialogActions>
<IconButton
autoFocus
onClick={Dialog_article_avis_handleClose_buton}
color="primary"
className={classes.customizedButton}
>
<CancelPresentationIcon />
</IconButton>
<div className="div_row">
<div className="div_row_gauche">
<Button onClick={Dialog_article_avis_handleClose_buton} className="bton_annule_dialog" style={{textAlign:"center"}}>Fermer &nbsp;</Button>
<Button onClick={Dialog_article_avis_handleClose_buton} className="bton_annule_dialog" style={{ textAlign: "center" }}>Fermer &nbsp;</Button>
</div>
<div className="div_row_droite" style={{ "textAlign": 'center' }}>
<Button onClick={Add_Update_Article_Avis} className="bton_enreg_dialog">Enregistrer &nbsp; </Button>

View File

@ -606,7 +606,7 @@ const ButtonHilight = () => {
</DialogActions>
</Dialog>
<Helmet>
{/* <Helmet>
<meta name="robots" content="index,follow" />
<meta name="description" content="Éditeur Français de logiciels pour organisme de formation. Avec solutions de E-Learning, gestion administrative et gestion relation client nous accompagnons les organismes de formation à réaliser laudit QUALIOPI en toute sérénité. Nous sommes les moins cher du marché. Nous vous accompagnons automatiser vos process : inscription, évaluation, émargement (qr-code), Check-list QUALIOPI, Personnalisation et édition documents, Gestion formateurs, Catalogue formations personnalisé" />
@ -615,7 +615,7 @@ const ButtonHilight = () => {
<link rel="canonical" href={`${process.env.REACT_APP_BASE_URL}` + "/qui-sommes-nous"} />
</Helmet>
*/}
<Menu
keepMounted
anchorEl={PartnerMenu}

View File

@ -129,7 +129,6 @@ const ContactForm = () => {
return (
<div className='ContactForm'>
<Helmet>
<title>MySy Training, contactez-nous</title>
<meta name="description" content="Éditeur Français de logiciels pour organisme de formation. Avec solutions de E-Learning, gestion administrative et gestion relation client nous accompagnons les organismes de formation à réaliser laudit QUALIOPI en toute sérénité. Nous sommes les moins cher du marché. Nous vous accompagnons automatiser vos process : inscription, évaluation, émargement (qr-code), Check-list QUALIOPI, Personnalisation et édition documents, Gestion formateurs, Catalogue formations personnalisé. Nous sommes les moins cher du marché. Nous automatisons vos process : inscription, évaluation, émargement (qr-code), QUALIOPI, Personnalisation des documents, Gestion formateurs, Catalogue personnalisé, bilan pédagogique et financier (PBF). Nos options comme la signature électronique sont inclus dans le tarif de base." />
<meta name="robots" content="index,follow" />
<meta name="title" content="MySy Training, contactez-nous" />

View File

@ -1,24 +1,20 @@
import React, { useRef, useState, useEffect } from "react";
import axios from "axios";
import bannerimg2 from "../mysy_img/MYSY-LOGO-BLUE.png";
import { useParams } from 'react-router-dom'
import { Button, } from "reactstrap";
import { Helmet } from "react-helmet";
import { useCookies } from "react-cookie";
import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from "react-share";
import { SocialIcon } from 'react-social-icons';
import ReactStars from "react-rating-stars-component";
import { confirmAlert } from 'react-confirm-alert';
//mport slideimg4 from "../mysy_img/mysy_img.png";
import 'react-slideshow-image/dist/styles.css'
import slideimg1 from "../mysy_img/Image_article2.jpg";
//import slideimg4 from "../mysy_img/Image_article1.png";
import Articles from "../components/Article";
import { Fade } from 'react-slideshow-image';
import { CommentSection } from 'react-comments-section'
import DiscussionBoard from 'react-discussion-board'
import 'react-discussion-board/dist/index.css'
import ArticleComment from "./ArticleComment"
import { useForm } from 'react-hook-form';
import { Editor } from "react-draft-wysiwyg";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
@ -29,10 +25,7 @@ import logowhite from "../mysy_img/MYSY-LOGO-WHITE.png";
import Footer from "./Fotter";
import Fotter_v3 from "./Fotter_v3";
import Header from "./Header";
import ListeArticle from "./ListeArticles";
import moment from "moment";
import slidearticle1 from "../mysy_img/Image_article2.jpg";
import slidearticle2 from "../mysy_img/Image_article1.png";
import img_met_digital from "../mysy_img/met_digital.jpg";
import connect_white from "../mysy_img/connect_white_v2.png";
import connect_green from "../mysy_img/connect_green.png";
@ -258,6 +251,7 @@ const DisplayDetailArticle_new_v2 = (props) => {
const [pagecanoniktitle, setpagecanoniktitle] = useState("");
const [pagecanonikurl, setpagecanonikurl] = useState(window.location.host);
const [article_img, setarticle_img] = useState("")
const [page_meta_description, setpage_meta_description] = useState("");
useEffect(() => {
@ -343,13 +337,20 @@ const DisplayDetailArticle_new_v2 = (props) => {
}
if (my_avis && my_avis.title_formation) {
setpagecanoniktitle(my_avis.title_formation)
setpagecanoniktitle(my_avis.title_formation);
}
if (my_avis && my_avis.meta_description) {
setpage_meta_description(my_avis.meta_description);
} else {
setpage_meta_description(my_avis.title_formation);
}
if (my_avis && my_avis.internal_url) {
setpagecanonikurl(my_avis.internal_url);
console.log(process.env.REACT_APP_BASE_URL+"/"+my_avis.internal_url);
console.log(process.env.REACT_APP_BASE_URL + "/" + my_avis.internal_url);
}
@ -939,15 +940,14 @@ const DisplayDetailArticle_new_v2 = (props) => {
<div className="DisplayDetailArticle">
<Helmet>
<title>{`${pagecanoniktitle}`}</title>
<meta name="description" content={`${pagecanoniktitle}`} />
<meta name="robots" content="index,follow" />
<meta name="title" content={`${pagecanoniktitle}`+". Nous sommes les moins cher du marché. Nous automatisons vos process : inscription, évaluation, émargement (qr-code), QUALIOPI, Personnalisation des documents, Gestion formateurs, Catalogue personnalisé, bilan pédagogique et financier (PBF). Nos options comme la signature électronique sont inclus dans le tarif de base."} />
<link rel="canonical" href={window.location.href} />
<Helmet>
<title>{`${pagecanoniktitle}`}</title>
<meta name="title" content={`${pagecanoniktitle}`} />
<meta name="description" content={`${page_meta_description}`} />
<meta name="robots" content="index,follow" />
<link rel="canonical" href={window.location.href} />
</Helmet>
</Helmet>
<Header />

View File

@ -314,11 +314,7 @@ function HebergementLms(props) {
const [Send_logo_Img_message, setSend_logo_Img_message] = useState();
function Send_logo_Img() {
clear_message();
setLoading(true);
const formData = new FormData();
formData.append('File', img_logo_file2);
//formData.append('token', 'K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA');

View File

@ -2889,7 +2889,7 @@ const Mon_Catalogue_Public = (props) => {
<Helmet>
<title>Formation & Tutoriel Gratuit ou payant Excellente qualité</title>
<meta name="description" content="Trouver des Formations et Tutoriels d'xcellente qualité : Gratuit ou payant / A distance ou en presentiel, etc." />
<meta name="description" content="(zzz)Trouver des Formations et Tutoriels d'excellente qualité : Gratuit ou payant / A distance ou en presentiel, etc." />
<meta name="robots" content="index,follow" />
<link rel="canonical" href={`${process.env.REACT_APP_BASE_URL}` + "/recherche-formation"} />
<meta name="title" content="Formation & Tutoriel Gratuit ou payant Excellente qualité" />

View File

@ -49,8 +49,49 @@ import { FcPlus } from "react-icons/fc";
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import CancelPresentationIcon from '@mui/icons-material/CancelPresentation';
import { IconButton } from '@material-ui/core';
import { makeStyles } from "@material-ui/core/styles";
import Paper from '@material-ui/core/Paper';
import Draggable from 'react-draggable';
function PaperComponent(props) {
return (
<Draggable
handle="#draggable-dialog-title"
cancel={'[class*="MuiDialogContent-root"]'}
>
<Paper {...props} />
</Draggable>
);
}
const useStyles = makeStyles((theme) => ({
dialog: {
position: 'absolute',
// left: 10,
top: 400
},
paper: {
overflowY: 'unset',
},
customizedButton: {
position: 'absolute',
left: '98%',
top: '-3%',
backgroundColor: 'lightgray',
color: 'gray',
},
}));
let PageSize = 5;
const RechercheArticles_new_v2 = (props) => {
const classes = useStyles();
const [userconnected, setuserconnected] = useState("");
const [SearchText, setSearchText] = useState("");
const [result, setResult] = useState("");
@ -744,9 +785,13 @@ const RechercheArticles_new_v2 = (props) => {
const [article_avis_internal_url, setarticle_avis_internal_url] = React.useState("");
const [article_avis_display_header_img, setarticle_avis_display_header_img] = React.useState(false);
const [article_avis_img_path, setarticle_avis_img_path] = React.useState("");
const [article_avis_meta_description, setarticle_avis_meta_description] = React.useState("");
function Add_Update_Article_Avis(e) {
clear_message();
setLoading(true);
var form = new FormData();
const stored_cookie = getCookie('tokenmysypart');
@ -756,6 +801,17 @@ const RechercheArticles_new_v2 = (props) => {
form.append("qualite", " --- ");
form.append("note", "---");
if (img_img_article_file2) {
form.append('File', img_img_article_file2);
form.append('img_file_name', img_img_article_file2.name);
}
else {
form.append('File', "");
form.append('img_file_name', "");
}
if (!article_avis_img_path || String(article_avis_img_path).trim() === "") {
alert(" Vous devez saisir une image à afficher avec l'article ");
return;
@ -788,8 +844,17 @@ const RechercheArticles_new_v2 = (props) => {
form.append("user_longitude", longitude);
form.append("user_state", state);
// Si une balise meta description n'est pas fourni, alors on lui donne le titre
var local_meta_description = "";
if (article_avis_meta_description) {
local_meta_description = String(article_avis_meta_description).trim().toLocaleLowerCase().substring(0, 154);
} else {
local_meta_description = String(article_avis_title_formation).trim().toLocaleLowerCase().substring(0, 154);
}
form.append("meta_description", state);
//console.log(" ## form = ", form);
console.log(" ## form = ", form);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/add_articles_avis/";
axios.post(myurl, form).then(res => {
@ -839,7 +904,231 @@ const RechercheArticles_new_v2 = (props) => {
]
const [publish_status, setpublish_status] = useState("published");
const [isLoading, setLoading] = useState();
/**** Gestion image de l'article */
const [logo_file_name, setlogo_file_name] = useState();
const hiddenFileInput_logo = React.useRef(null);
const [GetLms_Themes_img_article_Img, setGetLms_Themes_img_article_Img] = useState("");
const [handleSubmission_img_article_api, sethandleSubmission_img_article_api] = useState();
const [handleSubmission_img_article_result, sethandleSubmission_img_article_result] = useState();
const [handleSubmission_img_article_message, sethandleSubmission_img_article_message] = useState();
const [img_img_article_file, setimg_img_article_file] = useState();
const [img_bg_file, setimg_bg_file] = useState();
const [img_img_article_file2, setimg_img_article_file2] = useState();
const [img_bg_file2, setimg_bg_file2] = useState();
const handleSubmission_logo = event => {
clear_message();
const fileUploaded = event.target.files[0];
let file_size = event.target.files[0].size;
let file_type = event.target.files[0].type;
//console.log("file_size = ", file_size, " file_type = ", file_type);
//console.log(" fileUploaded = ", fileUploaded);
if (file_size > 1000000) {
alert("Le fichier ne doit pas dépasser un 1 Méga octets");
return;
}
//image/png
if (String(file_type) !== "image/png") {
alert("Le fichier n'est pas au format PNG");
return;
}
setLoading(true);
var _URL = window.URL || window.webkitURL;
var file, img;
var img_height, img_width;
if ((file = event.target.files[0])) {
img = new Image();
var objectUrl = _URL.createObjectURL(file);
img.onload = function () {
img_height = this.height;
img_width = this.width;
_URL.revokeObjectURL(objectUrl);
console.log(" img_width = ", img_width, " img_height = ", img_height)
if (parseFloat(img_width) > 130 && parseFloat(img_width) < 1000 &&
parseFloat(img_height) > 130 && parseFloat(img_height) < 1000) {
//console.log(" img_height est = ", img_height, " < à 1500 ");
// Verification que le nom du fichier est alpha numerique
/*var regExp = /^[A-Za-z0-9]+$/;
if (!regExp.test(event.target.files[0].name)) {
sethandleSubmission_img_article_message(" Le nom de l'image comporte des caractères non alphanumériques");
sethandleSubmission_img_article_api("false");
setLoading(false);
return
}*/
if (String(event.target.files[0].name).length > 50) {
sethandleSubmission_img_article_message(" Le nom du fichier est trop long. il doit faire moins de 50 caractère");
sethandleSubmission_img_article_api("false");
setLoading(false);
return
}
setlogo_file_name(event.target.files[0].name);
setimg_img_article_file(URL.createObjectURL(event.target.files[0]));
setimg_img_article_file2(event.target.files[0]);
} else {
sethandleSubmission_img_article_message(" La taille de l'image est incorrecte. Larg = " + String(img_width) + " px Long = " + String(img_height) + " px");
sethandleSubmission_img_article_api("false");
setLoading(false);
return;
}
//console.log(" after img_width = ", img_width, " after img_height = ", img_height)
};
img.src = objectUrl;
}
setLoading(false);
};
function clear_message() {
sethandleSubmission_img_article_message();
sethandleSubmission_img_article_api();
}
const [Send_img_article_Img_api, setSend_img_article_Img_api] = useState();
const [Send_img_article_Img_result, setSend_img_article_Img_result] = useState();
const [Send_img_article_Img_message, setSend_img_article_Img_message] = useState();
function Send_img_article_Img() {
clear_message();
setLoading(true);
const formData = new FormData();
formData.append('File', img_img_article_file2);
//formData.append('token', 'K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA');
const stored_cookie = getCookie('tokenmysypart');
formData.append("token", stored_cookie);
console.log(" ## le nom du fichier est : ", img_img_article_file2.name);
fetch(
process.env.REACT_APP_API_URL + "myclass/api/Blog_Img_Store_Article_Image/",
{
method: 'POST',
body: formData,
}
)
.then((response) => response.json())
.then((result) => {
//console.log('Success:', result['message']);
if (String(result['status']) === String("true")) {
setSend_img_article_Img_api("true");
alert(" La mise à jour du logo a été correctement effectuée. ");
} else if (String(result['status']) === String("Err_Connexion")) {
alert('Erreur: ' + result['message']);
history.push("/Connexion");
}
else {
setSend_img_article_Img_api("false");
setSend_img_article_Img_message(result['message']);
}
setLoading(false);
})
.catch((error) => {
console.error('Error:', result);
setSend_img_article_Img_api("false");
setSend_img_article_Img_message(result['message']);
setLoading(false);
});
}
const [Delete_img_article_Img_api, setDelete_img_article_Img_api] = useState();
const [Delete_img_article_Img_result, setDelete_img_article_Img_result] = useState();
const [Delete_img_article_Img_message, setDelete_img_article_Img_message] = useState();
function Delete_img_article_Img() {
clear_message();
setLoading(true);
const formData = new FormData();
//formData.append('token', 'K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA');
const stored_cookie = getCookie('tokenmysypart');
formData.append("token", stored_cookie);
fetch(
process.env.REACT_APP_API_URL + "myclass/api/Lms_Delete_img_article_File/",
{
method: 'POST',
body: formData,
}
)
.then((response) => response.json())
.then((result) => {
//console.log('Success:', result['message']);
if (String(result['status']) === String("true")) {
setDelete_img_article_Img_api("true");
setGetLms_Themes_img_article_Img('');
alert(" Le logo a été correctement supprimé ");
} else if (String(result['status']) === String("Err_Connexion")) {
alert('Erreur: ' + result['message']);
history.push("/Connexion");
}
else {
setDelete_img_article_Img_api("false");
setDelete_img_article_Img_message(result['message']);
}
setLoading(false);
})
.catch((error) => {
console.error('Error:', error);
setDelete_img_article_Img_api("false");
setDelete_img_article_Img_message(" Impossible de supprimer le fichier logo");
setLoading(false);
});
}
const changeHandler2_logo = (event) => {
clear_message();
hiddenFileInput_logo.current.click();
};
function Annule_img_article_img() {
clear_message();
setimg_img_article_file();
setimg_img_article_file2();
sethandleSubmission_img_article_message();
setSend_img_article_Img_api();
setSend_img_article_Img_message();
setlogo_file_name();
}
/***** Fin gestion de l'image de l'article */
return (
<div style={{ width: "100%", float: "left" }}>
@ -847,8 +1136,30 @@ const RechercheArticles_new_v2 = (props) => {
{/*** GESTION article */}
<Dialog
open={Dialog_article_avis_open}
onClose={Dialog_article_avis_handleClose}
// onClose={Dialog_article_avis_handleClose}
className="displaypartnersession"
static
onClose={() => null}
PaperProps={{
className: classes.paper, // Apply the paper style
style: {
overflowY: 'unset',
position: 'absolute',
top: '5rem',
margin: "2px",
},
}}
hideBackdrop={true}
disableScrollLock
classes={{
paper: classes.dialog
}}
PaperComponent={PaperComponent}
aria-labelledby="draggable-dialog-title"
>
<DialogTitle>Votre article </DialogTitle>
@ -951,6 +1262,124 @@ const RechercheArticles_new_v2 = (props) => {
<div className="div_row_dialog">
<div className="div_row_dialog" style={{ "textAlign": 'left' }}>
<b> Image Url (a poster) </b>
</div>
----------------
<div className="div_row_dialog" >
<div className="div_row"> Import du logo <br />
<div className="div_row" style={{ "border": "None" }}>
&nbsp;
</div>
<Button variant="outlined" onClick={changeHandler2_logo} className="detail_class_submenu" style={{
"background": "#c8cfd5",
"minWidth": "15rem", "color": "black", "width": "auto"
}}
id='menu_import_formation' name='menu_import_formation'>Choisir une image &nbsp; <br />
</Button><br />
<nav className="koUpdateData" style={{ "color": "orange" }}>
<Tooltip className="tooltip_css" id="tooltip_2" />
<a data-tooltip-id="tooltip_2" data-tooltip-html="Respecter ces critères vous aide à avoir un meilleur affichage">
<i> Important : Taille du logo : longueur entre 140px et 250px et largeur entre 60px et 150px, au format PNG <br />
Le nom du fichier ne contient que des caractères alphanumériques </i>
</a>
</nav>
{logo_file_name && <nav className="okUpdateData"><i>{logo_file_name}</i></nav>}
<input type="file"
accept=".png"
ref={hiddenFileInput_logo}
style={{ display: 'none' }}
name="liste_formation_file"
onChange={handleSubmission_logo}
/>
{img_img_article_file && <nav> Fichier à importer : {img_img_article_file.name} <br />
<img src={img_img_article_file} alt={""} />
<br />
</nav>}
{String(Send_img_article_Img_api) === "true" && <div className="okUpdateData"> La mise à jour a été correctement faite</div>}
{String(Send_img_article_Img_api) === "false" && <div className="koUpdateData"> {Send_img_article_Img_message}</div>}
{String(handleSubmission_img_article_api) === "false" && <div className="koUpdateData"> {handleSubmission_img_article_message}</div>}
<br />
<div className="div_row">
<div className="div_row" style={{ "border": "None" }}>
&nbsp;
</div>
{<div className="div_row" style={{ "border": "None", "color": "orange", "textAlign": "center" }}>
<div className="div_row_gauche " style={{ "textAlign": 'left', 'marginLeft': '15px' }}>
<Button variant="contained" className="btn_modif" onClick={Annule_img_article_img}>Annuler
</Button>
</div>
<div className="div_row_droite" style={{ "textAlign": 'right', 'marginRight': '15px' }}>
<Button variant="contained" className="btn_enreg" onClick={Send_img_article_Img}>Enregistrer
</Button>
</div>
</div>}
<div className="div_row" style={{ "border": "None" }}>
&nbsp;
</div>
</div>
</div>
---------------
</div>
</div>
<div className="div_row_dialog">
<div className="div_row_dialog" style={{ "textAlign": 'left' }}>
<b> Meta description </b>
<div className="div_row_dialog" >
<TextField
maxRows={4}
minRows={4}
inputProps={{ maxLength: 154 }}
multiline
sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
name="meta_description"
id="meta_description"
fullWidth
value={article_avis_meta_description}
onChange={(e) => {
setarticle_avis_meta_description(e.target.value);
setis_data_changed("1");
}
}
/>
</div>
</div>
</div>
<div className="div_row_dialog">
<div className="div_row_dialog" style={{ "textAlign": 'left' }}>
<b> Texte Article </b>
@ -1001,6 +1430,17 @@ const RechercheArticles_new_v2 = (props) => {
</DialogContent>
<DialogActions>
<IconButton
autoFocus
onClick={Dialog_article_avis_handleClose_buton}
color="primary"
className={classes.customizedButton}
>
<CancelPresentationIcon />
</IconButton>
<div className="div_row">
<div className="div_row_gauche">
<Button onClick={Dialog_article_avis_handleClose_buton} className="bton_annule_dialog" >Fermer</Button>
@ -1020,12 +1460,9 @@ const RechercheArticles_new_v2 = (props) => {
<div className="recherchearticles_new_v2_style">
<Helmet>
<title>Le blog, liste des articles</title>
<meta name="title" content={"Le blog, liste des articles"} />
<meta name="description" content="Le blog, liste des articles. Éditeur Français de logiciels pour organisme de formation. Avec solutions de E-Learning, gestion administrative et gestion relation client nous accompagnons les organismes de formation à réaliser laudit QUALIOPI en toute sérénité. Nous sommes les moins cher du marché. Nous vous accompagnons automatiser vos process : inscription, évaluation, émargement (qr-code), Check-list QUALIOPI, Personnalisation et édition documents, Gestion formateurs, Catalogue formations personnalisé. Nous sommes les moins cher du marché. Nous automatisons vos process : inscription, évaluation, émargement (qr-code), QUALIOPI, Personnalisation des documents, Gestion formateurs, Catalogue personnalisé, bilan pédagogique et financier (PBF). Nos options comme la signature électronique sont inclus dans le tarif de base." />
<meta name="robots" content="index,follow" />
<meta name="title" content="MySy Training, contactez-nous" />
<link rel="canonical" href={window.location.href} />