Skip to content

T
Tia-dev
Commit bb5e5515 authored by Faisal Hamdi's avatar Faisal Hamdi
Browse files
Options

faisal!

parent 0562fecb
Hide whitespace changes
Inline Side-by-side
Showing with 168 additions and 228 deletions
package-lock.json
View file @ bb5e5515
...@@ -4223,9 +4223,9 @@ ...@@ -4223,9 +4223,9 @@
} }
}, },
"caniuse-lite": { "caniuse-lite": {
"version": "1.0.30001179", "version": "1.0.30001237",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001179.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001237.tgz",
"integrity": "sha512-blMmO0QQujuUWZKyVrD1msR4WNDAqb/UPO1Sw2WWsQ7deoM5bJiicKnWJ1Y0NS/aGINSnKPIWBMw5luX+NDUCA==" "integrity": "sha512-pDHgRndit6p1NR2GhzMbQ6CkRrp4VKuSsqbcLeOQppYPKOYkKT/6ZvZDvKJUqcmtyWIAHuZq3SVS2vc1egCZzw=="
}, },
"capture-exit": { "capture-exit": {
"version": "2.0.0", "version": "2.0.0",
......
src/container/Progress/ProgressReport.js
View file @ bb5e5515
...@@ -47,6 +47,8 @@ class ReportProgress extends Component { ...@@ -47,6 +47,8 @@ class ReportProgress extends Component {
componentDidMount() { componentDidMount() {
this.getMonth() this.getMonth()
this.getReportType() this.getReportType()
// console.log(this.state.listCategory);
// console.log(this.state.category);
} }
getReportType() { getReportType() {
...@@ -54,31 +56,32 @@ class ReportProgress extends Component { ...@@ -54,31 +56,32 @@ class ReportProgress extends Component {
{ {
name: 'Master Budget', name: 'Master Budget',
value: 0 value: 0
},{ }, {
name: 'Monthly Report', name: 'Monthly Report',
value: 1 value: 1
},{ }, {
name: 'Operating Indicator', name: 'Operating Indicator',
value: 2 value: 2
},{ }, {
name: 'Rolling Outlook', name: 'Rolling Outlook',
value: 3 value: 3
}, },
] ]
let arrayReportTypeFinal = this.state.category.value.includes('status')? arrayReportType : arrayReportType.filter((val) => val.value != 2) let arrayReportTypeFinal = this.state.category.value.includes('status') ? arrayReportType : arrayReportType.filter((val) => val.value != 2)
let defaultProps = { let defaultProps = {
options: arrayReportTypeFinal, options: arrayReportTypeFinal,
getOptionLabel: (option) => option.name, getOptionLabel: (option) => option.name,
}; };
this.setState({listReportType: defaultProps, reportType: arrayReportTypeFinal[0]}, () => { this.setState({ listReportType: defaultProps, reportType: arrayReportTypeFinal[0] }, () => {
console.log(this.state.listReportType) console.log(this.state.listReportType)
console.log(this.state.reportType)
}) })
} }
getMonth() { getMonth() {
this.setState({loading: true}) this.setState({ loading: true })
api.create().getMonthTransaction().then(response => { api.create().getMonthTransaction().then(response => {
let dateNow = new Date() let dateNow = new Date()
dateNow.setMonth(dateNow.getMonth() - 1); dateNow.setMonth(dateNow.getMonth() - 1);
...@@ -158,11 +161,18 @@ class ReportProgress extends Component { ...@@ -158,11 +161,18 @@ class ReportProgress extends Component {
render() { render() {
const dataTable = [ const dataTableMB = [
['Tax Planning', '2', 'ABA: Anugerah Buminusantara Abadi', '2021-05-03'], ['Tax Planning', '2', 'ABA: Anugerah Buminusantara Abadi', '2021-05-03'],
['CAT', '1', 'ABA: Anugerah Buminusantara Abadi', '2021-05-03' ], ['CAT', '1', 'ABA: Anugerah Buminusantara Abadi', '2021-05-03'],
['Profit Loss', '0', 'ABA: Anugerah Buminusantara Abadi', '2021-05-03'] ['Profit Loss', '0', 'ABA: Anugerah Buminusantara Abadi', '2021-05-03']
] ]
const dataTableMBStatus = [
['ABA: Anugerah Buminusantara Abadi', '2021', 'approved', '2', 'Sudah Approved', 'Sudah Approved', 'Sudah Approved', 'Sudah Approved', 'Sudah Approved', 'Sudah Approved'],
['ABA: Anugerah Buminusantara Abadi', '2021', 'approved', '1', 'Sudah Approved', 'Sudah Approved', 'Sudah Approved', 'Sudah Approved', 'Sudah Approved', 'Sudah Approved'],
['ABA: Anugerah Buminusantara Abadi', '2021', 'approved', '0', 'Sudah Approved', 'Sudah Approved', 'Sudah Approved', 'Sudah Approved', 'Sudah Approved', 'Sudah Approved']
]
const loadingComponent = ( const loadingComponent = (
<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)' }}> <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 <PropagateLoader
...@@ -181,7 +191,7 @@ class ReportProgress extends Component { ...@@ -181,7 +191,7 @@ class ReportProgress extends Component {
<Typography style={{ fontSize: '16px', color: 'white' }}>Report Status & Approval Progress Monitoring</Typography> <Typography style={{ fontSize: '16px', color: 'white' }}>Report Status & Approval Progress Monitoring</Typography>
</div> </div>
<div style={{ padding: 20, width: '100%' }}> <div style={{ padding: 20, width: '100%' }}>
<Paper style={{ paddingTop: 10, paddingBottom: 50}}> <Paper style={{ paddingTop: 10, paddingBottom: 50 }}>
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} > <div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
<Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Report Status & Approval Progress</Typography> <Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Report Status & Approval Progress</Typography>
</div> </div>
...@@ -193,7 +203,7 @@ class ReportProgress extends Component { ...@@ -193,7 +203,7 @@ class ReportProgress extends Component {
onChange={(event, newInputValue) => this.setState({ category: newInputValue, loading: true }, () => { onChange={(event, newInputValue) => this.setState({ category: newInputValue, loading: true }, () => {
// this.getListUserSubcoRO() // this.getListUserSubcoRO()
this.getReportType() this.getReportType()
this.setState({loading: false}) this.setState({ loading: false })
})} })}
disableClearable disableClearable
style={{ minWidth: 210, marginRight: 20 }} style={{ minWidth: 210, marginRight: 20 }}
...@@ -205,7 +215,7 @@ class ReportProgress extends Component { ...@@ -205,7 +215,7 @@ class ReportProgress extends Component {
id="report-type" id="report-type"
onChange={(event, newInputValue) => this.setState({ reportType: newInputValue, loading: true }, () => { onChange={(event, newInputValue) => this.setState({ reportType: newInputValue, loading: true }, () => {
// this.getListUserSubcoRO() // this.getListUserSubcoRO()
this.setState({loading: false}) this.setState({ loading: false })
})} })}
disableClearable disableClearable
style={{ minWidth: 210, marginRight: 20 }} style={{ minWidth: 210, marginRight: 20 }}
...@@ -221,7 +231,7 @@ class ReportProgress extends Component { ...@@ -221,7 +231,7 @@ class ReportProgress extends Component {
id="periode" id="periode"
onChange={(event, newInputValue) => this.setState({ periodeMB: newInputValue, loading: true }, () => { onChange={(event, newInputValue) => this.setState({ periodeMB: newInputValue, loading: true }, () => {
// this.getListUserSubcoRO() // this.getListUserSubcoRO()
this.setState({loading: false}) this.setState({ loading: false })
})} })}
disableClearable disableClearable
style={{ minWidth: 210, marginRight: 20 }} style={{ minWidth: 210, marginRight: 20 }}
...@@ -233,7 +243,7 @@ class ReportProgress extends Component { ...@@ -233,7 +243,7 @@ class ReportProgress extends Component {
id="month" id="month"
onChange={(event, newInputValue) => this.setState({ month: newInputValue, loading: true }, () => { onChange={(event, newInputValue) => this.setState({ month: newInputValue, loading: true }, () => {
// this.getListUserSubcoRO() // this.getListUserSubcoRO()
this.setState({loading: false}) this.setState({ loading: false })
})} })}
disableClearable disableClearable
style={{ minWidth: 210, marginRight: 20 }} style={{ minWidth: 210, marginRight: 20 }}
...@@ -245,7 +255,7 @@ class ReportProgress extends Component { ...@@ -245,7 +255,7 @@ class ReportProgress extends Component {
id="quarter" id="quarter"
onChange={(event, newInputValue) => this.setState({ quarter: newInputValue, loading: true }, () => { onChange={(event, newInputValue) => this.setState({ quarter: newInputValue, loading: true }, () => {
// this.getListUserSubcoRO() // this.getListUserSubcoRO()
this.setState({loading: false}) this.setState({ loading: false })
})} })}
disableClearable disableClearable
style={{ minWidth: 210, marginRight: 20 }} style={{ minWidth: 210, marginRight: 20 }}
...@@ -283,18 +293,19 @@ class ReportProgress extends Component { ...@@ -283,18 +293,19 @@ class ReportProgress extends Component {
</div> */} </div> */}
{this.state.loading && loadingComponent} {this.state.loading && loadingComponent}
{/* {this.state.previewTable && ( */} {/* {this.state.previewTable && ( */}
<TableProgressReport <TableProgressReport
width={this.props.width} width={this.props.width}
height={this.props.height} height={this.props.height}
open={this.props.open} open={this.props.open}
// month={this.state.month.month_value} // month={this.state.month.month_value}
type={this.state.report ? this.state.report.value : 1} category={this.state.category ? this.state.category.value : 1}
dataTable={dataTable} reportType={this.state.reportType ? this.state.reportType.value : 0}
// dataTable={this.state.dataTable} dataTable={this.state.category ? dataTableMBStatus : dataTableMB}
periode={this.state.periode ? this.state.periode.periode : null} // dataTable={this.state.dataTable}
quarter={this.state.quarter.name} periode={this.state.periode ? this.state.periode.periode : null}
company={this.state.company} quarter={this.state.quarter.name}
/> company={this.state.company}
/>
{/* )} */} {/* )} */}
</div> </div>
</Paper> </Paper>
......
src/container/Progress/TableProgressReport.js
View file @ bb5e5515
import { createMuiTheme, FormControlLabel, Input, MuiThemeProvider, TableCell, Typography } from '@material-ui/core' import { createMuiTheme, FormControlLabel, Input, MuiThemeProvider, TableCell, Typography } 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";
import * as R from 'ramda' import * as R from "ramda";
var ct = require("../../library/CustomTable"); var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable3()); const getMuiTheme = () => createMuiTheme(ct.customTable3());
...@@ -18,146 +17,117 @@ const style = { ...@@ -18,146 +17,117 @@ const style = {
const style2 = { const style2 = {
position: "sticky", position: "sticky",
background: "white", background: "white",
zIndex: 100 zIndex: 100,
}; };
export default class TableProgressReport extends Component { export default class TableProgressReport extends Component {
render() { render() {
let dataTable2 = this.props.dataTable let dataTable2 = this.props.dataTable;
// console.log(this.props); console.log(this.props);
const columnMB = [ const columnMB = [
{ {
name: "Report Type", name: "Report Type",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 103, backgroundColor: '#1c71b8', width: 300 }}> <TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 103, backgroundColor: "#1c71b8", width: 300 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography> <Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "left" }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
setCellProps: () => ({ style }), setCellProps: () => ({ style }),
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return <div style={{ width: 300 }}>{val}</div>;
<div style={{ width: 300 }}> },
{ },
// tableMeta.rowData[4] == 0 ? },
// <span style={{ fontSize: 12, fontWeight: 'bold' }}>{String(tableMeta.rowData[0] === 4 ? "" : val).toUpperCase()}</span> {
// :
// <div style={{ paddingLeft: 20 * Number(tableMeta.rowData[4]) }}>
// <span style={{ fontSize: 12 }}>{tableMeta.rowData[0] === 4 ? "" : val}</span>
// </div>
val
}
</div>
)
}
}
}, {
name: "Revision", name: "Revision",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', borderRight: '1px solid #fff', borderLeft: '1px solid #fff', width: 100 }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: "#1c71b8", borderRight: "1px solid #fff", borderLeft: "1px solid #fff", width: 100 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
setCellProps: () => ({ style2 }), setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => { customBodyRender: (value, tableMeta, updateValue) => {
return ( return <div style={{ textAlign: "center" }}>{value}</div>;
<div style={{ textAlign: 'center' }}> },
{ },
value },
} {
</div>
)
}
}
}, {
name: "Company", name: "Company",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', borderRight: '1px solid #fff', borderLeft: '1px solid #fff' }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: "#1c71b8", borderRight: "1px solid #fff", borderLeft: "1px solid #fff" }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
setCellProps: () => ({ style2 }), setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => { customBodyRender: (value, tableMeta, updateValue) => {
return ( return <div style={{ width: 300, textAlign: "center" }}>{value}</div>;
<div style={{ width: 300, textAlign: 'center' }}> },
{ },
value },
} {
</div>
)
}
}
}, {
name: "Last Update", name: "Last Update",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96, borderLeft: '1px #fff solid' }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: "#1c71b8", width: 96, borderLeft: "1px #fff solid" }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return <div style={{ textAlign: "center", width: 100 }}>{val}</div>;
<div style={{ textAlign: 'center', width: 100 }}> },
{ },
val },
} ];
</div>
)
}
}
}]
const columnMBStatus = [ const columnMBStatus = [
{ {
name: "Company", name: "Company",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 103, backgroundColor: '#1c71b8', width: 300 }}> <TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 103, backgroundColor: "#1c71b8", width: 300 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography> <Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "left" }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
setCellProps: () => ({ style }), setCellProps: () => ({ style }),
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ width: 300 }}> <div style={{ width: 300 }}>
{ {tableMeta.rowData[4] == 0 ? (
tableMeta.rowData[4] == 0 ? <span style={{ fontSize: 12, fontWeight: "bold" }}>{String(tableMeta.rowData[0] === 4 ? "" : val).toUpperCase()}</span>
<span style={{ fontSize: 12, fontWeight: 'bold' }}>{String(tableMeta.rowData[0] === 4 ? "" : val).toUpperCase()}</span> ) : (
: <div style={{ paddingLeft: 20 * Number(tableMeta.rowData[4]) }}>
<div style={{ paddingLeft: 20 * Number(tableMeta.rowData[4]) }}> <span style={{ fontSize: 12 }}>{tableMeta.rowData[0] === 4 ? "" : val}</span>
<span style={{ fontSize: 12 }}>{tableMeta.rowData[0] === 4 ? "" : val}</span> </div>
</div> )}
}
</div> </div>
) );
} },
} },
}, { },
{
name: "Periode", name: "Periode",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', borderRight: '1px solid #fff', borderLeft: '1px solid #fff' }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: "#1c71b8", borderRight: "1px solid #fff", borderLeft: "1px solid #fff" }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
setCellProps: () => ({ style2 }), setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => { customBodyRender: (value, tableMeta, updateValue) => {
return ( return (
<div style={{ textAlign: 'center' }}> <div style={{ textAlign: "center" }}>
{tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ? {tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ? null : (
null :
<FormControlLabel <FormControlLabel
style={{ margin: 0 }} style={{ margin: 0 }}
value={value} value={value}
control={ control={
<NumberFormat <NumberFormat
thousandSeparator={true} thousandSeparator={true}
style={{ color: "black", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }} style={{ color: "black", fontSize: 12, textAlign: "right", borderColor: "transparent", margin: 0, width: 96, backgroundColor: "transparent" }}
type="text" type="text"
placeholder="" placeholder=""
suffix={"%"} suffix={"%"}
...@@ -168,188 +138,147 @@ export default class TableProgressReport extends Component { ...@@ -168,188 +138,147 @@ export default class TableProgressReport extends Component {
/> />
} }
/> />
} )}
</div> </div>
) );
} },
} },
}, { },
{
name: "Current Status", name: "Current Status",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', borderRight: '1px solid #fff', borderLeft: '1px solid #fff' }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: "#1c71b8", borderRight: "1px solid #fff", borderLeft: "1px solid #fff" }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
setCellProps: () => ({ style2 }), setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => { customBodyRender: (value, tableMeta, updateValue) => {
return ( return (
<div style={{ width: 90, textAlign: 'center' }}> <div style={{ width: 90, textAlign: "center" }}>
{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 4 ? {tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 4 ? null : (
null :
<div> <div>
<span style={{ fontSize: 12 }}>{tableMeta.rowData[0] === 4 ? "" : value}</span> <span style={{ fontSize: 12 }}>{tableMeta.rowData[0] === 4 ? "" : value}</span>
</div> </div>
} )}
</div> </div>
) );
} },
} },
}, { },
{
name: "Revision", name: "Revision",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96, borderLeft: '1px #fff solid' }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: "#1c71b8", width: 96, borderLeft: "1px #fff solid" }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return <div style={{ textAlign: "center", width: 60 }}>{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ? null : val}</div>;
<div style={{ textAlign: 'center', width: 60 }}> },
{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ? },
null : },
val {
}
</div>
)
}
}
}, {
name: "Approver", name: "Approver",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 60, borderLeft: '1px #fff solid' }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: "#1c71b8", width: 60, borderLeft: "1px #fff solid" }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return <div style={{ textAlign: "center", width: 60 }}>{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ? null : val}</div>;
<div style={{ textAlign: 'center', width: 60 }}> },
{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ? },
null : },
val {
}
</div>
)
}
}
}, {
name: "Approver 2", name: "Approver 2",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 60, borderLeft: '1px #fff solid' }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: "#1c71b8", width: 60, borderLeft: "1px #fff solid" }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
customBodyRender: (val, tableMeta, updateValue) => { customBodyRender: (val, tableMeta, updateValue) => {
return ( return <div style={{ textAlign: "center", width: 60 }}>{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ? null : val}</div>;
<div style={{ textAlign: 'center', width: 60 }}> },
{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ? },
null : },
val {
}
</div>
)
}
}
}, {
name: "Approver 3", name: "Approver 3",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 60, borderLeft: '1px #fff solid' }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: "#1c71b8", width: 60, borderLeft: "1px #fff solid" }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
customBodyRender: (val, tableMeta, updateValue) => { customBodyRender: (val, tableMeta, updateValue) => {
return ( return <div style={{ textAlign: "center", width: 60 }}>{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ? null : val}</div>;
<div style={{ textAlign: 'center', width: 60 }}> },
{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ? },
null : },
val {
}
</div>
)
}
}
}, {
name: "Approver 4", name: "Approver 4",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 60, borderLeft: '1px #fff solid' }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: "#1c71b8", width: 60, borderLeft: "1px #fff solid" }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
customBodyRender: (val, tableMeta, updateValue) => { customBodyRender: (val, tableMeta, updateValue) => {
return ( return <div style={{ textAlign: "center", width: 60 }}>{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ? null : val}</div>;
<div style={{ textAlign: 'center', width: 60 }}> },
{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ? },
null : },
val {
}
</div>
)
}
}
}, {
name: "Approver 5", name: "Approver 5",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 60, borderLeft: '1px #fff solid' }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: "#1c71b8", width: 60, borderLeft: "1px #fff solid" }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
customBodyRender: (val, tableMeta, updateValue) => { customBodyRender: (val, tableMeta, updateValue) => {
return ( return <div style={{ textAlign: "center", width: 60 }}>{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ? null : val}</div>;
<div style={{ textAlign: 'center', width: 60 }}> },
{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ? },
null : },
val {
}
</div>
)
}
}
}, {
name: "Approver 6", name: "Approver 6",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 60, borderLeft: '1px #fff solid' }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: "#1c71b8", width: 60, borderLeft: "1px #fff solid" }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
customBodyRender: (val, tableMeta, updateValue) => { customBodyRender: (val, tableMeta, updateValue) => {
return ( return <div style={{ textAlign: "center", width: 60 }}>{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ? null : val}</div>;
<div style={{ textAlign: 'center', width: 60 }}> },
{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ? },
null : },
val {
}
</div>
)
}
}
},{
name: "", name: "",
options: { options: {
display: false display: false,
} },
}] },
];
const columns = [] const columns = [];
return ( return (
<div> <div>
<div style={{ padding: '0px 20px 20px 20px', width: this.props.width - (this.props.open === true ? 350 : 100) }}> <div style={{ padding: "0px 20px 20px 20px", width: this.props.width - (this.props.open === true ? 350 : 100) }}>
<MuiThemeProvider theme={getMuiTheme()}> <MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable <MUIDataTable
data={dataTable2} data={dataTable2}
columns={this.props.type === 0 ? columnMBStatus : this.props.type === 1 ? columnMB : columns} columns={this.props.category === "report-status" ? columnMBStatus : this.props.category === "approval-progress" ? columnMB : columns}
// columns={this.props.type === 1 ? columnMB : this.props.type === 2 ? columnMR : this.props.type === 3 ? columnOI : this.props.type === 4 ? columnRO : columns}
options={options} options={options}
/> />
</MuiThemeProvider> </MuiThemeProvider>
</div> </div>
</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