*/}\r\n
\r\n console.log(e)}\r\n />\r\n
\r\n
\r\n
\r\n\r\n {/* legend of the graph */}\r\n {answerAll?.segmentsLocale\r\n ? (answerAll?.segmentsLocale).map((segment, i) => (\r\n
\r\n {/* Graph legend for internationalization */}\r\n \r\n {rtlAlignment === RTL_FLAG_RIGHT\r\n ? {segment.title} .#{i + 1}\r\n : #{i + 1}. {segment.title}\r\n }\r\n \r\n
\r\n ))\r\n : answerAll?.locale?.answer?.segments.map((segment, i) => (\r\n
\r\n \r\n {rtlAlignment === RTL_FLAG_RIGHT\r\n ? {segment.title} .#{i + 1}\r\n : #{i + 1}. {segment.title}\r\n }\r\n \r\n
\r\n ))}\r\n \r\n \r\n
\r\n
\r\n\r\n {/* answers and recommendations */}\r\n
\r\n \r\n {systemContentLocale.overall}\r\n \r\n
\r\n\r\n
\r\n \r\n \r\n {systemContentLocale.total_score} : {answer?.surveyScore}\r\n \r\n \r\n
\r\n\r\n {/* Recommendation print */}\r\n {surveyRecommendations && !Lodash.isEmpty(surveyRecommendations?.overall?.recommendations) ? (\r\n surveyRecommendations?.overall?.recommendations.map((recom, i) => {\r\n return recom.from <= answer?.surveyScore && answer?.surveyScore <= recom.to ? (\r\n
\r\n \r\n {recom.recommendation ? recom.recommendation : null}\r\n \r\n
\r\n ) : null;\r\n })\r\n ) : (\r\n
\r\n \r\n {systemContentLocale.no_recommendation}\r\n \r\n
\r\n )}\r\n
\r\n
\r\n
\r\n \r\n {systemContentLocale.segment}\r\n \r\n
\r\n\r\n {segment && !Lodash.isEmpty(segment)\r\n ? Object.values(segment).map((segmentAnswer, i) => {\r\n return (\r\n <>\r\n {/* {console.log(\"locale\", locale)} */}\r\n
\r\n \r\n {/* Segment title print */}\r\n {locale && !Lodash.isEmpty(locale) ? locale[i]?.title : surveyRecommendations?.segments[i].title}\r\n \r\n
\r\n\r\n
\r\n \r\n {/* segment score print */}\r\n \r\n {systemContentLocale.segment_score} : {locale[i].segmentScore ? roundValue(locale[i].segmentScore) : segScore[i]}\r\n \r\n \r\n
\r\n\r\n {surveyRecommendations && surveyRecommendations?.segments && surveyRecommendations?.segments[i] && !Lodash.isEmpty(surveyRecommendations?.segments[i]?.recommendations) ? (\r\n surveyRecommendations?.segments[i]?.recommendations.map((recom, j) => {\r\n return recom.from <= segmentAnswer.segmentScore && segmentAnswer.segmentScore <= recom.to ? (\r\n <>\r\n
\r\n \r\n {/* Segment recommendation print */}\r\n {recom.recommendation}\r\n \r\n
\r\n \r\n ) : null;\r\n })\r\n ) : (\r\n
\r\n \r\n {/* Segment no recommendation print */}\r\n {systemContentLocale.no_recommendation}\r\n \r\n
\r\n )}\r\n\r\n {!Lodash.isEmpty(segment) &&\r\n Object.values(segment[i].questions).map((item, j) => {\r\n return
;\r\n })}\r\n \r\n );\r\n })\r\n : \" \"}\r\n \r\n \r\n \r\n );\r\n};\r\n\r\n// Create styles\r\nconst styles = {\r\n page: {\r\n // paddingTop: 35,\r\n // paddingBottom: 65,\r\n // paddingHorizontal: 35,\r\n },\r\n section: {\r\n margin: 0,\r\n padding: 35,\r\n },\r\n h3: {\r\n color: \"#af1e23\",\r\n marginLeft: 12,\r\n marginRight: 12,\r\n // fontSize: 14,\r\n textAlign: \"justify\",\r\n fontWeight: \"bold\",\r\n },\r\n row: {\r\n flexGrow: 1,\r\n flexDirection: \"row\",\r\n },\r\n title: {\r\n // fontSize: 24,\r\n textAlign: \"center\",\r\n },\r\n author: {\r\n // fontSize: 12,\r\n textAlign: \"center\",\r\n marginBottom: 40,\r\n },\r\n subtitle: {\r\n // fontSize: 18,\r\n margin: 12,\r\n fontWeight: \"bold\",\r\n },\r\n segment: {\r\n // color: \"#af1e23\",\r\n fontWeight: \"bold\",\r\n fontSize: 15,\r\n // margin: 12,\r\n marginLeft: 12,\r\n marginRight: 12,\r\n },\r\n text: {\r\n margin: 12,\r\n // fontSize: 14,\r\n textAlign: \"justify\",\r\n },\r\n textRecommendation: {\r\n color: \"#af1e23\",\r\n margin: 12,\r\n marginBottom: 5,\r\n // fontSize: 14,\r\n // textAlign: \"justify\",\r\n },\r\n question: {\r\n margin: 12,\r\n marginBottom: 12,\r\n // fontSize: 14,\r\n textAlign: \"justify\",\r\n marginLeft: 30,\r\n },\r\n answer: {\r\n fontSize: 15,\r\n marginLeft: 30,\r\n },\r\n textNote: {\r\n margin: 12,\r\n marginBottom: 5,\r\n fontSize: 14,\r\n textAlign: \"justify\",\r\n },\r\n image: {\r\n marginVertical: 5,\r\n marginHorizontal: 150,\r\n alignContent: \"center\",\r\n textAlign: \"center\",\r\n },\r\n pageNumber: {\r\n position: \"absolute\",\r\n fontSize: 12,\r\n bottom: 30,\r\n left: 0,\r\n right: 0,\r\n textAlign: \"center\",\r\n color: \"grey\",\r\n },\r\n dateAndTime: {\r\n position: \"absolute\",\r\n fontSize: 12,\r\n bottom: 30,\r\n right: 35,\r\n textAlign: \"right\",\r\n color: \"grey\",\r\n },\r\n recommendation: {\r\n // marginBottom: 12,\r\n },\r\n};\r\n\r\nexport default AnswerPrintTemplateByHtml;\r\n","import { GRAPH_LOCAL_ANSWER } from \"constants/actionTypes\";\r\n\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\n\r\nimport { Badge, Card, CardHeader, Container, Row, Table, CardBody, CardFooter, Col, Button } from \"reactstrap\";\r\n\r\nimport CommonHeader from \"components/Headers/CommonHeader\";\r\nimport { fetchLocalizationBySurveyTemplate } from \"actions/survey\";\r\nimport { fetchLocalizationContent } from \"actions/masterData\";\r\nimport React, { useEffect, useState, useRef } from \"react\";\r\nimport Chart from \"chart.js\"; // javascipt plugin for creating charts. Does the style formatting\r\nimport { Bar, Line, Radar } from \"react-chartjs-2\";\r\nimport Lodash from \"lodash\";\r\nimport { ChsStyles, GlobalStylesColor } from \"constants/globalStyles\";\r\nimport { useHistory } from \"react-router-dom\";\r\nimport { LOGINSTATE } from \"../../../config/config.json\";\r\nimport { initialValues_assessmentPage } from \"helper\";\r\n\r\nimport { confirmAlert } from \"react-confirm-alert\";\r\nimport \"../../../assets/css/react-confirm-alert-custom.css\"; /// Import css\r\n\r\nimport AnswerPrintTemplateByHtmlExtend from \"./AnswerPrintTemplateByHtmlExtend\";\r\n\r\nconst AnswerPrint = (props) => {\r\n const history = useHistory();\r\n const dispatch = useDispatch();\r\n\r\n const [printing, setPrinting] = useState(false);\r\n\r\n const [systemContentLocale, setSystemContentLocale] = useState({});\r\n\r\n const locale = props?.location?.state;\r\n let answer = props?.location?.state?.answer;\r\n\r\n let focusCounter = 0;\r\n const focusDiv = useRef();\r\n\r\n if (LOGINSTATE) console.log(\"passed location param: \", props?.location?.state);\r\n const [fontSize, setFontSize] = useState(14);\r\n\r\n useEffect(() => {\r\n // Get the active survey if information is exist\r\n // Get system content for locale if exist\r\n\r\n if (LOGINSTATE) console.log(\"passed location param: \", locale);\r\n if (locale && locale?.answer) {\r\n // get active survey details\r\n const params = { type: answer?.type, languageCode: jUser?.user?.language };\r\n if (LOGINSTATE) console.log(\"fetching master data with: \", params);\r\n\r\n dispatch(fetchLocalizationContent(params));\r\n }\r\n dispatch(fetchLocalizationBySurveyTemplate({ surveyId: answer?.surveyId }, history));\r\n }, [locale]);\r\n\r\n // get system content\r\n const systemContent = useSelector((state) => state.masterData.localizationContentAll);\r\n const surveyLocalizationAll = useSelector((state) => state.survey.surveyLocalizationAll);\r\n useEffect(() => {\r\n if (LOGINSTATE) console.log(\"survey Locales : \", surveyLocalizationAll);\r\n const surveyLocaleForTemplate = Lodash.find(surveyLocalizationAll, { languageCode: jUser.user.language });\r\n\r\n if (LOGINSTATE) console.log(\"survey Locale for template: \", surveyLocaleForTemplate);\r\n\r\n const segmentsLocale = surveyLocaleForTemplate?.segments ? surveyLocaleForTemplate?.segments : answer?.segments;\r\n\r\n const segment = answer?.segments;\r\n\r\n if (LOGINSTATE) console.log(\"segmentDataLocale : \", segmentsLocale);\r\n\r\n if (LOGINSTATE) console.log(\"systemContent from server: \", systemContent);\r\n if (systemContent !== undefined && systemContent !== null && Lodash.isArray(systemContent) && systemContent.length > 0) {\r\n setSystemContentLocale(systemContent[0].assessmentPage);\r\n } else {\r\n setSystemContentLocale(initialValues_assessmentPage);\r\n }\r\n\r\n // let locale = segmentsLocale;\r\n\r\n let full = { locale, segmentsLocale, systemContentLocale, segment, fontSize };\r\n if (LOGINSTATE) console.log(\"full\", full);\r\n localStorage.setItem(GRAPH_LOCAL_ANSWER, JSON.stringify(full));\r\n dispatch({ type: GRAPH_LOCAL_ANSWER, payload: full });\r\n }, [systemContent, surveyLocalizationAll]);\r\n\r\n const toPdf = (print) => {\r\n setPrinting(true);\r\n\r\n // start checking for focus state to see when is the print preview close, or close after 10 seconds\r\n focusCounter = 0;\r\n // const focusWatch = setInterval(() => {\r\n // const ss = document.hasFocus();\r\n // focusCounter++;\r\n // if(focusCounter>20){\r\n // clearInterval(focusWatch);\r\n // }\r\n // }, 500);\r\n\r\n // give a time to re-render the layout again for print preview\r\n setTimeout(() => {\r\n window.print();\r\n }, 500);\r\n\r\n // give a time to re-set the layout after print preview is complete\r\n // setTimeout(() => {\r\n // // clearInterval(focusWatch);\r\n // setPrinting(false);\r\n // }, 5000);\r\n\r\n };\r\n\r\n const endPdf = () => {\r\n if (printing) {\r\n setPrinting(false);\r\n }\r\n }\r\n\r\n let currentUser = localStorage.getItem(\"userDetails\");\r\n let jUser = JSON.parse(currentUser);\r\n let uRole = currentUser && jUser && jUser.user && jUser.user.urole ? jUser.user.urole : \"GENERAL\";\r\n if (LOGINSTATE) console.log(\"uRole\", jUser);\r\n\r\n return (\r\n <>\r\n {/* {printing ? null :
} */}\r\n\r\n {/* Page content */}\r\n
{ endPdf() }}\r\n onMouseDown={() => { endPdf()}}\r\n >\r\n \r\n \r\n \r\n {systemContentLocale.self_assessment}\r\n {systemContentLocale.recommendations_self_assessment}
\r\n\r\n {systemContentLocale.pdf_version}
\r\n \r\n \r\n \r\n {systemContentLocale.font_size}\r\n
\r\n \r\n
\r\n
{\r\n setFontSize(fontSize > 3 ? fontSize - 1 : 3);\r\n }}\r\n >\r\n \r\n \r\n
\r\n {fontSize}\r\n
\r\n
{\r\n setFontSize(fontSize + 1);\r\n }}\r\n >\r\n \r\n
\n \n ) : (\n \n ![\"app-tools-use\"]({require(\"../../../assets/img/theme/home.png\").default})
\n \n ![\"app\"]({require(\"../../../assets/img/theme/home_app.png\").default})
\n \n ![\"bmg\"]({require(\"../../../assets/img/theme/home_bmgf.png\").default})
\n \n\n ![\"adpc\"]({require(\"../../../assets/img/theme/home_adpc.jpg\").default})
\n \n ![\"CHS\"]({require(\"../../../assets/img/theme/img_logo.png\").default}){kind=logo}
\n ![\"logo\"]({require(\"../../../assets/img/brand/img_logo.png\").default}){kind=logo}
\r\n