19/09/2024 - 20h

recette2
cherif 2024-09-19 20:26:55 +02:00
parent f5e6112d3c
commit 3dc82820b9
9 changed files with 2073 additions and 1122 deletions

View File

@ -570,74 +570,7 @@ const Formation = (props) => {
</div> </div>
{/* <div style={{ "width": "90%" }}>
<div className="criteres ftion_tab_gauche">
Type
</div>
<div className="criteres ftion_tab_droite">
{props.formation.type} &nbsp;
</div>
</div>
<div style={{ "width": "90%" }}>
<div className="criteres ftion_tab_gauche">
Support
</div>
<div className="criteres ftion_tab_droite">
{props.formation.support} &nbsp;
</div>
</div>
*/}
{/*props.formation.zone_diffusion && props.formation.zone_diffusion.country && <div style={{ "width": "100%" }}>
<div className="criteres ftion_tab_gauche">
Test : pays
</div>
<div className="criteres ftion_tab_droite">
{props.formation.zone_diffusion.country} &nbsp;
</div>
</div>*/}
{/*props.formation.zone_diffusion && props.formation.zone_diffusion.city && <div style={{ "width": "100%" }}>
<div className="criteres ftion_tab_gauche">
Test : Ville
</div>
<div className="criteres ftion_tab_droite">
{props.formation.zone_diffusion.city} &nbsp;
</div>
</div>*/}
{/*
{props.formation.presentiel && props.formation.presentiel.presentiel &&
<div style={{ "width": "100%" }}>
<div className="criteres ftion_tab_gauche">
Presentiel
</div>
<div className="criteres ftion_tab_droite">
{props.formation.presentiel.presentiel} &nbsp;
</div>
</div>}
{props.formation.presentiel && props.formation.presentiel.distantiel &&
<div style={{ "width": "100%" }}>
<div className="criteres ftion_tab_gauche">
Distantiel
</div>
<div className="criteres ftion_tab_droite">
{props.formation.presentiel.distantiel} &nbsp;
</div>
</div>}
*/}
</div>} </div>}
@ -707,20 +640,7 @@ const Formation = (props) => {
</div>} </div>}
</div> </div>
{/*<div style={{ "width": "100%", "float": "right" }}>
<div className="criteres ftion_tab_gauche">
Type
</div>
{props.formation.type &&
<div className="criteres ftion_tab_droite">
{props.formation.type}
</div>}
{!props.formation.type &&
<div className="criteres ftion_tab_droite">
NC
</div>}
</div>*/}
</div> </div>

View File

