Skip to content

T
Tia-dev
Commit 1c29402a authored by Dida Adams Arizona's avatar Dida Adams Arizona
Browse files
Options

Merge branch 'didam' into 'master' 

Didam

See merge request !103
parents 438eb1c7 40c36111
Hide whitespace changes
Inline Side-by-side
Showing with 161 additions and 106 deletions
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,38 +436,23 @@ export default class AddUser extends Component { ...@@ -349,38 +436,23 @@ export default class AddUser extends Component {
{this.state.listCompany.map((item,index) => { {this.state.listCompany.map((item,index) => {
return( return(
<div> <div>
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}> <ul>
{item.childCompany.length > 0 && <span onClick={() => this.setState({ selectedIndex: index === this.state.selectedIndex ? 0 : index })} style={{ marginLeft: 7, marginRight: 2 }}> <li>
{index === this.state.selectedIndex ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />} <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
</span>} {item.child.length > 0 && <span onClick={() => this.handleCollapse(item)} style={{ marginLeft: 7, marginRight: 2 }}>
<span> {item.collapse ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />}
<CustomCheckbox </span>}
checked={this.handleItemChecked(item)} <span>
onChange={() => this.handleItemClick(item)} <CustomCheckbox
/> checked={this.handleItemChecked(item)}
</span> onChange={() => this.handleItemClick(item)}
<Typography style={{ fontSize: 12 }}>{titleCase(item.company_name)}</Typography> />
</div> </span>
{item.childCompany.length > 0 && item.childCompany.map((items,indexs) => { <Typography style={{ fontSize: 12 }}>{titleCase(item.company_name)}</Typography>
return ( </div>
<Collapse in={index === this.state.selectedIndex} timeout="auto" unmountOnExit> {!R.isNil(item.child) && this.renderChildren(item)}
<div style={{ paddingLeft: 60, display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}> </li>
{/* {item.sub_menu.length > 0 && <span onClick={() => this.setState({ selectedIndex: index === this.state.selectedIndex ? 0 : index })} style={{ marginLeft: 7, marginRight: 2 }}> </ul>
{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.company_id === this.state.selectedIndex ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />} {data.collapse? <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) {
findIndexNested(data, index) { pathSelect= listCompany[arrayPath[0]].child[arrayPath[1]].child[arrayPath[2]].child[arrayPath[3]].child[arrayPath[4]]
if (data.index === index) return []; } else if (arrayPath.length == 6) {
let result; pathSelect= listCompany[arrayPath[0]].child[arrayPath[1]].child[arrayPath[2]].child[arrayPath[3]].child[arrayPath[4]].child[arrayPath[5]]
const i = (data.children || []).findIndex(child => { } else if (arrayPath.length == 7) {
return result = this.findIndexNested(child, index) pathSelect= listCompany[arrayPath[0]].child[arrayPath[1]].child[arrayPath[2]].child[arrayPath[3]].child[arrayPath[4]].child[arrayPath[5]].child[arrayPath[6]]
}); }
if (result) return [i, ...result];
}
findByPath(data, path) { pathSelect.collapse = !pathSelect.collapse
for (let i of path) data = data.children[i]; // console.log(pathSelect.collapse)
return data 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">
...@@ -401,7 +397,7 @@ export default class EditUser extends Component { ...@@ -401,7 +397,7 @@ export default class EditUser extends Component {
/> />
</div> </div>
</div> </div>
<div className="column-2"> <div className="column-2">
<div className="margin-bottom-20px"> <div className="margin-bottom-20px">
<DatePicker <DatePicker
...@@ -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 }}>
{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
...@@ -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>
) )
})} })}
......
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