\r\n \r\n this.handleFilterChange(\"DateFrom\", e)}\r\n />\r\n
\r\n \r\n \r\n \r\n this.handleFilterChange(\"DateTo\", e)}\r\n />\r\n
\r\n \r\n \r\n this.onChangePageProfile(data)}/>\r\n
\r\n );\r\n };\r\n\r\n renderItem = (e) => {\r\n const { data } = e.row;\r\n return (\r\n \r\n {/* this.onChangePageProfile(data)}/>*/}\r\n
\r\n );\r\n };\r\n\r\n renderInfo = (e) => {\r\n const { data } = e.row;\r\n const { classes } = this.props;\r\n return (\r\n \r\n
\r\n \r\n {Config.convertDate(data.AssessDate, \"\",\"DD/MM/YYYY, kk:mm:ss\", true)}\r\n
\r\n \r\n
\r\n );\r\n };\r\n\r\n renderAction = (e) => {\r\n const { data } = e.row;\r\n const {classes} = this.props;\r\n let status = data && data.EvaluatedStatus ? data.EvaluatedStatus / 2 : 0;\r\n const approvalStatus = data && Number(data.ApproveStatus);\r\n\r\n return (\r\n \r\n {Config.lang(\"DHR_Loai_danh_gia\")}: {data.TransTypeName || \"\"}\r\n
\r\n {data.WorkFormName && \r\n {Config.lang(\"DHR_Loai_hop_dong\")}: {data.WorkFormName || \"\"}\r\n
}\r\n {data.Note && \r\n {Config.lang(\"DHR_Ghi_chu\")}: {data.Note || \"\"}\r\n
}\r\n {data.AssessStatus && \r\n {data.AssessStatus || \"\"}\r\n
}\r\n \r\n this.onHistoryApproval(e,data)}>\r\n \r\n this.onView(e)}>\r\n \r\n {\r\n data?\r\n approvalStatus !== 0 && approvalStatus !== 1?\r\n
\r\n );\r\n };\r\n\r\n render() {\r\n let { iPermission, dataGrid, loading , showW84F3005Popup, w84F3005PopupData = {},} = this.state;\r\n if (!iPermission) return null;\r\n return (\r\n {this.renderFilters()}
\r\n \r\n \r\n this.handleFilter(\"DateFrom\", e)}\r\n />\r\n
\r\n \r\n \r\n \r\n this.handleFilter(\"DateTo\", e)}\r\n />\r\n
\r\n \r\n \r\n \r\n {_.get(data, \"TransTypeName\", \"\")}\r\n \r\n {!isModal ? (\r\n this.setState({ showZoomFormInfo: true })}\r\n />\r\n ) : (\r\n \"\"\r\n )}\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {_.get(getUser, \"UserPictureURL\", \"\") ? (\r\n
\r\n \r\n {arrEmployeeInfo.map(({ content }, i) => (\r\n
\r\n {content}
\r\n ))}\r\n \r\n \r\n = 1 ? 15 : 0\r\n }}\r\n >\r\n \r\n \r\n ({!!resultDes ? resultDes : typeEvaluationName[isTypeEvaluation]})\r\n \r\n \r\n
\r\n \r\n {note} \r\n {proportion.isVisible ? (\r\n {proportion.value}\r\n ) : (\r\n \"\"\r\n )}\r\n \r\n
\r\n \r\n {arrEvaluationValue.map((item, i) => {\r\n let evalVal = item.value;\r\n if (item.name && (isTypeEvaluation === 0 || isTypeEvaluation === 2)) {\r\n evalVal = `${item.value} (${item.name})`;\r\n }\r\n return (\r\n
\r\n \r\n {arrEvaluationNote.map((item, i) => (\r\n
\r\n
\r\n );\r\n })}\r\n \r\n {arrLabelLevels.map((item, i) =>\r\n (!!item.note ? \r\n \r\n {_.join(_.compact([item.label, \" \"]), \":\")}\r\n \r\n \r\n
: \"\"))}\r\n
\r\n \r\n
\r\n ) : (\r\n \r\n {Config.lang(\"Dinh_kem\")} \r\n
\r\n {getAttachments && getAttachments.length > 0 ? (\r\n \r\n {getAttachments.map((e, indx) => {\r\n const ext = _.get(e, \"FileExt\", \"\").replace(\".\", \"\");\r\n const fileUrl = _.get(e, \"URL\", \"\");\r\n return (\r\n
\r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n this.onViewFile(e)}\r\n style={{ width: '100%', height: '100%' }}\r\n className={\"display_row valign-middle align-center\"}>\r\n {['jpg', 'jpeg', 'png', 'bmp', 'svg', 'gif'].indexOf(ext) > -1 && fileUrl ? (\r\n -1 ? fileUrl : Config.getCDNPath() + fileUrl}\r\n style={{\r\n maxWidth: '100%',\r\n height: '100%',\r\n objectFit: 'contain'\r\n }}\r\n />\r\n ) : (\r\n
\r\n \r\n
\r\n )}\r\n \r\n \r\n
\r\n \r\n {e.FileName}\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n {e.FileName}\r\n
\r\n \r\n
\r\n \r\n {Config.lang(\"Khong_co_du_lieu\")}\r\n
\r\n )}\r\n \r\n {value}
\r\n };\r\n\r\n const onOpenMenu = (status, data) => {\r\n if (!_.isBoolean(status)) return;\r\n setCurrentRowClick(data);\r\n setShowFormInfo(status); // Mở Modal lên\r\n };\r\n\r\n const renderActionGrid = (e) => {\r\n const currentRowSelected = _.get(e, \"data\", {});\r\n return (\r\n \r\n collapsePanel(false)}\r\n />\r\n {!minimum && {Config.lang(\"Tieu_chi_loc\")} }\r\n
\r\n {!minimum && (\r\n \r\n \r\n handleChange(\"TransTypeID\", e)}\r\n />\r\n \r\n handleChange(\"OrgchartID\", e)}\r\n >\r\n handleChange(\"OrgchartID\", e)}\r\n />\r\n \r\n \r\n handleChange(\"EmployeeID\", e)}\r\n onInput={(e) => {\r\n const value = e.target.value;\r\n if (timer.current) clearTimeout(timer.current);\r\n timer.current = setTimeout(() => {\r\n filterCboEmployees.current.strSearch = value;\r\n filterCboEmployees.current.skip = 0;\r\n loadCboEmployees(true);\r\n }, 700);\r\n }}\r\n onLoadMore={(e) => {\r\n filterCboEmployees.current.skip = e.skip;\r\n filterCboEmployees.current.limit = e.limit;\r\n loadCboEmployees();\r\n }}\r\n />\r\n \r\n handleChange(\"RangePicker\", e)}\r\n placeholder={\"dd/mm/yyyy - dd/mm/yyyy\"}\r\n returnFormat={\"YYYY-MM-DD\"}\r\n />\r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n {`(${tmpSelectedRowKeys.current?.length ?? 0})`} \r\n
\r\n \r\n \r\n {_.get(data, \"TransTypeName\", \"\")}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {_.get(getUser, \"UserPictureURL\", \"\") ? (\r\n
\r\n \r\n {arrEmployeeInfo.map(({ content }, i) => (\r\n
\r\n {content}
\r\n ))}\r\n \r\n \r\n = 1 ? 15 : 0\r\n }}\r\n >\r\n \r\n \r\n ({!!resultDes ? resultDes : typeEvaluationName[isTypeEvaluation]})\r\n \r\n \r\n
\r\n \r\n {note} \r\n {proportion.isVisible ? (\r\n {proportion.value}\r\n ) : (\r\n \"\"\r\n )}\r\n \r\n
\r\n \r\n {arrEvaluationValue.map((item, i) => {\r\n let evalVal = item.value;\r\n if (item.name && (isTypeEvaluation === 0 || isTypeEvaluation === 2)) {\r\n evalVal = `${item.value} (${item.name})`;\r\n }\r\n return (\r\n
\r\n \r\n {arrEvaluationNote.map((item, i) => (\r\n
\r\n
\r\n );\r\n })}\r\n \r\n {arrLabelLevels.map((item, i) =>\r\n (!!item.note ? \r\n \r\n {_.join(_.compact([item.label, \" \"]), \":\")}\r\n \r\n \r\n
: \"\"))}\r\n
\r\n \r\n {\r\n if (onChangePage) onChangePage(page);\r\n }}\r\n onChangePerPage={per => {\r\n if (onChangePerPage) onChangePerPage(per);\r\n }}\r\n />\r\n
\r\n );\r\n});\r\n\r\nW39F3000LeftCol.propTypes = {\r\n classes: PropTypes.object,\r\n colorStatusArr: PropTypes.array,\r\n redirect: PropTypes.func,\r\n changeLoading: PropTypes.func,\r\n loadData: PropTypes.func,\r\n filter: PropTypes.object,\r\n selectedGoalPlan: PropTypes.string,\r\n changeSelectedGoalPlan: PropTypes.func,\r\n canvasHtml: PropTypes.object,\r\n};\r\n\r\nW39F3000LeftCol.defaultProps = {\r\n classes: {},\r\n colorStatusArr: [],\r\n redirect: null,\r\n changeLoading: null,\r\n loadData: null,\r\n filter: { current: null },\r\n selectedGoalPlan: '',\r\n changeSelectedGoalPlan: null,\r\n canvasHtml: { current: {} },\r\n};\r\n\r\nexport default W39F3000LeftCol;\r\n","/**\r\n * @Copyright 2021 @DigiNet\r\n * @Author XUANLOC\r\n * @Create 1/7/2021\r\n * @Example\r\n */\r\n\r\nimport { Collapse, Button, Status, Typography, Tooltip } from 'diginet-core-ui/components';\r\nimport PropTypes from 'prop-types';\r\nimport React, { useEffect, useState } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport Config from '../../../../../config';\r\nimport * as W39F3000Actions from '../../../../../redux/W3X/W39F3000/W39F3000_actions';\r\nimport W39F3000GroupGoal from './W39F3000GroupGoal';\r\nimport { usePlanStyle } from '../planStyle';\r\nimport Icon from 'diginet-core-ui/icons';\r\nimport W84F3010 from \"../../../../W8X/W84/W84F3010/W84F3010.js\";\r\nconst W39F3000GoalPlan = (props) => {\r\n const {\r\n classes,\r\n colorStatusArr,\r\n redirect,\r\n changeLoading,\r\n loadData,\r\n data,\r\n selectedGoalPlan,\r\n changeSelectedGoalPlan,\r\n toggleRefs,\r\n } = props;\r\n\r\n const [expand, setExpand] = useState(false);\r\n const [showW84F3010Popup, setShowW84F3010Popup] = useState(false);\r\n\r\n const planStyle = usePlanStyle({ expand });\r\n\r\n useEffect(() => {\r\n setExpand(data?.GoalPlanID === selectedGoalPlan);\r\n }, [data, selectedGoalPlan]);\r\n\r\n const detailData = useSelector((state) => state.W39F3000.detailData) ?? {};\r\n\r\n const dispatch = useDispatch();\r\n\r\n const finishGoalPlan = () => {\r\n const param = {\r\n DivisionID: Config.getDivisionID() || '',\r\n FormID: 'W39F3000',\r\n Language: Config.language || '84',\r\n UserID: Config.profile.UserID || '',\r\n TransID: data.TransID || '',\r\n Mode: data?.StatusID === 0 ? 0 : 1,\r\n };\r\n\r\n changeLoading(true);\r\n dispatch(\r\n W39F3000Actions.finishGoalPlan(param, (err, dt) => {\r\n changeLoading(false);\r\n if (err) return Config.popup2.show('ERROR', err);\r\n if (dt?.Status) return Config.notify.show('error', dt?.Message ?? '', 2000);\r\n loadData();\r\n })\r\n );\r\n };\r\n\r\n const handleExpand = (newGoalPlan = '') => {\r\n if (expand) {\r\n changeSelectedGoalPlan();\r\n } else {\r\n changeSelectedGoalPlan(newGoalPlan);\r\n }\r\n setExpand((expand) => !expand);\r\n };\r\n\r\n const onHistoryApproval = () => {\r\n setShowW84F3010Popup(true);\r\n };\r\n\r\n const saveApproval = () => {\r\n const params = {\r\n ModuleID: \"D39\",\r\n VoucherID: data?.TransID ?? \"\",\r\n EmployeeID: data?.EmployeeID ?? \"\",\r\n FormID: \"W39F3000\",\r\n TransTypeID: \"\",\r\n Mode: data?.StatusID === 0 ? 0 : 1,\r\n StatusApproval: 0,\r\n ApprovalLevel: 0,\r\n Language: Config.language || 84,\r\n TransactionID: \"W39F3001\",\r\n Note: \"\",\r\n };\r\n Config.popup.show(\"YES_NO\", Config.lang(\"Ban_co_chac_muon_dang_ky_muc_tieu_khong?\"), () => {\r\n dispatch(\r\n W39F3000Actions.saveStandardApproval(params, (errors, data) => {\r\n if (errors) {\r\n Config.popup.show(\"ERROR\", errors);\r\n return false;\r\n }\r\n if(data?.Status === 0) {\r\n Config.notify.show(\"success\", Config.lang(\"Luu_thanh_cong\"), 2000);\r\n loadData();\r\n } else {\r\n let message = data.Message || Config.lang(\"Loi_chua_xac_dinh\");\r\n Config.popup.show(\"INFO\", message);\r\n }\r\n })\r\n );\r\n });\r\n };\r\n\r\n // set toggleRefs = [] khi mở GoalPlan mới\r\n const clearToggleRefs = () =>{\r\n toggleRefs.current = []\r\n }\r\n\r\n return (\r\n \r\n {data?.rows?.map((row, idx) => (\r\n
\r\n selectedGoalRef.current[row?.GoalPlanID] = el}>\r\n
\r\n ))}\r\n \r\n {showW84F3010Popup ?\r\n setShowW84F3010Popup(false)}\r\n FormID=\"W39F3000\"\r\n TransID={data?.TransID} />\r\n : \"\"}\r\n\r\n \r\n {data?.GoalPlanID === selectedGoalPlan &&\r\n detailData?.GroupGoal?.map(i => {\r\n return (\r\n \r\n {data?.GoalPlanID === selectedGoalPlan && !detailData?.IsReview && !detailData?.IsApprove && (\r\n
\r\n );\r\n};\r\n\r\nW39F3000GoalPlan.propTypes = {\r\n classes: PropTypes.object,\r\n data: PropTypes.object,\r\n colorStatusArr: PropTypes.array,\r\n redirect: PropTypes.func,\r\n changeLoading: PropTypes.func,\r\n loadData: PropTypes.func,\r\n selectedGoalPlan: PropTypes.string,\r\n changeSelectedGoalPlan: PropTypes.func,\r\n};\r\n\r\nW39F3000GoalPlan.defaultProps = {\r\n classes: {},\r\n data: {},\r\n colorStatusArr: [],\r\n redirect: null,\r\n changeLoading: null,\r\n loadData: null,\r\n selectedGoalPlan: '',\r\n changeSelectedGoalPlan: null,\r\n};\r\n\r\nexport default W39F3000GoalPlan;\r\n","/**\r\n * @Copyright 2021 @DigiNet\r\n * @Author XUANLOC\r\n * @Create 30/3/2021\r\n * @Example\r\n */\r\n\r\nimport { Collapse, Typography } from \"diginet-core-ui/components\";\r\nimport { ArrowUp } from 'diginet-core-ui/icons';\r\nimport PropTypes from 'prop-types';\r\nimport React, { useRef, useState } from 'react';\r\nimport Config from \"../../../../../config\";\r\nimport W39F3000Goal from './W39F3000Goal';\r\n\r\nW39F3000GroupGoal.propTypes = {\r\n data: PropTypes.object,\r\n classes: PropTypes.object,\r\n colorStatusArr: PropTypes.array,\r\n redirect: PropTypes.func,\r\n changeLoading: PropTypes.func,\r\n};\r\n\r\nfunction W39F3000GroupGoal(props) {\r\n const { data, classes, colorStatusArr, redirect, changeLoading, toggleRefs } = props;\r\n const [expand, setExpand] = useState(true);\r\n\r\n const listGoalRef = useRef(null);\r\n\r\n let position = {\r\n left: 0,\r\n x: 0,\r\n };\r\n\r\n const toogleExpand = () => {\r\n setExpand(!expand);\r\n };\r\n\r\n const totalProportion = data.GroupGoalDetail.reduce((total, current) => total + current.Proportion, 0);\r\n const totalResult = data.GroupGoalDetail.reduce((total, current) => total + (current.Result * current.Proportion / totalProportion), 0).toFixed(2);\r\n\r\n const onMouseDown = e => {\r\n position = {\r\n left: listGoalRef.current.scrollLeft,\r\n x: e.clientX,\r\n };\r\n\r\n if (listGoalRef.current.scrollWidth > listGoalRef.current.clientWidth) {\r\n listGoalRef.current.addEventListener('mousemove', onMouseMove);\r\n listGoalRef.current.addEventListener('mouseup', onMouseUp);\r\n }\r\n };\r\n\r\n const onMouseMove = e => {\r\n const dx = e.clientX - position.x;\r\n\r\n // Scroll the element\r\n if (listGoalRef.current) {\r\n listGoalRef.current.style.cursor = 'grabbing';\r\n listGoalRef.current.style.userSelect = 'none';\r\n listGoalRef.current.scrollLeft = position.left - dx;\r\n }\r\n };\r\n\r\n const onMouseUp = () => {\r\n listGoalRef.current.style.cursor = null;\r\n listGoalRef.current.style.removeProperty('user-select');\r\n listGoalRef.current.removeEventListener('mousemove', onMouseMove);\r\n listGoalRef.current.removeEventListener('mouseup', onMouseUp);\r\n };\r\n\r\n return (\r\n \r\n \r\n {\r\n onHistoryApproval()\r\n }}\r\n />\r\n \r\n : \"\"}\r\n
\r\n {expand ?\r\n \r\n handleExpand(data?.GoalPlanID ?? '')}>\r\n {data?.GoalPlanName ?? ''}\r\n \r\n {Number.isInteger(data?.StatusID) && (\r\n
\r\n {\r\n data?.IsGoalApproval === 1 &&\r\n (data?.GoalAppStatus === 1 ||\r\n data?.GoalAppStatus === 2 ||\r\n data?.GoalAppStatus === 100\r\n ) ?\r\n \r\n {\r\n data?.IsGoalApproval === 1 &&\r\n (data?.GoalAppStatus === 0 ||\r\n data?.GoalAppStatus === 100\r\n ) ?\r\n
\r\n : \"\"}\r\n \r\n \r\n \r\n {data?.GroupGoalDetail?.length > 0 && (\r\n
\r\n )}\r\n {data.GroupGoalDetail.map((i, index) => (\r\n \r\n \r\n \r\n {`${data.GroupGoalName || \"\"} (${data.GroupGoalDetail.length})`}\r\n \r\n
\r\n \r\n \r\n \r\n {Config.lang(\"Ket_qua\")}\r\n \r\n \r\n ({totalResult})\r\n \r\n
\r\n \r\n \r\n {Config.lang(\"Ten_muc_tieu\")}\r\n \r\n
\r\n \r\n {Config.lang(\"Trong_so\")} \r\n ({totalProportion}) \r\n
\r\n \r\n {Config.lang(\"Han_hoan_thanh\")} \r\n
\r\n \r\n {Config.lang(\"Thuc_hien1\")} \r\n
\r\n \r\n {data?.Type === \"Key\" && (\r\n \r\n \r\n
\r\n {detailData?.IsEdit === 1 && (\r\n \r\n {data.Type === \"Object\" && (\r\n <>\r\n toogleExpandTargetResult(\"click\")}\r\n className={`${classes.iconExpandTransition} ${classes.pointerCursor}`}\r\n style={{ color: \"#7F828E\", transform: expandTargetResult ? \"\" : \"rotate(90deg)\" }}\r\n >\r\n setToggleRef(element)}\r\n onClick={() => toogleExpandTargetResult(\"trigger\")}\r\n />\r\n \r\n )}\r\n
\r\n \r\n \r\n redirect(\"detail\", data)}\r\n className={`${classes.pointerCursor}`}\r\n >\r\n {data?.GoalName ?? \"\"}\r\n \r\n \r\n 0 ? classes.pointerCursor : \"\"\r\n }`}\r\n onClick={e => {\r\n if (data.NumComment > 0) redirect(\"comment\", data);\r\n }}\r\n >\r\n \r\n {data.NumComment || 0}\r\n \r\n
\r\n \r\n {data.Type === \"Object\" && (\r\n redirect(\"detail\", data)}\r\n >\r\n \r\n {data.NumberOfKey || \"\"}\r\n \r\n
\r\n )}\r\n \r\n {data.Proportion || 0}% \r\n
\r\n \r\n {validDateTo?.format(\"DD/MM/YYYY\") || \"\"} \r\n
\r\n \r\n {user?.EmployeeName || \"\"} \r\n
\r\n \r\n {data.Type === \"Object\" && dataTargetResult.length > 0 && (\r\n \r\n {data.Type === \"Object\" && dataTargetResult.length > 0 && position && expandTargetResult && (\r\n \r\n \r\n {data.Type === \"Object\" &&\r\n dataTargetResult.length > 0 &&\r\n expandTargetResult &&\r\n dataTargetResult.map(i => (\r\n
\r\n )}\r\n \r\n );\r\n}\r\n\r\nexport default W39F3000Goal;","/**\r\n * @Copyright 2021 @DigiNet\r\n * @Author XUANLOC\r\n * @Create 14/5/2021\r\n * @Example\r\n */\r\n\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nexport const useGoalStyle = makeStyles((theme) => ({\r\n svg: {\r\n opacity: 0,\r\n animation: '$showSVG 0.1s forwards',\r\n animationDelay: (props) => `calc(0.1s * ${props.numberOfTR})`,\r\n },\r\n '@keyframes showSVG': {\r\n to: {\r\n opacity: 1,\r\n },\r\n },\r\n}));\r\n","/**\r\n * @Copyright 2021 @DigiNet\r\n * @Author XUANLOC\r\n * @Create 3/7/2021\r\n * @Example\r\n */\r\n\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nexport const usePlanStyle = makeStyles((theme) => ({\r\n divGoalPlanCont: {\r\n display: 'flow-root',\r\n padding: (props) => (props.expand ? '0 0 18px' : '18px 0'),\r\n '&:hover': {\r\n background: (props) => (props.expand ? 'white' : '#eff5ff'),\r\n },\r\n },\r\n divGoalPlanName: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n gap: 5,\r\n marginBottom: (props) => (props.expand ? 15 : 0),\r\n },\r\n}));\r\n","/**\r\n * @Copyright 2021 @DigiNet\r\n * @Author XUANLOC\r\n * @Create 27/3/2021\r\n * @Example\r\n */\r\n\r\nimport { LoadPanel } from 'devextreme-react';\r\nimport { Avatar, CircularProgress, TextInput, Typography } from 'diginet-core-ui/components';\r\nimport { ArrowDown } from 'diginet-core-ui/icons';\r\nimport html2canvas from 'html2canvas';\r\nimport _ from 'lodash';\r\nimport PropTypes from 'prop-types';\r\nimport React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport Config from '../../../../../config';\r\nimport * as generalActions from '../../../../../redux/general/general_actions';\r\n\r\nconst W39F3000RightCol = forwardRef((props, ref) => {\r\n const { tabIndex, classes, current, changeCurrent, selectedGoalPlan, canvasHtml, disabledCboEmployee, isPopup } = props;\r\n\r\n const [data, setData] = useState({ rows: [], total: 0 });\r\n const [loading, setLoading] = useState(false);\r\n\r\n const dispatch = useDispatch();\r\n let dataGoalPlan = useSelector((state) => state.W39F3000.detailData);\r\n if (selectedGoalPlan !== dataGoalPlan?.GoalPlanID) {\r\n dataGoalPlan = {};\r\n }\r\n\r\n const typingTimeoutRef = useRef(null);\r\n const planProgressRef = useRef(null);\r\n\r\n const menuType = _.toNumber(Config.getLocalStorage(\"MENUTYPEDHR\"));\r\n\r\n const paramEmployee = useRef({\r\n skip: 0,\r\n limit: 10,\r\n search: '',\r\n });\r\n\r\n const paramOrgChart = useRef({\r\n search: '',\r\n });\r\n\r\n const htmlToCanvas = async () => {\r\n if (planProgressRef.current) {\r\n const svgElements = planProgressRef.current.querySelectorAll('svg');\r\n svgElements.forEach(function (item) {\r\n item.setAttribute('width', item.getBoundingClientRect().width);\r\n item.setAttribute('height', item.getBoundingClientRect().height);\r\n item.style.width = null;\r\n item.style.height = null;\r\n });\r\n\r\n await html2canvas(planProgressRef.current, {\r\n scale: 2,\r\n allowTaint: true,\r\n useCORS: true,\r\n scrollX: 0,\r\n scrollY: -window.scrollY,\r\n }).then((canvas) => {\r\n const imgData = canvas.toDataURL('image/png');\r\n if (canvas && imgData) {\r\n try {\r\n canvasHtml.current.planProgressImg = imgData;\r\n } catch (err) {\r\n Config.popup.show('ERROR', err);\r\n }\r\n } else {\r\n Config.popup.show('ERROR', Config.lang('Co_loi_xay_ra_trong_qua_trinh_xu_ly'));\r\n }\r\n });\r\n }\r\n };\r\n\r\n useImperativeHandle(ref, () => ({\r\n htmlToCanvas: htmlToCanvas,\r\n }));\r\n\r\n const loadData = async (isReset) => {\r\n let param;\r\n setLoading(true);\r\n if (tabIndex === 0) {\r\n param = {\r\n Type: 'EmployeeID',\r\n FormID: 'W39F3000',\r\n Language: Config.language || '84',\r\n Disabled: +(disabledCboEmployee ?? false),\r\n ...paramEmployee.current,\r\n };\r\n dispatch(\r\n generalActions.getCboEmployees(param, (err, dt) => {\r\n setLoading(false);\r\n if (err) return Config.popup.show('ERROR', err);\r\n if (dt) {\r\n const rows = _.get(dt, 'rows', false) || dt;\r\n const total = _.get(dt, 'total', 0) || _.size(dt);\r\n setData({ rows: isReset ? rows : _.concat(data.rows, rows), total });\r\n }\r\n })\r\n );\r\n } else {\r\n param = {\r\n FormID: 'W39F3000',\r\n HostID: '',\r\n OrgChartID: '',\r\n Mode: 0,\r\n Key01ID: '',\r\n ...paramOrgChart.current\r\n };\r\n dispatch(\r\n generalActions.getOrgCharts(param, (err, dt) => {\r\n setLoading(false);\r\n if (err) return Config.popup.show('ERROR', err);\r\n if (dt) {\r\n const rows = _.get(dt, 'rows', false) || dt;\r\n const rowsFiltered = rows.filter(e => e.OrgChartID.toLowerCase().includes(paramOrgChart.current.search.toLowerCase()))\r\n const total = _.get(dt, 'total', 0) || _.size(dt);\r\n setData({ rows: isReset ? rowsFiltered : _.concat(data, rows), total });\r\n }\r\n })\r\n );\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n loadData(true);\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [current, tabIndex, disabledCboEmployee]);\r\n\r\n const onChange = (value) => {\r\n if (typingTimeoutRef.current) {\r\n clearInterval(typingTimeoutRef.current);\r\n }\r\n if (tabIndex === 0) {\r\n typingTimeoutRef.current = setTimeout(() => {\r\n paramEmployee.current.skip = 0;\r\n paramEmployee.current.search = value;\r\n loadData(true);\r\n }, 500);\r\n } else {\r\n typingTimeoutRef.current = setTimeout(() => {\r\n paramOrgChart.current.search = value;\r\n loadData(true);\r\n }, 500);\r\n }\r\n };\r\n\r\n const handleScroll = (e) => {\r\n const el = e.target;\r\n if (el.scrollTop >= el.scrollHeight - el.clientHeight - 20) {\r\n if (data.total) {\r\n if (paramEmployee.current.skip + paramEmployee.current.limit < data.total) {\r\n paramEmployee.current.skip = paramEmployee.current.skip + paramEmployee.current.limit;\r\n loadData();\r\n }\r\n }\r\n }\r\n el.removeEventListener('scroll', handleScroll);\r\n };\r\n\r\n const getOrgShortName = (name) => {\r\n name = name.trim();\r\n let shortName = '';\r\n const hyphenIdx = name.indexOf('-');\r\n if (hyphenIdx > -1) {\r\n name = name.substring(hyphenIdx + 1).trim();\r\n }\r\n if (name && name.length > 0) {\r\n const splitName = name.split(' ');\r\n if (splitName.length > 1) {\r\n shortName = `${splitName[splitName.length - 2][0]}${splitName[splitName.length - 1][0]}`;\r\n } else {\r\n shortName = splitName[splitName.length - 1][0];\r\n }\r\n shortName = shortName.toUpperCase();\r\n }\r\n return shortName;\r\n };\r\n\r\n const getOrgName = (name) => {\r\n name = name.trim();\r\n let newName = name;\r\n const hyphenIdx = name.indexOf('-');\r\n if (hyphenIdx > -1) {\r\n newName = name.substring(hyphenIdx + 1).trim();\r\n }\r\n return newName;\r\n };\r\n\r\n const renderCurrent = () => {\r\n let crt;\r\n if (tabIndex === 0) {\r\n crt = (\r\n \r\n
\r\n );\r\n } else {\r\n crt = (\r\n \r\n \r\n {current?.EmployeeName ?? ''}\r\n \r\n \r\n {current?.DutyName ?? ''}\r\n \r\n
\r\n \r\n \r\n {getOrgShortName(current?.OrgChartName ?? '')}\r\n \r\n
\r\n );\r\n }\r\n return crt;\r\n };\r\n\r\n const renderListOther = () => {\r\n let listOther;\r\n if (tabIndex === 0) {\r\n listOther = (\r\n <>\r\n \r\n \r\n {getOrgName(current?.OrgChartName ?? '')}\r\n \r\n
\r\n \r\n {data.rows &&\r\n data.rows.length > 0 &&\r\n data.rows.map((emp, idx) => {\r\n return emp ? (\r\n \r\n {Config.lang('Ban_dang_xem_muc_tieu_cua')}\r\n \r\n {renderCurrent()}\r\n {!!menuType && !isPopup ?\r\n <>\r\n \r\n {tabIndex === 0 ? Config.lang('Xem_muc_tieu_cua_nguoi_khac') : Config.lang('Xem_muc_tieu_cua_co_cau_to_chuc_khac')}\r\n \r\n (\r\n <>\r\n setDisabledCboEmployee(e?.value ?? false)}\r\n />}\r\n \r\n setYearFrom(e.value)}\r\n showClearButton={true}\r\n placeholder={'yyyy'}\r\n value={yearFrom ?? ''}\r\n displayFormat={'yyyy'}\r\n />\r\n \r\n setYearTo(e.value)}\r\n showClearButton={true}\r\n placeholder={'yyyy'}\r\n value={yearTo ?? ''}\r\n displayFormat={'yyyy'}\r\n />\r\n \r\n
\r\n ![\"\"](\"')
'\r\n );\r\n myWindow.document.close();\r\n myWindow.focus();\r\n } catch (error) {\r\n Config.popup.show(\"ERROR\", Config.lang(\"Co_loi_xay_ra_trong_qua_trinh_xu_ly\"));\r\n }\r\n };\r\n // function check collapse cuối cùng đã mở hay chưa\r\n const checkLastCollapseIsOpened = async () => {\r\n setLoading(true);\r\n const lastCollapseIsOpened = toggleRefs?.current[toggleRefs?.current.length - 1]?.isOpened === true;\r\n if (lastCollapseIsOpened === false) {\r\n setTimeout(() => checkLastCollapseIsOpened(), 500);\r\n } else {\r\n canvasHTML();\r\n }\r\n };\r\n if (toggleRefs.current.length !== 0) {\r\n await toggleHandler();\r\n // check nếu có collapse nào chưa mở\r\n checkLastCollapseIsOpened();\r\n } else {\r\n setLoading(true);\r\n canvasHTML();\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \r\n \r\n changeTab(0)} label={Config.lang('Muc_tieu_ca_nhan')} />\r\n changeTab(1)} label={Config.lang('Muc_tieu_co_cau_to_chuc')} disabled={iPermission < 1}/>\r\n \r\n \r\n \r\n
\r\n \r\n handleOpenW39F3005(true)}\r\n />\r\n \r\n \r\n {Config.lang('Trang_thai_muc_tieu')}\r\n \r\n {colorStatusArr.map((i) => {\r\n return (\r\n handleOpenPopW39F3002()}\r\n >\r\n {Config.lang('Thong_tin_ket_qua_then_chot')} \r\n \r\n \r\n \r\n )}\r\n {isOpenW39F3004 &&
changeCurrent(emp)}>\r\n
\r\n ) : (\r\n \r\n {`${emp?.EmployeeID}-${emp?.EmployeeName}`} \r\n \r\n {emp?.DutyName || ''}\r\n \r\n
\r\n \r\n );\r\n })}\r\n {data.rows && data.rows.length === 0 && (\r\n \r\n {Config.lang('Khong_co_du_lieu')}\r\n \r\n )}\r\n
\r\n {data.rows && data.rows.length < data.total && (\r\n \r\n
\r\n )}\r\n \r\n );\r\n } else {\r\n listOther = (\r\n <>\r\n \r\n {data.rows.length > 0 &&\r\n data.rows.map((org, idx) => {\r\n return (\r\n \r\n {Config.lang('Khong_co_du_lieu')}\r\n \r\n )}\r\n
\r\n \r\n );\r\n }\r\n return listOther;\r\n };\r\n\r\n return (\r\n <>\r\n changeCurrent(org)}>\r\n {getOrgShortName(org.OrgChartName || '')}\r\n
\r\n );\r\n })}\r\n {data.rows.length === 0 && (\r\n \r\n {`${org?.OrgChartID}-${getOrgName(\r\n org?.OrgName ?? ''\r\n )}`} \r\n
\r\n \r\n
\r\n \r\n \r\n {Config.lang('Tien_do_thuc_hien')}\r\n \r\n
\r\n {dataGoalPlan.PeriodResult > 0 && (\r\n \r\n \r\n {dataGoalPlan.PeriodName || ''}\r\n \r\n
\r\n )}\r\n \r\n onChange(e.target.value)}\r\n />\r\n {renderListOther()}\r\n
\r\n : \"\"}\r\n \r\n );\r\n});\r\n\r\nW39F3000RightCol.propTypes = {\r\n tabIndex: PropTypes.number,\r\n classes: PropTypes.object,\r\n current: PropTypes.object,\r\n changeCurrent: PropTypes.func,\r\n selectedGoalPlan: PropTypes.string,\r\n canvasHtml: PropTypes.object,\r\n disabledCboEmployee: PropTypes.bool,\r\n};\r\n\r\nW39F3000RightCol.defaultProps = {\r\n tabIndex: 0,\r\n classes: {},\r\n current: {},\r\n changeCurrent: null,\r\n selectedGoalPlan: '',\r\n canvasHtml: { current: {} },\r\n disabledCboEmployee: false,\r\n};\r\n\r\nexport default W39F3000RightCol;\r\n","/**\r\n * @Copyright 2021 @DigiNet\r\n * @Author XUANLOC\r\n * @Create 27/3/2021\r\n * @Example\r\n */\r\n\r\nimport {LoadPanel} from 'devextreme-react';\r\nimport {Button,\r\n ButtonIcon,\r\n Checkbox,\r\n Popover as CorePopover,\r\n TabContainer,\r\n TabHeader,\r\n TabItem,\r\n Typography,\r\n Modal,\r\n ModalHeader,\r\n ModalBody,\r\n} from 'diginet-core-ui/components';\r\nimport _ from 'lodash';\r\nimport moment from 'moment';\r\nimport React, { useEffect, useRef, useState } from 'react';\r\nimport { Col, Row } from 'react-bootstrap';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { browserHistory } from 'react-router';\r\nimport Popover from '../../../../components/grid-container/popover-action';\r\nimport Config from '../../../../config';\r\nimport * as generalActions from '../../../../redux/general/general_actions';\r\nimport * as W39F3000Actions from '../../../../redux/W3X/W39F3000/W39F3000_actions';\r\nimport ButtonGeneral from '../../../common/button/button-general';\r\nimport DropDownOrganization from '../../../common/dropdown/dropdown-treeview';\r\nimport {Combo} from '../../../common/form-material';\r\nimport DateBoxPicker from '../../../common/form-material/date-box';\r\nimport ActionToolbar from '../../../common/toolbar/action-toolbar';\r\nimport Filter from '../../../filter/filter';\r\nimport W39F3001 from '../W39F3001/W39F3001';\r\nimport W39F3002 from '../W39F3002/W39F3002';\r\nimport W39F3004 from '../W39F3004/W39F3004';\r\nimport W39F3005 from '../W39F3005/W39F3005';\r\nimport {useStyles} from './styles';\r\nimport W39F3000LeftCol from './utils/W39F3000LeftCol';\r\nimport W39F3000RightCol from './utils/W39F3000RightCol';\r\nimport {useTheme} from 'diginet-core-ui/theme'\r\nconst {zIndex} = useTheme();\r\n\r\nfunction W39F3000(props) {\r\n const menuType = _.toNumber(Config.getLocalStorage(\"MENUTYPEDHR\"));\r\n const currentEmployeeReducer = useSelector((state) => state.W39F3000.currentEmployee);\r\n const currentOrgReducer = useSelector((state) => state.W39F3000.currentOrg);\r\n const currentTabIndex = useSelector((state) => state.W39F3000.currentTabIndex);\r\n const { location, isPopup } = props;\r\n // ref nhận các nút mũi tên xuống trong W39F3000Goal\r\n const toggleRefs = useRef([]);\r\n const [iPermission, setIPermission] = useState(0);\r\n const [loading, setLoading] = useState(false);\r\n const [dataCboStatusGoal, setDataCboStatusGoal] = useState([]);\r\n const [dataCboGoalTable, setDataCboGoalTable] = useState([]);\r\n const [dataCboEmployees, setDataCboEmployees] = useState({ rows: [], total: 0 });\r\n const [currentEmployee, setCurrentEmployee] = useState(() => {\r\n if(!menuType || _.isEmpty(currentEmployeeReducer)) {\r\n return Config.getUser({ EmployeeID: isPopup?.EmployeeID || Config.profile.HREmployeeID || '' })\r\n }\r\n else return currentEmployeeReducer?.param\r\n });\r\n const [isRenderModalW39F3001, setIsRenderModalW39F3001] = useState(false);\r\n const [currentOrgChart, setCurrentOrgChart] = useState(() => {\r\n if(!menuType || _.isEmpty(currentOrgReducer)) {\r\n return {\r\n OrgChartID: currentEmployee?.OrgChartID ?? '',\r\n OrgChartName: currentEmployee?.OrgChartName ?? '',\r\n };\r\n }\r\n return {\r\n OrgChartID: currentOrgReducer?.param?.OrgChartID,\r\n OrgChartName: currentOrgReducer?.param?.OrgChartName\r\n };\r\n });\r\n const [isLoadingCboEmployee, setLoadingCboEmployee] = useState(false);\r\n const [disabledCboEmployee, setDisabledCboEmployee] = useState(false);\r\n const [dateFrom, setDateFrom] = useState(null);\r\n const [dateTo, setDateTo] = useState(null);\r\n const [tempDateFrom, setTempDateFrom] = useState(null);\r\n const [tempDateTo, setTempDateTo] = useState(null);\r\n const [isSetDate, setIsSetDate] = useState(false);\r\n const [selectedDateRange, setSelectedDateRange] = useState('');\r\n const [tabIndex, setTabIndex] = useState(currentTabIndex);\r\n const [batchCreateGoal, setBatchCreateGoal] = useState(null);\r\n const [toogleColorDes, setToogleColorDes] = useState(false);\r\n const [toogleActBtnCont, setToogleActBtnCont] = useState(false);\r\n const [isOpenW39F3005, setIsOpenW39F3005] = useState(false);\r\n const [isOpenPopW39F3002, setIsOpenPopW39F3002] = useState(false);\r\n const [dataW39F3002, setDataW39F3002] = useState({ GoalID: '', Type: '' });\r\n const [isOpenW39F3004, setIsOpenW39F3004] = useState(false);\r\n const [goalData, setGoalData] = useState({});\r\n const [dataCboStatusGoalPlan, setDataCboStatusGoalPlan] = useState([]);\r\n const [yearFrom, setYearFrom] = useState(null);\r\n const [yearTo, setYearTo] = useState(null);\r\n const [selectedGoalPlan, setSelectedGoalPlan] = useState('');\r\n const [isShowBtnAct, setIsShowBtnAct] = useState(false);\r\n const [filterEmployee, setFilterEmployee] = useState(() => currentEmployee);\r\n const [isMounted, setIsMounted] = useState(false);\r\n const dispatch = useDispatch();\r\n const dataTab1 = useSelector((state) => state.W39F3000.data);\r\n\r\n const classes = useStyles();\r\n\r\n const dateFilter = useRef();\r\n const filter = useRef({\r\n GoalPlanID: isPopup?.GoalPlanID || '',\r\n EmployeeID: currentEmployee?.EmployeeID ?? '',\r\n OrgChartID: currentOrgChart?.OrgChartID ?? '',\r\n StatusID: null,\r\n DateFrom: null,\r\n DateTo: null,\r\n GoalPlanStatusID: null,\r\n skip: 0,\r\n limit: 20,\r\n });\r\n const btnColorDes = useRef(null);\r\n const btnColorDes2 = useRef(null);\r\n const btnActCont = useRef(null);\r\n const loginEmployee = useRef(Config.getUser({ EmployeeID: Config.profile.HREmployeeID || '' }));\r\n const tempOrgChart = useRef(null);\r\n const canvasHtml = useRef({});\r\n const leftCol = useRef({});\r\n const rightCol = useRef({});\r\n\r\n\r\n const paramFilterCboEmployee = {\r\n skip: 0,\r\n limit: 10,\r\n search: '',\r\n };\r\n\r\n const loadPermission = () => {\r\n dispatch(\r\n generalActions.getPermission(\r\n 'W39F3003',\r\n (isPer) => {\r\n setIPermission(isPer);\r\n },\r\n true\r\n )\r\n );\r\n };\r\n\r\n const loadSelectAddForm = () => {\r\n dispatch(\r\n W39F3000Actions.getSelectAddForm((err, data) => {\r\n if (err) {\r\n Config.popup.show(\"ERROR\", err);\r\n return false;\r\n } else if (data) {\r\n setBatchCreateGoal(data)\r\n }\r\n })\r\n )\r\n };\r\n\r\n const loadPermissionIsOKRs = () => {\r\n dispatch(generalActions.getPermission('W39F3000', null));\r\n };\r\n\r\n const loadData = (mode = 1) => {\r\n const param = {\r\n GoalPlanID: mode ? filter.current?.GoalPlanID ?? '' : selectedGoalPlan ?? '',\r\n StatusID: filter.current?.StatusID ?? null,\r\n DivisionID: Config.getDivisionID() || '',\r\n FormID: 'W39F3000',\r\n Language: Config.language || '84',\r\n UserID: Config.profile.UserID || '',\r\n GoalMode: tabIndex,\r\n TransID: location?.state?.TransID ?? '',\r\n GoalPlanStatusID: filter.current?.GoalPlanStatusID ?? null,\r\n Mode: mode,\r\n };\r\n if (filter.current.DateFrom) {\r\n param.DateFrom = filter.current.DateFrom;\r\n }\r\n if (filter.current.DateTo) {\r\n param.DateTo = filter.current.DateTo;\r\n }\r\n if (tabIndex === 0) {\r\n param.EmployeeID = currentEmployee?.EmployeeID ?? '';\r\n }\r\n if (tabIndex === 1) {\r\n param.OrgChartID = currentOrgChart?.OrgChartID ?? '';\r\n }\r\n if (yearFrom) {\r\n param.YearFrom = parseInt(yearFrom?.split('-')?.[0] ?? 0);\r\n }\r\n if (yearTo) {\r\n param.YearTo = parseInt(yearTo?.split('-')?.[0] ?? 0);\r\n }\r\n if (mode) {\r\n param.skip = filter.current?.skip;\r\n param.limit = filter.current?.limit;\r\n }\r\n setLoading(true);\r\n dispatch(\r\n W39F3000Actions[mode ? 'getData' : 'getDetailData'](param, async(err, data) => {\r\n setLoading(false);\r\n if (err) return Config.popup.show('ERROR', err);\r\n if (mode && data?.rows?.[0]) {\r\n const { GoalPlanID } = data?.rows?.[0];\r\n const SelectedGoalPlan = location?.state?.SelectedGoalPlan;\r\n if (!(selectedGoalPlan || SelectedGoalPlan)) {\r\n setSelectedGoalPlan(GoalPlanID ?? '')\r\n } else if (!selectedGoalPlan && SelectedGoalPlan) {\r\n const newState = {...(location?.state ?? {})};\r\n delete newState.SelectedGoalPlan;\r\n browserHistory.replace({ ...location, state: newState });\r\n setSelectedGoalPlan(SelectedGoalPlan);\r\n }\r\n }\r\n })\r\n );\r\n };\r\n\r\n useEffect(() => {\r\n loadSelectAddForm();\r\n setIsMounted(true);\r\n loadPermission();\r\n return () => {\r\n setIsMounted(false);\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n\r\n useEffect(() => {\r\n if(location?.action === \"PUSH\") {\r\n loadPermissionIsOKRs()\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n },[location?.action]);\r\n\r\n useEffect(() => {\r\n loadData();\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [tabIndex, currentEmployee, currentOrgChart]);\r\n\r\n useEffect(() => {\r\n if (selectedGoalPlan) {\r\n loadData(0);\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [selectedGoalPlan, dataTab1]);\r\n\r\n useEffect (() => {\r\n // trigger hàm toggleHandler sau khi hàm loadData() chạy xong => thay đổi currentRef\r\n const toggleWhenRender = async() => {\r\n await toggleHandler(true)\r\n }\r\n toggleWhenRender();\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n },[toggleRefs?.current[0]])\r\n\r\n useEffect(() => {\r\n onWindowResize();\r\n window.addEventListener('resize', onWindowResize);\r\n return () => {\r\n window.removeEventListener('resize', onWindowResize);\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n\r\n const onWindowResize = () => {\r\n setIsShowBtnAct(window.innerWidth < 641);\r\n };\r\n\r\n const loadCboStatusGoal = () => {\r\n const param = {\r\n Language: Config.language || '84',\r\n FormID: 'W39F3002',\r\n };\r\n dispatch(\r\n W39F3000Actions.getComboStatusGoal(param, (err, data) => {\r\n if (err) return Config.popup.show('ERROR', err);\r\n if (data) {\r\n setDataCboStatusGoal(data);\r\n }\r\n })\r\n );\r\n };\r\n\r\n const loadCboEmployees = (isReset) => {\r\n const param = {\r\n Type: 'EmployeeID',\r\n FormID: 'W39F3000',\r\n Language: Config.language || '84',\r\n Disabled: +(disabledCboEmployee ?? false),\r\n ...paramFilterCboEmployee,\r\n };\r\n setLoadingCboEmployee(true);\r\n dispatch(\r\n generalActions.getCboEmployees(param, (err, data) => {\r\n setLoadingCboEmployee(false);\r\n if (err) return Config.popup.show('ERROR', err);\r\n if (data) {\r\n const rows = _.get(data, 'rows', false) || data;\r\n const total = _.get(data, 'total', 0) || _.size(data);\r\n setDataCboEmployees({ rows: isReset ? rows : _.concat(dataCboEmployees.rows, rows), total });\r\n }\r\n })\r\n );\r\n };\r\n\r\n useEffect(() => {\r\n if (tabIndex === 0 && isMounted) {\r\n setFilterEmployee(null);\r\n }\r\n loadCboEmployees(true);\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [disabledCboEmployee]);\r\n\r\n const loadCboGoalTable = () => {\r\n dispatch(\r\n W39F3000Actions.getComboGoalTable((err, data) => {\r\n if (err) return Config.popup.show('ERROR', err);\r\n if (data) {\r\n setDataCboGoalTable(data);\r\n }\r\n })\r\n );\r\n };\r\n\r\n const loadCboStatusGoalPlan = () => {\r\n const param = {\r\n Language: Config.language || '84',\r\n FormID: 'W39F3000',\r\n };\r\n dispatch(\r\n W39F3000Actions.getComboStatusGoalPlan(param, (err, data) => {\r\n if (err) return Config.popup.show('ERROR', err);\r\n if (data) {\r\n setDataCboStatusGoalPlan(data);\r\n }\r\n })\r\n );\r\n };\r\n\r\n const onLoadCboFilter = () => {\r\n loadCboStatusGoal();\r\n loadCboEmployees();\r\n loadCboGoalTable();\r\n loadCboStatusGoalPlan();\r\n };\r\n\r\n const filterChange = (key, value) => {\r\n switch (key) {\r\n case 'GoalPlanID':\r\n filter.current[key] = value ?? '';\r\n break;\r\n case 'EmployeeID':\r\n if (value === null || value === undefined) {\r\n loadCboEmployees(true);\r\n }\r\n setFilterEmployee(value ?? null);\r\n break;\r\n case 'OrgChartID':\r\n filter.current[key] = value?.itemData?.OrgChartID ?? '';\r\n tempOrgChart.current = value?.itemData\r\n ? { ...value?.itemData, OrgChartName: value?.itemData?.OrgName ?? value?.itemData?.OrgChartName }\r\n : null;\r\n break;\r\n case 'TempDateFrom':\r\n setTempDateFrom(value);\r\n setSelectedDateRange('');\r\n break;\r\n case 'TempDateTo':\r\n setTempDateTo(value);\r\n setSelectedDateRange('');\r\n break;\r\n default:\r\n filter.current[key] = value;\r\n break;\r\n }\r\n };\r\n\r\n const openDatePicker = (e) => {\r\n const target = e.currentTarget;\r\n if (dateFilter) {\r\n dateFilter.current.instance.show(target);\r\n }\r\n };\r\n\r\n const closeDatePicker = () => {\r\n if (dateFilter) {\r\n dateFilter.current.instance.hide();\r\n }\r\n };\r\n\r\n const setDatePicker = () => {\r\n setIsSetDate(true);\r\n setDateFrom(tempDateFrom);\r\n setDateTo(tempDateTo);\r\n filterChange('DateFrom', tempDateFrom);\r\n filterChange('DateTo', tempDateTo);\r\n setTimeout(() => {\r\n if (dateFilter) {\r\n dateFilter.current.instance.hide();\r\n }\r\n }, 10);\r\n };\r\n\r\n const dateRangesArr = [\r\n {\r\n label: Config.lang('Mot_tuan_truoc'),\r\n value: '1_week_before',\r\n },\r\n {\r\n label: Config.lang('Tuan_nay'),\r\n value: 'current_week',\r\n },\r\n {\r\n label: Config.lang('Tuan_truoc'),\r\n value: 'last_week',\r\n },\r\n {\r\n label: Config.lang('Mot_thang_truoc'),\r\n value: '1_month_before',\r\n },\r\n {\r\n label: Config.lang('Thang_nay'),\r\n value: 'current_month',\r\n },\r\n {\r\n label: Config.lang('Thang_truoc'),\r\n value: 'last_month',\r\n },\r\n {\r\n label: Config.lang('Quy_nay'),\r\n value: 'current_quarter',\r\n },\r\n {\r\n label: Config.lang('Quy_truoc'),\r\n value: 'last_quarter',\r\n },\r\n {\r\n label: Config.lang('Tat_ca'),\r\n value: 'all',\r\n },\r\n ];\r\n\r\n const onDatePickerHidding = () => {\r\n setSelectedDateRange('');\r\n if (isSetDate) {\r\n setTempDateFrom((dateFrom) => dateFrom);\r\n setTempDateTo((dateTo) => dateTo);\r\n setIsSetDate(false);\r\n } else {\r\n setTempDateFrom(dateFrom);\r\n setTempDateTo(dateTo);\r\n }\r\n };\r\n\r\n const searchGoal = () => {\r\n if (tabIndex === 0 && filterEmployee?.EmployeeID !== currentEmployee?.EmployeeID) {\r\n setCurrentEmployee(filterEmployee);\r\n dispatch(W39F3000Actions.setCurrentEmployee(filterEmployee));\r\n } else if (\r\n tabIndex === 1 &&\r\n filter.current?.OrgChartID === tempOrgChart.current?.OrgChartID &&\r\n filter.current?.OrgChartID !== currentOrgChart?.OrgChartID\r\n ) {\r\n dispatch(W39F3000Actions.setCurrentOrg(tempOrgChart.current));\r\n setCurrentOrgChart(tempOrgChart.current);\r\n } else {\r\n loadData();\r\n }\r\n };\r\n\r\n const clearDatePicker = (e) => {\r\n if (dateFrom || dateTo) {\r\n e.stopPropagation();\r\n setDateFrom(null);\r\n setDateTo(null);\r\n setTempDateFrom(null);\r\n setTempDateTo(null);\r\n filterChange('DateFrom', null);\r\n filterChange('DateTo', null);\r\n }\r\n };\r\n\r\n const setDatePickerByRange = (value) => {\r\n setSelectedDateRange(value);\r\n switch (value) {\r\n case '1_week_before': {\r\n const newDate = moment().subtract(1, 'week').format('YYYY-MM-DD');\r\n setTempDateFrom(newDate);\r\n setTempDateTo(newDate);\r\n break;\r\n }\r\n case 'current_week': {\r\n const newDateFrom = moment().startOf('isoWeek').format('YYYY-MM-DD');\r\n const newDateTo = moment().endOf('isoWeek').format('YYYY-MM-DD');\r\n setTempDateFrom(newDateFrom);\r\n setTempDateTo(newDateTo);\r\n break;\r\n }\r\n case 'last_week': {\r\n const newDateFrom = moment().subtract(1, 'week').startOf('isoWeek').format('YYYY-MM-DD');\r\n const newDateTo = moment().subtract(1, 'week').endOf('isoWeek').format('YYYY-MM-DD');\r\n setTempDateFrom(newDateFrom);\r\n setTempDateTo(newDateTo);\r\n break;\r\n }\r\n case '1_month_before': {\r\n const newDate = moment().subtract(1, 'month').format('YYYY-MM-DD');\r\n setTempDateFrom(newDate);\r\n setTempDateTo(newDate);\r\n break;\r\n }\r\n case 'current_month': {\r\n const newDateFrom = moment().startOf('month').format('YYYY-MM-DD');\r\n const newDateTo = moment().endOf('month').format('YYYY-MM-DD');\r\n setTempDateFrom(newDateFrom);\r\n setTempDateTo(newDateTo);\r\n break;\r\n }\r\n case 'last_month': {\r\n const newDateFrom = moment().subtract(1, 'month').startOf('month').format('YYYY-MM-DD');\r\n const newDateTo = moment().subtract(1, 'month').endOf('month').format('YYYY-MM-DD');\r\n setTempDateFrom(newDateFrom);\r\n setTempDateTo(newDateTo);\r\n break;\r\n }\r\n case 'current_quarter': {\r\n const newDateFrom = moment().startOf('quarter').format('YYYY-MM-DD');\r\n const newDateTo = moment().endOf('quarter').format('YYYY-MM-DD');\r\n setTempDateFrom(newDateFrom);\r\n setTempDateTo(newDateTo);\r\n break;\r\n }\r\n case 'last_quarter': {\r\n const newDateFrom = moment().subtract(1, 'quarter').startOf('quarter').format('YYYY-MM-DD');\r\n const newDateTo = moment().subtract(1, 'quarter').endOf('quarter').format('YYYY-MM-DD');\r\n setTempDateFrom(newDateFrom);\r\n setTempDateTo(newDateTo);\r\n break;\r\n }\r\n case 'all': {\r\n setTempDateFrom(null);\r\n setTempDateTo(null);\r\n break;\r\n }\r\n default:\r\n break;\r\n }\r\n };\r\n\r\n const renderFilter = () => {\r\n return (\r\n \r\n filterChange('GoalPlanID', e.value)}\r\n showClearButton={true}\r\n value={filter.current.GoalPlanID}\r\n placeholder={Config.lang('Chon')}\r\n />\r\n
\r\n {tabIndex === 0 && \r\n {tabIndex === 0 ? (\r\n {\r\n const { data } = e;\r\n if (!data) return null;\r\n return data.EmployeeID + ' - ' + data.EmployeeName;\r\n }}\r\n showClearButton={true}\r\n onValueChanged={(e) => filterChange('EmployeeID', e.value)}\r\n onInputChanged={(e) => {\r\n paramFilterCboEmployee.search = e.target.value;\r\n paramFilterCboEmployee.skip = 0;\r\n loadCboEmployees(true);\r\n }}\r\n onLoadMore={(e) => {\r\n paramFilterCboEmployee.skip = e.skip;\r\n paramFilterCboEmployee.limit = e.limit;\r\n loadCboEmployees();\r\n }}\r\n />\r\n ) : (\r\n filterChange('OrgChartID', e)}\r\n />\r\n )}\r\n
\r\n \r\n filterChange('GoalPlanStatusID', e.value)}\r\n showClearButton={true}\r\n value={filter.current.GoalPlanStatusID}\r\n placeholder={Config.lang('Chon')}\r\n />\r\n
\r\n \r\n filterChange('StatusID', e.value)}\r\n showClearButton={true}\r\n value={filter.current.StatusID}\r\n placeholder={Config.lang('Chon')}\r\n />\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {dateFrom || dateTo\r\n ? `${dateFrom ? moment(dateFrom).format('DD/MM/YYYY') : ''} - ${\r\n dateTo ? moment(dateTo).format('DD/MM/YYYY') : ''\r\n }`\r\n : 'dd/mm/yyyy - dd/mm/yyyy'}\r\n
\r\n \r\n \r\n filterChange('TempDateFrom', e.value)}\r\n showClearButton={true}\r\n placeholder={'dd/mm/yyyy'}\r\n value={tempDateFrom || ''}\r\n />\r\n \r\n filterChange('TempDateTo', e.value)}\r\n showClearButton={true}\r\n placeholder={'dd/mm/yyyy'}\r\n value={tempDateTo || ''}\r\n />\r\n \r\n
\r\n
\r\n \r\n {dateRangesArr.map((i, index) => {\r\n return (\r\n setDatePickerByRange(i.value)}\r\n style={{ marginRight: 5, backgroundColor: selectedDateRange === i.value ? '#EFF5FF' : '' }}\r\n />\r\n );\r\n })}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n )}\r\n />\r\n );\r\n };\r\n\r\n const redirect = (mode, data) => {\r\n let screen = '';\r\n let params = {};\r\n let isRedirect = true;\r\n switch (mode) {\r\n case 'detail':\r\n params.GoalID = data.GoalID;\r\n params.Type = data.Type;\r\n if (data.Type === 'Key' || isPopup) {\r\n isRedirect = false;\r\n setDataW39F3002(params);\r\n handleOpenPopW39F3002(true);\r\n break;\r\n } else {\r\n params = {\r\n ...params,\r\n ...(location?.state ?? {}),\r\n FromPath: 'W39F3000',\r\n SelectedGoalPlan: selectedGoalPlan,\r\n };\r\n }\r\n screen = 'W39F3002';\r\n break;\r\n case 'comment':\r\n screen = 'W39F3002';\r\n params = {\r\n ...(location?.state ?? {}),\r\n GoalID: data.GoalID,\r\n Type: data.Type,\r\n FromPath: 'W39F3000',\r\n SelectedGoalPlan: selectedGoalPlan,\r\n };\r\n break;\r\n case 'edit':\r\n isRedirect = false;\r\n data.GoalPlanID = selectedGoalPlan ?? '';\r\n setIsOpenW39F3004(true);\r\n setGoalData(data);\r\n break;\r\n default:\r\n break;\r\n }\r\n if (isRedirect) {\r\n browserHistory.push({\r\n pathname: Config.getRootPath() + screen,\r\n state: params,\r\n });\r\n }\r\n };\r\n\r\n const changeTab = (index) => {\r\n setTabIndex(index);\r\n dispatch(W39F3000Actions.setCurrentTab(index));\r\n setSelectedGoalPlan('');\r\n };\r\n\r\n const changeCurrent = (data) => {\r\n if (data) {\r\n if (tabIndex === 0) {\r\n setFilterEmployee(data);\r\n setCurrentEmployee(data);\r\n dispatch(W39F3000Actions.setCurrentEmployee(data));\r\n } else {\r\n const currentData = {OrgChartID: data.OrgChartID ?? '', OrgChartName: data.OrgName ?? data.OrgChartName ?? ''}\r\n filter.current.OrgchartID = data.OrgChartID || '';\r\n setCurrentOrgChart(currentData);\r\n dispatch(W39F3000Actions.setCurrentOrg(currentData));\r\n }\r\n loadData();\r\n }\r\n };\r\n\r\n const onToogleColorDes = () => {\r\n setToogleColorDes(!toogleColorDes);\r\n };\r\n\r\n const onToogleActBtnCont = () => {\r\n setToogleActBtnCont(!toogleActBtnCont);\r\n };\r\n\r\n const colorStatusArr = [\r\n {\r\n id: 0,\r\n label: Config.lang('Chua_hoan_thanh'),\r\n colorCode: Config.color ? Config.color['Success'] : '#00C875',\r\n colorStr: 'success',\r\n },\r\n {\r\n id: 1,\r\n label: Config.lang('Qua_han'),\r\n colorCode: Config.color ? Config.color['Danger'] : '#FF3D71',\r\n colorStr: 'danger',\r\n },\r\n {\r\n id: 2,\r\n label: Config.lang('Hoan_thanh'),\r\n colorCode: Config.color ? Config.color['Info'] : '#0095FF',\r\n colorStr: 'info',\r\n },\r\n {\r\n id: 3,\r\n label: Config.lang('Cham_tien_do'),\r\n colorCode: Config.color ? Config.color['Warning'] : '#FFAA00',\r\n colorStr: 'warning',\r\n },\r\n ];\r\n\r\n const changeLoading = (loading = false) => {\r\n setLoading(loading);\r\n };\r\n\r\n const handleOpenW39F3005 = (flag = false) => {\r\n if (flag && toogleActBtnCont) {\r\n setToogleActBtnCont(false);\r\n }\r\n setIsOpenW39F3005(flag);\r\n };\r\n\r\n const handleOpenPopW39F3002 = (flag = false) => {\r\n setIsOpenPopW39F3002(flag);\r\n };\r\n\r\n const handleOpenPop = (name, flag = false, data) => {\r\n switch (name) {\r\n case 'W39F3004':\r\n if (!flag && data) {\r\n loadData();\r\n }\r\n setIsOpenW39F3004(flag);\r\n break;\r\n default:\r\n break;\r\n }\r\n };\r\n\r\n const onAdd = () => {\r\n if(batchCreateGoal.BatchCreateGoal === 1){\r\n browserHistory.push(Config.getRootPath() + \"W39F3060\");\r\n }else{\r\n setIsRenderModalW39F3001(true);\r\n }\r\n };\r\n\r\n const onCloseModal = (isLoad = false) => {\r\n if (isLoad) loadData();\r\n setIsRenderModalW39F3001(false);\r\n };\r\n\r\n const changeSelectedGoalPlan = (newGoalPlan = '') => {\r\n setSelectedGoalPlan(newGoalPlan);\r\n };\r\n\r\n // sự kiện trigger click các nút mũi tên khi gọi function exportPDF()\r\n const toggleHandler = async (isRender = false) => {\r\n // isRender để phân biệt với việc gọi từ useEffect với gọi function exportPDF() để setLoading(false)\r\n for (let i = 0; i < toggleRefs.current.length; i++) {\r\n if (!toggleRefs?.current[i]?.isOpened) {\r\n toggleRefs.current[i].element.click();\r\n } else {\r\n continue;\r\n }\r\n }\r\n isRender && setLoading(false)\r\n };\r\n\r\n const exportPDF = async () => {\r\n // canvasHTML\r\n const canvasHTML = async () => {\r\n await Promise.all([\r\n leftCol.current && leftCol.current.htmlToCanvas(),\r\n rightCol.current && rightCol.current.htmlToCanvas(),\r\n ]);\r\n setLoading(false);\r\n try {\r\n const { goalListImg, planProgressImg } = canvasHtml.current;\r\n const myWindow = window.open(\"\", Config.lang(\"Bang_muc_tieu\"));\r\n if (!myWindow || myWindow.closed || typeof myWindow === \"undefined\") {\r\n Config.popup.show(\"ERROR\", Config.lang(\"Trinh_duyet_khong_co_quyen_mo_popup\"));\r\n return;\r\n }\r\n myWindow.document.write(\r\n '{renderFilter()}
\r\n {isRenderModalW39F3001 && (\r\n \r\n
\r\n \r\n \r\n handleOpenW39F3005(true)}\r\n />\r\n
\r\n \r\n \r\n {i.label} \r\n
\r\n );\r\n })}\r\n \r\n {isOpenW39F3005 && (\r\n