@ -0,0 +1,717 @@
import React, { useState, useEffect } from "react";
import ReactPlayer from 'react-player'
import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from "react-share";
import { SocialIcon } from 'react-social-icons';
import { Button, } from "reactstrap";
import { useHistory } from "react-router-dom";
import { Helmet } from "react-helmet";
import { useCookies } from "react-cookie";
import { confirmAlert } from 'react-confirm-alert';
import topimg from "../mysy_img/top.png";
import coeurimg from "../mysy_img/coeur.png";
import img_met_program from "../mysy_img/met_programmation.jpg";
import img_met_hotel from "../mysy_img/met_hotel.jpg";
import img_met_graphisme from "../mysy_img/metier_graphisme.jpg";
import img_met_autre from "../mysy_img/met_autre.jpg";
import img_met_digital from "../mysy_img/met_digital.jpg";
import img_met_management from "../mysy_img/met_management.jpg";
import img_met_projet from "../mysy_img/met_projet.jpg";
import img_met_market from "../mysy_img/met_market.jpg";
import img_met_autre2 from "../mysy_img/met_autre2.jpg";
import img_met_dev_perso from "../mysy_img/metier_dev_perso.jpg";
import img_met_rh from "../mysy_img/met_rh.jpg";
import img_met_bureautic from "../mysy_img/met_burautic.jpg";
import img_met_vente from "../mysy_img/met_vente.jpg";
import axios from "axios";
//import { Rating } from 'react-simple-star-rating'
import Rating from '@mui/material/Rating';
import parse from 'html-react-parser'
import { CiLocationOn } from "react-icons/ci";
const Formation_Grid_2Col = (props) => {
const [userconnected, setuserconnected] = useState("0");
const [partnerconnected, setpartnerconnected] = useState("0");
const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']);
const [cookie_part, setCookie_part, removeCookie_part] = useCookies(['tokenmysypart']);
const history = useHistory();
const [myfilter, setmyfilter] = useState(props.formation.price);
const [profileimg, setprofileimg] = useState(props.formation.price);
// Gestion des Cookies
const stored_partner = cookie_part.tokenmysypart;
const stored_user = cookie.tokenmysych;
function test(val) {
if (userconnected === "0" && partnerconnected === "0") {
confirmAlert({
title: 'Activer votre session ?',
message: 'Merci de vous connecter pour acceder au detail de cette formation',
buttons: [
{
label: 'Oui',
onClick: () => { history.push("/mysy-training-login/training/" + props.formation.internal_url) }
},
{
label: 'Non',
onClick: () => { return }
}
],
closeOnEscape: false,
closeOnClickOutside: false,
keyCodeForClose: [8, 32],
willUnmount: () => { },
afterClose: () => { },
onClickOutside: () => { },
onKeypress: () => { },
onKeypressEscape: () => { },
});
} else {
window.open(
"/Display-Detail-formation/" + props.formation.internal_url,
'_blank'
);
}
}
const [myclassimage, setmyclassimage] = useState();
const [isclassimage, setisclassimage] = useState("False");
const [userimgclassprofil, setuserimgclassprofil] = useState("");
const [class_img_stored_in_bdd, setclass_img_stored_in_bdd] = useState("");
function getClassImage_no_token() {
var myurl = process.env.REACT_APP_API_URL + "myclass/api/getRecodedClassImage_no_token/";
var form = new FormData();
form.append("type", "partner");
form.append("related_collection", "myclass");
form.append("related_collection_recid", props.formation._id);
form.append("class_external_code", props.formation.external_code);
axios.post(myurl, form).then(res => {
if (res.data.status != "False") {
//console.log(" getClassImage : In test res.data.status = " + res.data.status);
//console.log(" getClassImage: res.data.message.img = " + res.data.message);
if (res.data.message.img.length > 0) {
setisclassimage("True");
}
else {
setisclassimage("False");
}
setisclassimage(res.data.message.img);
var ch_img = "data:image/png;base64," + res.data.message.img;
setclass_img_stored_in_bdd(ch_img);
}
else {
//console.log(" In Erreur res.data.status = " + res.data.status);
//console.log(" In Erreur res.data.message = " + res.data.message);
setisclassimage("False");
setuserimgclassprofil();
setclass_img_stored_in_bdd();
}
}).catch((error) => {
console.warn('getClassImage ee: Not good man :( getClassImage = ');
setisclassimage("False");
setuserimgclassprofil("");
setclass_img_stored_in_bdd("");
})
}
/* Cette variable accompagne la gestion des images par defaut.
idée : si la valeur de "DetailTraining.metier" != "management, digital, office, rh, vente, dev_perso"
alors l'utilisateur à créer une formation avec un metier qui n'est pas geré, donc on met une image par defaut
*/
const [ismetiermanaged, setismetiermanaged] = useState();
const liste_metier = ["management", "digital", "office", "rh", "vente", "dev_perso"];
useEffect(() => {
setmyfilter(props.myfil);
if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
setuserconnected("0");
} else {
setuserconnected("1");
}
if (typeof (stored_partner) === "undefined" || String(stored_partner) === '') {
setpartnerconnected("0");
} else {
setpartnerconnected("1");
}
getClassImage_no_token();
GetCurrentClass_trainingsession();
GetCurrentClass_trainingsession_cities();
// Verifier si le metier est geré
if (props.formation.metier) {
if (!liste_metier.includes(props.formation.metier)) {
setismetiermanaged("0"); // j'ai une valeur dans metier, mais qui n'est pas geré
}
}
else {
setismetiermanaged("0");
}
if (props.formation.img_url && String(props.formation.img_url).length > 0) {
setismetiermanaged("1");
}
}, []);
const [GetCurrentClass_api, setGetCurrentClass_api] = useState();
const [GetCurrentClass_message, setGetCurrentClass_message] = useState();
const [GetCurrentClass_result, setGetCurrentClass_result] = useState();
function GetCurrentClass_trainingsession(event) {
var form = new FormData();
form.append("class_internal_url", props.formation.internal_url);
form.append("token", stored_partner);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/GetActiveSessionFormation_List/";
axios.post(myurl, form).then(res => {
if (res.data.status != "false") {
//console.log(" In GetCurrentClass_trainingsession res.data.status = " + res.data.status);
//console.log(" In GetCurrentClass_trainingsession res.data.message r_class = " + res.data.message);
setGetCurrentClass_api("true");
setGetCurrentClass_result(res.data.message);
}
else {
setGetCurrentClass_api("false");
setGetCurrentClass_message(res.data.message);
}
}).catch((error) => {
console.warn('Not good man :( GetCurrentClass_trainingsession = ', error);
setGetCurrentClass_api("false");
//setmyApimyApiMessage("")
})
}
const [GetCurrentClass_trainingsession_cities_api, setGetCurrentClass_trainingsession_cities_api] = useState();
const [GetCurrentClass_trainingsession_cities_message, setGetCurrentClass_trainingsession_cities_message] = useState();
const [GetCurrentClass_trainingsession_cities_result, setGetCurrentClass_trainingsession_cities_result] = useState([]);
function GetCurrentClass_trainingsession_cities(event) {
var form = new FormData();
form.append("class_internal_url", props.formation.internal_url);
form.append("token", stored_partner);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/GetActiveSession_Cities_And_Distance_Formation_List/";
axios.post(myurl, form).then(res => {
if (res.data.status != "false") {
//console.log(" In GetCurrentClass_trainingsession_cities res.data.status = " + res.data.status);
//console.log(" In GetCurrentClass_trainingsession_cities res.data.message r_class = " + res.data.message);
setGetCurrentClass_trainingsession_cities_api("true");
setGetCurrentClass_trainingsession_cities_result(res.data.message);
}
else {
setGetCurrentClass_trainingsession_cities_api("false");
setGetCurrentClass_trainingsession_cities_message(res.data.message);
}
}).catch((error) => {
console.warn('Not good man :( GetCurrentClass_trainingsession_cities = ', error);
setGetCurrentClass_trainingsession_cities_api("false");
//setmyApimyApiMessage("")
})
}
const [Grid_limit_Title, setGrid_limit_Title] = useState(50);
const [Grid_limit_Desc, setGrid_limit_Desc] = useState(100);
return (
<div className="formation">
<div style={{ "width": "100%" }}>
{class_img_stored_in_bdd && String(class_img_stored_in_bdd).length > 50 && <div className="forma_img_gauche">
<img src={class_img_stored_in_bdd} alt="informatique" className="training_img" />
</div>
}
{(!class_img_stored_in_bdd || String(class_img_stored_in_bdd).length < 50) && String(ismetiermanaged) !== "0" && String(ismetiermanaged) !== "1" && <div className="forma_img_gauche">
{(!props.formation.img_url || String(props.formation.img_url).length <= 0) &&
props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("it") &&
String(isclassimage) === "False" && <img src={img_met_program} alt="informatique" className="training_img" />}
{(!props.formation.img_url || String(props.formation.img_url).length <= 0) &&
props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("graphisme") &&
String(isclassimage) === "False" && <img src={img_met_graphisme} alt="graphisme" className="training_img" />}
{(!props.formation.img_url || String(props.formation.img_url).length <= 0) &&
props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("management") &&
String(isclassimage) === "False" && <img src={img_met_management} alt="management" className="training_img" />}
{(!props.formation.img_url || String(props.formation.img_url).length <= 0) &&
props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("digital") &&
String(isclassimage) === "False" && <img src={img_met_digital} alt="digital" className="training_img" />}
{(!props.formation.img_url || String(props.formation.img_url).length <= 0) &&
props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("office") &&
String(isclassimage) === "False" && <img src={img_met_bureautic} alt="office" className="training_img" />}
{!props.formation.img_url || String(props.formation.img_url).length <= 0 &&
props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("rh") &&
String(isclassimage) === "False" && <img src={img_met_rh} alt="ressources humaines" className="training_img" />}
{!props.formation.img_url || String(props.formation.img_url).length <= 0 &&
props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("vente") &&
String(isclassimage) === "False" && <img src={img_met_vente} alt="vente" className="training_img" />}
{!props.formation.img_url || String(props.formation.img_url).length <= 0 &&
props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("dev_perso") &&
String(isclassimage) === "False" && <img src={img_met_dev_perso} alt="developpement personnel" className="training_img" />}
{String(isclassimage) === "True" && <img src={userimgclassprofil} alt="developpement personnel" className="training_img" />}
</div>
}
{(!class_img_stored_in_bdd || String(class_img_stored_in_bdd).length < 50) && String(ismetiermanaged) === "0" && String(userimgclassprofil).length > 100 && <div className="forma_img_gauche">
<img src={userimgclassprofil} alt="autre" className="training_img" />
{props.formation.institut_formation && <div style={{ width: '100%', "textAlign": "center" }}> Dispensé par :<br /> {String(props.formation.institut_formation)} </div>}
</div>}
{(!class_img_stored_in_bdd || String(class_img_stored_in_bdd).length < 50) && String(ismetiermanaged) === "0" && String(userimgclassprofil).length <= 100 && <div className="forma_img_gauche">
<img src={img_met_autre} alt="autre" className="training_img" />
{props.formation.institut_formation && <div style={{ width: '100%', "textAlign": "center" }}> Dispensé par :<br /> {String(props.formation.institut_formation)} </div>}
</div>}
{(!class_img_stored_in_bdd || String(class_img_stored_in_bdd).length < 50) && String(ismetiermanaged) === "1" && <div className="forma_img_gauche">
<img src={props.formation.img_url} alt="autre" className="training_img" />
{props.formation.institut_formation && <div style={{ width: '100%', "textAlign": "center" }}> Dispensé par : <br /> {String(props.formation.institut_formation)} </div>}
</div>}
<div className="forma_rightbox"
onClick={(e) => {
e.preventDefault();
if (props.formation.url && props.formation.url.length > 5) {
window.open(
props.formation.url,
'_blank'
);
} else {
window.open(
"/Display-Detail-formation/" + props.formation.internal_url,
'_blank'
);
}
}}>
<div className="p_forma">
<div className="div_row">
<div className="div_row_gauche" style={{ "marginTop": "5px" }}>
{props.formation.note && String(props.formation.note).length === 1 &&
parseInt(String(props.formation.note)) <= 5 &&
<Rating name="half-rating-read" defaultValue={props.formation.note} precision={0.5} readOnly />
}
</div>
<div className="div_row_droite div_row_droite_cpf">
<div className="block_cpf">
<div className="block_cpf_txt">
{props.formation.cpf && String(props.formation.cpf) === String("1") &&
<div>
OUI Éligible au CPF &nbsp;
</div>}
{props.formation.cpf && String(props.formation.cpf) !== String("1") &&
<div>
NON Éligible au CPF &nbsp;
</div>}
{!props.formation.cpf &&
<div>
NON Éligible au CPF &nbsp;
</div>}
</div>
</div>
</div>
</div>
<div className="div_row row_formation_title">
<p className="p_class training_title">
<b>
{String(parse(String(props.formation.title).replace(/(<([^>]+)>)/ig, ''))).substring(0, 20)}...
</b>
</p>
</div>
<div className="div_row">
{String(props.formation.price).length == 9 &&
<div className="training_price" > <i>Prix : Non communiqué</i> &nbsp;
</div>
}
{String(props.formation.price).length != 9 && String(props.formation.price) === String("0") &&
<div className="training_price">Gratuit &nbsp;
</div>
}
{String(props.formation.price).length != 9 && String(props.formation.price) !== String("0") && (!props.formation.business_prices ||
Object.keys(props.formation.business_prices).length <= 0) &&
<div className="training_price">{props.formation.price} HT&nbsp;
</div>
}
{String(props.formation.price).length != 9 && String(props.formation.price) !== String("0") &&
props.formation.business_prices && Object.keys(props.formation.business_prices).length > 0 &&
<div className="training_price">
<nav className="discounted_price">{String(props.formation.business_prices[0].discounted_price)} HT</nav>
<nav className="training_price_barre">
{props.formation.price} HT&nbsp;
</nav>
<nav className="discount_block"> (- {String(props.formation.business_prices[0].discount)} % )
</nav>
</div>
}
</div>
<div className="div_row row_formation_desc">
{parse(String(props.formation.description).replace(/(<([^>]+)>)/ig, '')).substring(0, 150)}
</div>
{GetCurrentClass_trainingsession_cities_result && GetCurrentClass_trainingsession_cities_result.length > 0 &&
<nav style={{ "width": "100%", "float": "left", "textAlign": "left", "color": "#619E31" }}>
<nav style={{ "width": "auto", "float": "left" }}>
<CiLocationOn className="icone_location" />&nbsp; </nav>
{GetCurrentClass_trainingsession_cities_result && GetCurrentClass_trainingsession_cities_result.sort().slice(0, 5).map((formation_ville) => (
<nav style={{ "width": "auto", "float": "left" }}>
{formation_ville &&
<b> {formation_ville.replaceAll('"', '').substring(0, 20).toLocaleLowerCase().charAt(0).toUpperCase() +
formation_ville.replaceAll('"', '').substring(0, 20).toLocaleLowerCase().slice(1)} &nbsp;&nbsp; </b>
}
</nav>
))}
</nav>
}
{!GetCurrentClass_result || GetCurrentClass_result.length <= 0 &&
<nav style={{ "width": "auto", "float": "left" }}> <CiLocationOn className="icone_location" />&nbsp; A venir
</nav>
}
</div>
</div>
<div className="div_row row_formation_crit">
<hr style={{ "width": "90%", "marginLeft": "auto", "marginRight": "auto", "marginBottom": "2px", "marginTop": "2px" }} />
<div className="div_row_gauche div_row_gauche_critere" >
<div className="div_row_critere" style={{ "marginTop": "0.5rem", "marginBottom": "0.3rem" }}>
{!props.formation.extented_search &&
<div className="div_row_gauche">
{props.formation.duration_unit &&
<div style={{ "width": "100%" }}>
<div className="criteres ftion_tab_gauche">Durée
</div>
{String(props.formation.duration_unit) === "heure" &&
<div className="criteres ftion_tab_droite">
{props.formation.duration} hr(s) &nbsp;
</div>}
{String(props.formation.duration_unit) === "heures" &&
<div className="criteres ftion_tab_droite">
{props.formation.duration} hr(s) &nbsp;
</div>}
{String(props.formation.duration_unit) === "jour" &&
<div className="criteres ftion_tab_droite">
{props.formation.duration} jr(s) &nbsp;
</div>}
{String(props.formation.duration_unit) === "mois" &&
<div className="criteres ftion_tab_droite">
{props.formation.duration} mois(s)
</div>}
{String(props.formation.duration_unit) === "semaine" &&
<div className="criteres ftion_tab_droite">
{props.formation.duration} Sem (s)
</div>}
{String(props.formation.duration_unit) === "user_rythme" &&
<div className="criteres ftion_tab_droite">
A votre rythme
</div>}
</div>
}
{!props.formation.duration_unit &&
<div style={{ "width": "100%" }}>
<div className="criteres ftion_tab_gauche">Durée
</div>
{props.formation.duration && <div className="criteres ftion_tab_droite">
{props.formation.duration} jr(s) &nbsp;
</div>}
{!props.formation.duration && <div className="criteres ftion_tab_droite">
<i> En traitement &nbsp; </i>
</div>}
</div>
}
<div style={{ "width": "100%" }}>
<div className="criteres ftion_tab_gauche">
Certification
</div>
<div className="criteres ftion_tab_droite">
{props.formation.certif && String(props.formation.certif) === String("1") &&
<div>
Oui &nbsp;
</div>}
{props.formation.certif && String(props.formation.certif) !== String("1") &&
<div>
Non &nbsp;
</div>}
{!props.formation.certif &&
<div>
NC &nbsp;
</div>}
</div>
</div>
<div className="media_sociaux" style={{ 'float': "left", marginTop: "0.2rem", }}>
<FacebookShareButton
url={"https://www.mysy-training.com/Display-Detail-formation/" + props.formation.internal_url}
quote={props.formation.title + " -- " + props.formation.description}
hashtag={"ySyTraining"}
>
<SocialIcon network="facebook" style={{ height: 20, width: 20 }} />
</FacebookShareButton>
&nbsp;
<TwitterShareButton
url={"https://www.mysy-training.com/Display-Detail-formation/" + props.formation.internal_url}
hashtag={"#MySy-Formation"}
>
<SocialIcon network="twitter" style={{ height: 20, width: 20 }} />
</TwitterShareButton>
&nbsp;
<LinkedinShareButton
url={"https://www.mysy-training.com/Display-Detail-formation/" + props.formation.internal_url}
title={" Une nouvelle formation : " + props.formation.title}
summary={props.formation.title + " -- " + props.formation.description}
source={"https://www.mysy-training.com/"}
>
<SocialIcon network="linkedin" style={{ height: 20, width: 20 }} />
</LinkedinShareButton>
</div>
</div>}
<div className="div_row_droite" style={{ textAlign: "center" }}>
{String(props.formation.coeur) === String("1") && <div>
<img class="imgcoeur" src={coeurimg} alt="coup de coeur" />
</div>}
<div style={{ "width": "100%", "float": "right" }}>
<div className="criteres ftion_tab_gauche">
Sur site
</div>
{props.formation.presentiel && props.formation.presentiel.presentiel &&
String(props.formation.presentiel.presentiel) === String("1") && <div className="criteres ftion_tab_droite">
Oui
</div>}
{props.formation.presentiel && props.formation.presentiel.presentiel &&
String(props.formation.presentiel.presentiel) !== String("1") && <div className="criteres ftion_tab_droite">
Non
</div>}
{!props.formation.presentiel || !props.formation.presentiel.presentiel &&
<div className="criteres ftion_tab_droite">
NC
</div>}
</div>
<div style={{ "width": "100%", "float": "right" }}>
<div className="criteres ftion_tab_gauche">
A distance
</div>
{props.formation.presentiel && props.formation.presentiel.distantiel &&
String(props.formation.presentiel.distantiel) === String("1") && <div className="criteres ftion_tab_droite">
Oui
</div>}
{props.formation.presentiel && props.formation.presentiel.distantiel &&
String(props.formation.presentiel.distantiel) !== String("1") && <div className="criteres ftion_tab_droite">
Non
</div>}
{!props.formation.presentiel || !props.formation.presentiel.distantiel &&
<div className="criteres ftion_tab_droite">
NC
</div>}
</div>
<div style={{ "width": "100%", "float": "right" }}>
<div className="criteres ftion_tab_gauche">
Support
</div>
{props.formation.support &&
<div className="criteres ftion_tab_droite">
{props.formation.support}
</div>}
{!props.formation.support &&
<div className="criteres ftion_tab_droite">
NC
</div>}
</div>
</div>
</div>
</div>
<div className="div_row_droite div_row_droite_critere" >
{!props.formation.extented_search && props.formation.coeur != "1" &&
<div style={{ 'float': "right", "width": "100%", textAlign: "right", marginTop: "0rem", }}>
<Button className="bton_se_renseinger"
onClick={(e) => {
e.preventDefault();
if (props.formation.url && props.formation.url.length > 5) {
window.open(
props.formation.url,
'_blank'
);
} else {
window.open(
"/Display-Detail-formation/" + props.formation.internal_url + "/Information",
'_blank'
);
}
}}
>Se renseigner </Button>
<Button className="bton_voir_detail"
onClick={(e) => {
e.preventDefault();
//test(props.formation.external_code);
if (props.formation.url && props.formation.url.length > 5) {
window.open(
props.formation.url,
'_blank'
);
} else {
window.open(
"/Display-Detail-formation/" + props.formation.internal_url,
'_blank'
);
}
}}
>Voir details</Button>
</div>}
</div>
</div>
</div>
</div>
)
}
export default Formation_Grid_2Col;

View File

@ -30,7 +30,7 @@ import axios from "axios";
import Rating from '@mui/material/Rating'; import Rating from '@mui/material/Rating';
import parse from 'html-react-parser' import parse from 'html-react-parser'
import { CiLocationOn } from "react-icons/ci"; import { CiLocationOn } from "react-icons/ci";
const Formation_Partner_Catalog = (props) => { const Formation_Partner_Catalog = (props) => {
const [userconnected, setuserconnected] = useState("0"); const [userconnected, setuserconnected] = useState("0");
const [partnerconnected, setpartnerconnected] = useState("0"); const [partnerconnected, setpartnerconnected] = useState("0");

View File

@ -29,8 +29,9 @@ import axios from "axios";
//import { Rating } from 'react-simple-star-rating' //import { Rating } from 'react-simple-star-rating'
import Rating from '@mui/material/Rating'; import Rating from '@mui/material/Rating';
import parse from 'html-react-parser' import parse from 'html-react-parser'
import { CiLocationOn } from "react-icons/ci";
const Formation_copie = (props) => { const Formation_Partner_Catalog_Grid_2Col = (props) => {
const [userconnected, setuserconnected] = useState("0"); const [userconnected, setuserconnected] = useState("0");
const [partnerconnected, setpartnerconnected] = useState("0"); const [partnerconnected, setpartnerconnected] = useState("0");
const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']); const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']);
@ -73,7 +74,7 @@ const Formation_copie = (props) => {
}); });
} else { } else {
window.open( window.open(
"/Display-Detail-formation/" + props.formation.internal_url, "/Display-Partner-Catalog-Detail-formation/" + props.formation.internal_url,
'_blank' '_blank'
); );
} }
@ -83,60 +84,66 @@ const Formation_copie = (props) => {
const [myclassimage, setmyclassimage] = useState(); const [myclassimage, setmyclassimage] = useState();
const [isclassimage, setisclassimage] = useState("False"); const [isclassimage, setisclassimage] = useState("False");
const [userimgclassprofil, setuserimgclassprofil] = useState(); const [userimgclassprofil, setuserimgclassprofil] = useState("");
function getClassImage(e) { const [class_img_stored_in_bdd, setclass_img_stored_in_bdd] = useState("");
var myurl = process.env.REACT_APP_API_URL + "myclass/api/getRecodedClassImage_from_front/";
var class_external_code = props.formation.external_code; function getClassImage_no_token() {
var myurl = process.env.REACT_APP_API_URL + "myclass/api/getRecodedClassImage_no_token/";
if (class_external_code.length < 3) {
//console.log("Le code externe prend au moins 3 caractères");
return;
}
//console.log(" class_external_code = " + class_external_code);
var form = new FormData(); var form = new FormData();
form.append("class_external_code", class_external_code);
form.append("type", "partner");
form.append("related_collection", "myclass");
form.append("related_collection_recid", props.formation._id);
form.append("class_external_code", props.formation.external_code);
axios.post(myurl, form).then(res => { axios.post(myurl, form).then(res => {
if (res.data.status != "False") { if (res.data.status != "False") {
//console.log(" getClassImage : In test res.data.status = " + res.data.status); //console.log(" getClassImage : In test res.data.status = " + res.data.status);
//console.log(" getClassImage: res.data.message.img = " + res.data.message); //console.log(" getClassImage: res.data.message.img = " + res.data.message);
if (res.data.message.img.length > 0) { if (res.data.message.img.length > 0) {
setisclassimage("True"); setisclassimage("True");
//console.log(" getClassImage : In test res.data.status = " + res.data.status);
//console.log(" getClassImage: res.data.message.img = " + res.data.message);
var ch_img = "data:image/png;base64," + res.data.message.img;
setuserimgclassprofil(ch_img);
//console.log("ch_img = "+ch_img);
} }
else { else {
setisclassimage("False"); setisclassimage("False");
} }
setisclassimage(res.data.message.img);
var ch_img = "data:image/png;base64," + res.data.message.img;
setclass_img_stored_in_bdd(ch_img);
} }
else { else {
//console.log(" In Erreur res.data.status = " + res.data.status); //console.log(" In Erreur res.data.status = " + res.data.status);
//console.log(" In Erreur res.data.message = " + res.data.message); //console.log(" In Erreur res.data.message = " + res.data.message);
setisclassimage("False"); setisclassimage("False");
setuserimgclassprofil(); setuserimgclassprofil();
//alert("4"); setclass_img_stored_in_bdd();
} }
}).catch((error) => { }).catch((error) => {
console.warn('getClassImage ii : Not good man :( getClassImage = ');
console.warn('getClassImage ee: Not good man :( getClassImage = ');
setisclassimage("False"); setisclassimage("False");
setuserimgclassprofil(profileimg); setuserimgclassprofil("");
setclass_img_stored_in_bdd("");
}) })
} }
/* Cette variable accompagne la gestion des images par defaut.
idée : si la valeur de "DetailTraining.metier" != "management, digital, office, rh, vente, dev_perso"
alors l'utilisateur à créer une formation avec un metier qui n'est pas geré, donc on met une image par defaut
*/
const [ismetiermanaged, setismetiermanaged] = useState();
const liste_metier = ["management", "digital", "office", "rh", "vente", "dev_perso"];
useEffect(() => { useEffect(() => {
setmyfilter(props.myfil); setmyfilter(props.myfil);
@ -152,9 +159,25 @@ const Formation_copie = (props) => {
setpartnerconnected("1"); setpartnerconnected("1");
} }
getClassImage(); getClassImage_no_token();
GetCurrentClass_trainingsession(); GetCurrentClass_trainingsession();
GetCurrentClass_trainingsession_cities();
// Verifier si le metier est geré
if (props.formation.metier) {
if (!liste_metier.includes(props.formation.metier)) {
setismetiermanaged("0"); // j'ai une valeur dans metier, mais qui n'est pas geré
}
}
else {
setismetiermanaged("0");
}
if (props.formation.img_url && String(props.formation.img_url).length > 0) {
setismetiermanaged("1");
}
}, []); }, []);
@ -166,9 +189,9 @@ const Formation_copie = (props) => {
var form = new FormData(); var form = new FormData();
form.append("class_internal_url", props.formation.internal_url); form.append("class_internal_url", props.formation.internal_url);
const stored_cookie = getCookie('tokenmysypart');
form.append("token", stored_cookie); form.append("token", stored_partner);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/GetActiveSessionFormation_List/"; var myurl = process.env.REACT_APP_API_URL + "myclass/api/GetActiveSessionFormation_List/";
axios.post(myurl, form).then(res => { axios.post(myurl, form).then(res => {
@ -192,18 +215,52 @@ const Formation_copie = (props) => {
} }
const [GetCurrentClass_trainingsession_cities_api, setGetCurrentClass_trainingsession_cities_api] = useState();
const [GetCurrentClass_trainingsession_cities_message, setGetCurrentClass_trainingsession_cities_message] = useState();
const [GetCurrentClass_trainingsession_cities_result, setGetCurrentClass_trainingsession_cities_result] = useState([]);
function GetCurrentClass_trainingsession_cities(event) {
var form = new FormData();
form.append("class_internal_url", props.formation.internal_url);
form.append("token", stored_partner);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/GetActiveSession_Cities_And_Distance_Formation_List/";
axios.post(myurl, form).then(res => {
if (res.data.status != "false") {
//console.log(" In GetCurrentClass_trainingsession_cities res.data.status = " + res.data.status);
//console.log(" In GetCurrentClass_trainingsession_cities res.data.message r_class = " + res.data.message);
setGetCurrentClass_trainingsession_cities_api("true");
setGetCurrentClass_trainingsession_cities_result(res.data.message);
}
else {
setGetCurrentClass_trainingsession_cities_api("false");
setGetCurrentClass_trainingsession_cities_message(res.data.message);
}
}).catch((error) => {
console.warn('Not good man :( GetCurrentClass_trainingsession_cities = ', error);
setGetCurrentClass_trainingsession_cities_api("false");
//setmyApimyApiMessage("")
})
}
return ( return (
<div className="formation"> <div className="formation_partner_catalog">
<div style={{ "width": "100%" }}> <div style={{ "width": "100%" }}>
<div className="forma_img_gauche">
{props.formation.img_url && String(props.formation.img_url).length > 0 && String(isclassimage) === "False" &&
<img src={`${props.formation.img_url}`} className="training_img" />}
{(!props.formation.img_url || String(props.formation.img_url).length <= 0) && {class_img_stored_in_bdd && String(class_img_stored_in_bdd).length > 50 && <div className="forma_img_gauche">
String(isclassimage) === "False" && <img src={class_img_stored_in_bdd} alt="informatique" className="training_img" />
!props.formation.metier && <img src={img_met_autre} alt="autre" className="training_img" />} </div>
}
{(!class_img_stored_in_bdd || String(class_img_stored_in_bdd).length < 50) && String(ismetiermanaged) !== "0" && String(ismetiermanaged) !== "1" && <div className="forma_img_gauche">
{(!props.formation.img_url || String(props.formation.img_url).length <= 0) && {(!props.formation.img_url || String(props.formation.img_url).length <= 0) &&
props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("it") && props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("it") &&
@ -241,26 +298,58 @@ const Formation_copie = (props) => {
</div> </div>
}
{(!class_img_stored_in_bdd || String(class_img_stored_in_bdd).length < 50) && String(ismetiermanaged) === "0" && String(userimgclassprofil).length > 100 && <div className="forma_img_gauche">
<img src={userimgclassprofil} alt="autre" className="training_img" />
{props.formation.institut_formation && <div style={{ width: '100%', "textAlign": "center" }}> Dispensé par :<br /> {String(props.formation.institut_formation)} </div>}
</div>}
{(!class_img_stored_in_bdd || String(class_img_stored_in_bdd).length < 50) && String(ismetiermanaged) === "0" && String(userimgclassprofil).length <= 100 && <div className="forma_img_gauche">
<img src={img_met_autre} alt="autre" className="training_img" />
{props.formation.institut_formation && <div style={{ width: '100%', "textAlign": "center" }}> Dispensé par :<br /> {String(props.formation.institut_formation)} </div>}
</div>}
{(!class_img_stored_in_bdd || String(class_img_stored_in_bdd).length < 50) && String(ismetiermanaged) === "1" && <div className="forma_img_gauche">
<img src={props.formation.img_url} alt="autre" className="training_img" />
{props.formation.institut_formation && <div style={{ width: '100%', "textAlign": "center" }}> Dispensé par : <br /> {String(props.formation.institut_formation)} </div>}
</div>}
<div className="forma_rightbox" <div className="forma_rightbox"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
if (props.formation.url && props.formation.url.length > 5) {
window.open( window.open(
"/Display-Detail-formation/" + props.formation.internal_url, props.formation.url,
'_blank' '_blank'
); );
} else {
window.open(
"/Display-Partner-Catalog-Detail-formation/" + props.formation.internal_url,
'_blank'
);
}
}}> }}>
<div className="p_forma"> <div className="p_forma">
<div className="div_row"> <div className="div_row">
<div className="div_row_gauche" style={{ "marginTop": "5px" }}> <div className="div_row_gauche" style={{ "marginTop": "5px" }}>
<Rating name="half-rating-read" defaultValue={props.formation.note} precision={0.5} readOnly /> {props.formation.note && String(props.formation.note).length === 1 &&
parseInt(String(props.formation.note)) <= 5 &&
<Rating name="half-rating-read" defaultValue={props.formation.note} precision={0.5} readOnly />
}
</div> </div>
<div className="div_row_droite div_row_droite_cpf"> <div className="div_row_droite div_row_droite_cpf">
<div className="block_cpf"> <div className="block_cpf">
<div className="block_cpf_txt"> <div className="block_cpf_txt">
{props.formation.cpf && String(props.formation.cpf) === String("1") && {props.formation.cpf && String(props.formation.cpf) === String("1") &&
<div> <div>
OUI Éligible au CPF &nbsp; OUI Éligible au CPF &nbsp;
@ -281,10 +370,10 @@ const Formation_copie = (props) => {
</div> </div>
</div> </div>
<div className="div_row"> <div className="div_row row_formation_title">
<p className="p_class training_title"> <p className="p_class training_title">
<b> <b>
{parse(String(props.formation.title).replace(/(<([^>]+)>)/ig, ''))} {String(parse(String(props.formation.title).replace(/(<([^>]+)>)/ig, ''))).substring(0, 20)}...
</b> </b>
</p> </p>
@ -292,7 +381,7 @@ const Formation_copie = (props) => {
<div className="div_row"> <div className="div_row">
{String(props.formation.price).length == 9 && {String(props.formation.price).length == 9 &&
<div className="training_price" > <i> Prix : Non communiqué</i> &nbsp; <div className="training_price" > <i>Prix : Non communiqué</i> &nbsp;
</div> </div>
} }
@ -302,22 +391,63 @@ const Formation_copie = (props) => {
</div> </div>
} }
{String(props.formation.price).length != 9 && String(props.formation.price) !== String("0") && {String(props.formation.price).length != 9 && String(props.formation.price) !== String("0") && (!props.formation.business_prices ||
<div className="training_price">{props.formation.price} &nbsp; HT Object.keys(props.formation.business_prices).length <= 0) &&
<div className="training_price">{props.formation.price} HT&nbsp;
</div> </div>
} }
{String(props.formation.price).length != 9 && String(props.formation.price) !== String("0") &&
props.formation.business_prices && Object.keys(props.formation.business_prices).length > 0 &&
<div className="training_price">
<nav className="discounted_price">{String(props.formation.business_prices[0].discounted_price)} HT</nav>
<nav className="training_price_barre">
{props.formation.price} HT&nbsp;
</nav>
<nav className="discount_block"> (- {String(props.formation.business_prices[0].discount)} % )
</nav>
</div>
}
</div> </div>
<div className="div_row"> <div className="div_row row_formation_desc">
{parse(String(props.formation.description).replace(/(<([^>]+)>)/ig, ''))} {parse(String(props.formation.description).replace(/(<([^>]+)>)/ig, '')).substring(0, 150)}
</div> </div>
{GetCurrentClass_trainingsession_cities_result && GetCurrentClass_trainingsession_cities_result.length > 0 &&
<nav style={{ "width": "100%", "float": "left", "textAlign": "left", "color": "#619E31" }}>
<nav style={{ "width": "auto", "float": "left" }}> <CiLocationOn className="icone_location" />&nbsp; </nav>
{GetCurrentClass_trainingsession_cities_result && GetCurrentClass_trainingsession_cities_result.sort().slice(0, 5).map((formation_ville) => (
<nav style={{ "width": "auto", "float": "left" }}>
{formation_ville &&
<b> {formation_ville.replaceAll('"', '').substring(0, 20).toLocaleLowerCase().charAt(0).toUpperCase() +
formation_ville.replaceAll('"', '').substring(0, 20).toLocaleLowerCase().slice(1)} &nbsp;&nbsp; </b>
}
</nav>
))}
</nav>
}
{!GetCurrentClass_result || GetCurrentClass_result.length <= 0 &&
<nav style={{ "width": "auto", "float": "left" }}> <CiLocationOn className="icone_location" />&nbsp; A venir
</nav>
}
</div> </div>
</div> </div>
<div className="div_row"> <div className="div_row row_formation_crit">
<hr style={{ "width": "90%", "marginLeft": "auto", "marginRight": "auto", "marginBottom": "2px", "marginTop": "2px" }} /> <hr style={{ "width": "90%", "marginLeft": "auto", "marginRight": "auto", "marginBottom": "2px", "marginTop": "2px" }} />
@ -329,23 +459,38 @@ const Formation_copie = (props) => {
{props.formation.duration_unit && {props.formation.duration_unit &&
<div style={{ "width": "100%" }}> <div style={{ "width": "100%" }}>
<div className="criteres ftion_tab_gauche">Durée : <div className="criteres ftion_tab_gauche">Durée
</div> </div>
{String(props.formation.duration_unit) === "heure" && {String(props.formation.duration_unit) === "heure" &&
<div className="criteres ftion_tab_droite"> <div className="criteres ftion_tab_droite">
{props.formation.duration} hr &nbsp; {props.formation.duration} hr(s) &nbsp;
</div>} </div>}
{String(props.formation.duration_unit) === "heures" && {String(props.formation.duration_unit) === "heures" &&
<div className="criteres ftion_tab_droite"> <div className="criteres ftion_tab_droite">
{props.formation.duration} hr &nbsp; {props.formation.duration} hr(s) &nbsp;
</div>} </div>}
{String(props.formation.duration_unit) === "jour" && {String(props.formation.duration_unit) === "jour" &&
<div className="criteres ftion_tab_droite"> <div className="criteres ftion_tab_droite">
{props.formation.duration} jr &nbsp; {props.formation.duration} jr(s) &nbsp;
</div>}
{String(props.formation.duration_unit) === "mois" &&
<div className="criteres ftion_tab_droite">
{props.formation.duration} mois(s)
</div>}
{String(props.formation.duration_unit) === "semaine" &&
<div className="criteres ftion_tab_droite">
{props.formation.duration} Sem (s)
</div>}
{String(props.formation.duration_unit) === "user_rythme" &&
<div className="criteres ftion_tab_droite">
A votre rythme
</div>} </div>}
</div> </div>
@ -354,11 +499,11 @@ const Formation_copie = (props) => {
{!props.formation.duration_unit && {!props.formation.duration_unit &&
<div style={{ "width": "100%" }}> <div style={{ "width": "100%" }}>
<div className="criteres ftion_tab_gauche">Durée : <div className="criteres ftion_tab_gauche">Durée
</div> </div>
{props.formation.duration && <div className="criteres ftion_tab_droite"> {props.formation.duration && <div className="criteres ftion_tab_droite">
{props.formation.duration} jrs &nbsp; {props.formation.duration} jr(s) &nbsp;
</div>} </div>}
{!props.formation.duration && <div className="criteres ftion_tab_droite"> {!props.formation.duration && <div className="criteres ftion_tab_droite">
@ -371,7 +516,7 @@ const Formation_copie = (props) => {
} }
<div style={{ "width": "100%" }}> <div style={{ "width": "100%" }}>
<div className="criteres ftion_tab_gauche"> <div className="criteres ftion_tab_gauche">
Certification : Certification
</div> </div>
<div className="criteres ftion_tab_droite"> <div className="criteres ftion_tab_droite">
@ -396,7 +541,7 @@ const Formation_copie = (props) => {
<div className="media_sociaux" style={{ 'float': "left", marginTop: "0.2rem", }}> <div className="media_sociaux" style={{ 'float': "left", marginTop: "0.2rem", }}>
<FacebookShareButton <FacebookShareButton
url={"https://www.mysy-training.com/Display-Detail-formation/" + props.formation.internal_url} url={"https://www.mysy-training.com/Display-Partner-Catalog-Detail-formation/" + props.formation.internal_url}
quote={props.formation.title + " -- " + props.formation.description} quote={props.formation.title + " -- " + props.formation.description}
hashtag={"ySyTraining"} hashtag={"ySyTraining"}
@ -406,7 +551,7 @@ const Formation_copie = (props) => {
&nbsp; &nbsp;
<TwitterShareButton <TwitterShareButton
url={"https://www.mysy-training.com/Display-Detail-formation/" + props.formation.internal_url} url={"https://www.mysy-training.com/Display-Partner-Catalog-Detail-formation/" + props.formation.internal_url}
hashtag={"#MySy-Formation"} hashtag={"#MySy-Formation"}
> >
<SocialIcon network="twitter" style={{ height: 20, width: 20 }} /> <SocialIcon network="twitter" style={{ height: 20, width: 20 }} />
@ -414,7 +559,7 @@ const Formation_copie = (props) => {
&nbsp; &nbsp;
<LinkedinShareButton <LinkedinShareButton
url={"https://www.mysy-training.com/Display-Detail-formation/" + props.formation.internal_url} url={"https://www.mysy-training.com/Display-Partner-Catalog-Detail-formation/" + props.formation.internal_url}
title={" Une nouvelle formation : " + props.formation.title} title={" Une nouvelle formation : " + props.formation.title}
summary={props.formation.title + " -- " + props.formation.description} summary={props.formation.title + " -- " + props.formation.description}
@ -510,7 +655,7 @@ const Formation_copie = (props) => {
<div style={{ "width": "100%", "float": "right" }}> <div style={{ "width": "100%", "float": "right" }}>
<div className="criteres ftion_tab_gauche"> <div className="criteres ftion_tab_gauche">
Sur site : Sur site
</div> </div>
{props.formation.presentiel && props.formation.presentiel.presentiel && {props.formation.presentiel && props.formation.presentiel.presentiel &&
String(props.formation.presentiel.presentiel) === String("1") && <div className="criteres ftion_tab_droite"> String(props.formation.presentiel.presentiel) === String("1") && <div className="criteres ftion_tab_droite">
@ -530,7 +675,7 @@ const Formation_copie = (props) => {
<div style={{ "width": "100%", "float": "right" }}> <div style={{ "width": "100%", "float": "right" }}>
<div className="criteres ftion_tab_gauche"> <div className="criteres ftion_tab_gauche">
A distance : A distance
</div> </div>
{props.formation.presentiel && props.formation.presentiel.distantiel && {props.formation.presentiel && props.formation.presentiel.distantiel &&
String(props.formation.presentiel.distantiel) === String("1") && <div className="criteres ftion_tab_droite"> String(props.formation.presentiel.distantiel) === String("1") && <div className="criteres ftion_tab_droite">
@ -550,17 +695,34 @@ const Formation_copie = (props) => {
<div style={{ "width": "100%", "float": "right" }}> <div style={{ "width": "100%", "float": "right" }}>
<div className="criteres ftion_tab_gauche"> <div className="criteres ftion_tab_gauche">
Support : Support
</div> </div>
{props.formation.support && <div className="criteres ftion_tab_droite"> {props.formation.support &&
{props.formation.support} <div className="criteres ftion_tab_droite">
</div>} {props.formation.support}
</div>}
{!props.formation.support &&
<div className="criteres ftion_tab_droite">
NC
</div>}
</div> </div>
{/*<div style={{ "width": "100%", "float": "right" }}>
<div className="criteres ftion_tab_gauche">
Type
</div>
{props.formation.type &&
<div className="criteres ftion_tab_droite">
{props.formation.type}
</div>}
{!props.formation.type &&
<div className="criteres ftion_tab_droite">
NC
</div>}
</div>*/}
</div> </div>
</div> </div>
@ -573,47 +735,49 @@ const Formation_copie = (props) => {
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
if (props.formation.url && props.formation.url.length > 5) {
window.open( window.open(
"/Display-Detail-formation/" + props.formation.internal_url + "/Information", props.formation.url,
'_blank' '_blank'
); );
} else {
window.open(
"/Display-Partner-Catalog-Detail-formation/" + props.formation.internal_url + "/Information",
'_blank'
);
}
}} }}
>Se renseigner</Button> >Se renseigner </Button>
<button className="bton_voir_detail" <Button className="bton_voir_detail"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
//test(props.formation.external_code); //test(props.formation.external_code);
window.open(
"/Display-Detail-formation/" + props.formation.internal_url,
'_blank'
);
if (props.formation.url && props.formation.url.length > 5) {
}}
>Voir details</button>
{GetCurrentClass_result && GetCurrentClass_result.length > 0 &&
<Button variant="contained" className="bton_sinscrire"
onClick={(e) => {
e.preventDefault();
window.open( window.open(
"/Display-Detail-formation/" + props.formation.internal_url + "/Inscription", props.formation.url,
'_blank' '_blank'
); );
} else {
window.open(
"/Display-Partner-Catalog-Detail-formation/" + props.formation.internal_url,
'_blank'
);
}
}} }}
>Voir details</Button>
>S'incrire</Button>
}
</div>} </div>}
@ -626,4 +790,4 @@ const Formation_copie = (props) => {
} }
export default Formation_copie; export default Formation_Partner_Catalog_Grid_2Col;

File diff suppressed because it is too large Load Diff

View File

@ -57,6 +57,8 @@ import { IoAppsSharp, IoListSharp } from "react-icons/io5";
import { CiCircleRemove, CiCircleMinus } from "react-icons/ci"; import { CiCircleRemove, CiCircleMinus } from "react-icons/ci";
import Formation_Grid_2Col from "./Formation_Grid_2Col";
let PageSize = 10; let PageSize = 10;
const Recherche_new_v4 = () => { const Recherche_new_v4 = () => {
const { type, categorie } = useParams(); const { type, categorie } = useParams();
@ -3323,6 +3325,7 @@ const Recherche_new_v4 = () => {
<div style={{ width: '100%', float: 'left' }}> <div style={{ width: '100%', float: 'left' }}>
<div className="okUpdateData"> <div className="okUpdateData">
<div style={{ "width": "100%", "float": "left" }}> <div style={{ "width": "100%", "float": "left" }}>
<div style={{ "width": "65%", "float": "left", "paddingTop": '10px' }}> <div style={{ "width": "65%", "float": "left", "paddingTop": '10px' }}>
<Pagination <Pagination
className="pagination-bar" className="pagination-bar"
@ -3334,8 +3337,6 @@ const Recherche_new_v4 = () => {
</div> </div>
<div style={{ "width": "25%", "float": "left" }}> <div style={{ "width": "25%", "float": "left" }}>
<div className="input-group input-group-sm mb-3 "> <div className="input-group input-group-sm mb-3 ">
<span className="filter_span">Trier par </span> <span className="filter_span">Trier par </span>
@ -3457,7 +3458,7 @@ const Recherche_new_v4 = () => {
{result && myApiResponse == "True" && fin == 0 && !newresult && {result && myApiResponse == "True" && fin == 0 && !newresult &&
result.slice(0, PageSize).map((formation) => ( result.slice(0, PageSize).map((formation) => (
<div className="rech_list_formation2 view_grid" ref={inputEl} id="inputEl_element"> <div className="rech_list_formation2 view_grid" ref={inputEl} id="inputEl_element">
<Formation formation={JSON.parse(formation)} key={JSON.parse(formation).title} coeur={JSON.parse(formation).title} /> <Formation_Grid_2Col formation={JSON.parse(formation)} key={JSON.parse(formation).title} coeur={JSON.parse(formation).title} />
</div> </div>
))} ))}
@ -3465,7 +3466,7 @@ const Recherche_new_v4 = () => {
{result && myApiResponse == "True" && fin == 0 && newresult && {result && myApiResponse == "True" && fin == 0 && newresult &&
newresult.slice(0, PageSize).map((formation) => ( newresult.slice(0, PageSize).map((formation) => (
<div className="rech_list_formation2 view_grid"> <div className="rech_list_formation2 view_grid">
<Formation formation={JSON.parse(formation)} key={JSON.parse(formation).title} /> <Formation_Grid_2Col formation={JSON.parse(formation)} key={JSON.parse(formation).title} />
</div> </div>
))} ))}
@ -3476,7 +3477,7 @@ const Recherche_new_v4 = () => {
&& currentTableData2 && currentTableData2
&& currentTableData2.map((formation) => ( && currentTableData2.map((formation) => (
<div className="rech_list_formation2 view_grid"> <div className="rech_list_formation2 view_grid">
<Formation formation={JSON.parse(formation)} key={JSON.parse(formation).title} /> <Formation_Grid_2Col formation={JSON.parse(formation)} key={JSON.parse(formation).title} />
</div> </div>
))} ))}
@ -3485,7 +3486,7 @@ const Recherche_new_v4 = () => {
&& currentTableData2 && currentTableData2
&& currentTableData2.map((formation) => ( && currentTableData2.map((formation) => (
<div className="rech_list_formation2 view_grid"> <div className="rech_list_formation2 view_grid">
<Formation formation={JSON.parse(formation)} key={JSON.parse(formation).title} /> <Formation_Grid_2Col formation={JSON.parse(formation)} key={JSON.parse(formation).title} />
</div> </div>
))} ))}

View File

@ -1823,7 +1823,7 @@ function UpdateParnterInfo(props) {
setLoading(false); setLoading(false);
if (String(res.data.status) === "true") { if (String(res.data.status) === "true") {
//console.log(" In Get_Partner_Catalog_Pub_Config res.data.status = " + res.data.status); //console.log(" In Get_Partner_Catalog_Pub_Config res.data.status = " + res.data.status);
console.log(" In Get_Partner_Catalog_Pub_Config res.data.message r_class = " + res.data.message); //console.log(" In Get_Partner_Catalog_Pub_Config res.data.message r_class = " + res.data.message);
setGet_Partner_Catalog_Pub_Config_api("true"); setGet_Partner_Catalog_Pub_Config_api("true");
setGet_Partner_Catalog_Pub_Config_result(res.data.message); setGet_Partner_Catalog_Pub_Config_result(res.data.message);

View File

@ -2280,6 +2280,10 @@
order: 1; order: 1;
flex-grow: 0; flex-grow: 0;
} }
.display_grid_list_bton {
display: none;
}
} }
@media only screen and (min-width: 601px) and (max-width: 991px) { @media only screen and (min-width: 601px) and (max-width: 991px) {
@ -3520,6 +3524,58 @@
flex-grow: 0; flex-grow: 0;
} }
.title1_nom {
width: 100%;
text-align: left;
height: 192px;
font-family: 'Albert Sans';
font-style: normal;
font-weight: 700;
font-size: 40px;
line-height: 54px;
/* or 107% */
letter-spacing: 1px;
/* Deep Blue */
color: #0A043C;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
}
.title1_text1 {
width: 100%;
text-align: left;
height: 192px;
font-family: 'Albert Sans';
font-style: normal;
font-weight: 500;
font-size: 30px;
line-height: 54px;
/* or 107% */
letter-spacing: 1px;
/* Deep Blue */
color: #0A043C;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
}
.title2 { .title2 {
width: 60%; width: 60%;
height: 22px; height: 22px;
@ -5276,6 +5332,21 @@
cursor: pointer; cursor: pointer;
} }
.mode_affichage {
width: 15%;
float: right;
cursor: pointer;
}
.display_grid_list_bton {
display: none;
}
.view_grid {
}
} }
@media only screen and (min-width: 992px) and (max-width: 1199px) { @media only screen and (min-width: 992px) and (max-width: 1199px) {
@ -6493,8 +6564,8 @@
flex-grow: 0; flex-grow: 0;
} }
.title1 { .title1_nom {
width: 60%; width: 100%;
text-align: left; text-align: left;
height: 192px; height: 192px;
@ -6502,7 +6573,7 @@
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
font-size: 40px; font-size: 40px;
line-height: 44px; line-height: 54px;
/* or 107% */ /* or 107% */
letter-spacing: 1px; letter-spacing: 1px;
@ -6519,18 +6590,16 @@
flex-grow: 0; flex-grow: 0;
} }
.title1_text1 { .title1_text1 {
width: 60%; width: 100%;
text-align: left; text-align: left;
height: 192px; height: 192px;
font-family: 'Albert Sans'; font-family: 'Albert Sans';
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 500;
font-size: 30px; font-size: 30px;
line-height: 44px; line-height: 54px;
/* or 107% */ /* or 107% */
letter-spacing: 1px; letter-spacing: 1px;
@ -8304,6 +8373,25 @@
cursor: pointer; cursor: pointer;
} }
.mode_affichage {
width: 12%;
float: right;
cursor: pointer;
}
.display_grid_list_bton {
width: 10%;
float: left;
}
.view_grid {
width: 48% !important;
float: left !important;
margin-right: 2%;
}
} }
@media only screen and (min-width: 1200px) and (max-width: 1919px) { @media only screen and (min-width: 1200px) and (max-width: 1919px) {
@ -11337,6 +11425,24 @@
cursor: pointer; cursor: pointer;
} }
.mode_affichage {
width: 8%;
float: right;
cursor: pointer;
}
.display_grid_list_bton {
width: 10%;
float: left;
}
.view_grid {
width: 48% !important;
float: left !important;
margin-right: 2%;
}
} }
@media only screen and (min-width: 1920px) { @media only screen and (min-width: 1920px) {
@ -14397,6 +14503,25 @@
} }
.mode_affichage {
width: 8%;
float: right;
cursor: pointer;
}
.display_grid_list_bton {
width: 10%;
float: left;
}
.view_grid {
width: 48% !important;
float: left !important;
margin-right: 2%;
}
} }
// end media // end media

View File

@ -739,7 +739,7 @@
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 350px; height: 250px;
left: 0px; left: 0px;
top: 0px; top: 0px;
@ -859,7 +859,7 @@
width: 97%; width: 97%;
//height: 1486px; //height: 1486px;
left: 1%; left: 1%;
top: 495px; top: 530px;
} }
.pieddepage_v2 { .pieddepage_v2 {
@ -902,7 +902,7 @@
position: absolute; position: absolute;
height: 120px; height: auto;
font-family: "Albert Sans"; font-family: "Albert Sans";
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
@ -914,18 +914,7 @@
} }
.title2 { .title2 {
position: absolute; display: none;
height: 35px;
left: 5%;
top: 90px;
font-family: "Albert Sans";
font-style: normal;
font-size: 14px;
line-height: 19px;
letter-spacing: 1px;
text-align: center;
color: #0A043C;
font-weight: 500;
} }
@ -3178,7 +3167,7 @@
//height: 2574px; //height: 2574px;
left: 10px; left: 10px;
right: 5px; right: 5px;
top: 530px; top: 460px;
width: 98%; width: 98%;
} }
@ -3224,13 +3213,13 @@
width: 95%; width: 95%;
height: 367px; height: 367px;
left: 20px; left: 20px;
top: 156px; top: 100px;
} }
.Background_Header { .Background_Header {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 452px; height: 300px;
left: 0px; left: 0px;
top: 0px; top: 0px;
@ -3492,7 +3481,7 @@
gap: 24px; gap: 24px;
width: 100%; width: 100%;
height: 367px; height: auto;
/* Inside auto layout */ /* Inside auto layout */
@ -3511,7 +3500,7 @@
gap: 16px; gap: 16px;
width: 636px; width: 636px;
height: 230px; height: auto;
/* Inside auto layout */ /* Inside auto layout */
@ -3526,7 +3515,7 @@
text-align: center; text-align: center;
width: 80%; width: 80%;
height: 180px; height: auto;
text-align: left; text-align: left;
@ -3551,6 +3540,59 @@
flex-grow: 0; flex-grow: 0;
} }
.title1_nom {
width: 100%;
text-align: left;
height: 192px;
font-family: 'Albert Sans';
font-style: normal;
font-weight: 700;
font-size: 40px;
height: auto;
/* or 107% */
letter-spacing: 1px;
/* Deep Blue */
color: #0A043C;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
}
.title1_text1 {
width: 100%;
text-align: left;
height: 192px;
font-family: 'Albert Sans';
font-style: normal;
font-weight: 500;
font-size: 30px;
line-height: 54px;
/* or 107% */
letter-spacing: 1px;
/* Deep Blue */
color: #0A043C;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
}
.title2 { .title2 {
width: 60%; width: 60%;
height: 22px; height: 22px;
@ -6203,7 +6245,7 @@
width: 96%; width: 96%;
//height: 2574px; //height: 2574px;
left: 2%; left: 2%;
top: 550px; top: 460px;
} }
.logo { .logo {
@ -6246,15 +6288,15 @@
position: absolute; position: absolute;
width: 95%; width: 95%;
height: 367px; // height: 367px;
left: 5%; left: 5%;
top: 156px; top: 100px;
} }
.Background_Header { .Background_Header {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 452px; height: 320px;
left: 0px; left: 0px;
top: 0px; top: 0px;
@ -6512,7 +6554,7 @@
gap: 24px; gap: 24px;
width: 900px; width: 900px;
height: 367px; height: auto;
/* Inside auto layout */ /* Inside auto layout */
@ -6531,7 +6573,7 @@
gap: 16px; gap: 16px;
width: 636px; width: 636px;
height: 230px; height: auto;
/* Inside auto layout */ /* Inside auto layout */
@ -6545,7 +6587,7 @@
.title1 { .title1 {
width: 80%; width: 80%;
text-align: left; text-align: left;
height: 192px; height: auto;
font-family: 'Albert Sans'; font-family: 'Albert Sans';
font-style: normal; font-style: normal;
@ -6568,6 +6610,60 @@
flex-grow: 0; flex-grow: 0;
} }
.title1_nom {
width: 100%;
text-align: left;
height: 192px;
font-family: 'Albert Sans';
font-style: normal;
font-weight: 700;
font-size: 40px;
height: auto;
/* or 107% */
letter-spacing: 1px;
/* Deep Blue */
color: #0A043C;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
}
.title1_text1 {
width: 100%;
text-align: left;
height: 192px;
font-family: 'Albert Sans';
font-style: normal;
font-weight: 500;
font-size: 30px;
/* or 107% */
letter-spacing: 1px;
/* Deep Blue */
color: #0A043C;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
}
.title2 { .title2 {
width: 60%; width: 60%;
text-align: left; text-align: left;
@ -9222,7 +9318,7 @@
width: 96%; width: 96%;
//height: 2574px; //height: 2574px;
left: 2%; left: 2%;
top: 550px; top: 460px;
} }
.logo { .logo {
@ -9265,15 +9361,15 @@
position: absolute; position: absolute;
width: 95%; width: 95%;
height: 367px; // height: 367px;
left: 5%; left: 5%;
top: 156px; top: 100px;
} }
.Background_Header { .Background_Header {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 452px; height: 320px;
left: 0px; left: 0px;
top: 0px; top: 0px;
@ -9531,7 +9627,7 @@
gap: 24px; gap: 24px;
width: 80%; width: 80%;
height: 367px; height: auto;
/* Inside auto layout */ /* Inside auto layout */
@ -9550,7 +9646,7 @@
gap: 16px; gap: 16px;
width: 636px; width: 636px;
height: 230px; height: auto;
/* Inside auto layout */ /* Inside auto layout */
@ -9564,7 +9660,7 @@
.title1 { .title1 {
width: 90%; width: 90%;
text-align: left; text-align: left;
height: 192px; height: auto;
font-family: 'Albert Sans'; font-family: 'Albert Sans';
font-style: normal; font-style: normal;
@ -9587,6 +9683,58 @@
flex-grow: 0; flex-grow: 0;
} }
.title1_nom {
width: 100%;
text-align: left;
height: 192px;
font-family: 'Albert Sans';
font-style: normal;
font-weight: 700;
font-size: 40px;
height: auto;
/* or 107% */
letter-spacing: 1px;
/* Deep Blue */
color: #0A043C;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
}
.title1_text1 {
width: 100%;
text-align: left;
height: 192px;
font-family: 'Albert Sans';
font-style: normal;
font-weight: 500;
font-size: 30px;
/* or 107% */
letter-spacing: 1px;
/* Deep Blue */
color: #0A043C;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
}
.title2 { .title2 {
width: 90%; width: 90%;
text-align: left; text-align: left;
@ -12258,7 +12406,7 @@
width: 96%; width: 96%;
//height: 2574px; //height: 2574px;
left: 2%; left: 2%;
top: 550px; top: 460px;
} }
.logo { .logo {
@ -12301,15 +12449,15 @@
position: absolute; position: absolute;
width: 95%; width: 95%;
height: 367px; // height: 367px;
left: 5%; left: 5%;
top: 156px; top: 100px;
} }
.Background_Header { .Background_Header {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 452px; height: 320px;
left: 0px; left: 0px;
top: 0px; top: 0px;
@ -12567,7 +12715,7 @@
gap: 24px; gap: 24px;
width: 85%; width: 85%;
height: 367px; height: auto;
/* Inside auto layout */ /* Inside auto layout */
@ -12586,7 +12734,7 @@
gap: 16px; gap: 16px;
width: 636px; width: 636px;
height: 230px; height: auto;
/* Inside auto layout */ /* Inside auto layout */
@ -12600,7 +12748,7 @@
.title1 { .title1 {
width: 100%; width: 100%;
text-align: left; text-align: left;
height: 192px; height: auto;
font-family: 'Albert Sans'; font-family: 'Albert Sans';
font-style: normal; font-style: normal;
@ -12623,6 +12771,59 @@
flex-grow: 0; flex-grow: 0;
} }
.title1_nom {
width: 100%;
text-align: left;
height: 192px;
font-family: 'Albert Sans';
font-style: normal;
font-weight: 700;
font-size: 40px;
height: auto;
/* or 107% */
letter-spacing: 1px;
/* Deep Blue */
color: #0A043C;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
}
.title1_text1 {
width: 100%;
text-align: left;
height: 192px;
font-family: 'Albert Sans';
font-style: normal;
font-weight: 500;
font-size: 30px;
/* or 107% */
letter-spacing: 1px;
/* Deep Blue */
color: #0A043C;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
}
.title2 { .title2 {
width: 100%; width: 100%;
text-align: left; text-align: left;