Skip to content

T
Tia-dev
Commit e59b686a authored by Riri Novita's avatar Riri Novita
Browse files
Options

Merge branch 'riri' into 'master' 

oiii

See merge request !747
parents f19e40c0 f9ca39fb
Hide whitespace changes
Inline Side-by-side
Showing with 465 additions and 253 deletions
src/container/MonthlyReport/OperatingIndicatorMR.js
View file @ e59b686a
import { createMuiTheme, FormControlLabel, Input, MuiThemeProvider, Paper, TableCell, Tooltip, Typography, withStyles } from '@material-ui/core'; import { createMuiTheme, FormControlLabel, Input, MuiThemeProvider, Paper, Snackbar, TableCell, Tooltip, Typography, withStyles } from '@material-ui/core';
import MUIDataTable from 'mui-datatables'; import MUIDataTable from 'mui-datatables';
import React, { Component } from 'react'; import React, { Component } from 'react';
import NumberFormat from 'react-number-format'; import NumberFormat from 'react-number-format';
...@@ -8,6 +8,9 @@ import api from '../../api'; ...@@ -8,6 +8,9 @@ import api from '../../api';
import * as R from 'ramda'; import * as R from 'ramda';
import Images from '../../assets/Images'; import Images from '../../assets/Images';
import Constant from '../../library/Constant'; import Constant from '../../library/Constant';
import { ExcelRenderer } from 'react-excel-renderer';
import UploadFile from "../../library/Upload";
import { Alert } from '@material-ui/lab';
const LightTooltip = withStyles((theme) => ({ const LightTooltip = withStyles((theme) => ({
tooltip: { tooltip: {
...@@ -42,6 +45,7 @@ export default class OperatingIndicatorMR extends Component { ...@@ -42,6 +45,7 @@ export default class OperatingIndicatorMR extends Component {
this.state = { this.state = {
dataTable: [], dataTable: [],
loading: true, loading: true,
visibleOI: true,
minValue: 0, minValue: 0,
maxValue: 0 maxValue: 0
} }
...@@ -86,21 +90,17 @@ export default class OperatingIndicatorMR extends Component { ...@@ -86,21 +90,17 @@ export default class OperatingIndicatorMR extends Component {
} }
getItemHierarki() { getItemHierarki() {
let payload = {
"report_id": this.props.report_id,
"revision": Number(this.props.revision),
"periode": this.props.periode,
"company_id": this.props.company.company_id,
"monthly_report_id": this.props.monthlyReportId,
"months": this.props.month.month_id,
// "operating_indicator_id": this.props.data.operatingIndID, let payload = {
// "report_id": this.props.data.report_id, "operating_indicator_id": this.props.data.operatingIndID,
// "company_id": this.props.data.company.company_id, "report_id": this.props.data.report_id,
// "periode": this.props.data.periode "company_id": this.props.data.company.company_id,
"periode": this.props.data.periode,
"months": this.props.data.report_id === 22 ? 1 : 23 ? 2 : 24 ? 3 : 25 ? 4 : 27 ? 5 : 28 ? 6 : 29 ? 7 : 31 ? 8 : 32 ? 9 : 33 ? 10 : 35 ? 11 : 36 ? 12 : null
} }
api.create().getHierarkiMontlyReportOI(payload).then(response => { api.create().getHierarkiMontlyReportOI(payload).then(response => {
console.log(response.data); console.log(response);
// console.log(JSON.stringify(response));
let dataTable = [] let dataTable = []
if (response.data) { if (response.data) {
let res = response.data.data let res = response.data.data
...@@ -114,17 +114,18 @@ export default class OperatingIndicatorMR extends Component { ...@@ -114,17 +114,18 @@ export default class OperatingIndicatorMR extends Component {
item.formula, item.formula,
item.level, item.level,
item.description, item.description,
item.operating_indicator.uom, item.uom === "" ? null : item.uom,
item.operating_indicator.rolling_outlook === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.rolling_outlook, item.monthly_report.rolling_outlook === null ? "0.0" : item.monthly_report.rolling_outlook === "" ? "0.0" : item.monthly_report.rolling_outlook,
item.operating_indicator.master_budget === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.master_budget, item.monthly_report.master_budget === null ? "0.0" : item.monthly_report.rolling_outlook === "" ? "0.0" : item.monthly_report.master_budget,
item.operating_indicator.rolling_budget === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.rolling_budget, item.monthly_report.rolling_budget === null ? "0.0" : item.monthly_report.rolling_outlook === "" ? "0.0" : item.monthly_report.rolling_budget,
item.operating_indicator.actual === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.actual, item.monthly_report.actual === null ? "0.0" : item.monthly_report.rolling_outlook === "" ? "0.0" : item.monthly_report.actual,
item.operating_indicator.amount_act_vs_mb === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.amount_act_vs_mb, item.monthly_report.amount_act_vs_mb === null ? "0.0" : item.monthly_report.rolling_outlook === "" ? "0.0" : item.monthly_report.amount_act_vs_mb,
item.operating_indicator.percent_act_vs_mb === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.percent_act_vs_mb, item.monthly_report.percent_act_vs_mb === null ? "0.0" : item.monthly_report.rolling_outlook === "" ? "0.0" : item.monthly_report.percent_act_vs_mb,
item.operating_indicator.amount_act_vs_rb === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.amount_act_vs_rb, item.monthly_report.amount_act_vs_rb === null ? "0.0" : item.monthly_report.rolling_outlook === "" ? "0.0" : item.monthly_report.amount_act_vs_rb,
item.operating_indicator.percent_act_vs_rb === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.percent_act_vs_rb, item.monthly_report.percent_act_vs_rb === null ? "0.0" : item.monthly_report.rolling_outlook === "" ? "0.0" : item.monthly_report.percent_act_vs_rb,
item.operating_indicator.mtd_vs_mb === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.mtd_vs_mb, item.monthly_report.mtd_vs_mb === null ? "0.0" : item.monthly_report.rolling_outlook === "" ? "0.0" : item.monthly_report.mtd_vs_mb,
item.operating_indicator.mtd_vs_rb === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.mtd_vs_rb, item.monthly_report.mtd_vs_rb === null ? "0.0" : item.monthly_report.rolling_outlook === "" ? "0.0" : item.monthly_report.mtd_vs_rb,
item.order,
]) ])
} }
if (item.children !== null) { if (item.children !== null) {
...@@ -143,17 +144,18 @@ export default class OperatingIndicatorMR extends Component { ...@@ -143,17 +144,18 @@ export default class OperatingIndicatorMR extends Component {
item.formula, item.formula,
item.level, item.level,
item.description, item.description,
item.operating_indicator.uom, item.uom === "" ? null : item.uom,
item.operating_indicator.rolling_outlook === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.rolling_outlook, item.monthly_report.rolling_outlook === null ? "0.0" : item.monthly_report.rolling_outlook === "" ? "0.0" : item.monthly_report.rolling_outlook,
item.operating_indicator.master_budget === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.master_budget, item.monthly_report.master_budget === null ? "0.0" : item.monthly_report.rolling_outlook === "" ? "0.0" : item.monthly_report.master_budget,
item.operating_indicator.rolling_budget === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.rolling_budget, item.monthly_report.rolling_budget === null ? "0.0" : item.monthly_report.rolling_outlook === "" ? "0.0" : item.monthly_report.rolling_budget,
item.operating_indicator.actual === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.actual, item.monthly_report.actual === null ? "0.0" : item.monthly_report.rolling_outlook === "" ? "0.0" : item.monthly_report.actual,
item.operating_indicator.amount_act_vs_mb === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.amount_act_vs_mb, item.monthly_report.amount_act_vs_mb === null ? "0.0" : item.monthly_report.rolling_outlook === "" ? "0.0" : item.monthly_report.amount_act_vs_mb,
item.operating_indicator.percent_act_vs_mb === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.percent_act_vs_mb, item.monthly_report.percent_act_vs_mb === null ? "0.0" : item.monthly_report.rolling_outlook === "" ? "0.0" : item.monthly_report.percent_act_vs_mb,
item.operating_indicator.amount_act_vs_rb === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.amount_act_vs_rb, item.monthly_report.amount_act_vs_rb === null ? "0.0" : item.monthly_report.rolling_outlook === "" ? "0.0" : item.monthly_report.amount_act_vs_rb,
item.operating_indicator.percent_act_vs_rb === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.percent_act_vs_rb, item.monthly_report.percent_act_vs_rb === null ? "0.0" : item.monthly_report.rolling_outlook === "" ? "0.0" : item.monthly_report.percent_act_vs_rb,
item.operating_indicator.mtd_vs_mb === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.mtd_vs_mb, item.monthly_report.mtd_vs_mb === null ? "0.0" : item.monthly_report.rolling_outlook === "" ? "0.0" : item.monthly_report.mtd_vs_mb,
item.operating_indicator.mtd_vs_rb === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.mtd_vs_rb, item.monthly_report.mtd_vs_rb === null ? "0.0" : item.monthly_report.rolling_outlook === "" ? "0.0" : item.monthly_report.mtd_vs_rb,
item.order,
]) ])
if (item.children !== null) { if (item.children !== null) {
if (item.children.length > 0) { if (item.children.length > 0) {
...@@ -171,10 +173,10 @@ export default class OperatingIndicatorMR extends Component { ...@@ -171,10 +173,10 @@ export default class OperatingIndicatorMR extends Component {
downloadTemplate = async () => { downloadTemplate = async () => {
let res = await fetch( let res = await fetch(
`https://tia.eksad.com/tia-reporting-dev/public/transaction/monthly_report_oi/download_template?report_id=${this.props.report_id}&&company_id=${this.props.company.company_id}&&year=${this.props.periode}` `https://tia.eksad.com/tia-reporting-dev/public/transaction/monthly_report_oi/download_template?report_id=${this.props.data.report_id}&&company_id=${this.props.data.company.company_id}&&year=${this.props.data.periode}`
) )
res = await res.blob() res = await res.blob()
// console.log(res) // // console.log(res)
if (res.size > 0) { if (res.size > 0) {
let url = window.URL.createObjectURL(res); let url = window.URL.createObjectURL(res);
let a = document.createElement('a'); let a = document.createElement('a');
...@@ -185,10 +187,10 @@ export default class OperatingIndicatorMR extends Component { ...@@ -185,10 +187,10 @@ export default class OperatingIndicatorMR extends Component {
} }
async downloadAllData() { async downloadAllData() {
let url = `https://tia.eksad.com/tia-reporting-dev/public/transaction/monthly_report_oi/export_monthly_report?monthly_report_id=${this.props.monthlyReportId}&&report_id=${this.props.report_id}&&company_id=${this.props.company.company_id}&&year=${this.props.periode}&&revision=${this.props.revision}&&months=${this.props.month.month_id}` let url = `https://tia.eksad.com/tia-reporting-dev/public/transaction/monthly_report_oi/export_monthly_report?operating_indicator_id=${this.props.data.operatingIndID == null ? "" : this.props.data.operatingIndID}&&report_id=${this.props.data.report_id}&&company_id=${this.props.data.company.company_id}&&year=${this.props.data.periode}&&months=${this.props.data.report_id === 22 ? 1 : 23 ? 2 : 24 ? 3 : 25 ? 4 : 27 ? 5 : 28 ? 6 : 29 ? 7 : 31 ? 8 : 32 ? 9 : 33 ? 10 : 35 ? 11 : 36 ? 12 : null}`
console.log(url); console.log(url);
let res = await fetch( let res = await fetch(
`https://tia.eksad.com/tia-reporting-dev/public/transaction/monthly_report_oi/export_monthly_report?monthly_report_id=${this.props.monthlyReportId === null ? "" : this.props.monthlyReportId}&&report_id=${this.props.report_id}&&company_id=${this.props.company.company_id}&&year=${this.props.periode}&&revision=${this.props.revision}&&months=${this.props.month.month_id}` `https://tia.eksad.com/tia-reporting-dev/public/transaction/monthly_report_oi/export_monthly_report?operating_indicator_id=${this.props.data.operatingIndID === null ? "" : this.props.data.operatingIndID}&&report_id=${this.props.data.report_id}&&company_id=${this.props.data.company.company_id}&&year=${this.props.data.periode}&&months=${this.props.data.report_id === 22 ? 1 : 23 ? 2 : 24 ? 3 : 25 ? 4 : 27 ? 5 : 28 ? 6 : 29 ? 7 : 31 ? 8 : 32 ? 9 : 33 ? 10 : 35 ? 11 : 36 ? 12 : null}`
) )
res = await res.blob() res = await res.blob()
this.setState({ loading: false }) this.setState({ loading: false })
...@@ -201,8 +203,7 @@ export default class OperatingIndicatorMR extends Component { ...@@ -201,8 +203,7 @@ export default class OperatingIndicatorMR extends Component {
} }
} }
backToMonthlyReport(type) { createData(type) {
// console.log(this.state.dataTable);
let data = [] let data = []
this.state.dataTable.map(i => { this.state.dataTable.map(i => {
data.push({ data.push({
...@@ -221,31 +222,19 @@ export default class OperatingIndicatorMR extends Component { ...@@ -221,31 +222,19 @@ export default class OperatingIndicatorMR extends Component {
}) })
}) })
let payload = { let payload = {
"monthly_report_id": this.props.submissionID, "operating_indicator_id": this.props.data.operatingIndID,
"company_id": this.props.company.company_id, "report_id": this.props.data.report_id,
"periode": this.props.periode, "company_id": this.props.data.company.company_id,
"report_id": this.props.report_id, "periode": this.props.data.periode,
"status": type, "status": type,
"months": this.props.month.month_id, "months": this.props.data.report_id === 22 ? 1 : 23 ? 2 : 24 ? 3 : 25 ? 4 : 27 ? 5 : 28 ? 6 : 29 ? 7 : 31 ? 8 : 32 ? 9 : 33 ? 10 : 35 ? 11 : 36 ? 12 : null,
"operating_indicator": data "monthly_report": data
} }
api.create('UPLOAD').createMonthlyReportOI(payload).then(response => { console.log(payload);
console.log(response); // // console.log('=========================')
if (response.data) { // // console.log(JSON.stringify(payload))
if (response.data.status === "success") { this.props.saveMonthlyOI(payload)
this.props.saveToMonthlyReport() this.props.onClickClose()
} else {
this.setState({ loading: false }, () => {
this.props.saveToMonthlyReport()
})
}
} else {
this.setState({ loading: false }, () => {
this.getSubmission()
document.body.style.overflow = 'unset';
})
}
})
} }
render() { render() {
...@@ -285,10 +274,10 @@ export default class OperatingIndicatorMR extends Component { ...@@ -285,10 +274,10 @@ export default class OperatingIndicatorMR extends Component {
const handleVariance = (tableMeta, dex, type) => { const handleVariance = (tableMeta, dex, type) => {
let total = 0 let total = 0
if (dex === 1) { if (dex === 1) {
total = Number(tableMeta.rowData[10]) - Number(tableMeta.rowData[8]) total = Number(tableMeta.rowData[10]) - Number(tableMeta.rowData[8]).toFixed(1)
dataTable2[tableMeta.rowIndex][tableMeta.columnIndex + type] = Number(total).toFixed(1) dataTable2[tableMeta.rowIndex][tableMeta.columnIndex + type] = Number(total).toFixed(1)
} else if (dex === 2) { } else if (dex === 2) {
total = Number(tableMeta.rowData[10]) - Number(tableMeta.rowData[9]) total = Number(tableMeta.rowData[10]) - Number(tableMeta.rowData[9]).toFixed(1)
dataTable2[tableMeta.rowIndex][tableMeta.columnIndex + type] = Number(total).toFixed(1) dataTable2[tableMeta.rowIndex][tableMeta.columnIndex + type] = Number(total).toFixed(1)
} }
return total return total
...@@ -308,6 +297,75 @@ export default class OperatingIndicatorMR extends Component { ...@@ -308,6 +297,75 @@ export default class OperatingIndicatorMR extends Component {
return total return total
} }
const handleFormula = (data, tableMeta, type) => {
let arrayFormula = tableMeta.rowData[3].match(/[a-zA-Z]+|[0-9]+|[-!$%^&*()_+|~=`{}\[\]:";'<>?,.\/]+(?:\.[0-9]+@|)/g)
let arrayJumlah = []
let tambahan = false
let opet = ""
arrayFormula.map((item, indexs) => {
if (item == 'X') {
tambahan = true
} else if (item == '-' || item == '+' || item == '/' || item == '*') {
arrayJumlah.push(item)
} else {
let index = dataTable2.findIndex((val) => val[17] == item)
if (tambahan) {
if (item == '-' || item == '+' || item == '/' || item == '*') {
opet = item
} else {
arrayJumlah.push(opet == '' ? Number(item) : Number(String(opet + String(item))))
tambahan = false
opet = ""
}
} else {
if (index != -1) {
arrayJumlah.push(dataTable2[index][tableMeta.columnIndex + type])
}
}
}
})
let array = arrayJumlah
let total = 0
let opt = ""
array.map((item, index) => {
if (item == "+") {
opt = "tambah"
} else if (item == "-") {
opt = "kurang"
} else if (item == "*") {
opt = "kali"
} else if (item == "/") {
opt = "bagi"
} else {
if (opt == "tambah") {
total = Number(total) + Number(item)
} else if (opt == "kurang") {
total = Number(total) - Number(item)
} else if (opt == "kali") {
total = Number(total) * Number(item)
// if (tableMeta.rowData[22] === 3) {
// console.log(dataTable2[tableMeta.rowIndex]);
// console.log(total);
// console.log(item);
// console.log(arrayJumlah);
// }
} else if (opt == "bagi") {
total = R.equals((Number(total) / Number(item)), NaN) ? '0' : Number(total) / Number(item)
} else {
total += Number(item)
}
}
})
let a = dataTable2[tableMeta.rowIndex][tableMeta.columnIndex + type] = Number(total)
return a
}
let columns = [ let columns = [
{ {
name: "", name: "",
...@@ -394,11 +452,11 @@ export default class OperatingIndicatorMR extends Component { ...@@ -394,11 +452,11 @@ export default class OperatingIndicatorMR extends Component {
control={ control={
<Input <Input
disableUnderline={true} disableUnderline={true}
style={{ color: "#5198ea", fontSize: 12, textAlign: 'left', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }} style={{ color: "#000", fontSize: 12, textAlign: 'left', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text" type="text"
placeholder="" placeholder=""
disabled={true} disabled={true}
defaultValue={"Ton"} defaultValue={val}
// onBlur={(event) => { // onBlur={(event) => {
// // updateValue(event.target.value) // // updateValue(event.target.value)
// handleNotes(event.target.value, tableMeta) // handleNotes(event.target.value, tableMeta)
...@@ -438,6 +496,24 @@ export default class OperatingIndicatorMR extends Component { ...@@ -438,6 +496,24 @@ export default class OperatingIndicatorMR extends Component {
value={Number(handleValue(tableMeta, 0)).toFixed(1)} value={Number(handleValue(tableMeta, 0)).toFixed(1)}
/> />
</span> : </span> :
tableMeta.rowData[0] === 6 ?
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={tableMeta.rowData[7]}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(handleFormula(val, tableMeta, 0)).toFixed(1)}
/>
}
/>
</div>
:
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<FormControlLabel <FormControlLabel
style={{ margin: 0 }} style={{ margin: 0 }}
...@@ -509,6 +585,24 @@ export default class OperatingIndicatorMR extends Component { ...@@ -509,6 +585,24 @@ export default class OperatingIndicatorMR extends Component {
/> />
</span> </span>
: :
tableMeta.rowData[0] === 6 ?
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={tableMeta.rowData[8]}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(handleFormula(val, tableMeta, 1)).toFixed(1)}
/>
}
/>
</div>
:
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<FormControlLabel <FormControlLabel
style={{ margin: 0 }} style={{ margin: 0 }}
...@@ -544,6 +638,24 @@ export default class OperatingIndicatorMR extends Component { ...@@ -544,6 +638,24 @@ export default class OperatingIndicatorMR extends Component {
/> />
</span> </span>
: :
tableMeta.rowData[0] === 6 ?
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={tableMeta.rowData[9]}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(handleFormula(val, tableMeta, 1)).toFixed(1)}
/>
}
/>
</div>
:
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<FormControlLabel <FormControlLabel
style={{ margin: 0 }} style={{ margin: 0 }}
...@@ -981,77 +1093,91 @@ export default class OperatingIndicatorMR extends Component { ...@@ -981,77 +1093,91 @@ export default class OperatingIndicatorMR extends Component {
return ( return (
<div style={{ height: this.props.height, backgroundColor: '#f8f8f8', marginBottom: 100, minHeight: 1000 }}> <div style={{ height: this.props.height, backgroundColor: '#f8f8f8', marginBottom: 100, minHeight: 1000 }}>
{this.state.loading && loadingComponent}
<div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}> <div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>Monthly Report</Typography> <Typography style={{ fontSize: '16px', color: 'white' }}>Monthly Report</Typography>
</div> </div>
<Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
<Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
{this.state.messageAlert}
</Alert>
</Snackbar>
<div style={{ flex: 1, padding: 20, width: '100%' }}> <div style={{ flex: 1, padding: 20, width: '100%' }}>
<Paper style={{ paddingTop: 10 }}> {this.state.visibleOI === true ?
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} > <Paper style={{ paddingTop: 10, paddingBottom: 20 }}>
<Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Monthly Report - Operating Indicator</Typography> <div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
</div> <Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Monthly Report - Operating Indicator</Typography>
<div style={{ padding: 20 }}>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<div>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>{this.props.company.company_name}</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Period : {this.props.periode} (rev.{this.props.revision})</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
</div>
<div style={{ width: '50%' }}>
<div style={{ justifyContent: 'flex-end', display: 'flex', flexFlow: 'wrap' }}>
<a data-tip={'Download Template'} data-for="template">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() => this.downloadTemplate()}
>
<img src={Images.template} />
</button>
</a>
<ReactTooltip border={true} id="template" place="bottom" type="light" effect="solid" />
<a data-tip={'Upload'} data-for="upload">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() => null}
>
<img src={Images.upload} />
</button>
</a>
<ReactTooltip border={true} id="upload" place="bottom" type="light" effect="solid" />
<a data-tip={'Download'} data-for="download">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() =>
this.setState({ loading: true }, () => {
setTimeout(() => {
this.downloadAllData()
}, 100);
})}
>
<img src={Images.download} />
</button>
</a>
<ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
</div>
</div>
</div> </div>
<div style={{ padding: 20 }}>
{!this.state.emptyData && <div style={{ display: 'flex', justifyContent: 'space-between' }}>
<div>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>{this.props.company.company_name}</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>
Period : {
this.props.data.report_id === 22 ? 'Jan' :
this.props.data.report_id === 23 ? 'Feb' :
this.props.data.report_id === 24 ? 'Mar' :
this.props.data.report_id === 23 ? 'Apr' :
this.props.data.report_id === 23 ? 'May' :
this.props.data.report_id === 23 ? 'Jun' :
this.props.data.report_id === 23 ? 'Jul' :
this.props.data.report_id === 23 ? 'Aug' :
this.props.data.report_id === 23 ? 'Sep' :
this.props.data.report_id === 23 ? 'Oct' :
this.props.data.report_id === 23 ? 'Nov' :
this.props.data.report_id === 23 ? 'Dec' : "" } {this.props.data.periode}
</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
</div>
<div style={{ width: '50%' }}>
<div style={{ justifyContent: 'flex-end', display: 'flex', flexFlow: 'wrap' }}>
{(this.props.permission.create || this.props.permission.edit) && this.props.isSubmit && <a data-tip={'Download Template'} data-for="template">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() => this.downloadTemplate()}
>
<img src={Images.template} />
</button>
</a>}
<ReactTooltip border={true} id="template" place="bottom" type="light" effect="solid" />
{(this.props.permission.create || this.props.permission.edit) && this.props.isSubmit && <a data-tip={'Upload'} data-for="upload">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() => this.setState({ visibleUpload: true, editable: true })}
>
<img src={Images.upload} />
</button>
</a>}
<ReactTooltip border={true} id="upload" place="bottom" type="light" effect="solid" />
<a data-tip={'Download'} data-for="download">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() => this.downloadAllData()}
>
<img src={Images.download} />
</button>
</a>
<ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
</div>
</div>
</div>}
<div style={{ marginTop: 20, width: this.props.width - (this.props.open === true ? 400 : 150) }}> <div style={{ marginTop: 20, width: this.props.width - (this.props.open === true ? 400 : 150) }}>
{!this.state.loading && ( {this.state.loading && loadingComponent}
<MuiThemeProvider theme={getMuiTheme()}> <MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable <MUIDataTable
data={dataTable2} data={dataTable2}
...@@ -1059,50 +1185,41 @@ export default class OperatingIndicatorMR extends Component { ...@@ -1059,50 +1185,41 @@ export default class OperatingIndicatorMR extends Component {
options={options} options={options}
/> />
</MuiThemeProvider> </MuiThemeProvider>
)} </div>
<Typography style={{ fontSize: '11px', color: '#4b4b4b', marginTop: 20 }}>Last Updated by : {this.state.updateBy}</Typography>
</div> </div>
{/* {this.props.isApprover === true || this.state.dataTable.length == 0 ? null : <div className="grid grid-2x">
(this.props.lastStatus === 'SUBMIT' || this.props.lastStatus === 'REVISION') && this.props.prevRevision === false && (this.props.status === 'revision' || this.props.status === 'not-yet' || this.props.status === 'draft' || this.props.status === 'submitted') ? */}
<div className="grid grid-2x" style={{ marginTop: 20 }}>
<div className="col-1"> <div className="col-1">
<button <button
className="button"
type="button" type="button"
onClick={() => this.setState({ loading: true }, () => {
setTimeout(() => {
this.props.onClickClose()
}, 100);
})}
style={{ style={{
backgroundColor: 'transparent', backgroundColor: 'transparent',
cursor: 'pointer', cursor: 'pointer',
borderColor: 'transparent', borderColor: 'transparent',
outline: 'none'
}} }}
onClick={() => {
this.props.onClickClose()
this.props.getReport()
}
}
> >
<div style={{ backgroundColor: '#019ce5', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}> <div style={{ backgroundColor: '#019ce5', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Back</Typography> <Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Back</Typography>
</div> </div>
</button> </button>
</div> </div>
<div className="col-2" style={{ display: 'flex', justifyContent: 'flex-end', maxWidth: '100%' }}> {!this.state.emptyData && (this.props.permission.create || this.props.permission.edit) && this.props.isSubmit && <div className="col-2" style={{ display: 'flex', justifyContent: 'flex-end', maxWidth: '100%' }}>
<button <button
className="button"
type="button" type="button"
style={{ onClick={() =>
backgroundColor: 'transparent', this.setState({ loading: true, editable: false }, () => {
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none',
marginRight: 20
}}
onClick={() => {
this.setState({ loading: true }, () => {
setTimeout(() => { setTimeout(() => {
this.setState({ loading: false }) this.setState({ loading: false, buttonError: false })
// this.handleValidate()
}, 100); }, 100);
}) })
}} }
style={{ marginRight: 20 }}
> >
<div style={{ backgroundColor: '#fff', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', border: 'solid 1px #354960' }}> <div style={{ backgroundColor: '#fff', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', border: 'solid 1px #354960' }}>
<Typography style={{ fontSize: '11px', color: '#354960', textAlign: 'center' }}>Calculate</Typography> <Typography style={{ fontSize: '11px', color: '#354960', textAlign: 'center' }}>Calculate</Typography>
...@@ -1111,21 +1228,19 @@ export default class OperatingIndicatorMR extends Component { ...@@ -1111,21 +1228,19 @@ export default class OperatingIndicatorMR extends Component {
<button <button
className="button" className="button"
type="button" type="button"
disabled={this.state.editable}
style={{ style={{
backgroundColor: 'transparent', backgroundColor: 'transparent',
cursor: this.state.saveDraft !== true ? 'pointer' : 'default', cursor: this.state.editable === true ? 'default' : 'pointer',
borderColor: 'transparent', borderColor: 'transparent',
outline: 'none', outline: 'none',
marginRight: 20 marginRight: 20
}} }}
onClick={() => onClick={() => this.setState({ loading: true }, () => {
this.state.saveDraft === true ? setTimeout(() => {
null : this.createData("draft")
this.state.handleTekTekTek == 1 ? null : }, 100);
this.setState({ handleTekTekTek: 1 }, () => { })}
this.backToMonthlyReport('draft')
})
}
> >
<div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}> <div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Save as Draft</Typography> <Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Save as Draft</Typography>
...@@ -1133,34 +1248,191 @@ export default class OperatingIndicatorMR extends Component { ...@@ -1133,34 +1248,191 @@ export default class OperatingIndicatorMR extends Component {
</button> </button>
<button <button
type="button" type="button"
// disabled={this.state.buttonError} disabled={this.state.editable}
onClick={() => onClick={() => this.setState({ loading: true }, () => {
this.state.buttonError ? setTimeout(() => {
this.setState({ alert: true, messageAlert: 'Data is not complete !', tipeAlert: 'warning' }) this.createData("submitted")
: }, 100);
this.state.handleTekTekTek == 1 ? null : })}
this.setState({ handleTekTekTek: 1 }, () => {
this.backToMonthlyReport('submitted')
})}
style={{ style={{
backgroundColor: 'transparent', backgroundColor: 'transparent',
cursor: this.state.buttonError === true ? 'default' : 'pointer', cursor: this.state.editable === true ? 'default' : 'pointer',
borderColor: 'transparent', borderColor: 'transparent',
outline: 'none', outline: 'none',
marginRight: 20
}} }}
> >
<div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}> <div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Save & Complete</Typography> <Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Save & Complete</Typography>
</div> </div>
</button> </button>
</div>}
</div>
</Paper>
:
<Paper style={{ paddingTop: 10, paddingBottom: 20 }}>
<div>
<div style={{ padding: 25 }}>
<div>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>{this.props.company.company_name}</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>
Period : {
this.props.data.report_id === 22 ? 'Jan' :
this.props.data.report_id === 23 ? 'Feb' :
this.props.data.report_id === 24 ? 'Mar' :
this.props.data.report_id === 23 ? 'Apr' :
this.props.data.report_id === 23 ? 'May' :
this.props.data.report_id === 23 ? 'Jun' :
this.props.data.report_id === 23 ? 'Jul' :
this.props.data.report_id === 23 ? 'Aug' :
this.props.data.report_id === 23 ? 'Sep' :
this.props.data.report_id === 23 ? 'Oct' :
this.props.data.report_id === 23 ? 'Nov' :
this.props.data.report_id === 23 ? 'Dec' : "" } {this.props.data.periode}
</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
</div>
{this.state.dataLoaded && (
<div style={{ marginTop: 20, width: this.props.width - (this.props.open === true ? 400 : 150) }}>
{this.state.loading && loadingComponent}
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={dataTable2}
columns={columns}
options={options}
/>
</MuiThemeProvider>
</div>
)}
</div>
<div className="grid grid-2x">
<div className="col-1">
<button
className="button"
type="button"
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
}}
onClick={() =>
this.setState({ loading: true, visibleOI: true }, () => {
setTimeout(() => {
this.getDataDetail()
}, 100)
})}
>
<div style={{ backgroundColor: '#019ce5', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Back</Typography>
</div>
</button>
</div>
{!this.state.emptyData && this.state.templateNull && <div className="col-2" style={{ display: 'flex', justifyContent: 'flex-end', maxWidth: '100%' }}>
<button
type="button"
onClick={() =>
this.setState({ loading: true, editable: false }, () => {
setTimeout(() => {
this.setState({ loading: false, buttonError: false })
}, 100);
})
}
style={{ marginRight: 20 }}
>
<div style={{ backgroundColor: '#fff', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', border: 'solid 1px #354960' }}>
<Typography style={{ fontSize: '11px', color: '#354960', textAlign: 'center' }}>Calculate</Typography>
</div>
</button>
<button
className="button"
type="button"
style={{
backgroundColor: 'transparent',
cursor: this.state.editable === true ? 'default' : 'pointer',
borderColor: 'transparent',
outline: 'none',
marginRight: 20
}}
disabled={this.state.editable}
onClick={() =>
this.state.editable === true ?
null : this.setState({ loading: true }, () => {
setTimeout(() => {
this.uploadOI("draft")
}, 100);
})}
>
<div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Save as Draft</Typography>
</div>
</button>
<button
type="button"
onClick={() =>
this.state.editable === true ?
null :
this.setState({ loading: true }, () => {
setTimeout(() => {
this.uploadOI("submitted")
}, 100);
})}
disabled={this.state.editable}
style={{
backgroundColor: 'transparent',
cursor: this.state.editable === true ? 'default' : 'pointer',
borderColor: 'transparent',
outline: 'none',
marginRight: 20
}}
>
<div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Save & Complete</Typography>
</div>
</button>
</div>}
</div>
</div>
</Paper>}
</div>
{this.state.visibleUpload && (
<div className="test app-popup-show">
<div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
<div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
<div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
<div className="popup-title">
<span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Upload File</span>
</div>
</div>
<div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
<button
type="button"
className="btn btn-circle btn-white"
onClick={() => this.setState({ visibleUpload: false })}
>
<img src={Images.close} />
</button>
</div> </div>
</div> </div>
{/* : null <UploadFile
} */} type={this.state.uploadStatus}
percentage={this.state.percentage}
result={this.state.result}
acceptedFiles={["xlsx"]}
onHandle={(dt) => {
this.fileHandler(dt)
this.setState({ uploadStatus: 'idle', percentage: '0' })
}}
onUpload={() => {
this.state.judul === "MONTHLY REPORT - OPERATING INDICATOR" ?
this.checkUpload() :
this.setState({ alert: true, messageAlert: "Invalid Template", tipeAlert: 'warning' })
}}
/>
</div> </div>
</Paper> </div>
</div> )}
</div> </div>
) );
} }
} }
src/container/MonthlyReport/ProfitLossMR.js
View file @ e59b686a
...@@ -698,7 +698,7 @@ export default class ProfitLossMR extends Component { ...@@ -698,7 +698,7 @@ export default class ProfitLossMR extends Component {
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<FormControlLabel <FormControlLabel
style={{ margin: 0 }} style={{ margin: 0 }}
value={tableMeta.rowData[9]} value={tableMeta.rowData[7]}
control={ control={
<NumberFormat <NumberFormat
thousandSeparator={true} thousandSeparator={true}
......
src/container/OprIndicator/OperatingIndicator.js
View file @ e59b686a
...@@ -89,46 +89,6 @@ export default class OperatingIndicator extends Component { ...@@ -89,46 +89,6 @@ export default class OperatingIndicator extends Component {
}) })
} }
// getMonth() {
// api.create().getMonthTransaction().then(response => {
// console.log(response);
// let dateNow = new Date
// let month = format(dateNow, 'MMMM')
// if (response.data) {
// if (response.data.status === "success") {
// console.log(response);
// let data = response.data.data
// let monthData = data.map((item) => {
// return {
// month_id: item.id,
// month_value: String(item.month_name).substr(0, 3)
// }
// })
// let defaultProps = {
// options: monthData,
// getOptionLabel: (option) => option.month_value,
// };
// let index = data.sort((a, b) => a - b).findIndex((val) => val.month_name == month)
// console.log(index);
// this.setState({ listMonth: defaultProps, month: index == -1 ? monthData[0] : monthData[index] }, () => {
// this.getLastPeriod()
// })
// } else {
// this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
// if (response.data.message.includes("Someone Logged In")) {
// setTimeout(() => {
// localStorage.removeItem(Constant.TOKEN)
// window.location.reload();
// }, 1000);
// }
// })
// }
// } else {
// this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
// }
// })
// }
getReportAttachment() { getReportAttachment() {
let payload = { let payload = {
"company_id": this.state.company.company_id, "company_id": this.state.company.company_id,
...@@ -295,34 +255,6 @@ export default class OperatingIndicator extends Component { ...@@ -295,34 +255,6 @@ export default class OperatingIndicator extends Component {
}) })
} }
getRevision() {
let payload = {
"company_id": this.state.company.company_id,
"periode": this.state.periode.periode
}
api.create().getRevision(payload).then(response => {
// console.log(response);
if (response.data) {
if (response.data.status === "success") {
let data = response.data.data
let revisionData = data.map((item) => {
return {
revision: item,
}
})
let defaultProps = {
options: revisionData,
getOptionLabel: (option) => option.revision,
};
this.setState({ listRevision: defaultProps, revision: revisionData[0] }, () => {
this.getReport()
this.getReportAttachment()
})
}
}
})
}
getOperatingID() { getOperatingID() {
let payload = { let payload = {
"company_id": this.state.company.company_id, "company_id": this.state.company.company_id,
...@@ -386,7 +318,8 @@ export default class OperatingIndicator extends Component { ...@@ -386,7 +318,8 @@ export default class OperatingIndicator extends Component {
visibleOperatingIndicator: false, visibleOperatingIndicator: false,
visibleDetailOpt: false, visibleDetailOpt: false,
visibleDetailMonthly: true, visibleDetailMonthly: true,
visibleDetailRolling: false visibleDetailRolling: false,
months: id === 22 ? 1 : 23 ? 2 : 24 ? 3 : 25 ? 4 : 27 ? 5 : 28 ? 6 : 29 ? 7 : 31 ? 8 : 32 ? 9 : 33 ? 10 : 35 ? 11 : 36 ? 12 : 0
}, () => console.log(this.state.dataDetail)) }, () => console.log(this.state.dataDetail))
...@@ -449,6 +382,13 @@ export default class OperatingIndicator extends Component { ...@@ -449,6 +382,13 @@ export default class OperatingIndicator extends Component {
}) })
} }
saveMonthlyOI(payload) {
api.create().createMonthlyReportOI(payload).then((response) => {
this.getReport()
this.getOperatingID()
})
}
render() { render() {
const columns = ["#", "Report Type", const columns = ["#", "Report Type",
// { // {
...@@ -671,14 +611,14 @@ export default class OperatingIndicator extends Component { ...@@ -671,14 +611,14 @@ export default class OperatingIndicator extends Component {
data={this.state.dataDetail} data={this.state.dataDetail}
height={this.props.height} height={this.props.height}
width={this.props.width} width={this.props.width}
// month={this.state.month} months={this.state.months}
company={this.state.company} company={this.state.company}
onClickClose={() => this.setState({ visibleDetailMonthly: false, visibleOperatingIndicator: true }, () => { onClickClose={() => this.setState({ visibleDetailMonthly: false, visibleOperatingIndicator: true }, () => {
this.getOperatingID() this.getOperatingID()
this.forceUpdate() this.forceUpdate()
})} })}
getReport={() => this.getOperatingID()} getReport={() => this.getOperatingID()}
saveOperatingInd={this.saveOperatingInd.bind(this)} saveMonthlyOI={this.saveMonthlyOI.bind(this)}
isSubmit={this.state.statusDetail == 'closed'? false : this.state.isSubmit} isSubmit={this.state.statusDetail == 'closed'? false : this.state.isSubmit}
permission={{ create: this.state.buttonCreate, edit: this.state.buttonEdit, delete: this.state.buttonDelete }} permission={{ create: this.state.buttonCreate, edit: this.state.buttonEdit, delete: this.state.buttonDelete }}
/> />
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment