require
;\r\n const {\r\n label,\r\n name,\r\n form,\r\n hint,\r\n type,\r\n placeholder,\r\n autoFocus,\r\n autoComplete,\r\n inputProps,\r\n disable,\r\n errorMessage,\r\n required,\r\n readonly,\r\n size,\r\n startAdornment,\r\n } = this.props;\r\n\r\n return (\r\n \r\n\r\n //
\r\n // );\r\n // }\r\n\r\n\r\n","import React, { Fragment, useState, useEffect } from 'react'\r\nimport { withStyles, Theme, createStyles, lighten } from '@material-ui/core/styles';\r\nimport { makeStyles, Table, TableHead, TableBody, TableRow, TableCell, Checkbox, Typography, Toolbar, Tooltip, IconButton, TableSortLabel, TableContainer, Paper, TablePagination, FormControlLabel, Switch, Grid } from '@material-ui/core'\r\nimport clsx from 'clsx';\r\nimport DeleteIcon from '@material-ui/icons/Delete';\r\nimport FilterListIcon from '@material-ui/icons/FilterList';\r\n\r\nexport function descendingComparator\r\n
\r\n\r\n {/* reponsive login */}\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\n {this.TextFieldProps.InputLabelProps.shrink=true}}\r\n value={this.value()}\r\n onChange={this.handleSelect}\r\n blur={this.handleSelectoBlurMultiSelect}\r\n inputId={name}\r\n isDisabled={disable || false}\r\n placeholder={placeholder || \"\"}\r\n isMulti={mode === \"multiple\"}\r\n isClearable={isClearable}\r\n loadingMessage={() => i18n(\"autocomplete.loading\")}\r\n noOptionsMessage={() => i18n(\"autocomplete.noOptions\")}\r\n tabIndex=\"999\"\r\n />\r\n );\r\n }\r\n}\r\n\r\nSelectFormItemNotFast.defaultProps = {\r\n required: false,\r\n isClearable: true,\r\n};\r\n\r\nSelectFormItemNotFast.propTypes = {\r\n form: PropTypes.object.isRequired,\r\n name: PropTypes.string.isRequired,\r\n options: PropTypes.array.isRequired,\r\n label: PropTypes.string,\r\n hint: PropTypes.string,\r\n required: PropTypes.bool,\r\n errorMessage: PropTypes.string,\r\n mode: PropTypes.string,\r\n isClearable: PropTypes.bool,\r\n onChangeMultiSelect: PropTypes.func,\r\n onBlurMultiSelect: PropTypes.func\r\n};\r\n\r\nclass SelectFormItem extends Component {\r\n render() {\r\n return (\r\n \r\n {({ form }) => (\r\n\r\n {\r\n form.setFieldValue(name, value);\r\n form.setFieldTouched(name);\r\n if (handleChange) handleChange(value)\r\n }}\r\n {...inputProps}\r\n renderInput={(props) => (\r\n \r\n (\r\n \r\n {legend && {legend} }\r\n \r\n {\r\n form.setFieldValue(name, !!e.target.checked);\r\n form.setFieldTouched(name);\r\n if (onChangedCallback != undefined) {\r\n onChangedCallback(!!e.target.checked);\r\n }\r\n }}\r\n color={color || \"secondary\"}\r\n {...inputProps}\r\n />\r\n }\r\n label={label}\r\n />\r\n \r\n {formHelperText && (\r\n \r\n {formHelperText}\r\n \r\n )}\r\n \r\n );\r\n }\r\n}\r\n\r\nCheckboxFormItemNotFast.defaultProps = {};\r\n\r\nCheckboxFormItemNotFast.propTypes = {\r\n form: PropTypes.object.isRequired,\r\n name: PropTypes.string.isRequired,\r\n required: PropTypes.bool,\r\n label: PropTypes.string,\r\n legend: PropTypes.string,\r\n hint: PropTypes.string,\r\n color: PropTypes.string,\r\n errorMessage: PropTypes.string,\r\n inputProps: PropTypes.object,\r\n onChangedCallback: PropTypes.func,\r\n};\r\n\r\nclass CheckboxFormItem extends Component {\r\n render() {\r\n return (\r\n (\r\n {\r\n form.setFieldValue(name, value);\r\n form.setFieldTouched(name);\r\n if (onChangedCallback != undefined) {\r\n onChangedCallback(value);\r\n }\r\n }}\r\n value={form.values[name] || null}\r\n placeholder={placeholder || undefined}\r\n autoFocus={autoFocus || undefined}\r\n autoComplete={autoComplete || undefined}\r\n maxDate={maxDate||undefined}\r\n onClose={(e)=> {\r\n if(onCloseCallback!=undefined){\r\n onCloseCallback(e);\r\n }\r\n }}\r\n // InputLabelProps={{\r\n // shrink: true,\r\n // }}\r\n // autoOk\r\n {...inputProps}\r\n renderInput={(props) => (\r\n \r\n (\r\n \r\n {label} \r\n\r\n \r\n \r\n {AllowCheckAll && (\r\n \r\n this.handleSelectAll(e)}\r\n // color=\"primary\"\r\n {...inputProps}\r\n />\r\n }\r\n label={labelAll ? labelAll : \"All \" + label}\r\n />\r\n \r\n )}\r\n\r\n {dataProvider.map((row, index) => (\r\n\r\n \r\n \r\n {row.label}\r\n {showComment && {ParseHtml(row[\"comment\"])} \r\n }>\r\n \r\n ))}\r\n \r\n \r\n\r\n {\r\n formHelperText && (\r\n \r\n {formHelperText}\r\n \r\n )\r\n }\r\n \r\n );\r\n }\r\n}\r\n\r\nCheckboxListFormItemNotFast.defaultProps = {};\r\n\r\nCheckboxListFormItemNotFast.propTypes = {\r\n form: PropTypes.object.isRequired,\r\n name: PropTypes.string.isRequired,\r\n required: PropTypes.bool,\r\n label: PropTypes.string,\r\n hint: PropTypes.string,\r\n errorMessage: PropTypes.string,\r\n inputProps: PropTypes.object,\r\n dataProvider: PropTypes.array,\r\n AllowCheckAll: PropTypes.bool,\r\n labelAll: PropTypes.string,\r\n defaultAll: PropTypes.bool,\r\n};\r\n\r\nclass CheckboxListFormItem extends Component {\r\n state = {\r\n test: false,\r\n };\r\n\r\n UNSAFE_componentWillReceiveProps(next) {\r\n if (this.props.dataProvider !== next.dataProvider) {\r\n this.setState({ test: this.state.test ? false : true });\r\n }\r\n }\r\n render() {\r\n return (\r\n (\r\n {\r\n form.setFieldValue(name, event.target.value);\r\n }}\r\n onFocus={(event) => {\r\n form.setFieldTouched(name);\r\n }}\r\n value={form.values[name] || \"\"}\r\n placeholder={placeholder || undefined}\r\n autoFocus={autoFocus || undefined}\r\n autoComplete={autoComplete || undefined}\r\n InputLabelProps={{\r\n //shrink: true,\r\n \r\n }}\r\n multiline\r\n rows={rows}\r\n error={!!FormErrors.displayableError(form, name, errorMessage)}\r\n helperText={\r\n FormErrors.displayableError(form, name, errorMessage) || hint\r\n }\r\n InputProps={inputProps}\r\n disabled={disabled}\r\n {...inputProps}\r\n />\r\n );\r\n }\r\n}\r\n\r\nTextAreaFormItemNotFast.defaultProps = {\r\n type: \"text\",\r\n required: false,\r\n};\r\n\r\nTextAreaFormItemNotFast.propTypes = {\r\n form: PropTypes.object.isRequired,\r\n name: PropTypes.string.isRequired,\r\n required: PropTypes.bool,\r\n type: PropTypes.string,\r\n label: PropTypes.string,\r\n hint: PropTypes.string,\r\n autoFocus: PropTypes.bool,\r\n prefix: PropTypes.string,\r\n placeholder: PropTypes.string,\r\n errorMessage: PropTypes.string,\r\n inputProps: PropTypes.object,\r\n disabled: PropTypes.bool,\r\n};\r\n\r\nclass TextAreaFormItem extends Component {\r\n render() {\r\n \r\n return (\r\n (FileDataErr).Where(w => w.id !== id).ToArray());\r\n };\r\n const deleteFileCompleted = (id) => {\r\n DialogConfirmDelete(() => {\r\n let q = new LINQ(FileData).Where(w => w.nID === id).FirstOrDefault();\r\n if (q != null) {\r\n if (q.IsNewFile == true) {\r\n let obj = JSON.stringify(q);\r\n AxiosPost(\"UploadFile/DeleteFile\", q, (response) => {\r\n ResultDeleteAPI(false, response, null, () => {\r\n\r\n let f = new LINQ(FileData).Where(w => w.nID !== id).ToArray();\r\n setFileData([...f]);\r\n\r\n })\r\n }, () => { }, BlockUI, UnBlockUI)\r\n } else {\r\n q.IsDelete = true;\r\n setFileData([...FileData]);\r\n Swal.close();\r\n }\r\n }\r\n\r\n });\r\n };\r\n //#endregion\r\n\r\n useEffect(() => {\r\n setFileData(defaultFileData);\r\n }, []);\r\n\r\n //#region Updata FileData\r\n useEffect(() => {\r\n arrData(FileData);\r\n }, [FileData]);\r\n\r\n useEffect(() => {\r\n if (isClearFile) {\r\n setFileData([]);\r\n setFileDataErr([]);\r\n }\r\n if (ResultClearFile != undefined) ResultClearFile(false);\r\n }, [isClearFile]);\r\n //#endregion\r\n\r\n const onUpload = useCallback(() => {\r\n if (selectedFileCompleted.length) {\r\n let idex = 0;\r\n\r\n selectedFileCompleted.forEach(async file => {\r\n idex++;\r\n BlockUI();\r\n const formPayload = new FormData()\r\n formPayload.append('file', file)\r\n formPayload.append(\"sFolder\", folder);\r\n try {\r\n await axios({\r\n baseURL: REACT_APP_API_URL_File,\r\n url: \"api/UploadFile/Upload\",\r\n method: 'post',\r\n data: formPayload,\r\n onUploadProgress: progress => {\r\n const { loaded, total } = progress\r\n const percentageProgress = Math.floor((loaded / total) * 100)\r\n },\r\n }).then(function (response) {\r\n\r\n let d = response.data;\r\n if (d.sStatusUpload === \"Error\") {\r\n SwAlert.Error(AlertTitle.Error, d.sMsg, () => { });\r\n } else {\r\n if (d.sStatusUpload == Process_System.process_Success) {\r\n\r\n if (d.FileData != null) {\r\n let fi = d.FileData;\r\n let MaxID = FileData.length > 0 ? new LINQ(FileData).Max(m => m.nID) + 1 : 1;\r\n let obj = {\r\n nID: MaxID,\r\n sPath: fi.sPath,\r\n sSystemFileName: fi.sSystemFileName,\r\n sFileName: fi.sFileName,\r\n sSaveToPath: fi.sSaveToPath,\r\n sUrl: fi.sUrl,\r\n IsDelete: fi.IsDelete,\r\n IsNewFile: fi.IsNewFile,\r\n sFileType: fi.sFileType\r\n };\r\n FileData.push(obj);\r\n setFileData(FileData);\r\n } else {\r\n if (d.sMsg != null && d.sMsg != \"\") {\r\n SwAlert.Error(AlertTitle.Error, d.sMsg, () => { });\r\n }\r\n }\r\n } else if (d.sStatusUpload == Process_System.process_Error) {\r\n var rand = 10 + (Math.random() * 1);\r\n let obj = {\r\n id: rand,\r\n name: file.name,\r\n size: file.size,\r\n msg: \"file error\"\r\n }\r\n FileDataErr.push(obj);\r\n setFileDataErr([...FileDataErr])\r\n }\r\n if (selectedFileCompleted.length === idex) setselectedFileCompleted([]);\r\n }\r\n\r\n UnBlockUI();\r\n }).catch(function (error) {\r\n setselectedFileCompleted([]);\r\n UnBlockUI();\r\n SwAlert.Error(AlertTitle.Error, error, () => { });\r\n }).then(function () {\r\n setselectedFileCompleted([]);\r\n UnBlockUI();\r\n });\r\n } catch (error) {\r\n }\r\n })\r\n }\r\n }, [selectedFileCompleted, FileData]);\r\n\r\n const TableErr = useCallback(() => {\r\n return (\r\n {props.children} )\r\n}\r\nconst StyledButton = withStyles((theme: Theme) =>\r\n createStyles({\r\n root: {\r\n fontFamily: \"Prompt\",\r\n borderRadius: 0,\r\n margin: theme.spacing(1),\r\n textTransform: \"none\"\r\n }\r\n }),\r\n)(Button);\r\nconst useStylesIconButton = makeStyles((theme: Theme) =>\r\n createStyles({\r\n root: {\r\n '& > *': {\r\n margin: theme.spacing(1),\r\n }\r\n },\r\n extendedIcon: {\r\n marginRight: theme.spacing(1),\r\n }\r\n }),\r\n);\r\nexport const MuiButtonAddIcon = (props) => {\r\n const classes = useStylesIconButton();\r\n const { text } = props;\r\n return (\r\n \r\n \r\n )\r\n}\r\nexport const MuiButtonClear = (props) => {\r\n const classes = useStyles();\r\n return (\r\n \r\n \r\n \r\n \r\n\r\n )\r\n}\r\n\r\nexport const MuiIconButtonEdite = (props) => {\r\n const { type } = props;\r\n const classes = useStyles();\r\n return (\r\n \r\n \r\n \r\n \r\n\r\n )\r\n}\r\n\r\n\r\nexport const EventColorCompronent = (props) => {\r\n const { type, EventColorID, ...OtherProps } = props;\r\n const classes = useStyles();\r\n return (\r\n \r\n \r\n\r\n \r\n \r\n\r\n )\r\n}\r\nexport const SecurityLevelColorCompronent = (props) => {\r\n const { type, color, levelName, ...OtherProps } = props;\r\n const classes = useStyles();\r\n return (\r\n \r\n \r\n\r\n \r\n \r\n\r\n )\r\n}\r\n\r\nexport const MuiIconButtonItem = (props) => {\r\n const { type, rowCount, ...OtherProps } = props;\r\n const classes = useStyles();\r\n const StyledBadge = withStyles((theme: Theme) =>\r\n createStyles({\r\n badge: {\r\n right: -3,\r\n top: 13,\r\n border: `2px solid ${theme.palette.background.paper}`,\r\n padding: '0 4px',\r\n },\r\n }),\r\n )(Badge);\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n )\r\n}\r\n\r\nexport const MuiIconButtonMessage = (props) => {\r\n const { type, EventColorID } = props;\r\n const classes = useStyles();\r\n return (\r\n \r\n \r\n \r\n \r\n\r\n )\r\n}\r\n\r\n\r\nexport const MuiIconCheckBoxDelete = (props) => {\r\n const { ...OtherProps } = props;\r\n const classes = useStyles();\r\n return (\r\n \r\n \r\n\r\n )\r\n}\r\n\r\n\r\nexport const MuiButtonSubmit = (props) => {\r\n const { type, onClick, ...OtherProps } = props;\r\n const classes = useStyles();\r\n return (\r\n \r\n \r\n \r\n )\r\n}\r\n\r\nconst FromEventOperation = (props) => {\r\n const { BlockUI, UnBlockUI } = FnBlock_UI();\r\n const classes = useStyles();\r\n const [isShoweTime, setisShoweTime] = useState(false);\r\n const [CheckTimeEndSelect, setCheckTimeEndSelect] = useState(false);\r\n const [lstSubEventTypeData, setlstSubEventType] = useState([] as any[]);\r\n const [isLoad, setOnLoad] = useState({ isLoadSubEventType: true });\r\n\r\n const {\r\n onClose,\r\n lstEventGroup,\r\n lstCompany,\r\n lstArea,\r\n lstEventType,\r\n editeData,\r\n lstWorkingTime,\r\n lstSecurityLevel,\r\n Mode } = props;\r\n // const [SecurityLevelOLO, setSecurityLevelOLO] = useState(editeData.SecurityLevel + \"\");\r\n const handleClose = () => {\r\n onClose(\"\");\r\n };\r\n const [isSecurityLevelPass, setSecurityLevelPass] = useState(editeData!=null?editeData.isLevelPass:true);\r\n const [inFromEventReport, setFromEventReport] = useState({\r\n nEventID: editeData != null ? editeData.nEventID : null,\r\n EventGroup: editeData != null ? editeData.nEventGroupID + \"\" : \"\",\r\n Company: editeData != null ? editeData.nCompanyID + \"\" : \"\",\r\n Area: editeData != null ? editeData.nAreaID + \"\" : \"\",\r\n EventDate: editeData != null ? editeData.dEventDate : \"\",\r\n EventType: editeData != null ? editeData.nEventTypeID + \"\" : \"\",\r\n SubEventType: editeData != null && editeData.nSubEventTypeID != null ? editeData.nSubEventTypeID + \"\" : \"\",\r\n EventTimeStrat: editeData != null ? editeData.sEventStartTime != \"\" ? new Date(\"2020/01/11 \" + editeData.sEventStartTime) : \"\" : \"\",\r\n EventTimeEnd: editeData != null ? editeData.sEventEndTime != \"\" ? new Date(\"2020/01/11 \" + editeData.sEventEndTime) : \"\" : \"\",\r\n CheckTimeEnd: editeData != null ? editeData.cEventNotEnd === \"Y\" ? true : false : false,\r\n WorkingTime: editeData != null && editeData.lstWorkingTime != null ? new LINQ(editeData.lstWorkingTime).Select(s => s + \"\").ToArray() : [],\r\n Description: editeData != null ? editeData.sEventDesc : \"\",\r\n ApproveRemark: editeData != null ? editeData.sApproveRemark === null ? \"\" : editeData.sApproveRemark + \"\" : \"\",\r\n FileData: editeData != null ? editeData.lstFileData : \"\",\r\n SecurityLevel: editeData != null && editeData.nLevelID != null ? editeData.nLevelID + \"\" : \"\",\r\n SecurityDescription: editeData != null ? editeData.sSecurityDesc : \"\",\r\n Status: editeData != null && editeData.nStatus != null ? editeData.nStatus : 1,\r\n\r\n });\r\n const [ActionMode, setActionMode] = useState(\"\");\r\n const validateOperation = yup.object().shape({\r\n EventGroup: yup.string().required(MsgValidate.PleaseSpecify + 'Event Group'),\r\n Company: yup.string().required(MsgValidate.PleaseSpecify + 'Company'),\r\n Area: yup.string().required(MsgValidate.PleaseSpecify + 'Area'),\r\n EventDate: yup.date().typeError(\"Inactive Event Date\").required(MsgValidate.PleaseSpecify + ' Date'),\r\n WorkingTime: yup.string().when(\"EventGroup\", (val) => (val === \"2\"\r\n ? yup.array().required(MsgValidate.PleaseSpecify + 'Working Time')\r\n : yup.array().notRequired())),\r\n EventType: yup.string().required(MsgValidate.PleaseSpecify + ' Event Type'),\r\n SubEventType: lstSubEventTypeData.length > 0 ? yup.string().required(MsgValidate.PleaseSpecify + ' Sub Event Type') : \"\",\r\n EventTimeStrat:\r\n isShoweTime ?\r\n yup.date().typeError(MsgValidate.PleaseSpecify + ' Start Time')\r\n .required(MsgValidate.PleaseSpecify + ' Start Time')\r\n .when(\"EventDate\", (val) => (checkDate(val)\r\n ? \r\n yup.date().typeError(MsgValidate.PleaseSpecify + ' Start Time').required(MsgValidate.PleaseSpecify + ' Start Time').max(new Date(), \"ไม่สามารถระบุเวลาล่วงหน้าได้\")\r\n :\r\n yup.date().typeError(MsgValidate.PleaseSpecify + ' Start Time').required(MsgValidate.PleaseSpecify + ' Start Time')\r\n ))\r\n : \"\",\r\n EventTimeEnd: isShoweTime ? yup.date().typeError(MsgValidate.PleaseSpecify + ' End Time').required(MsgValidate.PleaseSpecify + ' End Time') : \"\",\r\n Description: isShoweTime ? yup.string().max(4000, MsgValidateMaxLength(\"Description\", 4000)).required(MsgValidate.PleaseSpecify + ' Description') : yup.string().max(4000, MsgValidateMaxLength(\"Description\", 4000)),\r\n ApproveRemark: ActionMode === \"Reject\" ? Mode === \"Approve\" ? yup.string().required('กรุณาระบุสาเหตุในการปฏิเสธรายงาน (Please Specify Reject Reason)').max(4000, MsgValidateMaxLength(\"Reject Reason\", 4000)) : \"\" : \"\",\r\n SecurityLevel: yup.string().when(\"EventGroup\", (val) => (val === \"3\"\r\n ? yup.string().required(MsgValidate.PleaseSpecify + 'Security Level')\r\n : yup.string().notRequired())),\r\n SecurityDescription: yup.string().when(\"EventGroup\", (val) => (val === \"3\" ? \r\n isSecurityLevelPass === false ?\r\n yup.string().max(4000, MsgValidateMaxLength(\"Security Description\", 4000)).required(MsgValidate.PleaseSpecify + ' Security Description') \r\n : yup.string().max(4000, MsgValidateMaxLength(\"Security Description\", 4000)): yup.string().notRequired())),\r\n });\r\n\r\n const checkDate = (Eventdate_) => {\r\n var today = new Date();\r\n var dd_now = today.getDate();\r\n var mm_now = today.getMonth() + 1;\r\n var yyyy_now = today.getFullYear();\r\n var dateNow_ = new Date(yyyy_now, mm_now, dd_now);\r\n\r\n var today_Event = Eventdate_; //|| new Date();\r\n var dd_Event = today_Event.getDate();\r\n var mm_Event = today_Event.getMonth() + 1;\r\n var yyyy_Event = today_Event.getFullYear();\r\n var dateEvent_ = new Date(yyyy_Event, mm_Event, dd_Event);\r\n\r\n var res = false;\r\n if (dateEvent_ < dateNow_) {\r\n res = false;\r\n } else if (dd_now === dd_Event && mm_now === mm_Event &&yyyy_now === yyyy_Event ) {\r\n res = true;\r\n }\r\n return res;\r\n }\r\n\r\n const onSave = (values) => {\r\n ///0 =Edite\r\n ///1 =Approve\r\n ///2 =Reject\r\n let nMode = 0;\r\n let nPass = 0;\r\n if (ActionMode == \"Reject\") {\r\n nMode = 2;\r\n if (values.ApproveRemark === \"\") {\r\n nPass = 1;\r\n }\r\n } else if (ActionMode === \"Approve\") {\r\n nMode = 1;\r\n } else {\r\n nMode = 0;\r\n }\r\n if (nPass === 0) {\r\n let obj = {\r\n nEventID: values.nEventID,\r\n nEventGroupID: +values.EventGroup,\r\n nCompanyID: +values.Company,\r\n nEventTypeID: +values.EventType,\r\n nSubEventTypeID: values.SubEventType === \"\" ? null : +values.SubEventType,\r\n nAreaID: +values.Area,\r\n sEventDate: dateFormat(values.EventDate, \"dd/mm/yyyy\"),\r\n sEventStartTime: isShoweTime ? dateFormat(values.EventTimeStrat, \"HH:MM\") : \"\",\r\n sEventEndTime: isShoweTime ? dateFormat(values.EventTimeEnd, \"HH:MM\") : \"\",\r\n cEventNotEnd: values.CheckTimeEnd ? \"Y\" : \"N\",\r\n sEventDesc: values.Description,\r\n nLevelID: values.SecurityLevel !== \"\" ? +values.SecurityLevel : null,\r\n sSecurityDesc: values.SecurityDescription,\r\n lstWorkingTime: new LINQ(values.WorkingTime).Select(s => (+s)).ToArray(),\r\n sApproveRemark: values.ApproveRemark,\r\n nStatus: values.Status,\r\n lstFileData: values.FileData,\r\n nMode: nMode,\r\n };\r\n\r\n DialogConfirm(() => {\r\n AxiosPost(sController + \"/SaveData\", obj, (response) => {\r\n ResultAPI(false, response, nMode === 1 ? \"Data is Approved.\" : nMode === 2 ? \"Data is Rejected.\" : null, () => {\r\n onClose(\"1\");\r\n })\r\n }, () => { }, BlockUI, UnBlockUI)\r\n }, null, nMode === 1 ? \"Do you want to Approve this data?\" : nMode === 2 ? \"Do you want to Reject this data?\" : \"\");\r\n }\r\n };\r\n\r\n const onEventType = (EventType, formProps) => {\r\n if (EventType !== \"\") {\r\n let Node = 0;\r\n let q = new LINQ(lstEventType).Where(f => f.value === EventType).FirstOrDefault();\r\n Node = q != undefined && q.nEventColor;\r\n setisShoweTime(Node === 3 ? false : true);\r\n if (isLoad.isLoadSubEventType) {\r\n GetSubEventType(EventType, formProps);\r\n }\r\n }\r\n };\r\n\r\n const GetSubEventType = (EventType, formProps) => {\r\n let obj = {\r\n 'nEventType': +EventType\r\n };\r\n if (!isLoad.isLoadSubEventType) { formProps.values.SubEventType = \"\" }\r\n AxiosPost(sController + \"/GetSubEventType\", obj, (response) => {\r\n ResultAPI(false, response, null, () => {\r\n setlstSubEventType(response);\r\n setOnLoad({ ...isLoad, isLoadSubEventType: false });\r\n })\r\n }, () => { }, BlockUI, UnBlockUI)\r\n };\r\n\r\n const EventTimeEndControl = useCallback((Props) => {\r\n const { formProps } = Props;\r\n return (\r\n \r\n \r\n )\r\n }, [CheckTimeEndSelect, Mode]);\r\n\r\n const RemarkEventType = (Props) => {\r\n const { formProps } = Props;\r\n let Node = \"\";\r\n if (formProps.values.SubEventType != \"\") {\r\n let q = new LINQ(lstSubEventTypeData).Where(f => f.value === formProps.values.SubEventType).FirstOrDefault();\r\n Node = q != undefined && q.sRemark;\r\n } else {\r\n let q = new LINQ(lstEventType).Where(f => f.value === formProps.values.EventType).FirstOrDefault();\r\n Node = q != undefined && q.sRemark;\r\n }\r\n return (\r\n \r\n {Node != \"\" && }\r\n \r\n )\r\n };\r\n const [openLe, setOpenLe] = React.useState({ Remark: false, sNote: \"\" });\r\n\r\n const handleCloseLe = (value: string) => {\r\n setOpenLe({ ...openLe, Remark: false, sNote: \"\" });\r\n };\r\n\r\n const checkLevel = (nSecurityLevelID, formProps) => {\r\n let qbj = {\r\n nEventID: +formProps.values.nEventID,\r\n nAreaID: +formProps.values.Area,\r\n nLevelID: +nSecurityLevelID,\r\n sEventDate:dateFormat(formProps.values.EventDate, \"dd/mm/yyyy\")\r\n };\r\n AxiosPost(sController + \"/CheclSecurity\", qbj, (response) => {\r\n ResultAPI(false, response, null, () => {\r\n if (response.isPass == false) {\r\n setOpenLe({ ...openLe, Remark: true, sNote: \"เนื่องจากมีการปรับเปลี่ยนระดับ Security Level โปรดระบุเหตุผลของการปรับระดับการเตือนภัย\"});\r\n\r\n setSecurityLevelPass(false);\r\n } else {\r\n setSecurityLevelPass(true);\r\n }\r\n })\r\n }, () => { }, BlockUI, UnBlockUI)\r\n };\r\n\r\n return (\r\n \r\n \r\n {(formProps) => {\r\n onEventType(formProps.values.EventType, formProps);\r\n setCheckTimeEndSelect(formProps.values.CheckTimeEnd);\r\n return (\r\n \r\n )\r\n }}\r\n \r\n \r\n )\r\n};\r\n\r\nexport default EventApprove;","import React, { Component } from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport FormErrors from \"./formErrors\";\r\nimport { FastField } from \"formik\";\r\nimport DateFnsUtils from \"@material-ui/pickers/adapter/date-fns\";\r\nimport TextField from \"@material-ui/core/TextField\";\r\nimport {\r\n MobileDateRangePicker,\r\n DateRangeDelimiter,\r\n LocalizationProvider,\r\n DateTimePicker,\r\n DatePicker,\r\n} from \"@material-ui/pickers\";\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport DateRangeOutlinedIcon from '@material-ui/icons/DateRangeOutlined';\r\nimport InputAdornment from '@material-ui/core/InputAdornment/InputAdornment';\r\nimport { getLanguage } from \"../../i18n\";\r\nimport { i18n } from \"../../i18n\";\r\n\r\nconst StyledInput = withStyles({\r\n root: {\r\n width: \"100%\",\r\n top: \"4px\",\r\n \"& .MuiOutlinedInput-inputMarginDense\": {\r\n minHeight: \"24px\",\r\n },\r\n \"& .MuiInputLabel-outlined\": {\r\n top: 1,\r\n }\r\n }\r\n})((props) => \r\n (\r\n (lstEventTypeMaster_Sub).Where(w => w.nHearID === (+val)).ToArray().length > 0\r\n ? yup.string().required(MsgValidate.PleaseSpecify + 'Sub Event Type')\r\n : yup.string().notRequired())),\r\n EventTimeStrat:\r\n isShoweTime ?\r\n yup.date().typeError(MsgValidate.PleaseSpecify + ' Start Time')\r\n .required(MsgValidate.PleaseSpecify + ' Start Time')\r\n .when(\"EventDate\", (val) => (checkDate(val)\r\n ?\r\n yup.date().typeError(MsgValidate.PleaseSpecify + ' Start Time').required(MsgValidate.PleaseSpecify + ' Start Time').max(new Date(), \"ไม่สามารถระบุเวลาล่วงหน้าได้\")\r\n :\r\n yup.date().typeError(MsgValidate.PleaseSpecify + ' Start Time').required(MsgValidate.PleaseSpecify + ' Start Time')\r\n ))\r\n : \"\",\r\n EventTimeEnd: isShoweTime ? CheckTimeEndSelect ? \"\" : yup.date().typeError(MsgValidate.PleaseSpecify + ' End Time').required(MsgValidate.PleaseSpecify + ' End Time') : \"\",\r\n Description: isShoweTime ? yup.string().max(4000, MsgValidateMaxLength(\"Description\", 4000)).required(MsgValidate.PleaseSpecify + ' Description') : yup.string().max(4000, MsgValidateMaxLength(\"Description\", 4000)),\r\n AdvanceEventDate: cAdvanceReport ? yup.array().required(MsgValidate.PleaseSpecify + 'Event Date') : \"\",\r\n });\r\n const validateOperation = yup.object().shape({\r\n EventGroup: yup.string().required(MsgValidate.PleaseSpecify + 'Event Group'),\r\n Company: yup.string().required(MsgValidate.PleaseSpecify + 'Company'),\r\n Area: yup.array().required(MsgValidate.PleaseSpecify + 'Area Name/Sub Area Name'),\r\n EventDate: cAdvanceReport ? \"\" : yup.date().typeError(MsgValidate.PleaseSpecify + \"Event Date\").required(MsgValidate.PleaseSpecify + 'Event Date'),\r\n EventType: yup.string().required(MsgValidate.PleaseSpecify + ' Event Type'),\r\n SubEventType: yup.string().when(\"EventType\", (val) => (new LINQ(lstEventTypeMaster_Sub).Where(w => w.nHearID === (+val)).ToArray().length > 0\r\n ? yup.string().required(MsgValidate.PleaseSpecify + 'Sub Event Type')\r\n : yup.string().notRequired())),\r\n EventTimeStrat:\r\n isShoweTime ?\r\n yup.date().typeError(MsgValidate.PleaseSpecify + ' Start Time')\r\n .required(MsgValidate.PleaseSpecify + ' Start Time')\r\n .when(\"EventDate\", (val) => (checkDate(val)\r\n ?\r\n yup.date().typeError(MsgValidate.PleaseSpecify + ' Start Time').required(MsgValidate.PleaseSpecify + ' Start Time').max(new Date(), \"ไม่สามารถระบุเวลาล่วงหน้าได้\")\r\n :\r\n yup.date().typeError(MsgValidate.PleaseSpecify + ' Start Time').required(MsgValidate.PleaseSpecify + ' Start Time')\r\n ))\r\n : \"\",\r\n EventTimeEnd: isShoweTime ? CheckTimeEndSelect ? \"\" : yup.date().typeError(MsgValidate.PleaseSpecify + ' End Time').required(MsgValidate.PleaseSpecify + ' End Time') : \"\",\r\n WorkingTime: yup.array().required(MsgValidate.PleaseSpecify + 'Working Time'),\r\n Description: isShoweTime ? yup.string().max(4000, MsgValidateMaxLength(\"Description\", 4000)).required(MsgValidate.PleaseSpecify + ' Description') : yup.string().max(4000, MsgValidateMaxLength(\"Description\", 4000)),\r\n AdvanceEventDate: cAdvanceReport ? yup.array().min(2, MsgValidate.PleaseSpecify + 'Event Date').required(MsgValidate.PleaseSpecify + 'Event Date') : \"\",\r\n });\r\n const validateSecurity = yup.object().shape({\r\n EventGroup: yup.string().required(MsgValidate.PleaseSpecify + 'Event Group'),\r\n Company: yup.string().required(MsgValidate.PleaseSpecify + 'Company'),\r\n Area: yup.array().required(MsgValidate.PleaseSpecify + 'Area'),\r\n EventDate: cAdvanceReport ? \"\" : yup.date().typeError(MsgValidate.PleaseSpecify + \"Event Date\").required(MsgValidate.PleaseSpecify + 'Event Date'),\r\n EventType: yup.string().required(MsgValidate.PleaseSpecify + ' Event Type'),\r\n SubEventType: yup.string().when(\"EventType\", (val) => (new LINQ(lstEventTypeMaster_Sub).Where(w => w.nHearID === (+val)).ToArray().length > 0\r\n ? yup.string().required(MsgValidate.PleaseSpecify + 'Sub Event Type')\r\n : yup.string().notRequired())),\r\n EventTimeStrat:\r\n isShoweTime ?\r\n yup.date().typeError(MsgValidate.PleaseSpecify + ' Start Time')\r\n .required(MsgValidate.PleaseSpecify + ' Start Time')\r\n .when(\"EventDate\", (val) => (checkDate(val)\r\n ?\r\n yup.date().typeError(MsgValidate.PleaseSpecify + ' Start Time').required(MsgValidate.PleaseSpecify + ' Start Time').max(new Date(), \"ไม่สามารถระบุเวลาล่วงหน้าได้\")\r\n :\r\n yup.date().typeError(MsgValidate.PleaseSpecify + ' Start Time').required(MsgValidate.PleaseSpecify + ' Start Time')\r\n ))\r\n : \"\",\r\n EventTimeEnd: isShoweTime ? CheckTimeEndSelect ? \"\" : yup.date().typeError(MsgValidate.PleaseSpecify + ' End Time').required(MsgValidate.PleaseSpecify + ' End Time') : \"\",\r\n Description: isShoweTime ? yup.string().max(4000, MsgValidateMaxLength(\"Description\", 4000)).required(MsgValidate.PleaseSpecify + ' Description') : yup.string().max(4000, MsgValidateMaxLength(\"Description\", 4000)),\r\n SecurityLevel: yup.string().required(MsgValidate.PleaseSpecify + ' Security Level'),\r\n SecurityDescription: isSecurityLevelPass === false ? yup.string().max(4000, MsgValidateMaxLength(\"Security Description\", 4000)).required(MsgValidate.PleaseSpecify + ' Security Description') : yup.string().max(4000, MsgValidateMaxLength(\"Security Description\", 4000)),\r\n AdvanceEventDate: cAdvanceReport ? yup.array().min(2, MsgValidate.PleaseSpecify + 'Event Date').required(MsgValidate.PleaseSpecify + 'Event Date') : \"\",\r\n });\r\n\r\n const onSave = (values, { setFieldValue, setFieldError }) => {\r\n let obj = {\r\n nEventID: values.nEventID,\r\n nEventGroupID: +values.EventGroup,\r\n nCompanyID: +values.Company,\r\n nEventTypeID: +values.EventType,\r\n nSubEventTypeID: values.SubEventType === \"\" ? null : +values.SubEventType,\r\n nAreaID: new LINQ(values.Area).Select(s => (+s)).ToArray(),\r\n sEventDate: dateFormat(values.EventDate, \"dd/mm/yyyy\"),\r\n sEventStartTime: isShoweTime ? dateFormat(values.EventTimeStrat, \"HH:MM\") : \"\",\r\n sEventEndTime: isShoweTime ? dateFormat(values.EventTimeEnd, \"HH:MM\") : \"\",\r\n cEventNotEnd: values.CheckTimeEnd,\r\n sEventDesc: values.Description,\r\n nLevelID: values.SecurityLevel !== \"\" ? +values.SecurityLevel : null,\r\n sSecurityDesc: values.SecurityDescription,\r\n lstWorkingTime: new LINQ(values.WorkingTime).Select(s => (+s)).ToArray(),\r\n lstFileData: FileData_,\r\n sAdvanceStartDate: values.AdvanceEventDate.length > 0 ? dateFormat(values.AdvanceEventDate[0], \"dd/mm/yyyy\") : \"\",\r\n sAdvanceEndDate: values.AdvanceEventDate.length > 1 ? dateFormat(values.AdvanceEventDate[1], \"dd/mm/yyyy\") : \"\",\r\n cAdvanceReport: values.AdvanceReport ? true : false,\r\n };\r\n DialogConfirm(() => {\r\n AxiosPost(sController + \"/SaveData\", obj, (response) => {\r\n ResultAPI(false, response, null, () => {\r\n if (response.sStatus === \"NO\") {\r\n if (response.sMsg != null && response.sMsg != \"\") {\r\n setOpenLe({ ...openLe, Remark: true, sNote: response.sMsg });\r\n Swal.close();\r\n }\r\n } else {\r\n loadListEventReport(values.EventGroup, values.Company, values.EventDate, values.Area, true);\r\n resetFrom(setFieldValue, setFieldError, \"Save\");\r\n }\r\n })\r\n }, () => { }, BlockUI, UnBlockUI)\r\n });\r\n };\r\n\r\n const resetFrom = (setFieldValue, setFieldError, sMode) => {\r\n if (sMode === \"Save\") {\r\n resetFromSubmitData(setFieldValue, setFieldError, \"nEventID\", null)\r\n // resetFromSubmitData(setFieldValue, setFieldError, \"EventGroup\", null)\r\n // resetFromSubmitData(setFieldValue, setFieldError, \"Company\", null)\r\n // resetFromSubmitData(setFieldValue, setFieldError, \"Area\", new LINQ(lstArea).Select(s => s.value + \"\").ToArray())\r\n resetFromSubmitData(setFieldValue, setFieldError, \"SubEventType\", \"\")\r\n resetFromSubmitData(setFieldValue, setFieldError, \"EventType\", \"\")\r\n resetFromSubmitData(setFieldValue, setFieldError, \"SubEventType\", \"\")\r\n //resetFromSubmitData(setFieldValue, setFieldError, \"EventDate\", EventDataSelect)\r\n resetFromSubmitData(setFieldValue, setFieldError, \"EventTimeStrat\", null)\r\n resetFromSubmitData(setFieldValue, setFieldError, \"EventTimeEnd\", null)\r\n resetFromSubmitData(setFieldValue, setFieldError, \"CheckTimeEnd\", false)\r\n setCheckTimeEndSelect(false)\r\n setisShoweTime(false);\r\n // resetFromSubmitData(setFieldValue, setFieldError, \"WorkingTime\", [])\r\n resetFromSubmitData(setFieldValue, setFieldError, \"Description\", \"\")\r\n resetFromSubmitData(setFieldValue, setFieldError, \"SecurityLevel\", \"\")\r\n resetFromSubmitData(setFieldValue, setFieldError, \"SecurityDescription\", \"\")\r\n setFileData_([]);\r\n /// setEventDataSelect(new Date());\r\n setisClearFile(true);\r\n setisEdite(false);\r\n } else if (sMode === \"EventGroup\") {\r\n resetFromSubmitData(setFieldValue, setFieldError, \"Company\", null)\r\n resetFromSubmitData(setFieldValue, setFieldError, \"Area\", [])\r\n resetFromSubmitData(setFieldValue, setFieldError, \"SubEventType\", \"\")\r\n resetFromSubmitData(setFieldValue, setFieldError, \"EventType\", \"\")\r\n resetFromSubmitData(setFieldValue, setFieldError, \"SubEventType\", \"\")\r\n resetFromSubmitData(setFieldValue, setFieldError, \"WorkingTime\", [])\r\n resetFromSubmitData(setFieldValue, setFieldError, \"SecurityLevel\", \"\")\r\n resetFromSubmitData(setFieldValue, setFieldError, \"SecurityDescription\", \"\")\r\n resetFromSubmitData(setFieldValue, setFieldError, \"CheckTimeEnd\", false)\r\n setCheckTimeEndSelect(false)\r\n setisShoweTime(false);\r\n setlstWorkingTime([]);\r\n setAreaSelect([]);\r\n }\r\n else if (sMode === \"Company\") {\r\n resetFromSubmitData(setFieldValue, setFieldError, \"Area\", [])\r\n resetFromSubmitData(setFieldValue, setFieldError, \"SubEventType\", \"\")\r\n resetFromSubmitData(setFieldValue, setFieldError, \"EventType\", \"\")\r\n resetFromSubmitData(setFieldValue, setFieldError, \"SubEventType\", \"\")\r\n resetFromSubmitData(setFieldValue, setFieldError, \"WorkingTime\", [])\r\n setlstWorkingTime([]);\r\n setAreaSelect([]);\r\n } else if (sMode === \"Area\") {\r\n resetFromSubmitData(setFieldValue, setFieldError, \"SubEventType\", \"\")\r\n resetFromSubmitData(setFieldValue, setFieldError, \"EventType\", \"\")\r\n resetFromSubmitData(setFieldValue, setFieldError, \"SubEventType\", \"\")\r\n resetFromSubmitData(setFieldValue, setFieldError, \"WorkingTime\", [])\r\n setlstWorkingTime([]);\r\n } else if (sMode === \"EventType\") {\r\n resetFromSubmitData(setFieldValue, setFieldError, \"SubEventType\", \"\")\r\n\r\n }\r\n\r\n };\r\n //#endregion\r\n\r\n //#region API\r\n const LoadData = () => {\r\n let qbj = {\r\n nEventGroupID: null,\r\n nCompanyID: null,\r\n lstAreaID: [],\r\n lstSubAreaID: [],\r\n sEventDate: \"\",\r\n nEventTypeID: null,\r\n };\r\n AxiosPost(sController + \"/LoadCreateReport\", qbj, (response) => {\r\n ResultAPI(false, response, null, async () => {\r\n if (response.objTAdvanceReport.IsAdvanceReport) {\r\n setShowAdvanceReport(response.objTAdvanceReport.IsAdvanceReport)\r\n setcAdvanceReport(false);\r\n setmaxDateEv(response.objTAdvanceReport.dAdvanceEndDate);\r\n setresultGetAdvanceReport(response.objTAdvanceReport.lstDate)\r\n inFromEventReport.AdvanceEventDate = response.objTAdvanceReport.lstDate\r\n } else {\r\n setShowAdvanceReport(false)\r\n setcAdvanceReport(false)\r\n inFromEventReport.AdvanceEventDate = [];\r\n }\r\n setlstArea(response.lstAreaMaster);\r\n setlstEventTypeMaster(response.lstEventTypeMaster);\r\n setlstEventTypeMaster_Sub(response.lstEventTypeMaster_Sub);\r\n setlstSubEventType(response.lstEventTypeMaster_Sub)\r\n setlstWorkingTimeMaster(response.lstWorkingTimeMaster);\r\n\r\n inFromEventReport.Area = response.lstDefaultArea;\r\n inFromEventReport.EventGroup = response.nDefaultEventGroup;\r\n inFromEventReport.Company = response.nDefaultCompany;\r\n inFromEventReport.WorkingTime = new LINQ(response.lstWorkingTimeMaster || []).Select(s => s.nWorkingTimeID + \"\").Distinct().ToArray();\r\n\r\n setFromEventReport(inFromEventReport);\r\n\r\n\r\n WorkingTimeData(response.lstDefaultArea, response.lstWorkingTimeMaster);\r\n setEventType(response.lstDefaultArea, response.nDefaultCompany, response.nDefaultEventGroup, inFromEventReport.EventDate, response.lstEventTypeMaster, null);\r\n setCompyneCSR(response.lstCompyneCSR)\r\n setlstEventGroup(response.lstEventGroup);\r\n setlstCompany(response.lstCompyne);\r\n setSecurityLevel(response.lstSecurityLevel);\r\n\r\n setEventGroupSelect(response.nDefaultEventGroup + \"\");\r\n setCompanySelect(response.nDefaultCompany + \"\")\r\n setEventDataSelect(inFromEventReport.EventDate)\r\n loadListEventReport(response.nDefaultEventGroup + \"\", response.nDefaultCompany + \"\", inFromEventReport.EventDate, inFromEventReport.Area, true);\r\n\r\n })\r\n }, () => { }, BlockUI, UnBlockUI)\r\n }\r\n\r\n useEffect(() => {\r\n LoadData();\r\n }, []);\r\n\r\n const loadListEventReport = (EventGroupSelect_, CompanySelect_, EventDataSelect_, Area, LoadPrevious, formProps?) => {\r\n if (EventGroupSelect_ != \"\" && CompanySelect_ != \"\") {\r\n let qbj = {\r\n nEventGroupID: +EventGroupSelect_,\r\n nCompanyID: +CompanySelect_,\r\n sEventDate: dateFormat(EventDataSelect_, \"dd/mm/yyyy\"),\r\n };\r\n console.log(\"qbj\", qbj);\r\n\r\n AxiosPost(sController + \"/LoadListEventReport\", qbj, (response) => {\r\n ResultAPI(false, response, null, () => {\r\n setlstEventReport(response);\r\n if (LoadPrevious == true) {\r\n GetEventPrevious(EventGroupSelect_, CompanySelect_, EventDataSelect_, Area, formProps)\r\n }\r\n })\r\n }, () => { }, BlockUI, UnBlockUI)\r\n }\r\n };\r\n\r\n const GetAdvanceReport = (EventGroupSelect_, formProps) => {\r\n if (EventGroupSelect_ != \"\") {\r\n let qbj = {\r\n nEventGroupID: +EventGroupSelect_,\r\n };\r\n AxiosPost(sController + \"/GetAdvanceReport\", qbj, (response) => {\r\n ResultAPI(false, response, null, () => {\r\n if (response.IsAdvanceReport) {\r\n setShowAdvanceReport(response.IsAdvanceReport)\r\n //setcAdvanceReport(response.IsAdvanceReport);\r\n setcAdvanceReport(false)\r\n formProps.setFieldValue(\"AdvanceReport\", false)\r\n setmaxDateEv(response.dAdvanceEndDate);\r\n setresultGetAdvanceReport(response.lstDate)\r\n formProps.setFieldValue(\"AdvanceEventDate\", response.lstDate)\r\n\r\n } else {\r\n setShowAdvanceReport(false)\r\n setcAdvanceReport(false)\r\n setmaxDateEv(new Date());\r\n setresultGetAdvanceReport([new Date(), new Date()])\r\n formProps.setFieldValue(\"AdvanceReport\", false)\r\n }\r\n\r\n })\r\n }, () => { }, BlockUI, UnBlockUI)\r\n }\r\n };\r\n\r\n const GetEventPrevious = (EventGroupSelect_, CompanySelect_, EventDataSelect_, Area, formProps, Mode?) => {\r\n let qbj = {\r\n nEventGroupID: +EventGroupSelect_,\r\n nCompanyID: +CompanySelect_,\r\n lstAreaID: Area,\r\n sEventDate: dateFormat(EventDataSelect_, \"dd/mm/yyyy\"),\r\n };\r\n if (EventGroupSelect_ == \"3\") {\r\n AxiosPost(sController + \"/GetEventPrevious\", qbj, (response) => {\r\n ResultAPI(false, response, null, () => {\r\n if (response.isPreviousData == true) {\r\n if (formProps) {\r\n formProps.setFieldValue(\"SecurityLevel\", response.SecurityLevel)\r\n formProps.setFieldValue(\"CheckTimeEnd\", response.CheckTimeEnd)\r\n formProps.setFieldValue(\"Description\", response.Description)\r\n formProps.setFieldValue(\"EventTimeEnd\", response.EventTimeEnd)\r\n formProps.setFieldValue(\"EventTimeStrat\", response.EventTimeStrat)\r\n // if((lstEventType||[]).filter(f=> (f.value+\"\") ==(response.EventType+\"\")).length>0){\r\n formProps.setFieldValue(\"EventType\", response.EventType)\r\n formProps.setFieldValue(\"SubEventType\", response.SubEventType)\r\n // }else{\r\n // formProps.setFieldValue(\"EventType\", \"\")\r\n // formProps.setFieldValue(\"SubEventType\", \"\")\r\n // }\r\n formProps.setFieldValue(\"SecurityDescription\", response.SecurityDescription)\r\n formProps.setFieldValue(\"WorkingTime\", response.WorkingTime)\r\n\r\n if (Mode != 1) formProps.setFieldValue(\"AdvanceEventDate\", inFromEventReport.AdvanceEventDate);\r\n } else {\r\n inFromEventReport.Area = Area;\r\n inFromEventReport.EventGroup = EventGroupSelect_;\r\n inFromEventReport.Company = CompanySelect_;\r\n inFromEventReport.CheckTimeEnd = response.CheckTimeEnd;\r\n inFromEventReport.Description = response.Description;\r\n inFromEventReport.EventDate = EventDataSelect_;\r\n inFromEventReport.EventTimeEnd = response.EventTimeEnd;\r\n inFromEventReport.EventTimeStrat = response.EventTimeStrat;\r\n // if((lstEventType||[]).filter(f=> (f.value+\"\") ==(response.EventType+\"\")).length>0){\r\n inFromEventReport.EventType = response.EventType;\r\n inFromEventReport.SubEventType = response.SubEventType;\r\n // }else{\r\n // inFromEventReport.EventType = \"\";\r\n // inFromEventReport.SubEventType = \"\";\r\n // }\r\n inFromEventReport.SecurityDescription = response.SecurityDescription;\r\n inFromEventReport.SecurityLevel = response.SecurityLevel;\r\n inFromEventReport.WorkingTime = response.WorkingTime;\r\n\r\n if (Mode != 1) inFromEventReport.AdvanceEventDate = inFromEventReport.AdvanceEventDate;\r\n setFromEventReport({ ...inFromEventReport });\r\n }\r\n } else {\r\n if (formProps) {\r\n formProps.setFieldValue(\"SecurityLevel\", \"\")\r\n formProps.setFieldValue(\"CheckTimeEnd\", false)\r\n formProps.setFieldValue(\"Description\", \"\")\r\n formProps.setFieldValue(\"EventTimeEnd\", \"\")\r\n formProps.setFieldValue(\"EventTimeStrat\", \"\")\r\n formProps.setFieldValue(\"EventType\", \"\")\r\n formProps.setFieldValue(\"SecurityDescription\", \"\")\r\n // formProps.setFieldValue(\"WorkingTime\", [])\r\n formProps.setFieldValue(\"SubEventType\", \"\")\r\n if (Mode != 1) formProps.setFieldValue(\"AdvanceEventDate\", inFromEventReport.AdvanceEventDate)\r\n } else {\r\n setFromEventReport({\r\n ...inFromEventReport,\r\n Area: Area,\r\n EventGroup: EventGroupSelect_,\r\n Company: CompanySelect_,\r\n CheckTimeEnd: false,\r\n Description: \"\",\r\n EventTimeEnd: \"\",\r\n EventTimeStrat: \"\",\r\n EventType: \"\",\r\n SecurityDescription: \"\",\r\n SecurityLevel: \"\",\r\n SubEventType: \"\"\r\n });\r\n }\r\n }\r\n })\r\n }, () => { }, BlockUI, UnBlockUI)\r\n } else {\r\n if (formProps) {\r\n formProps.setFieldValue(\"SecurityLevel\", \"\")\r\n formProps.setFieldValue(\"CheckTimeEnd\", false)\r\n formProps.setFieldValue(\"Description\", \"\")\r\n formProps.setFieldValue(\"EventTimeEnd\", \"\")\r\n formProps.setFieldValue(\"EventTimeStrat\", \"\")\r\n formProps.setFieldValue(\"EventType\", \"\")\r\n formProps.setFieldValue(\"SecurityDescription\", \"\")\r\n // formProps.setFieldValue(\"WorkingTime\", [])\r\n formProps.setFieldValue(\"SubEventType\", \"\")\r\n } else {\r\n setFromEventReport({\r\n ...inFromEventReport,\r\n Area: Area,\r\n EventGroup: EventGroupSelect_,\r\n Company: CompanySelect_,\r\n CheckTimeEnd: false,\r\n Description: \"\",\r\n EventTimeEnd: \"\",\r\n EventTimeStrat: \"\",\r\n EventType: \"\",\r\n SecurityDescription: \"\",\r\n SecurityLevel: \"\",\r\n SubEventType: \"\",\r\n });\r\n }\r\n // if (formProps != null) {\r\n // WorkingTimeData(Area, [], formProps);\r\n // }\r\n }\r\n }\r\n //#endregion\r\n const setEventType = async (Area: any[], Company, GroupID, EvDate_: Date, lstEventTypeMaster_, formProps, nMode?) => {\r\n let lID = new LINQ(Area).Select(s => (+s)).ToList();\r\n let EvDate: Date = EvDate_;\r\n if (typeof (EvDate_) == \"string\") {\r\n EvDate = new Date(EvDate_);\r\n }\r\n let re = \"\";\r\n let neDate = new Date();\r\n if (EvDate > neDate) {\r\n re = \"1\";\r\n } else {\r\n re = \"2\"\r\n }\r\n if (EvDate == null) EvDate = new Date();\r\n let result = new LINQ(lstEventTypeMaster.length > 0 ? lstEventTypeMaster : lstEventTypeMaster_)\r\n .Where(w => lID.Contains(w.nUseAreaID)\r\n && w.nCompany === (+Company)\r\n && (Area.length > 1 ? w.nEventColor === 3 : true)\r\n && (re == \"1\" ? w.cAdvanceReport === \"Y\" : true)).ToList();\r\n let lstEv = new LINQ([]).ToList();\r\n let lstArea_ = result.Select(s => s.nAreaID).Distinct().ToList();\r\n let IsFirst = true;\r\n\r\n\r\n\r\n lstArea_.ForEach(f => {\r\n var lstEv_ = result.Where(w => w.nAreaID == f).Select(s => s.nEventTypeID).ToList();\r\n if (IsFirst) {\r\n lstEv = lstEv_;\r\n IsFirst = false;\r\n }\r\n else {\r\n if (lstEv.Any()) {\r\n lstEv = lstEv.Intersect(lstEv_).ToList();\r\n }\r\n else {\r\n let stData_ = result.Where(w => lstEv.Contains(w.nEventTypeID)).OrderBy(o => o.nOrder).Select(s => ({ label: s.sEventName, value: (s.nEventTypeID + \"\"), sRemark: s.sRemark, nEventColor: s.nEventColor })).Distinct().ToArray()\r\n setlstEventType(stData_);\r\n return;\r\n }\r\n }\r\n });\r\n let stData = result.Where(w => lstEv.Contains(w.nEventTypeID)).OrderBy(o => o.nOrderID).Select(s => ({ label: s.sEventName, value: (s.nEventTypeID + \"\"), sRemark: s.sRemark, nEventColor: s.nEventColor })).Distinct().ToArray()\r\n setlstEventType(stData);\r\n\r\n if (re === \"1\") {\r\n var sde = new LINQ(lstEventTypeMaster_Sub).Where(w => w.cAdvanceReport === \"Y\").ToArray();\r\n setlstSubEventType([...sde]);\r\n if (nMode === 1 || nMode == 2) {\r\n let qbj = {\r\n \"lstAreaID\": lID.ToArray(),\r\n \"sDate\": dateFormat(EvDate, \"dd/mm/yyyy\"),\r\n };\r\n\r\n await AxiosPost(sController + \"/CheckAreaAdvance\", qbj, (response) => {\r\n ResultAPI(false, response, null, () => {\r\n if (response.sStatus === \"NO\") {\r\n if (response.sMsg != null && response.sMsg != \"\") {\r\n setOpenLe({ ...openLe, Remark: true, sNote: response.sMsg });\r\n setEventType(Area, Company, GroupID, new Date(), lstEventTypeMaster_, formProps, null);\r\n setlstSubEventType([...lstEventTypeMaster_Sub]);\r\n if (formProps != null) {\r\n if (cAdvanceReport == false) {\r\n formProps.setFieldValue(\"EventDate\", new Date());\r\n }\r\n }\r\n }\r\n }\r\n })\r\n }, () => { }, BlockUI, UnBlockUI)\r\n }\r\n } else {\r\n setlstSubEventType([...lstEventTypeMaster_Sub]);\r\n }\r\n };\r\n\r\n const EventTypeControl = (Props) => {\r\n const { formProps } = Props;\r\n return (\r\n { formProps.setFieldValue(\"SubEventType\", \"\") }} />\r\n );\r\n };\r\n\r\n //จะแสดงเฉพาะ security \r\n const SubEventTypeControl = (Props) => {\r\n const { formProps } = Props;\r\n return (\r\n (lstSubEventType).Where(w => w.nHearID === (+formProps.values.EventType))\r\n .OrderBy(o => o.nOrderID).Select(s => ({ label: s.sEventName, value: (s.nEventTypeID + \"\"), sRemark: s.sRemark, nEventColor: s.nEventColor }))\r\n .Distinct().ToArray()\r\n }\r\n />\r\n );\r\n };\r\n\r\n const RemarkEventType = (Props) => {\r\n const { formProps } = Props;\r\n let Node = \"\";\r\n\r\n if (formProps.values.SubEventType != \"\") {\r\n let q = new LINQ(lstEventTypeMaster_Sub).Where(f => f.nEventTypeID === +formProps.values.SubEventType).FirstOrDefault();\r\n Node = q != undefined && q.sRemark;\r\n let isSh = q != undefined && q.nEventColor;\r\n // setisShoweTime(isSh === 3 ? false : true);\r\n } else {\r\n let q = new LINQ(lstEventType).Where(f => f.value === formProps.values.EventType).FirstOrDefault();\r\n Node = q != undefined && q.sRemark;\r\n let isSh = q != undefined && q.nEventColor;\r\n setisShoweTime(isSh === 3 ? false : true);\r\n }\r\n\r\n\r\n return (\r\n \r\n {Node != \"\" && }\r\n \r\n )\r\n };\r\n\r\n const WorkingTimeData = useCallback((Area, lstWorkingTimeMaster_, formProps?) => {\r\n let AreaID = new LINQ(Area).Select(s => (+s)).ToList();\r\n let lstData = new LINQ(lstWorkingTimeMaster.length > 0 ? lstWorkingTimeMaster : lstWorkingTimeMaster_).Where(w => AreaID.Contains(w.nAreaID)).ToArray();\r\n let result: any[] = [];\r\n if (lstData != null) {\r\n\r\n let tv = new LINQ(lstData).Select(g => g.nWorkingTimeID).Distinct().ToArray();\r\n tv.forEach(f => {\r\n let WID = f;\r\n let WName = \"\";\r\n let comment = \"\";\r\n let q = new LINQ(lstData).Where(w => w.nWorkingTimeID === f).FirstOrDefault();\r\n if (q != null) {\r\n WName = q.sWorKingTileName;\r\n }\r\n let lsrA = new LINQ(lstData).Where(w => w.nWorkingTimeID === f).Select(s => s.sAreaName).ToArray();\r\n comment = lsrA.join(\"
\");\r\n result.push({ id: (WID + \"\"), label: WName, comment: comment });\r\n });\r\n }\r\n if (formProps != null) {\r\n // if (formProps.values.Company === \"4\") {\r\n formProps.setFieldValue(\"WorkingTime\", new LINQ(result).Select(w => w.id).Distinct().ToArray());\r\n // }\r\n }\r\n setlstWorkingTime([...result]);\r\n }, [EventGroupSelect])\r\n\r\n //จะแสดงเฉพาะ operation\r\n const WorkingTimeControl = (Props) => {\r\n const { formProps } = Props;\r\n return (\r\n \r\n { checkLevel(data, formProps) }}\r\n />\r\n \r\n );\r\n };\r\n\r\n const deleteEvent = (EventID) => {\r\n DialogConfirmDelete(() => {\r\n let qbj = {\r\n nEventReportID: +EventID\r\n };\r\n AxiosPost(sController + \"/DeleteEvent\", qbj, (response) => {\r\n ResultDeleteAPI(false, response, null, () => {\r\n loadListEventReport(EventGroupSelect, CompanySelect, EventDataSelect, [], false);\r\n })\r\n }, () => { }, BlockUI, UnBlockUI)\r\n });\r\n };\r\n\r\n const [open, setOpen] = React.useState({ isShow: false, EventID: null, Mode: \"\" });\r\n\r\n const handleClose = (value: string) => {\r\n setOpen({ ...open, isShow: false, EventID: null, Mode: \"\" });\r\n if ((+value) === 1) {\r\n loadListEventReport(EventGroupSelect, CompanySelect, EventDataSelect, [], false);\r\n }\r\n };\r\n\r\n const handleShew = (EventID, Mode) => {\r\n setOpen({ ...open, isShow: true, EventID: EventID, Mode: Mode });\r\n };\r\n const EventApproveReport = React.useCallback(() => {\r\n return { handleClose(e) }}\r\n title={\"Edit Data\"}\r\n eventID={open.EventID}\r\n Mode={open.Mode} />\r\n }, [open]);\r\n\r\n const TableEventReportControl = useCallback(() => {\r\n return (\r\n (formProps.values.Area).Select(s => (+s)).ToArray(),\r\n lstSubAreaID: [],\r\n sEventDate: dateFormat(formProps.values.EventDate, \"dd/mm/yyyy\"),\r\n nEventTypeID: null,\r\n nSecurityLevelID: +nSecurityLevelID\r\n };\r\n AxiosPost(sController + \"/CheclSecurityLevel\", qbj, (response) => {\r\n ResultAPI(false, response, null, () => {\r\n if (response.isPass == false) {\r\n setSecurityLevelPass(false);\r\n if (response.sMsg != null && response.sMsg != \"\") {\r\n setOpenLe({ ...openLe, Remark: true, sNote: response.sMsg });\r\n formProps.setFieldValue(\"SecurityLevel\", \"\")\r\n } else {\r\n setOpenLe({ ...openLe, Remark: true, sNote: \"เนื่องจากมีการปรับเปลี่ยนระดับ Security Level โปรดระบุเหตุผลของการปรับระดับการเตือนภัย\" });\r\n }\r\n } else {\r\n setSecurityLevelPass(true);\r\n }\r\n })\r\n }, () => { }, BlockUI, UnBlockUI)\r\n };\r\n const ColEventDate = useCallback((Props) => {\r\n const { formProps } = Props;\r\n return (\r\n cAdvanceReport ? {\r\n setEventType(formProps.values.Area, formProps.values.Company, formProps.values.EventGroup, formProps.values.AdvanceEventDate[1], [], formProps, 1);\r\n }}\r\n onChangedCallback={(value) => {\r\n setEventDataSelect(formProps.values.AdvanceEventDate[0]);\r\n GetEventPrevious(formProps.values.EventGroup + \"\", formProps.values.Company + \"\", formProps.values.AdvanceEventDate[0], formProps.values.Area, formProps, 1)\r\n loadListEventReport(formProps.values.EventGroup + \"\", formProps.values.Company + \"\", formProps.values.AdvanceEventDate[0], formProps.values.Area, false);\r\n }}\r\n endAdornment={\r\n \r\n \r\n } disable={isEdite}\r\n >\r\n : {\r\n setEventDataSelect(value);\r\n setEventType(formProps.values.Area, formProps.values.Company, formProps.values.EventGroup, value, lstEventTypeMaster, formProps);\r\n loadListEventReport(formProps.values.EventGroup + \"\", formProps.values.Company + \"\", value, formProps.values.Area, false);\r\n\r\n }}\r\n onCloseCallback={(e) => {\r\n setEventType(formProps.values.Area, formProps.values.Company, formProps.values.EventGroup, formProps.values.EventDate, lstEventTypeMaster, formProps, 1);\r\n GetEventPrevious(formProps.values.EventGroup + \"\", formProps.values.Company + \"\", formProps.values.EventDate, formProps.values.Area, formProps)\r\n }}\r\n endAdornment={\r\n \r\n \r\n } disable={isEdite} />\r\n\r\n );\r\n }, [cAdvanceReport, maxDateEv, isEdite, lstEventTypeMaster, lstEventTypeMaster_Sub]);\r\n const ColCheckEventDate = useCallback((Props) => {\r\n const { formProps } = Props;\r\n return (ShowAdvanceReport ? {\r\n setcAdvanceReport(e)\r\n if (e == false) {\r\n setEventDataSelect(formProps.values.EventDate)\r\n setEventType(formProps.values.Area, formProps.values.Company, formProps.values.EventGroup, formProps.values.EventDate, lstEventTypeMaster, formProps, 1);\r\n\r\n // GetEventPrevious(formProps.values.EventGroup + \"\", formProps.values.Company + \"\", formProps.values.EventDate, formProps.values.Area, formProps)\r\n loadListEventReport(formProps.values.EventGroup + \"\", formProps.values.Company + \"\", formProps.values.EventDate, formProps.values.Area, true);\r\n } else {\r\n formProps.setFieldValue(\"AdvanceEventDate\", resultGetAdvanceReport)\r\n if ((formProps.values.AdvanceEventDate || []).length > 0) {\r\n setEventDataSelect((resultGetAdvanceReport || []).length > 1 ? resultGetAdvanceReport[1] : formProps.values.EventDate)\r\n if ((resultGetAdvanceReport || []).length >= 2) {\r\n setEventType(formProps.values.Area, formProps.values.Company, formProps.values.EventGroup, resultGetAdvanceReport[1], lstEventTypeMaster, formProps, 1);\r\n }\r\n loadListEventReport(formProps.values.EventGroup + \"\", formProps.values.Company + \"\", (resultGetAdvanceReport || []).length > 1 ? resultGetAdvanceReport[0] : formProps.values.EventDate, formProps.values.Area, false);\r\n }\r\n }\r\n }} /> : \r\n \r\n )\r\n}\r\nexport default CreateReport;\r\n","import React, { Fragment, useState, useEffect } from 'react';\r\nimport 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';\r\nimport { Grid } from '@material-ui/core';\r\nimport { EditorState, convertFromRaw, convertToRaw, ContentState, convertFromHTML } from 'draft-js';\r\nimport 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';\r\nimport { AxiosPost, DialogConfirm, FnBlock_UI, ResultAPI, scrollToElementValidate } from 'components/SysComponent/SystemComponent';\r\nimport { MuiButtonSaveFront } from 'components/SysComponent/MaterialComponent';\r\nimport Accordion from '@material-ui/core/Accordion/Accordion';\r\nimport AccordionSummary from '@material-ui/core/AccordionSummary/AccordionSummary';\r\n// Require Editor CSS files.\r\nimport \"froala-editor/js/froala_editor.pkgd.min.js\";\r\nimport \"froala-editor/js/plugins.pkgd.min.js\";\r\n\r\nimport 'froala-editor/css/froala_style.min.css';\r\nimport 'froala-editor/css/froala_editor.pkgd.min.css';\r\n\r\nimport \"froala-editor/css/plugins/quick_insert.min.css\";\r\nimport \"froala-editor/css/plugins/char_counter.min.css\";\r\nimport \"froala-editor/css/plugins/code_view.min.css\";\r\nimport \"froala-editor/css/plugins/colors.min.css\";\r\nimport \"froala-editor/css/plugins/draggable.min.css\";\r\nimport \"froala-editor/css/plugins/emoticons.min.css\";\r\nimport \"froala-editor/css/plugins/file.min.css\";\r\nimport \"froala-editor/css/plugins/fullscreen.min.css\";\r\nimport \"froala-editor/css/plugins/help.min.css\";\r\nimport \"froala-editor/css/plugins/image_manager.min.css\";\r\nimport \"froala-editor/css/plugins/image.min.css\";\r\nimport \"froala-editor/css/plugins/line_breaker.min.css\";\r\nimport \"froala-editor/css/plugins/quick_insert.min.css\";\r\nimport \"froala-editor/css/plugins/special_characters.min.css\";\r\nimport \"froala-editor/css/plugins/table.min.css\";\r\nimport \"froala-editor/css/plugins/video.min.css\";\r\n\r\nimport FroalaEditor from 'react-froala-wysiwyg';\r\n\r\n\r\nconst config = {\r\n key: \"0BA3jA11B5C7C4A4D3aIVLEABVAYFKc2Cb1MYGH1g1NYVMiG5G4E3C3A1C8A6D4A3B4==\",\r\n charCounterCount: false,\r\n toolbarButtons: {\r\n moreText: {\r\n buttons: ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting']\r\n },\r\n moreParagraph: {\r\n buttons: ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote']\r\n },\r\n moreRich: {\r\n buttons: ['insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome', 'specialCharacters', 'embedly', 'insertFile', 'insertHR']\r\n },\r\n moreMisc: {\r\n buttons: ['undo', 'redo', 'fullscreen', 'print', 'spellChecker', 'selectAll', 'html', 'help'],\r\n align: 'right',\r\n buttonsVisible: 2\r\n }\r\n },\r\n // Set the image upload parameter.\r\n imageUploadParam: 'image_param',\r\n // Set the image upload URL.\r\n imageUploadURL: 'api/UploadFile/UploadFileCotactUs',\r\n // Additional upload params.\r\n imageUploadParams: { id: 'my_editor' },\r\n // Set request type.\r\n imageUploadMethod: 'POST',\r\n // Set max image size to 5MB.\r\n imageMaxSize: 5 * 1024 * 1024,\r\n // imageAllowedTypes: ['jpeg', 'jpg', 'png'],\r\n fileUploadParam: 'file_param',\r\n fileUploadURL: 'api/UploadFile/UploadFileCotactUs',\r\n fileUploadParams: { id: 'my_editor' },\r\n fileUploadMethod: 'POST',\r\n fileMaxSize: 20 * 1024 * 1024,\r\n fileAllowedTypes: ['*'],\r\n videoUploadParam: 'file_name',\r\n videoUploadURL: 'api/UploadFile/UploadFileCotactUs',\r\n videoUploadParams: { id: 'my_editor' },\r\n videoUploadMethod: 'POST',\r\n}\r\n\r\nconst ContactUs = () => {\r\n const sController = \"ContactUs\";\r\n const fnInitialData = {\r\n nID: null,\r\n txtEdittor: '',\r\n editorState: EditorState.createEmpty()\r\n }\r\n\r\n const { BlockUI, UnBlockUI } = FnBlock_UI();\r\n // #region set State\r\n const [editorState, setEditorState] = useState(EditorState.createEmpty());\r\n const [EditID, setEditID] = useState(0);\r\n const [sContactUs, setContactUs] = useState(\"\");\r\n const [isCorparate, setCorparate] = useState(false);\r\n // #endregion set State\r\n const onSave = () => {\r\n setEditorState(editorState);\r\n let obj = {\r\n nID: EditID,\r\n sContactUs: sContactUs\r\n }\r\n DialogConfirm(() => {\r\n AxiosPost(sController + \"/SaveData\", obj, (response) => {\r\n ResultAPI(false, response, null, () => {\r\n LoadData();\r\n })\r\n }, () => { }, BlockUI, UnBlockUI)\r\n });\r\n }\r\n\r\n const LoadData = () => {\r\n let obj = {\r\n // nID: null,\r\n sContactUs: \"\"\r\n }\r\n AxiosPost(sController + \"/LoadData\", obj, (res) => {\r\n ResultAPI(false, res, null, () => {\r\n setEditID(res.nID);\r\n setContactUs(res.sContactUs);\r\n setCorparate(res.isCorparate)\r\n })\r\n })\r\n }\r\n useEffect(() => {\r\n LoadData();\r\n }, []);\r\n\r\n return (\r\n \r\n \r\n\r\n );\r\n}\r\n\r\nexport default ContactUs;\r\n","import React, { Fragment, useState } from 'react';\r\nimport Accordion from '@material-ui/core/Accordion';\r\nimport AccordionSummary from '@material-ui/core/AccordionSummary';\r\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\r\nimport { EventColorCompronent, MuiButtonApproveFront, MuiButtonEditeFront } from '../../SysComponent/MaterialComponent'\r\nimport { FnBlock_UI, ParseHtml } from '../../SysComponent/SystemComponent';\r\nimport {\r\n useStyles, StyledTable_Front, StyledTableCell_Front, StyledTableRow_Front, StyledTableHead_Front, Order,\r\n PerPageOptions, StyledTableBody_Front, stableSort, getComparator, HeadCell, defaultPage\r\n} from '../../form/Table/CustomTable';\r\nimport {\r\n Paper, TableContainer, TableSortLabel, TablePagination,Button\r\n} from '@material-ui/core';\r\nconst dateFormat = require('dateformat');\r\nconst EventTodayOperation = (props) => {\r\n const { data, onApprove, expanded, handleChange } = props;\r\n const { BlockUI, UnBlockUI } = FnBlock_UI();\r\n const classes = useStyles();\r\n const [lstEventOperation, setlstEventOperation] = useState(data as any[]);\r\n const [page, setPage] = React.useState(0);\r\n const [rowsPerPage, setRowsPerPage] = React.useState(defaultPage);\r\n const [order, setOrder] = React.useState('desc');\r\n const [orderBy, setOrderBy] = React.useState('dCreateDate');\r\n\r\n const handleChange_brac = (panel) => (event, newExpanded) => {\r\n handleChange(newExpanded ? panel : 0);\r\n };\r\n\r\n\r\n //#region set Pagination\r\n const Pagination = () => {\r\n const handleChangePage = (event: unknown, newPage: number) => {\r\n setPage(newPage);\r\n };\r\n\r\n const handleChangeRowsPerPage = (event: React.ChangeEvent) => {\r\n setRowsPerPage(parseInt(event.target.value, 10));\r\n setPage(0);\r\n };\r\n return (\r\n data.length > 0 ?\r\n , property: keyof any) => {\r\n const isAsc = orderBy === property && order === 'asc';\r\n setOrder(isAsc ? 'desc' : 'asc');\r\n setOrderBy(property);\r\n };\r\n\r\n const createSortHandler = (property) => (event: React.MouseEvent) => {\r\n handleRequestSort(event, property);\r\n };\r\n\r\n const headCells: HeadCell[] = [\r\n { id: 'sCompanyName', numeric: true, disablePadding: true, label: 'Company', width: 10, isSort: true },\r\n { id: 'sAreaName', numeric: false, disablePadding: true, label: 'Area/
Sub Area', width: 10, isSort: true },\r\n { id: 'nEventColorID', numeric: false, disablePadding: true, label: 'Status', width: 2, isSort: false },\r\n { id: 'sEventTypeName', numeric: false, disablePadding: false, label: 'Event Type', width: 15, isSort: true },\r\n { id: 'sDescription', numeric: true, disablePadding: false, label: 'Description', width: 17, isSort: true },\r\n { id: 'sReportby', numeric: true, disablePadding: false, label: ' Reporter', width: 10, isSort: true },\r\n { id: 'dCreateDate', numeric: true, disablePadding: false, label: 'Reporting Date', width: 8, isSort: true },\r\n { id: 'sStatusName', numeric: true, disablePadding: false, label: 'Reporting Status', width: 10, isSort: true },\r\n { id: 'isApprover', numeric: true, disablePadding: false, label: '', width: 2, isSort: false },\r\n ];\r\n\r\n return (\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n {headCells.map((headCell) => (\r\n \r\n {headCell.isSort ?\r\n \r\n {ParseHtml(headCell.label)}\r\n {orderBy === headCell.id ? (\r\n \r\n {order === 'desc' ? 'sorted descending' : 'sorted ascending'}\r\n \r\n ) : null}\r\n \r\n : ParseHtml(headCell.label)\r\n }\r\n \r\n ))}\r\n \r\n \r\n \r\n {lstEventOperation.length > 0 ?\r\n stableSort(lstEventOperation, getComparator(order, orderBy)).slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\r\n .map((item, index) => {\r\n return (\r\n \r\n {item.sCompanyName} \r\n {item.sAreaName} \r\n \r\n {\r\n onApprove(item.nEventReportID, \"View\");\r\n }}\r\n style={{ textTransform: \"none\", textAlign: \"left\", verticalAlign: \"top\", padding: \"0px\" }}>\r\n {item.sEventTypeName}\r\n \r\n \r\n {item.sDescription} \r\n {item.sReportby} \r\n {dateFormat(item.dCreateDate, \"dd/mm/yyyy HH:MM\")} \r\n {item.sStatusName} \r\n \r\n {item.isEdite && { onApprove(item.nEventReportID, \"Edite\") }} >Edit }\r\n {item.isApprover && { onApprove(item.nEventReportID, \"Approve\") }}>Approve }\r\n \r\n \r\n )\r\n })\r\n :\r\n \r\n No Data \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 EventTodayOperation;","import React, { Fragment, useState } from 'react';\r\nimport Accordion from '@material-ui/core/Accordion';\r\nimport AccordionSummary from '@material-ui/core/AccordionSummary';\r\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\r\nimport { EventColorCompronent, SecurityLevelColorCompronent, MuiButtonApproveFront, MuiButtonEditeFront } from '../../SysComponent/MaterialComponent'\r\nimport { FnBlock_UI, ParseHtml } from '../../SysComponent/SystemComponent';\r\nimport {\r\n useStyles, StyledTable_Front, StyledTableCell_Front, StyledTableRow_Front, StyledTableHead_Front, Order,\r\n PerPageOptions, StyledTableBody_Front, stableSort, getComparator, HeadCell, defaultPage\r\n} from '../../form/Table/CustomTable';\r\nimport { Paper, TableContainer, TableSortLabel, TablePagination,Button } from '@material-ui/core';\r\nconst dateFormat = require('dateformat');;\r\nconst EventTodaySecurity = (props) => {\r\n const { data, onApprove, expanded, handleChange } = props;\r\n const { BlockUI, UnBlockUI } = FnBlock_UI();\r\n const classes = useStyles();\r\n const [lstEventSecurity, setlstEventSecurity] = useState(data || [] as any[]);\r\n const [page, setPage] = React.useState(0);\r\n const [rowsPerPage, setRowsPerPage] = React.useState(defaultPage);\r\n const [order, setOrder] = React.useState('desc');\r\n const [orderBy, setOrderBy] = React.useState('dCreateDate');\r\n const handleChange_brac = (panel) => (event, newExpanded) => {\r\n handleChange(newExpanded ? panel : 0);\r\n };\r\n\r\n\r\n\r\n //#region set Pagination\r\n const Pagination = () => {\r\n const handleChangePage = (event: unknown, newPage: number) => {\r\n setPage(newPage);\r\n };\r\n\r\n const handleChangeRowsPerPage = (event: React.ChangeEvent) => {\r\n setRowsPerPage(parseInt(event.target.value, 10));\r\n setPage(0);\r\n };\r\n return (\r\n data.length > 0 ?\r\n , property: keyof any) => {\r\n const isAsc = orderBy === property && order === 'asc';\r\n setOrder(isAsc ? 'desc' : 'asc');\r\n setOrderBy(property);\r\n };\r\n\r\n const createSortHandler = (property) => (event: React.MouseEvent) => {\r\n handleRequestSort(event, property);\r\n };\r\n\r\n const headCells: HeadCell[] = [\r\n { id: 'sCompanyName', numeric: true, disablePadding: true, label: 'Company', width: 10, isSort: true },\r\n { id: 'sAreaName', numeric: false, disablePadding: true, label: 'Area/
Sub Area', width: 15, isSort: true },\r\n { id: 'sSecurityLevelColor', numeric: false, disablePadding: true, label: 'Security Status', width: 2, isSort: false },\r\n { id: 'sSecurityLevelName', numeric: false, disablePadding: false, label: 'Security Level', width: 15, isSort: true },\r\n { id: 'nEventColorID', numeric: false, disablePadding: true, label: 'Status', width: 2, isSort: false },\r\n { id: 'sEventTypeName', numeric: false, disablePadding: false, label: 'Event Type', width: 15, isSort: true },\r\n { id: 'sDescription', numeric: true, disablePadding: false, label: 'Description', width: 15, isSort: true },\r\n { id: 'sReportby', numeric: true, disablePadding: false, label: ' Reporter', width: 10, isSort: true },\r\n { id: 'dCreateDate', numeric: true, disablePadding: false, label: 'Reporting Date', width: 8, isSort: true },\r\n { id: 'sStatusName', numeric: true, disablePadding: false, label: 'Reporting Status', width: 10, isSort: true },\r\n { id: 'isApprover', numeric: true, disablePadding: false, label: '', width: 2, isSort: false },\r\n ];\r\n\r\n return (\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n {headCells.map((headCell) => (\r\n \r\n {headCell.isSort ?\r\n \r\n {ParseHtml(headCell.label)}\r\n {orderBy === headCell.id ? (\r\n \r\n {order === 'desc' ? 'sorted descending' : 'sorted ascending'}\r\n \r\n ) : null}\r\n \r\n : ParseHtml(headCell.label)\r\n }\r\n \r\n ))}\r\n \r\n \r\n \r\n {lstEventSecurity.length > 0 ?\r\n stableSort(lstEventSecurity, getComparator(order, orderBy)).slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\r\n .map((item, index) => {\r\n return (\r\n \r\n {item.sCompanyName} \r\n {item.sAreaName} \r\n {item.sSecurityLevelName} \r\n \r\n {\r\n onApprove(item.nEventReportID, \"View\");\r\n }}\r\n style={{ textTransform: \"none\", textAlign: \"left\", verticalAlign: \"top\", padding: \"0px\" }}>\r\n {item.sEventTypeName}\r\n \r\n \r\n {item.sDescription} \r\n {item.sReportby} \r\n {dateFormat(item.dCreateDate, \"dd/mm/yyyy HH:MM\")} \r\n {item.sStatusName} \r\n \r\n {item.isEdite && { onApprove(item.nEventReportID, \"Edite\") }} >Edit }\r\n {item.isApprover && { onApprove(item.nEventReportID, \"Approve\") }}>Approve }\r\n\r\n \r\n \r\n )\r\n })\r\n :\r\n \r\n No Data \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 EventTodaySecurity;","import React, { Fragment, useState } from 'react';\r\nimport Accordion from '@material-ui/core/Accordion';\r\nimport AccordionSummary from '@material-ui/core/AccordionSummary';\r\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\r\nimport { EventColorCompronent, MuiButtonApproveFront, MuiButtonEditeFront } from '../../SysComponent/MaterialComponent'\r\nimport { FnBlock_UI, ParseHtml } from '../../SysComponent/SystemComponent';\r\nimport {\r\n useStyles, StyledTable_Front, StyledTableCell_Front, StyledTableRow_Front, StyledTableHead_Front, Order,\r\n PerPageOptions, StyledTableBody_Front, stableSort, getComparator, HeadCell, defaultPage\r\n} from '../../form/Table/CustomTable';\r\nimport { Paper, TableContainer, TableSortLabel, TablePagination,Button } from '@material-ui/core';\r\nconst dateFormat = require('dateformat');\r\nconst EventTodayCSR = (props) => {\r\n const { data, onApprove, expanded, handleChange } = props;\r\n const { BlockUI, UnBlockUI } = FnBlock_UI();\r\n const classes = useStyles();\r\n const [lstEventCSR, setlstEventCSR] = useState(data || [] as any[]);\r\n const [page, setPage] = React.useState(0);\r\n const [rowsPerPage, setRowsPerPage] = React.useState(defaultPage);\r\n const [order, setOrder] = React.useState('desc');\r\n const [orderBy, setOrderBy] = React.useState('dCreateDate');\r\n const handleChange_brac = (panel) => (event, newExpanded) => {\r\n handleChange(newExpanded ? panel : 0);\r\n };\r\n\r\n\r\n //#region set Pagination\r\n const Pagination = () => {\r\n const handleChangePage = (event: unknown, newPage: number) => {\r\n setPage(newPage);\r\n };\r\n\r\n const handleChangeRowsPerPage = (event: React.ChangeEvent) => {\r\n setRowsPerPage(parseInt(event.target.value, 10));\r\n setPage(0);\r\n };\r\n return (\r\n data.length > 0 ?\r\n , property: keyof any) => {\r\n const isAsc = orderBy === property && order === 'asc';\r\n setOrder(isAsc ? 'desc' : 'asc');\r\n setOrderBy(property);\r\n };\r\n\r\n const createSortHandler = (property) => (event: React.MouseEvent) => {\r\n handleRequestSort(event, property);\r\n };\r\n const headCells: HeadCell[] = [\r\n { id: 'sCompanyName', numeric: true, disablePadding: true, label: 'Company', width: 10, isSort: true },\r\n { id: 'sAreaName', numeric: false, disablePadding: true, label: 'Area/
Sub Area', width: 15, isSort: true },\r\n { id: 'nEventColorID', numeric: false, disablePadding: true, label: 'Status', width: 2, isSort: false },\r\n { id: 'sEventTypeName', numeric: false, disablePadding: false, label: 'Event Type', width: 15, isSort: true },\r\n { id: 'sDescription', numeric: true, disablePadding: false, label: 'Description', width: 17, isSort: true },\r\n { id: 'sReportby', numeric: true, disablePadding: false, label: 'Reporter', width: 10, isSort: true },\r\n { id: 'dCreateDate', numeric: true, disablePadding: false, label: 'Reporting Date', width: 8, isSort: true },\r\n { id: 'sStatusName', numeric: true, disablePadding: false, label: 'Reporting Status', width: 10, isSort: true },\r\n { id: 'isApprover', numeric: true, disablePadding: false, label: '', width: 2, isSort: false },\r\n ];\r\n return (\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n {headCells.map((headCell) => (\r\n \r\n {headCell.isSort ?\r\n \r\n {ParseHtml(headCell.label)}\r\n {orderBy === headCell.id ? (\r\n \r\n {order === 'desc' ? 'sorted descending' : 'sorted ascending'}\r\n \r\n ) : null}\r\n \r\n : ParseHtml(headCell.label)\r\n }\r\n \r\n ))}\r\n \r\n \r\n \r\n {lstEventCSR.length > 0 ?\r\n stableSort(lstEventCSR, getComparator(order, orderBy)).slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\r\n .map((item, index) => {\r\n return (\r\n \r\n {item.sCompanyName} \r\n {item.sAreaName} \r\n \r\n {\r\n onApprove(item.nEventReportID, \"View\");\r\n }}\r\n style={{ textTransform: \"none\", textAlign: \"left\", verticalAlign: \"top\", padding: \"0px\" }}>\r\n {item.sEventTypeName}\r\n \r\n \r\n {item.sDescription} \r\n {item.sReportby} \r\n {dateFormat(item.dCreateDate, \"dd/mm/yyyy HH:MM\")} \r\n {item.sStatusName} \r\n \r\n {item.isEdite && { onApprove(item.nEventReportID, \"Edite\") }} >Edit }\r\n {item.isApprover && { onApprove(item.nEventReportID, \"Approve\") }}>Approve }\r\n \r\n \r\n )\r\n })\r\n :\r\n \r\n No Data \r\n \r\n }\r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n}\r\nexport default EventTodayCSR;","import React, { Fragment, useEffect, useState, useRef, useCallback } from 'react';\r\nimport { Grid, Card, FormControl, InputLabel, Select } from '@material-ui/core';\r\nimport EventTodayOperation from './EventTodayOperation'\r\nimport EventTodaySecurity from './EventTodaySecurity'\r\nimport EventTodayCSR from './EventTodayCSR'\r\nimport EventApprove from '../EventApprove'\r\nimport Accordion from '@material-ui/core/Accordion';\r\nimport AccordionSummary from '@material-ui/core/AccordionSummary';\r\nimport { FnBlock_UI, AxiosPost, ResultAPI, DialogConfirmDelete, DialogConfirm, MsgValidate, ParseHtml, MsgValidateMaxLength, resetFromSubmitData } from '../../SysComponent/SystemComponent';\r\nconst sController = \"EventToday\";\r\nconst dateFormat = require('dateformat');;\r\nconst EventToday = () => {\r\n const { BlockUI, UnBlockUI } = FnBlock_UI();\r\n const [lstEventOperation, setlstEventOperation] = useState([] as any[]);\r\n const [lstEventCSR, setlstEventCSR] = useState([] as any[]);\r\n const [lstEventSecurity, setlstEventSecurity] = useState([] as any[]);\r\n const [dReportDate, setReport] = useState(new Date());\r\n const [open, setOpen] = React.useState({ isShow: false, EventID: null, Mode: \"\" });\r\n const [openTab, setopenTab] = useState(0);\r\n const [lstEventGroupID, setlstEventGroupID] = useState([] as any[]);\r\n const LoadData = () => {\r\n let obj = {\r\n 'nMode': 1\r\n };\r\n AxiosPost(sController + \"/LoadEventToday\", obj, (response) => {\r\n ResultAPI(false, response, null, () => {\r\n setReport(response.dReportDate);\r\n setlstEventOperation(response.lstEventOperation);\r\n setlstEventCSR(response.lstEventCSR);\r\n setlstEventSecurity(response.lstEventSecurity);\r\n setlstEventGroupID(response.lstEventGoupID);\r\n \r\n })\r\n }, () => { }, BlockUI, UnBlockUI)\r\n };\r\n\r\n useEffect(() => {\r\n LoadData();\r\n }, []);\r\n\r\n const EventTodayOperationUI = useCallback(() => {\r\n return { setopenTab(e) }}\r\n onApprove={(e, m) => {\r\n handleShew(e, m);\r\n setopenTab(1);\r\n }} />\r\n }, [lstEventOperation, openTab])\r\n\r\n const EventTodayCSRUI = useCallback(() => {\r\n return { setopenTab(e) }}\r\n onApprove={(e, m) => {\r\n handleShew(e, m);\r\n setopenTab(3);\r\n }} />\r\n }, [lstEventCSR, openTab])\r\n\r\n const EventTodaySecurityUI = useCallback(() => {\r\n return { setopenTab(e) }}\r\n onApprove={(e, m) => {\r\n handleShew(e, m);\r\n setopenTab(2);\r\n }} />\r\n }, [lstEventSecurity, openTab])\r\n\r\n const handleClose = (value: string) => {\r\n setOpen({ ...open, isShow: false, EventID: null, Mode: \"\" });\r\n if ((+value) === 1) {\r\n LoadData();\r\n }\r\n };\r\n\r\n const handleShew = (EventID, Mode) => {\r\n setOpen({ ...open, isShow: true, EventID: EventID, Mode: Mode });\r\n };\r\n\r\n const EventApproveReport = useCallback(() => {\r\n return { handleClose(e) }}\r\n title={\"Event Approve\"}\r\n eventID={open.EventID}\r\n Mode={open.Mode} />\r\n }, [open]);\r\n\r\n\r\n return (\r\n \r\n \r\n )\r\n}\r\nexport default EventToday;","import React, { Component } from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport FormErrors from \"./formErrors\";\r\nimport { FastField, Field } from \"formik\";\r\nimport Select from \"react-select\";\r\nimport CreatableSelect from 'react-select/creatable';\r\nimport makeAnimated from 'react-select/animated';\r\nimport { i18n } from \"../../i18n\";\r\nimport {\r\n components as materialUiComponents,\r\n styles as materialUiStyles,\r\n} from \"./MaterialUI/reactSelectMaterialUi\";\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nconst animatedComponents = makeAnimated();\r\nconst controlStyles = {\r\n container: (provided, state) => ({\r\n ...provided,\r\n // width: \"100%\",\r\n // backgroundColor: state.isDisabled ? \"#ccc\" : \"#ffffff\",//rgba(0, 0, 0, 0.04)\r\n // // borderRadius: \"0\"\r\n // //marginTop: \"16px\",\r\n // //marginBottom: \"8px\",\r\n ...provided,\r\n width: \"100%\",\r\n marginTop: \"16px\",\r\n marginBottom: \"8px\",\r\n }),\r\n control: (provided) => ({\r\n ...provided,\r\n }),\r\n dropdownIndicator: base => ({\r\n ...base,\r\n cursor: \"pointer\",\r\n padding: \"6px\"\r\n }),\r\n indicatorsContainer: base => ({\r\n ...base,\r\n cursor: \"pointer\",\r\n // padding: \"6px\"\r\n }),\r\n menuPortal: base => ({\r\n ...base\r\n , zIndex: 1001\r\n })\r\n};\r\nexport class SelectNoForm extends Component {\r\n\r\n render() {\r\n const {\r\n label,\r\n placeholder,\r\n isClearable,\r\n defaultInputValue,\r\n menuPortalTarget,\r\n maxWidth,\r\n disable,\r\n } = this.props;\r\n return (\r\n i18n(\"autocomplete.noOptions\")}\r\n placeholder={placeholder || \"\"}\r\n isClearable={isClearable || false}\r\n isDisabled={disable || false}\r\n menuPortalTarget={menuPortalTarget ? undefined : document.body}\r\n />\r\n )\r\n }\r\n}\r\nexport default withStyles(materialUiStyles)(SelectNoForm);\r\n","import React, { useState, useEffect } from \"react\";\r\nimport { TextField } from \"@material-ui/core\";\r\nimport { withStyles, Theme, createStyles, makeStyles } from '@material-ui/core/styles';\r\nimport { i18n } from '../../i18n';\r\n\r\nconst StyledInput = withStyles((theme: Theme) =>\r\n createStyles({\r\n root: {\r\n width: \"100%\",\r\n top: \"4px\",\r\n\r\n // '& .MuiOutlinedInput-root': {\r\n // '& fieldset': {\r\n // borderRadius: \"0px\",\r\n // },\r\n // fontSize: \"14px\",\r\n // color: \"rgba(0, 0, 0, 0.87)\"\r\n // },\r\n // background: theme.palette.common.white,\r\n // \"& .MuiInputBase-root.Mui-disabled\": {\r\n // background: theme.palette.action.hover,\r\n // },\r\n \"& .MuiOutlinedInput-inputMarginDense\": {\r\n // paddingTop: \"8px\",\r\n // paddingBottom: \"8px\"\r\n minHeight: \"24px\",\r\n },\r\n \"& .MuiInputLabel-outlined\": {\r\n top: 1,\r\n }\r\n // width: \"100%\"\r\n }\r\n }),\r\n)(TextField);\r\n\r\nexport const TextFieldInputFreeText = (props) => {\r\n const { defaultValue, maxLength } = props;\r\n const onBlured = (e) => {\r\n if (props.onBlur) {\r\n props.onBlur(e.target.value,e);\r\n }\r\n }\r\n return (\r\n { onBlured(e); }}\r\n />\r\n );\r\n}\r\n","import React, { Component } from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport FormErrors from \"./formErrors\";\r\nimport { FastField } from \"formik\";\r\nimport DateFnsUtils from \"@material-ui/pickers/adapter/date-fns\";\r\nimport TextField from \"@material-ui/core/TextField\";\r\nimport {\r\n MobileDateRangePicker,\r\n DateRangeDelimiter,\r\n LocalizationProvider,\r\n DateTimePicker,\r\n DatePicker,\r\n} from \"@material-ui/pickers\";\r\nimport DateRangeOutlinedIcon from '@material-ui/icons/DateRangeOutlined';\r\nimport InputAdornment from '@material-ui/core/InputAdornment/InputAdornment';\r\nimport { getLanguage } from \"../../i18n\";\r\nimport { i18n } from \"../../i18n\";\r\nimport { withStyles, Theme, createStyles, makeStyles } from '@material-ui/core/styles';\r\n\r\nconst StyledInput = withStyles((theme: Theme) =>\r\n createStyles({\r\n root: {\r\n width: \"100%\",\r\n top: \"4px\",\r\n\r\n // '& .MuiOutlinedInput-root': {\r\n // '& fieldset': {\r\n // borderRadius: \"0px\",\r\n // },\r\n // fontSize: \"14px\",\r\n // color: \"rgba(0, 0, 0, 0.87)\"\r\n // },\r\n // background: theme.palette.common.white,\r\n // \"& .MuiInputBase-root.Mui-disabled\": {\r\n // background: theme.palette.action.hover,\r\n // },\r\n \"& .MuiOutlinedInput-inputMarginDense\": {\r\n // paddingTop: \"8px\",\r\n // paddingBottom: \"8px\"\r\n minHeight: \"24px\",\r\n },\r\n \"& .MuiInputLabel-outlined\": {\r\n top: 1,\r\n }\r\n // width: \"100%\"\r\n }\r\n }),\r\n)(TextField);\r\n\r\nexport const DatePickerRangeNoForm = (props) => {\r\n const {\r\n label,\r\n name,\r\n hint,\r\n placeholder,\r\n autoFocus,\r\n autoComplete,\r\n inputProps,\r\n required,\r\n showTime,\r\n handleDateChange,\r\n defaultValue,\r\n } = props;\r\n const format = showTime ? \"dd/MM/yyyy HH:mm\" : \"dd/MM/yyyy\";\r\n const [selectDate, setselectDate] = React.useState(defaultValue || [null, null]); //this.value() || [null, null];\r\n\r\n const handleChangeValue = (date) => {\r\n setselectDate(date);\r\n };\r\n\r\n return (\r\n \r\n (response.lstEventData).Distinct().ToArray());\r\n\r\n\r\n })\r\n }, () => { }, BlockUI, UnBlockUI)\r\n };\r\n\r\n useEffect(() => {\r\n LoadData();\r\n }, []);\r\n\r\n const GetData = () => {\r\n let obj = {\r\n 'nEventGroup': selectData.EventGrupe != \"\" ? +selectData.EventGrupe : null,\r\n 'nEventType': selectData.EventType != \"\" && selectData.EventType != null ? +selectData.EventType : null,\r\n 'nArea': selectData.Area != \"\" && selectData.Area != null ? +selectData.Area : null,\r\n 'nCompyne': selectData.Compyne != \"\" ? +selectData.Compyne : null,\r\n 'nLavel': (+selectData.EventGrupe) === 3 ? (selectData.Lavel != \"\" && selectData.Lavel != null ? +selectData.Lavel : null) : null,\r\n 'sText': selectData.TextSerch,\r\n 'sStartDate': selectDate[0] != null ? dateFormat(selectDate[0], \"dd/mm/yyyy\") : \"\",\r\n 'sEndDate': selectDate[1] != null ? dateFormat(selectDate[1], \"dd/mm/yyyy\") : \"\",\r\n 'sMode': \"\",\r\n 'sArrEventID': \"\"\r\n };\r\n AxiosPost(sController + \"/GetData\", obj, (response) => {\r\n ResultAPI(false, response, null, () => {\r\n setRowData(new LINQ(response.lstEventData).Distinct().ToArray());\r\n setPage(0);\r\n setRowsPerPage(10);\r\n \r\n if (response.lstEventData.length > 0) {\r\n setShowExport(true)\r\n }\r\n else setShowExport(false)\r\n\r\n })\r\n }, () => { }, BlockUI, UnBlockUI)\r\n };\r\n //#region Export\r\n const GetExportData = async () => {\r\n // BlockUI();\r\n let obj = {\r\n 'nEventGroup': selectData.EventGrupe != \"\" ? +selectData.EventGrupe : null,\r\n 'nEventType': selectData.EventType != \"\" && selectData.EventType != null ? +selectData.EventType : null,\r\n 'nArea': selectData.Area != \"\" && selectData.Area != null ? +selectData.Area : null,\r\n 'nCompyne': selectData.Compyne != \"\" ? +selectData.Compyne : null,\r\n 'nLavel': (+selectData.EventGrupe) === 3 ? (selectData.Lavel != \"\" && selectData.Lavel != null ? +selectData.Lavel : null) : null,\r\n 'sText': selectData.TextSerch,\r\n 'sStartDate': selectDate[0] != null ? dateFormat(selectDate[0], \"dd/mm/yyyy\") : \"\",\r\n 'sEndDate': selectDate[1] != null ? dateFormat(selectDate[1], \"dd/mm/yyyy\") : \"\",\r\n 'lstEventData': rowsData,\r\n 'lstEventGroup': MasterData.lstEventGroup,\r\n 'lstArea': MasterData.lstArea,\r\n 'lstEventType': MasterData.lstEventType,\r\n 'lstLevel': MasterData.lstLavel\r\n }\r\n\r\n let fileName = \"6.Event Record_Export_\" + dateFormat(new Date(), \"ddMMyyyyHHmm\") + \".xlsx\";\r\n await AxiosPostExportFile(sController + \"/ExportExcels\", obj, fileName, () => { }, BlockUI, UnBlockUI);\r\n }\r\n\r\n //#endregion\r\n const getEventType = (EventGrupe, Compyne, Area) => {\r\n let obj = {\r\n 'nEventGroup': EventGrupe != \"\" ? +EventGrupe : null,\r\n 'nCompyne': Compyne != \"\" ? +Compyne : null,\r\n 'nArea': Area != \"\" ? +Area : null,\r\n };\r\n if (Area != \"\") {\r\n AxiosPost(sController + \"/GetEventType\", obj, (response) => {\r\n ResultAPI(false, response, null, () => {\r\n MasterData.lstEventType = new LINQ(response).Distinct().ToArray();\r\n setMasterData({ ...MasterData });\r\n })\r\n }, () => { }, BlockUI, UnBlockUI)\r\n } else {\r\n MasterData.lstEventType = [];\r\n setMasterData({ ...MasterData });\r\n }\r\n };\r\n\r\n const getArea = (EventGrupe, Compyne) => {\r\n let obj = {\r\n 'nEventGroup': EventGrupe != \"\" ? +EventGrupe : null,\r\n 'nCompyne': Compyne != \"\" ? +Compyne : null,\r\n };\r\n AxiosPost(sController + \"/GetAear\", obj, (response) => {\r\n ResultAPI(false, response, null, () => {\r\n MasterData.lstArea = response;\r\n setMasterData({ ...MasterData });\r\n })\r\n }, () => { }, BlockUI, UnBlockUI)\r\n };\r\n\r\n\r\n const onDelete = () => {\r\n DialogConfirmDelete(() => {\r\n let qbj = {\r\n 'lstEventID': selected\r\n };\r\n AxiosPost(sController + \"/DeleteEvent\", qbj, (response) => {\r\n ResultDeleteAPI(false, response, null, () => {\r\n LoadData();\r\n setSelected([]);\r\n })\r\n }, () => { }, BlockUI, UnBlockUI)\r\n });\r\n };\r\n //#endregion\r\n\r\n //#region Sort \r\n const [page, setPage] = React.useState(0);\r\n const [rowsPerPage, setRowsPerPage] = React.useState(defaultPage);\r\n const [order, setOrder] = React.useState('desc');\r\n const [orderBy, setOrderBy] = React.useState('dEventDate');\r\n const [selected, setSelected] = React.useState([]);\r\n const isSelected = (ID: number) => selected.indexOf(ID) !== -1;\r\n const handleRequestSort = (event: React.MouseEvent, property: keyof any) => {\r\n const isAsc = orderBy === property && order === 'asc';\r\n setOrder(isAsc ? 'desc' : 'asc');\r\n setOrderBy(property);\r\n };\r\n\r\n const createSortHandler = (property) => (event: React.MouseEvent) => {\r\n handleRequestSort(event, property);\r\n };\r\n const headCells: HeadCell[] = [\r\n { id: 'No', numeric: true, disablePadding: true, label: 'No.', width: 1, isSort: false },\r\n { id: 'dEventDate', numeric: true, disablePadding: true, label: 'Event Date', width: 10, isSort: true },\r\n { id: 'sCompanyName', numeric: false, disablePadding: true, label: 'Company', width: 1, isSort: true },\r\n { id: 'sAreaName', numeric: false, disablePadding: true, label: 'Area/Sub Area', width: 15, isSort: true },\r\n { id: 'sEventGroupName', numeric: false, disablePadding: true, label: 'Event Group', width: 9, isSort: true },\r\n { id: '', numeric: true, disablePadding: false, label: 'Status', width: 2, isSort: false },\r\n { id: 'sEventTypeName', numeric: false, disablePadding: false, label: 'Event Type', width: 25, isSort: true },\r\n { id: 'sReportby', numeric: true, disablePadding: false, label: 'Reporter', width: 19, isSort: true },\r\n { id: 'dCreateDate', numeric: true, disablePadding: false, label: 'Reporting Date', width: 20, isSort: true },\r\n { id: 'sStatusName', numeric: true, disablePadding: false, label: 'Reporting Status', width: 20, isSort: true },\r\n { id: 'isApprover', numeric: true, disablePadding: false, label: '', width: 2, isSort: false },\r\n ];\r\n\r\n const handleSelectAllClick = (event: React.ChangeEvent) => {\r\n if (event.target.checked) {\r\n let ed = new LINQ(rowsData).Where(w => w.isDelete === true).ToArray();\r\n const newSelecteds = ed.map((n) => n.nEventReportID);\r\n //isDelete\r\n setSelected(newSelecteds);\r\n return;\r\n }\r\n setSelected([]);\r\n };\r\n const handleClick = (event: React.MouseEvent, ID: any) => {\r\n const selectedIndex = selected.indexOf(ID);\r\n let newSelected: number[] = [];\r\n\r\n if (selectedIndex === -1) {\r\n newSelected = newSelected.concat(selected, ID);\r\n } else if (selectedIndex === 0) {\r\n newSelected = newSelected.concat(selected.slice(1));\r\n } else if (selectedIndex === selected.length - 1) {\r\n newSelected = newSelected.concat(selected.slice(0, -1));\r\n } else if (selectedIndex > 0) {\r\n newSelected = newSelected.concat(\r\n selected.slice(0, selectedIndex),\r\n selected.slice(selectedIndex + 1),\r\n );\r\n }\r\n setSelected(newSelected);\r\n };\r\n //#endregion\r\n\r\n //#region set Pagination\r\n const Pagination = () => {\r\n const handleChangePage = (event: unknown, newPage: number) => {\r\n setPage(newPage);\r\n };\r\n\r\n const handleChangeRowsPerPage = (event: React.ChangeEvent) => {\r\n setRowsPerPage(parseInt(event.target.value, 10));\r\n setPage(0);\r\n };\r\n return (\r\n rowsData.length > 0 ?\r\n \r\n \r\n {selected.length > 0 && (\r\n \r\n \r\n {selected.length > 0 && (\r\n \r\n Selected ({selected.length}) Row\r\n \r\n )}\r\n \r\n \r\n \r\n \r\n : \r\n\r\n \r\n \r\n x.value === selectData.EventGrupe)}\r\n onChange={values => {\r\n setSelectData({ ...selectData, EventGrupe: (values != null ? values.value : \"\"), Compyne: \"\", Area: \"\", EventType: \"\" });\r\n setMasterData({\r\n ...MasterData, lstArea: []\r\n })\r\n }} />\r\n \r\n \r\n x.value === selectData.Compyne) : MasterData.lstCompyne.find(x => x.value === selectData.Compyne)}\r\n onChange={values => {\r\n setSelectData({ ...selectData, Compyne: (values != null ? values.value : \"\"), Area: \"\", EventType: \"\" });\r\n getArea(selectData.EventGrupe, values != null ? values.value : 0);\r\n }} />\r\n \r\n \r\n x.value === selectData.Area)}\r\n onChange={values => {\r\n setSelectData({\r\n ...selectData, Area: (values != null ? values.value : \"\"), EventType: \"\"\r\n });\r\n getEventType(selectData.EventGrupe, selectData.Compyne, values != null ? values.value : 0);\r\n\r\n }} />\r\n \r\n \r\n 0 ? MasterData.lstEventType.find(x => x.value === selectData.EventType) : null)}\r\n onChange={values => { setSelectData({ ...selectData, EventType: (values != null ? values.value : \"\") }) }} />\r\n \r\n \r\n x.value === selectData.Lavel) : ''}\r\n onChange={values => { setSelectData({ ...selectData, Lavel: (values != null ? values.value : \"\") }) }}\r\n disable={(+selectData.EventGrupe) !== 3} />\r\n \r\n \r\n { setSelectData({ ...selectData, TextSerch: val }) }} />\r\n \r\n \r\n {\r\n setSelectDate(e);\r\n }}> \r\n \r\n \r\n { GetData() }} />\r\n \r\n \r\n \r\n \r\n\r\n \r\n )\r\n };\r\n //#endregion\r\n\r\n const [open, setOpen] = React.useState({ isShow: false, EventID: null, Mode: \"\" });\r\n\r\n const handleClose = (value: string) => {\r\n setOpen({ ...open, isShow: false, EventID: null, Mode: \"\" });\r\n if ((+value) === 1) {\r\n GetData();\r\n }\r\n };\r\n\r\n const handleShew = (EventID, Mode) => {\r\n setOpen({ ...open, isShow: true, EventID: EventID, Mode: Mode });\r\n };\r\n const EventApproveReport = React.useCallback(() => {\r\n return { handleClose(e) }}\r\n title={\r\n open.Mode === \"Approve\" ? \"Approve Data\" : open.Mode === \"View\" ? \"Detail\" : \"Edit Data\"}\r\n eventID={open.EventID}\r\n Mode={open.Mode} />\r\n }, [open]);\r\n\r\n return (\r\n \r\n \r\n )\r\n}\r\nexport default EventRecord;\r\n","import React, { Fragment, useEffect } from 'react';\r\nimport { List as LINQ } from 'linqts';\r\nimport 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';\r\nimport * as am4core from \"@amcharts/amcharts4/core\";\r\nimport * as am4charts from \"@amcharts/amcharts4/charts\";\r\nimport am4themes_animated from \"@amcharts/amcharts4/themes/animated\";\r\nimport am4themes_kelly from \"@amcharts/amcharts4/themes/kelly\";\r\n\r\nam4core.useTheme(am4themes_animated);\r\nam4core.useTheme(am4themes_kelly);\r\nam4core.addLicense(\"CH208466903\");\r\n\r\nconst dateFormat = require('dateformat');\r\nconst Charts_ByEventType = (props) => {\r\n const { data, startDate, endDate, exportImg, nameCharts, dAsof } = props;\r\n const [Conwidtht, setConwidtht] = React.useState(\"100%\");\r\n // const [objData, setobjData] = useState({ lstByEventType: [] as any[], lstAreaAll: [] as any[] });\r\n const chartData = [] as any[];\r\n useEffect(() => {\r\n if (data != null) {\r\n new LINQ(data.lstByEventType).OrderBy(o => o.nEventOrderID).ToArray().forEach(f => {\r\n let objData = { 'EventTypeName': f.nEventTypeName };\r\n f.lstAreaDetail.forEach(x => {\r\n objData[x.sAreaName] = x.nCount;\r\n });\r\n chartData.push(objData);\r\n });\r\n\r\n let objDataTotalNot = { 'EventTypeName': \"Not Report\" };\r\n (data.lstNotReport||[]).forEach(x => {\r\n objDataTotalNot[x.sAreaName] = x.nCount;\r\n });\r\n chartData.push(objDataTotalNot);\r\n\r\n if (chartData.length < 5) {\r\n setConwidtht(\"50%\");\r\n }\r\n let chart = am4core.create(\"chartdiv\" + (nameCharts || \"\"), am4charts.XYChart);\r\n let arrColor = [\"#0000FF\", \"#228B22\", \"#9400D3\", \"#00CED1\", \"#FF1493\", \"#FFD700\", \"#FFA500\", \"#FF8C00\", \"#7B68EE\", \"#A3E7D8\", \"#F298B1\", \"#A4C8F0\", \"#F9A484\", \"#F4EFAF\", \"#E1FD8E\", \"#EFA694\", \"#FFBE7D\", \"#88BBDD\", \"#6699AA\", \"#88DDBB\", \"#88BBAA\", \"#B9E3AE\", \"#BACAB3\", \"#FFFF88\", \"#9876B1\", \"#F2ED8C\", \"#CBAB8D\", \"#FFDDDD\", \"#FDB4BF\", \"#FF9797\", \"#D0B3E1\", \"#B3B3D9\", \"#C0C0C0\"];\r\n chart.colors.list = arrColor.map((el, index) => { return am4core.color(el) });\r\n\r\n chart.responsive.enabled = true;\r\n // Add data\r\n chart.data = chartData;\r\n // Create axes\r\n var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());\r\n categoryAxis.dataFields.category = \"EventTypeName\";\r\n categoryAxis.renderer.grid.template.location = 0;\r\n categoryAxis.renderer.minGridDistance = 20;\r\n\r\n\r\n\r\n var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());\r\n valueAxis.title.text = \" Report Amount\";\r\n valueAxis.min = 0;\r\n\r\n\r\n // Create series\r\n data.lstAreaAll.forEach(f => {\r\n var series = chart.series.push(new am4charts.ColumnSeries3D());\r\n series.dataFields.valueY = f.sAreaName;\r\n series.dataFields.categoryX = \"EventTypeName\";\r\n series.name = f.sAreaName;\r\n series.stacked = true;\r\n // series.calculatePercent = false;\r\n // series.tooltipText = \"{name}: [bold]{valueY}[/]\";\r\n\r\n series.columns.template.tooltipText = \"{name}: [bold]{valueY}[/]\";\r\n\r\n });\r\n\r\n var label = categoryAxis.renderer.labels.template;\r\n label.tooltipText = \"{EventTypeName}\";\r\n label.fontSize = 14;\r\n categoryAxis.events.on(\"sizechanged\", function (ev) {\r\n var axis = ev.target;\r\n var cellWidth = axis.pixelWidth / (axis.endIndex - axis.startIndex);\r\n axis.renderer.labels.template.rotation = -45;\r\n axis.renderer.labels.template.horizontalCenter = \"right\";\r\n axis.renderer.labels.template.verticalCenter = \"top\";//middle\r\n\r\n });\r\n\r\n\r\n\r\n // chart.paddingBottom = 150;\r\n // chart.maskBullets = false;\r\n\r\n // Add cursor\r\n // chart.cursor = new am4charts.XYCursor();\r\n // chart.cursor.behavior = \"none\";\r\n // chart.cursor.lineY.disabled = true;\r\n // chart.cursor.lineX.disabled = true;\r\n // Add legend\r\n chart.legend = new am4charts.Legend();\r\n //ให้ Lagend อยู่ด้านบน\r\n chart.legend.position = \"top\";\r\n chart.legend.contentAlign = \"center\";\r\n\r\n chart.exporting.getImage(\"png\").then((data) => {\r\n exportImg(data);\r\n });\r\n\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n \r\n )\r\n\r\n};\r\n\r\nexport default Charts_ByEventType;","import React, { Component } from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport FormErrors from \"./formErrors\";\r\nimport { FastField } from \"formik\";\r\nimport FormLabel from \"@material-ui/core/FormLabel\";\r\nimport FormControl from \"@material-ui/core/FormControl\";\r\nimport FormGroup from \"@material-ui/core/FormGroup\";\r\nimport FormControlLabel from \"@material-ui/core/FormControlLabel\";\r\nimport FormHelperText from \"@material-ui/core/FormHelperText\";\r\nimport Checkbox from \"@material-ui/core/Checkbox\";\r\nimport Grid from \"@material-ui/core/Grid\";\r\nimport Tooltip from '@material-ui/core/Tooltip';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport SmsOutlinedIcon from '@material-ui/icons/SmsOutlined';\r\nimport { ParseHtml } from '../SysComponent/SystemComponent';\r\nconst CheckboxListNoForm = (props) => {\r\n const {\r\n label,\r\n name,\r\n inputProps,\r\n required,\r\n dataProvider,\r\n defaultAll,\r\n onSelect\r\n } = props;\r\n const [checked, setchecked] = React.useState(defaultAll || [] as any[])\r\n const isSelected = (ID: number) => checked.indexOf(ID) !== -1;\r\n\r\n const handleSelect = (event: React.MouseEvent, ID: any) => {\r\n const selectedIndex = checked.indexOf(ID);\r\n let newSelected: number[] = [];\r\n\r\n if (selectedIndex === -1) {\r\n newSelected = newSelected.concat(checked, ID);\r\n } else if (selectedIndex === 0) {\r\n newSelected = newSelected.concat(checked.slice(1));\r\n } else if (selectedIndex === checked.length - 1) {\r\n newSelected = newSelected.concat(checked.slice(0, -1));\r\n } else if (selectedIndex > 0) {\r\n newSelected = newSelected.concat(\r\n checked.slice(0, selectedIndex),\r\n checked.slice(selectedIndex + 1),\r\n );\r\n }\r\n setchecked(newSelected);\r\n onSelect(newSelected);\r\n };\r\n\r\n return (\r\n \r\n {label} \r\n \r\n \r\n {dataProvider.map((row, index) => (\r\n\r\n \r\n handleSelect(event, row.id)}\r\n {...inputProps}\r\n />\r\n }\r\n label={row.label}\r\n />\r\n \r\n ))}\r\n \r\n \r\n \r\n );\r\n}\r\nexport default CheckboxListNoForm;","import React, { Fragment, useEffect } from 'react';\r\nimport 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';\r\nimport 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';\r\nimport { List as LINQ } from 'linqts';\r\nimport * as am4core from \"@amcharts/amcharts4/core\";\r\nimport * as am4charts from \"@amcharts/amcharts4/charts\";\r\nimport am4themes_animated from \"@amcharts/amcharts4/themes/animated\";\r\nimport am4themes_kelly from \"@amcharts/amcharts4/themes/kelly\";\r\nimport CheckboxListNoForm from \"../../form/CheckboxListNoForm\";\r\nconst dateFormat = require('dateformat');\r\nam4core.useTheme(am4themes_animated);\r\nam4core.useTheme(am4themes_kelly);\r\nam4core.addLicense(\"CH208466903\");\r\nconst Charts_SummaryByEventType = (props) => {\r\n const { data, startDate, endDate, exportImg, SelectAreaSumary, nameCharts,dAsof } = props;\r\n const [AreaData, setAreaData] = React.useState([] as any[]);\r\n const [AreaSelect, setAreaSelect] = React.useState([] as any[]);\r\n\r\n useEffect(() => {\r\n if (data != null) {\r\n data.lstAreaAll.forEach(f => {\r\n AreaData.push({ id: f.nAreaID, label: f.sAreaName });\r\n AreaSelect.push(f.nAreaID);\r\n });\r\n\r\n setAreaData([...AreaData]);\r\n setAreaSelect([...AreaSelect]);\r\n createCharts(AreaSelect);\r\n }\r\n }, []);\r\n\r\n const createCharts = (AreaSelect_) => {\r\n const chartData = [] as any[];\r\n\r\n let lstAreaID = new LINQ(AreaSelect_).ToList();\r\n data.lstByEventType.forEach(f => {\r\n let arrS = new LINQ(f.lstAreaDetail).Where(w => lstAreaID.Contains(w.nAreaID)).ToList();\r\n let nCont = 0;\r\n arrS.ForEach(y => {\r\n nCont = (nCont + y.nCountDay);\r\n });\r\n let objData = {\r\n 'EventTypeID': f.nEventTypeID,\r\n 'EventTypeName': f.nEventTypeName,\r\n 'Count': nCont\r\n };\r\n chartData.push(objData);\r\n\r\n });\r\n // Create chart instance\r\n var chart = am4core.create(\"chartSummaryByEventTypediv\" + (nameCharts || \"\"), am4charts.PieChart3D);\r\n\r\n // Add data\r\n chart.data = chartData;\r\n\r\n // Add and configure Series\r\n var pieSeries = chart.series.push(new am4charts.PieSeries3D());\r\n pieSeries.dataFields.value = \"Count\";\r\n pieSeries.dataFields.category = \"EventTypeName\";\r\n let arrColor = [\"#10bc2d\",\"#0000FF\", \"#9400D3\", \"#F78813\", \"#FF0000\", \"#00CED1\", \"#FF1493\", \"#FFD700\", \"#FFA500\", \"#FF8C00\", \"#7B68EE\", \"#A3E7D8\", \"#F298B1\", \"#A4C8F0\", \"#F9A484\", \"#F4EFAF\", \"#E1FD8E\", \"#EFA694\", \"#FFBE7D\", \"#88BBDD\", \"#6699AA\", \"#88DDBB\", \"#88BBAA\", \"#B9E3AE\", \"#BACAB3\", \"#FFFF88\", \"#9876B1\", \"#F2ED8C\", \"#CBAB8D\", \"#FFDDDD\", \"#FDB4BF\", \"#FF9797\", \"#D0B3E1\", \"#B3B3D9\", \"#C0C0C0\"];\r\n\r\n\r\n pieSeries.ticks.template.disabled = true;\r\n pieSeries.alignLabels = false;\r\n //pieSeries.labels.template.text = \"{value.percent.formatNumber('#.0')}%\";\r\n\r\n pieSeries.labels.template.adapter.add('radius', function (radius, target) {\r\n\r\n if (target.dataItem && (target.dataItem.values.value.percent === 0)) {\r\n target.dataItem.label.text = \"\";\r\n return 0;\r\n } else {\r\n target.dataItem.label.text = \"{value.percent.formatNumber('#.0')}%\";\r\n }\r\n return radius;\r\n });\r\n\r\n pieSeries.labels.template.radius = am4core.percent(-50);\r\n pieSeries.labels.template.fill = am4core.color(\"white\");\r\n pieSeries.colors.list = arrColor.map((el, index) => { return am4core.color(el) });\r\n\r\n pieSeries.labels.template.adapter.add(\"radius\", function (radius, target) {\r\n if (target.dataItem && (target.dataItem.values.value.percent < 10)) {\r\n return 0;\r\n }\r\n return radius;\r\n });\r\n pieSeries.labels.template.adapter.add(\"fill\", function (color, target) {\r\n var dummyDataItem = pieSeries.dataItems.getIndex(0);\r\n if (target.dataItem && (target.dataItem.values.value.percent < 10)) {\r\n return am4core.color(\"#000\");\r\n }\r\n return color;\r\n });\r\n\r\n chart.legend = new am4charts.Legend();\r\n chart.exporting.getImage(\"png\").then((data) => {\r\n exportImg(data);\r\n });\r\n SelectAreaSumary(AreaSelect_);\r\n\r\n };\r\n const CheckboxListNoForm_c = React.useCallback(() => {\r\n return ( {\r\n setAreaSelect([...e]);\r\n createCharts(e);\r\n }} />)\r\n }, []);\r\n\r\n return (\r\n \r\n {/* Summary By Event Type */}\r\n \r\n )\r\n\r\n};\r\n\r\nexport default Charts_SummaryByEventType;","import React, { Fragment, useState, useEffect } from 'react';\r\nimport 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';\r\nimport * as am4core from \"@amcharts/amcharts4/core\";\r\nimport * as am4charts from \"@amcharts/amcharts4/charts\";\r\nimport am4themes_animated from \"@amcharts/amcharts4/themes/animated\";\r\nimport am4themes_kelly from \"@amcharts/amcharts4/themes/kelly\";\r\nconst dateFormat = require('dateformat');\r\nam4core.useTheme(am4themes_animated);\r\nam4core.useTheme(am4themes_kelly);\r\nam4core.addLicense(\"CH208466903\");\r\nconst Chats_ReportStatistics = (props) => {\r\n const { data, startDate, endDate, exportImg, nameCharts,dAsof } = props;\r\n const chartData = [] as any[];\r\n const [Conwidtht, setConwidtht] = React.useState(\"100%\");\r\n useEffect(() => {\r\n if (data != null) {\r\n var chart = am4core.create(\"chartStatisticsdiv\" + (nameCharts || \"\"), am4charts.XYChart);\r\n // let arrColor =[\"#3498DB\",\"#7B7D7D\"];\r\n let arrColor = [\"#208EFB\", \"#E5E7E9\"];\r\n chart.colors.list = arrColor.map((el, index) => { return am4core.color(el) });\r\n let valueAxisMax = 6;\r\n data.lstAreaAll.forEach(f => {\r\n let ReportCount = f.nStatisticsRepor;\r\n // data.lstByEventType.forEach(d => {\r\n // d.lstAreaDetail.forEach(x => {\r\n // if (x.nAreaID === f.nAreaID) ReportCount = (ReportCount + x.nCountDay);\r\n // });\r\n // });\r\n\r\n // var qNotReport = new LINQ(data.lstNotReport).Where(w => w.nAreaID === f.nAreaID).FirstOrDefault();\r\n let NotReportCount = f.nStatisticsNotRepor;//qNotReport != null ? qNotReport.nCount : 0\r\n chartData.push({ \"AreaName\": f.sAreaName, \"Reporting\": ReportCount, \"NotReport\": NotReportCount })\r\n if (valueAxisMax < ReportCount) valueAxisMax = ReportCount;\r\n if (valueAxisMax < NotReportCount) valueAxisMax = NotReportCount;\r\n });\r\n if (chartData.length < 5) {\r\n setConwidtht(\"50%\");\r\n }\r\n\r\n // Add data\r\n chart.data = chartData;\r\n // Create axes\r\n var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());\r\n categoryAxis.dataFields.category = \"AreaName\";\r\n categoryAxis.title.text = \"\";\r\n categoryAxis.renderer.grid.template.location = 0;\r\n categoryAxis.renderer.minGridDistance = 20;\r\n\r\n var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());\r\n valueAxis.title.text = \"Day\";\r\n valueAxis.min = 0;\r\n valueAxis.max = valueAxisMax + 5;\r\n // Create series\r\n var series = chart.series.push(new am4charts.ColumnSeries());\r\n series.dataFields.valueY = \"Reporting\";\r\n series.dataFields.categoryX = \"AreaName\";\r\n series.name = \"Reporting\";\r\n series.columns.template.tooltipText = \"{name}: [bold]{valueY}[/]\";\r\n\r\n var bullet = series.bullets.push(new am4charts.LabelBullet())\r\n bullet.interactionsEnabled = true\r\n bullet.dy = (-7);\r\n bullet.label.text = '{valueY}'\r\n bullet.label.fill = am4core.color('#000')\r\n\r\n // var labelBullet = series.bullets.push(new am4charts.LabelBullet());\r\n // labelBullet.label.text = \"{valueY}\";\r\n // labelBullet.locationY = 0.9;\r\n // labelBullet.label.hideOversized = true;\r\n // This has no effect\r\n // series.stacked = true;\r\n\r\n var series2 = chart.series.push(new am4charts.ColumnSeries());\r\n series2.dataFields.valueY = \"NotReport\";\r\n series2.dataFields.categoryX = \"AreaName\";\r\n series2.name = \"Not Reporting\";\r\n series2.columns.template.tooltipText = \"{name}: [bold]{valueY}[/]\";\r\n\r\n var bullet2 = series2.bullets.push(new am4charts.LabelBullet())\r\n bullet2.interactionsEnabled = true\r\n bullet2.dy = (-7);\r\n bullet2.label.text = '{valueY}'\r\n bullet2.label.fill = am4core.color('#000')\r\n\r\n\r\n // var labelBullet2 = series2.bullets.push(new am4charts.LabelBullet());\r\n // labelBullet2.label.text = \"{valueY}\";\r\n // labelBullet2.locationY = 0.9;\r\n // labelBullet2.label.hideOversized = true;\r\n\r\n var label = categoryAxis.renderer.labels.template;\r\n label.truncate = true;\r\n //label.renderer.labels.template.disabled = true;\r\n // label.maxWidth = 130;\r\n label.tooltipText = \"{AreaName}\";\r\n label.fontSize = 14;\r\n categoryAxis.events.on(\"sizechanged\", function (ev) {\r\n var axis = ev.target;\r\n var cellWidth = axis.pixelWidth / (axis.endIndex - axis.startIndex);\r\n // if (cellWidth < axis.renderer.labels.template.maxWidth) {\r\n axis.renderer.labels.template.rotation = -45;\r\n axis.renderer.labels.template.horizontalCenter = \"right\";\r\n axis.renderer.labels.template.verticalCenter = \"middle\";\r\n // }\r\n // else {\r\n // axis.renderer.labels.template.rotation = -45;\r\n // axis.renderer.labels.template.horizontalCenter = \"middle\";\r\n // axis.renderer.labels.template.verticalCenter = \"top\";\r\n // }\r\n });\r\n // Add cursor\r\n // chart.cursor = new am4charts.XYCursor();\r\n // chart.cursor.behavior = \"none\"\r\n // Add legend\r\n chart.legend = new am4charts.Legend();\r\n //ให้ Lagend อยู่ด้านบน\r\n chart.legend.position = \"top\";\r\n chart.legend.contentAlign = \"center\";\r\n\r\n chart.exporting.getImage(\"png\").then((data) => {\r\n exportImg(data);\r\n });\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n \r\n )\r\n\r\n};\r\n\r\nexport default Chats_ReportStatistics;","import React, { Fragment, useState, useEffect } from 'react';\r\nimport 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';\r\nimport { Grid } from '@material-ui/core';\r\nimport { Button, Card, CardBody, Table } from 'reactstrap';\r\nimport 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';\r\nimport * as am4core from \"@amcharts/amcharts4/core\";\r\nimport * as am4charts from \"@amcharts/amcharts4/charts\";\r\nimport am4themes_animated from \"@amcharts/amcharts4/themes/animated\";\r\nimport am4themes_kelly from \"@amcharts/amcharts4/themes/kelly\";\r\nimport { List as LINQ } from 'linqts';\r\nconst dateFormat = require('dateformat');\r\nam4core.useTheme(am4themes_animated);\r\nam4core.useTheme(am4themes_kelly);\r\nam4core.addLicense(\"CH208466903\");\r\nconst Chats_Report_Security = (props) => {\r\n const { data, lstTableReporSecurity, startDate, endDate, exportImg,dAsof } = props;\r\n const chartData = [] as any[];\r\n const [Conwidtht, setConwidtht] = React.useState(\"100%\");\r\n\r\n useEffect(() => {\r\n if (data != null) {\r\n let valueAxisMax = 6;\r\n data.lstByEventType_Security.forEach(f => {\r\n let objData = { \"AreaName\": f.sAreaName};\r\n if(f.nLevent1_Count>0)objData[\"Level 1\"] = f.nLevent1_Count;\r\n if(f.nLevent2_Count>0)objData[\"Level 2\"] = f.nLevent2_Count;\r\n if(f.nLevent3_Count>0)objData[\"Level 3\"] = f.nLevent3_Count;\r\n if(f.nLevent4_Count>0)objData[\"Level 4\"] = f.nLevent4_Count;\r\n // let nLevent1_Count_ = \"Level 1 :\" +f.nLevent1_Count;\r\n // let nLevent2_Count_ = \"Level 2 :\" +f.nLevent2_Count;\r\n // let nLevent3_Count_ = \"Level 3 :\" +f.nLevent3_Count;\r\n // let nLevent4_Count_ = \"Level 4 :\" +f.nLevent4_Count;\r\n chartData.push(objData);\r\n \r\n \r\n if (valueAxisMax < f.nLevent1_Count) valueAxisMax = f.nLevent1_Count;\r\n if (valueAxisMax < f.nLevent2_Count) valueAxisMax = f.nLevent2_Count;\r\n if (valueAxisMax < f.nLevent3_Count) valueAxisMax = f.nLevent3_Count;\r\n if (valueAxisMax < f.nLevent4_Count) valueAxisMax = f.nLevent4_Count;\r\n });\r\n \r\n if (chartData.length < 5) {\r\n setConwidtht(\"50%\");\r\n }\r\n // Create chart instance\r\n var chart = am4core.create(\"chartdivYearly\", am4charts.XYChart);\r\n chart.marginRight = 400;\r\n // Add data\r\n chart.data = chartData;\r\n // Create axes\r\n var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());\r\n categoryAxis.dataFields.category = \"AreaName\";\r\n categoryAxis.title.text = \"\";\r\n categoryAxis.renderer.grid.template.location = 0;\r\n categoryAxis.renderer.minGridDistance = 20;\r\n\r\n var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());\r\n valueAxis.title.text = \"Report Amount\";\r\n valueAxis.min = 0;\r\n // valueAxis.max = valueAxisMax + 4;\r\n // Create series\r\n var series = chart.series.push(new am4charts.ColumnSeries3D());\r\n series.dataFields.valueY = \"Level 1\";\r\n series.dataFields.categoryX = \"AreaName\";\r\n series.name = \"Level 1\";\r\n series.columns.template.tooltipText = \"{name}: [bold]{valueY}[/]\";\r\n series.fill = am4core.color(\"#10bc2d\");\r\n series.strokeWidth = 0;\r\n series.stacked = true;\r\n\r\n var series2 = chart.series.push(new am4charts.ColumnSeries3D());\r\n series2.dataFields.valueY = \"Level 2\";\r\n series2.dataFields.categoryX = \"AreaName\";\r\n series2.name = \"Level 2\";\r\n series2.columns.template.tooltipText = \"{name}: [bold]{valueY}[/]\";\r\n series2.fill = am4core.color(\"#ffff00\");\r\n series2.strokeWidth = 0;\r\n series2.stacked = true;\r\n\r\n var series3 = chart.series.push(new am4charts.ColumnSeries3D());\r\n series3.dataFields.valueY = \"Level 3\";\r\n series3.dataFields.categoryX = \"AreaName\";\r\n series3.name = \"Level 3\";\r\n series3.columns.template.tooltipText = \"{name}: [bold]{valueY}[/]\";\r\n series3.fill = am4core.color(\"#ff7f02\");\r\n series3.strokeWidth = 0;\r\n series3.stacked = true;\r\n\r\n var series4 = chart.series.push(new am4charts.ColumnSeries3D());\r\n series4.dataFields.valueY = \"Level 4\";\r\n series4.dataFields.categoryX = \"AreaName\";\r\n series4.name = \"Level 4\";\r\n series4.columns.template.tooltipText = \"{name}: [bold]{valueY}[/]\";\r\n series4.fill = am4core.color(\"#fe0000\");\r\n series4.strokeWidth = 0;\r\n series4.stacked = true;\r\n\r\n var label = categoryAxis.renderer.labels.template;\r\n label.truncate = true;\r\n // label.maxWidth = 100;\r\n label.tooltipText = \"{AreaName}\";\r\n label.fontSize = 14;\r\n categoryAxis.events.on(\"sizechanged\", function (ev) {\r\n var axis = ev.target;\r\n var cellWidth = axis.pixelWidth / (axis.endIndex - axis.startIndex);\r\n // if (cellWidth < axis.renderer.labels.template.maxWidth) {\r\n axis.renderer.labels.template.rotation = -45;\r\n axis.renderer.labels.template.horizontalCenter = \"right\";\r\n axis.renderer.labels.template.verticalCenter = \"middle\";\r\n // }\r\n // else {\r\n // axis.renderer.labels.template.rotation = 0;\r\n // axis.renderer.labels.template.horizontalCenter = \"middle\";\r\n // axis.renderer.labels.template.verticalCenter = \"top\";\r\n // }\r\n });\r\n // Add cursor\r\n // chart.cursor = new am4charts.XYCursor();\r\n // chart.cursor.behavior = \"none\"\r\n // Add legend\r\n chart.legend = new am4charts.Legend();\r\n chart.legend.position = \"top\";\r\n chart.legend.contentAlign = \"center\";\r\n\r\n chart.exporting.getImage(\"png\").then((data) => {\r\n exportImg(data);\r\n });\r\n }\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\nexport default Chats_Report_Security;","import React, { Fragment, useState, useEffect, useCallback } from 'react';\r\nimport 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';\r\nimport { Grid } from '@material-ui/core';\r\nimport SelectFormItem from '../form/SelectFormItem';\r\nimport 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';\r\nimport { Link } from 'react-router-dom';\r\nimport { Encrypt, AxiosPost, scrollToElementValidate, FnBlock_UI, ResultAPI, MsgValidate, Effect, ParseHtml, AxiosPostExportFile } from '../SysComponent/SystemComponent';\r\nimport { Formik, Form } from \"formik\";\r\nimport { Button, Card, CardBody, Table } from 'reactstrap';\r\nimport { MuiButtonSearch,MuiButtonExport,MuiButtonExportPDF} from '../SysComponent/MaterialComponent'\r\nimport DatePickerRangeFormItem from 'components/form/DatePickerRangeFormItem';\r\nimport { List as LINQ } from 'linqts';\r\nimport Accordion from '@material-ui/core/Accordion';\r\nimport AccordionSummary from '@material-ui/core/AccordionSummary';\r\nimport * as yup from 'yup';\r\nimport Charts_ByEventType from \"./ChartsComponent/Charts_ByEventType\"\r\nimport Charts_SummaryByEventType from \"./ChartsComponent/Charts_SummaryByEventType\"\r\nimport Chats_ReportStatistics from \"./ChartsComponent/Chats_ReportStatistics\"\r\nimport Chats_Report_Security from \"./ChartsComponent/Chats_Report_Security\"\r\n\r\nconst dateFormat = require('dateformat');\r\nconst sController = \"Report\";\r\nconst Report = () => {\r\n const { BlockUI, UnBlockUI } = FnBlock_UI();\r\n const [lstByEventType, setlstByEventType] = useState(null as any);\r\n const [lstTableSummaryEventReport, setlTableSummaryEventReport] = useState([] as any);\r\n const [lstTableEventType, setlTableEventType] = useState([] as any);\r\n const [lstTableSummaryEventReportDatail, setlTableSummaryEventReportDatail] = useState([] as any);\r\n const [lstTableReporSecurity, setllstTableReporSecurity] = useState([] as any);\r\n const [selectEventGroup, setselectEventGroup] = useState(0);\r\n const [selectDate, setselectDate] = useState({ startDate: \"\", endDate: \"\" });\r\n const [MasterData, setMasterData] = React.useState({\r\n lstCompany: [] as any[],\r\n lstCompanyCSR: [] as any[],\r\n lstEventGroup: [] as any[],\r\n lstArea: [] as any[],\r\n lstEventTypeData: [] as any[]\r\n })\r\n\r\n const [sImgChartsEvType, setImgCharts] = useState(\"\");\r\n const [sImgChartsSumEvType, setImgChartsSumEvType] = useState(\"\");\r\n const [sImgChartsSecurity, setImgChartsSecurity] = useState(\"\");\r\n const [sImgChartsStatistics, setImgChartsStatistics] = useState(\"\");\r\n const [SelectAreaStatistics, setSelectAreaStatistics] = useState([] as any[]);\r\n const [cFilterData, setcFilterData] = useState(null as any);\r\n\r\n const [isShoweExport, setisShoweExport] = useState(false);\r\n const [inFromEventReport, setFromEventReport] = useState({\r\n nCompanyID: \"\" as any,\r\n nEventGroupID: \"\" as any,\r\n lstAreaID: [] as any[],\r\n lstEventType: [] as any[],\r\n EventDate: [] as any[],\r\n\r\n });\r\n\r\n const validateOperation = yup.object().shape({\r\n nEventGroupID: yup.string().required(MsgValidate.PleaseSpecify + 'Event Group'),\r\n nCompanyID: yup.string().required(MsgValidate.PleaseSpecify + 'Company')\r\n });\r\n\r\n const LoadData = async () => {\r\n let obj = {\r\n 'nCompanyID': null,\r\n 'nEventGroupID': null,\r\n 'lstAreaID': null,\r\n 'lstEventType': null,\r\n 'sStartDate': '',\r\n 'sEndDate': '',\r\n };\r\n await AxiosPost(sController + \"/LoadData\", obj, (response) => {\r\n ResultAPI(false, response, null, () => {\r\n setFromEventReport({\r\n ...inFromEventReport,\r\n nCompanyID: response.nDefaultCompanyID + \"\",\r\n nEventGroupID: response.nDefaultEventGroup + \"\",\r\n EventDate: [new Date(response.dDefaultStartDate), new Date(response.dDefaultEndDate)]\r\n });\r\n\r\n setMasterData({\r\n ...MasterData,\r\n lstCompany: response.lstCompany,\r\n lstCompanyCSR: response.lstCompanyCSR,\r\n lstEventGroup: response.lstEventGroup,\r\n lstArea: response.lstArea,\r\n lstEventTypeData: []\r\n });\r\n // LoadAear(response.nDefaultEventGroup + \"\", response.nDefaultCompanyID + \"\");\r\n GetData(response.nDefaultCompanyID, response.nDefaultEventGroup, [], [], new Date(response.dDefaultStartDate), new Date(response.dDefaultEndDate));\r\n })\r\n }, () => { }, BlockUI, UnBlockUI)\r\n };\r\n\r\n const GetData = async (nCompanyID, nEventGroupID, lstAreaID, lstEventType, sStartDate, sEndDate) => {\r\n setselectEventGroup(+nEventGroupID);\r\n setselectDate({ ...selectDate, startDate: dateFormat(sStartDate, \"dd/mm/yyyy\"), endDate: dateFormat(sEndDate, \"dd/mm/yyyy\") })\r\n let obj = {\r\n 'nCompanyID': nCompanyID,\r\n 'nEventGroupID': nEventGroupID,\r\n 'lstAreaID': lstAreaID.length > 0 ? new LINQ(lstAreaID).Select(s => (+s)).ToArray() : null,\r\n 'lstEventType': lstEventType.length > 0 ? new LINQ(lstEventType).Select(s => (+s)).ToArray() : null,\r\n 'sStartDate': sStartDate != null ? dateFormat(sStartDate, \"dd/mm/yyyy\") : \"\",\r\n 'sEndDate': sEndDate != null ? dateFormat(sEndDate, \"dd/mm/yyyy\") : \"\",\r\n };\r\n setcFilterData(obj);\r\n setisShoweExport(false);\r\n await AxiosPost(sController + \"/GetByEventType\", obj, (response) => {\r\n ResultAPI(false, response, null, () => {\r\n setlstByEventType(response.cByEventType);\r\n setlTableEventType(new LINQ(response.cResoltByTable.lstTableEventType).ToArray());\r\n \r\n setlTableSummaryEventReport(response.cResoltByTable.lstTableSummaryEventReport);\r\n setlTableSummaryEventReportDatail(response.cResoltByTable.lstTableSummaryEventReportDatail);\r\n setllstTableReporSecurity(response.cResoltByTable.lstTableReporSecurity);\r\n\r\n /// clearInterval(timer);\r\n setInterval(() => {\r\n setisShoweExport(true);\r\n clearInterval();\r\n }, 40000);\r\n })\r\n }, () => { }, BlockUI, UnBlockUI)\r\n };\r\n\r\n useEffect(() => {\r\n LoadData();\r\n }, []);\r\n\r\n //#region กราฟ\r\n const CharteByEventType = useCallback(() => {\r\n return ( { setImgCharts(e); }} />)\r\n },\r\n [lstByEventType],\r\n )\r\n\r\n const Charts_SummaryByEvent = useCallback(() => {\r\n return ( { setSelectAreaStatistics(e) }}\r\n exportImg={(e) => { setImgChartsSumEvType(e); }} />)\r\n },\r\n [lstByEventType],\r\n )\r\n\r\n const Chats_Statistics = useCallback(() => {\r\n return ( { setImgChartsStatistics(e); }} />)\r\n }, [lstByEventType])\r\n\r\n const Charts_ReportSecurity = useCallback(() => {\r\n return ( { setImgChartsSecurity(e); }} />)\r\n }, [lstByEventType, lstTableReporSecurity])\r\n //#endregion\r\n\r\n const onSave = (values) => {\r\n GetData(+values.nCompanyID, +values.nEventGroupID, values.lstAreaID, values.lstEventType, values.EventDate[0], values.EventDate[1]);\r\n };\r\n //Load AreaData\r\n const LoadAear = async (EventGroupSelect, CompanySelect) => {\r\n if (EventGroupSelect != \"\" && CompanySelect != \"\") {\r\n let qbj = {\r\n nEventGroupID: +EventGroupSelect,\r\n nCompanyID: +CompanySelect,\r\n };\r\n await AxiosPost(sController + \"/GetAear\", qbj, (response) => {\r\n ResultAPI(false, response, null, () => {\r\n // setMasterData({\r\n // ...MasterData,\r\n // lstCompany: MasterData.lstCompany,\r\n // lstCompanyCSR: MasterData.lstCompanyCSR,\r\n // lstEventGroup: MasterData.lstEventGroup,\r\n // lstArea:response,\r\n // lstEventTypeData:MasterData.lstEventTypeData\r\n // });\r\n setMasterData({\r\n ...MasterData, lstArea: response\r\n })\r\n })\r\n }, () => { }, BlockUI, UnBlockUI)\r\n }\r\n };\r\n\r\n const onEventType = async (lstAreaSelect) => {\r\n if (lstAreaSelect != null) {\r\n let qbj = {\r\n lstAreaID: new LINQ(lstAreaSelect).Select(s => (+s.value)).ToArray()\r\n };\r\n await AxiosPost(sController + \"/GetEventType\", qbj, (response) => {\r\n ResultAPI(false, response, null, () => {\r\n setMasterData({\r\n ...MasterData, lstEventTypeData: response\r\n })\r\n })\r\n }, () => { }, BlockUI, UnBlockUI)\r\n }\r\n };\r\n const exportExcel = () => {\r\n // BlockUI();\r\n // setInterval(() => {\r\n // clearInterval();\r\n let obj = {\r\n 'cFilterData': cFilterData,\r\n 'sImgsImgChartsEvType': sImgChartsEvType,\r\n 'sImgChartsSumEvType': sImgChartsSumEvType,\r\n 'sImgChartsSecurity': sImgChartsSecurity,\r\n 'sImgChartsStatistics': sImgChartsStatistics,\r\n 'lstTableEventType': lstTableEventType,\r\n 'lstTableSummaryEventReport': lstTableSummaryEventReport,\r\n 'lstTableSummaryEventReportDatail': lstTableSummaryEventReportDatail,\r\n 'lstTableReporSecurity': lstTableReporSecurity,\r\n 'lstSelectAreaID': SelectAreaStatistics\r\n };\r\n AxiosPostExportFile(sController + \"/ExportExcel\", obj, \"Report_Event_\" + (dateFormat(new Date(), \"ddmmyyyyHHMM\")) + \".xlsx\", () => { }, BlockUI, UnBlockUI);\r\n // }, 10000);\r\n };\r\n const exportPDF = () => {\r\n\r\n let obj = {\r\n 'cFilterData': cFilterData,\r\n 'sImgsImgChartsEvType': sImgChartsEvType,\r\n 'sImgChartsSumEvType': sImgChartsSumEvType,\r\n 'sImgChartsSecurity': sImgChartsSecurity,\r\n 'sImgChartsStatistics': sImgChartsStatistics,\r\n 'lstTableEventType': lstTableEventType,\r\n 'lstTableSummaryEventReport': lstTableSummaryEventReport,\r\n 'lstTableSummaryEventReportDatail': lstTableSummaryEventReportDatail,\r\n 'lstTableReporSecurity': lstTableReporSecurity,\r\n 'lstSelectAreaID': SelectAreaStatistics\r\n };\r\n AxiosPostExportFile(sController + \"/ExportPDF\", obj, \"Report_Event_\" + (dateFormat(new Date(), \"ddmmyyyyHHMM\")) + \".pdf\", () => { }, BlockUI, UnBlockUI);\r\n };\r\n return (\r\n \r\n \r\n );\r\n}\r\n\r\nexport default Report;\r\n","import React, { Fragment, useState, useEffect, useCallback } from 'react';\r\nimport 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';\r\nimport { Grid } from '@material-ui/core';\r\nimport 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';\r\nimport * as am4core from \"@amcharts/amcharts4/core\";\r\nimport * as am4charts from \"@amcharts/amcharts4/charts\";\r\nimport am4themes_animated from \"@amcharts/amcharts4/themes/animated\";\r\nimport am4themes_kelly from \"@amcharts/amcharts4/themes/kelly\";\r\nimport SelectFormItem from '../form/SelectFormItem';\r\nimport { Link } from 'react-router-dom';\r\nimport { Encrypt, AxiosPost, scrollToElementValidate, FnBlock_UI, ResultAPI, MsgValidate, Effect, ParseHtml, AxiosPostExportFile, Decrypt } from '../SysComponent/SystemComponent';\r\nimport { Formik, Form } from \"formik\";\r\nimport { Button, Card, CardBody, Table } from 'reactstrap';\r\nimport { MuiButtonSearch, MuiButtonExport, MuiButtonExportPDF } from '../SysComponent/MaterialComponent'\r\nimport DatePickerRangeFormItem from 'components/form/DatePickerRangeFormItem';\r\nimport { List as LINQ } from 'linqts';\r\nimport Accordion from '@material-ui/core/Accordion';\r\nimport AccordionSummary from '@material-ui/core/AccordionSummary';\r\nimport AccordionDetails from \"@material-ui/core/AccordionDetails\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport ExpandMoreIcon from \"@material-ui/icons/ExpandMore\";\r\nimport * as yup from 'yup';\r\nimport {\r\n useStyles,\r\n MuiTableTableToolbar,\r\n StyledTable_Front,\r\n StyledTableCell_Front,\r\n StyledTableRow_Front,\r\n StyledTableHead_Front,\r\n Order,\r\n PerPageOptions,\r\n StyledTableBody_Front,\r\n stableSort,\r\n getComparator,\r\n MuiRowNoData,\r\n HeadCell,\r\n defaultPage,\r\n} from \"../form/Table/CustomTable\";\r\nimport { TableSortLabel, TablePagination } from \"@material-ui/core\";\r\nam4core.useTheme(am4themes_animated);\r\nam4core.useTheme(am4themes_kelly);\r\nam4core.addLicense(\"CH208466903\");\r\nconst dateFormat = require('dateformat');\r\nconst sController = \"ReportAbnormal\";\r\nconst ReportAbnormal = () => {\r\n const { BlockUI, UnBlockUI } = FnBlock_UI();\r\n const [lstByEventType, setlstByEventType] = useState(null as any);\r\n const [lstTableSummaryEventReport, setlTableSummaryEventReport] = useState([] as any);\r\n const [lstTableEventType, setlTableEventType] = useState([] as any);\r\n const [lstTableSummaryEventReportDatail, setlTableSummaryEventReportDatail] = useState([] as any);\r\n const [lstTableReporSecurity, setllstTableReporSecurity] = useState([] as any);\r\n const [selectEventGroup, setselectEventGroup] = useState([] as any[]);\r\n const [selectDate, setselectDate] = useState({ startDate: \"\", endDate: \"\" });\r\n const [MasterData, setMasterData] = React.useState({\r\n lstCompany: [] as any[],\r\n lstCompanyCSR: [] as any[],\r\n lstEventGroup: [] as any[],\r\n lstArea: [] as any[],\r\n lstEventTypeData: [] as any[]\r\n })\r\n const [sTiter, SetsTiter] = useState(\"\");\r\n const [sImgChartsCSR, setsImgChartsCSR] = useState(\"\");\r\n const [sImgChartsOperation, setsImgChartsOperation] = useState(\"\");\r\n const [sImgChartsSecurity, setsImgChartsSecurity] = useState(\"\");\r\n\r\n const [cFilterData, setcFilterData] = useState(null as any);\r\n const [lstReportDetail, setlstReportDetail] = useState([] as any[]);\r\n const [isShoweExport, setisShoweExport] = useState(false);\r\n const [inFromEventReport, setFromEventReport] = useState({\r\n nCompanyID: \"\" as any,\r\n nEventGroupID: [] as any[],\r\n lstAreaID: [] as any[],\r\n lstEventType: [] as any[],\r\n EventDate: [] as any[],\r\n\r\n });\r\n const [cObjData, SetcObjData] = useState({} as any);\r\n const validateOperation = yup.object().shape({\r\n nEventGroupID: yup.array().required(MsgValidate.PleaseSpecify + 'Event Group'),\r\n nCompanyID: yup.string().required(MsgValidate.PleaseSpecify + 'Company')\r\n });\r\n\r\n const LoadData = async () => {\r\n let params = new URLSearchParams(window.location.search);\r\n let AbnormalDate = Decrypt(params.get(\"Abnormal\")) + \"\";\r\n let Mode = Decrypt(params.get(\"Mode\")) + \"\";\r\n console.log(\"AbnormalDate\", AbnormalDate);\r\n\r\n let obj = {\r\n 'sStartDate': AbnormalDate,\r\n 'sEndDate': '',\r\n };\r\n await AxiosPost(sController + \"/LoadData\", obj, (response) => {\r\n ResultAPI(false, response, null, () => {\r\n setFromEventReport({\r\n ...inFromEventReport,\r\n nCompanyID: response.nDefaultCompanyID + \"\",\r\n nEventGroupID: new LINQ(response.nDefaultEventGroup).Select(s => s + \"\").ToArray() || [],\r\n EventDate: [new Date(response.dDefaultStartDate), new Date(response.dDefaultEndDate)]\r\n });\r\n\r\n setMasterData({\r\n ...MasterData,\r\n lstCompany: response.lstCompany,\r\n lstCompanyCSR: response.lstCompanyCSR,\r\n lstEventGroup: response.lstEventGroup,\r\n lstArea: response.lstArea,\r\n lstEventTypeData: []\r\n });\r\n // LoadAear(response.nDefaultEventGroup + \"\", response.nDefaultCompanyID + \"\");\r\n GetData(response.nDefaultCompanyID, response.nDefaultEventGroup, [], [], new Date(response.dDefaultStartDate), new Date(response.dDefaultEndDate));\r\n })\r\n }, () => { }, BlockUI, UnBlockUI)\r\n };\r\n\r\n const GetData = async (nCompanyID, nEventGroupID, lstAreaID, lstEventType, sStartDate, sEndDate) => {\r\n setisShoweExport(false);\r\n setselectEventGroup(nEventGroupID);\r\n setselectDate({ ...selectDate, startDate: dateFormat(sStartDate, \"dd/mm/yyyy\"), endDate: dateFormat(sEndDate, \"dd/mm/yyyy\") })\r\n let obj = {\r\n 'nCompanyID': nCompanyID,\r\n 'nEventGroupID': new LINQ(nEventGroupID || []).Select(s => +s).ToArray(),\r\n 'lstAreaID': lstAreaID.length > 0 ? new LINQ(lstAreaID).Select(s => (+s)).ToArray() : null,\r\n 'lstEventType': lstEventType.length > 0 ? new LINQ(lstEventType).Select(s => (+s)).ToArray() : null,\r\n 'sStartDate': sStartDate != null ? dateFormat(sStartDate, \"dd/mm/yyyy\") : \"\",\r\n 'sEndDate': sEndDate != null ? dateFormat(sEndDate, \"dd/mm/yyyy\") : \"\",\r\n };\r\n setcFilterData(obj);\r\n\r\n await AxiosPost(sController + \"/GetByEventType\", obj, (response) => {\r\n ResultAPI(false, response, null, () => {\r\n SetcObjData(response);\r\n setlstByEventType(response.cByEventType);\r\n setlTableEventType(new LINQ(response.cResoltByTable.lstTableEventType).OrderBy(o => o.nColorID).ThenBy(t => t.sEventName).ToArray());\r\n\r\n setlTableSummaryEventReport(response.cResoltByTable.lstTableSummaryEventReport);\r\n setlTableSummaryEventReportDatail(response.cResoltByTable.lstTableSummaryEventReportDatail);\r\n setllstTableReporSecurity(response.cResoltByTable.lstTableReporSecurity);\r\n SetsTiter(response.sTiter);\r\n setlstReportDetail(response.lstReportDetail || [])\r\n /// clearInterval(timer);\r\n setInterval(() => {\r\n setisShoweExport(true);\r\n clearInterval();\r\n }, 40000);\r\n })\r\n }, () => { }, BlockUI, UnBlockUI)\r\n };\r\n //Load AreaData\r\n const LoadAear = async (EventGroupSelect, CompanySelect) => {\r\n if (EventGroupSelect != \"\" && CompanySelect != \"\") {\r\n let qbj = {\r\n nEventGroupID: new LINQ(EventGroupSelect || []).Select(s => +s).ToArray(),\r\n nCompanyID: +CompanySelect,\r\n };\r\n await AxiosPost(sController + \"/GetAear\", qbj, (response) => {\r\n ResultAPI(false, response, null, () => {\r\n setMasterData({\r\n ...MasterData, lstArea: response\r\n })\r\n })\r\n }, () => { }, BlockUI, UnBlockUI)\r\n }\r\n };\r\n const onEventType = async (lstAreaSelect) => {\r\n if (lstAreaSelect != null) {\r\n let qbj = {\r\n lstAreaID: new LINQ(lstAreaSelect).Select(s => (+s.value)).ToArray()\r\n };\r\n await AxiosPost(sController + \"/GetEventType\", qbj, (response) => {\r\n ResultAPI(false, response, null, () => {\r\n setMasterData({\r\n ...MasterData, lstEventTypeData: response\r\n })\r\n })\r\n }, () => { }, BlockUI, UnBlockUI)\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n LoadData();\r\n }, []);\r\n\r\n //#region กราฟ\r\n const CharteByEventType_O = useCallback(() => {\r\n return ( { setsImgChartsOperation(e); }} />)\r\n }, [lstByEventType, sTiter])\r\n const CharteByEventType_C = useCallback(() => {\r\n return ( { setsImgChartsCSR(e); }} />)\r\n }, [lstByEventType, sTiter])\r\n const CharteByEventType_S = useCallback(() => {\r\n return ( { setsImgChartsSecurity(e); }} />)\r\n }, [lstByEventType, sTiter])\r\n //#endregion\r\n\r\n const onSave = (values) => {\r\n GetData(+values.nCompanyID, values.nEventGroupID, values.lstAreaID, values.lstEventType, values.EventDate[0], values.EventDate[1]);\r\n };\r\n\r\n const exportExcel = () => {\r\n let obj = cObjData;\r\n cObjData[\"sImgChartsCSR\"] = sImgChartsCSR;\r\n cObjData[\"sImgChartsOperation\"] = sImgChartsOperation;\r\n cObjData[\"sImgChartsSecurity\"] = sImgChartsSecurity;\r\n console.log(\"obj\", obj);\r\n\r\n AxiosPostExportFile(sController + \"/ExportExcel\", obj, \"Report_Abnormal_\" + (dateFormat(new Date(), \"ddmmyyyyHHMM\")) + \".xlsx\", () => { }, BlockUI, UnBlockUI);\r\n };\r\n\r\n const exportPDF = () => {\r\n\r\n let obj = cObjData;\r\n cObjData[\"sImgChartsCSR\"] = sImgChartsCSR;\r\n cObjData[\"sImgChartsOperation\"] = sImgChartsOperation;\r\n cObjData[\"sImgChartsSecurity\"] = sImgChartsSecurity;\r\n AxiosPostExportFile(sController + \"/ExportPDF\", obj, \"Report_Event_\" + (dateFormat(new Date(), \"ddmmyyyyHHMM\")) + \".pdf\", () => { }, BlockUI, UnBlockUI);\r\n };\r\n\r\n const TableSummart = (pro) => {\r\n const { arrTableEventType, arrTableSummaryEventReport, arrTableSummaryEventReportDatail } = pro;\r\n return (\"desc\");\r\n const [orderBy, setOrderBy] = React.useState(\"dEventDate\");\r\n\r\n const getHearTable = () => {\r\n return headCellsMode_1;\r\n };\r\n const headCellsMode_1: HeadCell[] = [\r\n {\r\n id: \"sEventDate\",\r\n numeric: false,\r\n disablePadding: false,\r\n label: \"Event Date\",\r\n width: 10,\r\n isSort: false,\r\n },\r\n {\r\n id: \"sCompanyName\",\r\n numeric: false,\r\n disablePadding: false,\r\n label: \"Company\",\r\n width: 10,\r\n isSort: false,\r\n },\r\n {\r\n id: \"sAreaAndSubAreaName\",\r\n numeric: false,\r\n disablePadding: false,\r\n label: \"Area/Sub Area\",\r\n width: 10,\r\n isSort: false,\r\n },\r\n {\r\n id: \"sEventTypeName\",\r\n numeric: false,\r\n disablePadding: false,\r\n label: \"Event Type\",\r\n width: 15,\r\n isSort: false,\r\n },\r\n {\r\n id: \"sRepoterName\",\r\n numeric: false,\r\n disablePadding: false,\r\n label: \"Repoter\",\r\n width: 15,\r\n isSort: false,\r\n }, {\r\n id: \"sReportingDate\",\r\n numeric: false,\r\n disablePadding: false,\r\n label: \"Reporting Date\",\r\n width: 15,\r\n isSort: false,\r\n },\r\n {\r\n id: \"sDescription\",\r\n numeric: true,\r\n disablePadding: false,\r\n label: \"Description\",\r\n width: 20,\r\n isSort: false,\r\n },\r\n ];\r\n const handleRequestSort = (\r\n event: React.MouseEvent,\r\n property: keyof any\r\n ) => {\r\n const isAsc = orderBy === property && order === \"asc\";\r\n setOrder(isAsc ? \"desc\" : \"asc\");\r\n setOrderBy(property);\r\n };\r\n const createSortHandler = (property) => (\r\n event: React.MouseEvent\r\n ) => {\r\n handleRequestSort(event, property);\r\n };\r\n const Pagination = () => {\r\n const handleChangePage = (event: unknown, newPage: number) => {\r\n setPage(newPage);\r\n };\r\n\r\n const handleChangeRowsPerPage = (\r\n event: React.ChangeEvent\r\n ) => {\r\n setRowsPerPage(parseInt(event.target.value, 10));\r\n setPage(0);\r\n };\r\n\r\n return rowsData.length > 0 ? (\r\n \r\n \r\n \r\n \r\n ) : (\r\n \r\n \r\n \r\n \r\n {getHearTable().length > 0 &&\r\n getHearTable().map((headCell) => (\r\n \r\n {headCell.isSort ? (\r\n \r\n {headCell.label}\r\n {orderBy === headCell.id ? (\r\n \r\n {order === \"desc\"\r\n ? \"sorted descending\"\r\n : \"sorted ascending\"}\r\n \r\n ) : null}\r\n \r\n ) : (\r\n headCell.label\r\n )}\r\n \r\n ))}\r\n \r\n \r\n \r\n {rowsData.length > 0 ? (\r\n stableSort(new LINQ(rowsData).OrderBy(o => o.nCompanyOrderID).ThenBy(t => t.nAreaOrderID)\r\n .ThenBy(t => t.nSubAreaOrderID).ThenBy(t => t.nEventTypeOrderID).ToArray(), getComparator(order, orderBy))\r\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\r\n .map((item, index) => {\r\n return (\r\n \r\n \r\n {item.sEventDate}\r\n \r\n \r\n {item.sCompanyName}\r\n \r\n \r\n {item.sAreaAndSubAreaName}\r\n \r\n \r\n {item.sEventTypeName}\r\n \r\n \r\n {item.sRepoterName}\r\n \r\n \r\n {item.sReportingDate}\r\n \r\n \r\n {item.sDescription}\r\n \r\n \r\n );\r\n })\r\n ) : (\r\n \r\n {\" \"}\r\n No Data\r\n \r\n )}\r\n \r\n \r\n \r\n }\r\n return (\r\n \r\n \r\n );\r\n}\r\n\r\nexport default ReportAbnormal;\r\n\r\nconst Charts_ByEventType = (props) => {\r\n const { data, sTiter, exportImg, nameCharts, EventGroupID } = props;\r\n const [Conwidtht, setConwidtht] = React.useState(\"100%\");\r\n const chartData = [] as any[];\r\n const [isShow, SetIshow] = React.useState(false);\r\n useEffect(() => {\r\n\r\n if (data != null) {\r\n (data.lstAreaAll || []).filter(w => w.nEventGroup == EventGroupID).forEach(f => {\r\n let objData = { 'AreaName': f.sAreaName };\r\n (f.lstByEventTypeDataDetail || []).forEach(x => {\r\n objData[x.nEventTypeName] = x.nCount;\r\n });\r\n chartData.push(objData);\r\n });\r\n if (chartData.length == 1) {\r\n chartData.push({'AreaName':\"\",\"\":''});\r\n chartData.push({'AreaName':\" \",\"\":''});\r\n chartData.push({'AreaName':\" \",\"\":''});\r\n chartData.push({'AreaName':\" \",\"\":''});\r\n chartData.push({'AreaName':\" \",\"\":''});\r\n chartData.push({'AreaName':\" \",\"\":''});\r\n chartData.push({'AreaName':\" \",\"\":''});\r\n chartData.push({'AreaName':\" \",\"\":''});\r\n } else if (chartData.length == 2) {\r\n chartData.push({'AreaName':\"\",\"\":''});\r\n chartData.push({'AreaName':\" \",\"\":''});\r\n chartData.push({'AreaName':\" \",\"\":''});\r\n } else if (chartData.length < 5) {\r\n chartData.push({'AreaName':\"\",\"\":''});\r\n chartData.push({'AreaName':\" \",\"\":''});\r\n chartData.push({'AreaName':\" \",\"\":''});\r\n }\r\n let chart = am4core.create(\"chartdiv\" + (nameCharts || \"\"), am4charts.XYChart);\r\n let arrColor = [\"#FF0000\",\"#FF6600\",'#FF9900','#b36e07','#f59608','#a70909','#9b0000'];\r\n chart.colors.list = arrColor.map((el, index) => { return am4core.color(el) });\r\n\r\n chart.responsive.enabled = true;\r\n // Add data\r\n chart.data = chartData;\r\n // Create axes\r\n var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());\r\n categoryAxis.dataFields.category = \"AreaName\";\r\n categoryAxis.renderer.grid.template.location = 0;\r\n categoryAxis.renderer.minGridDistance = 20;\r\n\r\n\r\n\r\n var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());\r\n valueAxis.title.text = \" Report Amount\";\r\n valueAxis.min = 0;\r\n valueAxis.maxPrecision = 0;\r\n // Create series\r\n (new LINQ(data.lstByEventType || []).Select(s => ({ nEventGroup: s.nEventGroup, nEventTypeName: s.nEventTypeName,nEventOrderID:s.nEventOrderID}))\r\n .Distinct().OrderBy(o=> o.nEventOrderID).ToArray()).filter(f => f.nEventGroup == EventGroupID).forEach(f => {\r\n var series = chart.series.push(new am4charts.ColumnSeries());\r\n series.dataFields.valueY = f.nEventTypeName;\r\n series.dataFields.categoryX = \"AreaName\";\r\n series.name = f.nEventTypeName;\r\n series.stacked = true;\r\n series.columns.template.tooltipText = \"{name}: [bold]{valueY}[/]\";\r\n\r\n });\r\n var label = categoryAxis.renderer.labels.template;\r\n label.tooltipText = \"{AreaName}\";\r\n label.fontSize = 14;\r\n categoryAxis.events.on(\"sizechanged\", function (ev) {\r\n var axis = ev.target;\r\n var cellWidth = axis.pixelWidth / (axis.endIndex - axis.startIndex);\r\n axis.renderer.labels.template.rotation = -45;\r\n axis.renderer.labels.template.horizontalCenter = \"right\";\r\n axis.renderer.labels.template.verticalCenter = \"top\";//middle\r\n\r\n });\r\n // Add legend\r\n chart.legend = new am4charts.Legend();\r\n //ให้ Lagend อยู่ด้านบน\r\n chart.legend.position = \"top\";\r\n chart.legend.contentAlign = \"center\";\r\n\r\n chart.exporting.getImage(\"png\").then((data) => {\r\n exportImg(data);\r\n });\r\n\r\n }\r\n if (chartData.length > 0) {\r\n SetIshow(true)\r\n } else {\r\n SetIshow(false)\r\n }\r\n }, []);\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","import React, { Fragment, useState, useEffect, useCallback } from \"react\";\r\nimport \"react-draft-wysiwyg/dist/react-draft-wysiwyg.css\";\r\nimport {\r\n Paper,\r\n Grid,\r\n TableContainer,\r\n TableSortLabel,\r\n IconButton,\r\n Typography,\r\n TablePagination,\r\n DialogContent,\r\n DialogActions,\r\n Checkbox,\r\n} from \"@material-ui/core\";\r\nimport {\r\n useStyles,\r\n MuiTableTableToolbar,\r\n StyledTable_Front,\r\n StyledTableCell_Front,\r\n StyledTableRow_Front,\r\n StyledTableHead_Front,\r\n Order,\r\n PerPageOptions,\r\n StyledTableBody_Front,\r\n stableSort,\r\n getComparator,\r\n MuiRowNoData,\r\n HeadCell,\r\n defaultPage,\r\n} from \"../../form/Table/CustomTable\";\r\nimport { Card, CardBody, Table } from \"reactstrap\";\r\nimport Button from \"@material-ui/core/Button\";\r\nimport { List as LINQ } from \"linqts\";\r\nimport { Link } from \"react-router-dom\";\r\nimport {\r\n Encrypt,\r\n AxiosPost,\r\n scrollToElementValidate,\r\n FnBlock_UI,\r\n ResultAPI,\r\n MsgValidate,\r\n Effect,\r\n ParseHtml,\r\n AxiosPostExportFile,\r\n} from \"../../SysComponent/SystemComponent\";\r\nimport {\r\n EventColorCompronent,\r\n MuiButtonDelete,\r\n MuiButtonSearch,\r\n MuiIconCheckBoxDelete,\r\n MuiButtonApproveFront,\r\n MuiButtonEditeFront,\r\n SecurityLevelColorCompronent,\r\n MuiButtonExport,\r\n} from \"../../SysComponent/MaterialComponent\";\r\nimport EventApprove from \"../EventApprove\";\r\nconst WeeklyReportComponent = (props) => {\r\n const { mode, cData } = props;\r\n const [rowsData, setRowData] = React.useState([] as any[]);\r\n const classes = useStyles();\r\n const [page, setPage] = React.useState(0);\r\n const [rowsPerPage, setRowsPerPage] = React.useState(defaultPage);\r\n const [order, setOrder] = React.useState(\"desc\");\r\n const [orderBy, setOrderBy] = React.useState(\"dEventDate\");\r\n\r\n const [lstTableEventType, setlTableEventType] = useState([] as any);\r\n const [lstTableSummaryEventReport, setlTableSummaryEventReport] = useState(\r\n [] as any\r\n );\r\n const [lstEeventRepottData, setlstEeventRepottData] = useState([] as any);\r\n\r\n useEffect(() => {\r\n let nEventGroup = 0;\r\n if (mode === 1) {\r\n nEventGroup = 2;\r\n } else if (mode === 2) {\r\n nEventGroup = 3;\r\n } else if (mode === 3) {\r\n nEventGroup = 1;\r\n }\r\n if (cData != undefined && cData != null) {\r\n if (cData.lstEventType != undefined && cData.lstEventType != null) {\r\n let arr = new LINQ(cData.lstEventType)\r\n .Where((w) => w.nEventGroupID == nEventGroup).OrderBy(w => w.nOrderID)\r\n .ToArray();\r\n\r\n setlTableEventType(arr);\r\n }\r\n\r\n if (\r\n cData.lstSummaryReportData != undefined &&\r\n cData.lstSummaryReportData != null\r\n ) {\r\n let arr = new LINQ(cData.lstSummaryReportData)\r\n .Where((w) => w.nEventGroupID == nEventGroup).OrderBy(w => w.nOrderID)\r\n .ToArray();\r\n setlTableSummaryEventReport(arr);\r\n }\r\n if (\r\n cData.lstEeventRepottData != undefined &&\r\n cData.lstEeventRepottData != null\r\n ) {\r\n let arr = new LINQ(cData.lstEeventRepottData)\r\n .Where((w) => w.nEventGroupID == nEventGroup)\r\n .OrderBy(e=> e.nCompanyOrderID).ThenBy(w=> w.nAreaOrderID)\r\n .ThenBy(w=> w.nSubAreaOrderID).ThenBy(w=> w.nEventTypeOrderID)\r\n .ToArray();\r\n setlstEeventRepottData(arr);\r\n setRowData(arr);\r\n }\r\n //lstEeventRepottData\r\n }\r\n }, []);\r\n const handleRequestSort = (\r\n event: React.MouseEvent,\r\n property: keyof any\r\n ) => {\r\n const isAsc = orderBy === property && order === \"asc\";\r\n setOrder(isAsc ? \"desc\" : \"asc\");\r\n setOrderBy(property);\r\n };\r\n const headCellsMode_1: HeadCell[] = [\r\n {\r\n id: \"sCompanyName\",\r\n numeric: true,\r\n disablePadding: true,\r\n label: \"Company\",\r\n width: 5,\r\n isSort: true,\r\n },\r\n {\r\n id: \"sAreaName\",\r\n numeric: true,\r\n disablePadding: true,\r\n label: \"Area/Sub Area\",\r\n width: 10,\r\n isSort: true,\r\n },\r\n {\r\n id: \"\",\r\n numeric: false,\r\n disablePadding: true,\r\n label: \"Status\",\r\n width: 9,\r\n isSort: false,\r\n },\r\n {\r\n id: \"sEventTypeName\",\r\n numeric: false,\r\n disablePadding: true,\r\n label: \"Event Type\",\r\n width: 15,\r\n isSort: true,\r\n },\r\n {\r\n id: \"sDescription\",\r\n numeric: true,\r\n disablePadding: false,\r\n label: \"Description\",\r\n width: 20,\r\n isSort: false,\r\n },\r\n ];\r\n\r\n const headCellsMode_2: HeadCell[] = [\r\n {\r\n id: \"sCompanyName\",\r\n numeric: true,\r\n disablePadding: true,\r\n label: \"Company\",\r\n width: 5,\r\n isSort: true,\r\n },\r\n {\r\n id: \"sAreaName\",\r\n numeric: true,\r\n disablePadding: true,\r\n label: \"Area/Sub Area\",\r\n width: 10,\r\n isSort: true,\r\n },\r\n {\r\n id: \"\",\r\n numeric: false,\r\n disablePadding: true,\r\n label: \"Security Level\",\r\n width: 9,\r\n isSort: false,\r\n },\r\n {\r\n id: \"sEventTypeName\",\r\n numeric: false,\r\n disablePadding: true,\r\n label: \"Event Type\",\r\n width: 15,\r\n isSort: true,\r\n },\r\n {\r\n id: \"\",\r\n numeric: false,\r\n disablePadding: true,\r\n label: \"Status\",\r\n width: 9,\r\n isSort: false,\r\n },\r\n {\r\n id: \"sDescription\",\r\n numeric: true,\r\n disablePadding: false,\r\n label: \"Description\",\r\n width: 20,\r\n isSort: false,\r\n },\r\n ];\r\n\r\n const headCellsMode_3: HeadCell[] = [\r\n {\r\n id: \"sCompanyName\",\r\n numeric: true,\r\n disablePadding: true,\r\n label: \"CSR Area\",\r\n width: 5,\r\n isSort: true,\r\n },\r\n {\r\n id: \"sAreaName\",\r\n numeric: true,\r\n disablePadding: true,\r\n label: \"Area/Sub Area\",\r\n width: 10,\r\n isSort: true,\r\n },\r\n {\r\n id: \"\",\r\n numeric: false,\r\n disablePadding: true,\r\n label: \"Status\",\r\n width: 9,\r\n isSort: false,\r\n },\r\n {\r\n id: \"sEventTypeName\",\r\n numeric: false,\r\n disablePadding: true,\r\n label: \"Event Type\",\r\n width: 15,\r\n isSort: true,\r\n },\r\n {\r\n id: \"sDescription\",\r\n numeric: true,\r\n disablePadding: false,\r\n label: \"Description\",\r\n width: 20,\r\n isSort: false,\r\n },\r\n ];\r\n const createSortHandler = (property) => (\r\n event: React.MouseEvent\r\n ) => {\r\n handleRequestSort(event, property);\r\n };\r\n\r\n const getHearTable = () => {\r\n if (mode === 1) {\r\n return headCellsMode_1;\r\n } else if (mode === 2) {\r\n return headCellsMode_2;\r\n } else if (mode === 3) {\r\n return headCellsMode_3;\r\n } else {\r\n return [] as HeadCell[];\r\n }\r\n };\r\n\r\n //#region set Pagination\r\n const Pagination = () => {\r\n const handleChangePage = (event: unknown, newPage: number) => {\r\n setPage(newPage);\r\n };\r\n\r\n const handleChangeRowsPerPage = (\r\n event: React.ChangeEvent\r\n ) => {\r\n setRowsPerPage(parseInt(event.target.value, 10));\r\n setPage(0);\r\n };\r\n\r\n return rowsData.length > 0 ? (\r\n \r\n \r\n \r\n \r\n ) : (\r\n {\r\n handleClose(e);\r\n }}\r\n title={\r\n open.Mode === \"Approve\"\r\n ? \"Approve Data\"\r\n : open.Mode === \"View\"\r\n ? \"Detail\"\r\n : \"Edit Data\"\r\n }\r\n eventID={open.EventID}\r\n Mode={open.Mode}\r\n />\r\n );\r\n }, [open]);\r\n\r\n return (\r\n \r\n \r\n {mode !== 3 && (\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n {getHearTable().length > 0 &&\r\n getHearTable().map((headCell) => (\r\n \r\n {headCell.isSort ? (\r\n \r\n {headCell.label}\r\n {orderBy === headCell.id ? (\r\n \r\n {order === \"desc\"\r\n ? \"sorted descending\"\r\n : \"sorted ascending\"}\r\n \r\n ) : null}\r\n \r\n ) : (\r\n headCell.label\r\n )}\r\n \r\n ))}\r\n \r\n \r\n \r\n {rowsData.length > 0 ? (\r\n stableSort(rowsData, getComparator(order, orderBy))\r\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\r\n .map((item, index) => {\r\n return (\r\n \r\n \r\n {item.sCompanyName}\r\n \r\n \r\n {item.sAreaName}\r\n \r\n {mode != 2 && (\r\n \r\n \r\n )}\r\n {mode === 2 && (\r\n \r\n \r\n )}\r\n \r\n {\r\n handleShew(item.nEventID, \"View\");\r\n }}\r\n style={{ textTransform: \"none\", textAlign: \"left\" }}\r\n >\r\n {item.sEventTypeName}\r\n \r\n \r\n {mode === 2 && (\r\n \r\n \r\n )}\r\n \r\n {item.sDescription}\r\n \r\n \r\n );\r\n })\r\n ) : (\r\n \r\n {\" \"}\r\n No Data\r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\nexport default WeeklyReportComponent;\r\n","import React, { Fragment, useState, useEffect, useCallback } from \"react\";\r\nimport \"react-draft-wysiwyg/dist/react-draft-wysiwyg.css\";\r\nimport { Grid } from \"@material-ui/core\";\r\nimport SelectFormItem from \"../form/SelectFormItem\";\r\nimport \"react-draft-wysiwyg/dist/react-draft-wysiwyg.css\";\r\nimport { Link } from \"react-router-dom\";\r\nimport {\r\n Encrypt,\r\n AxiosPost,\r\n scrollToElementValidate,\r\n FnBlock_UI,\r\n ResultAPI,\r\n MsgValidate,\r\n Decrypt,\r\n ParseHtml,\r\n AxiosPostExportFile,\r\n} from \"../SysComponent/SystemComponent\";\r\nimport { Formik, Form } from \"formik\";\r\nimport { Button, Card, CardBody, Table } from \"reactstrap\";\r\nimport {\r\n MuiButtonSearch,\r\n MuiButtonExport,\r\n MuiButtonExportPDF,\r\n} from \"../SysComponent/MaterialComponent\";\r\nimport { List as LINQ } from \"linqts\";\r\nimport * as yup from \"yup\";\r\n\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Accordion from \"@material-ui/core/Accordion\";\r\nimport AccordionSummary from \"@material-ui/core/AccordionSummary\";\r\nimport AccordionDetails from \"@material-ui/core/AccordionDetails\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport ExpandMoreIcon from \"@material-ui/icons/ExpandMore\";\r\nimport {\r\n useStyles,\r\n MuiTableTableToolbar,\r\n StyledTable_Front,\r\n StyledTableCell_Front,\r\n StyledTableRow_Front,\r\n StyledTableHead_Front,\r\n Order,\r\n PerPageOptions,\r\n StyledTableBody_Front,\r\n stableSort,\r\n getComparator,\r\n MuiRowNoData,\r\n HeadCell,\r\n defaultPage,\r\n} from \"../form/Table/CustomTable\";\r\nimport WeeklyReportComponent from \"../General/ReportComponent/WeeklyReportComponent\";\r\n\r\nconst dateFormat = require(\"dateformat\");\r\nconst sController = \"WeeklyReport\";\r\nconst ReportWeekly = () => {\r\n const { BlockUI, UnBlockUI } = FnBlock_UI();\r\n const [cData, setcData] = React.useState(null as any);\r\n const [sDateTo, setDateTo] = React.useState(\"\");\r\n const [isShoweExport, setisShoweExport] = useState(false);\r\n const [lstEventGroupID, setlstEventGroupID] = React.useState([] as any[]);\r\n const [dAsof, setdAsof] = React.useState(null as any);\r\n\r\n const LoadData = () => {\r\n let params = new URLSearchParams(window.location.search);\r\n let WeeklyDate = Decrypt(params.get(\"Weekly\")) + \"\";\r\n let Mode = Decrypt(params.get(\"Mode\")) + \"\";\r\n\r\n let obj = {\r\n sMode: \"1\",\r\n sStartDate: WeeklyDate,\r\n sEndDate: \"\",\r\n };\r\n setisShoweExport(false);\r\n AxiosPost(\r\n sController + \"/LoadData\",\r\n obj,\r\n (response) => {\r\n ResultAPI(false, response, null, () => {\r\n setdAsof(response.dAsof);\r\n setDateTo(response.sStartDate + \" - \" + response.sEndDate);\r\n setlstEventGroupID(response.lstEventGroupID);\r\n\r\n setcData(response);\r\n /// clearInterval(timer);\r\n setInterval(() => {\r\n setisShoweExport(true);\r\n clearInterval();\r\n }, 40000);\r\n });\r\n },\r\n () => { },\r\n BlockUI,\r\n UnBlockUI\r\n );\r\n };\r\n useEffect(() => {\r\n LoadData();\r\n }, []);\r\n\r\n const OWeeklyReport = useCallback(() => {\r\n return \r\n
\r\n \r\n {/*
\r\n\r\n {/* reponsive menu */}\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\n
\r\n EVENT
\r\n \r\n
\r\n REPORT
\r\n \r\n
\r\n {/* \r\n
\r\n - \r\n {\r\n objMenu.lstMenu.map((items: any, index: number) => {\r\n return (\r\n
- \r\n \r\n {items.sHeaderName}\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\n
\r\n \r\n
\r\n WELCOME
\r\n {objMenu.sFullUserName}
\r\n ROLE:\r\n {\r\n objMenu.lstGroupUser && objMenu.lstGroupUser.length > 1 ?\r\n {objMenu.sGroupUserName}...\r\n : objMenu.sGroupUserName\r\n }\r\n
\r\n \r\n \r\n
\r\n \r\n {Props.children}\r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n PTT PUBLIC COMPANY LIMITED
\r\n Copyright © 2020 PTT Public Company Limited All rights reserved
\r\n \r\n \r\n Privacy Notice\r\n
\r\n \r\n
\r\n \r\n );\r\n};\r\nexport default Layout_Front;\r\n\r\n","import React, { Component } from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport FormErrors from \"./formErrors\";\r\nimport { Field } from \"formik\";\r\nimport Select from \"react-select\";\r\nimport makeAnimated from 'react-select/animated';\r\nimport { i18n } from \"../../i18n\";\r\nimport {\r\n components as materialUiComponents,\r\n styles as materialUiStyles,\r\n} from \"./MaterialUI/reactSelectMaterialUi\";\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport InputLabel from '@material-ui/core/InputLabel';\r\nimport { Tune } from \"@material-ui/icons\";\r\nconst animatedComponents = makeAnimated();\r\n\r\nexport class SelectFormItemNotFast extends Component {\r\n value = () => {\r\n const { mode } = this.props;\r\n if (mode === \"multiple\") {\r\n return this.valueMultiple();\r\n } else {\r\n return this.valueOne();\r\n }\r\n };\r\n\r\n valueMultiple = () => {\r\n const { form, name, options } = this.props;\r\n\r\n if (form.values[name]) {\r\n return form.values[name].map((value) =>\r\n options.find((option) => option.value === value)\r\n );\r\n }\r\n\r\n return [];\r\n };\r\n\r\n valueOne = () => {\r\n const { form, name, options } = this.props;\r\n\r\n if (form.values[name]) {\r\n return options.find((option) => option.value === form.values[name]);\r\n }\r\n\r\n return \"\";\r\n };\r\n\r\n handleSelect = (data) => {\r\n const { form, name } = this.props;\r\n form.setFieldTouched(name);\r\n const { mode } = this.props;\r\n if (mode === \"multiple\") {\r\n return this.handleSelectMultiple(data);\r\n } else {\r\n return this.handleSelectOne(data);\r\n }\r\n };\r\n\r\n handleSelectMultiple = (values) => {\r\n const { form, name, onChangeMultiSelect, onBlurMultiSelect } = this.props;\r\n\r\n if (!values) {\r\n form.setFieldValue(name, []);\r\n if (onChangeMultiSelect) {\r\n onChangeMultiSelect(form, []);\r\n }\r\n if (onBlurMultiSelect) {\r\n onBlurMultiSelect(form, []);\r\n }\r\n return;\r\n } else {\r\n if (onChangeMultiSelect) {\r\n onChangeMultiSelect(form, values);\r\n }\r\n if (onBlurMultiSelect) {\r\n onBlurMultiSelect(form, values);\r\n }\r\n }\r\n\r\n form.setFieldValue(\r\n name,\r\n values.map((data) => (data ? data.value : undefined)).filter(Boolean)\r\n );\r\n };\r\n\r\n handleSelectoBlurMultiSelect = (e) => {\r\n const { onBlurMultiSelect } = this.props;\r\n\r\n if (onBlurMultiSelect) {\r\n onBlurMultiSelect(e, this.value());\r\n }\r\n\r\n };\r\n\r\n handleSelectOne = (data) => {\r\n const { form, name, onSetSelect, allValues } = this.props;\r\n if (!data) {\r\n form.setFieldValue(name, '');\r\n form.setFieldTouched(name);\r\n if (onSetSelect) {\r\n // SET VALUE ตรงนึ้\r\n onSetSelect(form, \"\");\r\n }\r\n return;\r\n }\r\n form.setFieldValue(name, data.value);\r\n form.setFieldTouched(name);\r\n if (onSetSelect) {\r\n // SET VALUE ตรงนึ้\r\n onSetSelect(form, data ? data.value : \"\");\r\n }\r\n\r\n };\r\n\r\n render() {\r\n const {\r\n name,\r\n label,\r\n form,\r\n hint,\r\n options,\r\n disable,\r\n errorMessage,\r\n required,\r\n mode,\r\n placeholder,\r\n isClearable,\r\n classes,\r\n onChangeMultiSelect,\r\n onBlurMultiSelect,\r\n menuPortalTarget,\r\n variant\r\n } = this.props;\r\n const isInvalid = !!FormErrors.displayableError(form, name, errorMessage);\r\n\r\n const controlStyles = {\r\n container: (provided) => ({\r\n ...provided,\r\n width: \"100%\",\r\n marginTop: \"16px\",\r\n marginBottom: \"8px\",\r\n\r\n }),\r\n control: (provided) => ({\r\n ...provided,\r\n borderColor: isInvalid ? \"red\" : undefined,\r\n }),\r\n dropdownIndicator: base => ({\r\n ...base,\r\n cursor: \"pointer\"\r\n }),\r\n indicatorsContainer: base => ({\r\n ...base,\r\n cursor: \"pointer\"\r\n }),\r\n };\r\n\r\n\r\n return (\r\n\r\n \r\n {/*
\r\n - */}\r\n {\r\n objMenu.lstMenu.map((items: any, index: number) => {\r\n return (\r\n
- \r\n \r\n {items.sHeaderName}\r\n \r\n \r\n )\r\n })\r\n }\r\n {/*
require
;\r\n const {\r\n label,\r\n name,\r\n form,\r\n hint,\r\n type,\r\n placeholder,\r\n autoFocus,\r\n autoComplete,\r\n inputProps,\r\n errorMessage,\r\n required,\r\n rows,\r\n disabled,\r\n \r\n } = this.props;\r\n\r\n return (\r\n \r\n \r\n
\r\n
\r\n )\r\n }, [FileDataErr]);\r\n\r\n const TableCompleted = useCallback(() => {\r\n return (\r\n \r\n
\r\n )\r\n }, [FileData]);\r\n\r\n return (\r\n \r\n \r\n
\r\n
\r\n \r\n {(isView || false) === false &&
\r\n )\r\n}","import React from \"react\"\r\nimport { FormLabel, Checkbox, } from \"@material-ui/core\"\r\nimport { withStyles, Theme, createStyles, makeStyles } from '@material-ui/core/styles';\r\nimport { Button, IconButton } from '@material-ui/core';\r\nimport '../../Styles/Fonts/Kanit/css/fonts.css';\r\nimport SaveIcon from '@material-ui/icons/Save';\r\nimport Tooltip from '@material-ui/core/Tooltip';\r\nimport CancelIcon from '@material-ui/icons/Cancel';\r\nimport SearchIcon from '@material-ui/icons/Search';\r\nimport AddCircleIcon from '@material-ui/icons/AddCircle';\r\nimport { AddBox } from \"@material-ui/icons\";\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport DeleteIcon from '@material-ui/icons/Delete';\r\nimport RefreshIcon from '@material-ui/icons/Refresh';\r\nimport SubjectIcon from '@material-ui/icons/Subject';\r\nimport MessageIcon from '@material-ui/icons/Message';\r\nimport Badge from '@material-ui/core/Badge';\r\nimport CheckCircleIcon from '@material-ui/icons/CheckCircle';\r\nimport ClearIcon from '@material-ui/icons/Clear';\r\nimport SpellcheckIcon from '@material-ui/icons/Spellcheck';\r\nimport ReplayIcon from '@material-ui/icons/Replay';\r\nimport DeleteOutlineOutlinedIcon from '@material-ui/icons/DeleteOutlineOutlined';\r\nimport SendIcon from '@material-ui/icons/Send';\r\nimport CreateIcon from '@material-ui/icons/Create';\r\nimport VisibilityIcon from '@material-ui/icons/Visibility';\r\nimport SystemUpdateAltIcon from '@material-ui/icons/SystemUpdateAlt';\r\n\r\nconst useStyles = makeStyles((theme: Theme) =>\r\n createStyles({\r\n button: {\r\n textTransform: \"none\",\r\n margin: theme.spacing(1),\r\n \"height\": \"42px\",\r\n \"margin-top\": \"6px\",\r\n },\r\n buttonSearch: {\r\n textTransform: \"none\",\r\n backgroundColor: \"#000\",\r\n margin: theme.spacing(0),\r\n \"height\": \"42px\",\r\n \"margin-top\": \"6px\",\r\n color: \"#fff\",\r\n '&:hover': {\r\n backgroundColor: '#3f3d3d',\r\n borderColor: '#0062cc',\r\n boxShadow: 'none',\r\n },\r\n '&:active': {\r\n boxShadow: 'none',\r\n backgroundColor: '#3f3d3d',\r\n borderColor: '#005cbf',\r\n },\r\n },\r\n buttonEdite: {\r\n textTransform: \"none\",\r\n backgroundColor: \"#e5a109\",\r\n margin: theme.spacing(1),\r\n color: \"#fff\",\r\n '&:hover': {\r\n backgroundColor: '#cc9541',\r\n borderColor: '#0062cc',\r\n boxShadow: 'none',\r\n },\r\n '&:active': {\r\n boxShadow: 'none',\r\n backgroundColor: '#cc9541',\r\n borderColor: '#005cbf',\r\n },\r\n },\r\n buttonView: {\r\n textTransform: \"none\",\r\n backgroundColor: \"#6f88a9\",\r\n margin: theme.spacing(1),\r\n color: \"#fff\",\r\n '&:hover': {\r\n backgroundColor: '#305b93',\r\n borderColor: '#0062cc',\r\n boxShadow: 'none',\r\n },\r\n '&:active': {\r\n boxShadow: 'none',\r\n backgroundColor: '#305b93',\r\n borderColor: '#005cbf',\r\n },\r\n },\r\n buttonAdd: {\r\n textTransform: \"none\",\r\n backgroundColor: \"#1081e3\",\r\n margin: theme.spacing(1),\r\n color: \"#fff\",\r\n '&:hover': {\r\n backgroundColor: '#3f93db',\r\n borderColor: '#0062cc',\r\n boxShadow: 'none',\r\n },\r\n '&:active': {\r\n boxShadow: 'none',\r\n backgroundColor: '#3f93db',\r\n borderColor: '#3f93db',\r\n },\r\n },\r\n buttonDelete: {\r\n textTransform: \"none\",\r\n backgroundColor: \"#1081e3\",\r\n margin: theme.spacing(1),\r\n color: \"#fff\",\r\n '&:hover': {\r\n backgroundColor: '#3f93db',\r\n borderColor: '#0062cc',\r\n boxShadow: 'none',\r\n },\r\n '&:active': {\r\n boxShadow: 'none',\r\n backgroundColor: '#3f93db',\r\n borderColor: '#3f93db',\r\n },\r\n },\r\n ButtonClear: {\r\n textTransform: \"none\",\r\n backgroundColor: \"#959392\",\r\n margin: theme.spacing(1),\r\n color: \"#fff\",\r\n \"height\": \"42px\",\r\n \"margin-top\": \"6px\",\r\n '&:hover': {\r\n backgroundColor: '##959392',\r\n borderColor: '#0062cc',\r\n boxShadow: 'none',\r\n },\r\n '&:active': {\r\n boxShadow: 'none',\r\n backgroundColor: '##959392',\r\n borderColor: '##959392',\r\n },\r\n },\r\n buttonF:\r\n {\r\n \"margin-right\": \"0px!important\",\r\n '&:MuiButton-startIcon': {\r\n \"margin-right\": \"0px!important\"\r\n }\r\n },\r\n buttonExport: {\r\n textTransform: \"none\",\r\n \"height\": \"42px\",\r\n \"margin-top\": \"6px\",\r\n // margin: theme.spacing(0),\r\n \r\n // backgroundColor: \"#2a8000\",\r\n // margin: theme.spacing(0),\r\n // \"height\": \"42px\",\r\n // \"margin-top\": \"6px\",\r\n // color: \"#fff\",\r\n // '&:hover': {\r\n // backgroundColor: '#3f3d3d',\r\n // borderColor: '#0062cc',\r\n // boxShadow: 'none',\r\n // },\r\n // '&:active': {\r\n // boxShadow: 'none',\r\n // backgroundColor: '#3f3d3d',\r\n // borderColor: '#005cbf',\r\n // },\r\n }\r\n }),\r\n);\r\n\r\nexport const MuiButtonSave = (props) => {\r\n const { type } = props;\r\n const classes = useStyles();\r\n return (\r\n \r\n
\r\n }\r\n {FileData.filter(f => !f.IsDelete).length > 0 && \r\n this.handleChangeValue(value)}\r\n onClose={onCloseCallback}\r\n {...inputProps}\r\n autoOk={false}\r\n renderInput={(startProps, endProps) => {\r\n return (\r\n \r\n \r\n to \r\n \r\n \r\n );\r\n }}\r\n />\r\n
\r\n );\r\n }\r\n}\r\n\r\nDatePickerRangeFormItemNotFast.defaultProps = {\r\n required: false,\r\n};\r\n\r\nDatePickerRangeFormItemNotFast.propTypes = {\r\n form: PropTypes.object.isRequired,\r\n name: PropTypes.string.isRequired,\r\n label: PropTypes.string,\r\n hint: PropTypes.string,\r\n autoFocus: PropTypes.bool,\r\n required: PropTypes.bool,\r\n size: PropTypes.string,\r\n prefix: PropTypes.string,\r\n placeholder: PropTypes.string,\r\n errorMessage: PropTypes.string,\r\n formItemProps: PropTypes.object,\r\n inputProps: PropTypes.object,\r\n};\r\n\r\nclass DatePickerRangeFormItem extends Component {\r\n render() {\r\n return (\r\n \");\r\n result.push({ id: (WID + \"\"), label: WName, comment: comment });\r\n });\r\n }\r\n if (formProps != null) {\r\n // if (formProps.values.Company === \"4\") {\r\n formProps.setFieldValue(\"WorkingTime\", new LINQ
\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 }, [lstEventReport, isEdite]);\r\n\r\n const [openLe, setOpenLe] = React.useState({ Remark: false, sNote: \"\" });\r\n\r\n const handleCloseLe = (value: string) => {\r\n setOpenLe({ ...openLe, Remark: false, sNote: \"\" });\r\n };\r\n const checkLevel = (nSecurityLevelID, formProps) => {\r\n let qbj = {\r\n nEventGroupID: null,\r\n nCompanyID: null,\r\n lstAreaID: new LINQ\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n | Company | \r\nArea/Sub Area | \r\n {(+EventGroupSelect) === 3 &&Security Status | }\r\n {(+EventGroupSelect) === 3 &&Security Level | }\r\nStatus | \r\nEvent Type | \r\nDescription | \r\nUpdated By | \r\nReporting Date | \r\nReporting Status | \r\n\r\n |
|---|---|---|---|---|---|---|---|---|---|---|
| {item.sCompanyName} | \r\n{item.sAreaName} | \r\n {(+EventGroupSelect) === 3 &&{item.sSecurityLevelName} | }\r\n{item.sEventTypeName} | \r\n{item.sDescription} | \r\n{item.sReportby} | \r\n{dateFormat(item.dCreateDate, \"dd/mm/yyyy HH:MM\")} | \r\n{item.sStatusName} | \r\n\r\n {isEdite === false &&\r\n \r\n {item.isDelete && }\r\n | \r\n
\r\n
\r\n\r\n \r\n
\r\n \r\n {/* mt-4 ml-4 */}\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 {(formProps) => {\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 EVENT FORM แบบฟอร์มรายงานเหตุการณ์
\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\n { setContactUs(e) }}\r\n />\r\n \r\n \r\n {isCorparate === true ?\r\n Save : \"\"\r\n }\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n Contact US
\r\n Sub Area', width: 10, isSort: true },\r\n { id: 'nEventColorID', numeric: false, disablePadding: true, label: 'Status', width: 2, isSort: false },\r\n { id: 'sEventTypeName', numeric: false, disablePadding: false, label: 'Event Type', width: 15, isSort: true },\r\n { id: 'sDescription', numeric: true, disablePadding: false, label: 'Description', width: 17, isSort: true },\r\n { id: 'sReportby', numeric: true, disablePadding: false, label: ' Reporter', width: 10, isSort: true },\r\n { id: 'dCreateDate', numeric: true, disablePadding: false, label: 'Reporting Date', width: 8, isSort: true },\r\n { id: 'sStatusName', numeric: true, disablePadding: false, label: 'Reporting Status', width: 10, isSort: true },\r\n { id: 'isApprover', numeric: true, disablePadding: false, label: '', width: 2, isSort: false },\r\n ];\r\n\r\n return (\r\n
Operation [{lstEventOperation.length}]
\r\n \r\nSub Area', width: 15, isSort: true },\r\n { id: 'sSecurityLevelColor', numeric: false, disablePadding: true, label: 'Security Status', width: 2, isSort: false },\r\n { id: 'sSecurityLevelName', numeric: false, disablePadding: false, label: 'Security Level', width: 15, isSort: true },\r\n { id: 'nEventColorID', numeric: false, disablePadding: true, label: 'Status', width: 2, isSort: false },\r\n { id: 'sEventTypeName', numeric: false, disablePadding: false, label: 'Event Type', width: 15, isSort: true },\r\n { id: 'sDescription', numeric: true, disablePadding: false, label: 'Description', width: 15, isSort: true },\r\n { id: 'sReportby', numeric: true, disablePadding: false, label: ' Reporter', width: 10, isSort: true },\r\n { id: 'dCreateDate', numeric: true, disablePadding: false, label: 'Reporting Date', width: 8, isSort: true },\r\n { id: 'sStatusName', numeric: true, disablePadding: false, label: 'Reporting Status', width: 10, isSort: true },\r\n { id: 'isApprover', numeric: true, disablePadding: false, label: '', width: 2, isSort: false },\r\n ];\r\n\r\n return (\r\n
Security [{lstEventSecurity.length}]
\r\n \r\nSub Area', width: 15, isSort: true },\r\n { id: 'nEventColorID', numeric: false, disablePadding: true, label: 'Status', width: 2, isSort: false },\r\n { id: 'sEventTypeName', numeric: false, disablePadding: false, label: 'Event Type', width: 15, isSort: true },\r\n { id: 'sDescription', numeric: true, disablePadding: false, label: 'Description', width: 17, isSort: true },\r\n { id: 'sReportby', numeric: true, disablePadding: false, label: 'Reporter', width: 10, isSort: true },\r\n { id: 'dCreateDate', numeric: true, disablePadding: false, label: 'Reporting Date', width: 8, isSort: true },\r\n { id: 'sStatusName', numeric: true, disablePadding: false, label: 'Reporting Status', width: 10, isSort: true },\r\n { id: 'isApprover', numeric: true, disablePadding: false, label: '', width: 2, isSort: false },\r\n ];\r\n return (\r\n
CSR [{lstEventCSR.length}]
\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 {lstEventGroupID.filter(f => f === 2).length > 0 && \r\n \r\n
\r\n \r\n
\r\n EVENT TODAY รายงานเหตุการณ์ Report Date: {dateFormat(dReportDate, \"dd/mm/yyyy\")}
\r\n \r\n {\r\n handleChangeValue(value);\r\n if (handleDateChange != undefined) handleDateChange(value);\r\n }}\r\n {...inputProps}\r\n autoOk={false}\r\n renderInput={(startProps, endProps) => {\r\n return (\r\n \r\n \r\n to */}\r\n \r\n \r\n );\r\n }}\r\n />\r\n
\r\n\r\n \r\n );\r\n}\r\nexport default DatePickerRangeNoForm;","import React, { Fragment, useEffect, useCallback, useRef } from 'react';\r\nimport { CardBody, Label, Table } from 'reactstrap';\r\nimport Accordion from '@material-ui/core/Accordion';\r\nimport AccordionSummary from '@material-ui/core/AccordionSummary';\r\nimport AccordionDetails from '@material-ui/core/AccordionDetails';\r\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\r\nimport { EventColorCompronent, MuiButtonDelete, MuiButtonSearch, MuiIconCheckBoxDelete, MuiButtonApproveFront, MuiButtonEditeFront, MuiButtonViewFront, MuiButtonExport } from '../../SysComponent/MaterialComponent'\r\nimport { Decrypt, FnBlock_UI, ResultAPI, AxiosPost, DialogConfirmDelete, ResultDeleteAPI, AxiosPostExportFile } from '../../SysComponent/SystemComponent';\r\nimport {\r\n useStyles, MuiTableTableToolbar, StyledTable_Front, StyledTableCell_Front, StyledTableRow_Front, StyledTableHead_Front, Order,\r\n PerPageOptions, StyledTableBody_Front, stableSort, getComparator, MuiRowNoData, HeadCell, defaultPage\r\n} from '../../form/Table/CustomTable';\r\nimport {\r\n Paper, Grid, TableContainer, TableSortLabel, IconButton, Typography, TablePagination,\r\n DialogContent, DialogActions, Checkbox, Button\r\n} from '@material-ui/core';\r\nimport CreateIcon from '@material-ui/icons/Create';\r\nimport SelectNoForm from '../../form/SelectNoFormItem';\r\nimport { TextFieldInputFreeText } from '../../form/InputNoForm';\r\nimport DatePickerRangeNoForm from '../../form/DatePickerRangeNoForm';\r\nimport EventApprove from '../EventApprove'\r\nimport { List as LINQ } from 'linqts';\r\nimport Axios from 'axios';\r\nimport { combineReducers } from 'redux';\r\nconst dateFormat = require('dateformat');\r\nconst sController = \"EventRecord\";\r\nconst EventRecord = (props) => {\r\n const { BlockUI, UnBlockUI } = FnBlock_UI();\r\n const classes = useStyles();\r\n const [rowsData, setRowData] = React.useState([] as any[]);\r\n const [MasterData, setMasterData] = React.useState({\r\n lstEventGroup: [] as any[],\r\n lstCompyne: [] as any[],\r\n lstArea: [] as any[],\r\n lstEventType: [] as any[],\r\n lstLavel: [] as any[],\r\n lstCompyneCSR: [] as any[],\r\n });\r\n\r\n const [selectDate, setSelectDate] = React.useState([new Date().setDate(new Date().getDate() - 30), new Date()] as any);\r\n const [selectData, setSelectData] = React.useState({ EventGrupe: \"\", Compyne: \"\", Area: \"\", EventType: \"\", Lavel: \"\", TextSerch: \"\" });\r\n const [sMode, setMode] = React.useState(\"\");\r\n const [sShowExport, setShowExport] = React.useState(false);\r\n //#region API\r\n const LoadData = () => {\r\n let params = new URLSearchParams(window.location.search)\r\n let ID = Decrypt(params.get('ID')) + \"\";\r\n let Mode = Decrypt(params.get('Mode')) + \"\";\r\n setMode(Mode);\r\n if (Mode === \"Report\") {\r\n setSelectDate([null, null]);\r\n }\r\n // }else{\r\n // setSelectDate([undefined,undefined])\r\n // }\r\n let obj = {\r\n 'nEventGroup': null,\r\n 'nEventType': null,\r\n 'nArea': null,\r\n 'nCompyne': null,\r\n 'nLavel': null,\r\n 'sText': \"\",\r\n 'sStartDate': dateFormat(selectDate[0], \"dd/mm/yyyy\"),\r\n 'sEndDate': dateFormat(selectDate[1], \"dd/mm/yyyy\"),\r\n 'sMode': Mode,\r\n 'sArrEventID': ID\r\n };\r\n AxiosPost(sController + \"/onLoad\", obj, (response) => {\r\n ResultAPI(false, response, null, () => {\r\n\r\n // if (Mode === \"Report\") {\r\n\r\n selectData.EventGrupe = response.sDefallGroupEvent;\r\n selectData.Compyne = response.sDefallCompany;\r\n selectData.Area = response.sDefallArea;\r\n selectData.EventType = response.sDefallEventType;\r\n setSelectData(selectData);\r\n getArea(response.sDefallGroupEvent, response.sDefallCompany);\r\n getEventType(response.sDefallGroupEvent, response.sDefallCompany, response.sDefallArea);\r\n\r\n // }\r\n MasterData.lstCompyne = response.lstCompyne;\r\n MasterData.lstEventGroup = response.lstEventGroup;\r\n MasterData.lstLavel = response.lstSecurityLevel;\r\n MasterData.lstCompyneCSR = response.lstCompyneCSR;\r\n setMasterData({ ...MasterData });\r\n\r\n setRowData(new LINQto
\r\n \r\n {rowsData.length > 0 ?
\r\n \r\n { GetExportData() }} />\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\n\r\n \r\n \r\n \r\n \r\n 0 && selected.length < new LINQ(rowsData).Where(w => w.isDelete === true).ToArray().length}\r\n checked={new LINQ(rowsData).Where(w => w.isDelete === true).ToArray().length > 0 && selected.length === new LINQ(rowsData).Where(w => w.isDelete === true).ToArray().length}\r\n onChange={handleSelectAllClick}\r\n />\r\n \r\n {headCells.map((headCell) => (\r\n \r\n {headCell.isSort ?\r\n \r\n {headCell.label}\r\n {orderBy === headCell.id ? (\r\n \r\n {order === 'desc' ? 'sorted descending' : 'sorted ascending'}\r\n \r\n ) : null}\r\n \r\n : headCell.label\r\n }\r\n \r\n ))}\r\n \r\n \r\n \r\n {rowsData.length > 0 ?\r\n stableSort(rowsData, getComparator(order, orderBy)).slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\r\n .map((item, index) => {\r\n const isItemSelected = isSelected(+item.nEventReportID);\r\n const labelId = `enhanced-table-checkbox-${index}`;\r\n return (\r\n \r\n \r\n {item.isDelete && handleClick(event, item.nEventReportID)}\r\n inputProps={{ 'aria-labelledby': labelId }}\r\n />}\r\n \r\n {(rowsPerPage * (page)) + (index + 1)} \r\n {dateFormat(item.dEventDate, \"dd/mm/yyyy\")} \r\n {item.sCompanyName} \r\n {item.sAreaName} \r\n {item.sEventGroupName} \r\n \r\n {\r\n handleShew(item.nEventReportID, \"View\");\r\n }}\r\n style={{ textTransform: \"none\", textAlign: \"left\",verticalAlign:\"top\",padding:\"0px\" }}>\r\n {item.sEventTypeName}\r\n \r\n \r\n {item.sReportby} \r\n {dateFormat(item.dCreateDate, \"dd/mm/yyyy HH:MM\")} \r\n {item.sStatusName} \r\n \r\n {item.isEdite && { handleShew(item.nEventReportID, \"Edite\") }} >Edit }\r\n {item.isView && { handleShew(item.nEventReportID, \"View\") }} >view }\r\n {item.isApprove && { handleShew(item.nEventReportID, \"Approve\") }} >Approver }\r\n \r\n \r\n )\r\n })\r\n :\r\n \r\n No Data \r\n \r\n }\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n EVENT RECORD
\r\n */}\r\n
Summary Report by Event Type
\r\n{startDate || \"\"} - {endDate || \"\"} {\" \" + (dAsof != undefined && dAsof != null ? \" (As of \" + dateFormat(dAsof, \"dd/mm/yyyy\")+\")\" : \"\")}
\r\n\r\n \r\n
\r\n % Report by Event Type
\r\n{startDate || \"\"} - {endDate || \"\"}{\" \" + (dAsof != undefined && dAsof != null ? \" (As of \" + dateFormat(dAsof, \"dd/mm/yyyy\")+\")\" : \"\")}
\r\nSummary of Status Report
\r\n{startDate || \"\"} - {endDate || \"\"} {\" \" + (dAsof != undefined && dAsof != null ? \" (As of \" + dateFormat(dAsof, \"dd/mm/yyyy\")+\")\" : \"\")}
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n | Company | \r\nArea/Sub area | \r\nLevel 1 (Report) | \r\n Level 2 (Report) | \r\n Level 3 (Report) | \r\n Level 4 (Report) | \r\n Normal Status (Report) | \r\n Abnormal Status (Report) | \r\n Not Report (Day) | \r\n |
|---|---|---|---|---|---|---|---|---|---|
| {el.sCompanyName} | \r\n{el.sAreaName} | \r\n{el.nLavel1} | \r\n{el.nLavel2} | \r\n{el.nLavel3} | \r\n{el.nLavel4} | \r\n {/*{(el.nLavel1 + el.nLavel2 + el.nLavel3 + el.nLavel4)} | */}\r\n{el.nNormal} | \r\n {/* borderLeft: \"2px solid rgb(15 15 15)\" */}\r\n{el.nAbnormal} | \r\n{el.nNotReport} | \r\n
| Total | \r\n{(new LINQ | \r\n {(new LINQ | \r\n {(new LINQ | \r\n {(new LINQ | \r\n {/* {(\r\n new LINQ | */}\r\n {(new LINQ | \r\n {(new LINQ | \r\n \r\n {/* {(new LINQ | \r\n
Security Level
\r\n{startDate || \"\"} - {endDate || \"\"} {\" \" + (dAsof != undefined && dAsof != null ? \" As of \" + dateFormat(dAsof, \"dd/mm/yyyy\") : \"\")}
\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\n \r\n \r\n \r\n \r\n \r\n {(formProps) => {\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 \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\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n {selectEventGroup === 3 &&\r\n \r\n \r\n \r\n \r\n \r\n \r\n }\r\n \r\n
\r\n \r\n
\r\n Event Report รายงานเหตุการณ์
\r\n \r\n {isShoweExport &&
\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\n | Company | \r\nArea/Sub area | \r\n {lstTableEventType.map((el, inex) => {\r\n return (\r\n{ParseHtml(el.sEventName + \" (Report)\")} | \r\n )\r\n })}\r\n Total (Report) | \r\n Not Report (Day) | \r\n
|---|---|---|---|---|
| {el.sCompanyName} | \r\n{el.sAreaName} | \r\n {lstTableEventType.map((ex: { nEventTypeID: any; }, inexEX: string) => {\r\n let nCout = new LINQ\r\n {nCout > 0 ? {nCout} : nCout}\r\n\r\n | )\r\n })}\r\n\r\n\r\n {arrTotallCout > 0 ? {arrTotallCout} : arrTotallCout}\r\n | \r\n{el.nNotReport} | \r\n\r\n
| \"Test\" | \r\n //||||
| Total | \r\n {lstTableEventType.map((ex: { nEventTypeID: any; }, inexEX: string) => {\r\n let nCout = new LINQ\r\n {nCout > 0 ? {nCout} : nCout}\r\n | )\r\n })}\r\n\r\n\r\n {\r\n (new LINQ | \r\n \r\n {/* {\r\n (new LINQ | \r\n\r\n
\r\n \r\n \r\n
\r\n
\r\n\r\n };\r\n\r\n const TableDetail = (pro) => {\r\n const { mode = 1, rowsData = [] } = pro;\r\n const classes = useStyles();\r\n const [page, setPage] = React.useState(0);\r\n const [rowsPerPage, setRowsPerPage] = React.useState(defaultPage);\r\n const [order, setOrder] = React.useState| Company | \r\nArea/Sub area | \r\n {new LINQ{ParseHtml(el.sEventName + \" (Report)\")} | \r\n )\r\n })}\r\n Total (Report) | \r\n
|---|---|---|---|
| {el.sCompanyName} | \r\n{el.sAreaName} | \r\n {new LINQ\r\n {nCout > 0 ? {nCout} : nCout}\r\n\r\n | )\r\n })}\r\n\r\n\r\n {arrTotallCout > 0 ? {arrTotallCout} : arrTotallCout}\r\n | \r\n\r\n
| Total | \r\n {new LINQ\r\n {nCout > 0 ? {nCout} : nCout}\r\n | )\r\n })}\r\n\r\n\r\n {\r\n (new LINQ | \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\n \r\n \r\n \r\n \r\n \r\n {(formProps) => {\r\n return (\r\n \r\n )\r\n }}\r\n \r\n \r\n \r\n \r\n \r\n \r\n OPERATION \r\n \r\n \r\n \r\n }\r\n\r\n {(cObjData.lstEventGroupID || []).filter(f => f == 3).length > 0 && \r\n SECURITY \r\n \r\n \r\n \r\n \r\n }\r\n {(cObjData.lstEventGroupID || []).filter(f => f == 1).length > 0 && \r\n CSR \r\n \r\n \r\n \r\n \r\n }\r\n \r\n \r\n
\r\n \r\n
\r\n Event Report รายงานเหตุการณ์ Abnormal
\r\n \r\n {isShoweExport &&
\r\n\r\n {(cObjData.lstEventGroupID || []).filter(f => f == 2).length > 0 && \r\n
}\r\n \r\n
\r\n \r\n \r\n f.nEventGroup == 2)}\r\n arrTableSummaryEventReport={lstTableSummaryEventReport.filter(f => f.nEventGroup == 2)}\r\n arrTableSummaryEventReportDatail={lstTableSummaryEventReportDatail.filter(f => f.nEventGroup == 2)} />\r\n \r\n \r\n f.nEventGroup == 2) || []} />\r\n \r\n \r\n \r\n
\r\n \r\n \r\n f.nEventGroup == 3)}\r\n arrTableSummaryEventReport={lstTableSummaryEventReport.filter(f => f.nEventGroup == 3)}\r\n arrTableSummaryEventReportDatail={lstTableSummaryEventReportDatail.filter(f => f.nEventGroup == 3)} />\r\n \r\n \r\n f.nEventGroup == 3) || []} />\r\n \r\n \r\n \r\n
\r\n \r\n \r\n f.nEventGroup == 1)}\r\n arrTableSummaryEventReport={lstTableSummaryEventReport.filter(f => f.nEventGroup == 1)}\r\n arrTableSummaryEventReportDatail={lstTableSummaryEventReportDatail.filter(f => f.nEventGroup == 1)} />\r\n \r\n \r\n f.nEventGroup == 1) || []} />\r\n \r\n \r\n \r\n
\r\n Event Type : {EventGroupID == 2 ? \"Operation\" : EventGroupID == 3 ? \"Security\" : \"CSR\"}
\r\n{sTiter}
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n Company\r\n \r\n \r\n Area\r\n \r\n {lstTableEventType.map((el, inex) => {\r\n return (\r\n \r\n {ParseHtml(el.sEventTypeName + \"
(Report)\")}\r\n \r\n );\r\n })}\r\n\r\n Not Report
\r\n (Area)\r\n \r\n \r\n \r\n \r\n {lstTableSummaryEventReport.map((el, index) => {\r\n return (\r\n \r\n \r\n {el.sCompanyName}\r\n \r\n \r\n {el.nAreaCount}\r\n \r\n {lstTableEventType.map(\r\n (ex: { nEventTypeID: any }, inexEX: string) => {\r\n let nCout = new LINQ(lstEeventRepottData)\r\n .Where(\r\n (w) =>\r\n w.nCompanyID === el.nCompanyID &&\r\n w.nEventTypeID === ex.nEventTypeID\r\n )\r\n .Count();\r\n let nEID: any = new LINQ(lstEeventRepottData)\r\n .Where(\r\n (w) =>\r\n w.nCompanyID === el.nCompanyID &&\r\n w.nEventTypeID === ex.nEventTypeID\r\n )\r\n .Select((s) => s.nEventID + \"\")\r\n .ToArray();\r\n return (\r\n \r\n {nCout > 0 ? (\r\n \r\n {\" \"}\r\n {nCout}\r\n \r\n ) : (\r\n nCout\r\n )}\r\n \r\n );\r\n }\r\n )}\r\n \r\n {el.nNotRepor}\r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n (Report)\")}\r\n \r\n );\r\n })}\r\n
\r\n (Area)\r\n \r\n
\r\n
\r\n \r\n \r\n {lstEventGroupID.length > 0 && \r\n OPERATION \r\n \r\n \r\n \r\n \r\n }\r\n {lstEventGroupID.filter(f => f === 3).length > 0 && \r\n SECURITY \r\n \r\n \r\n \r\n \r\n }\r\n {lstEventGroupID.filter(f => f === 1).length > 0 &&\r\n \r\n CSR \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\n \r\n \r\n \r\n \r\n Event Report รายงานเหตุการณ์ ประจําสัปดาห์{\" \"}\r\n {sDateTo}{\" \"} {dAsof != null && \"(As of \" + dateFormat(dAsof, \"dd/mm/yyyy\")+\")\"}\r\n
\r\n \r\n {isShoweExport && (\r\n
\r\n }\r\n \r\n {lstEventGroupID.filter(f => f === 2).length > 0 &&\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\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 Login By User Company
\r\n\r\n \r\n PTT\r\n {' '}\r\n {/* ADFS */}\r\n {/* \r\n PTT\r\n {' '} */}\r\n \r\n \r\n \r\n PTTEP\r\n \r\n {' '}\r\n
\r\n Login by Azure
\r\n\r\n \r\n \r\n PTTEP\r\n \r\n {' '}\r\n
\r\n Login By User Company
\r\n\r\n \r\n Login AD\r\n {' '}\r\n\r\n \r\n
\r\n สำหรับบริษัท
\r\n- PTT
\r\nLogin by System
\r\n\r\n \r\n \r\n Login\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\n \r\n {/* {isShoweExport && (\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 Company\r\n \r\n \r\n Area/Sub area\r\n \r\n {lstTableEventType.map((el, inex) => {\r\n return (\r\n \r\n {ParseHtml(el.sEventName + \"
(Report)\")}\r\n \r\n );\r\n })}\r\n\r\n Total
\r\n (Report)\r\n \r\n\r\n Not Report
\r\n (Day)\r\n \r\n \r\n \r\n \r\n {lstTableSummaryEventReport.map((el, index) => {\r\n let arrTotallCout = new LINQ(\r\n lstTableSummaryEventReportDatail\r\n )\r\n .Where((w) => w.nAreaID === el.nAreaID)\r\n .Count();\r\n let arrTotallEID: any = new LINQ(\r\n lstTableSummaryEventReportDatail\r\n )\r\n .Where((w) => w.nAreaID === el.nAreaID)\r\n .Select((s) => s.nEventID + \"\")\r\n .ToArray();\r\n return (\r\n \r\n \r\n {el.sCompanyName}\r\n \r\n {el.sAreaName} \r\n {lstTableEventType.map(\r\n (ex: { nEventTypeID: any }, inexEX: string) => {\r\n let nCout = new LINQ(\r\n lstTableSummaryEventReportDatail\r\n )\r\n .Where(\r\n (w) =>\r\n w.nAreaID === el.nAreaID &&\r\n w.nEventTypeID === ex.nEventTypeID\r\n )\r\n .Count();\r\n let nEID: any = new LINQ(\r\n lstTableSummaryEventReportDatail\r\n )\r\n .Where(\r\n (w) =>\r\n w.nAreaID === el.nAreaID &&\r\n w.nEventTypeID === ex.nEventTypeID\r\n )\r\n .Select((s) => s.nEventID + \"\")\r\n .ToArray();\r\n return (\r\n \r\n {nCout > 0 ? (\r\n \r\n {\" \"}\r\n {nCout}\r\n \r\n ) : (\r\n nCout\r\n )}\r\n \r\n );\r\n }\r\n )}\r\n\r\n \r\n {arrTotallCout > 0 ? (\r\n \r\n {\" \"}\r\n {arrTotallCout}\r\n \r\n ) : (\r\n arrTotallCout\r\n )}\r\n \r\n \r\n {el.nNotReport}\r\n \r\n \r\n // \r\n // \"Test\" \r\n // \r\n );\r\n })}\r\n \r\n \r\n Total\r\n \r\n {lstTableEventType.map(\r\n (ex: { nEventTypeID: any }, inexEX: string) => {\r\n let nCout = new LINQ(\r\n lstTableSummaryEventReportDatail\r\n )\r\n .Where((w) => w.nEventTypeID === ex.nEventTypeID)\r\n .Count();\r\n let nEID: any = new LINQ(\r\n lstTableSummaryEventReportDatail\r\n )\r\n .Where((w) => w.nEventTypeID === ex.nEventTypeID)\r\n .Select((s) => s.nEventID + \"\")\r\n .ToArray();\r\n\r\n return (\r\n \r\n {nCout > 0 ? (\r\n \r\n {\" \"}\r\n {nCout}\r\n \r\n ) : (\r\n nCout\r\n )}\r\n \r\n );\r\n }\r\n )}\r\n\r\n \r\n {new LINQ(\r\n lstTableSummaryEventReportDatail\r\n ).Count() > 0 ? (\r\n (\r\n lstTableSummaryEventReportDatail\r\n )\r\n .Select((s) => s.nEventID + \"\")\r\n .ToArray()\r\n .join(\",\")\r\n ) +\r\n \"&Mode=\" +\r\n Encrypt(\"Report\")\r\n }\r\n >\r\n {\" \"}\r\n {new LINQ(\r\n lstTableSummaryEventReportDatail\r\n ).Count()}\r\n \r\n ) : (\r\n new LINQ(\r\n lstTableSummaryEventReportDatail\r\n ).Count()\r\n )}\r\n \r\n \r\n {/* {new LINQ(lstTableSummaryEventReport).Sum(\r\n (s) => s.nNotReport\r\n )} */}\r\n \r\n \r\n \r\n \r\n
\r\n (Report)\")}\r\n \r\n );\r\n })}\r\n
\r\n (Report)\r\n \r\n
\r\n (Day)\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {(formProps) => {\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 {lstEventGroupID.length > 0 && \r\n OPERATION \r\n \r\n \r\n \r\n \r\n\r\n }\r\n {lstEventGroupID.filter(f => f === 3).length > 0 && \r\n SECURITY \r\n \r\n \r\n \r\n \r\n }\r\n {lstEventGroupID.filter(f => f === 1).length > 0 && \r\n CSR \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\n \r\n \r\n {(lstEventGroupID.length == 1 && lstEventGroupID.filter(f => f === 1).length > 0) ?\r\n \r\n \r\n Event Report รายงานเหตุการณ์ ประจำเดือน{\" \"}\r\n {selectDate.sMonth}\r\n
\r\n \r\n {isShoweExport && (\r\n
\r\n }\r\n {lstEventGroupID.filter(f => f === 2).length > 0 && \r\n
\r\n )}\r\n \",\"\\n\")+ (dAsof != undefined && dAsof != null ? \" (As of \" + dateFormat(dAsof, \"dd/mm/yyyy\") : \"\")+\")\" || \"COMPANY: AREA\"}[/]`;\r\n // title.layout = \"grid\";\r\n // title.fixedWidthGrid = false;\r\n title.wrap = true;\r\n // title.contentWidth = 1;\r\n title.textAlign = \"middle\";\r\n title.marginLeft=10;\r\n title.marginRight=10;\r\n // *** Criteria\r\n const createSeries = (field, name, nColor) => {\r\n let series = chart.series.push(new am4charts.ColumnSeries());\r\n series.dataFields.valueX = field;\r\n series.dataFields.categoryY = \"sMonth\";\r\n series.stacked = true;\r\n series.name = name;\r\n\r\n series.fill = am4core.color(colorList[nColor]); // *** สีตรงกลาง\r\n series.stroke = am4core.color(colorList[nColor]); // *** สีขอบเส้น\r\n\r\n // *** Toolttp\r\n series.dataFields.valueY = field;\r\n series.columns.template.tooltipText = \"{name}: [bold]{valueY}[/]\";\r\n\r\n let labelBullet = series.bullets.push(new am4charts.LabelBullet());\r\n labelBullet.locationX = 0.5;\r\n labelBullet.label.text = \"{valueX}\";\r\n labelBullet.label.fill = am4core.color(\"#fff\");\r\n }\r\n new LINQ
{data.sComArea || \"COMPANY: AREA\"}
*/}\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\n \r\n \r\n \r\n \r\n {(formProps) => {\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 \r\n\r\n {/* Graph */}\r\n \r\n
\r\n \r\n
\r\n Event Report รายงานเหตุการณ์ ประจําปี {\" \"}\r\n \r\n {sDateTo || \" 2020\"}\r\n \r\n
\r\n \r\n {\r\n lstImgChartStacked.length === MasterData.lstGraph.length &&\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 | Company | \r\nArea/Sub area | \r\n {lstTableEventType.map((el, inex) => {\r\n return (\r\n{ParseHtml(el.sEventName + \" (Report)\")} | \r\n )\r\n })}\r\n Total (Report) | \r\n Not Report (Day) | \r\n
|---|---|---|---|---|
| {el.sCompanyName} | \r\n{el.sAreaName} | \r\n {lstTableEventType.map((ex: { nEventTypeID: any; }, inexEX: string) => {\r\n let nCout = new LINQ\r\n {nCout > 0 ? {nCout} : nCout}\r\n\r\n | )\r\n })}\r\n\r\n\r\n {arrTotallCout > 0 ? {arrTotallCout} : arrTotallCout}\r\n | \r\n{el.nNotReport} | \r\n\r\n
| \"Test\" | \r\n //||||
| Total | \r\n {lstTableEventType.map((ex: { nEventTypeID: any; }, inexEX: string) => {\r\n let nCout = new LINQ\r\n {nCout > 0 ? {nCout} : nCout}\r\n | )\r\n })}\r\n\r\n\r\n {\r\n (new LINQ | \r\n \r\n {\r\n // (new LINQ | \r\n\r\n
PTT Group Event Report: Operation [{rows.length}]
\r\n \r\n\r\n
PTT Group Event Report: Security [{rows.length}]
\r\n \r\n\r\n
PTT Group Event Report: CSR [{rows.length}]
\r\n \r\n\r\n
\r\n \r\n {MasterData.lstEventGrupID.filter(w=> w === 2).length>0&& \r\n
\r\n Home
*/}\r\n\r\n {rows.length > 0 ?
\r\n \r\n { ExportExcel() }} />\r\n
: \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n require
;\r\n const {\r\n label,\r\n name,\r\n form,\r\n hint,\r\n type,\r\n placeholder,\r\n autoFocus,\r\n autoComplete,\r\n inputProps,\r\n disable,\r\n errorMessage,\r\n required,\r\n readonly,\r\n size,\r\n } = this.props;\r\n\r\n return (\r\n \r\n
\r\n\r\n Working Time
\r\n\r\n
\r\n
\r\n \r\n
\r\n Event Type
\r\n\r\n
\r\n {rows.length > 0 ?
\r\n \r\n { ExportExcel() }} />\r\n
: \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n Select Working Time
\r\n\r\n
Select Event Type
\r\n\r\n
\r\n
\r\n \r\n
Select Working Time
\r\n\r\n
Sub Area
}\r\n {!isView &&Sub Area (Do not use duplicate name)
\r\n\r\n
\r\n
\r\n \r\n
\r\n {rows.length > 0 ?
\r\n \r\n { exportExcel() }} />\r\n
: \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n Add Sub Event Type (Do not use duplicate name)
}\r\n {isView &&Sub Event Type
}\r\n\r\n
\r\n
\r\n \r\n {rows.length > 0 ?
\r\n \r\n {\r\n ExportExcel();\r\n }} /> \r\n
: - \r\n {lstCompanyName.map((item, index) => (\r\n
- \r\n {lstEvenyTypeName.map((item, index) => (\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n Member
}\r\n {!isView &&Add Member
\r\n\r\n
Relation with Area
\r\n {!isView &&\r\n\r\n
\r\n {\r\n handleChangeValue(value);\r\n }}\r\n {...inputProps}\r\n autoOk\r\n renderInput={(startProps, endProps) => {\r\n return (\r\n \r\n \r\n );\r\n }}\r\n />\r\n
\r\n\r\n \r\n );\r\n}\r\nexport default TimePickerNoForm;","import React, { Fragment, useEffect, useState, useRef, useCallback } from 'react';\r\nimport { List as LINQ } from 'linqts';\r\nimport {\r\n MuiButtonSearch, MuiButtonEdite, MuiButtonSave, MuiButtonResend, EventColorCompronent, MuiIconButtonItem\r\n , MuiIconButtonMessage, MuiButtonCancel\r\n} from '../../SysComponent/MaterialComponent'\r\nimport { Grid, TableSortLabel, TableContainer, TablePagination } from '@material-ui/core';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport DatePickerFormItem from \"../../form/DatePickerFormItem\";\r\nimport DateRangeOutlinedIcon from '@material-ui/icons/DateRangeOutlined';\r\nimport InputAdornment from '@material-ui/core/InputAdornment/InputAdornment';\r\nimport GroupIcon from '@material-ui/icons/Group';\r\nimport { SwAlert, AxiosPost, ResultAPI, FnBlock_UI, DialogConfirm, NoPermission, AlertTitle, MsgValidate, Effect, scrollToElementValidate } from 'components/SysComponent/SystemComponent';\r\nimport { withStyles, Theme, createStyles, makeStyles } from '@material-ui/core/styles';\r\nimport Badge from '@material-ui/core/Badge';\r\nimport { DialogComponents } from '../../DialogComponents/DialogComponents'\r\nimport { Formik, Form } from \"formik\";\r\nimport * as yup from 'yup';\r\nimport {\r\n MuiTable, StyledTableCell, StyledTableRow, StyledTableHead, Order, StyledTableBody, MuiRowNoData, defaultPage, HeadCell, useStyles, stableSort,\r\n getComparator, PerPageOptions, MuiTableTableToolbar\r\n} from '../../form/Table/CustomTable';\r\nimport List from '@material-ui/core/List';\r\nimport ListItem from '@material-ui/core/ListItem';\r\nimport ListItemAvatar from '@material-ui/core/ListItemAvatar';\r\nimport ListItemText from '@material-ui/core/ListItemText';\r\nimport Avatar from '@material-ui/core/Avatar';\r\nimport SelectFormItem from '../../form/SelectFormItem';\r\nimport LabelImportantIcon from '@material-ui/icons/LabelImportant';\r\nimport InputFormItem from '../../form/InputFormItem';\r\nconst dateFormat = require('dateformat');\r\nconst sController = \"LogMailMonitoring\";\r\nexport const LogMonitoring = (props) => {\r\n const { BlockUI, UnBlockUI } = FnBlock_UI();\r\n var date = new Date();\r\n date.setDate(date.getDate() - 1);\r\n\r\n const classes = useStyles();\r\n const [order, setOrder] = React.useState{sMsgError}
\r\n- \r\n {new LINQ
วันที่ส่ง E-Mail {conData.sentDate != null ? dateFormat(conData.sentDate, \"dd/mm/yyyy\") : \"\"}
\r\nจำนวนที่ต้องส่งทั้งหมด {conData.countSentAll} คน สำเร็จ {conData.countSent} คน ไม่สำเร็จ {conData.countNot} คน
\r\n*Resend All จะส่งเฉพาะ User ที่ไม่ได้รับ Email\r\n
กำหนดเงื่อนไขเวลาการส่งอีเมล รายงานเหตุการณ์ประจำวัน
\r\n \r\nติดตามสถานะการส่งอีเมล (Mail Monitoring)
\r\n \r\n\r\n {rows.length > 0 ?
\r\n \r\n { ExportExcel() }} />\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\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\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 handleChangeValue(value);\r\n if (handleDateChange != undefined) handleDateChange(value);\r\n }}\r\n {...inputProps}\r\n autoOk\r\n renderInput={(startProps, endProps) => {\r\n return (\r\n \r\n \r\n \r\n );\r\n }}\r\n />\r\n
\r\n\r\n \r\n {lstData.length > 0 ?
\r\n \r\n { ExportExcel() }} />\r\n
: \r\n \r\n \r\n \r\n \r\n
\r\n