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
1220dd40
Commit
1220dd40
authored
Aug 11, 2020
by
Deni Rinaldi
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
preview unit bisnis
parent
43482619
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
133 additions
and
54 deletions
+133
-54
UnitBisnis.js
src/container/MasterData/UnitBisnis.js
+119
-54
CustomTable.js
src/library/CustomTable.js
+14
-0
No files found.
src/container/MasterData/UnitBisnis.js
View file @
1220dd40
...
...
@@ -13,6 +13,7 @@ import api from "../../api";
var
ct
=
require
(
"../../library/CustomTable"
);
const
getMuiTheme
=
()
=>
createMuiTheme
(
ct
.
customTable
());
const
options
=
ct
.
customOptions
();
const
options2
=
ct
.
customOptions2
();
export
default
class
UnitBisnis
extends
Component
{
constructor
(
props
)
{
...
...
@@ -22,7 +23,12 @@ export default class UnitBisnis extends Component {
visibleEdit
:
false
,
dataTable
:
[],
listData
:
[],
data
:
[]
data
:
[],
search
:
""
,
visibleUnitBisnis
:
true
,
cols
:
null
,
rows
:
null
,
dataLoaded
:
false
}
this
.
fileHandler
=
this
.
fileHandler
.
bind
(
this
);
}
...
...
@@ -30,16 +36,24 @@ export default class UnitBisnis extends Component {
fileHandler
=
(
event
)
=>
{
let
fileObj
=
event
ExcelRenderer
(
fileObj
,
(
err
,
resp
)
=>
{
// console.log(resp);
// if (err) {
// console.log(err);
// }
// else {
// this.setState({
// cols: resp.cols,
// rows: resp.rows
// });
// }
if
(
err
)
{
console
.
log
(
err
);
}
else
{
let
judul
=
resp
.
rows
[
0
]
let
isi
=
resp
.
rows
.
slice
(
1
)
// let body = isi.map((item) => {
// return {
// item
// ]
// })
console
.
log
(
JSON
.
stringify
(
isi
));
this
.
setState
({
dataLoaded
:
true
,
cols
:
judul
,
rows
:
isi
});
}
});
}
...
...
@@ -74,7 +88,20 @@ export default class UnitBisnis extends Component {
visibleCreate
:
true
})
}
}
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
()
{
...
...
@@ -143,55 +170,93 @@ export default class UnitBisnis extends Component {
return
(
<
div
style
=
{{
height
:
this
.
props
.
height
}}
>
{
/* <Row> */
}
<
div
style
=
{{
height
:
199
,
backgroundColor
:
'#354960'
,
width
:
'100%'
}}
/
>
<
div
>
<
div
style
=
{{
display
:
'flex'
,
flexDirection
:
'row'
,
justifyContent
:
'space-between'
,
paddingRight
:
25
,
paddingLeft
:
25
,
marginTop
:
-
150
}}
>
<
label
style
=
{{
color
:
'white'
,
fontSize
:
16
,
alignSelf
:
'center'
}}
>
Master
Data
-
Unit
Bisnis
<
/label
>
<
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"
inputProps
=
{{
'aria-label'
:
'naked'
}}
/
>
{
this
.
state
.
visibleUnitBisnis
===
true
?
<
div
>
<
div
style
=
{{
display
:
'flex'
,
flexDirection
:
'row'
,
justifyContent
:
'space-between'
,
paddingRight
:
25
,
paddingLeft
:
25
,
marginTop
:
-
150
}}
>
<
label
style
=
{{
color
:
'white'
,
fontSize
:
16
,
alignSelf
:
'center'
}}
>
Master
Data
-
Unit
Bisnis
<
/label
>
<
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
=
{{
width
:
'20%'
,
justifyContent
:
'space-around'
,
display
:
'flex'
}}
>
<
img
src
=
{
Images
.
template
}
/
>
<
button
style
=
{{
backgroundColor
:
'transparent'
,
cursor
:
'pointer'
,
borderColor
:
'transparent'
}}
onClick
=
{()
=>
this
.
setState
({
visibleUpload
:
true
})}
>
<
img
src
=
{
Images
.
upload
}
/
>
<
/button
>
<
img
src
=
{
Images
.
download
}
/
>
<
button
style
=
{{
backgroundColor
:
'transparent'
,
cursor
:
'pointer'
,
borderColor
:
'transparent'
}}
onClick
=
{()
=>
this
.
setState
({
visibleCreate
:
true
})}
>
<
img
src
=
{
Images
.
add
}
/
>
<
/button
>
<
/div
>
<
/div
>
<
div
style
=
{{
width
:
'20%'
,
justifyContent
:
'space-around'
,
display
:
'flex'
}}
>
<
img
src
=
{
Images
.
template
}
/
>
<
button
style
=
{{
backgroundColor
:
'transparent'
,
cursor
:
'pointer'
,
borderColor
:
'transparent'
}}
onClick
=
{()
=>
this
.
setState
({
visibleUpload
:
true
})}
>
<
img
src
=
{
Images
.
upload
}
/
>
<
/button
>
<
img
src
=
{
Images
.
download
}
/
>
<
div
style
=
{{
padding
:
25
}}
>
<
MuiThemeProvider
theme
=
{
getMuiTheme
()}
>
<
MUIDataTable
theme
=
{
getMuiTheme
()}
data
=
{
this
.
state
.
dataTable
}
columns
=
{
columns
}
options
=
{
options
}
/
>
<
/MuiThemeProvider
>
<
/div
>
<
/div
>
:
<
div
>
<
div
style
=
{{
display
:
'flex'
,
flexDirection
:
'row'
,
justifyContent
:
'space-between'
,
paddingRight
:
25
,
paddingLeft
:
25
,
marginTop
:
-
150
}}
>
<
label
style
=
{{
color
:
'white'
,
fontSize
:
16
,
alignSelf
:
'center'
}}
>
Preview
Data
<
/label
>
<
/div
>
<
div
style
=
{{
padding
:
25
}}
>
{
this
.
state
.
dataLoaded
&&
(
<
MuiThemeProvider
theme
=
{
getMuiTheme
()}
>
<
MUIDataTable
theme
=
{
getMuiTheme
()}
data
=
{
this
.
state
.
rows
}
columns
=
{
this
.
state
.
cols
}
options
=
{
options2
}
/
>
<
/MuiThemeProvider
>
)}
<
/div
>
<
div
style
=
{{
display
:
'flex'
,
width
:
'100%'
,
placeContent
:
'flex-end'
,
padding
:
20
}}
>
<
button
style
=
{{
backgroundColor
:
'transparent'
,
cursor
:
'pointer'
,
borderColor
:
'transparent'
}}
onClick
=
{()
=>
this
.
setState
({
visibleCreate
:
true
})}
type
=
"button"
onClick
=
{()
=>
this
.
setState
({
visibleUnitBisnis
:
true
})}
style
=
{{
marginRight
:
20
}}
>
<
img
src
=
{
Images
.
add
}
/
>
<
div
style
=
{{
width
:
102
,
height
:
30
,
border
:
'solid 1px #354960'
,
borderRadius
:
5
,
alignItems
:
'center'
,
display
:
'flex'
,
justifyContent
:
'center'
}}
>
<
span
style
=
{{
color
:
'#354960'
,
fontSize
:
11
}}
>
Batal
<
/span
>
<
/div
>
<
/button
>
<
div
style
=
{{
width
:
102
,
height
:
30
,
backgroundColor
:
'#354960'
,
borderRadius
:
5
,
alignItems
:
'center'
,
display
:
'flex'
,
justifyContent
:
'center'
}}
>
<
span
style
=
{{
color
:
'#fff'
,
fontSize
:
11
}}
>
Simpan
<
/span
>
<
/div
>
<
/div
>
<
/div
>
<
div
style
=
{{
padding
:
25
}}
>
<
MuiThemeProvider
theme
=
{
getMuiTheme
()}
>
<
MUIDataTable
theme
=
{
getMuiTheme
()}
data
=
{
this
.
state
.
dataTable
}
columns
=
{
columns
}
options
=
{
options
}
/
>
<
/MuiThemeProvider
>
}
<
/div
>
<
/div
>
{
this
.
state
.
visibleCreate
&&
(
<
CreateUnitBisnis
onClickClose
=
{()
=>
this
.
setState
({
visibleCreate
:
false
})}
...
...
@@ -233,7 +298,7 @@ export default class UnitBisnis extends Component {
this
.
fileHandler
(
dt
)
this
.
setState
({
uploadStatus
:
'idle'
,
percentage
:
'0'
})
}}
onUpload
=
{()
=>
this
.
setState
({
visibleUpload
:
false
})}
onUpload
=
{()
=>
this
.
setState
({
visibleUpload
:
false
,
visibleUnitBisnis
:
false
})}
/
>
<
/div
>
<
/div
>
...
...
src/library/CustomTable.js
View file @
1220dd40
...
...
@@ -320,6 +320,20 @@ exports.customOptions = function () {
}
}
exports
.
customOptions2
=
function
()
{
return
{
// selectableRows: false,
selectableRows
:
'none'
,
filterType
:
'multiselect'
,
responsive
:
'scrollMaxHeight'
,
rowsPerPage
:
5
,
rowsPerPageOptions
:
[
5
,
10
,
20
,
50
],
print
:
false
,
download
:
false
,
elevation
:
5
,
}
}
exports
.
customOptionsFixedColumn
=
function
()
{
return
{
// selectableRows: false,
...
...
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