Commit 1c29402a authored by Dida Adams Arizona's avatar Dida Adams Arizona

Merge branch 'didam' into 'master'

Didam

See merge request !103
parents 438eb1c7 40c36111
...@@ -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>
) )
})} })}
......
...@@ -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) {
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 }}>
{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