diff --git a/src/components/Dashbord_Session.js b/src/components/Dashbord_Session.js index 365ef91..9dd9d0d 100644 --- a/src/components/Dashbord_Session.js +++ b/src/components/Dashbord_Session.js @@ -65,7 +65,7 @@ import { import { ResponsivePie } from '@nivo/pie' import { ResponsiveBar } from "@nivo/bar"; - +import { TbColumns2, TbColumns1 } from "react-icons/tb"; const Dashbord_Session = (props) => { @@ -326,7 +326,7 @@ const Dashbord_Session = (props) => { setGetall_Qry_Session_Data_Pourcent_Trainer_api("true"); setGetall_Qry_Session_Data_Pourcent_Trainer_result(res.data.message); - // console.log("### setGetall_Qry_Session_Data_Pourcent_Trainer_result_JSON = ", Getall_Qry_Session_Data_Pourcent_Trainer_result_JSON); + // console.log("### setGetall_Qry_Session_Data_Pourcent_Trainer_result_JSON = ", Getall_Qry_Session_Data_Pourcent_Trainer_result_JSON); } else { @@ -358,12 +358,15 @@ const Dashbord_Session = (props) => { behavior: "smooth", }); - }, [myconntected_employee_id]) + }, []) const [filter_value, setfilter_value] = useState("m0"); const [tdb_title, settdb_title] = useState(); + const [display_nb_column, setdisplay_nb_column] = useState("2"); + const [display_column_size, setdisplay_column_size] = useState("50%"); + return (
{isLoading &&
@@ -371,6 +374,25 @@ const Dashbord_Session = (props) => {
}

Tableaux de bord des sessions

+
 
+
Affichage   + + + { + setdisplay_nb_column("1"); + setdisplay_column_size("100%"); + console.log(" display_column_size = ", display_column_size); + }} /> +     + + + { + setdisplay_nb_column("2"); + setdisplay_column_size("50%"); + console.log(" display_column_size = ", display_column_size); + }} /> +
+
Filtre
@@ -447,546 +469,607 @@ const Dashbord_Session = (props) => {
- -
TBD Session : Taux de remplissage
-
- } +
+
+
+ + +
+
+ +
+
+
+ )} + - - + +
+ + +   + data[`${id}Color`]} + keys={["taux_remplissage", "taux_disponibilite",]} + indexBy="code_session" + margin={{ top: 50, right: 130, bottom: 50, left: 60 }} + padding={0.3} + valueScale={{ type: 'linear' }} + indexScale={{ type: 'band', round: true }} + defs={[ + { + id: 'dots', + type: 'patternDots', + background: 'inherit', + color: '#38bcb2', + size: 4, + padding: 1, + stagger: true + }, + { + id: 'lines', + type: 'patternLines', + background: 'inherit', + color: '#eed312', + rotation: -45, + lineWidth: 6, + spacing: 10 + } + ]} + + borderColor={{ + from: 'color', + modifiers: [ + [ + 'darker', + 1.6 + ] + ] + }} + axisTop={null} + axisRight={null} + axisBottom={{ + tickSize: 5, + tickPadding: 5, + tickRotation: 0, + legend: 'country', + legendPosition: 'middle', + legendOffset: 32, + truncateTickAt: 0 + }} + axisLeft={{ + tickSize: 5, + tickPadding: 5, + tickRotation: 0, + legend: 'food', + legendPosition: 'middle', + legendOffset: -40, + truncateTickAt: 0 + }} + labelSkipWidth={12} + labelSkipHeight={12} + labelTextColor={{ + from: 'color', + modifiers: [ + [ + 'darker', + 2 + ] + ] + }} + legends={[ + { + dataFrom: 'keys', + anchor: 'bottom-right', + direction: 'column', + justify: false, + translateX: 120, + translateY: 0, + itemsSpacing: 2, + itemWidth: 100, + itemHeight: 20, + itemDirection: 'left-to-right', + itemOpacity: 0.85, + symbolSize: 20, + effects: [ + { + on: 'hover', + style: { + itemOpacity: 1 + } + } + ] + } + ]} + + + theme={{ + // added + fontSize: 16, + axis: { + domain: { + line: { + stroke: colors.grey[100], + }, + }, + legend: { + text: { + fill: colors.grey[100], + }, + }, + ticks: { + line: { + stroke: colors.grey[100], + strokeWidth: 1, + }, + text: { + fill: colors.grey[100], + }, + }, + }, + legends: { + text: { + fill: colors.grey[100], + }, + }, + }} + role="application" + ariaLabel="Nivo bar chart demo" + barAriaLabel={e => e.id + ": " + e.formattedValue + " in country: " + e.indexValue} + /> + + + + - - - -  - data[`${id}Color`]} - keys={["taux_remplissage", "taux_disponibilite",]} - indexBy="code_session" - margin={{ top: 50, right: 130, bottom: 50, left: 60 }} - padding={0.3} - valueScale={{ type: 'linear' }} - indexScale={{ type: 'band', round: true }} - defs={[ - { - id: 'dots', - type: 'patternDots', - background: 'inherit', - color: '#38bcb2', - size: 4, - padding: 1, - stagger: true - }, - { - id: 'lines', - type: 'patternLines', - background: 'inherit', - color: '#eed312', - rotation: -45, - lineWidth: 6, - spacing: 10 - } - ]} - - borderColor={{ - from: 'color', - modifiers: [ - [ - 'darker', - 1.6 - ] - ] - }} - axisTop={null} - axisRight={null} - axisBottom={{ - tickSize: 5, - tickPadding: 5, - tickRotation: 0, - legend: 'country', - legendPosition: 'middle', - legendOffset: 32, - truncateTickAt: 0 - }} - axisLeft={{ - tickSize: 5, - tickPadding: 5, - tickRotation: 0, - legend: 'food', - legendPosition: 'middle', - legendOffset: -40, - truncateTickAt: 0 - }} - labelSkipWidth={12} - labelSkipHeight={12} - labelTextColor={{ - from: 'color', - modifiers: [ - [ - 'darker', - 2 - ] - ] - }} - legends={[ - { - dataFrom: 'keys', - anchor: 'bottom-right', - direction: 'column', - justify: false, - translateX: 120, - translateY: 0, - itemsSpacing: 2, - itemWidth: 100, - itemHeight: 20, - itemDirection: 'left-to-right', - itemOpacity: 0.85, - symbolSize: 20, - effects: [ - { - on: 'hover', - style: { - itemOpacity: 1 - } - } - ] - } - ]} - - - theme={{ - // added - fontSize: 16, - axis: { - domain: { - line: { - stroke: colors.grey[100], - }, - }, - legend: { - text: { - fill: colors.grey[100], - }, - }, - ticks: { - line: { - stroke: colors.grey[100], - strokeWidth: 1, - }, - text: { - fill: colors.grey[100], - }, - }, - }, - legends: { - text: { - fill: colors.grey[100], - }, - }, - }} - role="application" - ariaLabel="Nivo bar chart demo" - barAriaLabel={e => e.id + ": " + e.formattedValue + " in country: " + e.indexValue} - /> - - - - - - -
-
-
-
- -   -
TBD Session : Nb Session par formateur
-
- } +
+
+
+ + +
+
+ +
+
+ + )} +
- - + + + + +   + data[`${id}Color`]} + colors={{ scheme: 'nivo' }} + keys={["nb",]} + indexBy="Formateur_nom_prenom_mois_annee" + margin={{ top: 50, right: 130, bottom: 50, left: 60 }} + padding={0.3} + valueScale={{ type: 'linear' }} + indexScale={{ type: 'band', round: true }} + defs={[ + { + id: 'dots', + type: 'patternDots', + background: 'inherit', + color: '#38bcb2', + size: 4, + padding: 1, + stagger: true + }, + { + id: 'lines', + type: 'patternLines', + background: 'inherit', + color: '#eed312', + rotation: -45, + lineWidth: 6, + spacing: 10 + } + ]} + + borderColor={{ + from: 'color', + modifiers: [ + [ + 'darker', + 1.6 + ] + ] + }} + axisTop={null} + axisRight={null} + axisBottom={{ + tickSize: 5, + tickPadding: 5, + tickRotation: 0, + legend: 'Formateur', + legendPosition: 'middle', + legendOffset: 32, + truncateTickAt: 0 + }} + axisLeft={{ + tickSize: 5, + tickPadding: 5, + tickRotation: 0, + legend: 'Nb Ftion', + legendPosition: 'middle', + legendOffset: -40, + truncateTickAt: 0 + }} + labelSkipWidth={12} + labelSkipHeight={12} + labelTextColor={{ + from: 'color', + modifiers: [ + [ + 'darker', + 2 + ] + ] + }} + legends={[ + { + dataFrom: 'keys', + anchor: 'bottom-right', + direction: 'column', + justify: false, + translateX: 120, + translateY: 0, + itemsSpacing: 2, + itemWidth: 100, + itemHeight: 20, + itemDirection: 'left-to-right', + itemOpacity: 0.85, + symbolSize: 20, + effects: [ + { + on: 'hover', + style: { + itemOpacity: 1 + } + } + ] + } + ]} + + + theme={{ + // added + fontSize: 16, + axis: { + domain: { + line: { + stroke: colors.grey[100], + }, + }, + legend: { + text: { + fill: colors.grey[100], + }, + }, + ticks: { + line: { + stroke: colors.grey[100], + strokeWidth: 1, + }, + text: { + fill: colors.grey[100], + }, + }, + }, + legends: { + text: { + fill: colors.grey[100], + }, + }, + }} + role="application" + ariaLabel="Nivo bar chart demo" + barAriaLabel={e => e.id + ": " + e.formattedValue + " in country: " + e.indexValue} + /> + + + + -


- - -   - data[`${id}Color`]} - colors={{ scheme: 'nivo' }} - keys={["nb",]} - indexBy="Formateur_nom_prenom_mois_annee" - margin={{ top: 50, right: 130, bottom: 50, left: 60 }} - padding={0.3} - valueScale={{ type: 'linear' }} - indexScale={{ type: 'band', round: true }} - defs={[ - { - id: 'dots', - type: 'patternDots', - background: 'inherit', - color: '#38bcb2', - size: 4, - padding: 1, - stagger: true - }, - { - id: 'lines', - type: 'patternLines', - background: 'inherit', - color: '#eed312', - rotation: -45, - lineWidth: 6, - spacing: 10 - } - ]} - - borderColor={{ - from: 'color', - modifiers: [ - [ - 'darker', - 1.6 - ] - ] - }} - axisTop={null} - axisRight={null} - axisBottom={{ - tickSize: 5, - tickPadding: 5, - tickRotation: 0, - legend: 'Formateur', - legendPosition: 'middle', - legendOffset: 32, - truncateTickAt: 0 - }} - axisLeft={{ - tickSize: 5, - tickPadding: 5, - tickRotation: 0, - legend: 'Nb Ftion', - legendPosition: 'middle', - legendOffset: -40, - truncateTickAt: 0 - }} - labelSkipWidth={12} - labelSkipHeight={12} - labelTextColor={{ - from: 'color', - modifiers: [ - [ - 'darker', - 2 - ] - ] - }} - legends={[ - { - dataFrom: 'keys', - anchor: 'bottom-right', - direction: 'column', - justify: false, - translateX: 120, - translateY: 0, - itemsSpacing: 2, - itemWidth: 100, - itemHeight: 20, - itemDirection: 'left-to-right', - itemOpacity: 0.85, - symbolSize: 20, - effects: [ - { - on: 'hover', - style: { - itemOpacity: 1 - } - } - ] - } - ]} - - - theme={{ - // added - fontSize: 16, - axis: { - domain: { - line: { - stroke: colors.grey[100], - }, - }, - legend: { - text: { - fill: colors.grey[100], - }, - }, - ticks: { - line: { - stroke: colors.grey[100], - strokeWidth: 1, - }, - text: { - fill: colors.grey[100], - }, - }, - }, - legends: { - text: { - fill: colors.grey[100], - }, - }, - }} - role="application" - ariaLabel="Nivo bar chart demo" - barAriaLabel={e => e.id + ": " + e.formattedValue + " in country: " + e.indexValue} - /> - - - - - -
- -
-
-
-
- -   -
TBD Session : Repartition par Formateur
-
- } +
+
+
+ + +
+
+ +
+
+ + )} +
- - + + + + + +   + + + + + + -


