Skip to content

T
Tia-dev
Commit 0696c562 authored by d.arizona's avatar d.arizona
Browse files
Options

update

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