From 629af43b2be4879b46fe728b3f0ed07fc8c451b9 Mon Sep 17 00:00:00 2001 From: wahyuun Date: Mon, 18 Sep 2023 11:03:52 +0700 Subject: [PATCH] changed created_date to created_at --- src/views/SimproV2/PanicButton/index.js | 798 ++++++++++++------------ 1 file changed, 399 insertions(+), 399 deletions(-) diff --git a/src/views/SimproV2/PanicButton/index.js b/src/views/SimproV2/PanicButton/index.js index aa2510c..00d2dd8 100644 --- a/src/views/SimproV2/PanicButton/index.js +++ b/src/views/SimproV2/PanicButton/index.js @@ -1,399 +1,399 @@ -import * as XLSX from 'xlsx'; -import DialogEdit from './DialogEdit'; -import DialogForm from './DialogForm'; -import React, { Component } from 'react'; -import SweetAlert from 'react-bootstrap-sweetalert'; -import axios from 'axios'; -import moment from 'moment'; -import { Button } from 'reactstrap'; -import { Card, CardBody, CardHeader, Col, Row, Table, Input, InputGroup } from 'reactstrap'; -import { DatePicker } from 'antd'; -import { NotificationContainer, NotificationManager } from 'react-notifications'; -import { PANIC_BUTTON_UPDATE, PANIC_BUTTON_SEARCH } from '../../../const/ApiConst'; -import { Pagination, Tooltip } from 'antd'; -import { withTranslation } from 'react-i18next'; - -const id_org = window.localStorage.getItem('id_org'); -const roleName = window.localStorage.getItem('role_name'); - -const token = window.localStorage.getItem('token'); -const config = { - headers: - { - Authorization: `Bearer ${token}`, - "Content-type": `application/json` - } -}; - -const { RangePicker } = DatePicker; - -const momentFormat = 'HH:mm'; - - - -const LENGTH_DATA = 10 - -class index extends Component { - constructor(props) { - super(props) - this.state = { - alertDelete: false, - currentDay: 'today', - currentPage: 1, - dataEdit: null, - dataExport: [], - dataGs: [], - dataIdHo: [], - dataMap: "", - dataTable: [], - endDate: moment(moment().format("YYYY-M-D")), - idDelete: 0, - openDialog: false, - openDialogEdit: false, - page: 0, - rowsPerPage: LENGTH_DATA, - search: "", - startDate: moment(moment().format("YYYY-M-D")), - tooltipDelete: false, - tooltipExport: false, - tooltipMap: false, - totalPage: 0, - typeClock: "All", - typeDialog: 'Save', - } - } - - async componentDidMount() { - this.getDataPanicButton(); - } - - async componentDidUpdate(prevProps, prevState) { - const { search, startDate } = this.state - if (search !== prevState.search) this.getDataPanicButton() - if (startDate !== prevState.startDate) this.getDataPanicButton() - } - - handleSearch = e => { - const value = e.target.value - this.setState({ search: value, currentPage: 1 }) - }; - - getDataPanicButton = async () => { - let start = 0; - if (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 = { - "paging": { - "start": start, - "length": this.state.rowsPerPage - }, - "filter_columns": [ - { - "name": "name", - "value": "", - "table_name": "m_users" - } - ], - "columns": [ - { "name": "created_at", "logic_operator": "range", "value": dateStart, "value1": dateEnd, "operator": "AND" }, - { "name": "name", "logic_operator": "ilike", "value": this.state.search, "operator": "AND", "table_name": "m_users" } - ], - "joins": [ - { - "name": "m_users", - "column_join": "user_id", - "column_results": [ - "name", - ] - } - ], - "orders": { - "columns": [ - "id" - ], - "ascending": false - } - } - - const result = await axios - .post(PANIC_BUTTON_SEARCH, payload, config) - .then(res => res) - .catch((error) => error.response); - if (result && result.data) { - if (result && result.data && result.data.code == 200) { - this.setState({ dataTable: result.data.data, totalPage: result.data.totalRecord, dataExport: result.data.data_export }); - } else { - NotificationManager.error('Gagal Menerima Data!!', 'Failed'); - } - } - } - - handleOpenDialog = (type) => { - if (type === "Map") { - this.setState({ openDialog: true }) - this.showChildDialog(); - } else { - this.setState({ openDialogEdit: true }) - this.showDialogEdit(); - } - - } - - handleCloseDialog = () => { - this.setState({ openDialog: false }) - } - - handleCloseDialogEdit = (type, data) => { - if (type === "save") { - this.updateStatusResponse(data); - } - this.setState({ openDialogEdit: false }) - } - - toggleMapDialog = () => { - this.setState({ openDialog: !this.state.openDialog }) - } - - toggleEditDialog = () => { - this.setState({ openDialogEdit: !this.state.openDialogEdit }); - } - - handleMap = data => { - this.setState({ dataMap: data }); - this.handleOpenDialog('Map'); - } - - handleEdit = data => { - this.setState({ dataEdit: data }); - this.handleOpenDialog('Edit'); - } - - handleDelete = (id) => { - this.setState({ alertDelete: true, idDelete: id }); - } - - onShowSizeChange = (current, pageSize) => { - this.setState({ rowsPerPage: pageSize }, () => { - this.getDataPanicButton(); - }) - } - - onPagination = (current, pageSize) => { - this.setState({ currentPage: current, page: (current - 1) * pageSize }, () => { - this.getDataPanicButton(); - }) - } - - toggle = (param) => { - if (param === "map") { - this.setState(prevState => ({ tooltipMap: !prevState.tooltipMap })) - } else if (param === "edit") { - this.setState(prevState => ({ tooltipEdit: !prevState.tooltipEdit })) - } else if (param === "delete") { - this.setState(prevState => ({ tooltipDelete: !prevState.tooltipDelete })) - } else if (param === "export") { - this.setState(prevState => ({ tooltipExport: !prevState.tooltipExport })) - } - } - - handleDatePicker = (date, dateString) => { - this.setState({ startDate: date[0], endDate: date[1] }, () => { - this.getDataPanicButton(); - }) - } - - handleTipe = (e) => { - this.setState({ typeClock: e.target.value }, () => { - this.getDataPanicButton(); - }); - } - - handleExportExcel = () => { - const dataExcel = this.state.dataTable || []; - const fileName = "Panic Button.xlsx"; - let dataExport = []; - dataExcel.map((val) => { - let row = { - "Tanggal": moment(val.created_date).format("DD-MM-YYYY HH:MM:SS"), - "Nama Karyawan": val.join_first_name, - "Latitude": val.lat, - "Longitude": val.lon, - "Status": val.status_response - } - dataExport.push(row); - }) - const ws = XLSX.utils.json_to_sheet(dataExport); - const wb = XLSX.utils.book_new(); - XLSX.utils.book_append_sheet(wb, ws, 'Panic Button'); - - XLSX.writeFile(wb, fileName); - } - - updateStatusResponse = async (data) => { - let url = PANIC_BUTTON_UPDATE(data.id); - let payload = { - "user_id": data.user_id, - "lat": data.lat, - "lon": data.lon, - "status_response": data.status_response, - "description": "update data panic" - - } - - const result = await axios - .put(url, payload, config) - .then(res => res) - .catch((error) => error.response); - if (result && result.data) { - if (result.data.code == 200) { - this.getDataPanicButton() - NotificationManager.success('Berhasil update status response!!', 'Success!'); - } else { - NotificationManager.error('Gagal update status response!!', 'Failed'); - } - } - } - - renderTable = () => { - const t = this.props; - const dataTable2 = this.state.dataTable || []; - return ( - - {dataTable2.length !== 0 ? dataTable2.map((n) => { - return ( - - - - this.handleEdit(n)}> - - - this.handleMap(n)}> - - - {n.created_date !== null ? moment(n.created_at).format("DD-MM-YYYY HH:mm:ss") : "-"} - {n.join_first_name !== null ? n.join_first_name : "-"} - {n.status_response !== null ? n.status_response : "-"} - - ) - }) : - No Data Available - - } - - ) - } - - 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 { - 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('date') }, - { name: this.props.t('nameHR') }, - { name: this.props.t('statusResponse') }, - ] - const t = this.props; - const { tooltipExport, dataTable, openDialogEdit, openDialog, currentPage, rowsPerPage, totalPage, search, tooltipMap, tooltipDelete } = this.state - return ( -
- - this.toggleMapDialog} - dataMap={this.state.dataMap} - showDialog={showDialog => this.showChildDialog = showDialog} - /> - this.toggleEditDialog} - dataEdit={this.state.dataEdit} - showDialog={showDialog => this.showDialogEdit = showDialog} - /> - - -

