Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
T
Tia-dev
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Dida Adams Arizona
Tia-dev
Commits
bb5e5515
Commit
bb5e5515
authored
Jun 15, 2021
by
Faisal Hamdi
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
faisal!
parent
0562fecb
Changes
3
Show whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
168 additions
and
228 deletions
+168
-228
package-lock.json
package-lock.json
+3
-3
ProgressReport.js
src/container/Progress/ProgressReport.js
+37
-26
TableProgressReport.js
src/container/Progress/TableProgressReport.js
+128
-199
No files found.
package-lock.json
View file @
bb5e5515
...
...
@@ -4223,9 +4223,9 @@
}
},
"caniuse-lite"
:
{
"version"
:
"1.0.30001
179
"
,
"resolved"
:
"https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001
179
.tgz"
,
"integrity"
:
"sha512-
blMmO0QQujuUWZKyVrD1msR4WNDAqb/UPO1Sw2WWsQ7deoM5bJiicKnWJ1Y0NS/aGINSnKPIWBMw5luX+NDUCA
=="
"version"
:
"1.0.30001
237
"
,
"resolved"
:
"https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001
237
.tgz"
,
"integrity"
:
"sha512-
pDHgRndit6p1NR2GhzMbQ6CkRrp4VKuSsqbcLeOQppYPKOYkKT/6ZvZDvKJUqcmtyWIAHuZq3SVS2vc1egCZzw
=="
},
"capture-exit"
:
{
"version"
:
"2.0.0"
,
...
...
src/container/Progress/ProgressReport.js
View file @
bb5e5515
...
...
@@ -47,6 +47,8 @@ class ReportProgress extends Component {
componentDidMount
()
{
this
.
getMonth
()
this
.
getReportType
()
// console.log(this.state.listCategory);
// console.log(this.state.category);
}
getReportType
()
{
...
...
@@ -54,31 +56,32 @@ class ReportProgress extends Component {
{
name
:
'Master Budget'
,
value
:
0
},{
},
{
name
:
'Monthly Report'
,
value
:
1
},{
},
{
name
:
'Operating Indicator'
,
value
:
2
},{
},
{
name
:
'Rolling Outlook'
,
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
=
{
options
:
arrayReportTypeFinal
,
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
.
reportType
)
})
}
getMonth
()
{
this
.
setState
({
loading
:
true
})
this
.
setState
({
loading
:
true
})
api
.
create
().
getMonthTransaction
().
then
(
response
=>
{
let
dateNow
=
new
Date
()
dateNow
.
setMonth
(
dateNow
.
getMonth
()
-
1
);
...
...
@@ -158,11 +161,18 @@ class ReportProgress extends Component {
render
()
{
const
dataTable
=
[
const
dataTable
MB
=
[
[
'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'
]
]
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
=
(
<
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
...
...
@@ -181,7 +191,7 @@ class ReportProgress extends Component {
<
Typography
style
=
{{
fontSize
:
'16px'
,
color
:
'white'
}}
>
Report
Status
&
Approval
Progress
Monitoring
<
/Typography
>
<
/div
>
<
div
style
=
{{
padding
:
20
,
width
:
'100%'
}}
>
<
Paper
style
=
{{
paddingTop
:
10
,
paddingBottom
:
50
}}
>
<
Paper
style
=
{{
paddingTop
:
10
,
paddingBottom
:
50
}}
>
<
div
style
=
{{
borderBottom
:
'solid 1px #c4c4c4'
}}
>
<
Typography
style
=
{{
fontSize
:
'12px'
,
color
:
'#4b4b4b'
,
margin
:
10
}}
>
Report
Status
&
Approval
Progress
<
/Typography
>
<
/div
>
...
...
@@ -193,7 +203,7 @@ class ReportProgress extends Component {
onChange
=
{(
event
,
newInputValue
)
=>
this
.
setState
({
category
:
newInputValue
,
loading
:
true
},
()
=>
{
// this.getListUserSubcoRO()
this
.
getReportType
()
this
.
setState
({
loading
:
false
})
this
.
setState
({
loading
:
false
})
})}
disableClearable
style
=
{{
minWidth
:
210
,
marginRight
:
20
}}
...
...
@@ -205,7 +215,7 @@ class ReportProgress extends Component {
id
=
"report-type"
onChange
=
{(
event
,
newInputValue
)
=>
this
.
setState
({
reportType
:
newInputValue
,
loading
:
true
},
()
=>
{
// this.getListUserSubcoRO()
this
.
setState
({
loading
:
false
})
this
.
setState
({
loading
:
false
})
})}
disableClearable
style
=
{{
minWidth
:
210
,
marginRight
:
20
}}
...
...
@@ -221,7 +231,7 @@ class ReportProgress extends Component {
id
=
"periode"
onChange
=
{(
event
,
newInputValue
)
=>
this
.
setState
({
periodeMB
:
newInputValue
,
loading
:
true
},
()
=>
{
// this.getListUserSubcoRO()
this
.
setState
({
loading
:
false
})
this
.
setState
({
loading
:
false
})
})}
disableClearable
style
=
{{
minWidth
:
210
,
marginRight
:
20
}}
...
...
@@ -233,7 +243,7 @@ class ReportProgress extends Component {
id
=
"month"
onChange
=
{(
event
,
newInputValue
)
=>
this
.
setState
({
month
:
newInputValue
,
loading
:
true
},
()
=>
{
// this.getListUserSubcoRO()
this
.
setState
({
loading
:
false
})
this
.
setState
({
loading
:
false
})
})}
disableClearable
style
=
{{
minWidth
:
210
,
marginRight
:
20
}}
...
...
@@ -245,7 +255,7 @@ class ReportProgress extends Component {
id
=
"quarter"
onChange
=
{(
event
,
newInputValue
)
=>
this
.
setState
({
quarter
:
newInputValue
,
loading
:
true
},
()
=>
{
// this.getListUserSubcoRO()
this
.
setState
({
loading
:
false
})
this
.
setState
({
loading
:
false
})
})}
disableClearable
style
=
{{
minWidth
:
210
,
marginRight
:
20
}}
...
...
@@ -288,8 +298,9 @@ class ReportProgress extends Component {
height
=
{
this
.
props
.
height
}
open
=
{
this
.
props
.
open
}
// month={this.state.month.month_value}
type
=
{
this
.
state
.
report
?
this
.
state
.
report
.
value
:
1
}
dataTable
=
{
dataTable
}
category
=
{
this
.
state
.
category
?
this
.
state
.
category
.
value
:
1
}
reportType
=
{
this
.
state
.
reportType
?
this
.
state
.
reportType
.
value
:
0
}
dataTable
=
{
this
.
state
.
category
?
dataTableMBStatus
:
dataTableMB
}
// dataTable={this.state.dataTable}
periode
=
{
this
.
state
.
periode
?
this
.
state
.
periode
.
periode
:
null
}
quarter
=
{
this
.
state
.
quarter
.
name
}
...
...
src/container/Progress/TableProgressReport.js
View file @
bb5e5515
import
{
createMuiTheme
,
FormControlLabel
,
Input
,
MuiThemeProvider
,
TableCell
,
Typography
}
from
'@material-ui/core'
import
MUIDataTable
from
'mui-datatables'
;
import
React
,
{
Component
}
from
'react'
import
NumberFormat
from
'react-number-format'
;
import
*
as
R
from
'ramda'
import
{
createMuiTheme
,
FormControlLabel
,
Input
,
MuiThemeProvider
,
TableCell
,
Typography
}
from
"@material-ui/core"
;
import
MUIDataTable
from
"mui-datatables"
;
import
React
,
{
Component
}
from
"react"
;
import
NumberFormat
from
"react-number-format"
;
import
*
as
R
from
"ramda"
;
var
ct
=
require
(
"../../library/CustomTable"
);
const
getMuiTheme
=
()
=>
createMuiTheme
(
ct
.
customTable3
());
...
...
@@ -18,146 +17,117 @@ const style = {
const
style2
=
{
position
:
"sticky"
,
background
:
"white"
,
zIndex
:
100
zIndex
:
100
,
};
export
default
class
TableProgressReport
extends
Component
{
render
()
{
let
dataTable2
=
this
.
props
.
dataTable
//
console.log(this.props);
let
dataTable2
=
this
.
props
.
dataTable
;
console
.
log
(
this
.
props
);
const
columnMB
=
[
{
name
:
"Report Type"
,
options
:
{
customHeadRender
:
(
columnMeta
)
=>
(
<
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
>
<
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
>
<
/TableCell
>
),
setCellProps
:
()
=>
({
style
}),
customBodyRender
:
(
val
,
tableMeta
)
=>
{
return
(
<
div
style
=
{{
width
:
300
}}
>
return
<
div
style
=
{{
width
:
300
}}
>
{
val
}
<
/div>
;
},
},
},
{
// 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"
,
options
:
{
customHeadRender
:
(
columnMeta
)
=>
(
<
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
>
<
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
>
<
/TableCell
>
),
setCellProps
:
()
=>
({
style2
}),
customBodyRender
:
(
value
,
tableMeta
,
updateValue
)
=>
{
return
(
<
div
style
=
{{
textAlign
:
'center'
}}
>
return
<
div
style
=
{{
textAlign
:
"center"
}}
>
{
value
}
<
/div>
;
},
},
},
{
value
}
<
/div
>
)
}
}
},
{
name
:
"Company"
,
options
:
{
customHeadRender
:
(
columnMeta
)
=>
(
<
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
>
<
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
>
<
/TableCell
>
),
setCellProps
:
()
=>
({
style2
}),
customBodyRender
:
(
value
,
tableMeta
,
updateValue
)
=>
{
return
(
<
div
style
=
{{
width
:
300
,
textAlign
:
'center'
}}
>
return
<
div
style
=
{{
width
:
300
,
textAlign
:
"center"
}}
>
{
value
}
<
/div>
;
},
},
},
{
value
}
<
/div
>
)
}
}
},
{
name
:
"Last Update"
,
options
:
{
customHeadRender
:
(
columnMeta
)
=>
(
<
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
>
<
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
>
<
/TableCell
>
),
customBodyRender
:
(
val
,
tableMeta
)
=>
{
return
(
<
div
style
=
{{
textAlign
:
'center'
,
width
:
100
}}
>
{
val
}
<
/div
>
)
}
}
}]
return
<
div
style
=
{{
textAlign
:
"center"
,
width
:
100
}}
>
{
val
}
<
/div>
;
},
},
},
];
const
columnMBStatus
=
[
{
name
:
"Company"
,
options
:
{
customHeadRender
:
(
columnMeta
)
=>
(
<
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
>
<
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
>
<
/TableCell
>
),
setCellProps
:
()
=>
({
style
}),
customBodyRender
:
(
val
,
tableMeta
)
=>
{
return
(
<
div
style
=
{{
width
:
300
}}
>
{
tableMeta
.
rowData
[
4
]
==
0
?
<
span
style
=
{{
fontSize
:
12
,
fontWeight
:
'bold'
}}
>
{
String
(
tableMeta
.
rowData
[
0
]
===
4
?
""
:
val
).
toUpperCase
()}
<
/span
>
:
{
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
>
}
)
}
<
/div
>
)
}
}
},
{
);
},
},
},
{
name
:
"Periode"
,
options
:
{
customHeadRender
:
(
columnMeta
)
=>
(
<
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
>
<
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
>
<
/TableCell
>
),
setCellProps
:
()
=>
({
style2
}),
customBodyRender
:
(
value
,
tableMeta
,
updateValue
)
=>
{
return
(
<
div
style
=
{{
textAlign
:
'center'
}}
>
{
tableMeta
.
rowData
[
0
]
===
2
||
tableMeta
.
rowData
[
0
]
===
4
?
null
:
<
div
style
=
{{
textAlign
:
"center"
}}
>
{
tableMeta
.
rowData
[
0
]
===
2
||
tableMeta
.
rowData
[
0
]
===
4
?
null
:
(
<
FormControlLabel
style
=
{{
margin
:
0
}}
value
=
{
value
}
control
=
{
<
NumberFormat
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"
placeholder
=
""
suffix
=
{
"%"
}
...
...
@@ -168,188 +138,147 @@ export default class TableProgressReport extends Component {
/
>
}
/
>
}
)
}
<
/div
>
)
}
}
},
{
);
},
},
},
{
name
:
"Current Status"
,
options
:
{
customHeadRender
:
(
columnMeta
)
=>
(
<
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
>
<
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
>
<
/TableCell
>
),
setCellProps
:
()
=>
({
style2
}),
customBodyRender
:
(
value
,
tableMeta
,
updateValue
)
=>
{
return
(
<
div
style
=
{{
width
:
90
,
textAlign
:
'center'
}}
>
{
tableMeta
.
rowData
[
0
]
===
1
||
tableMeta
.
rowData
[
0
]
===
4
?
null
:
<
div
style
=
{{
width
:
90
,
textAlign
:
"center"
}}
>
{
tableMeta
.
rowData
[
0
]
===
1
||
tableMeta
.
rowData
[
0
]
===
4
?
null
:
(
<
div
>
<
span
style
=
{{
fontSize
:
12
}}
>
{
tableMeta
.
rowData
[
0
]
===
4
?
""
:
value
}
<
/span
>
<
/div
>
}
)
}
<
/div
>
)
}
}
},
{
);
},
},
},
{
name
:
"Revision"
,
options
:
{
customHeadRender
:
(
columnMeta
)
=>
(
<
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
>
<
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
>
<
/TableCell
>
),
customBodyRender
:
(
val
,
tableMeta
)
=>
{
return
(
<
div
style
=
{{
textAlign
:
'center'
,
width
:
60
}}
>
{
tableMeta
.
rowData
[
0
]
===
1
||
tableMeta
.
rowData
[
0
]
===
2
||
tableMeta
.
rowData
[
0
]
===
4
?
null
:
val
}
<
/div
>
)
}
}
},
{
return
<
div
style
=
{{
textAlign
:
"center"
,
width
:
60
}}
>
{
tableMeta
.
rowData
[
0
]
===
1
||
tableMeta
.
rowData
[
0
]
===
2
||
tableMeta
.
rowData
[
0
]
===
4
?
null
:
val
}
<
/div>
;
},
},
},
{
name
:
"Approver"
,
options
:
{
customHeadRender
:
(
columnMeta
)
=>
(
<
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
>
<
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
>
<
/TableCell
>
),
customBodyRender
:
(
val
,
tableMeta
)
=>
{
return
(
<
div
style
=
{{
textAlign
:
'center'
,
width
:
60
}}
>
{
tableMeta
.
rowData
[
0
]
===
1
||
tableMeta
.
rowData
[
0
]
===
2
||
tableMeta
.
rowData
[
0
]
===
4
?
null
:
val
}
<
/div
>
)
}
}
},
{
return
<
div
style
=
{{
textAlign
:
"center"
,
width
:
60
}}
>
{
tableMeta
.
rowData
[
0
]
===
1
||
tableMeta
.
rowData
[
0
]
===
2
||
tableMeta
.
rowData
[
0
]
===
4
?
null
:
val
}
<
/div>
;
},
},
},
{
name
:
"Approver 2"
,
options
:
{
customHeadRender
:
(
columnMeta
)
=>
(
<
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
>
<
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
>
<
/TableCell
>
),
customBodyRender
:
(
val
,
tableMeta
,
updateValue
)
=>
{
return
(
<
div
style
=
{{
textAlign
:
'center'
,
width
:
60
}}
>
{
tableMeta
.
rowData
[
0
]
===
1
||
tableMeta
.
rowData
[
0
]
===
2
||
tableMeta
.
rowData
[
0
]
===
4
?
null
:
val
}
<
/div
>
)
}
}
},
{
return
<
div
style
=
{{
textAlign
:
"center"
,
width
:
60
}}
>
{
tableMeta
.
rowData
[
0
]
===
1
||
tableMeta
.
rowData
[
0
]
===
2
||
tableMeta
.
rowData
[
0
]
===
4
?
null
:
val
}
<
/div>
;
},
},
},
{
name
:
"Approver 3"
,
options
:
{
customHeadRender
:
(
columnMeta
)
=>
(
<
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
>
<
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
>
<
/TableCell
>
),
customBodyRender
:
(
val
,
tableMeta
,
updateValue
)
=>
{
return
(
<
div
style
=
{{
textAlign
:
'center'
,
width
:
60
}}
>
{
tableMeta
.
rowData
[
0
]
===
1
||
tableMeta
.
rowData
[
0
]
===
2
||
tableMeta
.
rowData
[
0
]
===
4
?
null
:
val
}
<
/div
>
)
}
}
},
{
return
<
div
style
=
{{
textAlign
:
"center"
,
width
:
60
}}
>
{
tableMeta
.
rowData
[
0
]
===
1
||
tableMeta
.
rowData
[
0
]
===
2
||
tableMeta
.
rowData
[
0
]
===
4
?
null
:
val
}
<
/div>
;
},
},
},
{
name
:
"Approver 4"
,
options
:
{
customHeadRender
:
(
columnMeta
)
=>
(
<
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
>
<
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
>
<
/TableCell
>
),
customBodyRender
:
(
val
,
tableMeta
,
updateValue
)
=>
{
return
(
<
div
style
=
{{
textAlign
:
'center'
,
width
:
60
}}
>
{
tableMeta
.
rowData
[
0
]
===
1
||
tableMeta
.
rowData
[
0
]
===
2
||
tableMeta
.
rowData
[
0
]
===
4
?
null
:
val
}
<
/div
>
)
}
}
},
{
return
<
div
style
=
{{
textAlign
:
"center"
,
width
:
60
}}
>
{
tableMeta
.
rowData
[
0
]
===
1
||
tableMeta
.
rowData
[
0
]
===
2
||
tableMeta
.
rowData
[
0
]
===
4
?
null
:
val
}
<
/div>
;
},
},
},
{
name
:
"Approver 5"
,
options
:
{
customHeadRender
:
(
columnMeta
)
=>
(
<
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
>
<
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
>
<
/TableCell
>
),
customBodyRender
:
(
val
,
tableMeta
,
updateValue
)
=>
{
return
(
<
div
style
=
{{
textAlign
:
'center'
,
width
:
60
}}
>
{
tableMeta
.
rowData
[
0
]
===
1
||
tableMeta
.
rowData
[
0
]
===
2
||
tableMeta
.
rowData
[
0
]
===
4
?
null
:
val
}
<
/div
>
)
}
}
},
{
return
<
div
style
=
{{
textAlign
:
"center"
,
width
:
60
}}
>
{
tableMeta
.
rowData
[
0
]
===
1
||
tableMeta
.
rowData
[
0
]
===
2
||
tableMeta
.
rowData
[
0
]
===
4
?
null
:
val
}
<
/div>
;
},
},
},
{
name
:
"Approver 6"
,
options
:
{
customHeadRender
:
(
columnMeta
)
=>
(
<
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
>
<
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
>
<
/TableCell
>
),
customBodyRender
:
(
val
,
tableMeta
,
updateValue
)
=>
{
return
(
<
div
style
=
{{
textAlign
:
'center'
,
width
:
60
}}
>
{
tableMeta
.
rowData
[
0
]
===
1
||
tableMeta
.
rowData
[
0
]
===
2
||
tableMeta
.
rowData
[
0
]
===
4
?
null
:
val
}
<
/div
>
)
}
}
},{
return
<
div
style
=
{{
textAlign
:
"center"
,
width
:
60
}}
>
{
tableMeta
.
rowData
[
0
]
===
1
||
tableMeta
.
rowData
[
0
]
===
2
||
tableMeta
.
rowData
[
0
]
===
4
?
null
:
val
}
<
/div>
;
},
},
},
{
name
:
""
,
options
:
{
display
:
false
}
}]
display
:
false
,
},
},
];
const
columns
=
[]
const
columns
=
[]
;
return
(
<
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
()}
>
<
MUIDataTable
data
=
{
dataTable2
}
columns
=
{
this
.
props
.
type
===
0
?
columnMBStatus
:
this
.
props
.
type
===
1
?
columnMB
:
columns
}
// columns={this.props.type === 1 ? columnMB : this.props.type === 2 ? columnMR : this.props.type === 3 ? columnOI : this.props.type === 4 ? columnRO : columns}
columns
=
{
this
.
props
.
category
===
"report-status"
?
columnMBStatus
:
this
.
props
.
category
===
"approval-progress"
?
columnMB
:
columns
}
options
=
{
options
}
/
>
<
/MuiThemeProvider
>
<
/div
>
<
/div
>
)
)
;
}
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment