ordo
/
surveyor_indonesia_frontend
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

changed created_date to created_at

pull/2/head
wahyuun 1 year ago
parent
4e9278d90f
commit
629af43b2b
1 changed files with 399 additions and 399 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 798
      src/views/SimproV2/PanicButton/index.js

798
src/views/SimproV2/PanicButton/index.js
Unescape View File

@ -1,399 +1,399 @@
import * as XLSX from 'xlsx'; import * as XLSX from 'xlsx';
import DialogEdit from './DialogEdit'; import DialogEdit from './DialogEdit';
import DialogForm from './DialogForm'; import DialogForm from './DialogForm';
import React, { Component } from 'react'; import React, { Component } from 'react';
import SweetAlert from 'react-bootstrap-sweetalert'; import SweetAlert from 'react-bootstrap-sweetalert';
import axios from 'axios'; import axios from 'axios';
import moment from 'moment'; import moment from 'moment';
import { Button } from 'reactstrap'; import { Button } from 'reactstrap';
import { Card, CardBody, CardHeader, Col, Row, Table, Input, InputGroup } from 'reactstrap'; import { Card, CardBody, CardHeader, Col, Row, Table, Input, InputGroup } from 'reactstrap';
import { DatePicker } from 'antd'; import { DatePicker } from 'antd';
import { NotificationContainer, NotificationManager } from 'react-notifications'; import { NotificationContainer, NotificationManager } from 'react-notifications';
import { PANIC_BUTTON_UPDATE, PANIC_BUTTON_SEARCH } from '../../../const/ApiConst'; import { PANIC_BUTTON_UPDATE, PANIC_BUTTON_SEARCH } from '../../../const/ApiConst';
import { Pagination, Tooltip } from 'antd'; import { Pagination, Tooltip } from 'antd';
import { withTranslation } from 'react-i18next'; import { withTranslation } from 'react-i18next';
const id_org = window.localStorage.getItem('id_org'); const id_org = window.localStorage.getItem('id_org');
const roleName = window.localStorage.getItem('role_name'); const roleName = window.localStorage.getItem('role_name');
const token = window.localStorage.getItem('token'); const token = window.localStorage.getItem('token');
const config = { const config = {
headers: headers:
{ {
Authorization: `Bearer ${token}`, Authorization: `Bearer ${token}`,
"Content-type": `application/json` "Content-type": `application/json`
} }
}; };
const { RangePicker } = DatePicker; const { RangePicker } = DatePicker;
const momentFormat = 'HH:mm'; const momentFormat = 'HH:mm';
const LENGTH_DATA = 10 const LENGTH_DATA = 10
class index extends Component { class index extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
alertDelete: false, alertDelete: false,
currentDay: 'today', currentDay: 'today',
currentPage: 1, currentPage: 1,
dataEdit: null, dataEdit: null,
dataExport: [], dataExport: [],
dataGs: [], dataGs: [],
dataIdHo: [], dataIdHo: [],
dataMap: "", dataMap: "",
dataTable: [], dataTable: [],
endDate: moment(moment().format("YYYY-M-D")), endDate: moment(moment().format("YYYY-M-D")),
idDelete: 0, idDelete: 0,
openDialog: false, openDialog: false,
openDialogEdit: false, openDialogEdit: false,
page: 0, page: 0,
rowsPerPage: LENGTH_DATA, rowsPerPage: LENGTH_DATA,
search: "", search: "",
startDate: moment(moment().format("YYYY-M-D")), startDate: moment(moment().format("YYYY-M-D")),
tooltipDelete: false, tooltipDelete: false,
tooltipExport: false, tooltipExport: false,
tooltipMap: false, tooltipMap: false,
totalPage: 0, totalPage: 0,
typeClock: "All", typeClock: "All",
typeDialog: 'Save', typeDialog: 'Save',
} }
} }
async componentDidMount() { async componentDidMount() {
this.getDataPanicButton(); this.getDataPanicButton();
} }
async componentDidUpdate(prevProps, prevState) { async componentDidUpdate(prevProps, prevState) {
const { search, startDate } = this.state const { search, startDate } = this.state
if (search !== prevState.search) this.getDataPanicButton() if (search !== prevState.search) this.getDataPanicButton()
if (startDate !== prevState.startDate) this.getDataPanicButton() if (startDate !== prevState.startDate) this.getDataPanicButton()
} }
handleSearch = e => { handleSearch = e => {
const value = e.target.value const value = e.target.value
this.setState({ search: value, currentPage: 1 }) this.setState({ search: value, currentPage: 1 })
}; };
getDataPanicButton = async () => { getDataPanicButton = async () => {
let start = 0; let start = 0;
if (this.state.currentPage !== 1) { if (this.state.currentPage !== 1) {
start = (this.state.currentPage * this.state.rowsPerPage) - this.state.rowsPerPage start = (this.state.currentPage * this.state.rowsPerPage) - this.state.rowsPerPage
} }
let dateStart = moment(this.state.startDate).format("YYYY-MM-DD 00:00:00"); 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"); let dateEnd = moment(this.state.endDate).format("YYYY-MM-DD 23:59:59");
const payload = { const payload = {
"paging": { "paging": {
"start": start, "start": start,
"length": this.state.rowsPerPage "length": this.state.rowsPerPage
}, },
"filter_columns": [ "filter_columns": [
{ {
"name": "name", "name": "name",
"value": "", "value": "",
"table_name": "m_users" "table_name": "m_users"
} }
], ],
"columns": [ "columns": [
{ "name": "created_at", "logic_operator": "range", "value": dateStart, "value1": dateEnd, "operator": "AND" }, { "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" } { "name": "name", "logic_operator": "ilike", "value": this.state.search, "operator": "AND", "table_name": "m_users" }
], ],
"joins": [ "joins": [
{ {
"name": "m_users", "name": "m_users",
"column_join": "user_id", "column_join": "user_id",
"column_results": [ "column_results": [
"name", "name",
] ]
} }
], ],
"orders": { "orders": {
"columns": [ "columns": [
"id" "id"
], ],
"ascending": false "ascending": false
} }
} }
const result = await axios const result = await axios
.post(PANIC_BUTTON_SEARCH, payload, config) .post(PANIC_BUTTON_SEARCH, payload, config)
.then(res => res) .then(res => res)
.catch((error) => error.response); .catch((error) => error.response);
if (result && result.data) { if (result && result.data) {
if (result && result.data && result.data.code == 200) { if (result && result.data && result.data.code == 200) {
this.setState({ dataTable: result.data.data, totalPage: result.data.totalRecord, dataExport: result.data.data_export }); this.setState({ dataTable: result.data.data, totalPage: result.data.totalRecord, dataExport: result.data.data_export });
} else { } else {
NotificationManager.error('Gagal Menerima Data!!', 'Failed'); NotificationManager.error('Gagal Menerima Data!!', 'Failed');
} }
} }
} }
handleOpenDialog = (type) => { handleOpenDialog = (type) => {
if (type === "Map") { if (type === "Map") {
this.setState({ openDialog: true }) this.setState({ openDialog: true })
this.showChildDialog(); this.showChildDialog();
} else { } else {
this.setState({ openDialogEdit: true }) this.setState({ openDialogEdit: true })
this.showDialogEdit(); this.showDialogEdit();
} }
} }
handleCloseDialog = () => { handleCloseDialog = () => {
this.setState({ openDialog: false }) this.setState({ openDialog: false })
} }
handleCloseDialogEdit = (type, data) => { handleCloseDialogEdit = (type, data) => {
if (type === "save") { if (type === "save") {
this.updateStatusResponse(data); this.updateStatusResponse(data);
} }
this.setState({ openDialogEdit: false }) this.setState({ openDialogEdit: false })
} }
toggleMapDialog = () => { toggleMapDialog = () => {
this.setState({ openDialog: !this.state.openDialog }) this.setState({ openDialog: !this.state.openDialog })
} }
toggleEditDialog = () => { toggleEditDialog = () => {
this.setState({ openDialogEdit: !this.state.openDialogEdit }); this.setState({ openDialogEdit: !this.state.openDialogEdit });
} }
handleMap = data => { handleMap = data => {
this.setState({ dataMap: data }); this.setState({ dataMap: data });
this.handleOpenDialog('Map'); this.handleOpenDialog('Map');
} }
handleEdit = data => { handleEdit = data => {
this.setState({ dataEdit: data }); this.setState({ dataEdit: data });
this.handleOpenDialog('Edit'); this.handleOpenDialog('Edit');
} }
handleDelete = (id) => { handleDelete = (id) => {
this.setState({ alertDelete: true, idDelete: id }); this.setState({ alertDelete: true, idDelete: id });
} }
onShowSizeChange = (current, pageSize) => { onShowSizeChange = (current, pageSize) => {
this.setState({ rowsPerPage: pageSize }, () => { this.setState({ rowsPerPage: pageSize }, () => {
this.getDataPanicButton(); this.getDataPanicButton();
}) })
} }
onPagination = (current, pageSize) => { onPagination = (current, pageSize) => {
this.setState({ currentPage: current, page: (current - 1) * pageSize }, () => { this.setState({ currentPage: current, page: (current - 1) * pageSize }, () => {
this.getDataPanicButton(); this.getDataPanicButton();
}) })
} }
toggle = (param) => { toggle = (param) => {
if (param === "map") { if (param === "map") {
this.setState(prevState => ({ tooltipMap: !prevState.tooltipMap })) this.setState(prevState => ({ tooltipMap: !prevState.tooltipMap }))
} else if (param === "edit") { } else if (param === "edit") {
this.setState(prevState => ({ tooltipEdit: !prevState.tooltipEdit })) this.setState(prevState => ({ tooltipEdit: !prevState.tooltipEdit }))
} else if (param === "delete") { } else if (param === "delete") {
this.setState(prevState => ({ tooltipDelete: !prevState.tooltipDelete })) this.setState(prevState => ({ tooltipDelete: !prevState.tooltipDelete }))
} else if (param === "export") { } else if (param === "export") {
this.setState(prevState => ({ tooltipExport: !prevState.tooltipExport })) this.setState(prevState => ({ tooltipExport: !prevState.tooltipExport }))
} }
} }
handleDatePicker = (date, dateString) => { handleDatePicker = (date, dateString) => {
this.setState({ startDate: date[0], endDate: date[1] }, () => { this.setState({ startDate: date[0], endDate: date[1] }, () => {
this.getDataPanicButton(); this.getDataPanicButton();
}) })
} }
handleTipe = (e) => { handleTipe = (e) => {
this.setState({ typeClock: e.target.value }, () => { this.setState({ typeClock: e.target.value }, () => {
this.getDataPanicButton(); this.getDataPanicButton();
}); });
} }
handleExportExcel = () => { handleExportExcel = () => {
const dataExcel = this.state.dataTable || []; const dataExcel = this.state.dataTable || [];
const fileName = "Panic Button.xlsx"; const fileName = "Panic Button.xlsx";
let dataExport = []; let dataExport = [];
dataExcel.map((val) => { dataExcel.map((val) => {
let row = { let row = {
"Tanggal": moment(val.created_date).format("DD-MM-YYYY HH:MM:SS"), "Tanggal": moment(val.created_at).format("DD-MM-YYYY HH:MM:SS"),
"Nama Karyawan": val.join_first_name, "Nama Karyawan": val.join_first_name,
"Latitude": val.lat, "Latitude": val.lat,
"Longitude": val.lon, "Longitude": val.lon,
"Status": val.status_response "Status": val.status_response
} }
dataExport.push(row); dataExport.push(row);
}) })
const ws = XLSX.utils.json_to_sheet(dataExport); const ws = XLSX.utils.json_to_sheet(dataExport);
const wb = XLSX.utils.book_new(); const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, 'Panic Button'); XLSX.utils.book_append_sheet(wb, ws, 'Panic Button');
XLSX.writeFile(wb, fileName); XLSX.writeFile(wb, fileName);
} }
updateStatusResponse = async (data) => { updateStatusResponse = async (data) => {
let url = PANIC_BUTTON_UPDATE(data.id); let url = PANIC_BUTTON_UPDATE(data.id);
let payload = { let payload = {
"user_id": data.user_id, "user_id": data.user_id,
"lat": data.lat, "lat": data.lat,
"lon": data.lon, "lon": data.lon,
"status_response": data.status_response, "status_response": data.status_response,
"description": "update data panic" "description": "update data panic"
} }
const result = await axios const result = await axios
.put(url, payload, config) .put(url, payload, config)
.then(res => res) .then(res => res)
.catch((error) => error.response); .catch((error) => error.response);
if (result && result.data) { if (result && result.data) {
if (result.data.code == 200) { if (result.data.code == 200) {
this.getDataPanicButton() this.getDataPanicButton()
NotificationManager.success('Berhasil update status response!!', 'Success!'); NotificationManager.success('Berhasil update status response!!', 'Success!');
} else { } else {
NotificationManager.error('Gagal update status response!!', 'Failed'); NotificationManager.error('Gagal update status response!!', 'Failed');
} }
} }
} }
renderTable = () => { renderTable = () => {
const t = this.props; const t = this.props;
const dataTable2 = this.state.dataTable || []; const dataTable2 = this.state.dataTable || [];
return ( return (
<tbody> <tbody>
{dataTable2.length !== 0 ? dataTable2.map((n) => { {dataTable2.length !== 0 ? dataTable2.map((n) => {
return ( return (
<tr key={n.id}> <tr key={n.id}>
<td> <td>
<Tooltip title={this.props.t('edit')}> <Tooltip title={this.props.t('edit')}>
<i id="TooltipEdit" className="fa fa-edit" style={{ color: 'green', cursor: "pointer", marginRight: 15 }} onClick={() => this.handleEdit(n)}></i> <i id="TooltipEdit" className="fa fa-edit" style={{ color: 'green', cursor: "pointer", marginRight: 15 }} onClick={() => this.handleEdit(n)}></i>
</Tooltip> </Tooltip>
<Tooltip title={this.props.t('map')}> <Tooltip title={this.props.t('map')}>
<i id="tooltipMap" className="fa fa-map" style={{ color: 'black', cursor: "pointer" }} onClick={() => this.handleMap(n)}></i> <i id="tooltipMap" className="fa fa-map" style={{ color: 'black', cursor: "pointer" }} onClick={() => this.handleMap(n)}></i>
</Tooltip> </Tooltip>
</td> </td>
<td>{n.created_date !== null ? moment(n.created_at).format("DD-MM-YYYY HH:mm:ss") : "-"}</td> <td>{n.created_at !== null ? moment(n.created_at).format("DD-MM-YYYY HH:mm:ss") : "-"}</td>
<td>{n.join_first_name !== null ? n.join_first_name : "-"}</td> <td>{n.join_first_name !== null ? n.join_first_name : "-"}</td>
<td>{n.status_response !== null ? n.status_response : "-"}</td> <td>{n.status_response !== null ? n.status_response : "-"}</td>
</tr> </tr>
) )
}) : <tr> }) : <tr>
<td colSpan="4" align="center">No Data Available</td> <td colSpan="4" align="center">No Data Available</td>
</tr> </tr>
} }
</tbody> </tbody>
) )
} }
handleChangeDay = (e) => { handleChangeDay = (e) => {
const val = e.target.value; const val = e.target.value;
this.setState({ currentDay: val }); this.setState({ currentDay: val });
if (val === "today") { if (val === "today") {
this.setState({ this.setState({
startDate: moment(moment().format("YYYY-M-D")), startDate: moment(moment().format("YYYY-M-D")),
endDate: moment(moment().format("YYYY-M-D")), endDate: moment(moment().format("YYYY-M-D")),
currentPage: 1 currentPage: 1
}) })
} else if (val === "3 day") { } else if (val === "3 day") {
this.setState({ this.setState({
startDate: moment(moment().subtract(3, "days").format("YYYY-M-D")), startDate: moment(moment().subtract(3, "days").format("YYYY-M-D")),
endDate: moment(moment().format("YYYY-M-D")), endDate: moment(moment().format("YYYY-M-D")),
currentPage: 1 currentPage: 1
}) })
} else if (val === "7 day") { } else if (val === "7 day") {
this.setState({ this.setState({
startDate: moment(moment().subtract(7, "days").format("YYYY-M-D")), startDate: moment(moment().subtract(7, "days").format("YYYY-M-D")),
endDate: moment(moment().format("YYYY-M-D")), endDate: moment(moment().format("YYYY-M-D")),
currentPage: 1 currentPage: 1
}) })
} else { } else {
this.setState({ this.setState({
startDate: moment(moment().format("YYYY-M-D")), startDate: moment(moment().format("YYYY-M-D")),
endDate: moment(moment().format("YYYY-M-D")), endDate: moment(moment().format("YYYY-M-D")),
currentPage: 1 currentPage: 1
}) })
} }
} }
render() { render() {
const column = [ const column = [
{ name: this.props.t('action') }, { name: this.props.t('action') },
{ name: this.props.t('date') }, { name: this.props.t('date') },
{ name: this.props.t('nameHR') }, { name: this.props.t('nameHR') },
{ name: this.props.t('statusResponse') }, { name: this.props.t('statusResponse') },
] ]
const t = this.props; const t = this.props;
const { tooltipExport, dataTable, openDialogEdit, openDialog, currentPage, rowsPerPage, totalPage, search, tooltipMap, tooltipDelete } = this.state const { tooltipExport, dataTable, openDialogEdit, openDialog, currentPage, rowsPerPage, totalPage, search, tooltipMap, tooltipDelete } = this.state
return ( return (
<div> <div>
<NotificationContainer /> <NotificationContainer />
<DialogForm <DialogForm
openDialog={openDialog} openDialog={openDialog}
closeDialog={this.handleCloseDialog} closeDialog={this.handleCloseDialog}
toggleDialog={() => this.toggleMapDialog} toggleDialog={() => this.toggleMapDialog}
dataMap={this.state.dataMap} dataMap={this.state.dataMap}
showDialog={showDialog => this.showChildDialog = showDialog} showDialog={showDialog => this.showChildDialog = showDialog}
/> />
<DialogEdit <DialogEdit
openDialog={openDialogEdit} openDialog={openDialogEdit}
closeDialog={this.handleCloseDialogEdit} closeDialog={this.handleCloseDialogEdit}
toggleDialog={() => this.toggleEditDialog} toggleDialog={() => this.toggleEditDialog}
dataEdit={this.state.dataEdit} dataEdit={this.state.dataEdit}
showDialog={showDialog => this.showDialogEdit = showDialog} showDialog={showDialog => this.showDialogEdit = showDialog}
/> />
<Card> <Card>
<CardHeader style={{ display: "flex", justifyContent: "space-between" }}> <CardHeader style={{ display: "flex", justifyContent: "space-between" }}>
<h4>{this.props.t('panicButton')}</h4> <h4>{this.props.t('panicButton')}</h4>
<div> <div>
<Tooltip title={this.props.t('exportExcel')}> <Tooltip title={this.props.t('exportExcel')}>
<Button id="TooltipExport" color="primary" onClick={() => this.handleExportExcel()}><i className="fa fa-print"></i></Button> <Button id="TooltipExport" color="primary" onClick={() => this.handleExportExcel()}><i className="fa fa-print"></i></Button>
</Tooltip> </Tooltip>
</div> </div>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<div style={{ display: "flex", justifyContent: "space-between", marginBottom: "25px" }}> <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "25px" }}>
<div style={{ width: "100%", display: "inline-flex", alignItems: "center" }}> <div style={{ width: "100%", display: "inline-flex", alignItems: "center" }}>
<div style={{ width: "50%", marginRight: "10px", maxWidth: "200px" }}> <div style={{ width: "50%", marginRight: "10px", maxWidth: "200px" }}>
<Input type="select" onChange={(e) => this.handleChangeDay(e)} defaultValue={this.state.currentDay}> <Input type="select" onChange={(e) => this.handleChangeDay(e)} defaultValue={this.state.currentDay}>
<option value="today">{this.props.t('today')}</option> <option value="today">{this.props.t('today')}</option>
<option value="3 day">{this.props.t('3days')}</option> <option value="3 day">{this.props.t('3days')}</option>
<option value="7 day">{this.props.t('7days')}</option> <option value="7 day">{this.props.t('7days')}</option>
</Input> </Input>
</div> </div>
<div style={{ width: "50%" }}> <div style={{ width: "50%" }}>
<RangePicker format={"DD-MM-YYYY"} size="default" allowClear={false} value={[this.state.startDate, this.state.endDate]} onChange={this.handleDatePicker} />{' '} <RangePicker format={"DD-MM-YYYY"} size="default" allowClear={false} value={[this.state.startDate, this.state.endDate]} onChange={this.handleDatePicker} />{' '}
<Button color="primary" onClick={() => this.getDataPanicButton()}>{this.props.t('search')}</Button> <Button color="primary" onClick={() => this.getDataPanicButton()}>{this.props.t('search')}</Button>
</div> </div>
</div> </div>
</div> </div>
<Table responsive striped hover> <Table responsive striped hover>
<thead> <thead>
<tr> <tr>
{column.map((i, index) => { {column.map((i, index) => {
return ( return (
<th key={index} scope="row">{i.name}</th> <th key={index} scope="row">{i.name}</th>
) )
})} })}
</tr> </tr>
</thead> </thead>
{this.renderTable()} {this.renderTable()}
</Table> </Table>
<Pagination <Pagination
showSizeChanger showSizeChanger
onShowSizeChange={this.onShowSizeChange} onShowSizeChange={this.onShowSizeChange}
onChange={this.onPagination} onChange={this.onPagination}
defaultCurrent={currentPage} defaultCurrent={currentPage}
pageSize={rowsPerPage} pageSize={rowsPerPage}
total={parseInt(totalPage)} total={parseInt(totalPage)}
pageSizeOptions={["10", "15", "20", "25", "30", "35", "40"]} pageSizeOptions={["10", "15", "20", "25", "30", "35", "40"]}
/> />
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
) )
} }
} }
export default withTranslation()(index); export default withTranslation()(index);

Write Preview
Loading…
Cancel
Save