\r\n {listColor.map(i => {\r\n return (\r\n
{onChangeColor(i)}}\r\n />\r\n );\r\n })}\r\n
\r\n );\r\n};\r\n\r\nexport default compose(connect(state => ({\r\n getCboDuty: state.general.getCboDuty2,\r\n getDataCboPosition: state.W09F4000.getDataCboPosition,\r\n }),\r\n (dispatch) => ({\r\n w09f4000Actions: bindActionCreators(W09F4000Actions, dispatch),\r\n generalActions: bindActionCreators(generalActions, dispatch),\r\n })\r\n), withStyles(styles, {withTheme: true}))(W09F4000);\r\n","\r\nimport React from \"react\";\r\nimport { withStyles } from \"@material-ui/core\";\r\nimport { useTheme } from \"diginet-core-ui/theme\";\r\nimport { Typography, Avatar, Tooltip } from 'diginet-core-ui/components'\r\nimport Config from '../../../../config';\r\n\r\nconst coreTheme = useTheme();\r\nconst { spacing, colors, colors: {white, system:{rest}, dark, dark6} } = coreTheme;\r\n\r\nconst styles = {\r\n wrapperItem: {\r\n position:'relative',\r\n boxShadow:'0px 2px 2px rgba(0, 0, 0, 0.25)',\r\n borderRadius: 4,\r\n minWidth:200,\r\n width: 240,\r\n backgroundColor: white,\r\n '&:hover':{\r\n boxShadow:'0px 4px 4px rgba(0, 0, 0, 0.25)'\r\n },\r\n '& .overflow-one-line':{\r\n whiteSpace:'pre !important',\r\n maxWidth:'100% !important'\r\n }\r\n },\r\n footerItem: {\r\n display: 'flex',\r\n textAlign:'left',},\r\n layerImg: {\r\n top: 45,\r\n left: '50%',\r\n transform: 'translate(-50%, 0)',\r\n zIndex: 1,\r\n position: 'absolute',\r\n },\r\n nodeNumber: {\r\n position: 'absolute',\r\n bottom: -14,\r\n minWidth: 28,\r\n height: 28,\r\n zIndex: 1,\r\n borderRadius: '50%',\r\n border:`2px solid ${white}`,\r\n cursor: \"pointer\",\r\n left: 'calc(50% - 14px)',\r\n display:'flex !important',\r\n boxShadow:'0px 2px 2px rgba(0, 0, 0, 0.25)'\r\n },\r\n styleOrgChartName: {\r\n display:'flex !important',\r\n alignItems:'flex-start',\r\n justifyContent: 'center',\r\n width: '100%'\r\n },\r\n styleOverFlowText: {\r\n whiteSpace: \"nowrap\",\r\n overflow: \"hidden\",\r\n textOverflow: \"ellipsis\",\r\n display:'block'\r\n },\r\n styleTooltip: {\r\n fontSize: 14\r\n },\r\n cursorPointer: {\r\n cursor: \"pointer\"\r\n },\r\n showMoreUser:{\r\n backgroundColor: rest,\r\n width: 40,\r\n minWidth: 40,\r\n height: 40,\r\n display: \"flex !important\",\r\n alignItems: \"center !important\",\r\n justifyContent: \"center\",\r\n color: white,\r\n borderRadius: 20,\r\n cursor: 'pointer'\r\n },\r\n\r\n};\r\n\r\nclass ItemOrgChart extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n iPermission: 0,\r\n tab: 0,\r\n showW09F4001Popup: false,\r\n itemDataNode: null,\r\n isHiddenW09F4010: false\r\n };\r\n }\r\n\r\n showPopup = () => {\r\n const {data, onW09F4001Popup} = this.props;\r\n if (onW09F4001Popup) onW09F4001Popup(data);\r\n };\r\n\r\n toggleShowItem = (e) => {\r\n e.stopPropagation();\r\n const {node, data, orgchart} = this.props;\r\n if (orgchart && data.countChildren > 0) {\r\n const nodeState = orgchart._getNodeState(node, \"children\");\r\n\r\n if (nodeState.exist && nodeState.visible) {\r\n orgchart.hideChildren(node);\r\n this._scrollToNode(node, orgchart);\r\n } else {\r\n orgchart.showChildren(node);\r\n this._scrollToNode(node, orgchart, 400);\r\n }\r\n }\r\n };\r\n\r\n _scrollToNode = (node, orgchart, timeout = 700) => {\r\n const wrapperChart = orgchart.closest(\"div\");\r\n if (wrapperChart && wrapperChart.offsetWidth && node) {\r\n setTimeout(() => {\r\n let lastTf = window.getComputedStyle(orgchart).transform;\r\n let containerPartWidth = orgchart.offsetWidth/2 - 100;\r\n let containerPartHeight = orgchart.offsetHeight/2 - 220;\r\n\r\n let newX = 0, newY = 0;\r\n if (lastTf === 'none') {\r\n orgchart.style.transform = 'matrix(1, 0, 0, 1, 0, 0)';\r\n newX = containerPartWidth - node.offsetLeft;\r\n newY = containerPartHeight - node.offsetTop;\r\n if (!lastTf.includes('3d')) {\r\n orgchart.style.transform = 'matrix(1, 0, 0, 1, ' + newX + ', ' + newY + ')';\r\n } else {\r\n orgchart.style.transform = 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, ' + newX + ', ' + newY + ', 0, 1)';\r\n }\r\n } else {\r\n let matrix = lastTf.split(',');\r\n newX = containerPartWidth - node.offsetLeft;\r\n newY = containerPartHeight - node.offsetTop;\r\n if (!lastTf.includes('3d')) {\r\n matrix[4] = newX * matrix[3];\r\n matrix[5] = (newY * matrix[3]) + ')';\r\n } else {\r\n matrix[12] = newX * matrix[3];\r\n matrix[13] = (newY * matrix[3]);\r\n }\r\n orgchart.style.transform = matrix.join(',');\r\n }\r\n }, 700);\r\n }\r\n };\r\n\r\n render() {\r\n const {classes, data, showAvatar, colorOrg} = this.props;\r\n\r\n let levelColor = 5 - parseInt(data.level || 0);\r\n if(levelColor < 1) levelColor = 1;\r\n\r\n const bgColor = colors?.[`${colorOrg}${levelColor}`];\r\n const color = data.level > 2 ? dark : white;\r\n\r\n const headerTitle = (\r\n <>\r\n
\r\n {data?.OrgChartName || \"\"}\r\n \r\n \r\n {(Number(data?.Quantity) || Number(data?.Quantity) === 0) &&\r\n
\r\n {` (${Number(data?.Quantity)})`}\r\n \r\n }\r\n \r\n );\r\n\r\n const lengthUser = data.OrgCharts?.length > 6 ? 7 : data.OrgCharts.length;\r\n const widthUser = lengthUser > 5 ? `calc(((100% - 20px) / ${lengthUser}))` : 40;\r\n\r\n let user = Config.getUser({EmployeeID: data?.OrgCharts?.[0].RepresentEmployeeID});\r\n\r\n return (\r\n <>\r\n
\r\n
0 ? \" \" + classes.cursorPointer : \"\")}\r\n style={{minHeight: 40 + (showAvatar ? 72 : 0)}}\r\n onClick={this.showPopup}\r\n >\r\n {/*Title*/}\r\n
\r\n \r\n \r\n {headerTitle}\r\n \r\n \r\n
\r\n {/*Content*/}\r\n
\r\n {showAvatar && data?.OrgCharts?.length > 1 && //TH không có RepresentEmployeeID thì hiện danh sách avatar\r\n
4 ? '100%' : lengthUser * 55,\r\n justifyContent: 'space-around',\r\n display:'flex'\r\n }}>\r\n {[...new Array(lengthUser).keys()].map(key => {\r\n const style = {width: widthUser, overflow: ' inherit', zIndex: key};\r\n user = Config.getUser({EmployeeID: data.OrgCharts?.[key].RepresentEmployeeID});\r\n if (key > 6) return null;\r\n if (key === 6) return (\r\n
\r\n \r\n {data.OrgCharts.length > 101 ? '99+' : `+${parseInt(data.OrgCharts.length || 0) - 6}`}\r\n \r\n
\r\n );\r\n\r\n return (\r\n
\r\n );\r\n })}\r\n
\r\n }\r\n {showAvatar && data?.OrgCharts?.length === 1 && data?.OrgCharts?.[0].RepresentEmployeeID && //TH có RepresentEmployeeID thì avatar + thông tin User\r\n
\r\n
\r\n
\r\n \r\n {user.EmployeeName || \"\"}\r\n \r\n \r\n {user.DutyName || \"\"}\r\n \r\n
\r\n
\r\n }\r\n {data?.countChildren > 0 &&\r\n
\r\n {parseInt(data?.countChildren || 0) > 99 ? '99+' : data?.countChildren}\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\r\nexport default withStyles(styles, {withTheme: true})(ItemOrgChart);\r\n","\r\nimport React from \"react\";\r\nimport {withStyles} from \"@material-ui/core\";\r\nimport \"./W09F4000.scss\";\r\nimport Config from \"../../../../config\";\r\nimport {Avatar, Typography} from \"diginet-core-ui/components\";\r\nimport {useTheme} from \"diginet-core-ui/theme\";\r\nimport {ButtonIcon, Typography as TypographyCore} from \"diginet-core-ui/components\";\r\nconst coreTheme = useTheme();\r\nconst {colors:{white, formal5, dark6, dark, system: { rest }}} = coreTheme;\r\nconst styles = {\r\n wrapperItem: {\r\n boxShadow: '0px 2px 2px rgba(0, 0, 0, 0.25)',\r\n borderRadius: 4,\r\n minWidth: 200,\r\n minHeight: 160,\r\n maxWidth: 400,\r\n backgroundColor: white,\r\n transition: 'all 0.1s',\r\n '&:hover':{\r\n boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',\r\n },\r\n '& .overflow-one-line':{\r\n whiteSpace:'pre !important',\r\n maxWidth:'100% !important'\r\n }\r\n },\r\n filterContainer: {\r\n padding: \"8px 16px\",\r\n borderLeft: `1px solid ${formal5}`,\r\n textAlign: 'left'\r\n },\r\n footerItem: {\r\n backgroundColor: '#FFFFFF',\r\n textAlign: 'center',\r\n padding: '8px 16px',\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center'\r\n },\r\n layerImg: {\r\n top: 25,\r\n left: '50%',\r\n transform: 'translate(-50%, 0)',\r\n zIndex: 1,\r\n position: 'absolute',\r\n },\r\n userImageChild: {\r\n cursor: \"pointer\",\r\n border: '1px solid white',\r\n boxShadow: '1px 1px 2px #999',\r\n \"&:not(:first-child)\": {\r\n marginLeft: -8\r\n }\r\n },\r\n nodeNumber: {\r\n position: 'absolute',\r\n bottom: -14,\r\n minWidth: 28,\r\n height: 28,\r\n zIndex: 1,\r\n borderRadius: '50%',\r\n lineHeight: '24px',\r\n color: '#FFF',\r\n cursor: \"pointer\",\r\n left: 'calc(50% - 14px)',\r\n display:'flex !important',\r\n boxShadow:'0px 2px 2px rgba(0, 0, 0, 0.25)',\r\n border:`2px solid ${white}`\r\n },\r\n styleOrgChartName: {\r\n fontSize: 14,\r\n fontWeight: 700,\r\n color: \"#FFFFFF\",\r\n textTransform: \"uppercase\",\r\n overflow: \"hidden\",\r\n whiteSpace: \"nowrap\",\r\n textOverflow: \"ellipsis\",\r\n },\r\n styleTooltip: {\r\n fontSize: 14\r\n },\r\n iconNumberText: {\r\n width: 32,\r\n height: 32,\r\n zIndex: 100,\r\n border: \"1px solid #FFFFFF\",\r\n borderRadius: \"50%\",\r\n background: \"#7F828E\",\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\"\r\n },\r\n buttonFilter:{\r\n position:'absolute',\r\n right: 4,\r\n top:8\r\n },\r\n showMoreUser:{\r\n backgroundColor: rest,\r\n border:`1px solid ${white}`,\r\n width: 72,\r\n minWidth: 72,\r\n height: 72,\r\n display: \"flex !important\",\r\n alignItems: \"center !important\",\r\n justifyContent: \"center\",\r\n color: white,\r\n borderRadius: 72,\r\n cursor: 'pointer'\r\n },\r\n};\r\n\r\nclass ItemPositionChart extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n iPermission: 0,\r\n tab: 0,\r\n showW09F4001Popup: false,\r\n itemDataNode: null,\r\n expanded: props.data ? props.data.expanded : true,\r\n isHiddenW09F4010: false,\r\n open: false,\r\n hoverImg: false,\r\n dataFilter: null\r\n };\r\n this.userImage = {};\r\n }\r\n\r\n showPopup = () => {\r\n const {data, onW09F4001Popup} = this.props;\r\n if (onW09F4001Popup && data && data.DutyGroup && data.DutyGroup.length > 0) onW09F4001Popup(data);\r\n };\r\n\r\n toggleShowItem = (e) => {\r\n e.stopPropagation();\r\n const {node, data, orgchart} = this.props;\r\n if (orgchart && data.countChildren > 0) {\r\n const nodeState = orgchart._getNodeState(node, \"children\");\r\n\r\n if (nodeState.exist && nodeState.visible) {\r\n orgchart.hideChildren(node);\r\n this._scrollToNode(node, orgchart);\r\n } else {\r\n orgchart.showChildren(node);\r\n this._scrollToNode(node, orgchart, 400);\r\n }\r\n this.setState({expanded: !this.state.expanded});\r\n }\r\n };\r\n\r\n _scrollToNode = (node, orgchart) => {\r\n const wrapperChart = orgchart.closest(\"div\");\r\n if (wrapperChart && wrapperChart.offsetWidth && node) {\r\n setTimeout(() => {\r\n let lastTf = window.getComputedStyle(orgchart).transform;\r\n let containerPartWidth = orgchart.offsetWidth/2 - 100;\r\n let containerPartHeight = orgchart.offsetHeight/2 - 180;\r\n\r\n let newX = 0, newY = 0;\r\n if (lastTf === 'none') {\r\n orgchart.style.transform = 'matrix(1, 0, 0, 1, 0, 0)';\r\n newX = containerPartWidth - node.offsetLeft;\r\n newY = containerPartHeight - node.offsetTop;\r\n if (!lastTf.includes('3d')) {\r\n orgchart.style.transform = 'matrix(1, 0, 0, 1, ' + newX + ', ' + newY + ')';\r\n } else {\r\n orgchart.style.transform = 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, ' + newX + ', ' + newY + ', 0, 1)';\r\n }\r\n } else {\r\n let matrix = lastTf.split(',');\r\n newX = containerPartWidth - node.offsetLeft;\r\n newY = containerPartHeight - node.offsetTop;\r\n if (!lastTf.includes('3d')) {\r\n matrix[4] = newX * matrix[3];\r\n matrix[5] = newY + ')';\r\n } else {\r\n matrix[12] = newX * matrix[3];\r\n matrix[13] = newY;\r\n }\r\n orgchart.style.transform = matrix.join(',');\r\n }\r\n }, 700);\r\n }\r\n };\r\n \r\n componentDidMount() {\r\n if (this.userImage) {\r\n Object.keys(this.userImage).forEach(u => {\r\n this.userImage[u].userImage.addEventListener(\"mouseover\", () => this.onMouseOver(this.userImage[u].userImage));\r\n this.userImage[u].userImage.addEventListener(\"mouseleave\", () => this.onMouseLeave(this.userImage[u].userImage));\r\n });\r\n // u.userImage.addEventListener(\"mouseleave\", () => this.onMouseLeave(u.userImage));\r\n // });\r\n }\r\n\r\n const { listDutyFilter, data, isExpanded } = this.props;\r\n if((listDutyFilter.includes(data.DutyID) || isExpanded) && data?.IsFilter === 1){\r\n this._loadFilter(data);\r\n }\r\n }\r\n\r\n onMouseOver = (e) => {\r\n e.classList.add(\"w09f4000-user-image-hover-item\");\r\n };\r\n onMouseLeave = (e) => {\r\n e.classList.remove(\"w09f4000-user-image-hover-item\");\r\n };\r\n\r\n renderItemHover = (user) => {\r\n return (\r\n
\r\n {user && {`${user.UserName} - ${user.DutyName}`} }\r\n
\r\n )\r\n };\r\n\r\n _loadFilter = (data) => {\r\n if(this.loadingFilter) return;\r\n this.loadingFilter = true;\r\n\r\n const {loadFilter} = this.props;\r\n const {dataFilter} = this.state;\r\n\r\n if(dataFilter){\r\n this.setState({dataFilter: null},()=>{\r\n this.loadingFilter = false;\r\n if(this.refs[\"refBtnFilter\"]) {\r\n this.refs[\"refBtnFilter\"].blur();\r\n }\r\n });\r\n loadFilter(data, ()=>{}, true);\r\n return null;\r\n }\r\n loadFilter({DutyID: data.DutyID}, data => {\r\n this.setState({dataFilter: data},(()=>{\r\n this.loadingFilter = false;\r\n }))\r\n })\r\n };\r\n\r\n render() {\r\n const {classes, data, colorOrg} = this.props;\r\n const { dataFilter } = this.state;\r\n const DutyGroup = data && data.DutyGroup ? data.DutyGroup : [];\r\n\r\n let levelColor = 5 - parseInt(data.level || 0);\r\n if(levelColor < 1) levelColor = 1;\r\n\r\n const bgColor = coreTheme.colors?.[`${colorOrg}${levelColor}`];\r\n const color = data.level > 2 ? dark : white;\r\n\r\n const lengthUser = DutyGroup?.length > 2 ? 3 : DutyGroup?.length; // length > 2 ? 3 : length ( cái cuối là số 99+)\r\n const widthUser = lengthUser > 1 ? `calc(100% / ${lengthUser})` : 72;\r\n const user = Config.getUser({EmployeeID: DutyGroup?.[0]?.EmployeeID});\r\n\r\n return (\r\n <>\r\n
\r\n
\r\n {/*Content*/}\r\n
\r\n
2 ? '80%' : '100%',\r\n maxWidth: 200,\r\n justifyContent: 'space-around'\r\n }}\r\n >\r\n {[...new Array(lengthUser).keys()].map(key => {\r\n const style = { width:widthUser, overflow:' inherit', zIndex: key };\r\n if(key > 2) return null; // show maximum 2 Duty\r\n if(key === 2) return ( // show number length Duty if length > 2\r\n
\r\n \r\n {DutyGroup?.length > 101 ? '99+' : parseInt(DutyGroup?.length || 0) - 2}\r\n \r\n
\r\n );\r\n\r\n const user = Config.getUser({EmployeeID: DutyGroup[key].EmployeeID});\r\n return( // show avatar Duty\r\n
\r\n );\r\n })}\r\n
\r\n
\r\n \r\n {DutyGroup?.length === 1 && user.EmployeeName ? user.EmployeeName : \"\"}\r\n \r\n \r\n {user.DutyName || \"\"}\r\n \r\n
\r\n {data?.IsFilter === 1 &&\r\n
this._loadFilter(data)}\r\n />\r\n }\r\n \r\n {/*Filter*/}\r\n {dataFilter &&\r\n
\r\n \r\n {dataFilter[0]?.Label || ''}\r\n \r\n\r\n {!dataFilter.length && // Không có dữ liệu\r\n \r\n {Config.lang(\"Khong_co_du_lieu\")}\r\n \r\n }\r\n\r\n {dataFilter?.map(i => {\r\n return \r\n {`${i.FilterValueName}: ${i.Total}`}\r\n \r\n })}\r\n
\r\n }\r\n {DutyGroup.length > 0 && data.countChildren > 0 &&\r\n
\r\n {parseInt(data?.countChildren || 0) > 99 ? '99+' : data?.countChildren}\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\nexport default withStyles(styles, {withTheme: true})(ItemPositionChart);\r\n","/**\r\n * @copyright 2019 @ DigiNet\r\n * @author TRIHAO\r\n * @create 2/2/2021\r\n * @Example\r\n */\r\n\r\nimport React, {useCallback, useEffect, useMemo, useRef, useState} from \"react\";\r\nimport {bindActionCreators, compose} from \"redux\";\r\nimport {IconButton, makeStyles, Typography} from \"@material-ui/core\";\r\nimport {connect} from \"react-redux\";\r\nimport ActionToolbar from \"../../../common/toolbar/action-toolbar\";\r\nimport ButtonGeneral from \"../../../common/button/button-general\";\r\nimport UserImage from \"../../../common/user/user-image\";\r\nimport Icons from \"../../../common/icons/\";\r\nimport Config from \"../../../../config\";\r\nimport * as W09F3010Actions\r\n from \"../../../../redux/W0X/W09F3010/W09F3010_actions\";\r\nimport {Image, FormGroup, Row, Col} from \"react-bootstrap\";\r\nimport {browserHistory} from \"react-router\";\r\nimport _ from \"lodash\";\r\nimport {LoadPanel} from \"devextreme-react\";\r\nimport Popover\r\n from \"../../../../components/grid-container/popover-action\";\r\nimport History from \"../../../libs/history\";\r\nimport * as generalActions from \"../../../../redux/general/general_actions\";\r\nimport Tabs from \"@material-ui/core/Tabs\";\r\nimport Tab from \"@material-ui/core/Tab\";\r\nimport Divider from \"@material-ui/core/Divider\";\r\nimport TabContent, {TabPanel} from \"../../../common/tabs/tab-content\";\r\nimport W09F3010Member from \"./utils/W09F3010Member\";\r\nimport SelectEmployees from \"./utils/SelectEmployees\";\r\nimport CDN from \"../../../CDN\";\r\nimport DOMPurify from \"dompurify\";\r\n\r\nconst useStyles = makeStyles(() => ({\r\n root: {\r\n background: '#FFFFFF',\r\n boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',\r\n borderRadius: 4\r\n },\r\n divImage: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n position: 'relative',\r\n height: 200,\r\n '& img': {\r\n width: '100%',\r\n height: '100%',\r\n objectFit: 'contain'\r\n },\r\n '&:hover .icon-edit': {\r\n display: 'block'\r\n }\r\n },\r\n divContent: {\r\n padding: '0px 15px 15px 15px'\r\n },\r\n divMember: {\r\n minHeight: 40\r\n },\r\n divItemMember: {\r\n background: '#FFFFFF',\r\n boxShadow: '0px 2px 2px rgba(0, 0, 0, 0.25)',\r\n borderRadius: 4,\r\n padding: 15,\r\n marginBottom: 10,\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n textAlign: 'center',\r\n minHeight: 180,\r\n position: 'relative',\r\n '& .divItemMember_button': {\r\n position: 'absolute',\r\n top: 5,\r\n right: 5\r\n }\r\n },\r\n iconEdit: {\r\n position: 'absolute',\r\n top: 10,\r\n right: 10,\r\n display: 'none',\r\n transition: 'all 0.4s',\r\n '& button': {\r\n backgroundColor: '#FFFFFF'\r\n }\r\n }\r\n}));\r\n\r\nconst W09F3010 = (props) => {\r\n const getInfo = useCallback((flag) => {\r\n const {location} = props;\r\n const {mode, GroupID} = Config.getUrlParams(props);\r\n if (location && location.state) {\r\n return {\r\n mode: mode || 'add',\r\n GroupID: GroupID || \"\"\r\n }\r\n } else {\r\n if (flag) {\r\n browserHistory.push(Config.getRootPath() + \"W09F3000\");\r\n return null;\r\n }\r\n return {};\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [props.location]);\r\n\r\n const classes = useStyles();\r\n\r\n const {GroupID} = getInfo() || {};\r\n const {getForm, getMembers} = props;\r\n const [tabKey, setTabKey] = useState(0);\r\n const [loading, setLoading] = useState(false);\r\n const [showSelectEmployees, setShowSelectEmployees] = useState(false);\r\n\r\n const refAvatar = useRef(null);\r\n const refAction = useRef(null);\r\n\r\n const loadForm = () => {\r\n const params = {\r\n Language: Config.language || \"84\",\r\n GroupID: GroupID || \"\"\r\n };\r\n setLoading(true);\r\n props.W09F3010Actions.loadForm(params, error => {\r\n setLoading(false);\r\n if (error) {\r\n Config.popup2.show(\"ERROR\", error);\r\n return false;\r\n }\r\n });\r\n };\r\n const loadMembers = () => {\r\n const params = {\r\n GroupID: GroupID || \"\"\r\n };\r\n setLoading(true);\r\n props.W09F3010Actions.loadMembers(params, error => {\r\n setLoading(false);\r\n if (error) {\r\n Config.popup2.show(\"ERROR\", error);\r\n return false;\r\n }\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n if (!getInfo(true)) return;\r\n loadForm();\r\n loadMembers();\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n\r\n const onClosePopover = () => {\r\n if (refAction && refAction.current) refAction.current.instance.hide();\r\n };\r\n\r\n const onOpenModal = () => {\r\n setShowSelectEmployees(true);\r\n };\r\n const onCloseModal = () => {\r\n setShowSelectEmployees(false);\r\n };\r\n\r\n const onBack = () => {\r\n browserHistory.goBack();\r\n };\r\n\r\n const onChangeTab = (e, value) => {\r\n setTabKey(value);\r\n };\r\n\r\n const checkFileType = filename => {\r\n const extension = filename.substr(filename.lastIndexOf(\".\")).toLowerCase();\r\n const allowedExtensions = [\".jpg\", \".png\"];\r\n if (extension.length > 0) {\r\n if (allowedExtensions.indexOf(extension) === -1) {\r\n return false;\r\n }\r\n }\r\n return true;\r\n };\r\n\r\n const onUploadFile = (e) => {\r\n if (!e) return false;\r\n const arrFile = e.target.files;\r\n const sizeLimit = 5000000;\r\n for (let i = 0; i < arrFile.length; i++) {\r\n let message = '';\r\n if (arrFile[i].size / 1024 > Number(sizeLimit)) {\r\n message = Config.lang(\"Dung_luong_File_khong_duoc_lon_hon\") + \" \" + sizeLimit + ' KB
';\r\n Config.popup2.show(\"INFO\", message);\r\n } else if (checkFileType(arrFile[i].name) === false) {\r\n message = Config.lang(\"Dinh_dang_file_khong_hop_le\");\r\n Config.popup2.show(\"INFO\", message);\r\n } else {\r\n setLoading(true);\r\n CDN.uploadFile([arrFile[i]], null, (error, data) => {\r\n if (error) {\r\n setLoading(false);\r\n Config.popup2.show(\"ERROR\", error);\r\n return false;\r\n }\r\n if (data && data.paths && data.paths.length > 0) {\r\n const item = data.paths[0];\r\n const params = {\r\n GroupID,\r\n GroupPicture: _.get(item, 'url', _.get(item, 'filePath', ''))\r\n };\r\n props.W09F3010Actions.updatePicGroup(params, async (errors) => {\r\n setLoading(false);\r\n if (errors) {\r\n Config.popup2.show(\"ERROR\", errors);\r\n return false;\r\n } else {\r\n loadForm();\r\n Config.notify.show(\"success\", Config.lang(\"Luu_thanh_cong\"), 2000);\r\n }\r\n })\r\n } else {\r\n Config.popup2.show(\"INFO\", Config.lang(\"Co_loi_xay_ra_trong_qua_trinh_xu_ly\"));\r\n }\r\n });\r\n }\r\n }\r\n };\r\n\r\n const onShowAction = (e) => {\r\n if (refAction && refAction.current) refAction.current.instance.show(e.target);\r\n };\r\n\r\n const onAction = useCallback(async (mode, data) => {\r\n if (!mode) return false;\r\n const {MemberID} = data || {};\r\n onClosePopover();\r\n switch (mode) {\r\n case \"changeAvatar\":\r\n if (refAvatar && refAvatar.current) refAvatar.current.click();\r\n break;\r\n case \"addMember\":\r\n onOpenModal();\r\n break;\r\n case \"leaveGroup\":\r\n Config.popup2.show(\"YES_NO\", Config.lang(\"Ban_co_chac_muon_roi_nhom_khong\"), () => {\r\n const params = {\r\n GroupID,\r\n MemberID: Config.profile.UserID || \"\"\r\n };\r\n setLoading(true);\r\n props.W09F3010Actions.leaveGroup(params, async (errors) => {\r\n setLoading(false);\r\n if (errors) {\r\n Config.popup2.show(\"ERROR\", errors);\r\n return false;\r\n } else {\r\n Config.notify.show(\"success\", Config.lang(\"Xoa_thanh_cong\"), 2000);\r\n await saveHistory(data);\r\n loadMembers();\r\n }\r\n })\r\n });\r\n break;\r\n case \"isAdmin\":\r\n const params = {\r\n GroupID,\r\n MemberID: MemberID,\r\n Role: _.get(data, \"newRole\", \"\")\r\n };\r\n setLoading(true);\r\n props.W09F3010Actions.updateRole(params, async (errors) => {\r\n setLoading(false);\r\n if (errors) {\r\n Config.popup2.show(\"ERROR\", errors);\r\n return false;\r\n } else {\r\n await saveHistory(data, true);\r\n loadMembers();\r\n Config.notify.show(\"success\", Config.lang(\"Luu_thanh_cong\"), 2000);\r\n }\r\n })\r\n break;\r\n case \"removeFromGroup\":\r\n Config.popup2.show(\"YES_NO\", Config.lang(\"Ban_co_chac_muon_xoa_thanh_vien_nay_khoi_nhom_khong\"), () => {\r\n const params = {\r\n GroupID,\r\n MemberID: MemberID\r\n };\r\n setLoading(true);\r\n props.W09F3010Actions.leaveGroup(params, async (errors) => {\r\n setLoading(false);\r\n if (errors) {\r\n Config.popup2.show(\"ERROR\", errors);\r\n return false;\r\n } else {\r\n Config.notify.show(\"success\", Config.lang(\"Xoa_thanh_cong\"), 2000);\r\n await saveHistory(data);\r\n loadMembers();\r\n }\r\n })\r\n });\r\n break;\r\n default:\r\n break;\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n\r\n const onChosen = () => {\r\n loadMembers();\r\n };\r\n\r\n const saveHistory = async (data, isUpdateRole = false) => {\r\n const {Role, newRole, MemberID} = data;\r\n const {GroupID, GroupName} = props.getForm ?? {GroupID: _.get(data, \"GroupID\", \"\"), GroupName: \"\"};\r\n const {UserID, UserName} = Config.getUser({EmployeeID: MemberID}) ?? {UserID: \"\", UserName: \"\"};\r\n let _data = {\r\n GroupName,\r\n User: `${Config.profile.UseID} - ${Config.profile.UserName}`\r\n };\r\n\r\n let captions = {\r\n GroupName: \"Ten_nhom\",\r\n User: \"data_User\"\r\n };\r\n\r\n const captionOldRoles = [\"thanh_vien\", \"quan_tri\", \"thanh_vien_vai_tro_quan_tri\"];\r\n const captionNewRoles = [\"thanh_vien\", \"quan_tri_vien\", \"thanh_vien_vai_tro_quan_tri\"];\r\n\r\n let options = {\r\n data: _data,\r\n captions: captions,\r\n ModuleID: \"D09\",\r\n TransID: GroupID,\r\n action: 3,\r\n TransactionID: \"W09F3000\",\r\n TransactionName: \"Nhóm\",\r\n };\r\n\r\n if (GroupID) {\r\n if (isUpdateRole) {\r\n options = {\r\n ...options,\r\n data: {\r\n ..._data,\r\n NewRole: {\r\n \"add\": [{\r\n \"ma_nhan_vien\": UserID ?? \"\",\r\n \"ten_nhan_vien\": UserName ?? \"\"\r\n }]\r\n },\r\n OldRole: {\r\n \"removed\": [{\r\n \"ma_nhan_vien\": UserID ?? \"\",\r\n \"ten_nhan_vien\": UserName ?? \"\"\r\n }]\r\n }\r\n },\r\n dataCompare: {\r\n ..._data,\r\n NewRole: {\r\n \"add\": [{\r\n \"ma_nhan_vien\": UserID ?? \"\",\r\n \"ten_nhan_vien\": UserName ?? \"\"\r\n }]\r\n },\r\n OldRole: {\r\n \"removed\": [{\r\n \"ma_nhan_vien\": UserID ?? \"\",\r\n \"ten_nhan_vien\": UserName ?? \"\"\r\n }]\r\n }\r\n },\r\n captions: {\r\n ...captions,\r\n NewRole: captionNewRoles[newRole],\r\n OldRole: captionOldRoles[Role],\r\n },\r\n action: 1,\r\n TransactionID: \"W09F3000\",\r\n TransactionName: \"Chi tiết nhóm\",\r\n };\r\n }\r\n const history = new History(options);\r\n // const allData = await history.get();\r\n // history.createDetailHistory(\"Nhan_vien\", [], [], captions,\"key\", null, options ); //Create detail..\r\n // console.log('test', allData);\r\n await history.save();\r\n } else {\r\n Config.notify.show(\"error\", Config.lang(\"Luu_lich_su_khong_thanh_cong\"), 2000);\r\n }\r\n };\r\n\r\n const renderMembersWithRole = useCallback((role1 = 0, role2) => {\r\n const Members = getMembers || [];\r\n let listMembers = !_.isUndefined(role1) ? Members.filter(m => m.Role === role1) : Members;\r\n listMembers = !_.isUndefined(role2) ? listMembers.concat(Members.filter(m => m.Role === role2)) : listMembers;\r\n return (\r\n
\r\n {listMembers && listMembers.map((member, idx) => {\r\n return
\r\n );\r\n }, [getMembers]);\r\n\r\n const GroupPicture = useMemo(() => {\r\n let groupPicture = _.get(getForm, \"GroupPicture\", \"\");\r\n return groupPicture\r\n ? (groupPicture.includes('http') ? groupPicture : Config.getCDNPath() + groupPicture)\r\n : require(\"../../../../assets/images/general/no-image.svg\");\r\n }, [getForm]);\r\n return (\r\n <>\r\n
\r\n
\r\n
\r\n \r\n {_.get(getForm, \"IsAdmin\", 0) === 1 && onAction('addMember')}\r\n />}\r\n onAction(\"leaveGroup\", getForm)}\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 {_.get(getForm, \"IsAdmin\", 0) !== 2 &&\r\n \r\n \r\n }\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n {Config.lang(\"Gioi_thieu_ve_nhom\")}\r\n \r\n \r\n \r\n \r\n \r\n {Config.lang(\"Thanh_vien\")}
\r\n \r\n {renderMembersWithRole(0, 2)}\r\n
\r\n {Config.lang(\"Quan_tri\")}
\r\n \r\n {renderMembersWithRole(1, 2)}\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\r\nexport default compose(\r\n connect(\r\n state => ({\r\n getForm: state.W09F3010.getForm,\r\n getMembers: state.W09F3010.getMembers,\r\n }),\r\n dispatch => ({\r\n generalActions: bindActionCreators(generalActions, dispatch),\r\n W09F3010Actions: bindActionCreators(W09F3010Actions, dispatch)\r\n })\r\n ),\r\n)(W09F3010);\r\n","/**\r\n * @copyright 2019 @ DigiNet\r\n * @author TRIHAO\r\n * @create 2/5/2021\r\n * @Example\r\n */\r\n\r\nimport React, {useMemo, useRef, useState} from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport {IconButton, makeStyles} from \"@material-ui/core\";\r\nimport Config from \"../../../../../config\";\r\nimport * as _ from \"lodash\";\r\nimport Grid from \"@material-ui/core/Grid\";\r\nimport UserImage from \"../../../../common/user/user-image\";\r\nimport Icons from \"../../../../common/icons\";\r\nimport ButtonGeneral from \"../../../../common/button/button-general\";\r\nimport Popover from \"../../../../../components/grid-container/popover-action\";\r\nimport {Key} from \"diginet-core-ui/icons\";\r\n\r\nconst useStyles = makeStyles(() => ({\r\n divItemMember: {\r\n background: '#FFFFFF',\r\n boxShadow: '0px 2px 2px rgba(0, 0, 0, 0.25)',\r\n borderRadius: 4,\r\n padding: 15,\r\n marginBottom: 10,\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n textAlign: 'center',\r\n minHeight: 180,\r\n position: 'relative',\r\n '& .divItemMember_key': {\r\n position: 'absolute',\r\n top: 5,\r\n left: 5,\r\n \"&.primary_key\": {}\r\n },\r\n '& .divItemMember_button': {\r\n display: 'none',\r\n position: 'absolute',\r\n top: 5,\r\n right: 5\r\n },\r\n '&:hover .divItemMember_button': {\r\n display: 'block'\r\n }\r\n }\r\n}));\r\n\r\nconst W09F3010Member = React.memo((props) => {\r\n\r\n const classes = useStyles();\r\n const {data, members, onAction} = props;\r\n const [selectedMember, setSelectedMember] = useState(null);\r\n const refAction = useRef(null);\r\n\r\n const isAdmin = useMemo(() => _.get(data, \"IsAdmin\", 0), [data]);\r\n const listMembers = members || [];\r\n\r\n const onShowAction = (e, data) => {\r\n if (!e) return false;\r\n setSelectedMember(data);\r\n if (refAction && refAction.current) refAction.current.instance.show(e.target);\r\n };\r\n\r\n const _onAction = (key, data) => {\r\n if (refAction && refAction.current) refAction.current.instance.hide();\r\n if (onAction) onAction(key, data);\r\n\r\n };\r\n\r\n const getMenuRole = (role) => {\r\n if (_.isNull(role)) return \"\";\r\n const numberRole = _.toNumber(role);\r\n let menuRole = [];\r\n if (numberRole !== 0) {\r\n menuRole = [...menuRole, {name: Config.lang(\"Chi_dinh_lam_thanh_vien\"), role: 0}];\r\n }\r\n if (numberRole !== 1) {\r\n menuRole = [...menuRole, {name: Config.lang(\"Chi_dinh_lam_quan_tri_vien\"), role: 1}];\r\n }\r\n if (numberRole !== 2) {\r\n menuRole = [...menuRole, {name: Config.lang(\"Chi_dinh_lam_thanh_vien_vai_tro_quan_tri\"), role: 2}]\r\n }\r\n return menuRole;\r\n };\r\n\r\n const menuRole = getMenuRole(_.get(selectedMember, \"Role\", null));\r\n\r\n return (\r\n <>\r\n {Boolean(isAdmin) && \r\n \r\n {_.map(menuRole, (item, i) => _onAction('isAdmin', {...selectedMember, newRole: item.role})}\r\n />)}\r\n _onAction('removeFromGroup', selectedMember)}\r\n />\r\n
\r\n }\r\n {listMembers && listMembers.length > 0 && \r\n {listMembers && listMembers.map((member, idx) => {\r\n const isHide = isAdmin !== 1 || Config.profile.UserID === _.get(member, \"MemberID\", \"\");\r\n const user = Config.getUser({UserID: _.get(member, \"MemberID\", \"\")});\r\n const memberRole = _.get(member,\"Role\", 0);\r\n return \r\n \r\n {!!memberRole &&
\r\n
}\r\n
\r\n
{Config.sub_text(_.get(member, \"UserName\", _.get(user, \"UserName\", \"\")), 25)}
\r\n
{_.get(member, \"MemberID\", \"\")}
\r\n
\r\n {!isHide &&\r\n onShowAction(e, member)}>\r\n \r\n }\r\n
\r\n
\r\n })}\r\n }\r\n {listMembers && listMembers.length <= 0 &&\r\n {Config.lang(\"DHR_Khong_co_du_lieu\")}
}\r\n \r\n );\r\n}, (prevProps, nextProps) => {\r\n return JSON.stringify(prevProps.data) === JSON.stringify(nextProps.data)\r\n && JSON.stringify(prevProps.members) === JSON.stringify(nextProps.members);\r\n});\r\n\r\nW09F3010Member.propTypes = {\r\n data: PropTypes.object,\r\n members: PropTypes.array,\r\n\r\n onAction: PropTypes.func\r\n};\r\n\r\nexport default W09F3010Member;\r\n","/**\r\n * @copyright 2019 @ DigiNet\r\n * @author TRIHAO\r\n * @create 2/3/2021\r\n * @Example\r\n */\r\n\r\nimport React, {useCallback, useEffect, useMemo, useRef, useState} from \"react\";\r\nimport {connect} from \"react-redux\";\r\nimport {bindActionCreators, compose} from \"redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport {FormGroup} from \"react-bootstrap\";\r\nimport {Grid} from \"@material-ui/core\";\r\nimport Modal from \"../../../../common/modal/modal\";\r\nimport ButtonGeneral from \"../../../../common/button/button-general\";\r\nimport * as generalActions from \"../../../../../redux/general/general_actions\";\r\nimport Config from \"../../../../../config\";\r\nimport * as _ from \"lodash\";\r\nimport {Column} from \"devextreme-react/data-grid\";\r\nimport GridContainer from \"../../../../grid-container/grid-container\";\r\nimport UserImage from \"../../../../common/user/user-image\";\r\nimport SearchIcon from '@material-ui/icons/Search';\r\nimport IconButton from \"@material-ui/core/IconButton\";\r\nimport TextField from \"../../../../common/form-material/textfield\";\r\nimport * as W09F3010Actions\r\n from \"../../../../../redux/W0X/W09F3010/W09F3010_actions\";\r\n\r\n// const useStyles = makeStyles(theme => ({}));\r\n\r\nconst SelectEmployees = React.memo((props) => {\r\n\r\n const _initDataSource = {\r\n total: 0,\r\n rows: []\r\n };\r\n const _initFilter = {\r\n search: \"\",\r\n limit: 20,\r\n skip: 0\r\n };\r\n const {open, title, data, allowSaveData, keyExpr, valueExpr, displayExpr, FormID, loadParams, autoSearch} = props;\r\n const [loading, setLoading] = useState(false);\r\n\r\n const keys = useMemo(() => {\r\n return data ? data.map(d => d[keyExpr]) : [];\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [data, open]);\r\n const [dataSource, setDataSource] = useState(_initDataSource);\r\n const filter = useRef(_initFilter);\r\n const tmpSelectedRowKeys = useRef([]);\r\n const tmpSelectedRowData = useRef([]);\r\n const dataGrid = useRef(null);\r\n const dataGridSelected = useRef(null);\r\n const changePage = useRef(false);\r\n const changeDataSource = useRef(false);\r\n const searchTimeout = useRef(null);\r\n\r\n const loadCboEmployees = (isReset) => {\r\n const params = {\r\n HostID: \"\",\r\n Type: \"EmployeeID\",\r\n FormID: FormID,\r\n ...loadParams,\r\n Language: Config.language || \"84\",\r\n skip: filter.current.skip,\r\n limit: filter.current.limit,\r\n search: filter.current.search,\r\n };\r\n if (!isReset) {\r\n changePage.current = true;\r\n }\r\n setLoading(true);\r\n props.generalActions.getCboEmployees(params, (error, data) => {\r\n setLoading(false);\r\n if (error) {\r\n Config.popup.show(\"ERROR\", error);\r\n return false;\r\n }\r\n if (data) {\r\n setDataSource(data);\r\n }\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n if (open) {\r\n tmpSelectedRowKeys.current = keys;\r\n tmpSelectedRowData.current = data ? [...data] : [];\r\n loadCboEmployees(true);\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [open]);\r\n\r\n useEffect(() => {\r\n changeDataSource.current = true;\r\n // _setSelected(true);\r\n }, [dataSource]);\r\n\r\n const onSave = () => {\r\n const {saveParams, onChosen} = props;\r\n if (allowSaveData) {\r\n const params = {\r\n ...saveParams,\r\n data: JSON.stringify(tmpSelectedRowKeys.current),\r\n };\r\n setLoading(true);\r\n props.W09F3010Actions.selectedEmployees(params, (errors) => {\r\n setLoading(false);\r\n if (errors) {\r\n Config.popup.show('ERROR', errors);\r\n return false;\r\n }\r\n if (onChosen) onChosen({\r\n selectedRowKeys: tmpSelectedRowKeys.current,\r\n selectedRowsData: tmpSelectedRowData.current\r\n });\r\n onClose();\r\n });\r\n } else {\r\n if (onChosen) onChosen({\r\n selectedRowKeys: tmpSelectedRowKeys.current,\r\n selectedRowsData: tmpSelectedRowData.current\r\n });\r\n onClose();\r\n }\r\n };\r\n\r\n const onChangePage = (page) => {\r\n filter.current.skip = page * filter.current.limit;\r\n loadCboEmployees();\r\n };\r\n\r\n const onChangePerPage = (per) => {\r\n filter.current.skip = 0;\r\n filter.current.limit = per;\r\n loadCboEmployees();\r\n };\r\n\r\n const onFilter = () => {\r\n filter.current.skip = 0;\r\n loadCboEmployees();\r\n };\r\n\r\n const onClose = () => {\r\n const {onClose} = props;\r\n if (onClose) onClose();\r\n };\r\n\r\n const _setSelected = (flag) => {\r\n if (dataGrid && dataGrid.current) {\r\n let selected = tmpSelectedRowKeys.current;\r\n if (flag) {\r\n selected = [];\r\n dataSource.rows.forEach(d => {\r\n if (tmpSelectedRowKeys.current.indexOf(d[keyExpr]) > -1) {\r\n selected.push(d[keyExpr]);\r\n }\r\n });\r\n if (changePage.current) {\r\n setTimeout(() => changePage.current = false, 200);\r\n }\r\n }\r\n dataGrid.current.instance.selectRows(selected);\r\n }\r\n };\r\n const _setDataSelected = () => {\r\n if (dataGridSelected && dataGridSelected.current) {\r\n dataGridSelected.current.instance.option(\"dataSource\", tmpSelectedRowData.current);\r\n }\r\n };\r\n\r\n const onContentReady = () => {\r\n if (changeDataSource.current) {\r\n _setSelected(true);\r\n _setDataSelected();\r\n changeDataSource.current = false;\r\n }\r\n };\r\n\r\n const onSelectionChanged = useCallback((e) => {\r\n const {currentSelectedRowKeys, selectedRowsData, currentDeselectedRowKeys} = e;\r\n if (currentDeselectedRowKeys.length > 0) {\r\n if (!changePage.current) {\r\n tmpSelectedRowData.current = tmpSelectedRowData.current.filter((item) => {\r\n return currentDeselectedRowKeys.indexOf(item[keyExpr]) < 0;\r\n });\r\n tmpSelectedRowKeys.current = tmpSelectedRowKeys.current.filter((item) => {\r\n return currentDeselectedRowKeys.indexOf(item) < 0;\r\n });\r\n }\r\n } else if (currentSelectedRowKeys.length > 0) {\r\n for (const val of currentSelectedRowKeys) {\r\n if (tmpSelectedRowKeys.current.indexOf(val) < 0) {\r\n tmpSelectedRowKeys.current.push(val);\r\n const data = selectedRowsData.find(d => d[keyExpr] === val);\r\n if (data) tmpSelectedRowData.current.push(data);\r\n }\r\n }\r\n }\r\n if (!changePage.current) {\r\n _setSelected();\r\n _setDataSelected();\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n\r\n const renderEmployee = (e) => {\r\n const {data} = e.rows || e;\r\n if (displayExpr && typeof displayExpr === \"function\") return displayExpr();\r\n return \r\n
\r\n
{`${data[valueExpr]} - ${data[displayExpr]}`}
\r\n
\r\n \r\n \r\n \r\n \r\n onFilter()}>\r\n \r\n dataGrid.current = ref}\r\n totalItems={_.get(dataSource, \"total\", [])}\r\n itemPerPage={_.get(filter, \"current.limit\", 50)}\r\n skipPerPage={_.get(filter, \"current.skip\", 0)}\r\n dataSource={_.get(dataSource, \"rows\", [])}\r\n loading={loading}\r\n keyExpr={keyExpr ? keyExpr : valueExpr}\r\n typePaging={\"remote\"}\r\n showColumnHeaders={false}\r\n pagerFullScreen={false}\r\n showBorders={false}\r\n columnAutoWidth={true}\r\n typeShort={window.innerWidth < 768}\r\n height={\"calc(100vh - 300px)\"}\r\n selection={{\r\n allowSelectAll: false,\r\n mode: 'multiple',\r\n selectAllMode: \"allPages\",\r\n showCheckBoxesMode: \"always\"\r\n }}\r\n allowColumnResizing={true}\r\n listPerPage={[50, 70, 90, 100]}\r\n // selectedRowKey={selectedRowKeys}\r\n onChangePage={onChangePage}\r\n onChangePerPage={onChangePerPage}\r\n onSelectionChanged={onSelectionChanged}\r\n onContentReady={() => {\r\n onContentReady();\r\n }}\r\n >\r\n \r\n \r\n {Config.lang(\"DHR_Thanh_vien_duoc_chon\")} \r\n dataGridSelected.current = ref}\r\n itemPerPage={50}\r\n // dataSource={[]}\r\n // loading={loading}\r\n keyExpr={keyExpr}\r\n typePaging={\"normal\"}\r\n showColumnHeaders={false}\r\n pagerFullScreen={false}\r\n showBorders={false}\r\n columnAutoWidth={true}\r\n typeShort={window.innerWidth < 768}\r\n height={\"calc(100vh - 220px)\"}\r\n allowColumnResizing={true}\r\n listPerPage={[50, 70, 90, 100]}\r\n // onSelectionChanged={onSelectionChanged}\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}, (pProps, nProps) => {\r\n return pProps.open === nProps.open &&\r\n JSON.stringify(pProps.data) === JSON.stringify(nProps.data);\r\n});\r\n\r\nSelectEmployees.defaultProps = {\r\n allowSaveData: true,\r\n keyExpr: \"EmployeeID\",\r\n autoSearch: false,\r\n};\r\nSelectEmployees.propTypes = {\r\n open: PropTypes.bool,\r\n title: PropTypes.string.isRequired,\r\n maxWidth: PropTypes.string,\r\n fullWidth: PropTypes.bool,\r\n keyExpr: PropTypes.string,\r\n valueExpr: PropTypes.string,\r\n displayExpr: PropTypes.any,\r\n allowSaveData: PropTypes.bool,\r\n FormID: PropTypes.string,\r\n loadParams: PropTypes.object,\r\n saveParams: PropTypes.object,\r\n autoSearch: PropTypes.bool,\r\n\r\n onChosen: PropTypes.func,\r\n onClose: PropTypes.func\r\n};\r\n\r\nexport default compose(connect(null, dispatch => ({\r\n generalActions: bindActionCreators(generalActions, dispatch),\r\n W09F3010Actions: bindActionCreators(W09F3010Actions, dispatch)\r\n})))(SelectEmployees);\r\n","/**\r\n * @copyright 2019 @ DigiNet\r\n * @author TRIHAO\r\n * @create 12/19/2019\r\n * @Example\r\n */\r\nimport React from \"react\";\r\nimport {connect} from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport * as W09F6000Actions from \"../../../../redux/W0X/W09F6000/W09F6000_actions\";\r\nimport * as generalActions from \"../../../../redux/general/general_actions\";\r\nimport {bindActionCreators, compose} from \"redux\";\r\nimport Config from \"../../../../config\";\r\nimport ActionToolbar from \"../../../common/toolbar/action-toolbar\";\r\nimport {Column} from \"devextreme-react/data-grid\";\r\nimport GridContainer from \"../../../grid-container/grid-container\";\r\nimport {\r\n Modal,\r\n ModalHeader,\r\n ModalBody,\r\n Typography,\r\n DatePicker,\r\n Button,\r\n Checkbox,\r\n TextInput,\r\n Dropdown,\r\n TreeView,\r\n Label, ButtonIcon, Row, Col, Divider\r\n} from 'diginet-core-ui/components';\r\nimport _ from \"lodash\";\r\nimport {makeStyles} from \"diginet-core-ui/theme\";\r\nconst useStyles = makeStyles((theme) => ({\r\n panel: {\r\n transition: 'all .4s'\r\n },\r\n panelForm: {\r\n transition: 'all .5s',\r\n opacity: 1\r\n },\r\n hiddenOpacity: {\r\n opacity: 0\r\n },\r\n leftPanelMinimum: {\r\n maxWidth: '89px',\r\n paddingLeft: 0\r\n },\r\n rightPanelMinimum: {\r\n maxWidth: 'calc(100% - 89px)'\r\n },\r\n titleColorFilter: {\r\n backgroundColor: theme.colors.primary + ' !important',\r\n '& svg': {\r\n '& path': {\r\n fill: theme.colors.system.white\r\n }\r\n }\r\n },\r\n modalHeader:{\r\n \"& > div > .DGN-UI-Typography\":{\r\n width: \"100%\"\r\n }\r\n }\r\n}));\r\n\r\nclass W09F6000 extends React.PureComponent {\r\n constructor(props) {\r\n super(props);\r\n this.filter = {\r\n limit: 15,\r\n skip: 0,\r\n };\r\n const filters = this.getDataFilter(props.dataDefaults);\r\n this.filter = filters;\r\n this.state = {\r\n loading: false,\r\n loadingOrgChartID: false,\r\n loadingLaborObjectID: false,\r\n loadingCboDirectManager: false,\r\n loadingDutyID: false,\r\n loadingProject: false,\r\n loadingStatusID: false,\r\n isSaving: false,\r\n dataDepartments: [],\r\n dataOrgChart: [],\r\n dataTeam: [],\r\n dataCboProjects: {\r\n rows: [],\r\n total: 0\r\n },\r\n dataCboDirectManager: {\r\n rows: [],\r\n total: 0\r\n },\r\n filters,\r\n dataLaborObject: [],\r\n dataGrid: [],\r\n totalDataGrid: 0,\r\n minimum: false,\r\n\r\n DateJoinFrom: null,\r\n DateJoinTo: null,\r\n PreUsingPeriodFrom: null,\r\n PreUsingPeriodTo: null,\r\n\r\n selectedRowKeys: [],\r\n isShowSelected: false,\r\n };\r\n this.isSelecting = false;\r\n this.tmpSelectedRowKeys = [];\r\n this.tmpCurrentSelectedRowKeys = [];\r\n this.tmpSelectedRowData = [];\r\n this.tmpDataSelectedRowKeys = [];\r\n // this.tmpDataSaveSelectedEmployee = [];\r\n this.chooseOnSelect = false;\r\n this.selectAll = false;\r\n this.changePage = false;\r\n this.isChangeShow = false;\r\n this.filterCboProjects = {\r\n strSearch: \"\",\r\n skip: 0,\r\n limit: 50\r\n };\r\n this.filterCboDirectManager = {\r\n timer: null,\r\n skip: 0,\r\n limit: 50,\r\n strSearch: \"\"\r\n };\r\n this.genders = [\r\n {\r\n SexID: 0,\r\n SexName: Config.lang(\"NamU\")\r\n },\r\n {\r\n SexID: 1,\r\n SexName: Config.lang(\"Nu\")\r\n }\r\n ];\r\n this.dataGrid = null;\r\n }\r\n\r\n loadCboDuty = () => {\r\n this.setLoading('DutyID', true);\r\n this.props.generalActions.getCboDuty2((errors) => {\r\n this.setLoading('DutyID', false);\r\n if (errors) {\r\n Config.popup.show('ERROR', errors);\r\n return false;\r\n }\r\n });\r\n };\r\n\r\n _generateDataOrg = (dataSource, valueExpr, parentIdExpr) => {\r\n return dataSource.map((e) => {\r\n if (e[valueExpr] && e[parentIdExpr] && e[valueExpr] === e[parentIdExpr]) {\r\n delete e[parentIdExpr];\r\n e.expanded = true;\r\n } else if (!e[parentIdExpr]) {\r\n e.expanded = true;\r\n }\r\n return e;\r\n });\r\n };\r\n\r\n loadDataOrgChart = () => {\r\n this.props.generalActions.getOrgCharts({}, (error, data) => {\r\n if (error) {\r\n Config.popup.show(\"ERROR\", error);\r\n return false;\r\n }\r\n if (data) {\r\n const dataSource = this._generateDataOrg(data, \"OrgChartID\", \"OrgChartParentID\");\r\n this.setState({dataOrgChart: dataSource});\r\n }\r\n });\r\n };\r\n\r\n\r\n loadCboProjects = (isReset) => {\r\n const params = {\r\n HostID: \"\",\r\n FormID: \"W09F6000\",\r\n Language: Config.language || \"84\",\r\n skip: this.filterCboProjects.skip,\r\n limit: this.filterCboProjects.limit,\r\n search: this.filterCboProjects.strSearch\r\n };\r\n this.setLoading('Project', true);\r\n this.props.w09f6000Actions.getCboProjects(params, (errors, data) => {\r\n this.setLoading('Project', false);\r\n if (errors) {\r\n Config.popup.show('ERROR', errors);\r\n return false;\r\n }\r\n if (data) {\r\n const {dataCboProjects} = this.state;\r\n const rows = data && data.rows ? data.rows : data;\r\n const total = data && data.total ? data.total : data.length;\r\n this.setState({\r\n dataCboProjects: {\r\n rows: isReset ? rows : dataCboProjects.rows.concat(rows),\r\n total: total\r\n }\r\n })\r\n }\r\n });\r\n };\r\n\r\n loadCboDirectManager = (isReset = false) => {\r\n const {dataCboDirectManager} = this.state;\r\n const params = {\r\n Type: \"DirectManagerID\",\r\n FormID: _.get(this.props, \"FormID\", \"\"),\r\n Language: Config.language || \"84\",\r\n Mode: 0,\r\n skip: this.filterCboDirectManager.skip,\r\n limit: this.filterCboDirectManager.limit,\r\n SearchValue: this.filterCboDirectManager.strSearch,\r\n SearchValue2: \"\",\r\n SearchValueUnicodeCombine: \"\",\r\n TranMonth: 0,\r\n TranYear: 0,\r\n };\r\n this.setState({loadingCboDirectManager: true});\r\n this.props.w09f6000Actions.getCboDirectManager(params, (err, data) => {\r\n this.setState({loadingCboDirectManager: false});\r\n if (err) {\r\n Config.popup.show(\"ERROR\", err);\r\n return false;\r\n }\r\n if (data) {\r\n const dataRows = _.get(data, \"rows\", data) ?? [];\r\n const totalRows = _.get(data, \"total\", _.size(data)) ?? 0;\r\n this.setState({\r\n dataCboDirectManager: {\r\n rows: isReset ? dataRows : _.concat(dataCboDirectManager.rows, dataRows),\r\n total: totalRows\r\n }\r\n })\r\n }\r\n })\r\n };\r\n\r\n loadCboLaborObject = () => {\r\n this.setLoading('LaborObjectID', true);\r\n this.props.w09f6000Actions.getCboLaborObject({}, (errors, data) => {\r\n this.setLoading('LaborObjectID', false);\r\n if (errors) {\r\n Config.popup.show('ERROR', errors);\r\n return false;\r\n }\r\n if (data) {\r\n this.setState({dataLaborObject: data});\r\n }\r\n });\r\n };\r\n\r\n loadCboStatusWork = () => {\r\n this.setLoading('StatusID', true);\r\n this.props.generalActions.getCboStatusWork((errors) => {\r\n this.setLoading('StatusID', false);\r\n if (errors) {\r\n Config.popup.show('ERROR', errors);\r\n return false;\r\n }\r\n });\r\n };\r\n\r\n setLoading = (key, status = false) => {\r\n if (!key) return;\r\n this.setState({['loading' + key]: status});\r\n };\r\n\r\n componentDidUpdate(prevProps, prevState, snapshot) {\r\n const {dataDefaults, open} = this.props;\r\n const arrayKeys = (dataDefaults && dataDefaults.dataSelected) ? dataDefaults.dataSelected.map(d => d.EmployeeID) : [];\r\n if (JSON.stringify(prevProps.dataDefaults) !== JSON.stringify(this.props.dataDefaults)\r\n || (JSON.stringify(arrayKeys) !== JSON.stringify(this.tmpSelectedRowKeys) && prevProps.open !== open && open)\r\n ) {\r\n const dataDefaults = this.props.dataDefaults;\r\n this.setState({filters: this.getDataFilter(dataDefaults)});\r\n if (dataDefaults && dataDefaults.selectedRowKeys) {\r\n this.tmpSelectedRowKeys = [];\r\n dataDefaults.selectedRowKeys.forEach(select => {\r\n if (this.tmpSelectedRowKeys.indexOf(select) < 0) {\r\n this.tmpSelectedRowKeys.push(select);\r\n }\r\n });\r\n }\r\n if (dataDefaults && dataDefaults.dataSelected) {\r\n this.tmpSelectedRowData = [];\r\n dataDefaults.dataSelected.forEach(select => {\r\n if (this.tmpSelectedRowData.indexOf(select) < 0) {\r\n this.tmpSelectedRowData.push(select);\r\n }\r\n });\r\n }\r\n // if (dataDefaults && dataDefaults.isLoaded) {\r\n this.loadGrid(true);\r\n // }\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n const {dataDefaults} = this.props;\r\n this.loadCboDuty();\r\n this.loadCboProjects();\r\n this.loadDataOrgChart();\r\n this.loadCboLaborObject();\r\n this.loadCboStatusWork();\r\n this.loadCboDirectManager();\r\n\r\n if (dataDefaults) {\r\n if (dataDefaults.selectedRowKeys && dataDefaults.selectedRowKeys.length > 0) {\r\n dataDefaults.selectedRowKeys.forEach(select => {\r\n if (this.tmpSelectedRowKeys.indexOf(select) < 0) {\r\n this.tmpSelectedRowKeys.push(select);\r\n }\r\n });\r\n }\r\n if (dataDefaults && dataDefaults.dataSelected) {\r\n this.tmpSelectedRowData = [];\r\n dataDefaults.dataSelected.forEach(select => {\r\n if (this.tmpSelectedRowData.indexOf(select) < 0) {\r\n this.tmpSelectedRowData.push(select);\r\n }\r\n });\r\n }\r\n }\r\n this.loadGrid(true);\r\n }\r\n\r\n getDataFilter = (dataDefaults) => {\r\n return {\r\n ...this.filter,\r\n ...dataDefaults,\r\n strSearch: dataDefaults?.strSearch || \"\",\r\n OrgChartID: dataDefaults?.OrgChartID && dataDefaults.OrgChartID.length > 0 ? dataDefaults.OrgChartID : [],\r\n DirectManagerID: _.get(dataDefaults, \"DirectManagerID\", []) || [],\r\n LaborObjectID: dataDefaults?.LaborObjectID && dataDefaults.LaborObjectID.length > 0 ? dataDefaults.LaborObjectID : [],\r\n DutyID: dataDefaults?.DutyID && dataDefaults.DutyID.length > 0 ? dataDefaults.DutyID : [],\r\n ProjectID: dataDefaults?.ProjectID && dataDefaults.ProjectID.length > 0 ? dataDefaults.ProjectID : [],\r\n StatusID: dataDefaults?.StatusID && dataDefaults.StatusID.length > 0 ? dataDefaults.StatusID : [],\r\n SexID: dataDefaults?.SexID && dataDefaults.SexID.length > 0 ? dataDefaults.SexID : [],\r\n DateJoinFrom: dataDefaults?.DateJoinFrom || null,\r\n DateJoinTo: dataDefaults?.DateJoinTo || null,\r\n PreUsingPeriodFrom: dataDefaults?.PreUsingPeriodFrom || null,\r\n PreUsingPeriodTo: dataDefaults?.PreUsingPeriodTo || null,\r\n NotJoinTrain: dataDefaults?.NotJoinTrain || false,\r\n };\r\n };\r\n\r\n handleChange = (key, e) => {\r\n const {filters} = this.state;\r\n if (!key) return false;\r\n const value = _.get(e, \"value\", _.get(e, \"target.value\", \"\"));\r\n this.setState({filters: {...filters, [key]: value}}, () => {\r\n if (key === \"NotJoinTrain\") {\r\n setTimeout(() => {\r\n this.onFilter();\r\n if (this.props && this.props.onCheckedNotJoinTrain) {\r\n this.props.onCheckedNotJoinTrain(e.value);\r\n }\r\n })\r\n }\r\n })\r\n };\r\n\r\n loadGrid = (isReset) => {\r\n const {\r\n strSearch, LaborObjectID, OrgChartID, DutyID,\r\n ProjectID, StatusID, SexID, DateJoinFrom, DateJoinTo, PreUsingPeriodFrom, PreUsingPeriodTo, NotJoinTrain,\r\n DirectManagerID\r\n } = this.state.filters;\r\n const {limit, skip} = this.filter;\r\n const {FormID, loadParams, AttendanceDate, ShiftID} = this.props;\r\n // const ProjectID = Project ? Project.map(pro => pro.ProjectID && pro.ProjectID) : [];\r\n const params = {\r\n Employee: strSearch,\r\n LaborObjectID: LaborObjectID && LaborObjectID.length > 0 ? JSON.stringify(LaborObjectID) : \"\",\r\n OrgChartID: OrgChartID && OrgChartID.length > 0 ? JSON.stringify(OrgChartID) : \"\",\r\n DutyID: DutyID && DutyID.length > 0 ? JSON.stringify(DutyID) : \"\",\r\n ProjectID: ProjectID && ProjectID.length > 0 ? JSON.stringify(ProjectID) : \"\",\r\n StatusID: StatusID && StatusID.length > 0 ? JSON.stringify(StatusID) : \"\",\r\n SexID: SexID && SexID.length > 0 ? JSON.stringify(SexID) : \"\",\r\n DateJoinFrom: DateJoinFrom,\r\n DateJoinTo: DateJoinTo,\r\n DirectManagerID: !!_.size(DirectManagerID) ? JSON.stringify(DirectManagerID) : \"\",\r\n PreUsingPeriodFrom: PreUsingPeriodFrom,\r\n PreUsingPeriodTo: PreUsingPeriodTo,\r\n FormID: FormID,\r\n Language: Config.language || \"84\",\r\n ...loadParams,\r\n limit: limit,\r\n skip: skip\r\n };\r\n if (AttendanceDate) params.AttendanceDate = AttendanceDate;\r\n if (ShiftID) params.ShiftID = ShiftID;\r\n\r\n if (this.props && this.props.FormID === 'W38F2001') {\r\n params.NotJoinTrain = NotJoinTrain;\r\n params.TrainingCourseID = this.props.TrainingCourseID;\r\n }\r\n if (!isReset) {\r\n this.changePage = true;\r\n }\r\n this.setState({ loading: true });\r\n this.props.w09f6000Actions.getGridEmployees(params, (errors, data) => {\r\n this.setState({ loading: false });\r\n if (errors) {\r\n Config.popup.show('ERROR', errors);\r\n return false;\r\n }\r\n let selectedRowKeys = this.tmpSelectedRowKeys;\r\n this.setState({\r\n dataGrid: data.rows ? data.rows : data,\r\n totalDataGrid: data.total,\r\n selectedRowKeys: selectedRowKeys\r\n });\r\n });\r\n };\r\n\r\n onFilter = () => {\r\n this.filter.skip = 0;\r\n this.loadGrid();\r\n };\r\n\r\n onChangePage = (page) => {\r\n this.filter.skip = page * this.filter.limit;\r\n this.loadGrid();\r\n };\r\n\r\n onChangePerPage = (per) => {\r\n this.filter.skip = 0;\r\n this.filter.limit = per;\r\n this.loadGrid();\r\n };\r\n\r\n onSelect = () => {\r\n let selectedRowKeys = this.tmpSelectedRowKeys;\r\n if (this.selectAll) {\r\n //chạy api để lấy tất cả....\r\n //rồi mới insert được\r\n }\r\n this.tmpDataSelectedRowKeys = [];\r\n const {FormID, onChosen} = this.props;\r\n\r\n // list form không cần lưu bảng tạm. Lấy trực tiếp danh sách nhân viên đc từ popup.\r\n const exceptFormID = ['W39F1000'];\r\n if(exceptFormID.includes(FormID) && onChosen){\r\n onChosen(this.tmpSelectedRowKeys, this.tmpSelectedRowData);\r\n return;\r\n }\r\n\r\n if (selectedRowKeys && selectedRowKeys.length > 0) {\r\n this.setState({isSaving: true});\r\n const params = {\r\n EmployeeID: JSON.stringify(selectedRowKeys),\r\n HostID: \"\",\r\n FormID: FormID ? FormID : \"\"\r\n };\r\n this.props.w09f6000Actions.saveSelectedEmployee(params, (errors) => {\r\n this.setState({isSaving: false});\r\n if (errors) {\r\n errors.customMessage = {\r\n \"F6000E001\": \"EmployeeID \" + Config.lang(\"Bat_buoc\"),\r\n };\r\n Config.popup.show('INFO', errors);\r\n return false;\r\n }\r\n // this.tmpDataSaveSelectedEmployee = this.tmpSelectedRowKeys;\r\n if (onChosen) onChosen(this.tmpSelectedRowKeys);\r\n });\r\n }\r\n };\r\n\r\n // setSelectedEmployees = (e) => {\r\n // const currentSelectedRowKeys = e.currentSelectedRowKeys;\r\n // const currentDeselectedRowKeys = e.currentDeselectedRowKeys;\r\n // if (currentDeselectedRowKeys.length === 1) {\r\n // if (!this.selectAll) {\r\n // this.tmpSelectedRowKeys = this.tmpSelectedRowKeys.filter((e) => {\r\n // return e !== currentDeselectedRowKeys[0];\r\n // });\r\n // } else {\r\n // this.tmpDeselectedRowKeys.push(currentDeselectedRowKeys[0]);\r\n // }\r\n // } else if (currentDeselectedRowKeys.length > 1) {\r\n // this.tmpSelectedRowKeys = [];\r\n // this.tmpDeselectedRowKeys = [];\r\n // this.selectAll = false;\r\n // } else if (currentSelectedRowKeys.length === 1) {\r\n // if (!this.selectAll) {\r\n // this.tmpSelectedRowKeys.push(currentSelectedRowKeys[0]);\r\n // } else {\r\n // this.tmpDeselectedRowKeys = this.tmpDeselectedRowKeys.filter((e) => {\r\n // return e !== currentSelectedRowKeys[0];\r\n // });\r\n // }\r\n // } else if (currentSelectedRowKeys.length > 1) {\r\n // this.tmpSelectedRowKeys = [];\r\n // this.tmpDeselectedRowKeys = [];\r\n // this.selectAll = true;\r\n // }\r\n // };\r\n\r\n setSelectedEmployees = (e) => {\r\n const currentSelectedRowKeys = e.currentSelectedRowKeys;\r\n const currentSelectedRowData = e.selectedRowsData;\r\n const currentDeselectedRowKeys = e.currentDeselectedRowKeys;\r\n if (currentDeselectedRowKeys.length > 0) {\r\n if (this.changePage) {\r\n this.changePage = false;\r\n return false;\r\n }\r\n if (this.isChangeShow) {\r\n this.isChangeShow = false;\r\n return false;\r\n }\r\n\r\n this.tmpSelectedRowData = this.tmpSelectedRowData.filter((e) => {\r\n return currentDeselectedRowKeys.indexOf(e.EmployeeID) < 0;\r\n });\r\n this.tmpSelectedRowKeys = this.tmpSelectedRowKeys.filter((e) => {\r\n return currentDeselectedRowKeys.indexOf(e) < 0;\r\n });\r\n this.tmpDataSelectedRowKeys = this.tmpDataSelectedRowKeys.filter((e) => {\r\n return currentDeselectedRowKeys.indexOf(e) < 0;\r\n });\r\n } else if (currentSelectedRowKeys.length > 0) {\r\n currentSelectedRowKeys.forEach((val) => {\r\n if (this.tmpSelectedRowKeys.indexOf(val) < 0) {\r\n this.tmpSelectedRowKeys.push(val);\r\n const data = currentSelectedRowData.find(d => d.EmployeeID === val);\r\n if (data) this.tmpSelectedRowData.push(data);\r\n }\r\n\r\n if (this.tmpDataSelectedRowKeys.indexOf(val) < 0) {\r\n this.tmpDataSelectedRowKeys.push(val);\r\n }\r\n });\r\n }\r\n };\r\n\r\n onSelectionChanged = async (e) => {\r\n if (!this.isSelecting) {\r\n this.isSelecting = true;\r\n await this.setSelectedEmployees(e);\r\n this.setState({\r\n selectedRowKeys: e.selectedRowKeys\r\n }, () => {\r\n this.isSelecting = false;\r\n this.changePage = false;\r\n this.isChangeShow = false;\r\n });\r\n }\r\n };\r\n\r\n collapsePanel = (flag) => {\r\n if (typeof flag !== \"undefined\") {\r\n this.setState({minimum: !!flag});\r\n } else {\r\n this.setState({minimum: !this.state.minimum});\r\n }\r\n };\r\n\r\n changeTypeShow = (e) => {\r\n if (!e) return false;\r\n this.isChangeShow = true;\r\n this.setState({isShowSelected: e.target.checked});\r\n };\r\n\r\n getTotalSelectedRowKey = () => {\r\n return `(${this.tmpSelectedRowKeys.length})`;\r\n };\r\n\r\n onClose = () => {\r\n const {onClose, dataDefaults} = this.props;\r\n if (!this.chooseOnSelect) {\r\n if (dataDefaults && dataDefaults.selectedRowKeys) {\r\n this.tmpSelectedRowKeys = [];\r\n dataDefaults.selectedRowKeys.forEach(select => {\r\n if (this.tmpSelectedRowKeys.indexOf(select) < 0) {\r\n this.tmpSelectedRowKeys.push(select);\r\n }\r\n });\r\n }\r\n if (dataDefaults && dataDefaults.dataSelected) {\r\n this.tmpSelectedRowData = [];\r\n dataDefaults.dataSelected.forEach(select => {\r\n if (this.tmpSelectedRowData.indexOf(select) < 0) {\r\n this.tmpSelectedRowData.push(select);\r\n }\r\n });\r\n }\r\n this.setState({selectedRowKeys: this.tmpSelectedRowKeys});\r\n }\r\n if (onClose) onClose();\r\n };\r\n\r\n //true: Con key chua duoc select; false: da select het..\r\n _checkSelectedRowsKeys = (dataSource) => {\r\n let isCheck = false;\r\n if (dataSource && dataSource.length > 0 && this.tmpSelectedRowKeys.length > 0) {\r\n const dataKeys = dataSource.map(d => d.EmployeeID);\r\n for (let key of this.tmpSelectedRowKeys) {\r\n if (!dataKeys.includes(key)) {\r\n isCheck = true;\r\n break;\r\n }\r\n }\r\n }\r\n return isCheck;\r\n };\r\n\r\n render() {\r\n const {open, getCboDuty, FormID, getCboStatusWork} = this.props;\r\n const classes = useStyles();\r\n const {\r\n loading, isSaving, dataLaborObject, dataGrid, totalDataGrid,\r\n selectedRowKeys, dataCboProjects, minimum, DateJoinFrom, DateJoinTo, PreUsingPeriodFrom,\r\n PreUsingPeriodTo, isShowSelected, dataCboDirectManager, loadingCboDirectManager,\r\n filters\r\n } = this.state;\r\n const {\r\n loadingLaborObjectID,\r\n loadingDutyID,\r\n loadingProject,\r\n loadingStatusID,\r\n dataOrgChart\r\n } = this.state;\r\n const {\r\n OrgChartID,\r\n LaborObjectID,\r\n DirectManagerID,\r\n DutyID,\r\n ProjectID,\r\n StatusID,\r\n SexID,\r\n NotJoinTrain,\r\n strSearch\r\n } = filters;\r\n let _dataGrid = dataGrid;\r\n let _selectedRowKeys = selectedRowKeys;\r\n if (isShowSelected) {\r\n this.tmpCurrentSelectedRowKeys = selectedRowKeys;\r\n if (this.tmpSelectedRowData) {\r\n _dataGrid = this.tmpSelectedRowData;\r\n if (_selectedRowKeys.length === this.tmpSelectedRowKeys.length) this.isChangeShow = false;\r\n _selectedRowKeys = this.tmpSelectedRowKeys;\r\n }\r\n\r\n } else if (this.isChangeShow) {\r\n if (!this._checkSelectedRowsKeys(_dataGrid)) this.isChangeShow = false;\r\n // if (_selectedRowKeys.length === this.tmpSelectedRowKeys.length) this.isChangeShow = false;\r\n }\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
\r\n \r\n this.collapsePanel()}\r\n />\r\n {!minimum && \r\n {Config.lang(\"Loc_chon_nhan_vien\")}\r\n }\r\n
\r\n {!minimum && this.collapsePanel()}\r\n />}\r\n \r\n \r\n
\r\n \r\n {this.getTotalSelectedRowKey()}\r\n \r\n
\r\n
\r\n this.handleChange('strSearch', e)}\r\n />\r\n \r\n\r\n this.handleChange(\"OrgChartID\", data)}\r\n value={OrgChartID}\r\n viewType={'outlined'}\r\n placeholder={Config.lang(\"Co_cau_to_chuc\")}\r\n style={{margin: 0}}\r\n >\r\n this.handleChange(\"OrgChartID\", e)}\r\n parentID={\"OrgChartParentID\"}\r\n value={OrgChartID}\r\n valueExpr={\"OrgChartID\"}\r\n />\r\n \r\n \r\n\r\n this.handleChange(\"LaborObjectID\", e)}\r\n value={LaborObjectID}\r\n viewType={'outlined'}\r\n placeholder={Config.lang('Doi_tuong_lao_dong')}\r\n />\r\n \r\n\r\n this.handleChange(\"DutyID\", e)}\r\n value={DutyID}\r\n viewType={'outlined'}\r\n placeholder={Config.lang('Chuc_danh_cong_viec')}\r\n />\r\n \r\n\r\n this.handleChange(\"ProjectID\", e)}\r\n onInput={(e) => {\r\n if (this.filterCboProjects.timer) clearTimeout(this.filterCboProjects.timer);\r\n this.filterCboProjects.strSearch = e.target.value;\r\n this.filterCboProjects.timer = setTimeout(() => {\r\n this.filterCboProjects.skip = 0;\r\n this.filterCboProjects.limit = 50;\r\n this.loadCboProjects(true);\r\n }, 700);\r\n }}\r\n onLoadMore={(e) => {\r\n this.filterCboProjects.skip = e.skip;\r\n this.filterCboProjects.limit = e.limit;\r\n this.loadCboProjects();\r\n }}\r\n style={{margin: 0}}\r\n />\r\n \r\n\r\n this.handleChange(\"StatusID\", e)}\r\n value={StatusID}\r\n viewType={'outlined'}\r\n placeholder={Config.lang('Trang_thai_lam_viec')}\r\n />\r\n \r\n\r\n this.handleChange(\"SexID\", e)}\r\n value={SexID}\r\n viewType={'outlined'}\r\n placeholder={Config.lang('Gioi_tinh')}\r\n />\r\n \r\n\r\n this.handleChange(\"DirectManagerID\", e)}\r\n onInput={(e) => {\r\n if (this.filterCboDirectManager.timer) clearTimeout(this.filterCboDirectManager.timer);\r\n this.filterCboDirectManager.strSearch = e.target.value;\r\n this.filterCboDirectManager.timer = setTimeout(() => {\r\n this.filterCboDirectManager.skip = 0;\r\n this.filterCboDirectManager.limit = 50;\r\n this.loadCboDirectManager(true);\r\n }, 700);\r\n }}\r\n onLoadMore={(e) => {\r\n this.filterCboDirectManager.skip = e.skip;\r\n this.filterCboDirectManager.limit = e.limit;\r\n this.loadCboDirectManager();\r\n }}\r\n style={{margin: 0}}\r\n />\r\n \r\n\r\n {Config.lang(\"Ngay_vao_lam\")}\r\n \r\n\r\n this.handleChange(\"DateJoinFrom\", e)}\r\n />\r\n \r\n this.handleChange(\"DateJoinTo\", e)}\r\n />\r\n \r\n\r\n {FormID === \"W51F1001\" &&\r\n <>\r\n {Config.lang(\"Ngay_cap_phat_CCLD_truoc\")}\r\n \r\n\r\n this.handleChange(\"PreUsingPeriodFrom\", e)}\r\n value={PreUsingPeriodFrom}\r\n />\r\n \r\n this.handleChange(\"PreUsingPeriodTo\", e)}\r\n value={PreUsingPeriodTo}\r\n />\r\n \r\n }\r\n {FormID === \"W38F2001\" &&\r\n this.handleChange('NotJoinTrain', {value: checked})}\r\n />\r\n \r\n }\r\n
\r\n
\r\n \r\n
\r\n
this.dataGrid = ref}\r\n totalItems={totalDataGrid}\r\n itemPerPage={this.filter.limit}\r\n skipPerPage={this.filter.skip}\r\n listPerPage={[15, 30, 45, 60]}\r\n dataSource={_dataGrid}\r\n disabled={isSaving}\r\n keyExpr={'EmployeeID'}\r\n gridProps={{\r\n style: {\r\n minHeight: 400,\r\n }\r\n }}\r\n pagerFullScreen={false}\r\n showBorders={false}\r\n columnAutoWidth={true}\r\n typeShort={window.innerWidth < 768}\r\n loading={loading}\r\n height={\"calc(100vh - 180px)\"}\r\n selection={{\r\n allowSelectAll: true,\r\n mode: \"multiple\",\r\n selectAllMode: \"allPages\",\r\n showCheckBoxesMode: \"always\"\r\n }}\r\n allowColumnResizing={true}\r\n selectedRowKey={_selectedRowKeys}\r\n onChangePage={this.onChangePage}\r\n onChangePerPage={this.onChangePerPage}\r\n onSelectionChanged={this.onSelectionChanged}\r\n >\r\n this.cellRenderPopupAction(cellData)}\r\n />\r\n this.cellRenderPopupAction(cellData)}\r\n />\r\n this.cellRenderPopupAction(cellData)}\r\n />\r\n \r\n \r\n
\r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nW09F6000.propTypes = {\r\n FormID: PropTypes.string,\r\n open: PropTypes.bool,\r\n loadParams: PropTypes.object,\r\n\r\n /**\r\n * ProjectID: \"\"\r\n * DutyID: \"\"\r\n * ...\r\n * dataSelected: [{{EmployeeID: \"\", EmployeeName: \"\",...},{EmployeeID: \"\", EmployeeName: \"\",...}]\r\n * selectedRowKeys: [EmpID, EmpID]\r\n * isLoaded: false\r\n */\r\n dataDefaults: PropTypes.object,\r\n\r\n onClose: PropTypes.func,\r\n onChosen: PropTypes.func\r\n};\r\n\r\nexport default compose(connect((state) => ({\r\n getCboStatusWork: state.general.getCboStatusWork,\r\n getCboProjects: state.general.getCboProjects,\r\n getCboDuty: state.general.getCboDuty2\r\n}), (dispatch) => ({\r\n w09f6000Actions: bindActionCreators(W09F6000Actions, dispatch),\r\n generalActions: bindActionCreators(generalActions, dispatch),\r\n})))(W09F6000);\r\n","import React from \"react\";\r\nimport {connect} from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport {bindActionCreators, compose} from \"redux\";\r\nimport {Row} from \"react-bootstrap\";\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\nimport Modal from \"../../../common/modal/modal\";\r\nimport Config from \"../../../../config\";\r\nimport * as W09F4000Actions from \"../../../../redux/W0X/W09F4000/W09F4000_actions\";\r\nimport GridContainer from \"../../../grid-container/grid-container\";\r\nimport {Column} from \"devextreme-react/data-grid\";\r\nimport FormGroup from \"@material-ui/core/FormGroup\";\r\nimport {Typography} from \"@material-ui/core\";\r\nimport UserImage from \"../../../common/user/user-image\";\r\n\r\nconst styles = {\r\n imgAvatar: {\r\n maxWidth: \"100%\",\r\n maxHeight: \"100%\",\r\n objectFit: \"contain\"\r\n },\r\n};\r\n\r\nclass W09F4001Popup extends React.PureComponent {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n loading: false,\r\n dataEmployeeDepartment: {\r\n rows: [],\r\n total: 0\r\n },\r\n };\r\n this.filter = {\r\n skip: 0,\r\n limit: 10\r\n }\r\n\r\n }\r\n loadListEmployeeDepartment = () => {\r\n const { data, isHiddenW09F4010 } = this.props;\r\n const {SearchValue, skip, limit} = this.filter;\r\n const params = {\r\n UserID: Config.profile.UserID,\r\n FormID: isHiddenW09F4010 ? \"W09F4010\" : \"W09F4000\",\r\n Language: Config.language || 84,\r\n SearchValue: SearchValue,\r\n Value: \"\",\r\n OrgChartID: !isHiddenW09F4010 && data && data.OrgChartID ? data.OrgChartID : \"\",\r\n DutyID: isHiddenW09F4010 && data && data.DutyID ? data.DutyID : \"\",\r\n skip: String(skip),\r\n limit: String(limit)\r\n };\r\n this.setState({loading: true});\r\n this.props.w09f4000Actions.getListEmployeeDepartment(params, (error,data) => {\r\n if (error) {\r\n let message = error.message || Config.lang(\"Loi_chua_xac_dinh\");\r\n Config.popup.show(\"INFO\", message);\r\n return false;\r\n }\r\n if(data) {\r\n this.setState({\r\n dataEmployeeDepartment: {\r\n rows: data && data.rows ? data.rows : data,\r\n total: data && data.total ? data.total : 0\r\n }\r\n },() => {\r\n this.setState({loading: false});\r\n });\r\n }\r\n });\r\n };\r\n\r\n componentDidMount = () => {\r\n this.loadListEmployeeDepartment();\r\n };\r\n\r\n onChangePage = page => {\r\n this.filter.skip = page * this.filter.limit;\r\n this.loadListEmployeeDepartment();\r\n };\r\n\r\n onChangePerPage = perPage => {\r\n this.filter.skip = 0;\r\n this.filter.limit = perPage;\r\n this.loadListEmployeeDepartment();\r\n };\r\n\r\n cellRenderEmployeeID = (e) => {\r\n const {data} = e;\r\n\r\n return (\r\n \r\n \r\n {data.EmployeeID} \r\n
\r\n )\r\n\r\n };\r\n\r\n onDetail = e => {\r\n if (e.rowType !== \"header\" && e.rowType !== \"filter\" && e.data) {\r\n window.open(Config.getRootPath() + `W09F2000?EmployeeID=${e.data.EmployeeID}`)\r\n }\r\n };\r\n\r\n render() {\r\n const { open, title, data, isHiddenW09F4010, onClose } = this.props;\r\n const { skip, limit } = this.filter;\r\n const { dataEmployeeDepartment, loading } = this.state;\r\n return (\r\n <>\r\n \r\n \r\n {!isHiddenW09F4010 &&\r\n \r\n \r\n {`${data?.OrgChartID || \"\"} ${data && data.OrgChartName ? \" - \" + data.OrgChartName : \"\"}`}\r\n \r\n \r\n }\r\n {isHiddenW09F4010 &&\r\n \r\n \r\n {`${data?.DutyGroup[0]?.DutyID || \"\"} ${data?.DutyGroup[0]?.DutyName ? \" - \" + data?.DutyGroup[0]?.DutyName : \"\"}`}\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\nW09F4001Popup.propTypes = {\r\n open: PropTypes.bool,\r\n mode: PropTypes.string,\r\n data: PropTypes.any,\r\n onClose: PropTypes.func\r\n};\r\n\r\nexport default compose(\r\n connect(null,\r\n dispatch => ({\r\n w09f4000Actions: bindActionCreators(W09F4000Actions, dispatch),\r\n }), null, { forwardRef: true }\r\n ),\r\n withStyles(styles)\r\n)(W09F4001Popup);\r\n","\r\nimport React from \"react\";\r\nimport {withStyles} from \"@material-ui/core\";\r\nimport OrganizationChart from \"../../../libs/org-chart/orgchart-webcomponents\";\r\nimport Config from \"../../../../config\";\r\nimport {bindActionCreators, compose} from \"redux\";\r\nimport {connect} from \"react-redux\";\r\nimport * as W09F4000Actions from \"../../../../redux/W0X/W09F4000/W09F4000_actions\";\r\nimport {LoadPanel} from \"devextreme-react\";\r\nimport PropTypes from \"prop-types\";\r\nimport _ from \"lodash\";\r\nconst styles = {\r\n wrapperChart: {\r\n overflow: \"auto\",\r\n minHeight: 'calc(100vh - 135px)',\r\n \"& .orgchart\": {\r\n backgroundImage: 'none',\r\n '& ul > li > ul li::before': {\r\n borderTopColor: '#9597A1'\r\n },\r\n '& ul li .oc-node:not(:only-child)::after': {\r\n backgroundColor: '#9597A1'\r\n },\r\n '& ul > li > ul li > .oc-node::before': {\r\n backgroundColor: '#9597A1'\r\n },\r\n '& table':{\r\n margin:'auto'\r\n }\r\n }\r\n },\r\n\r\n};\r\n\r\nclass OrgChart extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n iPermission: 0,\r\n dataOrgChart: [],\r\n loading: false,\r\n };\r\n this.orgChart = null;\r\n this._dataOrgChart = [];\r\n this.dataOrgChart = [];\r\n this.depthOrgChart = props.depth || props.depth === 0 ? props.depth : 3 ;\r\n\r\n }\r\n\r\n loadDataFormOrgChart = () => {\r\n const { OrgChartID, valueExpr, FormID, DutyID, tabID } = this.props;\r\n const params = {\r\n FormID: FormID,\r\n Language: Config.language || 84,\r\n SearchValue: tabID === 0 ? OrgChartID ? OrgChartID : \"\" : DutyID || \"\",\r\n };\r\n this.setState({loading: true});\r\n this.props.w09f4000Actions.getDataForm(params, async (error,data) => {\r\n if (error) {\r\n let message = error.message || Config.lang(\"DHR_Loi_chua_xac_dinh\");\r\n Config.popup.show(\"INFO\", message);\r\n return false;\r\n }\r\n if(data) {\r\n const dataGroup = _.uniqBy(data, valueExpr);\r\n this._dataOrgChart = data; //store data chart original\r\n this.dataOrgChart = dataGroup;\r\n await this._createOrgChart(dataGroup, this.depthOrgChart);\r\n }\r\n });\r\n };\r\n\r\n recursionDataOrgChart = async (parentItem, data, depth, search, parentExpanded = false) => {\r\n const {dataForm} = this.state;\r\n const {valueExpr, parentIDExpr, search: _search} = this.props;\r\n const isSearch = !_.isEmpty(search) || !_.isEmpty(_search);\r\n let _data = data ? data : dataForm;\r\n let items = [];\r\n if (!parentItem) {\r\n items = _data.filter(d => d[parentIDExpr] === d[valueExpr]);\r\n } else {\r\n items = _data.filter(d => d[parentIDExpr] === parentItem[valueExpr]);\r\n\r\n }\r\n let _expanded = false;\r\n let _items = [];\r\n for(let item of items) {\r\n if (!parentItem) delete item[parentIDExpr];\r\n if (isSearch) {\r\n item.level = parentItem ? parentItem.level + 1 : 0;\r\n let check = false;\r\n item.expanded = false;\r\n if (search.includes(item[valueExpr])) {\r\n check = true;\r\n _expanded = true;\r\n item.expanded = true;\r\n }\r\n const {children, expanded} = await this.recursionDataOrgChart(item, _data, depth, search, check);\r\n if (expanded) {\r\n _expanded = true;\r\n item.expanded = true;\r\n if (children && children.length > 0) {\r\n item.children = children;\r\n item.countChildren = children.length;\r\n }\r\n }\r\n if (check || expanded) _items.push(item);\r\n } else {\r\n item.level = parentItem ? parentItem.level + 1 : 0;\r\n const {children} = await this.recursionDataOrgChart(item, _data, depth, search);\r\n item.expanded = item.level < depth - 1;\r\n if (children && children.length > 0) {\r\n item.children = children;\r\n item.countChildren = children.length;\r\n }\r\n }\r\n }\r\n return !parentItem ? items : {children: isSearch ? _items : items, expanded: _expanded};\r\n };\r\n\r\n _parseSearchParams = (search) => {\r\n search = search || this.props.search || null;\r\n const {valueExpr, childrenExpr} = this.props;\r\n let _search = [];\r\n if (!_.isEmpty(search)) {\r\n const data = this._dataOrgChart; //get data chart original\r\n for (let key of Object.keys(search)) {\r\n if (key === valueExpr) {\r\n if (!Array.isArray(search[key])) {\r\n _search.push(search[key]);\r\n } else {\r\n _search = _search.concat(search[key]);\r\n }\r\n } else {\r\n let _data = [];\r\n if (childrenExpr) {\r\n for (let d of data) {\r\n _data = _data.concat(d[childrenExpr]);\r\n }\r\n } else {\r\n _data = data;\r\n }\r\n const listItems = _data.filter(d => {\r\n return Array.isArray(search[key]) ? search[key].includes(d[key]) : search[key] === d[key];\r\n }).map(d => d[valueExpr]);\r\n _search = _search.concat(listItems);\r\n }\r\n }\r\n }\r\n return [...new Set(_search)];\r\n };\r\n\r\n _createOrgChart = async (dataSource, depth = 999) => {\r\n this.setState({loading: true}, async () => {\r\n let _data = JSON.parse(JSON.stringify(dataSource));\r\n const search = this._parseSearchParams();\r\n _data = await this.recursionDataOrgChart(null, _data, depth, search);\r\n const {id, valueExpr, displayExpr, orgChartProps, renderItem} = this.props;\r\n if (this.orgChart && _data.length > 0) {\r\n const obj = {\r\n data: _data[0],\r\n nodeId: valueExpr,\r\n nodeContent: displayExpr,\r\n // zoom: true,\r\n pan: true,\r\n depth: depth ? depth : 999,\r\n nodeTitle: displayExpr,\r\n chartContainer: \"#\" + id,\r\n ...orgChartProps\r\n };\r\n if (renderItem) {\r\n obj.createNode = (node, data) => {\r\n renderItem(node, data, orgchart);\r\n // setTimeout(() => {\r\n // const parent = node.closest(\"table\");\r\n // let line = parent.querySelectorAll(\"tr.lines\");\r\n // line = line && line.length > 0 ? line[0] : null;\r\n // if (line) {\r\n // const td = line.querySelector(\"td\");\r\n // const spanNum = document.createElement(\"div\");\r\n // spanNum.classList.add(\"spanNum\");\r\n // spanNum.innerHTML = ''+data?.countChildren || 0 +' ';\r\n // td.appendChild(spanNum);\r\n // }\r\n // }, 500);\r\n };\r\n }\r\n let orgchart = new OrganizationChart(obj);\r\n this.orgChart.innerHTML = '';\r\n this.orgChart.appendChild(orgchart);\r\n orgchart.addEventListener(\"wheel\", (e) => this.onWheeling(e, orgchart));\r\n this.setState({loading: false});\r\n } else {\r\n this.orgChart.innerHTML = '';\r\n this.setState({loading: false});\r\n }\r\n });\r\n };\r\n\r\n setChartScale = (chart, newScale) => {\r\n let lastTf = window.getComputedStyle(chart).transform;\r\n if (lastTf === 'none') {\r\n chart.style.transform = 'scale(' + newScale + ',' + newScale + ')';\r\n chart.dataset.scale = newScale;\r\n } else {\r\n let matrix = lastTf.split(',');\r\n if (!lastTf.includes('3d')) {\r\n if ((newScale === 0.8 && matrix[3] >= 0.6) || (newScale === 1.2 && matrix[3] <= 2)) {\r\n chart.dataset.scale = matrix[3].trim();\r\n matrix[0] = 'matrix(' + newScale;\r\n matrix[3] = newScale;\r\n chart.style.transform = lastTf + ' scale(' + newScale + ',' + newScale + ')';\r\n }\r\n } else {\r\n chart.dataset.scale = matrix[3].trim();\r\n chart.style.transform = lastTf + ' scale3d(' + newScale + ',' + newScale + ', 1)';\r\n }\r\n }\r\n\r\n }\r\n\r\n onWheeling = (event, orgchart) => {\r\n event.preventDefault();\r\n\r\n let newScale = event.deltaY > 0 ? 0.8 : 1.2;\r\n\r\n this.setChartScale(orgchart, newScale);\r\n };\r\n\r\n refreshChart = (depth = 999) => {\r\n this.setState({loading: true}, () => {\r\n setTimeout(() => {\r\n this.depthOrgChart = depth;\r\n this._createOrgChart(this.dataOrgChart, depth);\r\n }, 100);\r\n });\r\n };\r\n\r\n componentDidMount = async () => {\r\n const {dataSource} = this.props;\r\n if (!dataSource) {\r\n this.loadDataFormOrgChart();\r\n } else {\r\n await this._createOrgChart(dataSource, this.depthOrgChart);\r\n }\r\n\r\n // libs.mouse.dragToScroll(this.orgChart);\r\n };\r\n\r\n render() {\r\n const {classes, id} = this.props;\r\n const {loading} = this.state;\r\n return (\r\n \r\n
\r\n
this.orgChart = ref}\r\n id={id}\r\n className={\"custom-orgchart \" + classes.wrapperChart}/>\r\n
\r\n );\r\n }\r\n\r\n}\r\n\r\nOrgChart.propTypes = {\r\n valueExpr: PropTypes.string,\r\n displayExpr: PropTypes.string,\r\n orgChartProps: PropTypes.object,\r\n dataSource: PropTypes.any,\r\n id: PropTypes.string.isRequired,\r\n childrenExpr: PropTypes.string,\r\n\r\n renderItem: PropTypes.func,\r\n};\r\n\r\nexport default compose(connect(null,\r\n (dispatch) => ({\r\n w09f4000Actions: bindActionCreators(W09F4000Actions, dispatch),\r\n }), null, { forwardRef: true }), withStyles(styles))(OrgChart);\r\n","import React, { Component } from \"react\";\r\nimport { bindActionCreators, compose } from \"redux\";\r\nimport { connect } from \"react-redux\";\r\n\r\nimport Config from \"../../../../config\";\r\nimport * as mainActions from \"../../../../redux/main/main_actions\";\r\n\r\nimport _ from \"lodash\";\r\nimport moment from \"moment\";\r\nimport { browserHistory } from \"react-router\";\r\nimport { useTheme } from \"diginet-core-ui/theme\";\r\nimport {\r\n Accordion,\r\n AccordionSummary,\r\n AccordionDetails,\r\n Badge,\r\n ButtonIcon,\r\n Popover,\r\n PopoverBody,\r\n TabContainer,\r\n TabItem,\r\n TabHeader,\r\n CircularProgress,\r\n Icon,\r\n Row,\r\n Col,\r\n Typography,\r\n Button,\r\n Image,\r\n} from \"diginet-core-ui/components\";\r\nconst { spacing } = useTheme();\r\n\r\nclass W09F7000 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n isOpenReminder: false,\r\n loadingReminderMaster: false,\r\n loadingReminderDetails: {},\r\n tabValue: 0,\r\n expanded: {},\r\n };\r\n this.scrollTypeReminder = 0;\r\n this.paramsLoadReminder = {\r\n Master: {\r\n limit: 20,\r\n skip: 0,\r\n },\r\n Details: {\r\n limit: 10,\r\n skip: 0,\r\n AlertBaseID: \"\",\r\n },\r\n };\r\n }\r\n\r\n getWidthText = (text = \"\", fontSize = 0) => {\r\n this.element = document.createElement(\"canvas\");\r\n this.context = this.element.getContext(\"2d\");\r\n this.context.font = `${fontSize}px Nunito sans-serif`;\r\n return this.context.measureText(text).width;\r\n };\r\n\r\n handleScroll = (e, type) => {\r\n const { dataListReminderMaster, dataListReminderDetails } = this.props;\r\n const target = e.target;\r\n const typeLoadReminder = [\"Master\", \"Details\"];\r\n const getTypeReminder = typeLoadReminder[type];\r\n const getDataListReminder = !!type ? dataListReminderDetails : dataListReminderMaster;\r\n if (_.eq(_.ceil(target.scrollHeight - target.scrollTop), target.clientHeight)) {\r\n if (!_.gte(_.size(getDataListReminder.rows), getDataListReminder.total)) {\r\n this.paramsLoadReminder[getTypeReminder].skip += this.paramsLoadReminder[getTypeReminder].limit;\r\n this.loadListReminder(type);\r\n }\r\n }\r\n };\r\n\r\n loadListReminder = (type = 0) => {\r\n const { tabValue, expanded } = this.state;\r\n const tabValueString = tabValue === 0 ? \"\" : tabValue === 1 ? \"today\" : \"delays\";\r\n const { Details } = this.paramsLoadReminder;\r\n const typeLoadReminder = [\"Master\", \"Details\"];\r\n const getAlertBaseIDCurrent = _.get(Details, \"AlertBaseID\", \"\");\r\n const getTypeReminder = typeLoadReminder[type];\r\n const keyLoading = `loadingReminder${getTypeReminder}`;\r\n const apiActions = `getListReminder${getTypeReminder}`;\r\n this.setState({ [keyLoading]: !!type ? { [getAlertBaseIDCurrent]: true } : true });\r\n this.props.mainActions[apiActions](tabValueString, this.paramsLoadReminder[getTypeReminder], err => {\r\n if (!!type) this.setState({ expanded: { ...expanded, [getAlertBaseIDCurrent]: true } });\r\n setTimeout(() => {\r\n this.setState({ [keyLoading]: !!type ? { [getAlertBaseIDCurrent]: false } : false });\r\n }, 250);\r\n if (err) {\r\n Config.popup.show(\"ERROR\", err);\r\n return false;\r\n }\r\n });\r\n };\r\n\r\n onClickIgnoreReminder = dataParams => {\r\n this.props.mainActions.ignoreReminder(dataParams, err => {\r\n if (err) {\r\n Config.popup.show(\"ERROR\", err);\r\n return false;\r\n }\r\n Config.notify.show(\"success\", Config.lang(\"Bo_qua_thong_bao_thanh_cong\"), 3000);\r\n this.props.mainActions.setReminderDetailsEmpty();\r\n this.loadListReminder(1);\r\n });\r\n };\r\n\r\n onClickVoucherAlert = data => {\r\n const { toggleMenuESS } = this.props;\r\n toggleMenuESS && toggleMenuESS(Number(data.Type ?? 0), false);\r\n browserHistory.push({\r\n pathname: Config.getRootPath() + _.get(data, \"FormID\", \"\"),\r\n state: { voucher_id: _.get(data, \"KeyID\", \"\") },\r\n });\r\n };\r\n\r\n onChangeTab = (_, tabValue) => {\r\n this.paramsLoadReminder = {\r\n Master: {\r\n limit: 20,\r\n skip: 0,\r\n },\r\n Details: {\r\n limit: 10,\r\n skip: 0,\r\n AlertBaseID: \"\",\r\n },\r\n };\r\n this.setState({ tabValue, expanded: {} }, () => {\r\n this.props.mainActions.setReminderDetailsEmpty();\r\n this.props.mainActions.setReminderMasterEmpty();\r\n this.loadListReminder();\r\n });\r\n };\r\n\r\n onClickExpand = (AlertBaseID = \"\", total) => {\r\n if(!Number(total)) return;\r\n const { expanded } = this.state;\r\n const { Details } = this.paramsLoadReminder;\r\n if (Details.AlertBaseID !== AlertBaseID) {\r\n this.paramsLoadReminder.Details = {\r\n skip: 0,\r\n limit: 10,\r\n AlertBaseID,\r\n };\r\n this.setState({ expanded: { ..._.mapValues(expanded, () => false), [AlertBaseID]: true } }, () => {\r\n setTimeout(() => {\r\n this.props.mainActions.setReminderDetailsEmpty();\r\n this.loadListReminder(1);\r\n }, 80);\r\n });\r\n } else {\r\n this.setState({ expanded: { ...expanded, [AlertBaseID]: !expanded[AlertBaseID] } });\r\n }\r\n };\r\n\r\n render() {\r\n const { tabValue, loadingReminderMaster, loadingReminderDetails, expanded } = this.state;\r\n const { dataListReminderMaster, dataListReminderDetails } = this.props;\r\n return (\r\n
{\r\n const { Master } = this.paramsLoadReminder;\r\n if (dataListReminderMaster.total > 0) {\r\n Master.skip = 0;\r\n Master.limit = 20;\r\n this.loadListReminder();\r\n }\r\n }}\r\n >\r\n \r\n \r\n \r\n {Config.lang(\"Nhac_nho1\")}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n {\r\n if (!_.includes(expanded, true)) {\r\n this.handleScroll(e, 0);\r\n }\r\n }}\r\n style={{ maxHeight: 395, overflowY: \"scroll\" }}\r\n >\r\n {!loadingReminderMaster &&\r\n dataListReminderMaster?.rows?.map((item, i) => {\r\n const getAlertBaseID = _.get(item, \"AlertBaseID\", \"\");\r\n const loadingListReminderDetails = _.get(loadingReminderDetails, getAlertBaseID, false);\r\n return (\r\n this.onClickExpand(getAlertBaseID, item?.totalDetail)}\r\n >\r\n \r\n \r\n \r\n {item?.AlertBaseName}\r\n \r\n \r\n ({item?.totalDetail ?? 0})\r\n \r\n
\r\n \r\n \r\n this.handleScroll(e, 1)}\r\n style={{\r\n maxHeight: 270,\r\n overflowY: \"scroll\",\r\n overflowX: \"hidden\",\r\n }}\r\n >\r\n \r\n {dataListReminderDetails?.rows?.map((itemAlert, iAlert) => {\r\n const isOutOfDate = moment().isAfter(itemAlert?.validDate);\r\n return (\r\n
this.onClickVoucherAlert(itemAlert)}\r\n >\r\n \r\n \r\n
\r\n \r\n {itemAlert?.VoucherDes}:\r\n \r\n
\r\n
{itemAlert?.VoucherNo} \r\n
\r\n \r\n {Config.convertDate(\r\n itemAlert?.ValidDate,\r\n \"\",\r\n \"DD/MM/YYYY HH:mm\"\r\n )}\r\n \r\n {isOutOfDate && (\r\n <>\r\n \r\n .\r\n \r\n \r\n {Config.lang(\"Qua_han\")}\r\n \r\n \r\n )}\r\n
\r\n
\r\n this.onClickIgnoreReminder(itemAlert)\r\n }\r\n />\r\n