import React, { Component } from 'react';
import { Typography, Paper, createMuiTheme, MuiThemeProvider, TableCell, FormControlLabel, TextField, Input } from '@material-ui/core';
import MUIDataTable from 'mui-datatables';
import NumberFormat from 'react-number-format';
import api from '../../api';
var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptionsFixedColumn();
const style = {
position: "sticky",
left: 0,
background: "white",
zIndex: 101,
};
const style2 = {
position: "sticky",
left: 420,
background: "white",
zIndex: 101
};
export default class CorporateAnnualTarget extends Component {
constructor(props) {
super(props)
this.state = {
dataTable: [
// ["FINANCIAL PERSPECTIVE", "9,884,181", "9,884,181", "9,884,181", "9,884,181", "9,884,181", "9,884,181", "9,884,181", "9,884,181", "9,884,181", "9,884,181"],
// ["Control", "-", "-"],
// ["Accumulated Depreciation (negative value)", "2,647,647", "2,058,898"],
// ["Control", "-", "-"],
// ["Gain / (Loss) on Fixed Assets", "-", "-"],
// ["Control", "-", "-"]
]
}
this.handleValue = this.handleValue.bind(this)
}
componentDidMount() {
this.getItemHierarki()
console.log(this.props);
}
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
}
api.create().getItemReportHierarki(payload).then(response => {
console.log(response);
if (response.data) {
if (response.data.status === "success") {
let dataTable = []
response.data.data.map((item, index) => {
if (item.children && item.children.length > 0) {
dataTable.push([
item.type_report_id,
item.id,
item.parent,
item.formula,
item.level,
item.description
])
item.children.map(i => {
if (i.children) {
if (i.children.length > 0) {
dataTable.push([
i.type_report_id,
i.id,
i.parent,
i.formula,
i.level,
i.description
])
i.children.map(val => {
if (val.children && val.children.length > 0) {
dataTable.push([
val.type_report_id,
val.id,
val.parent,
val.formula,
val.level,
val.description
])
val.children.map(items => {
console.log(items)
dataTable.push([
items.type_report_id,
items.id,
items.parent,
items.formula,
items.level,
items.description
])
})
} else {
dataTable.push([
val.type_report_id,
val.id,
val.parent,
val.formula,
val.level,
val.description
])
}
})
} else {
dataTable.push([
i.type_report_id,
i.id,
i.parent,
i.formula,
i.level,
i.description
])
}
} else {
dataTable.push([
i.type_report_id,
i.id,
i.parent,
i.formula,
i.level,
i.description
])
}
})
} else {
dataTable.push([
item.type_report_id,
item.id,
item.parent,
item.formula,
item.level,
item.description
])
}
})
console.log(dataTable);
this.setState({ dataTable })
}
}
})
}
handleValue(data) {
let total = 0
this.state.dataTable.map((item, index) => {
if (data.rowData[1] == item[2]) {
total = item[data.columnIndex] == undefined ? (Number(total) + 0) : (Number(total) + Number(item[data.columnIndex]))
}
})
let indexParent = this.state.dataTable.findIndex((val) => val[1] == this.state.dataTable[data.rowIndex][2])
let a = this.state.dataTable[data.rowIndex][data.columnIndex] = total
// console.log(indexParent);
return a
}
handleChange(value, tableMeta) {
let val = String(value).split(",").join("")
let data = this.state.dataTable
let indexParent = data.findIndex((val) => val[1] == data[tableMeta.rowIndex][2])
if (indexParent > 0) {
// console.log(indexParent)
let a = data[tableMeta.rowIndex][tableMeta.columnIndex] = Number(val)
let jagain = data[indexParent][tableMeta.columnIndex]
a = data[indexParent][tableMeta.columnIndex] = jagain == undefined ? (0 + Number(val)) : (jagain + Number(val))
} else {
data[tableMeta.rowIndex][tableMeta.columnIndex] = Number(val)
}
// this.forceUpdate()
// console.log(this.state.dataTable)
// this.setState({
// data: a,
// }, () => console.log(this.state.dataTable))
}
render() {
// let dataTable2 = this.state.dataTable
// const handleChange = (value, tableMeta) => {
// let val = String(value).split(",").join("")
// // let data = this.state.dataTable2
// let indexParent = dataTable2.findIndex((val) => val[1] == dataTable2[tableMeta.rowIndex][2])
// if (indexParent > 0) {
// // console.log(indexParent)
// let a = dataTable2[tableMeta.rowIndex][tableMeta.columnIndex] = Number(val)
// let jagain = dataTable2[indexParent][tableMeta.columnIndex]
// a = dataTable2[indexParent][tableMeta.columnIndex] = jagain == undefined ? (0 + Number(val)) : (jagain + Number(val))
// } else {
// dataTable2[tableMeta.rowIndex][tableMeta.columnIndex] = Number(val)
// }
// }
// const handleValue = (data) => {
// let total = 0
// dataTable2.map((item, index) => {
// if (data.rowData[1] == item[2]) {
// total = item[data.columnIndex] == undefined ? (Number(total) + 0) : (Number(total) + Number(item[data.columnIndex]))
// }
// })
// let indexParent = dataTable2.findIndex((val) => val[1] == dataTable2[data.rowIndex][2])
// let a = dataTable2[data.rowIndex][data.columnIndex] = Number(total)
// // console.log(indexParent);
// return a
// }
const columns = [{
name: "",
options: {
display: false
}
}, {
name: "",
options: {
display: false
}
}, {
name: "",
options: {
display: false
}
}, {
name: "",
options: {
display: false
}
}, {
name: "",
options: {
display: false
}
}, {
name: "Key Performance Indicator",
options: {
customHeadRender: (columnMeta) => (
{columnMeta.name}
),
setCellProps: () => ({ style }),
customBodyRender: (val, tableMeta) => {
return (
{tableMeta.rowIndex == 0 || tableMeta.rowIndex == 1 ?
{val}
:
tableMeta.rowIndex == 2 || tableMeta.rowIndex == 6 || tableMeta.rowIndex == 7 || tableMeta.rowIndex == 8 ?
{val} :
{val}
}
)
}
}
}, {
name: "Weight",
options: {
customHeadRender: (columnMeta) => (
{columnMeta.name}
),
setCellProps: () => ({
style: {
position: "sticky",
left: 420,
background: "white",
zIndex: 101
}
})
}
}, {
name: "UOM",
options: {
customHeadRender: (columnMeta) => (
{columnMeta.name}
),
customBodyRender: (value, tableMeta, updateValue) => {
return (
{tableMeta.rowIndex === 3 || tableMeta.rowIndex === 4 || tableMeta.rowIndex === 9 ?
}
onChange={event => updateValue(event.target.value)}
/>
:
{value === "" ? "-" : value}
}
{val}
)
}
}
}, {
name: "Max Ach.",
options: {
customHeadRender: (columnMeta) => (
{columnMeta.name}
),
customBodyRender: (val) => {
return (
{val}
)
}
}
}, {
name: "Formula YTD",
options: {
customHeadRender: (columnMeta) => (
{columnMeta.name}
),
customBodyRender: (val) => {
return (
{val}
)
}
}
}, {
name: "2020",
options: {
customHeadRender: (columnMeta) => (
{columnMeta.name}
),
customBodyRender: (val) => {
return (
{val}
)
}
}
}, {
name: "Jan 2021",
options: {
customHeadRender: (columnMeta) => (
{columnMeta.name}
),
customBodyRender: (val) => {
return (
{val}
)
}
}
}, {
name: "Feb 2021",
options: {
customHeadRender: (columnMeta) => (
{columnMeta.name}
),
customBodyRender: (val) => {
return (
{val}
)
}
}
}, {
name: "Mar 2021",
options: {
customHeadRender: (columnMeta) => (
{columnMeta.name}
),
customBodyRender: (val) => {
return (
{val}
)
}
}
}, {
name: "Apr 2021",
options: {
customHeadRender: (columnMeta) => (
{columnMeta.name}
),
customBodyRender: (val) => {
return (
{val}
)
}
}
}, {
name: "May 2021",
options: {
customHeadRender: (columnMeta) => (
{columnMeta.name}
),
customBodyRender: (val) => {
return (
{val}
)
}
}
}, {
name: "Jun 2021",
options: {
customHeadRender: (columnMeta) => (
{columnMeta.name}
),
customBodyRender: (val) => {
return (
{val}
)
}
}
}, {
name: "Jul 2021",
options: {
customHeadRender: (columnMeta) => (
{columnMeta.name}
),
customBodyRender: (val) => {
return (
{val}
)
}
}
}, {
name: "Aug 2021",
options: {
customHeadRender: (columnMeta) => (
{columnMeta.name}
),
customBodyRender: (val) => {
return (
{val}
)
}
}
}, {
name: "Sep 2021",
options: {
customHeadRender: (columnMeta) => (
{columnMeta.name}
),
customBodyRender: (val) => {
return (
{val}
)
}
}
}, {
name: "Oct 2021",
options: {
customHeadRender: (columnMeta) => (
{columnMeta.name}
),
customBodyRender: (val) => {
return (
{val}
)
}
}
}, {
name: "Nop 2021",
options: {
customHeadRender: (columnMeta) => (
{columnMeta.name}
),
customBodyRender: (val) => {
return (
{val}
)
}
}
}, {
name: "Dec 2021",
options: {
customHeadRender: (columnMeta) => (
{columnMeta.name}
),
customBodyRender: (val) => {
return (
{val}
)
}
}
}, {
name: "2021 Total",
options: {
customHeadRender: (columnMeta) => (
{columnMeta.name}
),
customBodyRender: (val) => {
return (
{val}
)
}
}
}, {
name: "2022 Total",
options: {
customHeadRender: (columnMeta) => (
{columnMeta.name}
),
customBodyRender: (val) => {
return (
{val}
)
}
}
}, {
name: "2023 Total",
options: {
customHeadRender: (columnMeta) => (
{columnMeta.name}
),
customBodyRender: (val) => {
return (
{val}
)
}
}
}, {
name: "Strategic Initiative",
options: {
customHeadRender: (columnMeta) => (
{columnMeta.name}
),
customBodyRender: (val) => {
return (
{val}
)
}
}
}, {
name: "PIC",
options: {
customHeadRender: (columnMeta) => (
{columnMeta.name}
),
customBodyRender: (val) => {
return (
{val}
)
}
}
}
]
return (
Pengajuan Budget Tahunan
Master Budget - Corporate Annual Target
{this.props.company.company_name}
Periode : {this.props.periode}
in IDR mn
);
}
}