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
1c29402a
Commit
1c29402a
authored
Aug 17, 2020
by
Dida Adams Arizona
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'didam' into 'master'
Didam See merge request
!103
parents
438eb1c7
40c36111
Changes
2
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
161 additions
and
106 deletions
+161
-106
AddUser.js
src/container/Otorisasi/User/AddUser.js
+109
-37
EditUser.js
src/container/Otorisasi/User/EditUser.js
+52
-69
No files found.
src/container/Otorisasi/User/AddUser.js
View file @
1c29402a
...
@@ -8,6 +8,7 @@ import format from "date-fns/format";
...
@@ -8,6 +8,7 @@ import format from "date-fns/format";
import
RemoveIcon
from
'@material-ui/icons/Remove'
;
import
RemoveIcon
from
'@material-ui/icons/Remove'
;
import
AddIcon
from
'@material-ui/icons/Add'
;
import
AddIcon
from
'@material-ui/icons/Add'
;
import
{
DatePicker
}
from
'@material-ui/pickers'
;
import
{
DatePicker
}
from
'@material-ui/pickers'
;
import
*
as
R
from
'ramda'
const
CustomCheckbox
=
withStyles
({
const
CustomCheckbox
=
withStyles
({
root
:
{
root
:
{
...
@@ -108,13 +109,15 @@ export default class AddUser extends Component {
...
@@ -108,13 +109,15 @@ export default class AddUser extends Component {
"end_date"
:
this
.
state
.
endDate
"end_date"
:
this
.
state
.
endDate
}
}
api
.
create
().
createUser
(
payload
).
then
((
response
)
=>
{
api
.
create
().
createUser
(
payload
).
then
((
response
)
=>
{
console
.
log
(
response
)
//
console.log(response)
if
(
String
(
response
.
data
.
status
).
toLocaleUpperCase
===
'success'
)
{
// if (String(response.data.status).toLocaleUpperCase === 'Success' ||
String(response.data.status).toLocaleUpperCase === 'success') {
this
.
props
.
onClickClose
()
this
.
props
.
onClickClose
()
this
.
props
.
refresh
()
this
.
props
.
refresh
()
}
else
{
// } else {
alert
(
response
.
data
.
message
)
// alert(response.data.message)
}
// this.props.onClickClose()
// this.props.refresh()
// }
})
})
}
}
...
@@ -164,6 +167,90 @@ export default class AddUser extends Component {
...
@@ -164,6 +167,90 @@ export default class AddUser extends Component {
this
.
setState
({
company
})
this
.
setState
({
company
})
}
}
renderChildren
=
(
item
,
pad
)
=>
{
let
padding
=
null
if
(
pad
!==
undefined
)
{
padding
=
pad
}
else
{
padding
=
20
}
return
(
<
ul
>
{
item
.
child
.
map
((
data
,
index
)
=>
{
return
(
<
li
>
<
Collapse
key
=
{
index
}
timeout
=
"auto"
unmountOnExit
in
=
{
item
.
collapse
}
>
<
div
style
=
{{
display
:
'flex'
,
flexDirection
:
'row'
,
alignItems
:
'center'
,
justifyContent
:
'flex-start'
,
paddingLeft
:
R
.
isNil
(
data
.
child
)
?
(
padding
+
20
)
:
padding
}}
>
{
!
R
.
isNil
(
data
.
child
)
&&
<
span
onClick
=
{()
=>
this
.
handleCollapse
(
data
)}
style
=
{{
marginLeft
:
7
,
marginRight
:
2
}}
>
{
data
.
collapse
?
<
RemoveIcon
color
=
{
'action'
}
fontSize
=
{
'small'
}
/> : <AddIcon color={'action'} fontSize={'small'} /
>
}
<
/span>
}
<
span
>
<
CustomCheckbox
checked
=
{
this
.
handleItemChecked
(
data
)}
onChange
=
{()
=>
this
.
handleItemClick
(
data
)}
/
>
<
/span
>
<
Typography
style
=
{{
fontSize
:
12
}}
>
{
titleCase
(
data
.
company_name
)}
<
/Typography
>
<
/div
>
{
!
R
.
isNil
(
data
.
child
)
&&
this
.
renderChildren
(
data
,
padding
+
20
)}
<
/Collapse
>
<
/li
>
)
})}
<
/ul
>
)
}
handleCollapse
(
item
)
{
let
path
=
this
.
searchIt
({
child
:
this
.
state
.
listCompany
},
item
.
company_id
)
let
listCompany
=
this
.
state
.
listCompany
let
arrayPath
=
[]
if
(
path
.
length
>
1
)
{
arrayPath
=
path
.
split
(
'-'
);
arrayPath
=
arrayPath
.
map
((
item
)
=>
{
return
item
})
}
else
{
arrayPath
.
push
(
path
)
}
let
pathSelect
=
null
if
(
arrayPath
.
length
==
1
)
{
pathSelect
=
listCompany
[
arrayPath
[
0
]]
}
else
if
(
arrayPath
.
length
==
2
)
{
pathSelect
=
listCompany
[
arrayPath
[
0
]].
child
[
arrayPath
[
1
]]
}
else
if
(
arrayPath
.
length
==
3
)
{
pathSelect
=
listCompany
[
arrayPath
[
0
]].
child
[
arrayPath
[
1
]].
child
[
arrayPath
[
2
]]
}
else
if
(
arrayPath
.
length
==
4
)
{
pathSelect
=
listCompany
[
arrayPath
[
0
]].
child
[
arrayPath
[
1
]].
child
[
arrayPath
[
2
]].
child
[
arrayPath
[
3
]]
}
else
if
(
arrayPath
.
length
==
5
)
{
pathSelect
=
listCompany
[
arrayPath
[
0
]].
child
[
arrayPath
[
1
]].
child
[
arrayPath
[
2
]].
child
[
arrayPath
[
3
]].
child
[
arrayPath
[
4
]]
}
else
if
(
arrayPath
.
length
==
6
)
{
pathSelect
=
listCompany
[
arrayPath
[
0
]].
child
[
arrayPath
[
1
]].
child
[
arrayPath
[
2
]].
child
[
arrayPath
[
3
]].
child
[
arrayPath
[
4
]].
child
[
arrayPath
[
5
]]
}
else
if
(
arrayPath
.
length
==
7
)
{
pathSelect
=
listCompany
[
arrayPath
[
0
]].
child
[
arrayPath
[
1
]].
child
[
arrayPath
[
2
]].
child
[
arrayPath
[
3
]].
child
[
arrayPath
[
4
]].
child
[
arrayPath
[
5
]].
child
[
arrayPath
[
6
]]
}
pathSelect
.
collapse
=
!
pathSelect
.
collapse
// console.log(pathSelect.collapse)
this
.
setState
({
listCompany
},
()
=>
console
.
log
(
pathSelect
))
}
searchIt
=
(
node
,
search
,
path
=
''
,
position
=
0
)
=>
{
if
(
node
.
company_id
&&
node
.
company_id
===
search
)
{
return
path
!==
''
?
`
${
path
}
-
${
position
}
`
:
position
;}
if
(
!
node
.
child
)
{
return
false
}
const
index
=
node
.
child
.
findIndex
((
x
)
=>
x
.
company_id
&&
x
.
company_id
===
search
);
if
(
index
>=
0
)
{
return
path
!==
''
?
`
${
path
}
-
${
index
}
`
:
index
;
}
for
(
let
i
=
0
;
i
<
node
.
child
.
length
;
i
++
)
{
const
result
=
this
.
searchIt
(
node
.
child
[
i
],
search
,
path
!==
''
?
`
${
path
}
-
${
i
}
`
:
i
,
i
);
if
(
result
){
return
result
;
}
}
return
false
;
};
render
()
{
render
()
{
return
(
return
(
<
div
className
=
"test app-popup-show"
>
<
div
className
=
"test app-popup-show"
>
...
@@ -349,9 +436,11 @@ export default class AddUser extends Component {
...
@@ -349,9 +436,11 @@ export default class AddUser extends Component {
{
this
.
state
.
listCompany
.
map
((
item
,
index
)
=>
{
{
this
.
state
.
listCompany
.
map
((
item
,
index
)
=>
{
return
(
return
(
<
div
>
<
div
>
<
ul
>
<
li
>
<
div
style
=
{{
display
:
'flex'
,
flexDirection
:
'row'
,
alignItems
:
'center'
,
justifyContent
:
'flex-start'
}}
>
<
div
style
=
{{
display
:
'flex'
,
flexDirection
:
'row'
,
alignItems
:
'center'
,
justifyContent
:
'flex-start'
}}
>
{
item
.
childCompany
.
length
>
0
&&
<
span
onClick
=
{()
=>
this
.
setState
({
selectedIndex
:
index
===
this
.
state
.
selectedIndex
?
0
:
index
}
)}
style
=
{{
marginLeft
:
7
,
marginRight
:
2
}}
>
{
item
.
child
.
length
>
0
&&
<
span
onClick
=
{()
=>
this
.
handleCollapse
(
item
)}
style
=
{{
marginLeft
:
7
,
marginRight
:
2
}}
>
{
index
===
this
.
state
.
selectedIndex
?
<
RemoveIcon
color
=
{
'action'
}
fontSize
=
{
'small'
}
/> : <AddIcon color={'action'} fontSize={'small'} /
>
}
{
item
.
collapse
?
<
RemoveIcon
color
=
{
'action'
}
fontSize
=
{
'small'
}
/> : <AddIcon color={'action'} fontSize={'small'} /
>
}
<
/span>
}
<
/span>
}
<
span
>
<
span
>
<
CustomCheckbox
<
CustomCheckbox
...
@@ -361,26 +450,9 @@ export default class AddUser extends Component {
...
@@ -361,26 +450,9 @@ export default class AddUser extends Component {
<
/span
>
<
/span
>
<
Typography
style
=
{{
fontSize
:
12
}}
>
{
titleCase
(
item
.
company_name
)}
<
/Typography
>
<
Typography
style
=
{{
fontSize
:
12
}}
>
{
titleCase
(
item
.
company_name
)}
<
/Typography
>
<
/div
>
<
/div
>
{
item
.
childCompany
.
length
>
0
&&
item
.
childCompany
.
map
((
items
,
indexs
)
=>
{
{
!
R
.
isNil
(
item
.
child
)
&&
this
.
renderChildren
(
item
)}
return
(
<
/li
>
<
Collapse
in
=
{
index
===
this
.
state
.
selectedIndex
}
timeout
=
"auto"
unmountOnExit
>
<
/ul
>
<
div
style
=
{{
paddingLeft
:
60
,
display
:
'flex'
,
flexDirection
:
'row'
,
alignItems
:
'center'
,
justifyContent
:
'flex-start'
}}
>
{
/* {item.sub_menu.length > 0 && <span onClick={() => this.setState({ selectedIndex: index === this.state.selectedIndex ? 0 : index })} style={{ marginLeft: 7, marginRight: 2 }}>
{index === this.state.selectedIndex ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />}
</span>} */
}
{
/* <RemoveIcon color={'action'} fontSize={'small'} /> */
}
<
span
>
<
CustomCheckbox
checked
=
{
this
.
handleItemChecked
(
items
)}
onChange
=
{()
=>
this
.
handleItemClick
(
items
)}
/
>
<
/span
>
<
Typography
style
=
{{
fontSize
:
12
}}
>
{
titleCase
(
items
.
company_name
)}
<
/Typography
>
<
/div
>
<
/Collapse
>
)
})}
<
/div
>
<
/div
>
)
)
})}
})}
...
...
src/container/Otorisasi/User/EditUser.js
View file @
1c29402a
...
@@ -183,7 +183,6 @@ export default class EditUser extends Component {
...
@@ -183,7 +183,6 @@ export default class EditUser extends Component {
api
.
create
().
getPerusahaanHierarki
().
then
((
response
)
=>
{
api
.
create
().
getPerusahaanHierarki
().
then
((
response
)
=>
{
if
(
response
.
data
.
status
===
'success'
)
{
if
(
response
.
data
.
status
===
'success'
)
{
this
.
setState
({
listCompany
:
response
.
data
.
data
})
this
.
setState
({
listCompany
:
response
.
data
.
data
})
// console.log(response.data.data)
}
}
})
})
}
}
...
@@ -216,10 +215,10 @@ export default class EditUser extends Component {
...
@@ -216,10 +215,10 @@ export default class EditUser extends Component {
{
item
.
child
.
map
((
data
,
index
)
=>
{
{
item
.
child
.
map
((
data
,
index
)
=>
{
return
(
return
(
<
li
>
<
li
>
<
Collapse
timeout
=
"auto"
unmountOnExit
in
=
{
item
.
collapse
}
>
<
Collapse
key
=
{
index
}
timeout
=
"auto"
unmountOnExit
in
=
{
item
.
collapse
}
>
<
div
style
=
{{
display
:
'flex'
,
flexDirection
:
'row'
,
alignItems
:
'center'
,
justifyContent
:
'flex-start'
,
paddingLeft
:
R
.
isNil
(
data
.
child
)
?
(
padding
+
20
)
:
padding
}}
>
<
div
style
=
{{
display
:
'flex'
,
flexDirection
:
'row'
,
alignItems
:
'center'
,
justifyContent
:
'flex-start'
,
paddingLeft
:
R
.
isNil
(
data
.
child
)
?
(
padding
+
20
)
:
padding
}}
>
{
!
R
.
isNil
(
data
.
child
)
&&
<
span
onClick
=
{()
=>
this
.
setState
({
selectedIndex
:
data
.
company_id
===
this
.
state
.
selectedIndex
?
0
:
data
.
company_id
}
)}
style
=
{{
marginLeft
:
7
,
marginRight
:
2
}}
>
{
!
R
.
isNil
(
data
.
child
)
&&
<
span
onClick
=
{()
=>
this
.
handleCollapse
(
data
)}
style
=
{{
marginLeft
:
7
,
marginRight
:
2
}}
>
{
data
.
co
mpany_id
===
this
.
state
.
selectedIndex
?
<
RemoveIcon
color
=
{
'action'
}
fontSize
=
{
'small'
}
/> : <AddIcon color={'action'} fontSize={'small'} /
>
}
{
data
.
co
llapse
?
<
RemoveIcon
color
=
{
'action'
}
fontSize
=
{
'small'
}
/> : <AddIcon color={'action'} fontSize={'small'} /
>
}
<
/span>
}
<
/span>
}
<
span
>
<
span
>
<
CustomCheckbox
<
CustomCheckbox
...
@@ -238,59 +237,56 @@ export default class EditUser extends Component {
...
@@ -238,59 +237,56 @@ export default class EditUser extends Component {
)
)
}
}
renderChild
(
item
,
index
)
{
handleCollapse
(
item
)
{
return
(
let
path
=
this
.
searchIt
({
child
:
this
.
state
.
listCompany
},
item
.
company_id
)
item
.
child
.
map
((
items
,
indexs
,
paddingLeft
)
=>
{
let
listCompany
=
this
.
state
.
listCompany
return
(
let
arrayPath
=
[]
<
div
>
<
div
style
=
{{
paddingLeft
:
R
.
isNil
(
items
.
child
)
?
120
:
60
,
display
:
'flex'
,
flexDirection
:
'row'
,
alignItems
:
'center'
,
justifyContent
:
'flex-start'
}}
>
{
/* {item.sub_menu.length > 0 && <span onClick={() => this.setState({ selectedIndex: index === this.state.selectedIndex ? 0 : index })} style={{ marginLeft: 7, marginRight: 2 }}>
{index === this.state.selectedIndex ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />}
</span>} */
}
{
/* <RemoveIcon color={'action'} fontSize={'small'} /> */
}
<
span
>
<
CustomCheckbox
checked
=
{
this
.
handleItemChecked
(
items
)}
onChange
=
{()
=>
this
.
handleItemClick
(
items
)}
/
>
<
/span
>
<
Typography
style
=
{{
fontSize
:
12
}}
>
{
titleCase
(
items
.
company_name
)}
<
/Typography
>
<
/div
>
{
!
R
.
isNil
(
items
.
child
)
&&
this
.
renderChild
(
items
,
indexs
)}
<
/div
>
)
})
)
}
handleCollapse
(
item
,
index
)
{
if
(
path
.
length
>
1
)
{
let
result
=
this
.
findIndexNested
(
this
.
state
.
listCompany
,
index
);
arrayPath
=
path
.
split
(
'-'
);
console
.
log
(
"Found index "
+
index
+
" via these child indexes: "
+
result
);
arrayPath
=
arrayPath
.
map
((
item
)
=>
{
return
item
})
}
else
{
arrayPath
.
push
(
path
)
}
}
// handleCollapseChildren(item,index) {
let
pathSelect
=
null
// let listCompany = this.state.listCompany[index]
if
(
arrayPath
.
length
==
1
)
{
// let index = listCompany.findIndex((val) => val.company_id === item.company_id)
pathSelect
=
listCompany
[
arrayPath
[
0
]]
// if (index == -1 ) {
}
else
if
(
arrayPath
.
length
==
2
)
{
// item.child.map((item,index) => this.handleCollapseChildren(item,index))
pathSelect
=
listCompany
[
arrayPath
[
0
]].
child
[
arrayPath
[
1
]]
// } else {
}
else
if
(
arrayPath
.
length
==
3
)
{
// listCompany[index].collapse = !listCompany[index].collapse
pathSelect
=
listCompany
[
arrayPath
[
0
]].
child
[
arrayPath
[
1
]].
child
[
arrayPath
[
2
]]
// }
}
else
if
(
arrayPath
.
length
==
4
)
{
// }
pathSelect
=
listCompany
[
arrayPath
[
0
]].
child
[
arrayPath
[
1
]].
child
[
arrayPath
[
2
]].
child
[
arrayPath
[
3
]]
}
else
if
(
arrayPath
.
length
==
5
)
{
pathSelect
=
listCompany
[
arrayPath
[
0
]].
child
[
arrayPath
[
1
]].
child
[
arrayPath
[
2
]].
child
[
arrayPath
[
3
]].
child
[
arrayPath
[
4
]]
}
else
if
(
arrayPath
.
length
==
6
)
{
pathSelect
=
listCompany
[
arrayPath
[
0
]].
child
[
arrayPath
[
1
]].
child
[
arrayPath
[
2
]].
child
[
arrayPath
[
3
]].
child
[
arrayPath
[
4
]].
child
[
arrayPath
[
5
]]
}
else
if
(
arrayPath
.
length
==
7
)
{
pathSelect
=
listCompany
[
arrayPath
[
0
]].
child
[
arrayPath
[
1
]].
child
[
arrayPath
[
2
]].
child
[
arrayPath
[
3
]].
child
[
arrayPath
[
4
]].
child
[
arrayPath
[
5
]].
child
[
arrayPath
[
6
]]
}
findIndexNested
(
data
,
index
)
{
pathSelect
.
collapse
=
!
pathSelect
.
collapse
if
(
data
.
index
===
index
)
return
[];
// console.log(pathSelect.collapse)
let
result
;
this
.
setState
({
listCompany
},
()
=>
console
.
log
(
pathSelect
))
const
i
=
(
data
.
children
||
[]).
findIndex
(
child
=>
{
return
result
=
this
.
findIndexNested
(
child
,
index
)
});
if
(
result
)
return
[
i
,
...
result
];
}
}
findByPath
(
data
,
path
)
{
searchIt
=
(
node
,
search
,
path
=
''
,
position
=
0
)
=>
{
for
(
let
i
of
path
)
data
=
data
.
children
[
i
];
if
(
node
.
company_id
&&
node
.
company_id
===
search
)
{
return
path
!==
''
?
`
${
path
}
-
${
position
}
`
:
position
;}
return
data
if
(
!
node
.
child
)
{
return
false
}
const
index
=
node
.
child
.
findIndex
((
x
)
=>
x
.
company_id
&&
x
.
company_id
===
search
);
if
(
index
>=
0
)
{
return
path
!==
''
?
`
${
path
}
-
${
index
}
`
:
index
;
}
for
(
let
i
=
0
;
i
<
node
.
child
.
length
;
i
++
)
{
const
result
=
this
.
searchIt
(
node
.
child
[
i
],
search
,
path
!==
''
?
`
${
path
}
-
${
i
}
`
:
i
,
i
);
if
(
result
){
return
result
;
}
}
}
return
false
;
};
render
()
{
render
()
{
return
(
return
(
<
div
className
=
"test app-popup-show"
>
<
div
className
=
"test app-popup-show"
>
...
@@ -480,8 +476,8 @@ export default class EditUser extends Component {
...
@@ -480,8 +476,8 @@ export default class EditUser extends Component {
<
ul
>
<
ul
>
<
li
>
<
li
>
<
div
style
=
{{
display
:
'flex'
,
flexDirection
:
'row'
,
alignItems
:
'center'
,
justifyContent
:
'flex-start'
}}
>
<
div
style
=
{{
display
:
'flex'
,
flexDirection
:
'row'
,
alignItems
:
'center'
,
justifyContent
:
'flex-start'
}}
>
{
item
.
child
.
length
>
0
&&
<
span
onClick
=
{()
=>
this
.
handleCollapse
(
item
,
index
)}
style
=
{{
marginLeft
:
7
,
marginRight
:
2
}}
>
{
item
.
child
.
length
>
0
&&
<
span
onClick
=
{()
=>
this
.
handleCollapse
(
item
)}
style
=
{{
marginLeft
:
7
,
marginRight
:
2
}}
>
{
i
ndex
===
this
.
state
.
selectedIndex
?
<
RemoveIcon
color
=
{
'action'
}
fontSize
=
{
'small'
}
/> : <AddIcon color={'action'} fontSize={'small'} /
>
}
{
i
tem
.
collapse
?
<
RemoveIcon
color
=
{
'action'
}
fontSize
=
{
'small'
}
/> : <AddIcon color={'action'} fontSize={'small'} /
>
}
<
/span>
}
<
/span>
}
<
span
>
<
span
>
<
CustomCheckbox
<
CustomCheckbox
...
@@ -494,19 +490,6 @@ export default class EditUser extends Component {
...
@@ -494,19 +490,6 @@ export default class EditUser extends Component {
{
!
R
.
isNil
(
item
.
child
)
&&
this
.
renderChildren
(
item
)}
{
!
R
.
isNil
(
item
.
child
)
&&
this
.
renderChildren
(
item
)}
<
/li
>
<
/li
>
<
/ul
>
<
/ul
>
{
/* <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
{item.child.length > 0 && <span onClick={() => this.setState({ selectedIndex: index === this.state.selectedIndex ? 0 : index })} style={{ marginLeft: 7, marginRight: 2 }}>
{index === this.state.selectedIndex ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />}
</span>}
<span>
<CustomCheckbox
checked={this.handleItemChecked(item)}
onChange={() => this.handleItemClick(item)}
/>
</span>
<Typography style={{ fontSize: 12 }}>{titleCase(item.company_name)}</Typography>
</div> */
}
{
/* {this.renderChild(item,index, 0)} */
}
<
/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