Skip to content

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

Merge branch 'didam' into 'master' 

update

See merge request !106
parents b249bf0a 0696c562
Hide whitespace changes
Inline Side-by-side
Showing with 180 additions and 63 deletions
src/assets/Images.js
View file @ 83cb8d8a
......@@ -43,6 +43,7 @@ const Images = {
logout: require('./setting.png'),
setting: require('./logout.png'),
failedCopy: require('./failed-copy.svg'),
triputraLogo: require('./triputra-logo.png')
}
......
src/container/Home.js
View file @ 83cb8d8a
......@@ -69,6 +69,30 @@ const useStyles = makeStyles((theme) => ({
flexShrink: 0,
whiteSpace: 'nowrap',
},
topleftOpen: {
width: drawerWidth,
borderRight: 0,
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
backgroundColor: '#1a2d3e'
},
topleftClose: {
borderRight: 0,
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
overflowX: 'hidden',
width: theme.spacing(3) + 2,
height: '78px',
[theme.breakpoints.up('sm')]: {
width: theme.spacing(7) + 1,
},
paddingLeft: 15,
backgroundColor: '#1a2d3e'
},
drawerOpen: {
width: drawerWidth,
borderRight: 0,
......@@ -76,7 +100,7 @@ const useStyles = makeStyles((theme) => ({
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
backgroundColor: '#f6f7f9'
backgroundColor: '#f6f7f9',
},
drawerClose: {
borderRight: 0,
......@@ -89,7 +113,7 @@ const useStyles = makeStyles((theme) => ({
[theme.breakpoints.up('sm')]: {
width: theme.spacing(7) + 1,
},
backgroundColor: '#f6f7f9'
backgroundColor: '#f6f7f9',
},
toolbar: {
display: 'flex',
......@@ -300,7 +324,6 @@ export default function MiniDrawer() {
if (response.data.status == 'success') {
setUserFullname(response.data.data.fullname == null? 'Anonym' : response.data.data.fullname)
setUserEmail(response.data.data.email == null? 'Anonym@123.xyz' : response.data.data.email)
console.log(userEmail)
}
})
}
......@@ -367,20 +390,22 @@ export default function MiniDrawer() {
}),
}}
>
<div className={classes.toolbarDrawer} style={{
backgroundColor: '#1a2d3e',
height: open ? 203 : 78,
paddingLeft: open ? null : 55,
display: open ? null : 'grid',
// paddingBottom: open ? 55 : null,
alignSelf: open? null : 'center'
<div className={clsx(classes.drawer, {
[classes.topleftOpen]: open,
[classes.topleftClose]: !open,
})}
classes={{
paper: clsx({
[classes.topleftOpen]: open,
[classes.topleftClose]: !open,
}),
}}>
{open === true ?
<div style={{ display: 'flex', justifyContent: 'space-between', flex: 1, padding: 10 }}>
<img src={Images.triputra} alt="React Logo" style={{ height: 31, width: 151, alignSelf: 'center' }} />
<img src={Images.triputra} alt="React Logo" style={{ height: 31, width: 151, alignSelf: 'center', marginLeft: 5 }} />
<IconButton onClick={handleDrawerClose} style={{outline: 'none'}}>
<ChevronLeftIcon style={{ fill: 'white' }} />
<MenuIcon style={{ fill: 'white' }} />
</IconButton>
</div> :
<IconButton
......@@ -393,7 +418,7 @@ export default function MiniDrawer() {
[classes.hide]: open,
})}
>
<MenuIcon style={{ fill: 'white' }} />
<img src={Images.triputraLogo} alt="React Logo" style={{ height: 30, width: 30, alignSelf: 'center', marginTop: 10}} />
</IconButton>}
{open &&
<div style={{ width: '100%', marginTop: 15, marginBottom: 60 }}>
......
src/container/Otorisasi/User/AddUser.js
View file @ 83cb8d8a
......@@ -178,12 +178,19 @@ export default class AddUser extends Component {
<ul>
{item.child.map((data, index) => {
return (
<li>
// <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>}
{R.isNil(data.child)?
null
:
data.child.length < 1?
null
:
<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)}
......@@ -194,7 +201,7 @@ export default class AddUser extends Component {
</div>
{!R.isNil(data.child) && this.renderChildren(data, padding + 20)}
</Collapse>
</li>
// </li>
)
})}
</ul>
......@@ -436,8 +443,8 @@ export default class AddUser extends Component {
{this.state.listCompany.map((item,index) => {
return(
<div>
<ul>
<li>
{/* <ul>
<li> */}
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
{item.child.length > 0 && <span onClick={() => this.handleCollapse(item)} style={{ marginLeft: 7, marginRight: 2 }}>
{item.collapse ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />}
......@@ -451,8 +458,8 @@ export default class AddUser extends Component {
<Typography style={{ fontSize: 12 }}>{titleCase(item.company_name)}</Typography>
</div>
{!R.isNil(item.child) && this.renderChildren(item)}
</li>
</ul>
{/* </li>
</ul> */}
</div>
)
})}
......
src/container/Otorisasi/User/EditUser.js
View file @ 83cb8d8a
......@@ -214,12 +214,19 @@ export default class EditUser extends Component {
<ul>
{item.child.map((data, index) => {
return (
<li>
// <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>}
{R.isNil(data.child)?
null
:
data.child.length < 1?
null
:
<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)}
......@@ -230,7 +237,7 @@ export default class EditUser extends Component {
</div>
{!R.isNil(data.child) && this.renderChildren(data, padding + 20)}
</Collapse>
</li>
// </li>
)
})}
</ul>
......@@ -473,8 +480,8 @@ export default class EditUser extends Component {
{this.state.listCompany.map((item, index) => {
return (
<div>
<ul>
<li>
{/* <ul>
<li> */}
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
{item.child.length > 0 && <span onClick={() => this.handleCollapse(item)} style={{ marginLeft: 7, marginRight: 2 }}>
{item.collapse ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />}
......@@ -488,8 +495,8 @@ export default class EditUser extends Component {
<Typography style={{ fontSize: 12 }}>{titleCase(item.company_name)}</Typography>
</div>
{!R.isNil(item.child) && this.renderChildren(item)}
</li>
</ul>
{/* </li>
</ul> */}
</div>
)
})}
......
src/container/Profile.js
View file @ 83cb8d8a
......@@ -7,6 +7,7 @@ import Constant from '../library/Constant';
import RemoveIcon from '@material-ui/icons/Remove';
import AddIcon from '@material-ui/icons/Add';
import { titleCase } from '../library/Utils';
import * as R from 'ramda'
const CustomCheckbox = withStyles({
root: {
......@@ -145,6 +146,97 @@ export default class Profile extends Component {
return indexID == -1 ? false : true
}
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)?
null
:
data.child.length < 1?
null
:
<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={() => null}
/>
</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() {
return (
<div style={{ height: this.props.height, backgroundColor: '#f8f8f8', marginBottom: 100, minHeight: 1000 }}>
......@@ -249,38 +341,23 @@ export default class Profile extends Component {
{this.state.listCompany.map((item, index) => {
return (
<div>
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
<span>
<CustomCheckbox
disabled={true}
disabled={true}
checked={this.handleItemChecked(item)}
// onChange={() => this.handleItemClick(item)}
/>
</span>
<Typography style={{ fontSize: 12 }}>{titleCase(item.company_name)}</Typography>
</div>
{item.childCompany.length > 0 && item.childCompany.map((items, indexs) => {
return (
<Collapse in={index == this.state.selectedIndex} timeout="auto" unmountOnExit>
<div style={{ paddingLeft: 30, 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
disabled={true}
checked={this.handleItemChecked(items)}
// onChange={() => this.handleItemClick(items)}
/>
</span>
<Typography style={{ fontSize: 12 }}>{titleCase(items.company_name)}</Typography>
</div>
</Collapse>
)
})}
{/* <ul>
<li> */}
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
{item.child.length > 0 && <span onClick={() => this.handleCollapse(item)} style={{ marginLeft: 7, marginRight: 2 }}>
{item.collapse ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />}
</span>}
<span>
<CustomCheckbox
checked={this.handleItemChecked(item)}
onChange={() => null}
/>
</span>
<Typography style={{ fontSize: 12 }}>{titleCase(item.company_name)}</Typography>
</div>
{!R.isNil(item.child) && this.renderChildren(item)}
{/* </li>
</ul> */}
</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