Skip to content

T
Tia-dev
Commit 266d8075 authored by Deni Rinaldi's avatar Deni Rinaldi
Browse files
Options

Merge branch 'riri' into 'master' 

save oi

See merge request !698
parents cabd8992 1bb99888
Hide whitespace changes
Inline Side-by-side
Showing with 618 additions and 78 deletions
src/api/index.js
View file @ 266d8075
...@@ -269,6 +269,7 @@ const create = (type = "") => { ...@@ -269,6 +269,7 @@ const create = (type = "") => {
const createMonthlyReportBS = (body) => api.post('transaction/monthly_report_bs/create_monthly_report', body) const createMonthlyReportBS = (body) => api.post('transaction/monthly_report_bs/create_monthly_report', body)
const createMonthlyReportTP = (body) => api.post('transaction/monthly_report_tp/create_monthly_report', body) const createMonthlyReportTP = (body) => api.post('transaction/monthly_report_tp/create_monthly_report', body)
const createMonthlyReportFAM = (body) => api.post('transaction/monthly_report/fam/create_monthly_report', body) const createMonthlyReportFAM = (body) => api.post('transaction/monthly_report/fam/create_monthly_report', body)
const createMonthlyReportOI = (body) => api.post('transaction/monthly_report_oi/create_monthly_report', body)
const checkUploadMonthlyReportTP = (body) => api.post('transaction/monthly_report_tp/check_import', body) const checkUploadMonthlyReportTP = (body) => api.post('transaction/monthly_report_tp/check_import', body)
...@@ -410,6 +411,7 @@ const create = (type = "") => { ...@@ -410,6 +411,7 @@ const create = (type = "") => {
createMonthlyReportTP, createMonthlyReportTP,
createMonthlyReportPL, createMonthlyReportPL,
createMonthlyReportFAM, createMonthlyReportFAM,
createMonthlyReportOI,
getSubmission, getSubmission,
checkUploadMB, checkUploadMB,
getAllOperatingInd, getAllOperatingInd,
......
src/container/MonthlyReport/OperatingIndicatorMR.js
View file @ 266d8075
import { createMuiTheme, MuiThemeProvider, Paper, TableCell, Tooltip, Typography, withStyles } from '@material-ui/core'; import { createMuiTheme, FormControlLabel, Input, MuiThemeProvider, Paper, 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 { PropagateLoader } from 'react-spinners';
import ReactTooltip from 'react-tooltip'; import ReactTooltip from 'react-tooltip';
import api from '../../api'; import api from '../../api';
import Images from '../../assets/Images'; import Images from '../../assets/Images';
...@@ -47,12 +49,12 @@ export default class OperatingIndicatorMR extends Component { ...@@ -47,12 +49,12 @@ export default class OperatingIndicatorMR extends Component {
getItemHierarki() { getItemHierarki() {
let payload = { let payload = {
"monthly_report_id": this.props.monthlyReportId,
"report_id": this.props.report_id, "report_id": this.props.report_id,
"revision": Number(this.props.revision),
"periode": this.props.periode,
"company_id": this.props.company.company_id, "company_id": this.props.company.company_id,
"monthly_report_id": this.props.monthlyReportId, "periode": this.props.periode,
"month": this.props.month.month_id "revision": Number(this.props.revision),
"months": this.props.month.month_id
} }
api.create().getHierarkiMontlyReportOI(payload).then(response => { api.create().getHierarkiMontlyReportOI(payload).then(response => {
console.log(response); console.log(response);
...@@ -71,24 +73,15 @@ export default class OperatingIndicatorMR extends Component { ...@@ -71,24 +73,15 @@ export default class OperatingIndicatorMR extends Component {
item.description, item.description,
item.operating_indicator.uom, 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.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,
mb: item.operating_indicator.master_budget === "" ? "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,
rb: item.operating_indicator.rolling_budget === "" ? "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,
actual: item.operating_indicator.actual === "" ? "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.actual_previous_month === null ? "0.0" : item.operating_indicator.actual_previous_month === "" ? "0.0" : item.operating_indicator.actual_previous_month, 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,
aavpm: item.operating_indicator.amount_act_vs_previous_month === "" ? "0.0" : item.operating_indicator.amount_act_vs_previous_month, item.operating_indicator.mtd_vs_mb === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.mtd_vs_mb,
pavpm: item.operating_indicator.percent_act_vs_previous_month === "" ? "0.0" : item.operating_indicator.percent_act_vs_previous_month, item.operating_indicator.mtd_vs_rb === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.mtd_vs_rb,
aavmb: item.operating_indicator.amount_act_vs_mb === "" ? "0.0" : item.operating_indicator.amount_act_vs_mb,
pavmb: item.operating_indicator.percent_act_vs_mb === "" ? "0.0" : item.operating_indicator.percent_act_vs_mb,
aavrb: item.operating_indicator.amount_act_vs_rb === "" ? "0.0" : item.operating_indicator.amount_act_vs_rb,
pavrb: item.operating_indicator.percent_act_vs_rb === "" ? "0.0" : item.operating_indicator.percent_act_vs_rb,
},
{
mtdvmb: item.operating_indicator.mtd_vs_mb === "" ? "0.0" : item.operating_indicator.mtd_vs_mb,
mtdvrb: item.operating_indicator.mtd_vs_rb === "" ? "0.0" : item.operating_indicator.mtd_vs_rb,
}
]) ])
} }
if (item.children !== null) { if (item.children !== null) {
...@@ -109,22 +102,15 @@ export default class OperatingIndicatorMR extends Component { ...@@ -109,22 +102,15 @@ export default class OperatingIndicatorMR extends Component {
item.description, item.description,
item.operating_indicator.uom, 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.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,
mb: item.operating_indicator.master_budget === "" ? "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,
rb: item.operating_indicator.rolling_budget === "" ? "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,
actual: item.operating_indicator.actual === "" ? "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,
aavmb: item.operating_indicator.amount_act_vs_mb === "" ? "0.0" : item.operating_indicator.amount_act_vs_mb, item.operating_indicator.percent_act_vs_rb === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.percent_act_vs_rb,
pavmb: item.operating_indicator.percent_act_vs_mb === "" ? "0.0" : item.operating_indicator.percent_act_vs_mb, item.operating_indicator.mtd_vs_mb === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.mtd_vs_mb,
aavrb: item.operating_indicator.amount_act_vs_rb === "" ? "0.0" : item.operating_indicator.amount_act_vs_rb, item.operating_indicator.mtd_vs_rb === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.mtd_vs_rb,
pavrb: item.operating_indicator.percent_act_vs_rb === "" ? "0.0" : item.operating_indicator.percent_act_vs_rb,
},
{
mtdvpm: item.operating_indicator.mtd_vs_previous_month === "" ? "0.0" : item.operating_indicator.mtd_vs_previous_month,
mtdvmb: item.operating_indicator.mtd_vs_mb === "" ? "0.0" : item.operating_indicator.mtd_vs_mb,
mtdvrb: item.operating_indicator.mtd_vs_rb === "" ? "0.0" : item.operating_indicator.mtd_vs_rb,
}
]) ])
if (item.children !== null) { if (item.children !== null) {
if (item.children.length > 0) { if (item.children.length > 0) {
...@@ -134,12 +120,149 @@ export default class OperatingIndicatorMR extends Component { ...@@ -134,12 +120,149 @@ export default class OperatingIndicatorMR extends Component {
} }
} }
}) })
console.log(dataTable);
this.setState({ dataTable, loading: false }) this.setState({ dataTable, loading: false })
} }
}) })
} }
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}`
)
res = await res.blob()
// console.log(res)
if (res.size > 0) {
let url = window.URL.createObjectURL(res);
let a = document.createElement('a');
a.href = url;
a.download = 'Template Monthly Report Operating Indicator.xlsx';
a.click();
}
}
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}`
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}`
)
res = await res.blob()
this.setState({ loading: false })
if (res.size > 0) {
let url = window.URL.createObjectURL(res);
let a = document.createElement('a');
a.href = url;
a.download = 'Monthly Report Operating Indicator.xlsx';
a.click();
}
}
backToMonthlyReport(type) {
// console.log(this.state.dataTable);
let data = []
this.state.dataTable.map(i => {
data.push({
"item_report_id": i[1],
"uom": i[6],
"rolling_outlook": i[7],
"master_budget": i[8],
"rolling_budget": i[9],
"actual": i[10],
"amount_act_vs_mb": i[11],
"percent_act_vs_mb": i[12],
"amount_act_vs_rb": i[13],
"percent_act_vs_rb": i[14],
"mtd_vs_mb": i[15],
"mtd_vs_rb": i[16]
})
})
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,
"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';
})
}
})
}
render() { render() {
let dataTable2 = this.state.dataTable
const handleValue = (data, type) => {
let total = 0
dataTable2.map((item, index) => {
if (data.rowData[1] === item[2]) {
let itemVal = item[data.columnIndex + type].value !== undefined ? Number(item[data.columnIndex + type].value) : Number(item[data.columnIndex + type])
total = item[data.columnIndex + type] === undefined ? Number(total) + 0 : Number(total) + itemVal
}
})
let indexParent = dataTable2.findIndex((val) => val[1] === dataTable2[data.rowIndex][2])
dataTable2[data.rowIndex][data.columnIndex + type] = Number(total).toFixed(1)
// console.log(indexParent);
return total
}
const handleChange = (value, tableMeta, type) => {
console.log(dataTable2);
let val = String(value).split(",").join("")
if (type === "actual") {
dataTable2[tableMeta.rowIndex][10] = Number(val).toFixed(1)
} else {
let indexParent = dataTable2.findIndex((val) => val[1] === dataTable2[tableMeta.rowIndex][2])
if (indexParent > 0) {
dataTable2[tableMeta.rowIndex][10] = Number(val).toFixed(1)
let jagain = Number(dataTable2[indexParent][10]).toFixed(1)
dataTable2[indexParent][10] = jagain === undefined ? (0 + Number(val)).toFixed(1) : Number(Number(jagain) + Number(val)).toFixed(1)
} else {
dataTable2[tableMeta.rowIndex][10] = Number(val).toFixed(1)
}
}
}
const handleVariance = (tableMeta, dex, type) => {
let total = 0
if (dex === 1) {
total = Number(tableMeta.rowData[10]) - Number(tableMeta.rowData[8])
dataTable2[tableMeta.rowIndex][tableMeta.columnIndex + type] = Number(total).toFixed(1)
} else if (dex === 2) {
total = Number(tableMeta.rowData[10]) - Number(tableMeta.rowData[9])
dataTable2[tableMeta.rowIndex][tableMeta.columnIndex + type] = Number(total).toFixed(1)
}
return total
}
const handleVariancePercent = (tableMeta, dex, type) => {
let total = 0
if (dex === 1) {
total = Number(dataTable2[tableMeta.rowIndex][11]) / Number(dataTable2[tableMeta.rowIndex][8])
dataTable2[tableMeta.rowIndex][tableMeta.columnIndex + type] = Number(total).toFixed(2)
} else if (dex === 2) {
total = Number(dataTable2[tableMeta.rowIndex][13]) / Number(dataTable2[tableMeta.rowIndex][9])
dataTable2[tableMeta.rowIndex][tableMeta.columnIndex + type] = Number(total).toFixed(2)
}
return total
}
let columns = [ let columns = [
{ {
name: "", name: "",
...@@ -217,9 +340,29 @@ export default class OperatingIndicatorMR extends Component { ...@@ -217,9 +340,29 @@ export default class OperatingIndicatorMR extends Component {
customBodyRender: (val, tableMeta, updateValue) => { customBodyRender: (val, tableMeta, updateValue) => {
return ( return (
<div style={{ textAlign: 'right', width: 90 }}> <div style={{ textAlign: 'right', width: 90 }}>
{tableMeta.rowData[0] === 4 ? {tableMeta.rowData[0] === 4 || tableMeta.rowData[0] === 1 ?
null : null :
val <div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
// value={val}
control={
<Input
disableUnderline={true}
style={{ color: "#5198ea", fontSize: 12, textAlign: 'left', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
defaultValue={"Ton"}
// onBlur={(event) => {
// // updateValue(event.target.value)
// handleNotes(event.target.value, tableMeta)
// // console.log(dataTable2)
// }}
/>
}
/>
</div>
} }
</div> </div>
) )
...@@ -237,9 +380,35 @@ export default class OperatingIndicatorMR extends Component { ...@@ -237,9 +380,35 @@ export default class OperatingIndicatorMR extends Component {
customBodyRender: (val, tableMeta, updateValue) => { customBodyRender: (val, tableMeta, updateValue) => {
return ( return (
<div style={{ textAlign: 'right', width: 90 }}> <div style={{ textAlign: 'right', width: 90 }}>
{tableMeta.rowData[0] === 4 ? {tableMeta.rowData[0] === 4 || tableMeta.rowData[0] === 1 ?
null : null :
val tableMeta.rowData[0] === 2 ?
<span style={{ fontSize: 12, textAlign: 'right' }}>
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(handleValue(tableMeta, 0)).toFixed(1)}
/>
</span> :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(val).toFixed(1)}
/>
}
/>
</div>
} }
</div> </div>
) )
...@@ -275,31 +444,133 @@ export default class OperatingIndicatorMR extends Component { ...@@ -275,31 +444,133 @@ export default class OperatingIndicatorMR extends Component {
} }
}), }),
customBodyRender: (val, tableMeta, updateValue) => { customBodyRender: (val, tableMeta, updateValue) => {
console.log(tableMeta); // console.log(tableMeta);
return ( return (
<div> <div>
<div className="grid grid-3x content-center"> <div className="grid grid-3x content-center">
<div className="col-1"> <div className="col-1">
<div style={{ textAlign: 'right', width: 90 }}> <div style={{ textAlign: 'right', width: 90 }}>
{tableMeta.rowData[0] === 4 ? {tableMeta.rowData[0] === 4 || tableMeta.rowData[0] === 1 ?
null : null :
val.mb tableMeta.rowData[0] === 2 ?
<span style={{ fontSize: 12, textAlign: 'right' }}>
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(handleValue(tableMeta, 0)).toFixed(1)}
/>
</span>
:
<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={tableMeta.rowData[8]}
/>
}
/>
</div>
} }
</div> </div>
</div> </div>
<div className="col-2"> <div className="col-2">
<div style={{ textAlign: 'right', width: 90 }}> <div style={{ textAlign: 'right', width: 90 }}>
{tableMeta.rowData[0] === 4 ? {tableMeta.rowData[0] === 4 || tableMeta.rowData[0] === 1 ?
null : null :
val.rb tableMeta.rowData[0] === 2 ?
<span style={{ fontSize: 12, textAlign: 'right' }}>
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(handleValue(tableMeta, 1)).toFixed(1)}
/>
</span>
:
<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={tableMeta.rowData[9]}
/>
}
/>
</div>
} }
</div> </div>
</div> </div>
<div className="col-3"> <div className="col-3">
<div style={{ textAlign: 'right', width: 90 }}> <div style={{ textAlign: 'right', width: 90 }}>
{tableMeta.rowData[0] === 4 ? {tableMeta.rowData[0] === 4 || tableMeta.rowData[0] === 1 ?
null : null
val.actual :
tableMeta.rowData[0] === 2 ?
<span style={{ fontSize: 12, textAlign: 'right' }}>
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(handleValue(tableMeta, 2)).toFixed(1)}
/>
</span>
:
tableMeta.rowData[0] === 3 ?
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={tableMeta.rowData[10]}
control={
<NumberFormat
thousandSeparator={true}
style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={false}
value={Number(tableMeta.rowData[10]).toFixed(1)}
onBlur={(event) => {
handleChange(event.target.value, tableMeta)
}}
/>
}
/>
</div>
:
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={tableMeta.rowData[10]}
control={
<NumberFormat
thousandSeparator={true}
style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
value={Number(tableMeta.rowData[10]).toFixed(1)}
/>
}
/>
</div>
} }
</div> </div>
</div> </div>
...@@ -309,6 +580,18 @@ export default class OperatingIndicatorMR extends Component { ...@@ -309,6 +580,18 @@ export default class OperatingIndicatorMR extends Component {
} }
} }
}, },
{
name: "",
options: {
display: false
}
},
{
name: "",
options: {
display: false
}
},
{ {
name: `Variance`, name: `Variance`,
options: { options: {
...@@ -358,18 +641,51 @@ export default class OperatingIndicatorMR extends Component { ...@@ -358,18 +641,51 @@ export default class OperatingIndicatorMR extends Component {
<div className="column-1"> <div className="column-1">
<div className="grid grid-2x content-center"> <div className="grid grid-2x content-center">
<div className="column-1"> <div className="column-1">
<div style={{ textAlign: 'right', width: 90 }}> <div style={{ textAlign: 'right', width: 120 }}>
{tableMeta.rowData[0] === 4 ? {tableMeta.rowData[0] === 4 || tableMeta.rowData[0] === 1 ?
null : null
val.aavmb :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(handleVariance(tableMeta, 1, 0)).toFixed(1)}
/>
}
/>
</div>
} }
</div> </div>
</div> </div>
<div className="column-2"> <div className="column-2">
<div style={{ textAlign: 'right', width: 90 }}> <div style={{ textAlign: 'right', width: 120 }}>
{tableMeta.rowData[0] === 4 ? {tableMeta.rowData[0] === 4 || tableMeta.rowData[0] === 1 ?
null : null
val.pavmb :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
suffix={'%'}
disabled={true}
value={Number(handleVariancePercent(tableMeta, 1, 1)).toFixed(2)}
/>
}
/>
</div>
} }
</div> </div>
</div> </div>
...@@ -378,18 +694,51 @@ export default class OperatingIndicatorMR extends Component { ...@@ -378,18 +694,51 @@ export default class OperatingIndicatorMR extends Component {
<div className="column-2"> <div className="column-2">
<div className="grid grid-2x content-center"> <div className="grid grid-2x content-center">
<div className="column-1"> <div className="column-1">
<div style={{ textAlign: 'right', width: 90 }}> <div style={{ textAlign: 'right', width: 120 }}>
{tableMeta.rowData[0] === 4 ? {tableMeta.rowData[0] === 4 ?
null : null
val.aavrb :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(handleVariance(tableMeta, 2, 2)).toFixed(1)}
/>
}
/>
</div>
} }
</div> </div>
</div> </div>
<div className="column-2"> <div className="column-2">
<div style={{ textAlign: 'right', width: 90 }}> <div style={{ textAlign: 'right', width: 120 }}>
{tableMeta.rowData[0] === 4 ? {tableMeta.rowData[0] === 4 ?
null : null
val.pavrb :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
suffix={'%'}
value={Number(handleVariancePercent(tableMeta, 2, 3)).toFixed(2)}
/>
}
/>
</div>
} }
</div> </div>
</div> </div>
...@@ -401,6 +750,24 @@ export default class OperatingIndicatorMR extends Component { ...@@ -401,6 +750,24 @@ export default class OperatingIndicatorMR extends Component {
} }
} }
}, },
{
name: "",
options: {
display: false
}
},
{
name: "",
options: {
display: false
}
},
{
name: "",
options: {
display: false
}
},
{ {
name: `MTD Explanation`, name: `MTD Explanation`,
options: { options: {
...@@ -432,17 +799,73 @@ export default class OperatingIndicatorMR extends Component { ...@@ -432,17 +799,73 @@ export default class OperatingIndicatorMR extends Component {
<div className="grid grid-2x content-center"> <div className="grid grid-2x content-center">
<div className="col-1"> <div className="col-1">
<div style={{ textAlign: 'right', width: 90 }}> <div style={{ textAlign: 'right', width: 90 }}>
{tableMeta.rowData[0] === 4 ? {tableMeta.rowData[0] === 4 || tableMeta.rowData[0] === 1 ?
null : null
val.mtdvmb :
tableMeta.rowData[0] === 2 ?
<span style={{ fontSize: 12, textAlign: 'right' }}>
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(handleValue(tableMeta, 0)).toFixed(1)}
/>
</span>
:
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(tableMeta.rowData[15]).toFixed(1)}
/>
}
/>
</div>
} }
</div> </div>
</div> </div>
<div className="col-2"> <div className="col-2">
<div style={{ textAlign: 'right', width: 90 }}> <div style={{ textAlign: 'right', width: 90 }}>
{tableMeta.rowData[0] === 4 ? {tableMeta.rowData[0] === 4 || tableMeta.rowData[0] === 1 ?
null : null
val.mtdvrb :
tableMeta.rowData[0] === 2 ?
<span style={{ fontSize: 12, textAlign: 'right' }}>
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(handleValue(tableMeta, 0)).toFixed(1)}
/>
</span>
:
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(tableMeta.rowData[16]).toFixed(1)}
/>
}
/>
</div>
} }
</div> </div>
</div> </div>
...@@ -452,19 +875,33 @@ export default class OperatingIndicatorMR extends Component { ...@@ -452,19 +875,33 @@ export default class OperatingIndicatorMR extends Component {
} }
} }
}, },
{
name: "",
options: {
display: false
}
}
] ]
let dataDummy = [ const loadingComponent = (
["", "", "", "", "", "acc", "uom", "rolling", { mb: "", rb: "", actual: "" }, { aavmb: "", pavmb: "", aavrb: "", pavrb: "" }, { mtdvmb: "", mtdvrb: "" }] <div style={{ position: 'fixed', zIndex: 110, top: 0, left: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'rgba(255,255,255,0.8)' }}>
] <PropagateLoader
// css={override}
size={20}
color={"#274B80"}
loading={this.state.loading}
/>
</div>
);
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>
<div style={{ flex: 1, padding: 20, width: '100%' }}> <div style={{ flex: 1, padding: 20, width: '100%' }}>
<Paper style={{ paddingTop: 10, paddingBottom: 20 }}> <Paper style={{ paddingTop: 10 }}>
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} > <div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
<Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Monthly Report - Operating Indicator</Typography> <Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Monthly Report - Operating Indicator</Typography>
</div> </div>
...@@ -485,7 +922,7 @@ export default class OperatingIndicatorMR extends Component { ...@@ -485,7 +922,7 @@ export default class OperatingIndicatorMR extends Component {
borderColor: 'transparent', borderColor: 'transparent',
margin: 5 margin: 5
}} }}
onClick={() => null} onClick={() => this.downloadTemplate()}
> >
<img src={Images.template} /> <img src={Images.template} />
</button> </button>
...@@ -513,7 +950,12 @@ export default class OperatingIndicatorMR extends Component { ...@@ -513,7 +950,12 @@ export default class OperatingIndicatorMR extends Component {
borderColor: 'transparent', borderColor: 'transparent',
margin: 5 margin: 5
}} }}
onClick={() => null} onClick={() =>
this.setState({ loading: true }, () => {
setTimeout(() => {
this.downloadAllData()
}, 100);
})}
> >
<img src={Images.download} /> <img src={Images.download} />
</button> </button>
...@@ -527,13 +969,109 @@ export default class OperatingIndicatorMR extends Component { ...@@ -527,13 +969,109 @@ export default class OperatingIndicatorMR extends Component {
{!this.state.loading && ( {!this.state.loading && (
<MuiThemeProvider theme={getMuiTheme()}> <MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable <MUIDataTable
data={dataDummy} data={dataTable2}
columns={columns} columns={columns}
options={options} options={options}
/> />
</MuiThemeProvider> </MuiThemeProvider>
)} )}
</div> </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 }}>
<div className="col-1">
<button
type="button"
onClick={() => this.setState({ loading: true }, () => {
setTimeout(() => {
this.props.onClickClose()
}, 100);
})}
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none'
}}
>
<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%' }}>
<button
className="button"
type="button"
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none',
marginRight: 20
}}
onClick={() => {
this.setState({ loading: true }, () => {
setTimeout(() => {
this.setState({ loading: false })
// this.handleValidate()
}, 100);
})
}}
>
<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.saveDraft !== true ? 'pointer' : 'default',
borderColor: 'transparent',
outline: 'none',
marginRight: 20
}}
onClick={() =>
this.state.saveDraft === true ?
null :
this.state.handleTekTekTek == 1 ? null :
this.setState({ handleTekTekTek: 1 }, () => {
this.backToMonthlyReport('draft')
})
}
>
<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.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')
})}
style={{
backgroundColor: 'transparent',
cursor: this.state.buttonError === true ? 'default' : 'pointer',
borderColor: 'transparent',
outline: 'none',
}}
>
<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>
{/* : null
} */}
</div> </div>
</Paper> </Paper>
</div> </div>
......
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