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 = {
logout: require('./setting.png'),
setting: require('./logout.png'),
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) => ({
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 @ 0696c562
......@@ -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 @ 0696c562
......@@ -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 @ 0696c562
......@@ -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