+ - -   - - - - - - - -
+ ) } diff --git a/src/components/Dashbord_Session_Par_Fteur.js b/src/components/Dashbord_Session_Par_Fteur.js index d4480c4..9200935 100644 --- a/src/components/Dashbord_Session_Par_Fteur.js +++ b/src/components/Dashbord_Session_Par_Fteur.js @@ -168,11 +168,11 @@ const Dashbord_Session_Par_Fteur = (props) => { var form = new FormData(); const stored_cookie = getCookie('tokenmysypart'); - + form.append("token", stored_cookie); form.append("user_dashbord_id", user_dashbord_id); - + var myurl = process.env.REACT_APP_API_URL + "myclass/api/Delete_To_User_Dashbord/"; //console.log(" ## myurl = ", myurl); @@ -371,7 +371,7 @@ const Dashbord_Session_Par_Fteur = (props) => { setGetall_Qry_Session_Data_Pourcent_Trainer_api("true"); setGetall_Qry_Session_Data_Pourcent_Trainer_result(res.data.message); - // console.log("### setGetall_Qry_Session_Data_Pourcent_Trainer_result_JSON = ", Getall_Qry_Session_Data_Pourcent_Trainer_result_JSON); + // console.log("### setGetall_Qry_Session_Data_Pourcent_Trainer_result_JSON = ", Getall_Qry_Session_Data_Pourcent_Trainer_result_JSON); } else { @@ -395,7 +395,7 @@ const Dashbord_Session_Par_Fteur = (props) => { useEffect(() => { Getall_Qry_Session_Data_By_Trainer(); - + window.scrollTo({ top: 0, behavior: "smooth", @@ -408,12 +408,12 @@ const Dashbord_Session_Par_Fteur = (props) => { const [tdb_title, settdb_title] = useState(); return ( -
+
{isLoading &&
} -
+ {/*
Filtre
{
-
- - -   -
TBD Session : Nb Session par formateur
- */} + -
-
) } diff --git a/src/components/Dashbord_Session_Repartition_Fteur.js b/src/components/Dashbord_Session_Repartition_Fteur.js index 04bb9b1..71a5b99 100644 --- a/src/components/Dashbord_Session_Repartition_Fteur.js +++ b/src/components/Dashbord_Session_Repartition_Fteur.js @@ -168,11 +168,11 @@ const Dashbord_Session_Repartition_Fteur = (props) => { var form = new FormData(); const stored_cookie = getCookie('tokenmysypart'); - + form.append("token", stored_cookie); form.append("user_dashbord_id", user_dashbord_id); - + var myurl = process.env.REACT_APP_API_URL + "myclass/api/Delete_To_User_Dashbord/"; //console.log(" ## myurl = ", myurl); @@ -372,7 +372,7 @@ const Dashbord_Session_Repartition_Fteur = (props) => { setGetall_Qry_Session_Data_Pourcent_Trainer_api("true"); setGetall_Qry_Session_Data_Pourcent_Trainer_result(res.data.message); - // console.log("### setGetall_Qry_Session_Data_Pourcent_Trainer_result_JSON = ", Getall_Qry_Session_Data_Pourcent_Trainer_result_JSON); + // console.log("### setGetall_Qry_Session_Data_Pourcent_Trainer_result_JSON = ", Getall_Qry_Session_Data_Pourcent_Trainer_result_JSON); } else { @@ -396,7 +396,7 @@ const Dashbord_Session_Repartition_Fteur = (props) => { useEffect(() => { - + Getall_Qry_Session_Data_Pourcent_Trainer(); window.scrollTo({ top: 0, @@ -410,12 +410,12 @@ const Dashbord_Session_Repartition_Fteur = (props) => { const [tdb_title, settdb_title] = useState(); return ( -
+
{isLoading &&
} -
+ {/* ) } diff --git a/src/components/Dashbord_Session_Taux_Remplissage.js b/src/components/Dashbord_Session_Taux_Remplissage.js index db4c7d9..554c734 100644 --- a/src/components/Dashbord_Session_Taux_Remplissage.js +++ b/src/components/Dashbord_Session_Taux_Remplissage.js @@ -168,11 +168,11 @@ const Dashbord_Session_Taux_Remplissage = (props) => { var form = new FormData(); const stored_cookie = getCookie('tokenmysypart'); - + form.append("token", stored_cookie); form.append("user_dashbord_id", user_dashbord_id); - + var myurl = process.env.REACT_APP_API_URL + "myclass/api/Delete_To_User_Dashbord/"; console.log(" ## myurl = ", myurl); @@ -371,7 +371,7 @@ const Dashbord_Session_Taux_Remplissage = (props) => { setGetall_Qry_Session_Data_Pourcent_Trainer_api("true"); setGetall_Qry_Session_Data_Pourcent_Trainer_result(res.data.message); - // console.log("### setGetall_Qry_Session_Data_Pourcent_Trainer_result_JSON = ", Getall_Qry_Session_Data_Pourcent_Trainer_result_JSON); + // console.log("### setGetall_Qry_Session_Data_Pourcent_Trainer_result_JSON = ", Getall_Qry_Session_Data_Pourcent_Trainer_result_JSON); } else { @@ -395,7 +395,7 @@ const Dashbord_Session_Taux_Remplissage = (props) => { useEffect(() => { Getall_Qry_Session_Data(); - + window.scrollTo({ top: 0, behavior: "smooth", @@ -408,11 +408,11 @@ const Dashbord_Session_Taux_Remplissage = (props) => { const [tdb_title, settdb_title] = useState(); return ( -
+
{isLoading &&
} -
+ {/* ) } diff --git a/src/components/Mon_Tableau_De_Bord.js b/src/components/Mon_Tableau_De_Bord.js index 5f7a626..2c3e4e3 100644 --- a/src/components/Mon_Tableau_De_Bord.js +++ b/src/components/Mon_Tableau_De_Bord.js @@ -52,7 +52,7 @@ import ToggleSwitch from "./ToggleSwitch"; import Dashbord_Session_Par_Fteur from "./Dashbord_Session_Par_Fteur"; import Dashbord_Session_Taux_Remplissage from "./Dashbord_Session_Taux_Remplissage"; import Dashbord_Session_Repartition_Fteur from "./Dashbord_Session_Repartition_Fteur"; - +import { TbColumns2, TbColumns1 } from "react-icons/tb"; const Mon_Tableau_De_Bord = (props) => { @@ -116,6 +116,7 @@ const Mon_Tableau_De_Bord = (props) => { }, []) + const [display_nb_column, setdisplay_nb_column] = useState("2"); return (
@@ -126,33 +127,82 @@ const Mon_Tableau_De_Bord = (props) => {

Mon tableau de bord

 
+ - {Get_Connected_User_Dashbord_result && - Get_Connected_User_Dashbord_result.map((step) => ( -
+ {display_nb_column && String(display_nb_column) == "2" &&
+ {Get_Connected_User_Dashbord_result && + Get_Connected_User_Dashbord_result.map((step) => ( + +
+ + {String(JSON.parse(step).dashbord_internal_code) === "tbd_code_session_01" && - {String(JSON.parse(step).dashbord_internal_code) === "tbd_code_session_01" && - } - {String(JSON.parse(step).dashbord_internal_code) === "tbd_code_session_02" && - + {String(JSON.parse(step).dashbord_internal_code) === "tbd_code_session_02" && + } - {String(JSON.parse(step).dashbord_internal_code) === "tbd_code_session_03" && - + {String(JSON.parse(step).dashbord_internal_code) === "tbd_code_session_03" && + } -
+
+ + ))} +
} + + + {display_nb_column && String(display_nb_column) == "1" &&
+ {Get_Connected_User_Dashbord_result && + Get_Connected_User_Dashbord_result.map((step) => ( + +
+ + {String(JSON.parse(step).dashbord_internal_code) === "tbd_code_session_01" && + + + } + + {String(JSON.parse(step).dashbord_internal_code) === "tbd_code_session_02" && + + + + } + + + {String(JSON.parse(step).dashbord_internal_code) === "tbd_code_session_03" && + + + + } + + +
+ + ))} +
} + - ))} diff --git a/src/components/Partner.js b/src/components/Partner.js index db7cf0d..86f49c7 100644 --- a/src/components/Partner.js +++ b/src/components/Partner.js @@ -1102,15 +1102,17 @@ const Partner = (props) => {
Mon Compte
- {String(menu) !== "mon_tableau_de_bord" &&
MON TABLEAU DE BORD
} - {String(menu) === "mon_tableau_de_bord" &&
MON TABLEAU DE BORD
} -
{String(menu) !== "infopartner" &&
MES INFORMATIONS
} {String(menu) === "infopartner" &&
MES INFORMATIONS
}
+ {String(menu) !== "mon_tableau_de_bord" &&
MON TABLEAU DE BORD
} + {String(menu) === "mon_tableau_de_bord" &&
MON TABLEAU DE BORD
} +
+ + {String(menu) !== "module_agenda" &&
PLANNING
} {String(menu) === "module_agenda" &&
PLANNING
}