Skip to content

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

Merge branch 'faisal' into 'master' 

faisal!

See merge request !1515
parents 63ebc792 9d931a59
Hide whitespace changes
Inline Side-by-side
Showing with 168 additions and 228 deletions
package-lock.json
View file @ 41421ad8
...@@ -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 @ 41421ad8
...@@ -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 @ 41421ad8
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