Commit e1d5cff2 authored by Rifka Kurnia Irfiana's avatar Rifka Kurnia Irfiana

Merge branch 'master' of http://103.44.149.204/d.arizona/tia-dev into rifka

parents 11b80ca0 33b53923
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -90,6 +90,7 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') => ...@@ -90,6 +90,7 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
const getPerusahaan = () => api.get('company/get_all_company') const getPerusahaan = () => api.get('company/get_all_company')
const createPerusahaan = (body) => api.post('/company/create_company', body) const createPerusahaan = (body) => api.post('/company/create_company', body)
const updatePerusahaan = (body) => api.post('/company/update_company', body) const updatePerusahaan = (body) => api.post('/company/update_company', body)
const getPerusahaanHierarki = () => api.get('company/get_company_hierarki')
// APPROVAL MATRIX // APPROVAL MATRIX
const getAM = () => api.get('approval_matrix/get_all_approval_matrix') const getAM = () => api.get('approval_matrix/get_all_approval_matrix')
...@@ -104,10 +105,9 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') => ...@@ -104,10 +105,9 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
const getUser = () => api.get('user/get_all_user') const getUser = () => api.get('user/get_all_user')
const getDetailUser = (userId) => api.get(`user/get_user_by_id/${userId}`) const getDetailUser = (userId) => api.get(`user/get_user_by_id/${userId}`)
const searchUser = (body) => api.post('user/search_user', body) const searchUser = (body) => api.post('user/search_user', body)
const createUser = (body) => api.get('user/create_user', body) const createUser = (body) => api.post('user/create_user', body)
const updateUser = (body) => api.get('user/update_user', body) const updateUser = (body) => api.post('user/update_user', body)
const deleteUser = (userId) => api.get(`user/delete_user/${userId}`) const deleteUser = (userId) => api.get(`user/delete_user/${userId}`)
const changePassword = (body) => api.post('/user/change_password', body) const changePassword = (body) => api.post('/user/change_password', body)
//Template //Template
...@@ -161,7 +161,8 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') => ...@@ -161,7 +161,8 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
downloadTemplate, downloadTemplate,
checkUploadUnitBisnis, checkUploadUnitBisnis,
uploadUnitBisnis, uploadUnitBisnis,
changePassword changePassword,
getPerusahaanHierarki
} }
} }
......
.main-color{
background-color: #1a2d3e !important;
}
.sub-color{
background-color: #f0f1f3 !important;
}
.gradient-purple { .gradient-purple {
background: linear-gradient(to top, #9b59b6 10%, #e74c3c 100%); background: linear-gradient(to top, #9b59b6 10%, #e74c3c 100%);
...@@ -127,6 +134,18 @@ ...@@ -127,6 +134,18 @@
padding: 5px 15px; padding: 5px 15px;
border-bottom: 1px rgba(0, 0, 0, 0.1) solid; border-bottom: 1px rgba(0, 0, 0, 0.1) solid;
color: #444444; } color: #444444; }
.active {
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
color: #fff;
background-color: #62dafc;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
.color-white { .color-white {
color: #fff; } color: #fff; }
...@@ -5968,6 +5987,7 @@ ...@@ -5968,6 +5987,7 @@
font-size: 10pt; font-size: 10pt;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
outline: 'none';
/*&:focus { /*&:focus {
box-shadow: 0 0 0 4px $pos-color; box-shadow: 0 0 0 4px $pos-color;
}*/ } }*/ }
...@@ -70,31 +70,44 @@ export default class VisualisasiAM extends Component { ...@@ -70,31 +70,44 @@ export default class VisualisasiAM extends Component {
api.create().searchAM(body).then(response => { api.create().searchAM(body).then(response => {
if (response.data.status == 'success') { if (response.data.status == 'success') {
let data = response.data.data let data = response.data.data
console.log(data)
let listVisual = [] let listVisual = []
data.map((item, index) => { data.map((item, index) => {
let indexId = listVisual.findIndex((val) => val.orders == item.orders) let indexId = listVisual.findIndex((val) => val.orderId == item.orders)
if(indexId == -1){ if(indexId == -1){
listVisual.push(item) listVisual.push({
orderId: item.orders,
data: [item]
})
console.log(listVisual);
} else { } else {
return listVisual[indexId].data.push(item)
} }
}) })
this.setState({ listApproval: listVisual, typeData: response.data.data }) this.setState({ listApproval: listVisual })
console.log(data); console.log(listVisual);
} else { } else {
alert(response.data.message) alert(response.data.message)
} }
}) })
} }
handleChangeOrder(fromIndex, toIndex, that) {
let listApproval = that.state.listApproval
listApproval[fromIndex].orderId = listApproval[toIndex].orderId
listApproval[toIndex].orderId = listApproval[fromIndex].orderId
console.log(fromIndex, toIndex)
}
render() { render() {
const that = this; const that = this;
const dragProps = { const dragProps = {
onDragEnd(fromIndex, toIndex) { onDragEnd(fromIndex, toIndex) {
const data = [...that.state.data]; const data = [...that.state.listApproval];
const item = data.splice(fromIndex, 1)[0]; const item = data.splice(fromIndex, 1)[0];
that.handleChangeOrder(fromIndex, toIndex, that)
data.splice(toIndex, 0, item); data.splice(toIndex, 0, item);
that.setState({ data }); that.setState({ listApproval: data });
}, },
nodeSelector: 'li', nodeSelector: 'li',
handleSelector: 'a' handleSelector: 'a'
...@@ -125,8 +138,7 @@ export default class VisualisasiAM extends Component { ...@@ -125,8 +138,7 @@ export default class VisualisasiAM extends Component {
<ol> <ol>
{this.state.listApproval.map((item, index) => ( {this.state.listApproval.map((item, index) => (
<li key={index}> <li key={index}>
{'urutan: ' + item.orders} <a href="#">{`${item.data.map((items, indexs) => {return(items.fullname)})} ${item.data.length == 1? '' : item.data[0].operator_type_name}`}</a>
<a href="#">Drag</a>
</li> </li>
))} ))}
</ol> </ol>
......
...@@ -5,7 +5,7 @@ class Beranda extends Component { ...@@ -5,7 +5,7 @@ class Beranda extends Component {
render() { render() {
return ( return (
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<div style={{ height: 150, width: '100%', backgroundColor: '#354960', padding: 20 }}> <div style={{ height: 150, width: '100%', padding: 20 }} className={"main-color"}>
<Typography style={{ fontSize: '24px', color: 'white' }}>Selamat Datang, John!</Typography> <Typography style={{ fontSize: '24px', color: 'white' }}>Selamat Datang, John!</Typography>
<Typography style={{ fontSize: '12px', color: 'white', marginTop: 50 }}>Task Yang Harus Dikerjakan</Typography> <Typography style={{ fontSize: '12px', color: 'white', marginTop: 50 }}>Task Yang Harus Dikerjakan</Typography>
</div> </div>
......
...@@ -99,7 +99,7 @@ export default class BudgetTahunan extends Component { ...@@ -99,7 +99,7 @@ export default class BudgetTahunan extends Component {
] ]
return ( return (
<div style={{ flex: 1, backgroundColor: '#f8f8f8' }}> <div style={{ flex: 1, backgroundColor: '#f8f8f8' }}>
<div style={{ height: 78, backgroundColor: '#354960', display: 'flex', alignItems: 'center', paddingLeft: 20 }}> <div className={"main-color"} style={{ height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>Pengajuan Budget Tahunan</Typography> <Typography style={{ fontSize: '16px', color: 'white' }}>Pengajuan Budget Tahunan</Typography>
</div> </div>
<div style={{ padding: 20, width: '100%' }}> <div style={{ padding: 20, width: '100%' }}>
......
...@@ -254,7 +254,7 @@ export default class BalanceSheet extends Component { ...@@ -254,7 +254,7 @@ export default class BalanceSheet extends Component {
] ]
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 }}>
<div style={{ height: 78, backgroundColor: '#354960', flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}> <div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>Pengajuan Budget Tahunan</Typography> <Typography style={{ fontSize: '16px', color: 'white' }}>Pengajuan Budget Tahunan</Typography>
</div> </div>
<div style={{ flex: 1, padding: 20, width: '100%' }}> <div style={{ flex: 1, padding: 20, width: '100%' }}>
......
...@@ -39,6 +39,7 @@ import { Avatar } from '@material-ui/core'; ...@@ -39,6 +39,7 @@ import { Avatar } from '@material-ui/core';
import HomeRoutes from '../router/homeRoutes' import HomeRoutes from '../router/homeRoutes'
import ArraySide from '../library/Array' import ArraySide from '../library/Array'
import Constant from '../library/Constant'; import Constant from '../library/Constant';
import api from '../api';
const drawerWidth = 307; const drawerWidth = 307;
...@@ -79,7 +80,7 @@ const useStyles = makeStyles((theme) => ({ ...@@ -79,7 +80,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: '#0d2846' backgroundColor: '#f6f7f9'
}, },
drawerClose: { drawerClose: {
transition: theme.transitions.create('width', { transition: theme.transitions.create('width', {
...@@ -87,11 +88,11 @@ const useStyles = makeStyles((theme) => ({ ...@@ -87,11 +88,11 @@ const useStyles = makeStyles((theme) => ({
duration: theme.transitions.duration.leavingScreen, duration: theme.transitions.duration.leavingScreen,
}), }),
overflowX: 'hidden', overflowX: 'hidden',
width: theme.spacing(7) + 1, width: theme.spacing(3) + 2,
[theme.breakpoints.up('sm')]: { [theme.breakpoints.up('sm')]: {
width: theme.spacing(9) + 1, width: theme.spacing(7) + 1,
}, },
backgroundColor: '#0d2846' backgroundColor: '#f6f7f9'
}, },
toolbar: { toolbar: {
display: 'flex', display: 'flex',
...@@ -124,10 +125,27 @@ export default function MiniDrawer() { ...@@ -124,10 +125,27 @@ export default function MiniDrawer() {
const theme = useTheme(); const theme = useTheme();
const [open, setOpen] = React.useState(false); const [open, setOpen] = React.useState(false);
const [selectedIndex, setSelectedIndex] = React.useState([]); const [selectedIndex, setSelectedIndex] = React.useState([]);
const [selectedIndexs, setSelectedIndexs] = React.useState([]);
const [selectedSubIndex, setSelectSub] = React.useState([]);
const [userFullname, setUserFullname] = React.useState("")
const [userEmail, setUserEmail] = React.useState("")
// React.useEffect(() => { React.useEffect(() => {
// // if(userFullname == "" && userEmail == "") {
// }) getUserData()
}
})
const getUserData = () => {
let userId = localStorage.getItem(Constant.USER)
api.create().getDetailUser(userId).then((response) => {
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)
}
})
}
const handleDrawerOpen = () => { const handleDrawerOpen = () => {
setOpen(true); setOpen(true);
...@@ -137,6 +155,21 @@ export default function MiniDrawer() { ...@@ -137,6 +155,21 @@ export default function MiniDrawer() {
setOpen(false); setOpen(false);
}; };
const resetIndex = () => {
setSelectedIndex("")
setSelectedIndexs("")
}
const selectSub = (e) => {
setSelectSub(e)
setSelectedIndex("")
}
const selectIndex = (e) => {
setSelectSub("")
setSelectedIndex(e)
}
let { path, url } = useRouteMatch(); let { path, url } = useRouteMatch();
const { height, width } = UseWindowDimensions(); const { height, width } = UseWindowDimensions();
...@@ -150,34 +183,6 @@ export default function MiniDrawer() { ...@@ -150,34 +183,6 @@ export default function MiniDrawer() {
[classes.appBarShift]: open, [classes.appBarShift]: open,
})} })}
> >
<Toolbar style={{ flex: 1, backgroundColor: '#51c6ea' }}>
<IconButton
color="inherit"
aria-label="open drawer"
onClick={handleDrawerOpen}
edge="start"
className={clsx(classes.menuButton, {
[classes.hide]: open,
})}
>
<MenuIcon />
</IconButton>
<div style={{ backgroundColor: '#51c6ea', height: '70px', display: 'flex', flex: 1, placeContent: 'flex-end' }}>
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', paddingRight: 20, paddingLeft: 20 }}>
<div style={{ width: 44, height: 44, backgroundColor: '#354960', borderRadius: 30, marginRight: 10 }} />
<Typography style={{ color: 'white' }}>Tommy</Typography>
{/* <img src={require('./assets/dropdown-white.svg')} alt="React Logo" style={{ marginLeft: 15 }} /> */}
<FadeMenu />
</div>
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', paddingRight: 20, paddingLeft: 20, borderLeftColor: '#c2c2c2', borderLeftWidth: .2, borderLeftStyle: 'solid' }}>
<img src={Images.search} alt="React Logo" style={{ height: 18, width: 18 }} />
</div>
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', paddingRight: 20, paddingLeft: 20, borderLeftColor: '#c2c2c2', borderLeftWidth: .2, borderLeftStyle: 'solid' }}>
<img src={Images.flagEnglish} alt="React Logo" style={{ height: 32, width: 32 }} />
<Typography style={{ color: 'white' }}>EN</Typography>
</div>
</div>
</Toolbar>
</AppBar> </AppBar>
<Drawer <Drawer
variant="permanent" variant="permanent"
...@@ -193,16 +198,33 @@ export default function MiniDrawer() { ...@@ -193,16 +198,33 @@ export default function MiniDrawer() {
}} }}
> >
<div className={classes.toolbarDrawer} style={{ <div className={classes.toolbarDrawer} style={{
backgroundColor: '#51c5ea', backgroundColor: '#1a2d3e',
height: open ? null : 68, height: open ? null : 78,
paddingBottom: open ? 55 : null paddingLeft: open ? null : 55,
display: open ? null : 'grid',
paddingBottom: open ? 55 : null,
alignSelf: open? null : 'center'
}}> }}>
{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' }} />
<IconButton onClick={handleDrawerClose}> <IconButton onClick={handleDrawerClose} style={{outline: 'none'}}>
<ChevronLeftIcon style={{ fill: 'white' }} /> <ChevronLeftIcon style={{ fill: 'white' }} />
</IconButton> </IconButton>
</div> </div> :
<IconButton
color="inherit"
aria-label="open drawer"
style={{outline: 'none'}}
onClick={handleDrawerOpen}
edge="start"
className={clsx(classes.menuButton, {
[classes.hide]: open,
})}
>
<MenuIcon style={{ fill: 'white' }} />
</IconButton>}
{open && {open &&
<div style={{ width: '100%' }}> <div style={{ width: '100%' }}>
<Typography style={{ fontSize: 12, color: '#fff', textAlign: 'center', fontWeight: 'bold' }}>John Doe</Typography> <Typography style={{ fontSize: 12, color: '#fff', textAlign: 'center', fontWeight: 'bold' }}>John Doe</Typography>
...@@ -213,57 +235,57 @@ export default function MiniDrawer() { ...@@ -213,57 +235,57 @@ export default function MiniDrawer() {
<Divider /> <Divider />
{open && {open &&
<div style={{ width: '100%', textAlign: '-webkit-center', marginTop: -40 }}> <div style={{ width: '100%', textAlign: '-webkit-center', marginTop: -40 }}>
<div style={{ width: 90, height: 90, backgroundColor: '#0d2846', borderRadius: 50, display: 'flex', justifyContent: 'center' }}> <div className={"sub-color"} style={{ width: 90, height: 90, borderRadius: 50, display: 'flex', justifyContent: 'center' }}>
<div style={{ width: 72, height: 72, backgroundColor: 'white', borderRadius: 50, alignSelf: 'center' }}> <div style={{ width: 72, height: 72, backgroundColor: '#838383', borderRadius: 50, alignSelf: 'center' }}>
</div> </div>
</div> </div>
</div> </div>
} }
{open && {open &&
<div style={{ marginLeft: 20, marginTop: 20 }}> <div style={{ marginLeft: 20, marginTop: 10 }}>
<Typography style={{ color: 'white', fontSize: 14, fontFamily: 'nunito' }}>Application</Typography> <Typography style={{ color: '#525355', fontSize: 14, fontFamily: 'nunito' }}>Application</Typography>
</div> </div>
} }
<List> <List>
{ArraySide.map((item, index) => ( {ArraySide.map((item, index) => (
<div style={{ marginTop: index === 0 ? null : 10 }}> <div style={{ marginTop: index === 0 ? null : 5 }} >
{item.subItem != null ? {item.subItem != null ?
<div style={{ justifyContent: 'space-between', flexDirection: 'row', display: 'flex', paddingLeft: 10, paddingRight: 10 }} onClick={() => selectedIndex == 0 ? setSelectedIndex(index) : setSelectedIndex(0)}> <div style={{ justifyContent: 'space-between', flexDirection: 'row', display: 'flex', paddingLeft: 10, paddingRight: 10 }} onClick={() => selectedIndexs == null ? setSelectedIndexs(item.label) : setSelectedIndexs(null)}>
<ListItem button key={item.label}> <ListItem key={item.label}>
<ListItemIcon style={{ minWidth: open ? 40 : 56 }}><img src={item.img} /></ListItemIcon> <ListItemIcon style={{ minWidth: open ? 40 : 56 }}><img src={item.img} /></ListItemIcon>
<Typography style={{ fontFamily: 'nunito', color: 'white', fontSize: 14 }}>{item.label}</Typography> <Typography style={{ fontFamily: 'nunito', color: '#525355', fontSize: 14 }}>{item.label}</Typography>
</ListItem> </ListItem>
{item.subItem != null ? (index === selectedIndex ? <ExpandLess style={{ color: "white", marginLeft: 50, alignSelf: 'center' }} /> : <ExpandMore style={{ color: "white", marginLeft: 50, alignSelf: 'center' }} />) : null} {item.subItem != null ? (item.label === selectedIndex ? <ExpandLess style={{ color: "#525355", marginLeft: 50, alignSelf: 'center' }} /> : <ExpandMore style={{ color: "#525355", marginLeft: 50, alignSelf: 'center' }} />) : null}
</div> </div>
: :
item.label === 'Settings' ? item.label === 'Settings' ?
open ? open ?
<Link to={`${url}/${item.path}`}> <Link to={`${url}/${item.path}`}>
<ListItem button key={item.label} onClick={() => null}> <ListItem button key={item.label} onClick={() => null}>
<Typography style={{ color: 'white', fontSize: 14, fontFamily: 'nunito' }}>{item.label}</Typography> <Typography style={{ color: '#525355', fontSize: 14, fontFamily: 'nunito' }}>{item.label}</Typography>
</ListItem> </ListItem>
</Link> : null </Link> : null
: :
<Link to={`${url}/${item.path}`}> <Link to={`${url}/${item.path}`}>
<div style={{ paddingLeft: 10 }}> <div style={{ paddingLeft: 10 }} className={selectedIndex === item.label ? "active" : ""}>
<ListItem button key={item.label} onClick={() => setSelectedIndex(index)}> <ListItem button key={item.label} onClick={() => selectIndex(item.label)}>
<ListItemIcon style={{ minWidth: open ? 40 : 56 }}><img src={item.img} /></ListItemIcon> <ListItemIcon style={{ minWidth: open ? 40 : 56 }}><img src={item.img} style={{ fill: '#525355' }} /></ListItemIcon>
<Typography style={{ fontFamily: 'nunito', color: 'white', fontSize: 14 }}>{item.label}</Typography> <Typography style={{ fontFamily: 'nunito', color: '#525355', fontSize: 14 }}>{item.label}</Typography>
</ListItem> </ListItem>
</div> </div>
</Link> </Link>
} }
{item.subItem != null && {item.subItem != null &&
<div> <div>
<Collapse in={index === selectedIndex} timeout="auto" unmountOnExit> <Collapse in={item.label === selectedIndexs} timeout="auto" unmountOnExit>
<List component="div" disablePadding> <List component="div" disablePadding>
{item.subItem.map((sub, index) => { {item.subItem.map((sub, indexs) => {
return ( return (
<Link to={`${url}/${sub.path}`}> <Link to={`${url}/${sub.path}`}>
<div style={{ paddingLeft: 10 }}> <div style={{ paddingLeft: 10, }} className={selectedSubIndex === sub.label ? "active" : ""} onClick={() => selectSub(sub.label)}>
<ListItem style={{ paddingLeft: 57 }}> <ListItem button style={{ paddingLeft: 61 }}>
<Typography style={{ fontFamily: 'nunito', color: 'white', fontSize: 14 }}>{sub.label}</Typography> <Typography style={{ fontFamily: 'nunito', color: '#525355', fontSize: 14 }}>{sub.label}</Typography>
</ListItem> </ListItem>
</div> </div>
</Link> </Link>
...@@ -279,7 +301,7 @@ export default function MiniDrawer() { ...@@ -279,7 +301,7 @@ export default function MiniDrawer() {
</Drawer> </Drawer>
<div className={classes.content} style={{ justifyContent: 'space-between', padding: 0, backgroundColor: '#f8f8f8' }}> <div className={classes.content} style={{ justifyContent: 'space-between', padding: 0, backgroundColor: '#f8f8f8' }}>
<div> <div>
<div className={classes.toolbar} /> {/* <div className={classes.toolbar} /> */}
<MuiPickersUtilsProvider locale={localeID} utils={DateFnsUtils}> <MuiPickersUtilsProvider locale={localeID} utils={DateFnsUtils}>
<Switch> <Switch>
{HomeRoutes.map((route, index) => ( {HomeRoutes.map((route, index) => (
...@@ -299,9 +321,9 @@ export default function MiniDrawer() { ...@@ -299,9 +321,9 @@ export default function MiniDrawer() {
))} ))}
</Switch> </Switch>
</MuiPickersUtilsProvider> </MuiPickersUtilsProvider>
<Footer> {/* <Footer>
<Typography style={{ fontSize: '12px' }}>© EKSAD Technology. All rights reserved.</Typography> <Typography style={{ fontSize: '12px' }}>© EKSAD Technology. All rights reserved.</Typography>
</Footer> </Footer> */}
</div> </div>
</div> </div>
......
...@@ -84,7 +84,7 @@ class HomePage extends Component { ...@@ -84,7 +84,7 @@ class HomePage extends Component {
}] }]
return ( return (
<div style={{ flex: 1, backgroundColor: '#f8f8f8' }}> <div style={{ flex: 1, backgroundColor: '#f8f8f8' }}>
<div style={{ height: 78, backgroundColor: '#354960', flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}> <div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '24px', color: 'white' }}>Selamat Datang, John!</Typography> <Typography style={{ fontSize: '24px', color: 'white' }}>Selamat Datang, John!</Typography>
</div> </div>
<div style={{ flex: 1, padding: 20, width: '100%' }}> <div style={{ flex: 1, padding: 20, width: '100%' }}>
......
...@@ -32,8 +32,8 @@ export default class DashboardCAT extends Component { ...@@ -32,8 +32,8 @@ export default class DashboardCAT extends Component {
{ value: '2016', label: '2016' }, { value: '2016', label: '2016' },
] ]
return ( return (
<div style={{}}> <div className='a-s-p-mid no-header'>
<div style={{ backgroundColor: '#354960', padding: 28 }}> <div className={"main-color"} style={{ padding: 28 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>ON CHANGE CAT</Typography> <Typography style={{ fontSize: '16px', color: 'white' }}>ON CHANGE CAT</Typography>
</div> </div>
<div className="padding-20px"> <div className="padding-20px">
......
...@@ -155,7 +155,7 @@ export default class Parameter extends Component { ...@@ -155,7 +155,7 @@ export default class Parameter extends Component {
return ( return (
<div style={{ height: this.props.height }}> <div style={{ height: this.props.height }}>
{/* <Row> */} {/* <Row> */}
<div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} /> <div className={"main-color"} style={{ height: 199, width: '100%' }} />
<div> <div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}> <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<label style={{ color: 'white', fontSize: 16, alignSelf: 'center' }}>Parameter</label> <label style={{ color: 'white', fontSize: 16, alignSelf: 'center' }}>Parameter</label>
......
...@@ -263,7 +263,7 @@ export default class Perusahaan extends Component { ...@@ -263,7 +263,7 @@ export default class Perusahaan extends Component {
return ( return (
<div style={{ height: this.props.height }}> <div style={{ height: this.props.height }}>
{/* <Row> */} {/* <Row> */}
<div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} /> <div className={"main-color"} style={{ height: 199, width: '100%' }} />
{this.state.visiblePerusahaan === true ? {this.state.visiblePerusahaan === true ?
<div> <div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}> <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
......
...@@ -113,7 +113,7 @@ export default class ReportItems extends Component { ...@@ -113,7 +113,7 @@ export default class ReportItems extends Component {
<div> <div>
{this.state.itemReport === true ? {this.state.itemReport === true ?
<div style={{ height: this.props.height }}> <div style={{ height: this.props.height }}>
<div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} /> <div className={"main-color"} style={{ height: 199, width: '100%' }} />
<div> <div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}> <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<label style={{ color: 'white', fontSize: 16, alignSelf: 'center' }}>Master Data - Item Report</label> <label style={{ color: 'white', fontSize: 16, alignSelf: 'center' }}>Master Data - Item Report</label>
...@@ -200,7 +200,7 @@ export default class ReportItems extends Component { ...@@ -200,7 +200,7 @@ export default class ReportItems extends Component {
/> />
: :
<div style={{ height: this.props.height }}> <div style={{ height: this.props.height }}>
<div style={{ height: 199, width: '100%', backgroundColor: '#354960' }} /> <div style={{ height: 199, width: '100%' }} className={"main-color"}/>
<div> <div>
<div> <div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}> <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
......
...@@ -352,7 +352,7 @@ export default class UnitBisnis extends Component { ...@@ -352,7 +352,7 @@ export default class UnitBisnis extends Component {
return ( return (
<div style={{ height: this.props.height }}> <div style={{ height: this.props.height }}>
{/* <Row> */} {/* <Row> */}
<div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} /> <div style={{ height: 199, width: '100%' }} className={"main-color"}/>
{this.state.visibleUnitBisnis === true ? {this.state.visibleUnitBisnis === true ?
<div> <div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}> <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
......
...@@ -58,7 +58,7 @@ export default class VisualReportItems extends Component { ...@@ -58,7 +58,7 @@ export default class VisualReportItems extends Component {
return ( return (
<div> <div>
<div style={{ height: this.props.height }}> <div style={{ height: this.props.height }}>
<div style={{ height: 199, width: '100%', backgroundColor: '#354960' }} /> <div style={{ height: 199, width: '100%' }} className={"main-color"} />
<div> <div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}> <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<label style={{ color: 'white', width: '20%', fontSize: 16, paddingTop: 8 }}>Visualisasi Data</label> <label style={{ color: 'white', width: '20%', fontSize: 16, paddingTop: 8 }}>Visualisasi Data</label>
......
...@@ -172,7 +172,7 @@ export default class UserRole extends Component { ...@@ -172,7 +172,7 @@ export default class UserRole extends Component {
downloadFile = async () => { downloadFile = async () => {
let res = await fetch( let res = await fetch(
"https://trftia.eksad.com/tia-reporting-dev/public/attachment/download_file?fileName=UserTemplate&&fileType=xlsx" "https://tia.eksad.com/tia-reporting-dev/public/attachment/download_file?fileName=UserTemplate&&fileType=xlsx"
) )
res = await res.blob() res = await res.blob()
console.log(res) console.log(res)
...@@ -186,7 +186,7 @@ export default class UserRole extends Component { ...@@ -186,7 +186,7 @@ export default class UserRole extends Component {
} }
downloadDataTables = async () => { downloadDataTables = async () => {
let res = await fetch ("https://trftia.eksad.com/tia-reporting-dev/public/user/export_user") let res = await fetch ("https://tia.eksad.com/tia-reporting-dev/public/user/export_user")
res = await res.blob() res = await res.blob()
console.log(res) console.log(res)
if (res.size > 0) { if (res.size > 0) {
...@@ -424,12 +424,14 @@ export default class UserRole extends Component { ...@@ -424,12 +424,14 @@ export default class UserRole extends Component {
{this.state.add && ( {this.state.add && (
<AddUser <AddUser
onClickClose={this.closeAdd.bind(this)} onClickClose={this.closeAdd.bind(this)}
refresh={this.getUser.bind(this)}
data={this.state.indexData} data={this.state.indexData}
/> />
)} )}
{this.state.edit && ( {this.state.edit && (
<EditUser <EditUser
onClickClose={this.closeEdit.bind(this)} onClickClose={this.closeEdit.bind(this)}
refresh={this.getUser.bind(this)}
data={this.state.indexData} data={this.state.indexData}
/> />
)} )}
......
import React, { Component } from 'react'; import React, { Component } from 'react';
import { TextField, Divider, Typography, Checkbox, withStyles } from '@material-ui/core'; import { TextField, Divider, Typography, Checkbox, withStyles, Collapse } from '@material-ui/core';
import api from '../../../api'; import api from '../../../api';
import Autocomplete from '@material-ui/lab/Autocomplete'; import Autocomplete from '@material-ui/lab/Autocomplete';
import { titleCase } from '../../../library/Utils'; import { titleCase } from '../../../library/Utils';
import localeID from "date-fns/locale/id" import localeID from "date-fns/locale/id"
import format from "date-fns/format"; import format from "date-fns/format";
import * as R from 'ramda'
import RemoveIcon from '@material-ui/icons/Remove';
import AddIcon from '@material-ui/icons/Add';
import { DatePicker } from '@material-ui/pickers';
const CustomCheckbox = withStyles({ const CustomCheckbox = withStyles({
root: { root: {
...@@ -31,8 +35,20 @@ export default class AddUser extends Component { ...@@ -31,8 +35,20 @@ export default class AddUser extends Component {
startDate: null, startDate: null,
endDate: null, endDate: null,
company: [], company: [],
listCompany: [],
listRole: null, listRole: null,
selectedIndex: 0,
date: new Date(), date: new Date(),
errorFullname: false,
errorEmail: false,
errorRoleName: false,
errorStartDate: false,
errorEndDate: false,
msgErrorFN: '',
msgErrorEM: '',
msgErrorRN: '',
msgErrorSD: '',
msgErrorED: '',
} }
} }
...@@ -42,14 +58,47 @@ export default class AddUser extends Component { ...@@ -42,14 +58,47 @@ export default class AddUser extends Component {
componentDidMount() { componentDidMount() {
this.getRole() this.getRole()
this.getPerusahaan()
} }
handleChange(e) { handleChange(e, type) {
let data = this.state let data = this.state
this.setState({...data, tempData: {...this.state.tempData, [e.target.name] : e.target.value}}) let isDate = type !== '' ? true : false
if (isDate && type == 'start_date') {
this.setState({ ...data, startDate: format(e, 'yyyy-MM-dd'), endDate: null,
errorRoleName: false,
errorStartDate: false,
errorEndDate: false,
msgErrorRN: '',
msgErrorSD: '',
msgErrorED: '',
})
} else if (isDate && type == 'end_date') {
this.setState({ ...data, endDate: format(e, 'yyyy-MM-dd') ,
errorRoleName: false,
errorStartDate: false,
errorEndDate: false,
msgErrorRN: '',
msgErrorSD: '',
msgErrorED: '',
})
} else {
this.setState({ ...data, [e.target.name]: e.target.value,
errorRoleName: false,
errorStartDate: false,
errorEndDate: false,
msgErrorRN: '',
msgErrorSD: '',
msgErrorED: '',
})
}
} }
crateUser() { validasi() {
this.createUser()
}
createUser() {
let payload = { let payload = {
"role_id": this.state.role.role_id, "role_id": this.state.role.role_id,
"email": this.state.email, "email": this.state.email,
...@@ -61,6 +110,12 @@ export default class AddUser extends Component { ...@@ -61,6 +110,12 @@ export default class AddUser extends Component {
} }
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') {
this.props.onClickClose()
this.props.refresh()
} else {
alert(response.data.message)
}
}) })
} }
...@@ -85,6 +140,30 @@ export default class AddUser extends Component { ...@@ -85,6 +140,30 @@ export default class AddUser extends Component {
}) })
} }
getPerusahaan() {
api.create().getPerusahaanHierarki().then((response) => {
if(response.data.status == 'success') {
this.setState({listCompany: response.data.data})
console.log(response.data.data)
}
})
}
handleItemChecked(item) {
let indexID = this.state.company.findIndex((val) => val == item.company_id)
return indexID == -1 ? false : true
}
handleItemClick(item) {
let indexID = this.state.company.findIndex((val) => val == item.company_id)
let company = this.state.company
if (indexID == -1) {
company.push(item.company_id)
} else {
company.splice(indexID, 1)
}
this.setState({ company })
}
render() { render() {
return ( return (
...@@ -136,8 +215,8 @@ export default class AddUser extends Component { ...@@ -136,8 +215,8 @@ export default class AddUser extends Component {
id="fullname" id="fullname"
name="fullname" name="fullname"
label="Nama Lengkap" label="Nama Lengkap"
value={this.state.tempData == null? '' : this.state.tempData.fullname} value={this.state.fullname}
onChange={(e) => this.handleChange(e)} onChange={(e) => this.handleChange(e, '')}
// defaultValue="Default Value" // defaultValue="Default Value"
// helperText="Some important text" // helperText="Some important text"
/> />
...@@ -153,8 +232,8 @@ export default class AddUser extends Component { ...@@ -153,8 +232,8 @@ export default class AddUser extends Component {
id="email" id="email"
name="email" name="email"
label="Email" label="Email"
value={this.state.tempData == null? '' : this.state.tempData.email} value={this.state.email}
onChange={(e) => this.handleChange(e)} onChange={(e) => this.handleChange(e, '')}
// defaultValue="Default Value" // defaultValue="Default Value"
// helperText="Some important text" // helperText="Some important text"
/> />
...@@ -178,30 +257,41 @@ export default class AddUser extends Component { ...@@ -178,30 +257,41 @@ export default class AddUser extends Component {
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}> <div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1"> <div className="column-1">
<div className="margin-bottom-20px"> <div className="margin-bottom-20px">
<TextField <DatePicker
style={{ width: '100%'}} margin="normal"
id="startDate" id="startDate"
label="Berlaku Mulai" label="Berlaku Mulai"
name="start_date" format="dd MMMM yyyy"
value={this.state.tempData == null? '' : this.state.tempData.start_date} value={this.state.startDate}
defaultValue="Default Value" error={this.state.errorStartDate}
onChange={(e) => this.handleChange(e)} helperText={this.state.msgErrorSD}
// helperText="Some important text" onChange={(e) => this.handleChange(e, 'start_date')}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
style={{ padding: 0, margin: 0, width: '100%' }}
/> />
</div> </div>
</div> </div>
<div className="column-2"> <div className="column-2">
<div className="margin-bottom-20px"> <div className="margin-bottom-20px">
<TextField <DatePicker
style={{ width: '100%'}} margin="normal"
id="endDate" id="endDate"
label="Berlaku Hingga" label="Berlaku Hingga"
name="end_date" format="dd MMMM yyyy"
value={this.state.tempData == null? '' : this.state.tempData.end_date} value={this.state.endDate}
defaultValue="Default Value" error={this.state.errorEndDate}
onChange={(e) => this.handleChange(e)} helperText={this.state.msgErrorED}
// helperText="Some important text" minDate={this.state.startDate}
onChange={(e) => this.handleChange(e, 'end_date')}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
style={{ padding: 0, margin: 0, width: '100%' }}
/> />
</div> </div>
</div> </div>
...@@ -256,8 +346,46 @@ export default class AddUser extends Component { ...@@ -256,8 +346,46 @@ export default class AddUser extends Component {
<Divider style={{margin: 20}}/> <Divider style={{margin: 20}}/>
<div style={{paddingLeft: 20, paddingRight: 20}}> <div style={{paddingLeft: 20, paddingRight: 20}}>
<h5>Otorisasi Perusahaan</h5> <h5>Otorisasi Perusahaan</h5>
<div style={{paddingLeft: 10, overflow:'scroll', height: '25vh'}}>
{this.state.listCompany.map((item,index) => {
return(
<div>
<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 }}>
{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>
{item.childCompany.length > 0 && item.childCompany.map((items,indexs) => {
return (
<Collapse in={index == this.state.selectedIndex} timeout="auto" unmountOnExit>
<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>
</div> </div>
<div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}> <div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1" style={{ alignSelf: 'center' }}> <div className="column-1" style={{ alignSelf: 'center' }}>
......
import React, { Component } from 'react'; import React, { Component } from 'react';
import { TextField, Divider, Typography, Checkbox, withStyles } from '@material-ui/core'; import { TextField, Divider, Typography, Checkbox, withStyles, Collapse } from '@material-ui/core';
import api from '../../../api'; import api from '../../../api';
import { titleCase } from '../../../library/Utils'; import { titleCase } from '../../../library/Utils';
import Autocomplete from '@material-ui/lab/Autocomplete'; import Autocomplete from '@material-ui/lab/Autocomplete';
import { DatePicker } from '@material-ui/pickers';
import format from "date-fns/format";
import * as R from 'ramda'
import RemoveIcon from '@material-ui/icons/Remove';
import AddIcon from '@material-ui/icons/Add';
const CustomCheckbox = withStyles({ const CustomCheckbox = withStyles({
root: { root: {
...@@ -26,6 +31,18 @@ export default class EditUser extends Component { ...@@ -26,6 +31,18 @@ export default class EditUser extends Component {
listRole: null, listRole: null,
role: null, role: null,
company: [], company: [],
listCompany: [],
selectedIndex: 0,
errorFullname: false,
errorEmail: false,
errorRoleName: false,
errorStartDate: false,
errorEndDate: false,
msgErrorFN: '',
msgErrorEM: '',
msgErrorRN: '',
msgErrorSD: '',
msgErrorED: '',
} }
} }
...@@ -36,17 +53,46 @@ export default class EditUser extends Component { ...@@ -36,17 +53,46 @@ export default class EditUser extends Component {
componentDidMount() { componentDidMount() {
this.getDetailUser() this.getDetailUser()
this.getRole() this.getRole()
this.getPerusahaan()
} }
handleChange(e) { handleChange(e, type) {
let data = this.state let data = this.state
this.setState({...data, tempData: {...this.state.tempData, [e.target.name] : e.target.value}}) let isDate = type !== '' ? true : false
if (isDate && type == 'start_date') {
this.setState({ ...data, tempData: { ...this.state.tempData, start_date: format(e, 'yyyy-MM-dd'), end_date: null },
errorRoleName: false,
errorStartDate: false,
errorEndDate: false,
msgErrorRN: '',
msgErrorSD: '',
msgErrorED: '',
})
} else if (isDate && type == 'end_date') {
this.setState({ ...data, tempData: { ...this.state.tempData, end_date: format(e, 'yyyy-MM-dd') },
errorRoleName: false,
errorStartDate: false,
errorEndDate: false,
msgErrorRN: '',
msgErrorSD: '',
msgErrorED: '',
})
} else {
this.setState({ ...data, tempData: { ...this.state.tempData, [e.target.name]: e.target.value },
errorRoleName: false,
errorStartDate: false,
errorEndDate: false,
msgErrorRN: '',
msgErrorSD: '',
msgErrorED: '',
})
}
} }
getDetailUser() { getDetailUser() {
api.create().getDetailUser(this.state.paramsId).then((response) => { api.create().getDetailUser(this.state.paramsId).then((response) => {
if (response.data.status == 'success') { if (response.data.status == 'success') {
this.setState({tempData: response.data.data}) this.setState({tempData: response.data.data, company: response.data.data.company})
console.log(response.data.data) console.log(response.data.data)
} else { } else {
alert(response.data.message) alert(response.data.message)
...@@ -55,7 +101,7 @@ export default class EditUser extends Component { ...@@ -55,7 +101,7 @@ export default class EditUser extends Component {
} }
validasi() { validasi() {
this.props.onClickClose() this.updateUser()
} }
updateUser() { updateUser() {
...@@ -68,8 +114,14 @@ export default class EditUser extends Component { ...@@ -68,8 +114,14 @@ export default class EditUser extends Component {
"start_date": this.state.tempData.start_date, "start_date": this.state.tempData.start_date,
"end_date": this.state.tempData.end_date "end_date": this.state.tempData.end_date
} }
api.create().updateUser(payload).then((response) => { api.create().updateUser(payload).then((response) => {
console.log(response) if (response.data.status == 'success') {
this.props.onClickClose()
this.props.refresh()
} else {
alert(response.data.message)
}
}) })
} }
...@@ -89,7 +141,6 @@ export default class EditUser extends Component { ...@@ -89,7 +141,6 @@ export default class EditUser extends Component {
}; };
let index = roleData.findIndex((val) => val.role_id == this.state.tempData.role_id) let index = roleData.findIndex((val) => val.role_id == this.state.tempData.role_id)
console.log(index)
this.setState({listRole: defaultProps, role: index == -1? roleData[0] : roleData[index]}) this.setState({listRole: defaultProps, role: index == -1? roleData[0] : roleData[index]})
} else { } else {
alert(response.data.message) alert(response.data.message)
...@@ -97,6 +148,30 @@ export default class EditUser extends Component { ...@@ -97,6 +148,30 @@ export default class EditUser extends Component {
}) })
} }
getPerusahaan() {
api.create().getPerusahaanHierarki().then((response) => {
if(response.data.status == 'success') {
this.setState({listCompany: response.data.data})
console.log(response.data.data)
}
})
}
handleItemChecked(item) {
let indexID = this.state.company.findIndex((val) => val == item.company_id)
return indexID == -1 ? false : true
}
handleItemClick(item) {
let indexID = this.state.company.findIndex((val) => val == item.company_id)
let company = this.state.company
if (indexID == -1) {
company.push(item.company_id)
} else {
company.splice(indexID, 1)
}
this.setState({ company })
}
render() { render() {
return ( return (
...@@ -149,7 +224,7 @@ export default class EditUser extends Component { ...@@ -149,7 +224,7 @@ export default class EditUser extends Component {
name="fullname" name="fullname"
label="Nama Lengkap" label="Nama Lengkap"
value={this.state.tempData == null? '' : this.state.tempData.fullname} value={this.state.tempData == null? '' : this.state.tempData.fullname}
onChange={(e) => this.handleChange(e)} onChange={(e) => this.handleChange(e, '')}
// defaultValue="Default Value" // defaultValue="Default Value"
// helperText="Some important text" // helperText="Some important text"
/> />
...@@ -166,7 +241,7 @@ export default class EditUser extends Component { ...@@ -166,7 +241,7 @@ export default class EditUser extends Component {
name="email" name="email"
label="Email" label="Email"
value={this.state.tempData == null? '' : this.state.tempData.email} value={this.state.tempData == null? '' : this.state.tempData.email}
onChange={(e) => this.handleChange(e)} onChange={(e) => this.handleChange(e, '')}
// defaultValue="Default Value" // defaultValue="Default Value"
// helperText="Some important text" // helperText="Some important text"
/> />
...@@ -190,30 +265,41 @@ export default class EditUser extends Component { ...@@ -190,30 +265,41 @@ export default class EditUser extends Component {
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}> <div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1"> <div className="column-1">
<div className="margin-bottom-20px"> <div className="margin-bottom-20px">
<TextField <DatePicker
style={{ width: '100%'}} margin="normal"
id="startDate" id="startDate"
label="Berlaku Mulai" label="Berlaku Mulai"
name="start_date" format="dd MMMM yyyy"
value={this.state.tempData == null? '' : this.state.tempData.start_date} value={this.state.tempData == null ? null : this.state.tempData.start_date}
defaultValue="Default Value" error={this.state.errorStartDate}
onChange={(e) => this.handleChange(e)} helperText={this.state.msgErrorSD}
// helperText="Some important text" onChange={(e) => this.handleChange(e, 'start_date')}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
style={{ padding: 0, margin: 0, width: '100%' }}
/> />
</div> </div>
</div> </div>
<div className="column-2"> <div className="column-2">
<div className="margin-bottom-20px"> <div className="margin-bottom-20px">
<TextField <DatePicker
style={{ width: '100%'}} margin="normal"
id="endDate" id="endDate"
label="Berlaku Hingga" label="Berlaku Hingga"
name="end_date" format="dd MMMM yyyy"
value={this.state.tempData == null? '' : this.state.tempData.end_date} value={this.state.tempData == null ? null : this.state.tempData.end_date}
defaultValue="Default Value" error={this.state.errorEndDate}
onChange={(e) => this.handleChange(e)} helperText={this.state.msgErrorED}
// helperText="Some important text" minDate={this.state.tempData == null ? null : this.state.tempData.start_date}
onChange={(e) => this.handleChange(e, 'end_date')}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
style={{ padding: 0, margin: 0, width: '100%' }}
/> />
</div> </div>
</div> </div>
...@@ -268,7 +354,46 @@ export default class EditUser extends Component { ...@@ -268,7 +354,46 @@ export default class EditUser extends Component {
<Divider style={{margin: 20}}/> <Divider style={{margin: 20}}/>
<div style={{paddingLeft: 20, paddingRight: 20}}> <div style={{paddingLeft: 20, paddingRight: 20}}>
<h5>Otorisasi Perusahaan</h5> <h5>Otorisasi Perusahaan</h5>
<div style={{paddingLeft: 10, overflow:'scroll', height: '25vh'}}>
{this.state.listCompany.map((item,index) => {
return(
<div>
<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 }}>
{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>
{item.childCompany.length > 0 && item.childCompany.map((items,indexs) => {
return (
<Collapse in={index == this.state.selectedIndex} timeout="auto" unmountOnExit>
<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>
</div> </div>
<div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}> <div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
......
...@@ -178,7 +178,7 @@ class UserRole extends Component { ...@@ -178,7 +178,7 @@ class UserRole extends Component {
return ( return (
<div style={{ height: this.props.height }}> <div style={{ height: this.props.height }}>
{/* <Row> */} {/* <Row> */}
<div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} /> <div className={"main-color"} style={{ height: 199, width: '100%' }} />
<div> <div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}> <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<label style={{ fontFamily: 'nunito', color: 'white', width: '20%', alignSelf: 'center', fontSize: 18}}>Master Data - Role & Otorisasi</label> <label style={{ fontFamily: 'nunito', color: 'white', width: '20%', alignSelf: 'center', fontSize: 18}}>Master Data - Role & Otorisasi</label>
......
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