From 08e25edb8eac0a3984bc8ac16f57165db27f97df Mon Sep 17 00:00:00 2001 From: wahyuun Date: Mon, 18 Sep 2023 10:51:42 +0700 Subject: [PATCH] fix search table, export excel, view detail data table --- src/views/Master/MasterBroadcast/index.js | 1251 ++++++++++----------- 1 file changed, 616 insertions(+), 635 deletions(-) diff --git a/src/views/Master/MasterBroadcast/index.js b/src/views/Master/MasterBroadcast/index.js index 36e5193..9cadec4 100644 --- a/src/views/Master/MasterBroadcast/index.js +++ b/src/views/Master/MasterBroadcast/index.js @@ -1,635 +1,616 @@ -import * as XLSX from 'xlsx'; -import DialogDetail from './DialogDetail'; -import DialogForm from './DialogForm'; -import React, { Component } from 'react'; -import SweetAlert from 'react-bootstrap-sweetalert'; -import axios from 'axios'; -import moment from 'moment'; -import { API_BROADCAST_SIMPRO, BASE_SIMPRO, BASE_SIMPRO_LUMEN, BASE_URL_GEOHR_API2 } from '../../../const/ApiConst'; -import { Button, Card, CardBody, CardHeader, DropdownItem, DropdownMenu, DropdownToggle, Input, InputGroup, InputGroupButtonDropdown, Table, Row, Col } from 'reactstrap'; -import { DatePicker, Pagination } from 'antd'; -import { NotificationContainer, NotificationManager } from 'react-notifications'; -import { Tooltip } from 'reactstrap'; -import { withTranslation } from 'react-i18next'; - -const { RangePicker } = DatePicker; -const token = window.localStorage.getItem('token'); -const config = { - headers: - { - Authorization: `Bearer ${token}`, - "Content-type": `application/json` - } -}; - -const id_org = window.localStorage.getItem('id_org'); -const roleName = window.localStorage.getItem('role_name'); - - -const LENGTH_DATA = 10 - -class index extends Component { - constructor(props) { - super(props) - this.state = { - alertBroadcast: false, - alertDelete: false, - currentDay: 'today', - currentPage: 1, - dataDetail: [], - dataEdit: null, - dataExport: [], - dataExport: [], - dataGs: [], - dataIdHo: [], - dataTable: [], - endDate: moment(moment().format("YYYY-M-D")), - idDelete: 0, - idSend: 0, - openDialog: false, - openDialogDetail: false, - page: 0, - rowsPerPage: LENGTH_DATA, - search: "", - searchDetail: "Judul", - searchDetailField: "title_notif", - splitButtonOpen: false, - startDate: moment(moment().format("YYYY-M-D")), - statusSend: '', - toltipDetail: false, - tooltipDelete: false, - tooltipEdit: false, - tooltipExport: false, - tooltipTambah: false, - tooltipresend: false, - tooltipsend: false, - totalPage: 0, - typeClock: "All", - typeDialog: 'Save', - } - } - - async componentDidMount() { - await this.getDataBroadcast(); - } - - async componentDidUpdate(prevProps, prevState) { - const { search, startDate } = this.state - if (search !== prevState.search) this.getDataBroadcast() - if (startDate !== prevState.startDate) this.getDataBroadcast() - } - - handleSearch = e => { - const value = e.target.value - this.setState({ search: value, currentPage: 1 }) - }; - - getDataBroadcast = async () => { - let url = BASE_SIMPRO_LUMEN + `/broadcast/search`; - const { searchDetail } = this.state - - let start = 0; - if (this.state.currentPage !== 1 && this.state.currentPage > 1) { - start = (this.state.currentPage * this.state.rowsPerPage) - this.state.rowsPerPage - } - - let dateStart = moment(this.state.startDate).format("YYYY-MM-DD 00:00:00"); - let dateEnd = moment(this.state.endDate).format("YYYY-MM-DD 23:59:59"); - - const payload = { - "columns": [ - { - "logic_operator": "range", - "name": "created_at", - "operator": "AND", - "value": `${dateStart}`, - "value1": `${dateEnd}` - }, - { - "logic_operator": "ilike", - "name": "title_notif", - "operator": "AND", - "value": "" - } - ], - "orders": { - "ascending": false, - "columns": [ - "created_at" - ] - }, - "paging": { - "length": this.state.rowsPerPage, - "start": start - } - } - - if (this.state.search !== "" && this.state.search !== null) { - } - - const result = await axios - .post(url, payload, config) - .then(res => res) - .catch((error) => error.response); - if (result && result.data) { - if (result.data.code === 200) { - this.setState({ dataTable: result.data.data, totalPage: result.data.totalRecord }); - } else { - NotificationManager.error('Failed retreiving data!!', 'Failed'); - } - } else { - NotificationManager.error('Failed retreiving data!!', 'Failed'); - } - } - - handleOpenDialog = (type) => { - this.setState({ openDialog: true, typeDialog: type }) - this.showChildDialog(); - } - - handleCloseDialog = (type, data) => { - this.setState({ openDialog: false }) - } - handleSaveBroadcast = (type, data) => { - this.setState({ openDialog: false }) - this.saveBroadcast(type, data) - } - - toggleAddDialog = () => { - this.setState({ openDialog: !this.state.openDialog }) - } - - onConfirmBroadcast = async () => { - const { idSend, statusSend } = this.state - let url = `${API_BROADCAST_SIMPRO}/edit-status-send/${idSend}`; - let payload = { - "status_send": statusSend - } - const result = await axios - .put(url, payload, config) - .then(res => res) - .catch((error) => error.response); - if (result.status === 200) { - NotificationManager.success(`Broadcast berhasil di ${statusSend === 'send' ? 'Kirim' : 'Kirim Ulang'}`) - this.getDataBroadcast() - this.setState({ alertBroadcast: false }) - } else { - NotificationManager.error(result.message, 'Failed!!'); - this.setState({ alertBroadcast: false }) - } - } - - saveBroadcast = async (type, data) => { - let url = BASE_SIMPRO_LUMEN + `/broadcast/add`; - - const param = { - "title_notif": data.title, - "status_send": type, - "send_to_type": "all", - "message_notif": data.message, - "description": data.description, - } - - const paramRoles = { - "title_notif": data.title, - "status_send": type, - "send_to_type": "roles", - "message_notif": data.message, - "description": data.description, - "send_to_id": data.id - } - - const paramUsers = { - "title_notif": data.title, - "status_send": type, - "send_to_type": "users", - "message_notif": data.message, - "description": data.description, - "send_to_id": data.send_to_type == "users" ? data.id.map((id, index) => id) : null - } - - if (data.send_to_type === "all") { - const result = await axios.post(url, param, config) - .then(res => res) - .catch((error) => error.response); - if (result) { - if (result.data) { - if (result.data.code === 200) { - this.getDataBroadcast(); - NotificationManager.success('Broadcast berhasil terkirimkan', 'Success!!'); - } else { - NotificationManager.error(`${result.data.message}`, 'Failed!!'); - } - } else { - NotificationManager.error(`${result.data.message}`, 'Failed!!'); - } - } else { - NotificationManager.error(`${result.data.message}`, 'Failed!!'); - } - } else if (data.send_to_type === "roles") { - const result = await axios.post(url, paramRoles, config) - .then(res => res) - .catch((error) => error.response); - if (result) { - if (result.data) { - if (result.data.code === 200) { - this.getDataBroadcast(); - NotificationManager.success('Broadcast berhasil terkirimkan', 'Success!!'); - } else { - NotificationManager.error(`${result.data.message}`, 'Failed!!'); - } - } else { - NotificationManager.error(`${result.data.message}`, 'Failed!!'); - } - } else { - NotificationManager.error(`${result.data.message}`, 'Failed!!'); - } - } else if (data.send_to_type === "users") { - const result = await axios.post(url, paramUsers, config) - .then(res => res) - .catch((error) => error.response); - if (result) { - if (result.data) { - if (result.data.code === 200) { - this.getDataBroadcast(); - NotificationManager.success('Broadcast berhasil terkirimkan', 'Success!!'); - } else { - NotificationManager.error(`${result.data.message}`, 'Failed!!'); - } - } else { - NotificationManager.error(`${result.data.message}`, 'Failed!!'); - } - } else { - NotificationManager.error(`${result.data.message}`, 'Failed!!'); - } - } - - } - - handleEdit = (id, type) => { - this.setState({ alertBroadcast: true, statusSend: type, idSend: id }) - } - - handleDelete = (id) => { - this.setState({ alertDelete: true, idDelete: id }); - } - - onShowSizeChange = (current, pageSize) => { - this.setState({ rowsPerPage: pageSize }, () => { - this.getDataBroadcast(); - }) - } - - onPagination = (current, pageSize) => { - this.setState({ currentPage: current, page: (current - 1) * pageSize }, () => { - this.getDataBroadcast(); - }) - } - - toggle = (param) => { - if (param === "edit") { - this.setState(prevState => ({ tooltipEdit: !prevState.tooltipEdit })) - } else if (param === "delete") { - this.setState(prevState => ({ tooltipDelete: !prevState.tooltipDelete })) - } else if (param === "tambah") { - this.setState(prevState => ({ tooltipTambah: !prevState.tooltipTambah })) - } else if (param === "export") { - this.setState(prevState => ({ tooltipExport: !prevState.tooltipExport })) - } - } - - handleDatePicker = (date, dateString) => { - this.setState({ startDate: date[0], endDate: date[1] }, () => { - this.getDataBroadcast(); - }) - } - - handleTipe = (e) => { - this.setState({ typeClock: e.target.value }, () => { - this.getDataBroadcast(); - }); - } - - handleExportExcel = async () => { - let url = BASE_SIMPRO + `/broadcast.php?act=get_data&role_name=${roleName}`; - const { searchDetail } = this.state - - let start = 0; - if (this.state.currentPage !== 1) { - start = (this.state.currentPage * this.state.rowsPerPage) - this.state.rowsPerPage - } - - let dateStart = this.state.startDate; - let dateEnd = this.state.endDate; - - const formData = new FormData(); - formData.append("startDate", dateStart.format("YYYY-M-D") + " 00:00:00"); - formData.append("endDate", dateEnd.format("YYYY-M-D") + " 23:59:59"); - formData.append('field', this.state.searchDetailField); - formData.append("start", start); - formData.append("length", "all"); - if (this.state.search !== "" && this.state.search !== null) { - formData.append('value', this.state.search); - } - - const result = await axios - .post(url, formData) - .then(res => res) - .catch((error) => error.response); - if (result && result.data) { - if (result.data.code_status === 200) { - this.setState({ dataExport: result.data.data }, () => { - this.exportExcel(); - }); - } else { - } - } else { - } - } - - exportExcel = () => { - const dataExcel = this.state.dataExport || []; - const dataExport = []; - dataExcel.map((val) => { - let row = { - "Tanggal Broadcast": moment(val.created_date).format("YYYY-MM-DD HH:mm:ss"), - "Penerima": val.employee_name, - "Judul": val.title_notif, - "Pesan": val.message_notif, - "Deskripsi": val.description, - "Status": val.status_send - } - dataExport.push(row); - }); - const fileName = "Broadcast.xlsx"; - const ws = XLSX.utils.json_to_sheet(dataExport); - const wb = XLSX.utils.book_new(); - XLSX.utils.book_append_sheet(wb, ws, 'Broadcast'); - - XLSX.writeFile(wb, fileName); - } - - handleDetail = (data) => { - console.log("ceh handle detail", data) - this.setState({ dataDetail: data }, () => { - this.showDetailDialog(); - this.setState({ openDialogDetail: true }); - }); - } - - toggleTooltip = (type) => { - if (type === "detail") { - this.setState({ toltipDetail: !this.state.toltipDetail }) - } else if (type === "resend") { - this.setState({ tooltipresend: !this.state.tooltipresend }) - } else if (type === "send") { - this.setState({ tooltipsend: !this.state.tooltipsend }) - } - } - - renderBtnResend = (n) => { - return ( - - this.handleEdit(n, 'resend')}> - this.toggleTooltip("resend")}> - Kirim Ulang - - - ) - } - - renderBtnSend = (n) => { - return ( - - this.handleEdit(n, 'send')}> - this.toggleTooltip("send")}> - Kirim - - - ) - } - - renderTable = () => { - const column = [ - { name: this.props.t('action') }, - { name: this.props.t('title') }, - { name: this.props.t('message') }, - { name: this.props.t('description') }, - { name: "Status" }, - { name: this.props.t('date') }, - ] - const t = this.props - const dataTable2 = this.state.dataTable || []; - return ( - - {dataTable2.length !== 0 ? dataTable2.map((n) => { - return ( - - - - {n.status_send === 'completed' || n.status_send === 'failed' || n.status_send === 'send' ? - this.renderBtnResend(n.id) : - this.renderBtnSend(n.id) - } - - this.handleDetail(n)}> - this.toggleTooltip("detail")}> - Detail - - - - - - {n.title_notif} - {n.message_notif !== "" ? n.message_notif : "-"} - {n.description !== "" ? n.description : "-"} - {n.status_send !== "" ? n.status_send : "-"} - {n.created_date !== "" ? moment.utc(n.created_date).format("DD-MM-YYYY HH:mm:ss") : "-"} - - ) - }) : - {this.props.t('noData')} - - } - - ) - } - - toggleDropDown = () => { - this.setState({ splitButtonOpen: !this.state.splitButtonOpen }) - } - - handleCloseDetail = () => { - this.setState({ openDialogDetail: false }) - } - - toggleDialogDetail = () => { - this.setState({ openDialogDetail: !this.state.openDialogDetail }) - } - - handleChangeDay = (e) => { - const val = e.target.value; - this.setState({ currentDay: val }); - if (val === "today") { - this.setState({ - startDate: moment(moment().format("YYYY-M-D")), - endDate: moment(moment().format("YYYY-M-D")), - currentPage: 1 - }) - } else if (val === "3 day") { - this.setState({ - startDate: moment(moment().subtract(3, "days").format("YYYY-M-D")), - endDate: moment(moment().format("YYYY-M-D")), - currentPage: 1 - }) - } else if (val === "7 day") { - this.setState({ - startDate: moment(moment().subtract(7, "days").format("YYYY-M-D")), - endDate: moment(moment().format("YYYY-M-D")), - currentPage: 1 - }) - } else { - console.log("test 2 test", val); - this.setState({ - startDate: moment(moment().format("YYYY-M-D")), - endDate: moment(moment().format("YYYY-M-D")), - currentPage: 1 - }) - } - } - - render() { - const column = [ - { name: this.props.t('action') }, - { name: this.props.t('title') }, - { name: this.props.t('message') }, - { name: this.props.t('description') }, - { name: "Status" }, - { name: this.props.t('date') }, - ] - const t = this.props; - const { tooltipTambah, tooltipExport, dataTable, splitButtonOpen, openDialog, currentPage, rowsPerPage, totalPage, search, tooltipEdit, tooltipDelete, statusSend } = this.state - return ( -
- - this.setState({ alertBroadcast: false })} - focusCancelBtn - > - {`Yakin ingin ${statusSend === 'send' ? 'Mengirimkan' : 'Mengirimkan Ulang'} Broadcast?`} - - this.toggleAddDialog} - typeDialog={this.state.typeDialog} - dataEdit={this.state.dataEdit} - showDialog={showDialog => this.showChildDialog = showDialog} - dataHs={this.state.dataIdHo} - /> - this.toggleDialogDetail} - dataDetail={this.state.dataDetail} - showDialog={showDialog => this.showDetailDialog = showDialog} - /> - - -

{this.props.params.name}

- - - - - this.toggle("tambah")}> - {this.props.t('broadcastAdd')} - - this.toggle("export")}> - {this.props.t('exprotExcel')} - - - - - -
-
-
- this.handleChangeDay(e)} defaultValue={this.state.currentDay}> - - - - -
-
- {' '} - -
-
- - - - - - this.setState({ - searchDetail: this.props.t('title'), - searchDetailField: "title_notif" - })}>Judul - this.setState({ - searchDetail: this.props.t('description'), - searchDetailField: "description" - })}>Deskripsi - this.setState({ - searchDetail: this.props.t('message'), - searchDetailField: "message_notif" - })}>Pesan - this.setState({ - searchDetail: "Status", - searchDetailField: "status_send" - })}>Status - - - -
- - - - {column.map((i, index) => { - return ( - - ) - })} - - - {this.renderTable()} -
{i.name}
- - - -
- ) - } -} -export default withTranslation()(index); +import * as XLSX from 'xlsx'; +import DialogDetail from './DialogDetail'; +import DialogForm from './DialogForm'; +import React, { Component } from 'react'; +import SweetAlert from 'react-bootstrap-sweetalert'; +import axios from 'axios'; +import moment from 'moment'; +import { USER_LIST, BASE_SIMPRO_LUMEN } from '../../../const/ApiConst'; +import { Button, Card, CardBody, CardHeader, DropdownItem, DropdownMenu, DropdownToggle, Input, InputGroup, InputGroupButtonDropdown, Table, Row, Col } from 'reactstrap'; +import { DatePicker, Pagination } from 'antd'; +import { NotificationContainer, NotificationManager } from 'react-notifications'; +import { Tooltip } from 'reactstrap'; +import { withTranslation } from 'react-i18next'; + +const { RangePicker } = DatePicker; +const token = window.localStorage.getItem('token'); +const config = { + headers: + { + Authorization: `Bearer ${token}`, + "Content-type": `application/json` + } +}; + +const id_org = window.localStorage.getItem('id_org'); +const roleName = window.localStorage.getItem('role_name'); + + +const LENGTH_DATA = 10 + +class index extends Component { + constructor(props) { + super(props) + this.state = { + alertBroadcast: false, + alertDelete: false, + currentDay: 'today', + currentPage: 1, + dataDetail: [], + dataEdit: null, + dataExport: [], + dataExport: [], + dataGs: [], + dataIdHo: [], + dataTable: [], + endDate: moment(moment().format("YYYY-M-D")), + idDelete: 0, + idSend: 0, + openDialog: false, + openDialogDetail: false, + page: 0, + rowsPerPage: LENGTH_DATA, + search: "", + searchDetail: "Title", + searchDetailField: "title_notif", + splitButtonOpen: false, + startDate: moment(moment().format("YYYY-M-D")), + statusSend: '', + toltipDetail: false, + tooltipDelete: false, + tooltipEdit: false, + tooltipExport: false, + tooltipTambah: false, + tooltipresend: false, + tooltipsend: false, + totalPage: 0, + typeClock: "All", + typeDialog: 'Save', + } + } + + async componentDidMount() { + await this.getDataBroadcast(); + } + + async componentDidUpdate(prevProps, prevState) { + const { search, startDate } = this.state + if (search !== prevState.search) this.getDataBroadcast() + if (startDate !== prevState.startDate) this.getDataBroadcast() + } + + handleSearch = e => { + const value = e.target.value + this.setState({ search: value, currentPage: 1 }) + }; + + getDataUsers = async () => { + const result = await axios + .get(USER_LIST, config) + .then(res => res) + .catch((error) => error.response); + console.log('Get Data User', result) + + if (result && result.data && result.status == 200) { + this.setState({ dataUser: result.data.data }, () => { + }); + } + } + + getDataBroadcast = async () => { + let url = BASE_SIMPRO_LUMEN + `/broadcast/search`; + const { searchDetailField, search, currentPage, rowsPerPage, startDate, endDate } = this.state + let start = 0; + if (currentPage !== 1 && currentPage > 1) { + start = (currentPage * rowsPerPage) - rowsPerPage + } + + let dateStart = moment(startDate).format("YYYY-MM-DD 00:00:00"); + let dateEnd = moment(endDate).format("YYYY-MM-DD 23:59:59"); + + const payload = { + "columns": [ + { + "logic_operator": "range", + "name": "created_at", + "operator": "AND", + "value": `${dateStart}`, + "value1": `${dateEnd}` + }, + { + "logic_operator": "ilike", + "name": searchDetailField, + "operator": "AND", + "value": search + } + ], + "orders": { + "ascending": false, + "columns": [ + "created_at" + ] + }, + "paging": { + "length": this.state.rowsPerPage, + "start": start + } + } + + if (this.state.search !== "" && this.state.search !== null) { + } + + const result = await axios + .post(url, payload, config) + .then(res => res) + .catch((error) => error.response); + if (result && result.data) { + if (result.data.code === 200) { + this.setState({ dataTable: result.data.data, totalPage: result.data.totalRecord }); + this.getDataUsers() + } else { + NotificationManager.error('Failed retreiving data!!', 'Failed'); + } + } else { + NotificationManager.error('Failed retreiving data!!', 'Failed'); + } + } + + handleOpenDialog = (type) => { + this.setState({ openDialog: true, typeDialog: type }) + this.showChildDialog(); + } + + handleCloseDialog = (type, data) => { + this.setState({ openDialog: false }) + } + handleSaveBroadcast = (type, data) => { + this.setState({ openDialog: false }) + this.saveBroadcast(type, data) + } + + toggleAddDialog = () => { + this.setState({ openDialog: !this.state.openDialog }) + } + + onConfirmBroadcast = async () => { + const { idSend, statusSend } = this.state + let url = BASE_SIMPRO_LUMEN + `/broadcast/update/${idSend}`; + let payload = { + "status_send": statusSend + } + const result = await axios + .put(url, payload, config) + .then(res => res) + .catch((error) => error.response); + if (result.status === 200) { + NotificationManager.success(`Broadcast berhasil di ${statusSend === 'send' ? 'Kirim' : 'Kirim Ulang'}`) + this.getDataBroadcast() + this.setState({ alertBroadcast: false }) + } else { + NotificationManager.error(result.message, 'Failed!!'); + this.setState({ alertBroadcast: false }) + } + } + + saveBroadcast = async (type, data) => { + let url = BASE_SIMPRO_LUMEN + `/broadcast/add`; + + const param = { + "title_notif": data.title, + "status_send": type, + "send_to_type": "all", + "message_notif": data.message, + "description": data.description, + } + + const paramRoles = { + "title_notif": data.title, + "status_send": type, + "send_to_type": "roles", + "message_notif": data.message, + "description": data.description, + "send_to_id": data.id + } + + const paramUsers = { + "title_notif": data.title, + "status_send": type, + "send_to_type": "users", + "message_notif": data.message, + "description": data.description, + "send_to_id": data.send_to_type == "users" ? data.id.map((id, index) => id) : null + } + + if (data.send_to_type === "all") { + const result = await axios.post(url, param, config) + .then(res => res) + .catch((error) => error.response); + if (result) { + if (result.data) { + if (result.data.code === 200) { + this.getDataBroadcast(); + NotificationManager.success('Broadcast berhasil terkirimkan', 'Success!!'); + } else { + NotificationManager.error(`${result.data.message}`, 'Failed!!'); + } + } else { + NotificationManager.error(`${result.data.message}`, 'Failed!!'); + } + } else { + NotificationManager.error(`${result.data.message}`, 'Failed!!'); + } + } else if (data.send_to_type === "roles") { + const result = await axios.post(url, paramRoles, config) + .then(res => res) + .catch((error) => error.response); + if (result) { + if (result.data) { + if (result.data.code === 200) { + this.getDataBroadcast(); + NotificationManager.success('Broadcast berhasil terkirimkan', 'Success!!'); + } else { + NotificationManager.error(`${result.data.message}`, 'Failed!!'); + } + } else { + NotificationManager.error(`${result.data.message}`, 'Failed!!'); + } + } else { + NotificationManager.error(`${result.data.message}`, 'Failed!!'); + } + } else if (data.send_to_type === "users") { + const result = await axios.post(url, paramUsers, config) + .then(res => res) + .catch((error) => error.response); + if (result) { + if (result.data) { + if (result.data.code === 200) { + this.getDataBroadcast(); + NotificationManager.success('Broadcast berhasil terkirimkan', 'Success!!'); + } else { + NotificationManager.error(`${result.data.message}`, 'Failed!!'); + } + } else { + NotificationManager.error(`${result.data.message}`, 'Failed!!'); + } + } else { + NotificationManager.error(`${result.data.message}`, 'Failed!!'); + } + } + + } + + handleEdit = (id, type) => { + this.setState({ alertBroadcast: true, statusSend: type, idSend: id }) + } + + handleDelete = (id) => { + this.setState({ alertDelete: true, idDelete: id }); + } + + onShowSizeChange = (current, pageSize) => { + this.setState({ rowsPerPage: pageSize }, () => { + this.getDataBroadcast(); + }) + } + + onPagination = (current, pageSize) => { + this.setState({ currentPage: current, page: (current - 1) * pageSize }, () => { + this.getDataBroadcast(); + }) + } + + toggle = (param) => { + if (param === "edit") { + this.setState(prevState => ({ tooltipEdit: !prevState.tooltipEdit })) + } else if (param === "delete") { + this.setState(prevState => ({ tooltipDelete: !prevState.tooltipDelete })) + } else if (param === "tambah") { + this.setState(prevState => ({ tooltipTambah: !prevState.tooltipTambah })) + } else if (param === "export") { + this.setState(prevState => ({ tooltipExport: !prevState.tooltipExport })) + } + } + + handleDatePicker = (date, dateString) => { + this.setState({ startDate: date[0], endDate: date[1] }, () => { + this.getDataBroadcast(); + }) + } + + handleTipe = (e) => { + this.setState({ typeClock: e.target.value }, () => { + this.getDataBroadcast(); + }); + } + + handleExportExcel = async () => { + const dataExcel = this.state.dataTable || []; + const dataUser = this.state.dataUser || []; + const dataExport = []; + dataExcel.map((val) => { + const matchedUser = dataUser.find(item => item.id == val.send_to_id); + let row = { + "Tanggal Broadcast": moment(val.created_at).format("YYYY-MM-DD HH:mm:ss"), + "Judul": val.title_notif, + "Penerima": matchedUser ? matchedUser.name : "-", + "Pesan": val.message_notif, + "Deskripsi": val.description, + "Status": val.status_send + } + dataExport.push(row); + }); + const fileName = "Broadcast.xlsx"; + const ws = XLSX.utils.json_to_sheet(dataExport); + const wb = XLSX.utils.book_new(); + XLSX.utils.book_append_sheet(wb, ws, 'Broadcast'); + + XLSX.writeFile(wb, fileName); + } + + handleDetail = (data) => { + console.log("ceh handle detail", data) + this.setState({ dataDetail: data }, () => { + this.showDetailDialog(); + this.setState({ openDialogDetail: true }); + }); + } + + toggleTooltip = (type) => { + if (type === "detail") { + this.setState({ toltipDetail: !this.state.toltipDetail }) + } else if (type === "resend") { + this.setState({ tooltipresend: !this.state.tooltipresend }) + } else if (type === "send") { + this.setState({ tooltipsend: !this.state.tooltipsend }) + } + } + + renderBtnResend = (n) => { + return ( + + this.handleEdit(n, 'resend')}> + this.toggleTooltip("resend")}> + Kirim Ulang + + + ) + } + + renderBtnSend = (n) => { + return ( + + this.handleEdit(n, 'send')}> + this.toggleTooltip("send")}> + Kirim + + + ) + } + + renderTable = () => { + const column = [ + { name: this.props.t('action') }, + { name: this.props.t('title') }, + { name: this.props.t('message') }, + { name: this.props.t('description') }, + { name: this.props.t('receiver') }, + { name: "Status" }, + { name: this.props.t('date') }, + ] + const dataTable2 = this.state.dataTable || []; + const dataUser = this.state.dataUser || []; + + return ( + + {dataTable2.length !== 0 ? dataTable2.map((n) => { + const matchedUser = dataUser.find(item => item.id == n.send_to_id); + return ( + + + + {n.status_send === 'completed' || n.status_send === 'failed' || n.status_send === 'send' || n.status_send === 'resend' ? + this.renderBtnResend(n.id) : + this.renderBtnSend(n.id) + } + + this.handleDetail(n)}> + this.toggleTooltip("detail")}> + Detail + + + + {n.title_notif} + {n.message_notif !== "" ? n.message_notif : "-"} + {n.description !== "" ? n.description : "-"} + { matchedUser ? matchedUser.name : "-" } + {n.status_send !== "" ? n.status_send : "-"} + {n.created_at !== "" ? moment.utc(n.created_at).format("DD-MM-YYYY HH:mm:ss") : "-"} + + ); + }) : + {this.props.t('noData')} + + } + + ) + } + + toggleDropDown = () => { + this.setState({ splitButtonOpen: !this.state.splitButtonOpen }) + } + + handleCloseDetail = () => { + this.setState({ openDialogDetail: false }) + } + + toggleDialogDetail = () => { + this.setState({ openDialogDetail: !this.state.openDialogDetail }) + } + + handleChangeDay = (e) => { + const val = e.target.value; + this.setState({ currentDay: val }); + if (val === "today") { + this.setState({ + startDate: moment(moment().format("YYYY-M-D")), + endDate: moment(moment().format("YYYY-M-D")), + currentPage: 1 + }) + } else if (val === "3 day") { + this.setState({ + startDate: moment(moment().subtract(3, "days").format("YYYY-M-D")), + endDate: moment(moment().format("YYYY-M-D")), + currentPage: 1 + }) + } else if (val === "7 day") { + this.setState({ + startDate: moment(moment().subtract(7, "days").format("YYYY-M-D")), + endDate: moment(moment().format("YYYY-M-D")), + currentPage: 1 + }) + } else { + console.log("test 2 test", val); + this.setState({ + startDate: moment(moment().format("YYYY-M-D")), + endDate: moment(moment().format("YYYY-M-D")), + currentPage: 1 + }) + } + } + + render() { + const column = [ + { name: this.props.t('action') }, + { name: this.props.t('title') }, + { name: this.props.t('message') }, + { name: this.props.t('description') }, + { name: this.props.t('receiver') }, + { name: "Status" }, + { name: this.props.t('date') }, + ] + const t = this.props; + const { tooltipTambah, tooltipExport, dataTable, splitButtonOpen, openDialog, currentPage, rowsPerPage, totalPage, search, tooltipEdit, tooltipDelete, statusSend } = this.state + return ( +
+ + this.setState({ alertBroadcast: false })} + focusCancelBtn + > + {`Yakin ingin ${statusSend === 'send' ? 'Mengirimkan' : 'Mengirimkan Ulang'} Broadcast?`} + + this.toggleAddDialog} + typeDialog={this.state.typeDialog} + dataEdit={this.state.dataEdit} + showDialog={showDialog => this.showChildDialog = showDialog} + dataHs={this.state.dataIdHo} + /> + this.toggleDialogDetail} + dataDetail={this.state.dataDetail} + showDialog={showDialog => this.showDetailDialog = showDialog} + /> + + +

{this.props.params.name}

+ + + + + this.toggle("tambah")}> + {this.props.t('broadcastAdd')} + + this.toggle("export")}> + {this.props.t('exportExcel')} + + + + + +
+
+
+ this.handleChangeDay(e)} defaultValue={this.state.currentDay}> + + + + +
+
+ {' '} + +
+
+ + + + + + this.setState({ + searchDetail: this.props.t('title'), + searchDetailField: "title_notif" + })}>Judul + this.setState({ + searchDetail: this.props.t('description'), + searchDetailField: "description" + })}>Deskripsi + this.setState({ + searchDetail: this.props.t('message'), + searchDetailField: "message_notif" + })}>Pesan + this.setState({ + searchDetail: "Status", + searchDetailField: "status_send" + })}>Status + + + +
+ + + + {column.map((i, index) => { + return ( + + ) + })} + + + {this.renderTable()} +
{i.name}
+ + + +
+ ) + } +} +export default withTranslation()(index);