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
Split 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 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 (
<tbody>
{dataTable2.length !== 0 ? dataTable2.map((n) => {
return (
<tr key={n.id}>
<td>
<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>
</Tooltip>
<Tooltip title={this.props.t('map')}>
<i id="tooltipMap" className="fa fa-map" style={{ color: 'black', cursor: "pointer" }} onClick={() => this.handleMap(n)}></i>
</Tooltip>
</td>
<td>{n.created_date !== 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.status_response !== null ? n.status_response : "-"}</td>
</tr>
)
}) : <tr>
<td colSpan="4" align="center">No Data Available</td>
</tr>
}
</tbody>
)
}
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 (
<div>
<NotificationContainer />
<DialogForm
openDialog={openDialog}
closeDialog={this.handleCloseDialog}
toggleDialog={() => this.toggleMapDialog}
dataMap={this.state.dataMap}
showDialog={showDialog => this.showChildDialog = showDialog}
/>
<DialogEdit
openDialog={openDialogEdit}
closeDialog={this.handleCloseDialogEdit}
toggleDialog={() => this.toggleEditDialog}
dataEdit={this.state.dataEdit}
showDialog={showDialog => this.showDialogEdit = showDialog}
/>
<Card>
<CardHeader style={{ display: "flex", justifyContent: "space-between" }}>
<h4>{this.props.t('panicButton')}</h4>
<div>
<Tooltip title={this.props.t('exportExcel')}>
<Button id="TooltipExport" color="primary" onClick={() => this.handleExportExcel()}><i className="fa fa-print"></i></Button>
</Tooltip>
</div>
</CardHeader>
<CardBody>
<div style={{ display: "flex", justifyContent: "space-between", marginBottom: "25px" }}>
<div style={{ width: "100%", display: "inline-flex", alignItems: "center" }}>
<div style={{ width: "50%", marginRight: "10px", maxWidth: "200px" }}>
<Input type="select" onChange={(e) => this.handleChangeDay(e)} defaultValue={this.state.currentDay}>
<option value="today">{this.props.t('today')}</option>
<option value="3 day">{this.props.t('3days')}</option>
<option value="7 day">{this.props.t('7days')}</option>
</Input>
</div>
<div style={{ width: "50%" }}>
<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>
</div>
</div>
</div>
<Table responsive striped hover>
<thead>
<tr>
{column.map((i, index) => {
return (
<th key={index} scope="row">{i.name}</th>
)
})}
</tr>
</thead>
{this.renderTable()}
</Table>
<Pagination
showSizeChanger
onShowSizeChange={this.onShowSizeChange}
onChange={this.onPagination}
defaultCurrent={currentPage}
pageSize={rowsPerPage}
total={parseInt(totalPage)}
pageSizeOptions={["10", "15", "20", "25", "30", "35", "40"]}
/>
</CardBody>
</Card>
</div>
)
}
}
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 (
<tbody>
{dataTable2.length !== 0 ? dataTable2.map((n) => {
return (
<tr key={n.id}>
<td>
<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>
</Tooltip>
<Tooltip title={this.props.t('map')}>
<i id="tooltipMap" className="fa fa-map" style={{ color: 'black', cursor: "pointer" }} onClick={() => this.handleMap(n)}></i>
</Tooltip>
</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.status_response !== null ? n.status_response : "-"}</td>
</tr>
)
}) : <tr>
<td colSpan="4" align="center">No Data Available</td>
</tr>
}
</tbody>
)
}
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 (
<div>
<NotificationContainer />
<DialogForm
openDialog={openDialog}
closeDialog={this.handleCloseDialog}
toggleDialog={() => this.toggleMapDialog}
dataMap={this.state.dataMap}
showDialog={showDialog => this.showChildDialog = showDialog}
/>
<DialogEdit
openDialog={openDialogEdit}
closeDialog={this.handleCloseDialogEdit}
toggleDialog={() => this.toggleEditDialog}
dataEdit={this.state.dataEdit}
showDialog={showDialog => this.showDialogEdit = showDialog}
/>
<Card>
<CardHeader style={{ display: "flex", justifyContent: "space-between" }}>
<h4>{this.props.t('panicButton')}</h4>
<div>
<Tooltip title={this.props.t('exportExcel')}>
<Button id="TooltipExport" color="primary" onClick={() => this.handleExportExcel()}><i className="fa fa-print"></i></Button>
</Tooltip>
</div>
</CardHeader>
<CardBody>
<div style={{ display: "flex", justifyContent: "space-between", marginBottom: "25px" }}>
<div style={{ width: "100%", display: "inline-flex", alignItems: "center" }}>
<div style={{ width: "50%", marginRight: "10px", maxWidth: "200px" }}>
<Input type="select" onChange={(e) => this.handleChangeDay(e)} defaultValue={this.state.currentDay}>
<option value="today">{this.props.t('today')}</option>
<option value="3 day">{this.props.t('3days')}</option>
<option value="7 day">{this.props.t('7days')}</option>
</Input>
</div>
<div style={{ width: "50%" }}>
<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>
</div>
</div>
</div>
<Table responsive striped hover>
<thead>
<tr>
{column.map((i, index) => {
return (
<th key={index} scope="row">{i.name}</th>
)
})}
</tr>
</thead>
{this.renderTable()}
</Table>
<Pagination
showSizeChanger
onShowSizeChange={this.onShowSizeChange}
onChange={this.onPagination}
defaultCurrent={currentPage}
pageSize={rowsPerPage}
total={parseInt(totalPage)}
pageSizeOptions={["10", "15", "20", "25", "30", "35", "40"]}
/>
</CardBody>
</Card>
</div>
)
}
}
export default withTranslation()(index);

Write Preview
Loading…
Cancel
Save