{this.props.t('panicButton')}

-
- - - -
- - -
-
-
- this.handleChangeDay(e)} defaultValue={this.state.currentDay}> - - - - -
-
- {' '} - -
-
-
- - - - {column.map((i, index) => { - return ( - - ) - })} - - - {this.renderTable()} -
{i.name}
- - - -
- ) - } -} -export default withTranslation()(index); +import * as XLSX from 'xlsx'; +import DialogEdit from './DialogEdit'; +import DialogForm from './DialogForm'; +import React, { Component } from 'react'; +import SweetAlert from 'react-bootstrap-sweetalert'; +import axios from 'axios'; +import moment from 'moment'; +import { Button } from 'reactstrap'; +import { Card, CardBody, CardHeader, Col, Row, Table, Input, InputGroup } from 'reactstrap'; +import { DatePicker } from 'antd'; +import { NotificationContainer, NotificationManager } from 'react-notifications'; +import { PANIC_BUTTON_UPDATE, PANIC_BUTTON_SEARCH } from '../../../const/ApiConst'; +import { Pagination, Tooltip } from 'antd'; +import { withTranslation } from 'react-i18next'; + +const id_org = window.localStorage.getItem('id_org'); +const roleName = window.localStorage.getItem('role_name'); + +const token = window.localStorage.getItem('token'); +const config = { + headers: + { + Authorization: `Bearer ${token}`, + "Content-type": `application/json` + } +}; + +const { RangePicker } = DatePicker; + +const momentFormat = 'HH:mm'; + + + +const LENGTH_DATA = 10 + +class index extends Component { + constructor(props) { + super(props) + this.state = { + alertDelete: false, + currentDay: 'today', + currentPage: 1, + dataEdit: null, + dataExport: [], + dataGs: [], + dataIdHo: [], + dataMap: "", + dataTable: [], + endDate: moment(moment().format("YYYY-M-D")), + idDelete: 0, + openDialog: false, + openDialogEdit: false, + page: 0, + rowsPerPage: LENGTH_DATA, + search: "", + startDate: moment(moment().format("YYYY-M-D")), + tooltipDelete: false, + tooltipExport: false, + tooltipMap: false, + totalPage: 0, + typeClock: "All", + typeDialog: 'Save', + } + } + + async componentDidMount() { + this.getDataPanicButton(); + } + + async componentDidUpdate(prevProps, prevState) { + const { search, startDate } = this.state + if (search !== prevState.search) this.getDataPanicButton() + if (startDate !== prevState.startDate) this.getDataPanicButton() + } + + handleSearch = e => { + const value = e.target.value + this.setState({ search: value, currentPage: 1 }) + }; + + getDataPanicButton = async () => { + let start = 0; + if (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 = { + "paging": { + "start": start, + "length": this.state.rowsPerPage + }, + "filter_columns": [ + { + "name": "name", + "value": "", + "table_name": "m_users" + } + ], + "columns": [ + { "name": "created_at", "logic_operator": "range", "value": dateStart, "value1": dateEnd, "operator": "AND" }, + { "name": "name", "logic_operator": "ilike", "value": this.state.search, "operator": "AND", "table_name": "m_users" } + ], + "joins": [ + { + "name": "m_users", + "column_join": "user_id", + "column_results": [ + "name", + ] + } + ], + "orders": { + "columns": [ + "id" + ], + "ascending": false + } + } + + const result = await axios + .post(PANIC_BUTTON_SEARCH, payload, config) + .then(res => res) + .catch((error) => error.response); + if (result && result.data) { + if (result && result.data && result.data.code == 200) { + this.setState({ dataTable: result.data.data, totalPage: result.data.totalRecord, dataExport: result.data.data_export }); + } else { + NotificationManager.error('Gagal Menerima Data!!', 'Failed'); + } + } + } + + handleOpenDialog = (type) => { + if (type === "Map") { + this.setState({ openDialog: true }) + this.showChildDialog(); + } else { + this.setState({ openDialogEdit: true }) + this.showDialogEdit(); + } + + } + + handleCloseDialog = () => { + this.setState({ openDialog: false }) + } + + handleCloseDialogEdit = (type, data) => { + if (type === "save") { + this.updateStatusResponse(data); + } + this.setState({ openDialogEdit: false }) + } + + toggleMapDialog = () => { + this.setState({ openDialog: !this.state.openDialog }) + } + + toggleEditDialog = () => { + this.setState({ openDialogEdit: !this.state.openDialogEdit }); + } + + handleMap = data => { + this.setState({ dataMap: data }); + this.handleOpenDialog('Map'); + } + + handleEdit = data => { + this.setState({ dataEdit: data }); + this.handleOpenDialog('Edit'); + } + + handleDelete = (id) => { + this.setState({ alertDelete: true, idDelete: id }); + } + + onShowSizeChange = (current, pageSize) => { + this.setState({ rowsPerPage: pageSize }, () => { + this.getDataPanicButton(); + }) + } + + onPagination = (current, pageSize) => { + this.setState({ currentPage: current, page: (current - 1) * pageSize }, () => { + this.getDataPanicButton(); + }) + } + + toggle = (param) => { + if (param === "map") { + this.setState(prevState => ({ tooltipMap: !prevState.tooltipMap })) + } else if (param === "edit") { + this.setState(prevState => ({ tooltipEdit: !prevState.tooltipEdit })) + } else if (param === "delete") { + this.setState(prevState => ({ tooltipDelete: !prevState.tooltipDelete })) + } else if (param === "export") { + this.setState(prevState => ({ tooltipExport: !prevState.tooltipExport })) + } + } + + handleDatePicker = (date, dateString) => { + this.setState({ startDate: date[0], endDate: date[1] }, () => { + this.getDataPanicButton(); + }) + } + + handleTipe = (e) => { + this.setState({ typeClock: e.target.value }, () => { + this.getDataPanicButton(); + }); + } + + handleExportExcel = () => { + const dataExcel = this.state.dataTable || []; + const fileName = "Panic Button.xlsx"; + let dataExport = []; + dataExcel.map((val) => { + let row = { + "Tanggal": moment(val.created_at).format("DD-MM-YYYY HH:MM:SS"), + "Nama Karyawan": val.join_first_name, + "Latitude": val.lat, + "Longitude": val.lon, + "Status": val.status_response + } + dataExport.push(row); + }) + const ws = XLSX.utils.json_to_sheet(dataExport); + const wb = XLSX.utils.book_new(); + XLSX.utils.book_append_sheet(wb, ws, 'Panic Button'); + + XLSX.writeFile(wb, fileName); + } + + updateStatusResponse = async (data) => { + let url = PANIC_BUTTON_UPDATE(data.id); + let payload = { + "user_id": data.user_id, + "lat": data.lat, + "lon": data.lon, + "status_response": data.status_response, + "description": "update data panic" + + } + + const result = await axios + .put(url, payload, config) + .then(res => res) + .catch((error) => error.response); + if (result && result.data) { + if (result.data.code == 200) { + this.getDataPanicButton() + NotificationManager.success('Berhasil update status response!!', 'Success!'); + } else { + NotificationManager.error('Gagal update status response!!', 'Failed'); + } + } + } + + renderTable = () => { + const t = this.props; + const dataTable2 = this.state.dataTable || []; + return ( + + {dataTable2.length !== 0 ? dataTable2.map((n) => { + return ( + + + + this.handleEdit(n)}> + + + this.handleMap(n)}> + + + {n.created_at !== null ? moment(n.created_at).format("DD-MM-YYYY HH:mm:ss") : "-"} + {n.join_first_name !== null ? n.join_first_name : "-"} + {n.status_response !== null ? n.status_response : "-"} + + ) + }) : + No Data Available + + } + + ) + } + + 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 { + 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('date') }, + { name: this.props.t('nameHR') }, + { name: this.props.t('statusResponse') }, + ] + const t = this.props; + const { tooltipExport, dataTable, openDialogEdit, openDialog, currentPage, rowsPerPage, totalPage, search, tooltipMap, tooltipDelete } = this.state + return ( +
+ + this.toggleMapDialog} + dataMap={this.state.dataMap} + showDialog={showDialog => this.showChildDialog = showDialog} + /> + this.toggleEditDialog} + dataEdit={this.state.dataEdit} + showDialog={showDialog => this.showDialogEdit = showDialog} + /> + + +

{this.props.t('panicButton')}

+
+ + + +
+ + +
+
+
+ this.handleChangeDay(e)} defaultValue={this.state.currentDay}> + + + + +
+
+ {' '} + +
+
+
+ + + + {column.map((i, index) => { + return ( + + ) + })} + + + {this.renderTable()} +
{i.name}
+ + + +
+ ) + } +} +export default withTranslation()(index);