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
Show 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 React, { Component } from 'react';
import NumberFormat from 'react-number-format';
......@@ -8,6 +8,9 @@ import api from '../../api';
import * as R from 'ramda';
import Images from '../../assets/Images';
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) => ({
tooltip: {
......@@ -42,6 +45,7 @@ export default class OperatingIndicatorMR extends Component {
this.state = {
dataTable: [],
loading: true,
visibleOI: true,
minValue: 0,
maxValue: 0
}
......@@ -86,21 +90,17 @@ export default class OperatingIndicatorMR extends Component {
}
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,
// "report_id": this.props.data.report_id,
// "company_id": this.props.data.company.company_id,
// "periode": this.props.data.periode
let payload = {
"operating_indicator_id": this.props.data.operatingIndID,
"report_id": this.props.data.report_id,
"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 => {
console.log(response.data);
console.log(response);
// console.log(JSON.stringify(response));
let dataTable = []
if (response.data) {
let res = response.data.data
......@@ -114,17 +114,18 @@ export default class OperatingIndicatorMR extends Component {
item.formula,
item.level,
item.description,
item.operating_indicator.uom,
item.operating_indicator.rolling_outlook === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.rolling_outlook,
item.operating_indicator.master_budget === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.master_budget,
item.operating_indicator.rolling_budget === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.rolling_budget,
item.operating_indicator.actual === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.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.operating_indicator.percent_act_vs_mb === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.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.operating_indicator.percent_act_vs_rb === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.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.operating_indicator.mtd_vs_rb === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.mtd_vs_rb,
item.uom === "" ? null : item.uom,
item.monthly_report.rolling_outlook === null ? "0.0" : item.monthly_report.rolling_outlook === "" ? "0.0" : item.monthly_report.rolling_outlook,
item.monthly_report.master_budget === null ? "0.0" : item.monthly_report.rolling_outlook === "" ? "0.0" : item.monthly_report.master_budget,
item.monthly_report.rolling_budget === null ? "0.0" : item.monthly_report.rolling_outlook === "" ? "0.0" : item.monthly_report.rolling_budget,
item.monthly_report.actual === null ? "0.0" : item.monthly_report.rolling_outlook === "" ? "0.0" : item.monthly_report.actual,
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.monthly_report.percent_act_vs_mb === null ? "0.0" : item.monthly_report.rolling_outlook === "" ? "0.0" : item.monthly_report.percent_act_vs_mb,
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.monthly_report.percent_act_vs_rb === null ? "0.0" : item.monthly_report.rolling_outlook === "" ? "0.0" : item.monthly_report.percent_act_vs_rb,
item.monthly_report.mtd_vs_mb === null ? "0.0" : item.monthly_report.rolling_outlook === "" ? "0.0" : item.monthly_report.mtd_vs_mb,
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) {
......@@ -143,17 +144,18 @@ export default class OperatingIndicatorMR extends Component {
item.formula,
item.level,
item.description,
item.operating_indicator.uom,
item.operating_indicator.rolling_outlook === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.rolling_outlook,
item.operating_indicator.master_budget === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.master_budget,
item.operating_indicator.rolling_budget === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.rolling_budget,
item.operating_indicator.actual === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.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.operating_indicator.percent_act_vs_mb === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.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.operating_indicator.percent_act_vs_rb === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.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.operating_indicator.mtd_vs_rb === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.mtd_vs_rb,
item.uom === "" ? null : item.uom,
item.monthly_report.rolling_outlook === null ? "0.0" : item.monthly_report.rolling_outlook === "" ? "0.0" : item.monthly_report.rolling_outlook,
item.monthly_report.master_budget === null ? "0.0" : item.monthly_report.rolling_outlook === "" ? "0.0" : item.monthly_report.master_budget,
item.monthly_report.rolling_budget === null ? "0.0" : item.monthly_report.rolling_outlook === "" ? "0.0" : item.monthly_report.rolling_budget,
item.monthly_report.actual === null ? "0.0" : item.monthly_report.rolling_outlook === "" ? "0.0" : item.monthly_report.actual,
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.monthly_report.percent_act_vs_mb === null ? "0.0" : item.monthly_report.rolling_outlook === "" ? "0.0" : item.monthly_report.percent_act_vs_mb,
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.monthly_report.percent_act_vs_rb === null ? "0.0" : item.monthly_report.rolling_outlook === "" ? "0.0" : item.monthly_report.percent_act_vs_rb,
item.monthly_report.mtd_vs_mb === null ? "0.0" : item.monthly_report.rolling_outlook === "" ? "0.0" : item.monthly_report.mtd_vs_mb,
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.length > 0) {
......@@ -171,10 +173,10 @@ export default class OperatingIndicatorMR extends Component {
downloadTemplate = async () => {
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()
// console.log(res)
// // console.log(res)
if (res.size > 0) {
let url = window.URL.createObjectURL(res);
let a = document.createElement('a');
......@@ -185,10 +187,10 @@ export default class OperatingIndicatorMR extends Component {
}
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);
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()
this.setState({ loading: false })
......@@ -201,8 +203,7 @@ export default class OperatingIndicatorMR extends Component {
}
}
backToMonthlyReport(type) {
// console.log(this.state.dataTable);
createData(type) {
let data = []
this.state.dataTable.map(i => {
data.push({
......@@ -221,31 +222,19 @@ export default class OperatingIndicatorMR extends Component {
})
})
let payload = {
"monthly_report_id": this.props.submissionID,
"company_id": this.props.company.company_id,
"periode": this.props.periode,
"report_id": this.props.report_id,
"operating_indicator_id": this.props.data.operatingIndID,
"report_id": this.props.data.report_id,
"company_id": this.props.data.company.company_id,
"periode": this.props.data.periode,
"status": type,
"months": this.props.month.month_id,
"operating_indicator": data
}
api.create('UPLOAD').createMonthlyReportOI(payload).then(response => {
console.log(response);
if (response.data) {
if (response.data.status === "success") {
this.props.saveToMonthlyReport()
} else {
this.setState({ loading: false }, () => {
this.props.saveToMonthlyReport()
})
}
} else {
this.setState({ loading: false }, () => {
this.getSubmission()
document.body.style.overflow = 'unset';
})
"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,
"monthly_report": data
}
})
console.log(payload);
// // console.log('=========================')
// // console.log(JSON.stringify(payload))
this.props.saveMonthlyOI(payload)
this.props.onClickClose()
}
render() {
......@@ -285,10 +274,10 @@ export default class OperatingIndicatorMR extends Component {
const handleVariance = (tableMeta, dex, type) => {
let total = 0
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)
} 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)
}
return total
......@@ -308,6 +297,75 @@ export default class OperatingIndicatorMR extends Component {
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 = [
{
name: "",
......@@ -394,11 +452,11 @@ export default class OperatingIndicatorMR extends Component {
control={
<Input
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"
placeholder=""
disabled={true}
defaultValue={"Ton"}
defaultValue={val}
// onBlur={(event) => {
// // updateValue(event.target.value)
// handleNotes(event.target.value, tableMeta)
......@@ -438,6 +496,24 @@ export default class OperatingIndicatorMR extends Component {
value={Number(handleValue(tableMeta, 0)).toFixed(1)}
/>
</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 }}>
<FormControlLabel
style={{ margin: 0 }}
......@@ -509,6 +585,24 @@ export default class OperatingIndicatorMR extends Component {
/>
</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 }}>
<FormControlLabel
style={{ margin: 0 }}
......@@ -544,6 +638,24 @@ export default class OperatingIndicatorMR extends Component {
/>
</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 }}>
<FormControlLabel
style={{ margin: 0 }}
......@@ -981,25 +1093,44 @@ export default class OperatingIndicatorMR extends Component {
return (
<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 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>Monthly Report</Typography>
</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%' }}>
<Paper style={{ paddingTop: 10 }}>
{this.state.visibleOI === true ?
<Paper style={{ paddingTop: 10, paddingBottom: 20 }}>
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
<Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Monthly Report - Operating Indicator</Typography>
</div>
<div style={{ padding: 20 }}>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
{!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.periode} (rev.{this.props.revision})</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' }}>
<a data-tip={'Download Template'} data-for="template">
{(this.props.permission.create || this.props.permission.edit) && this.props.isSubmit && <a data-tip={'Download Template'} data-for="template">
<button
style={{
backgroundColor: 'transparent',
......@@ -1011,9 +1142,9 @@ export default class OperatingIndicatorMR extends Component {
>
<img src={Images.template} />
</button>
</a>
</a>}
<ReactTooltip border={true} id="template" place="bottom" type="light" effect="solid" />
<a data-tip={'Upload'} data-for="upload">
{(this.props.permission.create || this.props.permission.edit) && this.props.isSubmit && <a data-tip={'Upload'} data-for="upload">
<button
style={{
backgroundColor: 'transparent',
......@@ -1021,11 +1152,11 @@ export default class OperatingIndicatorMR extends Component {
borderColor: 'transparent',
margin: 5
}}
onClick={() => null}
onClick={() => this.setState({ visibleUpload: true, editable: true })}
>
<img src={Images.upload} />
</button>
</a>
</a>}
<ReactTooltip border={true} id="upload" place="bottom" type="light" effect="solid" />
<a data-tip={'Download'} data-for="download">
<button
......@@ -1035,12 +1166,7 @@ export default class OperatingIndicatorMR extends Component {
borderColor: 'transparent',
margin: 5
}}
onClick={() =>
this.setState({ loading: true }, () => {
setTimeout(() => {
this.downloadAllData()
}, 100);
})}
onClick={() => this.downloadAllData()}
>
<img src={Images.download} />
</button>
......@@ -1048,10 +1174,10 @@ export default class OperatingIndicatorMR extends Component {
<ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
</div>
</div>
</div>
</div>}
<div style={{ marginTop: 20, width: this.props.width - (this.props.open === true ? 400 : 150) }}>
{!this.state.loading && (
{this.state.loading && loadingComponent}
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={dataTable2}
......@@ -1059,50 +1185,159 @@ export default class OperatingIndicatorMR extends Component {
options={options}
/>
</MuiThemeProvider>
)}
</div>
{/* {this.props.isApprover === true || this.state.dataTable.length == 0 ? null :
(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 }}>
<Typography style={{ fontSize: '11px', color: '#4b4b4b', marginTop: 20 }}>Last Updated by : {this.state.updateBy}</Typography>
</div>
<div className="grid grid-2x">
<div className="col-1">
<button
className="button"
type="button"
onClick={() => this.setState({ loading: true }, () => {
setTimeout(() => {
this.props.onClickClose()
}, 100);
})}
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
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' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Back</Typography>
</div>
</button>
</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
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"
disabled={this.state.editable}
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
cursor: this.state.editable === true ? 'default' : 'pointer',
borderColor: 'transparent',
outline: 'none',
marginRight: 20
}}
onClick={() => {
this.setState({ loading: true }, () => {
onClick={() => this.setState({ loading: true }, () => {
setTimeout(() => {
this.setState({ loading: false })
// this.handleValidate()
this.createData("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"
disabled={this.state.editable}
onClick={() => this.setState({ loading: true }, () => {
setTimeout(() => {
this.createData("submitted")
}, 100);
})}
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>
</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>
......@@ -1113,19 +1348,19 @@ export default class OperatingIndicatorMR extends Component {
type="button"
style={{
backgroundColor: 'transparent',
cursor: this.state.saveDraft !== true ? 'pointer' : 'default',
cursor: this.state.editable === true ? 'default' : 'pointer',
borderColor: 'transparent',
outline: 'none',
marginRight: 20
}}
disabled={this.state.editable}
onClick={() =>
this.state.saveDraft === true ?
null :
this.state.handleTekTekTek == 1 ? null :
this.setState({ handleTekTekTek: 1 }, () => {
this.backToMonthlyReport('draft')
})
}
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>
......@@ -1133,34 +1368,71 @@ export default class OperatingIndicatorMR extends Component {
</button>
<button
type="button"
// disabled={this.state.buttonError}
onClick={() =>
this.state.buttonError ?
this.setState({ alert: true, messageAlert: 'Data is not complete !', tipeAlert: 'warning' })
:
this.state.handleTekTekTek == 1 ? null :
this.setState({ handleTekTekTek: 1 }, () => {
this.backToMonthlyReport('submitted')
this.state.editable === true ?
null :
this.setState({ loading: true }, () => {
setTimeout(() => {
this.uploadOI("submitted")
}, 100);
})}
disabled={this.state.editable}
style={{
backgroundColor: 'transparent',
cursor: this.state.buttonError === true ? 'default' : 'pointer',
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>
{/* : null
} */}
</Paper>}
</div>
</Paper>
{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>
<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>
)}
</div>
);
}
}
src/container/MonthlyReport/ProfitLossMR.js
View file @ e59b686a
......@@ -698,7 +698,7 @@ export default class ProfitLossMR extends Component {
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={tableMeta.rowData[9]}
value={tableMeta.rowData[7]}
control={
<NumberFormat
thousandSeparator={true}
......
src/container/OprIndicator/OperatingIndicator.js
View file @ e59b686a
......@@ -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() {
let payload = {
"company_id": this.state.company.company_id,
......@@ -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() {
let payload = {
"company_id": this.state.company.company_id,
......@@ -386,7 +318,8 @@ export default class OperatingIndicator extends Component {
visibleOperatingIndicator: false,
visibleDetailOpt: false,
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))
......@@ -449,6 +382,13 @@ export default class OperatingIndicator extends Component {
})
}
saveMonthlyOI(payload) {
api.create().createMonthlyReportOI(payload).then((response) => {
this.getReport()
this.getOperatingID()
})
}
render() {
const columns = ["#", "Report Type",
// {
......@@ -671,14 +611,14 @@ export default class OperatingIndicator extends Component {
data={this.state.dataDetail}
height={this.props.height}
width={this.props.width}
// month={this.state.month}
months={this.state.months}
company={this.state.company}
onClickClose={() => this.setState({ visibleDetailMonthly: false, visibleOperatingIndicator: true }, () => {
this.getOperatingID()
this.forceUpdate()
})}
getReport={() => this.getOperatingID()}
saveOperatingInd={this.saveOperatingInd.bind(this)}
saveMonthlyOI={this.saveMonthlyOI.bind(this)}
isSubmit={this.state.statusDetail == 'closed'? false : this.state.isSubmit}
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