\r\n
\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\n","/* eslint-disable */\r\nimport React, { Component } from \"react\";\r\nimport { Redirect } from 'react-router-dom';\r\nimport { Form, Input, DatePicker, TimePicker, Select, Cascader, InputNumber, Icon, Row, Col, Button, Tooltip, Checkbox, Spin, Modal } from 'antd';\r\nimport moment from 'moment';\r\nimport 'moment-timezone';\r\nimport { apiAnalyze, apiClient } from '../../../../api';\r\nimport { token, getUrlVars, formatNumber, getAccId, CheckTokenExp, ReplaceUrlTaga, UserInfo, getLinkbacklist } from '../../../../config';\r\nimport InputTo from '../../../../components/Ants/Input/InputTo';\r\nimport SelectSender from '../../../../components/Ants/Select/SelectSender';\r\nimport SelectTemplate from '../../../../components/Ants/Select/SelectTemplate';\r\nimport ButtonGroupBroadcast from '../../../../components/Ants/Button/ButtonGroupBroadcast';\r\nimport ButtonUpload from '../../../../components/Ants/Button/ButtonUpload';\r\nimport MultipleTrigger from '../../../../components/Ants/Mentions/MultipleTrigger';\r\nimport SelectParameters from '../../../../components/Ants/Select/SelectParameters';\r\nimport { toText, fromText, templateText, broadcastNameText } from '../../../../components/Ants/TooltipText/Text';\r\nimport ModalServerError from \"../../../../components/Ants/Modal/ModalServerError\";\r\n\r\nmoment.tz.setDefault(\"Asia/Bangkok\");\r\n\r\nconst { Option } = Select;\r\nconst dateFormat = 'DD/MM/YYYY';\r\nconst timeFormat = 'HH:mm';\r\n\r\nexport default class BroadcastByTemplate extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.indexcontent = this.indexcontent.bind(this);\r\n this.countMessage = this.countMessage.bind(this);\r\n\r\n this.uploadfile_showDrawer = this.uploadfile_showDrawer.bind(this);\r\n this.uploadfile_onClose = this.uploadfile_onClose.bind(this);\r\n this.analyze_showDrawer = this.analyze_showDrawer.bind(this);\r\n this.analyze_onClose = this.analyze_onClose.bind(this);\r\n this.onClickPreview = this.onClickPreview.bind(this);\r\n this.onChangeCheckbox = this.onChangeCheckbox.bind(this);\r\n this.onDraft = this.onDraft.bind(this);\r\n this.onDiscard = this.onDiscard.bind(this);\r\n this.handleChangevariable = this.handleChangevariable.bind(this);\r\n\r\n this.setStateByProps = this.setStateByProps.bind(this);\r\n this.shortedurl = this.shortedurl.bind(this);\r\n this.GetdataDraft = this.GetdataDraft.bind(this);\r\n this.GetPeopleList = this.GetPeopleList.bind(this);\r\n this.GetTagList = this.GetTagList.bind(this);\r\n this.GetColumnsEcm = this.GetColumnsEcm.bind(this);\r\n this.checkinputnull = this.checkinputnull.bind(this);\r\n this.SaveCampaign = this.SaveCampaign.bind(this);\r\n this.AnalyzeFunc = this.AnalyzeFunc.bind(this);\r\n\r\n this.analyze_onSend = this.analyze_onSend.bind(this);\r\n this.handleTemplate = this.handleTemplate.bind(this);\r\n this.disabledDate = this.disabledDate.bind(this);\r\n this.getDisabledHours = this.getDisabledHours.bind(this);\r\n this.getDisabledMinutes = this.getDisabledMinutes.bind(this);\r\n\r\n this.AnalyzeFunc2 = this.AnalyzeFunc2.bind(this);\r\n this.downloadFile = this.downloadFile.bind(this);\r\n\r\n this.child = React.createRef();\r\n this.state = {\r\n indexcontent: 0,\r\n content: \"\",\r\n content_old: \"\",\r\n MessageCount: 1,\r\n CharacterCount: 160,\r\n contentlength: 0,\r\n variable: [\"firstName\", \"lastName\", \"address\",\r\n \"city\", \"country\", \"gender\", \"birthDate\"],\r\n uploadfile_visible: false,\r\n analyze_visible: false,\r\n preview: false,\r\n clearstate: false,\r\n broadcastName: \"\",\r\n to: [],\r\n fileList: [],\r\n file_size: 0,\r\n sender: undefined,\r\n schedule_commu_date: \"\",\r\n schedule_commu_time: \"\",\r\n cb_shortedurl: false,\r\n createTemplate: false,\r\n PeopleLists: [],\r\n TagsLists: [],\r\n SMS_DRAFT: false,\r\n selectedFileList: [],\r\n senderlist: [],\r\n total_credit: [],\r\n Template: undefined,\r\n btnsend_loading: false,\r\n filedraft: [],\r\n fileOldList: [],\r\n errorMessage: \"\",\r\n anl_to: \"\",\r\n anl_shorturlflag: false,\r\n anl_message: \"\",\r\n anl_total: 0,\r\n anl_credit: 0,\r\n anl_invalid: 0,\r\n anl_blacklist: 0,\r\n anl_duplicate: 0,\r\n anl_shortest: 0,\r\n anl_longest: 0,\r\n anl_resultCode: \"\",\r\n anl_description: \"\",\r\n anl_errorMessage: \"\",\r\n smstoCount: 0,\r\n smsMaxStable: 1000,\r\n errorSmsto: \"\",\r\n Linkbacklist: getLinkbacklist(),\r\n modalVisible: false,\r\n };\r\n }\r\n componentDidMount() {\r\n this.GetdataDraft();\r\n this.GetPeopleList()\r\n this.GetTagList();\r\n ReplaceUrlTaga();\r\n }\r\n\r\n indexcontent(e) {\r\n var start = this.state.content.substring(0, e.target.selectionEnd);\r\n var c = (start.split(\"{\").length - 1) * 2;\r\n this.setState({ indexcontent: e.target.selectionEnd + c });\r\n }\r\n\r\n countMessage(content) {\r\n //1 Message / Used with 5 remaining 165\r\n var contentlength = content == undefined ? 0 : JSON.stringify(content.trim()).length == 0 ? 0 : (JSON.stringify(content.trim()).length - 2);\r\n var msgCount = 0;\r\n var messremaining = 160;\r\n if (contentlength) {\r\n if (!content.match(/^([a-zA-Z0-9\\|!#$%&/()*^=?»«@£§€{}.-;'\"<>_[\\]\\\\,\\-\\+ \\n\\r])+$/i)) {\r\n msgCount = contentlength <= 70 ? 1 : contentlength <= 134 ? 2 : parseInt(Math.ceil(parseFloat(contentlength) / 67));\r\n messremaining = contentlength <= 70 ? 70 - contentlength : contentlength <= 134 ? 134 - contentlength : (134 + (67 * (msgCount - 2))) - contentlength;\r\n } else {\r\n msgCount = contentlength <= 160 ? 1 : contentlength <= 306 ? 2 : parseInt(Math.ceil(parseFloat(contentlength) / 153));\r\n messremaining = contentlength <= 160 ? 160 - contentlength : contentlength <= 306 ? 306 - contentlength : (306 + (153 * (msgCount - 2))) - contentlength;\r\n }\r\n }\r\n this.setState({\r\n content: content,\r\n content_require: false,\r\n });\r\n this.setState({ MessageCount: msgCount });\r\n this.setState({ contentlength: contentlength });\r\n this.setState({ CharacterCount: messremaining });\r\n\r\n }\r\n\r\n uploadfile_showDrawer() {\r\n this.setState({\r\n uploadfile_visible: true,\r\n });\r\n }\r\n\r\n uploadfile_onClose() {\r\n this.setState({\r\n uploadfile_visible: false,\r\n });\r\n\r\n }\r\n\r\n analyze_showDrawer() {\r\n this.AnalyzeFunc();\r\n this.setState({ analyze_visible: true });\r\n }\r\n\r\n analyze_onClose() {\r\n this.setState({\r\n analyze_visible: false,\r\n });\r\n\r\n }\r\n\r\n analyze_onSend() {\r\n if (this.state.schedule_commu_date && this.state.schedule_commu_time) { \r\n var scheduledate = moment(this.state.schedule_commu_date).format(\"DD/MM/YYYY\") + \" \" + moment(this.state.schedule_commu_time).format(\"HH:mm\");\r\n if(scheduledate <= moment().format(\"DD/MM/YYYY HH:mm\") && moment().format(\"DD/MM/YYYY\") == moment(this.state.schedule_commu_date).format(\"DD/MM/YYYY\")){\r\n Modal.error({\r\n className: 'popup-error',\r\n title: 'Error',\r\n onOk: () => Modal.destroyAll(),\r\n content: \"Invalid schedule date, Please change schedule date to proceed the next step\",\r\n icon:
,\r\n zIndex: 1300\r\n });\r\n }else{\r\n this.setState({\r\n loading: true,\r\n clearstate: true,\r\n SMS_DRAFT: false,\r\n to: [...this.state.to],\r\n content: this.state.content,\r\n sender: this.state.sender,\r\n SEND_TYPE: (this.state.selectedFileList.length > 0 ? 2 : 1),\r\n }, function () {\r\n this.SaveCampaign();\r\n });\r\n }\r\n\r\n } else {\r\n this.setState({\r\n loading: false,\r\n clearstate: true,\r\n SMS_DRAFT: false,\r\n to: [...this.state.to],\r\n content: this.state.content,\r\n sender: this.state.sender,\r\n SEND_TYPE: (this.state.selectedFileList.length > 0 ? 2 : 1),\r\n }, function () {\r\n this.SaveCampaign();\r\n });\r\n }\r\n this.setState({\r\n analyze_visible: false,\r\n });\r\n }\r\n \r\n onDraft() {\r\n this.setState({ loading: true });\r\n var isnull = this.checkinputnull();\r\n if (!isnull) {\r\n this.setState({\r\n SMS_DRAFT: true,\r\n to: [...this.state.to],\r\n content: this.state.content,\r\n sender: this.state.sender,\r\n SEND_TYPE: (this.state.selectedFileList.length > 0 ? 2 : 1),\r\n }, function () {\r\n this.SaveCampaign();\r\n });\r\n\r\n\r\n } else {\r\n this.setState({ loading: false });\r\n }\r\n }\r\n\r\n SaveCampaign() {\r\n if (!CheckTokenExp()) {\r\n const { fileList, fileOldList } = this.state;\r\n const formData = new FormData();\r\n\r\n fileList.forEach(file => {\r\n // if (file.type == \"oldfile\") {\r\n // oldfile.push({ FILE_ID: file.uid, ECM_UID: file.ecm, FILE_NAME: file.name });\r\n // } else {\r\n formData.append(\"files[]\", file);\r\n // }\r\n });\r\n\r\n var oldfile = new Array();\r\n fileOldList.forEach(file => {\r\n if (file.type == \"oldfile\") {\r\n oldfile.push({ FILE_ID: file.uid, ECM_UID: file.ecm, FILE_NAME: file.name });\r\n }\r\n });\r\n\r\n let req = JSON.stringify({\r\n \"CAMPAIGN_ID\": this.state.CAMP_ID,\r\n \"SMS_FROM\": this.state.sender,\r\n \"SMS_TO\": this.state.to,\r\n \"SMS_TEXT\": this.state.content.trim(),\r\n \"CAMPAIGN_NAME\": this.state.broadcastName,\r\n \"MESSAGE\": this.state.broadcastName,\r\n \"SCHEDULE_DATE\": this.state.schedule_commu_date && this.state.schedule_commu_time ? moment(this.state.schedule_commu_date).format(\"DD/MM/YYYY\") + \" \" + moment(this.state.schedule_commu_time).format(\"HH:mm\") : null,\r\n \"SEND_TYPE\": 4,\r\n \"SPEED_AMOUNT\": 0,\r\n \"SPEED_UNIT\": 0,\r\n \"SOURCE_FILE\": this.state.filename,\r\n \"DESTINATION_FILE\": this.state.result,\r\n \"SMS_DRAFT\": this.state.SMS_DRAFT,\r\n \"FILES\": oldfile,\r\n \"SENDER\": this.state.sender,\r\n \"TEMPLATE_ID\": this.state.Template,\r\n \"shortedurl\": this.state.cb_shortedurl,\r\n \"ANL_TO\": this.state.anl_to,\r\n \"ANL_SHORTURLFLAG\": this.state.anl_shorturlflag,\r\n \"ANL_MESSAGE\": this.state.anl_message,\r\n \"ANL_TOTAL\": this.state.anl_total,\r\n \"ANL_CREDIT\": this.state.anl_credit,\r\n \"ANL_BLACKLIST\": this.state.anl_blacklist,\r\n \"ANL_DUPLICATE\": this.state.anl_duplicate,\r\n \"ANL_INVALID\": this.state.anl_invalid,\r\n \"ANL_SHORTEST\": this.state.anl_shortest,\r\n \"ANL_LONGEST\": this.state.anl_longest,\r\n \"ANL_DESCRIPTION\": this.state.anl_description,\r\n \"ANL_RESULTCODE\": this.state.anl_resultCode,\r\n \"ANL_ERRORMESSAGE\": this.state.anl_errorMessage,\r\n }).replace(/\\\\r/g, '\\r').replace(/\\\\n/g, '\\n');\r\n let user_info = JSON.stringify(UserInfo());\r\n formData.append('req', req);\r\n formData.append('user_info', user_info);\r\n\r\n apiClient.post('api/Campaign/Save', formData\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n if (json.code != 200) {\r\n this.child.current.modalResult(false, json.message);\r\n this.setClearState(false);\r\n return false;\r\n }\r\n this.setClearState(false);\r\n this.child.current.modalResult(true);\r\n //
\r\n })\r\n .catch(error => {\r\n this.child.current.modalResult(false, \"เกิดข้อผิดพลาด กรุณาติดต่อ admin \");\r\n this.setClearState(false);\r\n return false;\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n }\r\n\r\n setClearState(bool) {\r\n this.setState({\r\n clearstate: bool\r\n });\r\n }\r\n\r\n checkinputnull() {\r\n var campaignname_require = this.state.broadcastName ? false : true\r\n var to_require = this.state.to.length > 0 ? false : true\r\n var sender_require = this.state.sender ? false : true\r\n var content_require = this.state.content ? false : true\r\n\r\n this.setState({ campaignname_require, to_require, sender_require, content_require });\r\n\r\n if (campaignname_require || to_require || sender_require || content_require) {\r\n this.setState({ isnull: true })\r\n return true;\r\n } else {\r\n this.setState({ isnull: false })\r\n return false;\r\n }\r\n\r\n }\r\n\r\n onDiscard() {\r\n this.setState({ clearstate: true });\r\n this.props.clearType();\r\n\r\n //window.location.reload();\r\n }\r\n\r\n onChangeCheckbox(e) {\r\n this.setState({ [e.target.name]: e.target.checked });\r\n this.shortedurl(e.target.checked);\r\n }\r\n\r\n onClickPreview(value) {\r\n if (!CheckTokenExp()) {\r\n var to_require = this.state.to.length > 0 ? false : true\r\n var sender_require = this.state.sender ? false : true\r\n var content_require = this.state.content ? false : true\r\n\r\n if (!to_require && !sender_require && !content_require) {\r\n this.setState({\r\n preview: value\r\n });\r\n }\r\n\r\n const { fileList } = this.state;\r\n const formData = new FormData();\r\n\r\n var oldfile = new Array();\r\n fileList.forEach(file => {\r\n if (file.type == \"oldfile\") {\r\n oldfile.push({ FILE_ID: file.uid, ECM_UID: file.ecm, FILE_NAME: file.name });\r\n } else {\r\n formData.append(\"files[]\", file);\r\n }\r\n });\r\n\r\n let req = JSON.stringify({\r\n \"OriginContent\": this.state.cb_shortedurl == true ? this.state.content_old : this.state.content,\r\n \"shorturl\": this.state.cb_shortedurl,\r\n \"FILES\": oldfile,\r\n });\r\n formData.append('req', req);\r\n\r\n apiClient.post('api/Campaign/Preview', formData\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n\r\n this.setState({ content_old: json ? json : this.state.content });\r\n\r\n })\r\n .catch(error => {\r\n\r\n });\r\n\r\n setTimeout(() => {\r\n let modalcontent = document.querySelectorAll('.ant-modal-content');\r\n for (var i = 0; i < modalcontent.length; i++) {\r\n modalcontent[i].className += \" ant-modal-content-hide\";\r\n }\r\n }, 10);\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n handleChangevariable(e) {\r\n var start = this.state.content.substring(0, this.state.indexcontent);\r\n var end = this.state.content.substring(this.state.indexcontent);\r\n this.setState({ content: start + \"{\" + e + \"}\" + end },\r\n () => {\r\n this.countMessage(this.state.content);\r\n this.setState({ content_old: this.state.content });\r\n this.shortedurl(this.state.cb_shortedurl);\r\n this.setState({ indexcontent: this.state.indexcontent + e.length + 2 });\r\n });\r\n }\r\n\r\n setStateByProps(parameters, value) {\r\n this.setState({ [parameters]: value });\r\n if (parameters == \"Template\") this.handleTemplate(value);\r\n if (parameters == \"to\") {\r\n if (value.toString().length <= this.state.smsMaxStable) {\r\n this.setState({\r\n errorSmsto: \"\",\r\n });\r\n }\r\n this.setState({\r\n smstoCount: value.toString().length\r\n });\r\n }\r\n\r\n if (parameters == \"errorLength\") {\r\n this.setState({\r\n errorSmsto: value,\r\n });\r\n }\r\n\r\n if (parameters == \"schedule_commu_time\") {\r\n if(value < moment().add(5, 'minutes') && value != null && moment().format(\"DD/MM/YYYY\") == moment(this.state.schedule_commu_date).format(\"DD/MM/YYYY\")){\r\n this.setState({\r\n schedule_commu_time: moment().add(5, 'minutes'),\r\n });\r\n }else{\r\n this.setState({\r\n schedule_commu_time: value\r\n });\r\n }\r\n }\r\n }\r\n\r\n shortedurl(check) {\r\n if (!CheckTokenExp()) {\r\n if (check == true) {\r\n let req = JSON.stringify({\r\n messageid: \"\",\r\n message: this.state.content\r\n });\r\n\r\n apiClient.post('api/function/converturl', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n\r\n this.setState({ content_old: json });\r\n\r\n })\r\n .catch(error => {\r\n\r\n });\r\n }\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n GetdataDraft() {\r\n if (!CheckTokenExp()) {\r\n var id = getUrlVars()[\"id\"];\r\n if (id) {\r\n this.setState({ loading: true });\r\n\r\n apiClient.get('api/Campaign/CampaignInfo/' + id\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n\r\n var SCHEDULE = json.SCHEDULE.split(\" \");\r\n var oldFiles = json.FILES.map((item) => {\r\n this.GetColumnsEcm(item.ECM_UID);\r\n this.downloadFile(item.ECM_UID, item.FILE_NAME).then((res) => {\r\n if (res) {\r\n this.setState({\r\n fileList: json.FILES.length > 0 ? this.state.filedraft : [],\r\n });\r\n }\r\n }).catch((err) => { })\r\n return {\r\n uid: item.FILE_ID,\r\n name: item.FILE_NAME,\r\n status: 'done',\r\n url: item.ECM_UID,\r\n type: \"oldfile\",\r\n ecm: item.ECM_UID\r\n }\r\n });\r\n\r\n if (json.SMS_TO) {\r\n json.SMS_TO.map((item) => {\r\n item.search(\"person_\") == 0 ? this.GetPeopleList(item) : item.search(\"tag_\") == 0 ? this.GetTagList(item) : \"\";\r\n });\r\n this.setState({ smstoCount: json.SMS_TO.toString().length });\r\n }\r\n\r\n this.setState(state => {\r\n return {\r\n CAMP_ID: json.CAMP_ID,\r\n broadcastName: json.CAMP_NAME,\r\n content: json.SMS_CONTENT,\r\n content_old: json.SMS_CONTENT,\r\n sender: json.SMS_FROM,\r\n newTemplate: json.CREATE_TEMPLATE,\r\n cb_shortedurl: json.SHORT_URL,\r\n to: json.SMS_TO,\r\n // fileList: json.FILES.length > 0 ? file : [],\r\n fileOldList: json.FILES.length > 0 ? oldFiles : [],\r\n TEMPLATE_ID: json.TEMPLATE_ID,\r\n Template: json.TEMPLATE_ID,\r\n schedule_commu_date: SCHEDULE[0] == \"\" ? null : moment(SCHEDULE[0].toString(), \"DD-MM-YYYY\"),\r\n schedule_commu_time: SCHEDULE[0] == \"\" ? null : moment(SCHEDULE[1].toString(), \"HH:mm\"),\r\n draft_spinning: false,\r\n indexcontent: json.SMS_CONTENT.length,\r\n }\r\n }), this.shortedurl(this.state.cb_shortedurl), this.countMessage(json.SMS_CONTENT);\r\n\r\n setTimeout(() => {\r\n this.GetPeopleList();\r\n this.GetTagList();\r\n }, 200);\r\n\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n this.setState({ loading: false });\r\n });\r\n\r\n }\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n GetPeopleList(value) {\r\n if (!CheckTokenExp()) {\r\n this.state.PeopleLists.length > 0 ? \"\" : this.setState({ loading: true });\r\n var search = value ? value : \"null\";\r\n const encodedString = new Buffer(search).toString('base64');\r\n\r\n apiClient.get('api/Campaign/PeopleLists/' + encodedString\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n if (data.status === 200 && data.data) {\r\n if (search.search(\"person_\") == 0 || search != null) {\r\n var list = [...data.data, ...this.state.PeopleLists];\r\n const dataList = Array.from(new Set(list.map(a => a.ID)))\r\n .map(id => {\r\n return list.find(a => a.ID === id)\r\n });\r\n this.setState({ PeopleLists: dataList });\r\n } else {\r\n this.setState({ PeopleLists: data.data });\r\n }\r\n } else {\r\n this.setState({ modalVisible: true });\r\n this.setState({ PeopleLists: [] });\r\n }\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n this.setState({ modalVisible: true });\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n GetTagList(value) {\r\n if (!CheckTokenExp()) {\r\n this.state.TagsLists.length > 0 ? \"\" : this.setState({ loading: true });\r\n var search = value ? value : \"null\";\r\n\r\n const encodedString = new Buffer(search).toString('base64');\r\n apiClient.get('api/Campaign/TagsLists/' + encodedString\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n if (typeof json == \"object\") {\r\n if (search.search(\"tag_\") == 0 || search != null) {\r\n var d = [...json, ...this.state.TagsLists];\r\n const data = Array.from(new Set(d.map(a => a.ID)))\r\n .map(id => {\r\n return d.find(a => a.ID === id)\r\n });\r\n this.setState({ TagsLists: data });\r\n this.setState({ loading: false });\r\n } else {\r\n this.setState({ TagsLists: json ? json : [] });\r\n this.setState({ loading: false });\r\n }\r\n }\r\n })\r\n .catch(error => {\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n GetColumnsEcm(id) {\r\n this.setState({ loading: true });\r\n\r\n apiClient.get('api/GetColumns/ecm/' + id\r\n , {\r\n headers: {\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n\r\n let variable = [...new Set(this.state.variable)];\r\n this.setState({ variable: [] });\r\n const arr = json.columns.filter((item) => !variable.includes(item));\r\n var value = this.state.to.filter((item) => !item.includes(\"tag_\") == true).filter((item) => !item.includes(\"person_\") == true);\r\n this.setState(state => ({\r\n variable: [...state.variable, ...arr],\r\n to: value,\r\n loading: false,\r\n file_size: state.file_size + json.size,\r\n }));\r\n })\r\n .catch(error => {\r\n this.setState({ loading: false });\r\n });\r\n }\r\n\r\n AnalyzeFunc2() {\r\n const { fileList, filedraft } = this.state;\r\n const formData = new FormData();\r\n\r\n // fileList.forEach(file => {\r\n // if (!file.ecm) {\r\n // formData.append(\"Files[]\", new Blob([file], { type: file.type }));\r\n // }\r\n // });\r\n\r\n // filedraft.forEach(file => {\r\n // formData.append(\"Files[]\", new Blob([file], { type: file.type }));\r\n // });\r\n\r\n fileList.map(file => {\r\n // เปลี่ยน logic การดึงไฟล์เข้ามา ใน process draft(edit)\r\n if (!file.ecm) {\r\n formData.append(\"Files[]\", new Blob([file], { type: file.type }));\r\n }\r\n // else {\r\n // console.log(2)\r\n // filedraft.map(f => {\r\n // if (f.name == file.name) {\r\n // formData.append(\"Files[]\", new Blob([f], { type: f.type }));\r\n // }\r\n // })\r\n // }\r\n })\r\n\r\n formData.append(\"accountId\", getAccId());\r\n formData.append(\"message\", this.state.content);\r\n formData.append(\"shortUrlFlag\", this.state.cb_shortedurl);\r\n formData.append(\"TO\", this.state.to);\r\n\r\n apiClient.post('api/Analyze', formData\r\n , {\r\n headers: {\r\n\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n if (json.resultCode !== \"000\") {\r\n this.setState({\r\n errorMessage: json.resultCode == \"500\" ? \"Analyze Error\" : json.description,\r\n btnsend_loading: false,\r\n loading: false\r\n });\r\n return false;\r\n }\r\n\r\n var total_credit = [\r\n {\r\n key: '1',\r\n name: 'Shortest',\r\n characters: formatNumber(json.shortest),\r\n },\r\n {\r\n key: '2',\r\n name: 'Longest',\r\n characters: formatNumber(json.longest),\r\n },\r\n ];\r\n\r\n var total_recipients = [\r\n {\r\n key: '1',\r\n status: 'Unique',\r\n recipients: json.total,\r\n },\r\n {\r\n key: '2',\r\n status: 'Duplicate',\r\n recipients: json.duplicate,\r\n },\r\n {\r\n key: '3',\r\n status: 'Blacklist',\r\n recipients: json.blackList,\r\n },\r\n {\r\n key: '4',\r\n status: 'Invalid',\r\n recipients: json.invalid,\r\n },\r\n ];\r\n\r\n var analyzeTable = [\r\n {\r\n key: '1',\r\n name: this.state.sender,\r\n schedule: this.state.schedule_commu_date ? moment(moment(moment(this.state.schedule_commu_date).format(\"DD/MM/YYYY\") + \" \" + moment(this.state.schedule_commu_time).format(\"HH:mm\"), \"DD/MM/YYYY HH:mm\")).format('DD/MM/YYYY HH:mm')\r\n : moment().format(\"DD/MM/YYYY HH:mm\")\r\n }\r\n ];\r\n\r\n this.setState({\r\n total_credit: total_credit,\r\n sum_credit: formatNumber(json.credit),\r\n SUM_RECIPTENTS: formatNumber(json.total),\r\n total_recipients: total_recipients,\r\n analyzeTable: analyzeTable,\r\n sum_message: json.total,\r\n\r\n anl_to: this.state.to,\r\n anl_shorturlflag: this.state.cb_shortedurl,\r\n anl_message: this.state.content,\r\n anl_total: json.total,\r\n anl_credit: json.credit,\r\n anl_invalid: json.invalid,\r\n anl_blacklist: json.blackList,\r\n anl_duplicate: json.duplicate,\r\n anl_shortest: json.shortest,\r\n anl_longest: json.longest,\r\n anl_resultCode: json.resultCode,\r\n anl_description: json.description,\r\n anl_errorMessage: json.description,\r\n\r\n Analyz: false,\r\n show_summary: true,\r\n loading: false,\r\n btnsend_loading: false,\r\n errorMessage: \"\"\r\n });\r\n\r\n // if (json.resultCode !== \"000\") {\r\n // this.setState({ errorMessage: json.description, loading: false, btnsend_loading: false });\r\n // }\r\n })\r\n .catch(error => {\r\n this.setState({ btnsend_loading: false });\r\n this.setState({ loading: false });\r\n });\r\n }\r\n\r\n AnalyzeFunc() {\r\n var isnull = this.checkinputnull();\r\n if (!isnull) {\r\n this.setState({ btnsend_loading: true, loading: true });\r\n //uploadfile formdata\r\n this.AnalyzeFunc2();\r\n }\r\n }\r\n\r\n handleTemplate(TempId) {\r\n if (!CheckTokenExp()) {\r\n if (TempId > 0) {\r\n\r\n apiClient.get('api/Campaign/TemplateInfo/' + TempId\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n this.setState({\r\n sender: json.SMS_FROM,\r\n temp_from: json.SMS_FROM,\r\n content: json.SMS_CONTENT,\r\n content_old: json.SMS_CONTENT,\r\n temp_content: json.SMS_CONTENT,\r\n Template: TempId,\r\n temp_Id: TempId,\r\n cb_shortedurl: json.SHORT_URL\r\n }, function () {\r\n this.countMessage(json.SMS_CONTENT);\r\n this.shortedurl(this.state.cb_shortedurl);\r\n });\r\n })\r\n .catch(error => {\r\n this.setState({ loading: false });\r\n });\r\n }\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n disabledDate(current) {\r\n return current && current < moment(new Date()).add(-1, 'days');\r\n }\r\n\r\n getDisabledHours() {\r\n var hours = [];\r\n if (moment(this.state.schedule_commu_date).format(\"DD/MM/YYYY\") == moment().format(\"DD/MM/YYYY\")) {\r\n for (var i = 0; i < moment().hour(); i++) {\r\n hours.push(i);\r\n }\r\n }\r\n return hours;\r\n }\r\n\r\n getDisabledMinutes() {\r\n var minute = [];\r\n if (!this.state.schedule_commu_time) {\r\n for (var i = 0; i < 60; i++) {\r\n minute.push(i);\r\n }\r\n }\r\n\r\n if (moment(this.state.schedule_commu_date).format(\"DD/MM/YYYY\") == moment().format(\"DD/MM/YYYY\") &&\r\n moment(this.state.schedule_commu_time).format(\"HH\") == moment().format(\"HH\")\r\n ) {\r\n for (var i = 0; i
{\r\n apiClient.get('api/file/download/' + item\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n },\r\n responseType: 'blob',\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n\r\n const file = new File([json], name, { type: \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\" })\r\n this.setState(state => { return { filedraft: [...state.filedraft, file] } });\r\n console.log(\"working ..\")\r\n resolve(true)\r\n })\r\n .catch(error => {\r\n console.log(\"error downloadfile ECM\")\r\n reject()\r\n });\r\n }).catch((e) => {\r\n console.log(\"errrrr ..\")\r\n reject()\r\n })\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n render() {\r\n const marginbottomrow = { marginBottom: 16 };\r\n const { uploadfile_visible, analyze_visible, preview, variable, to,\r\n fileList, file_size, sender, content_old, schedule_commu_date, schedule_commu_time, cb_shortedurl,\r\n broadcastName, createTemplate, PeopleLists, TagsLists, loading, total_credit, sum_credit, SUM_RECIPTENTS,\r\n total_recipients, analyzeTable, Template, content, btnsend_loading, \r\n errorMessage, errorSmsto, smstoCount, smsMaxStable, Linkbacklist, modalVisible } = this.state;\r\n return (\r\n \r\n
\r\n
\r\n \r\n \r\n Broadcast Name\r\n \r\n * \r\n \r\n \r\n \r\n\r\n
\r\n \r\n
\r\n\r\n \r\n Template \r\n * \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n To\r\n \r\n * \r\n \r\n \r\n \r\n \r\n {\r\n errorSmsto == \"\"\r\n ?\r\n {smstoCount} / {smsMaxStable} \r\n :\r\n {smstoCount} / {smsMaxStable} {errorSmsto} \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 From\r\n \r\n * \r\n \r\n \r\n \r\n
\r\n\r\n \r\n Content \r\n * \r\n \r\n {this.state.MessageCount} {this.state.MessageCount > 1 ? \"Credits\" : \"Credit\"}, {this.state.contentlength}/{this.state.CharacterCount} characters \r\n
\r\n {\r\n this.setState({\r\n content: contents,\r\n content_old: contents,\r\n indexcontent: this.state.indexcontent + 1\r\n }), this.countMessage(contents)\r\n }} />\r\n {Linkbacklist == \"True\" ?\r\n Receivers will be able to unsubscribe messages from this account : null\r\n }\r\n \r\n \r\n \r\n \r\n Shorten URL \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n Schedule (Optional) \r\n \r\n { this.setStateByProps(\"schedule_commu_date\", e), this.setStateByProps(\"schedule_commu_time\", null) }} />\r\n \r\n this.setStateByProps(\"schedule_commu_time\", e)}\r\n disabled={this.state.schedule_commu_date ? false : true}\r\n placeholder=\"Select Time\"\r\n />\r\n \r\n
\r\n \r\n Timezone GMT+7 \r\n \r\n
\r\n\r\n \r\n \r\n 0 && sender && content.trim() && Template && errorSmsto == \"\" ? false : true}\r\n disabledPreview={broadcastName && to.length > 0 && sender && content.trim() && Template ? false : true}\r\n errorMessage={errorMessage}\r\n ref={this.child}\r\n />\r\n \r\n
\r\n \r\n
\r\n \r\n
{ this.getData(value) }}\r\n onChange={(value) => { setStateByProps(\"Template\", value) }}\r\n value={select}\r\n suffixIcon={loading ? \"\" : {item.TEXT} \r\n )\r\n }\r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\n\r\n","import React,{Component} from 'react';\r\nimport {Link} from 'react-router-dom';\r\nimport {Tag,Tooltip,Card,Skeleton,Checkbox,Button,Spin,Popover,Menu,Pagination,Radio,Icon} from 'antd';\r\nimport moment from 'moment';\r\nimport 'moment-timezone';\r\nimport { apiClient } from '../../../api';\r\nimport{root} from '../../../config';\r\nimport {token,capitalizeFLetter,deepEqual,CheckTokenExp} from '../../../config';\r\n\r\nimport ModalSuccess from '../Modal/ModalSuccess';\r\nimport ModalWarning from '../Modal/ModalWarning';\r\nmoment.tz.setDefault(\"Asia/Bangkok\");\r\n\r\nconst dateTimeFormat = 'DD/MM/YYYY HH:mm:ss';\r\nclass CardReport extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n showbottom: false,\r\n reportLoading: '',\r\n loading: false,\r\n warningModalVisible: false,\r\n successModalVisible: false,\r\n loading: false,\r\n message: \"\",\r\n messageSuccess: \"\",\r\n action: \"\",\r\n loadingcloud: false, \r\n visible: false\r\n };\r\n this.geticonstatus = this.geticonstatus.bind(this);\r\n this.warningModal = this.warningModal.bind(this);\r\n this.successModal = this.successModal.bind(this);\r\n this.modalcountDown = this.modalcountDown.bind(this);\r\n }\r\n\r\n geticonstatus() {\r\n let status = this.props.status;\r\n let icon = \"\";\r\n let color = \"\";\r\n switch (status) {\r\n\r\n case 0: color = \"#FED531\"; icon = \"fa fa-stop-circle\"; break;\r\n case 1: color = \"#FED531\"; icon = \"fa fa-clock-o\"; break;\r\n case 2: color = \"#5bd2a6\"; icon = \"fa fa-check-circle\"; break;\r\n case 4: color = \"#1890ff\"; icon = \"fa fa-refresh\"; break;\r\n case 5: color = \"#d25c5b\"; icon = \"fa fa-times-circle\"; break;\r\n case 9: color = \"#d25c5b\"; icon = \"fa fa-times-circle\"; break;\r\n }\r\n return ({name} )\r\n }\r\n warningModal(a,b,c) {\r\n \r\n this.setState({warningModalVisible: false});\r\n }\r\n successModal(a) {\r\n\r\n switch (this.state.action) {\r\n case \"copy\": if (a) window.location.href = \"report/create?id=\" + window.btoa(unescape(encodeURIComponent(this.props.id)));\r\n break;\r\n case \"delete\": if (a) {\r\n this.onDeleteItem(this.props.id);\r\n this.setState({warningModalVisible: false,successModalVisible: true});\r\n this.props.onDeleteReport(this.props.id);\r\n }\r\n break;\r\n\r\n }\r\n }\r\n onDeleteItem(key) {\r\n if (!CheckTokenExp()) {\r\n this.setState({loading: true});\r\n\r\n let req = JSON.stringify({\r\n key: [key]\r\n });\r\n\r\n apiClient.post('api/report/delete',req\r\n ,{\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n })\r\n .catch(error => {\r\n this.setState({loading: false});\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n modalcountDown() {\r\n\r\n }\r\n handleVisibleChange = visible => {\r\n this.setState({visible});\r\n };\r\n downloadFile(item) {\r\n this.setState({loadingcloud: true}) \r\n \r\n if (!CheckTokenExp()) {\r\n this.setState({ reportLoading: item });\r\n apiClient.get('api/file/getFilename/' + item\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n },\r\n })\r\n .then(data => {\r\n var filename = data.data;\r\n\r\n apiClient.get('api/file/download/' + item\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n },\r\n responseType: 'blob'\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n\r\n const url = window.URL.createObjectURL(new Blob([json]));\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = filename;\r\n document.body.appendChild(link);\r\n link.click();\r\n link.remove();\r\n this.setState({ reportLoading: '' });\r\n this.setState({ loadingcloud: false });\r\n })\r\n .catch(error => {\r\n this.setState({ reportLoading: '' });\r\n this.setState({ loadingcloud: false });\r\n });\r\n })\r\n .catch(error => {\r\n this.setState({ reportLoading: '' });\r\n this.setState({ loadingcloud: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n \r\n }\r\n render() {\r\n const {loading,warningModalVisible,message,} = this.state;\r\n return (\r\n \r\n
\r\n
\r\n
\r\n {\r\n\r\n this.props.fileId ? \r\n this.state.loadingcloud ? \r\n 1?\"s\":\"\")+this.props.total_size} style={{fontSize: 16,color: '#7b7b7b',cursor: 'pointer',marginLeft: \"15px\"}} onClick={() => this.downloadFile(this.props.fileId,this.props.name)}> \r\n :\r\n \r\n }\r\n
\r\n\r\n \r\n
\r\n
\r\n
\r\n {this.props.width<576?
Total File(Size)
:null }\r\n
{ this.props.total_file>0? this.props.total_file+\"(\"+this.props.total_size+\")\":\"-\"}
\r\n
\r\n
\r\n
\r\n
\r\n {this.props.width<576?
Name
:null }\r\n
{this.props.name}
\r\n
\r\n
\r\n
\r\n
\r\n {this.props.width<576?
Type
:null }\r\n
{this.props.type}
\r\n
\r\n
\r\n
\r\n
\r\n {this.props.width<576?
Status
:null }\r\n
\r\n {this.geticonstatus()}\r\n
\r\n
\r\n {this.getname()}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {this.props.width<576?
Schdule Date
:null }\r\n
{this.props.schduleDate}
\r\n
\r\n
\r\n
\r\n
\r\n {this.props.width<576?
Complete Date
:null }\r\n
{this.props.completeDate}
\r\n
\r\n
\r\n
\r\n {\r\n this.state.showbottom ?\r\n\r\n
\r\n
\r\n {\r\n eval(this.props.filter).map((item,index) => (\r\n
\r\n
\r\n
{item.rpt_display}
\r\n
\r\n {item.rpt_display_value}\r\n
\r\n
\r\n
\r\n ))\r\n }\r\n {\r\n this.props.email?
\r\n
\r\n
RECIPENTS
\r\n
\r\n {this.props.email}\r\n
\r\n
\r\n
:null\r\n }\r\n {\r\n this.props.oneTime||this.props.recurrence?
\r\n
\r\n
{this.props.oneTime?\"ONE-TIME\":\"RECURRENCE\"}
\r\n
\r\n {this.props.oneTime?this.props.oneTime:this.props.recurrence}\r\n
\r\n
\r\n
:null\r\n }\r\n {\r\n this.props.export?
\r\n
\r\n
FTP/sFTP SETTING
\r\n
\r\n YES\r\n
\r\n
\r\n
:null\r\n }\r\n \r\n
\r\n
\r\n : null}\r\n
\r\n {/*
\r\n {\r\n this.setState({\r\n warningModalVisible: true,\r\n message: \"Do you want to duplicate this Report?\",\r\n action: \"copy\",\r\n visible: false,\r\n });\r\n }}>\r\n \r\n {\r\n this.setState({\r\n warningModalVisible: true,\r\n message: \"Do you want to delete this Report?\",\r\n messageSuccess: \"Delete report successfully.\",\r\n action: \"delete\",\r\n visible: false,\r\n });\r\n }}>\r\n \r\n \r\n } trigger=\"click\">\r\n \r\n
\r\n \r\n */}\r\n
{\r\n this.setState({\r\n warningModalVisible: true,\r\n message: \"Do you want to delete this Report?\",\r\n messageSuccess: \"Delete report successfully.\",\r\n action: \"delete\",\r\n visible: false,\r\n });\r\n }}>\r\n
\r\n
{this.setState({showbottom: !this.state.showbottom})}}>\r\n
\r\n
\r\n
\r\n\r\n )\r\n }\r\n\r\n}\r\nclass BTNSort extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n name: \"\",\r\n sortActive: false,\r\n sort: \"\"\r\n };\r\n\r\n }\r\n componentDidMount() {\r\n this.setState({name: this.props.name});\r\n }\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.sort !== this.state.sort) {\r\n this.setState({sort: nextProps.sort});\r\n }\r\n }\r\n render() {\r\n const enable = {color: \"#5F5F61\"};\r\n const disable = {color: \"#b9b9c8\"};\r\n return ( {this.props.onSort({name: this.state.name,sort: this.state.sort == \"desc\" ? \"asc\" : \"desc\"})}} >\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
{this.props.onClick(!this.state.show)}} >\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {this.props.name} \r\n
\r\n
\r\n {this.props.length + \" reports\"}\r\n
\r\n
\r\n
\r\n \r\n {\r\n\r\n ((data.length > 0 & this.props.width>576) ?\r\n (\r\n
\r\n {this.props.name ?\r\n
\r\n
\r\n {this.props.name}\r\n
\r\n
: null\r\n }\r\n
\r\n
\r\n
\r\n
Total File(Size)\r\n
\r\n
\r\n
\r\n
Name\r\n\r\n
\r\n
{this.onHandleSort(e);}} />\r\n \r\n
\r\n
Type
\r\n
{this.onHandleSort(e);}} />\r\n \r\n
\r\n
Status
\r\n
{this.onHandleSort(e);}} />\r\n \r\n
\r\n
Schedule Date
\r\n
{this.onHandleSort(e);}} />\r\n \r\n
\r\n
Complete Date
\r\n
{this.onHandleSort(e);}} />\r\n \r\n
\r\n
\r\n
\r\n )\r\n :
)}\r\n {\r\n data.sort((a,b) => {\r\n let v;\r\n switch (sort) {\r\n case \"name asc\": v = a.name.toLowerCase() < b.name.toLowerCase()?1:-1; break;\r\n case \"name desc\": v = b.name.toLowerCase() < a.name.toLowerCase()?1:-1; break;\r\n case \"type asc\": v = a.type.toLowerCase() < b.type.toLowerCase()?1:-1; break;\r\n case \"type desc\": v = b.type.toLowerCase() < a.type.toLowerCase()?1:-1; break;\r\n case \"status asc\": v = a.status < b.status?1:-1; break;\r\n case \"status desc\": v = b.status < a.status?1:-1; break;\r\n case \"schedule_date asc\": v = new Date(a.schduleDate) < new Date(b.schduleDate)?1:-1; break;\r\n case \"schedule_date desc\": v = new Date(b.schduleDate) < new Date(a.schduleDate)?1:-1; break;\r\n case \"complete_date asc\": v = new Date(a.completeDate) < new Date(b.completeDate)?1:-1; break;\r\n case \"complete_date desc\": v = new Date(b.completeDate) < new Date(a.completeDate)?1:-1; break;\r\n }\r\n return v;\r\n // return new Date(b.donedate).getTime() - new Date(a.donedate).getTime() ;\r\n })\r\n .slice(this.props.page ? this.state.pageStart : 0,\r\n this.props.page ? this.state.pageEnd : this.props.showing).map(item => (\r\n\r\n
{this.props.onDeleteReport(e)}}\r\n oneTime={item.oneTime}\r\n recurrence={item.recurrence}\r\n total_file={item.total_file}\r\n total_size={item.total_size}\r\n />\r\n\r\n ))\r\n }\r\n {\r\n this.props.page && totalpage > 1 ?\r\n \r\n )\r\n }\r\n}\r\nexport default class TableCardReport extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n pagesize: 20,\r\n startrow: 1,\r\n endrow: 20,\r\n currentpage: 1,\r\n data: [],\r\n pending_data: [],\r\n inProgress_data: [],\r\n complete_data: [],\r\n error_data: [],\r\n recurring_data: [],\r\n expire_data: [],\r\n pending_show: true,\r\n inProgress_show: true,\r\n complete_show: true,\r\n error_show: true,\r\n recurring_show: true,\r\n expire_show: true,\r\n totalpage: 0,\r\n showing: 0,\r\n sort: \"\",\r\n message: \"\",\r\n showgroup: false,successModalVisible: false\r\n };\r\n\r\n this.getData = this.getData.bind(this);\r\n this.trackScrolling = this.trackScrolling.bind(this);\r\n this.deleteReport = this.deleteReport.bind(this);\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (!deepEqual(this.props.search,prevProps.search)) {\r\n this.setState({data: [],showing: 0,startrow: 1,endrow: 20,totalpage: 0,sort: \"\"},() => {this.getData()});\r\n }\r\n }\r\n\r\n\r\n getData() {\r\n if (!CheckTokenExp()) {\r\n const {search} = this.props;\r\n this.setState({loading: true});\r\n let req = JSON.stringify({\r\n account: search.account,\r\n users: search.users,\r\n search: search.name,\r\n startdata: 1,\r\n enddata: 10,\r\n template: search.template,\r\n status: search.statusReport ? search.statusReport.toString() :(search.statusReport===0? \"0\": \"\") ,\r\n startdate: search.startdate,\r\n enddate: search.enddate,\r\n });\r\n\r\n apiClient.post('api/report/get/',req\r\n ,{\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n this.setState({\r\n data: json.data,\r\n showing: json.data.length <= 50 ? json.data.length : 50,\r\n pending_data: json.data.filter(f => f.status == 0),\r\n inProgress_data: json.data.filter(f => f.status == 1),\r\n complete_data: json.data.filter(f => f.status == 2),\r\n error_data: json.data.filter(f => f.status == 9),\r\n expire_data: json.data.filter(f => f.status == 5),\r\n recurring_data: json.data.filter(f => f.status == 4)\r\n }\r\n ,() => {this.props.updateWindowDimensions()});\r\n\r\n this.setState({totalpage: json.data.length,startrow: json.data.length + 1,endrow: json.data.length + 20});\r\n this.setState({\r\n pending_show: true,\r\n inProgress_show: true,\r\n complete_show: true,\r\n error_show: true,\r\n recurring_show: true,\r\n expire_show: true,\r\n });\r\n this.setState({loading: false});\r\n })\r\n .catch(error => {\r\n this.setState({\r\n data: [],\r\n pending_data: [],\r\n inProgress_data: [],\r\n complete_data: [],\r\n error_data: [],\r\n recurring_data: [],\r\n expire_data: [], \r\n });\r\n this.setState({loading: false});\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n isBottom(el) {\r\n this.setState({message: el.getBoundingClientRect().bottom + \":\" + window.innerHeight});\r\n return el.getBoundingClientRect().bottom <= window.innerHeight;\r\n }\r\n\r\n trackScrolling() {\r\n const wrappedElement = document.getElementById('loadding');\r\n if (wrappedElement) {\r\n if (this.isBottom(wrappedElement)) {\r\n let s = this.state.showing;\r\n if((s+50) >= this.state.totalpage){\r\n s = this.state.totalpage;\r\n }else{\r\n s = s + 50;\r\n }\r\n this.setState({showing: s})\r\n }\r\n }\r\n };\r\n getStatusInfo(status) {\r\n let name = \"\";\r\n let color = \"\";\r\n let icon = \"\";\r\n switch (status) {\r\n case 0: color = \"#FED531\"; icon = \"fa fa-stop-circle\"; name = \"PENDING\"; break;\r\n case 1: color = \"#FED531\"; icon = \"fa fa-clock-o\"; name = \"IN PROGRESS\"; break;\r\n case 2: color = \"#5bd2a6\"; icon = \"fa fa-check-circle\"; name = \"COMPLETED\"; break;\r\n case 4: color = \"#1890ff\"; icon = \"fa fa-refresh\"; name = \"RECURRING\"; break;\r\n case 5: color = \"#d25c5b\"; icon = \"fa fa-times-circle\"; name = \"EXPIRED\"; break;\r\n case 9: color = \"#d25c5b\"; icon = \"fa fa-times-circle\"; name = \"ERROR\"; break;\r\n }\r\n return ({name: name,color: color,icon: icon})\r\n }\r\n successModal(a) {\r\n this.setState({successModalVisible: false});\r\n }\r\n deleteReport(e) {\r\n let data = this.state.data;\r\n this.setState({successModalVisible: true});\r\n var index = data.findIndex(function (o) {\r\n return o.id === e;\r\n })\r\n if (index !== -1) data.splice(index,1);\r\n this.setState({\r\n data: data,\r\n pending_data: data.filter(f => f.status == 0),\r\n inProgress_data: data.filter(f => f.status == 1),\r\n complete_data: data.filter(f => f.status == 2),\r\n error_data: data.filter(f => f.status == 9),\r\n expire_data: data.filter(f => f.status == 5),\r\n recurring_data: data.filter(f => f.status == 4)\r\n });\r\n setTimeout(() => {\r\n this.setState({successModalVisible: false});\r\n },2000);\r\n }\r\n viewData(showgroup) {\r\n if (showgroup) {\r\n return \r\n\r\n {this.state.recurring_data.length > 0 ?\r\n {this.setState({recurring_show: e})}} /> :\r\n null}\r\n {this.state.recurring_show ?\r\n {this.setState({pending_show: e})}} /> :\r\n null}\r\n {this.state.pending_show ? this.deleteReport(e)} /> : null}\r\n\r\n {this.state.inProgress_data.length > 0 ?\r\n {this.setState({inProgress_show: e})}} /> :\r\n null}\r\n {this.state.inProgress_show ?\r\n this.deleteReport(e)} /> : null}\r\n\r\n {this.state.complete_data.length > 0 ?\r\n {this.setState({complete_show: e})}} /> :\r\n null}\r\n {this.state.complete_show ? this.deleteReport(e)} /> : null}\r\n\r\n {this.state.expire_data.length > 0 ?\r\n {this.setState({expire_show: e})}} /> :\r\n null}\r\n {this.state.expire_show ? this.deleteReport(e)} /> : null}\r\n\r\n {this.state.error_data.length > 0 ?\r\n {this.setState({error_show: e})}} /> :\r\n null}\r\n {this.state.error_show ? this.deleteReport(e)} /> : null}\r\n\r\n \r\n
\r\n }\r\n else {\r\n return \r\n { this.deleteReport(e)} />}\r\n
\r\n }\r\n }\r\n render() {\r\n\r\n\r\n const {loading,totalpage,data,showing,showgroup,successModalVisible,pending_data,inProgress_data,recurring_data,error_data,expire_data,complete_data} = this.state;\r\n const Nodata = \r\n if (showing < totalpage && !loading && !showgroup) {\r\n\r\n document.addEventListener('scroll',this.trackScrolling);\r\n }\r\n else {\r\n document.removeEventListener('scroll',this.trackScrolling);\r\n }\r\n if (data.length == 0 && !loading) {\r\n return Nodata;\r\n }\r\n else {\r\n return (\r\n\r\n \r\n\r\n\r\n {\r\n (showing > 0) ? (\r\n
\r\n
\r\n
\r\n {!this.state.showgroup ?
Showing {showing} / {totalpage}
:
Showing {\r\n ((inProgress_data.length > 0 ? 1 : 0) +\r\n (pending_data.length > 0 ? 1 : 0) +\r\n (complete_data.length > 0 ? 1 : 0) +\r\n (recurring_data.length > 0 ? 1 : 0) +\r\n (error_data.length > 0 ? 1 : 0) +\r\n (expire_data.length > 0 ? 1 : 0))\r\n } group
}\r\n
\r\n
\r\n\r\n {this.setState({showgroup: e.target.value});}}>\r\n \r\n
\r\n\r\n
\r\n
\r\n\r\n )\r\n\r\n :
}\r\n {\r\n this.viewData(showgroup,data)\r\n }\r\n {\r\n loading ?\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 (showing < totalpage && !loading && !showgroup) ?\r\n (
{\r\n let s = showing;\r\n s = s + 50;\r\n this.setState({showing: s})\r\n }}>\r\n
\r\n
) : (
)\r\n }\r\n
\r\n\r\n
\r\n
![\"icon\"]({require(\"../../../img/logo-symbol.png\")}){kind=logo}
\r\n }){kind=icon}
\r\n \r\n }){kind=icon}
\r\n \r\n }){kind=icon}
\r\n \r\n }){kind=icon}
\r\n \r\n }){kind=icon}
\r\n \r\n }){kind=tracking}
\r\n \r\n }){kind=tracking}
\r\n \r\n }){kind=icon}
\r\n \r\n }){kind=icon}
\r\n \r\n }){kind=icon}
\r\n \r\n ![]({require(\"../../../img/vendors/icon/times-circle-o.png\")}){kind=icon}
\r\n \r\n ![]({require(\"../../../img/vendors/icon/popup-Confirm.png\")}){kind=icon}
\r\n \r\n ![]({require(\"../../../img/vendors/icon/question.png\")}){kind=icon}
\r\n \r\n