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
ef0e5e82
Commit
ef0e5e82
authored
Aug 12, 2020
by
Dida Adams Arizona
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'rifka' into 'master'
add preview and visual approval matrix See merge request
!50
parents
79d5557d
b56ef21c
Changes
3
Show whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
333 additions
and
87 deletions
+333
-87
ApprovalMatrix.js
src/container/ApprovalMatrix/ApprovalMatrix.js
+137
-87
PreviewAM.js
src/container/ApprovalMatrix/PreviewAM.js
+49
-0
VisualisasiAM.js
src/container/ApprovalMatrix/VisualisasiAM.js
+147
-0
No files found.
src/container/ApprovalMatrix/ApprovalMatrix.js
View file @
ef0e5e82
import
React
,
{
Component
}
from
'react'
;
import
{
Container
,
Row
,
Col
}
from
"react-bootstrap"
;
import
{
makeStyles
,
createMuiTheme
,
MuiThemeProvider
}
from
'@material-ui/core/styles'
;
import
TextField
from
"@material-ui/core/TextField
"
;
import
{
TextField
,
InputBase
}
from
"@material-ui/core
"
;
import
Images
from
'../../assets/Images'
;
import
MUIDataTable
from
"mui-datatables"
;
import
CreateApprovalMatrix
from
"./CreateApprovalMatrix"
;
import
EditApprovalMatrix
from
"./EditApprovalMatrix"
;
import
PreviewAM
from
"./PreviewAM"
;
import
VisualisasiAM
from
"./VisualisasiAM"
;
var
ct
=
require
(
"../../library/CustomTable"
);
const
getMuiTheme
=
()
=>
createMuiTheme
(
ct
.
customTable
());
const
options
=
ct
.
customOptions
();
const
type
=
[
{
value
:
'KPI'
,
label
:
'KPI'
,
},
{
value
:
'Gatau'
,
label
:
'Gatau'
,
},
];
export
default
class
ApprovalMatrix
extends
Component
{
constructor
(
props
)
{
super
(
props
)
this
.
state
=
{
visibleAM
:
true
,
visibleCreate
:
false
,
visibleEdit
:
false
visibleEdit
:
false
,
visibleVisual
:
false
,
search
:
""
,
}
}
componentDidMount
()
{
}
handleInputChange
=
(
e
)
=>
{
// Immediately update the state
this
.
setState
({
search
:
e
.
target
.
value
})
// Execute the debounced onChange method
this
.
onChangeDebounced
(
e
)
}
onChangeDebounced
=
(
e
)
=>
{
// Delayed logic goes here
}
render
()
{
const
columns
=
[{
name
:
"Action"
,
...
...
@@ -54,14 +84,26 @@ export default class ApprovalMatrix extends Component {
]
return
(
<
div
>
{
this
.
state
.
visibleAM
===
true
?
<
div
style
=
{{
height
:
this
.
props
.
height
}}
>
<
div
style
=
{{
height
:
199
,
width
:
'100%'
,
backgroundColor
:
'#354960'
}}
/
>
<
div
>
<
div
style
=
{{
display
:
'flex'
,
flexDirection
:
'row'
,
justifyContent
:
'space-between'
,
paddingRight
:
25
,
paddingLeft
:
25
,
marginTop
:
-
150
}}
>
<
label
style
=
{{
color
:
'white'
,
width
:
'20%'
,
fontSize
:
16
}}
>
Master
Data
-
Approval
Matrix
<
/label
>
<
form
style
=
{{
}}
>
<
label
style
=
{{
color
:
'white'
,
fontSize
:
16
,
alignSelf
:
'center'
,
paddingTop
:
8
}}
>
Master
Data
-
Approval
Matrix
<
/label
>
{
/*
<form style={{ }}>
<TextField id="" label="" variant="outlined" size="small" placeholder="Search" style={{ width: 423, backgroundColor: 'white', borderRadius: 6 }}/>
<
/form
>
</form> */
}
<
div
style
=
{{
color
:
'white'
,
width
:
'50%'
,
height
:
37
,
display
:
'flex'
,
backgroundColor
:
'white'
,
borderWidth
:
2
,
alignItems
:
'center'
,
borderRadius
:
6
,
paddingLeft
:
5
,
paddingRight
:
5
}}
>
<
img
src
=
{
Images
.
searchBlack
}
style
=
{{
marginRight
:
10
}}
/
>
<
InputBase
style
=
{{
width
:
'100%'
}}
placeholder
=
"Search"
value
=
{
this
.
state
.
search
}
onChange
=
{(
e
)
=>
this
.
handleInputChange
(
e
)}
inputProps
=
{{
'aria-label'
:
'naked'
}}
/
>
<
/div
>
<
div
style
=
{{
display
:
'flex'
}}
>
<
button
style
=
{{
...
...
@@ -108,7 +150,7 @@ export default class ApprovalMatrix extends Component {
}}
onClick
=
{()
=>
null
}
>
<
img
src
=
{
Images
.
visualisasi
}
/
>
<
img
src
=
{
Images
.
visualisasi
}
onClick
=
{()
=>
this
.
setState
({
visibleVisual
:
true
,
visibleAM
:
false
})
}
/
>
<
/button
>
<
button
style
=
{{
...
...
@@ -133,6 +175,9 @@ export default class ApprovalMatrix extends Component {
<
/MuiThemeProvider
>
<
/div
>
<
/div
>
<
/div
>
:
false
}
{
this
.
state
.
visibleCreate
&&
(
<
CreateApprovalMatrix
onClickClose
=
{()
=>
this
.
setState
({
visibleCreate
:
false
})}
...
...
@@ -143,6 +188,11 @@ export default class ApprovalMatrix extends Component {
onClickClose
=
{()
=>
this
.
setState
({
visibleEdit
:
false
})}
/
>
)}
{
this
.
state
.
visibleVisual
&&
(
<
VisualisasiAM
onClickClose
=
{()
=>
this
.
setState
({
visibleVisual
:
false
})}
/
>
)}
<
/div
>
);
}
...
...
src/container/ApprovalMatrix/PreviewAM.js
0 → 100644
View file @
ef0e5e82
import
React
,
{
Component
}
from
'react'
;
import
{
Container
,
Row
,
Col
}
from
"react-bootstrap"
;
import
{
makeStyles
,
createMuiTheme
,
MuiThemeProvider
}
from
'@material-ui/core/styles'
;
import
MUIDataTable
from
"mui-datatables"
;
var
ct
=
require
(
"../../library/CustomTable"
);
const
getMuiTheme
=
()
=>
createMuiTheme
(
ct
.
customTable
());
const
options
=
ct
.
customOptions
();
export
default
class
PreviewAM
extends
Component
{
render
()
{
const
columns
=
[
"ID"
,
"Tipe Persetujuan"
,
"Order"
,
"Nama Pemberi Persetujuan"
,
"Operator"
,
"Berlaku Mulai"
,
"Berlaku Hingga"
]
const
data
=
[
[
"1"
,
"Yearly"
,
"1"
,
"John Doe"
,
"-"
,
"2020-01-01"
,
"2020-12-31"
],
[
"2"
,
"Yearly"
,
"2"
,
"John Doe"
,
"-"
,
"2020-01-01"
,
"2020-12-31"
],
[
"3"
,
"Yearly"
,
"2"
,
"John Doe"
,
"AND"
,
"2020-01-01"
,
"2020-12-31"
],
[
"4"
,
"Yearly"
,
"2"
,
"John Doe"
,
"AND"
,
"2020-01-01"
,
"2020-12-31"
],
[
"5"
,
"Yearly"
,
"3"
,
"John Doe"
,
"-"
,
"2020-01-01"
,
"2020-12-31"
],
]
return
(
<
div
style
=
{{
height
:
this
.
props
.
height
}}
>
<
div
style
=
{{
height
:
199
,
width
:
'100%'
,
backgroundColor
:
'#354960'
}}
/
>
<
div
>
<
div
style
=
{{
display
:
'flex'
,
flexDirection
:
'row'
,
justifyContent
:
'space-between'
,
paddingRight
:
25
,
paddingLeft
:
25
,
marginTop
:
-
150
}}
>
<
label
style
=
{{
color
:
'white'
,
width
:
'20%'
,
fontSize
:
16
,
paddingTop
:
8
}}
>
Preview
Data
<
/label
>
<
/div
>
<
div
style
=
{{
padding
:
25
,
width
:
'100%'
}}
>
<
MuiThemeProvider
theme
=
{
getMuiTheme
()}
>
<
MUIDataTable
data
=
{
data
}
columns
=
{
columns
}
options
=
{
options
}
/
>
<
/MuiThemeProvider
>
<
/div
>
<
div
className
=
"row"
style
=
{{
alignSelf
:
'center'
,
float
:
'right'
,
marginRight
:
25
}}
>
<
div
onClick
=
{()
=>
this
.
props
.
onClickClose
()}
style
=
{{
width
:
102
,
height
:
30
,
border
:
'solid 1px #354960'
,
borderRadius
:
5
,
alignItems
:
'center'
,
display
:
'flex'
,
justifyContent
:
'center'
,
cursor
:
"pointer"
}}
>
<
span
style
=
{{
color
:
'#354960'
,
fontSize
:
11
}}
>
Batal
<
/span
>
<
/div
>
<
div
style
=
{{
width
:
102
,
height
:
30
,
marginLeft
:
25
,
backgroundColor
:
'#354960'
,
borderRadius
:
5
,
alignItems
:
'center'
,
display
:
'flex'
,
justifyContent
:
'center'
,
cursor
:
"pointer"
}}
>
<
span
style
=
{{
color
:
'#fff'
,
fontSize
:
11
}}
>
Simpan
<
/span
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
);
}
}
src/container/ApprovalMatrix/VisualisasiAM.js
0 → 100644
View file @
ef0e5e82
import
React
,
{
Component
}
from
'react'
;
import
{
Container
,
Row
,
Col
}
from
"react-bootstrap"
;
import
{
makeStyles
,
createMuiTheme
,
MuiThemeProvider
}
from
'@material-ui/core/styles'
;
import
{
TextField
}
from
'@material-ui/core'
;
import
MenuItem
from
'@material-ui/core/MenuItem'
;
import
ApprovalMatrix
from
"./ApprovalMatrix"
;
const
type
=
[
{
value
:
'KPI'
,
label
:
'KPI'
,
},
{
value
:
'Gatau'
,
label
:
'Gatau'
,
},
];
export
default
class
PreviewAM
extends
Component
{
constructor
(
props
)
{
super
(
props
)
this
.
state
=
{
visibleAM
:
false
,
visibleVisual
:
true
}
}
componentDidMount
()
{
}
render
()
{
return
(
<
div
>
{
this
.
state
.
visibleVisual
===
true
?
<
div
style
=
{{
height
:
this
.
props
.
height
}}
>
<
div
style
=
{{
height
:
199
,
width
:
'100%'
,
backgroundColor
:
'#354960'
}}
/
>
<
div
>
<
div
style
=
{{
display
:
'flex'
,
flexDirection
:
'row'
,
justifyContent
:
'space-between'
,
paddingRight
:
25
,
paddingLeft
:
25
,
marginTop
:
-
150
}}
>
<
label
style
=
{{
color
:
'white'
,
width
:
'20%'
,
fontSize
:
16
,
paddingTop
:
8
}}
>
Visualisasi
Data
<
/label
>
<
/div
>
<
div
style
=
{{
padding
:
25
,
width
:
'100%'
}}
>
<
div
style
=
{{
width
:
'100%'
,
padding
:
25
,
backgroundColor
:
'white'
,
borderRadius
:
6
,
border
:
'solid 1px #c4c4c4'
}}
>
<
label
style
=
{{
color
:
'#4b4b4b'
,
fontSize
:
'16px'
,
fontWeight
:
'bold'
}}
>
Hirarki
Persetujuan
<
/label
>
<
div
className
=
""
style
=
{{
width
:
250
,
marginTop
:
8
,
marginBottom
:
28
}}
>
<
TextField
style
=
{{
width
:
'100%'
}}
id
=
"type"
select
label
=
"Tipe Persetujuan"
// value={this.state.periode}
onChange
=
{(
e
)
=>
null
}
>
{
type
.
map
((
option
)
=>
(
<
MenuItem
key
=
{
option
.
value
}
value
=
{
option
.
value
}
>
{
option
.
label
}
<
/MenuItem
>
))}
<
/TextField
>
<
/div
>
<
div
className
=
"grid grid-4x grid-mobile-none gap-15px"
>
<
div
className
=
"column-1"
>
<
div
className
=
"margin-bottom-20px"
>
<
label
style
=
{{
color
:
'#4b4b4b'
,
fontSize
:
'14px'
}}
>
1
.
John
Doe
<
/label
>
<
/div
>
<
/div
>
<
div
className
=
"column-2"
>
<
/div
>
<
div
className
=
"column-3"
>
<
/div
>
<
div
className
=
"column-4"
>
<
/div
>
<
/div
>
<
div
className
=
"grid grid-4x grid-mobile-none gap-15px"
>
<
div
className
=
"column-1"
>
<
div
className
=
"margin-bottom-20px"
>
<
label
style
=
{{
color
:
'#4b4b4b'
,
fontSize
:
'14px'
}}
>
2
.
Barbara
Rosa
<
/label
>
<
/div
>
<
/div
>
<
div
className
=
"column-2"
>
<
div
className
=
"margin-bottom-20px"
>
<
label
style
=
{{
color
:
'#4b4b4b'
,
fontSize
:
'14px'
}}
>
Aneesa
Hassan
<
/label
>
<
/div
>
<
/div
>
<
div
className
=
"column-3"
>
<
div
className
=
"margin-bottom-20px"
>
<
label
style
=
{{
color
:
'#4b4b4b'
,
fontSize
:
'14px'
}}
>
AND
<
/label
>
<
/div
>
<
/div
>
<
/div
>
<
div
className
=
"grid grid-4x grid-mobile-none gap-15px"
>
<
div
className
=
"column-1"
>
<
div
className
=
"margin-bottom-20px"
>
<
label
style
=
{{
color
:
'#4b4b4b'
,
fontSize
:
'14px'
}}
>
3
.
Cole
Park
<
/label
>
<
/div
>
<
/div
>
<
div
className
=
"column-2"
>
<
div
className
=
"margin-bottom-20px"
>
<
label
style
=
{{
color
:
'#4b4b4b'
,
fontSize
:
'14px'
}}
>
Levison
Robin
<
/label
>
<
/div
>
<
/div
>
<
div
className
=
"column-3"
>
<
div
className
=
"margin-bottom-20px"
>
<
label
style
=
{{
color
:
'#4b4b4b'
,
fontSize
:
'14px'
}}
>
OR
<
/label
>
<
/div
>
<
/div
>
<
/div
>
<
div
className
=
"grid grid-4x grid-mobile-none gap-15px"
>
<
div
className
=
"column-1"
>
<
div
className
=
"margin-bottom-20px"
>
<
label
style
=
{{
color
:
'#4b4b4b'
,
fontSize
:
'14px'
}}
>
4
.
Madison
Price
<
/label
>
<
/div
>
<
/div
>
<
div
className
=
"column-2"
>
<
/div
>
<
div
className
=
"column-3"
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
div
className
=
"row"
style
=
{{
display
:
'flex'
,
flexDirection
:
'row'
,
justifyContent
:
'space-between'
,
paddingRight
:
15
,
paddingLeft
:
15
,
paddingBottom
:
25
}}
>
<
div
onClick
=
{()
=>
this
.
setState
({
visibleVisual
:
false
,
visibleAM
:
true
})}
style
=
{{
width
:
102
,
height
:
30
,
marginLeft
:
25
,
backgroundColor
:
'dodgerblue'
,
borderRadius
:
5
,
alignItems
:
'center'
,
display
:
'flex'
,
justifyContent
:
'center'
,
cursor
:
"pointer"
}}
>
<
span
style
=
{{
color
:
'#fff'
,
fontSize
:
11
}}
>
Kembali
<
/span
>
<
/div
>
<
div
className
=
"row"
style
=
{{
float
:
'right'
,
marginRight
:
25
}}
>
<
div
onClick
=
{()
=>
this
.
props
.
onClickClose
()}
style
=
{{
width
:
102
,
height
:
30
,
border
:
'solid 1px #354960'
,
borderRadius
:
5
,
alignItems
:
'center'
,
display
:
'flex'
,
justifyContent
:
'center'
,
cursor
:
"pointer"
}}
>
<
span
style
=
{{
color
:
'#354960'
,
fontSize
:
11
}}
>
Batal
<
/span
>
<
/div
>
<
div
style
=
{{
width
:
102
,
height
:
30
,
marginLeft
:
25
,
backgroundColor
:
'#354960'
,
borderRadius
:
5
,
alignItems
:
'center'
,
display
:
'flex'
,
justifyContent
:
'center'
,
cursor
:
"pointer"
}}
>
<
span
style
=
{{
color
:
'#fff'
,
fontSize
:
11
}}
>
Simpan
<
/span
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
:
false
}
{
this
.
state
.
visibleAM
&&
(
<
ApprovalMatrix
onClickClose
=
{()
=>
this
.
setState
({
visibleAM
:
false
})}
/
>
)}
<
/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