Skip to content

T
Tia-dev
Commit e1d5cff2 authored by Rifka Kurnia Irfiana's avatar Rifka Kurnia Irfiana
Browse files
Options

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

parents 11b80ca0 33b53923
Hide whitespace changes
Inline Side-by-side
Showing with 4008 additions and 287 deletions
package-lock.json
View file @ e1d5cff2
This source diff could not be displayed because it is too large. You can view the blob instead.
src/api/index.js
View file @ e1d5cff2
......@@ -90,6 +90,7 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
const getPerusahaan = () => api.get('company/get_all_company')
const createPerusahaan = (body) => api.post('/company/create_company', body)
const updatePerusahaan = (body) => api.post('/company/update_company', body)
const getPerusahaanHierarki = () => api.get('company/get_company_hierarki')
// 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/') =>
const getUser = () => api.get('user/get_all_user')
const getDetailUser = (userId) => api.get(`user/get_user_by_id/${userId}`)
const searchUser = (body) => api.post('user/search_user', body)
const createUser = (body) => api.get('user/create_user', body)
const updateUser = (body) => api.get('user/update_user', body)
const createUser = (body) => api.post('user/create_user', body)
const updateUser = (body) => api.post('user/update_user', body)
const deleteUser = (userId) => api.get(`user/delete_user/${userId}`)
const changePassword = (body) => api.post('/user/change_password', body)
//Template
......@@ -161,7 +161,8 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
downloadTemplate,
checkUploadUnitBisnis,
uploadUnitBisnis,
changePassword
changePassword,
getPerusahaanHierarki
}
}
......
src/assets/sass/app.css
View file @ e1d5cff2
.main-color{
background-color: #1a2d3e !important;
}
.sub-color{
background-color: #f0f1f3 !important;
}
.gradient-purple {
background: linear-gradient(to top, #9b59b6 10%, #e74c3c 100%);
......@@ -127,6 +134,18 @@
padding: 5px 15px;
border-bottom: 1px rgba(0, 0, 0, 0.1) solid;
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: #fff; }
......@@ -5968,6 +5987,7 @@
font-size: 10pt;
text-align: center;
cursor: pointer;
outline: 'none';
/*&:focus {
box-shadow: 0 0 0 4px $pos-color;
}*/ }
src/container/ApprovalMatrix/VisualisasiAM.js
View file @ e1d5cff2
......@@ -70,31 +70,44 @@ export default class VisualisasiAM extends Component {
api.create().searchAM(body).then(response => {
if (response.data.status == 'success') {
let data = response.data.data
console.log(data)
let listVisual = []
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){
listVisual.push(item)
listVisual.push({
orderId: item.orders,
data: [item]
})
console.log(listVisual);
} else {
return
listVisual[indexId].data.push(item)
}
})
this.setState({ listApproval: listVisual, typeData: response.data.data })
console.log(data);
this.setState({ listApproval: listVisual })
console.log(listVisual);
} else {
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() {
const that = this;
const dragProps = {
onDragEnd(fromIndex, toIndex) {
const data = [...that.state.data];
const data = [...that.state.listApproval];
const item = data.splice(fromIndex, 1)[0];
that.handleChangeOrder(fromIndex, toIndex, that)
data.splice(toIndex, 0, item);
that.setState({ data });
that.setState({ listApproval: data });
},
nodeSelector: 'li',
handleSelector: 'a'
......@@ -125,8 +138,7 @@ export default class VisualisasiAM extends Component {
<ol>
{this.state.listApproval.map((item, index) => (
<li key={index}>
{'urutan: ' + item.orders}
<a href="#">Drag</a>
<a href="#">{`${item.data.map((items, indexs) => {return(items.fullname)})} ${item.data.length == 1? '' : item.data[0].operator_type_name}`}</a>
</li>
))}
</ol>
......
src/container/Beranda.js
View file @ e1d5cff2
......@@ -5,7 +5,7 @@ class Beranda extends Component {
render() {
return (
<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: '12px', color: 'white', marginTop: 50 }}>Task Yang Harus Dikerjakan</Typography>
</div>
......
src/container/BudgetTahunan.js
View file @ e1d5cff2
......@@ -99,7 +99,7 @@ export default class BudgetTahunan extends Component {
]
return (
<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>
</div>
<div style={{ padding: 20, width: '100%' }}>
......
src/container/BudgetTahunan/BalanceSheet.js
View file @ e1d5cff2
......@@ -254,7 +254,7 @@ export default class BalanceSheet extends Component {
]
return (
<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>
</div>
<div style={{ flex: 1, padding: 20, width: '100%' }}>
......
src/container/Home.js
View file @ e1d5cff2
......@@ -39,6 +39,7 @@ import { Avatar } from '@material-ui/core';
import HomeRoutes from '../router/homeRoutes'
import ArraySide from '../library/Array'
import Constant from '../library/Constant';
import api from '../api';
const drawerWidth = 307;
......@@ -79,7 +80,7 @@ const useStyles = makeStyles((theme) => ({
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
backgroundColor: '#0d2846'
backgroundColor: '#f6f7f9'
},
drawerClose: {
transition: theme.transitions.create('width', {
......@@ -87,11 +88,11 @@ const useStyles = makeStyles((theme) => ({
duration: theme.transitions.duration.leavingScreen,
}),
overflowX: 'hidden',
width: theme.spacing(7) + 1,
width: theme.spacing(3) + 2,
[theme.breakpoints.up('sm')]: {
width: theme.spacing(9) + 1,
width: theme.spacing(7) + 1,
},
backgroundColor: '#0d2846'
backgroundColor: '#f6f7f9'
},
toolbar: {
display: 'flex',
......@@ -124,10 +125,27 @@ export default function MiniDrawer() {
const theme = useTheme();
const [open, setOpen] = React.useState(false);
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(() => {
if(userFullname == "" && userEmail == "") {
getUserData()
}
})
// React.useEffect(() => {
// //
// })
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 = () => {
setOpen(true);
......@@ -137,6 +155,21 @@ export default function MiniDrawer() {
setOpen(false);
};
const resetIndex = () => {
setSelectedIndex("")
setSelectedIndexs("")
}
const selectSub = (e) => {
setSelectSub(e)
setSelectedIndex("")
}
const selectIndex = (e) => {
setSelectSub("")
setSelectedIndex(e)
}
let { path, url } = useRouteMatch();
const { height, width } = UseWindowDimensions();
......@@ -150,34 +183,6 @@ export default function MiniDrawer() {
[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>
<Drawer
variant="permanent"
......@@ -193,16 +198,33 @@ export default function MiniDrawer() {
}}
>
<div className={classes.toolbarDrawer} style={{
backgroundColor: '#51c5ea',
height: open ? null : 68,
paddingBottom: open ? 55 : null
backgroundColor: '#1a2d3e',
height: open ? null : 78,
paddingLeft: open ? null : 55,
display: open ? null : 'grid',
paddingBottom: open ? 55 : null,
alignSelf: open? null : 'center'
}}>
<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' }} />
<IconButton onClick={handleDrawerClose}>
<ChevronLeftIcon style={{ fill: 'white' }} />
</IconButton>
</div>
{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' }} />
<IconButton onClick={handleDrawerClose} style={{outline: 'none'}}>
<ChevronLeftIcon style={{ fill: 'white' }} />
</IconButton>
</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 &&
<div style={{ width: '100%' }}>
<Typography style={{ fontSize: 12, color: '#fff', textAlign: 'center', fontWeight: 'bold' }}>John Doe</Typography>
......@@ -213,57 +235,57 @@ export default function MiniDrawer() {
<Divider />
{open &&
<div style={{ width: '100%', textAlign: '-webkit-center', marginTop: -40 }}>
<div style={{ width: 90, height: 90, backgroundColor: '#0d2846', borderRadius: 50, display: 'flex', justifyContent: 'center' }}>
<div style={{ width: 72, height: 72, backgroundColor: 'white', borderRadius: 50, alignSelf: 'center' }}>
<div className={"sub-color"} style={{ width: 90, height: 90, borderRadius: 50, display: 'flex', justifyContent: 'center' }}>
<div style={{ width: 72, height: 72, backgroundColor: '#838383', borderRadius: 50, alignSelf: 'center' }}>
</div>
</div>
</div>
}
{open &&
<div style={{ marginLeft: 20, marginTop: 20 }}>
<Typography style={{ color: 'white', fontSize: 14, fontFamily: 'nunito' }}>Application</Typography>
<div style={{ marginLeft: 20, marginTop: 10 }}>
<Typography style={{ color: '#525355', fontSize: 14, fontFamily: 'nunito' }}>Application</Typography>
</div>
}
<List>
{ArraySide.map((item, index) => (
<div style={{ marginTop: index === 0 ? null : 10 }}>
<div style={{ marginTop: index === 0 ? null : 5 }} >
{item.subItem != null ?
<div style={{ justifyContent: 'space-between', flexDirection: 'row', display: 'flex', paddingLeft: 10, paddingRight: 10 }} onClick={() => selectedIndex == 0 ? setSelectedIndex(index) : setSelectedIndex(0)}>
<ListItem button key={item.label}>
<div style={{ justifyContent: 'space-between', flexDirection: 'row', display: 'flex', paddingLeft: 10, paddingRight: 10 }} onClick={() => selectedIndexs == null ? setSelectedIndexs(item.label) : setSelectedIndexs(null)}>
<ListItem key={item.label}>
<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>
{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>
:
item.label === 'Settings' ?
open ?
<Link to={`${url}/${item.path}`}>
<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>
</Link> : null
:
<Link to={`${url}/${item.path}`}>
<div style={{ paddingLeft: 10 }}>
<ListItem button key={item.label} onClick={() => setSelectedIndex(index)}>
<ListItemIcon style={{ minWidth: open ? 40 : 56 }}><img src={item.img} /></ListItemIcon>
<Typography style={{ fontFamily: 'nunito', color: 'white', fontSize: 14 }}>{item.label}</Typography>
<div style={{ paddingLeft: 10 }} className={selectedIndex === item.label ? "active" : ""}>
<ListItem button key={item.label} onClick={() => selectIndex(item.label)}>
<ListItemIcon style={{ minWidth: open ? 40 : 56 }}><img src={item.img} style={{ fill: '#525355' }} /></ListItemIcon>
<Typography style={{ fontFamily: 'nunito', color: '#525355', fontSize: 14 }}>{item.label}</Typography>
</ListItem>
</div>
</Link>
}
{item.subItem != null &&
<div>
<Collapse in={index === selectedIndex} timeout="auto" unmountOnExit>
<Collapse in={item.label === selectedIndexs} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
{item.subItem.map((sub, index) => {
{item.subItem.map((sub, indexs) => {
return (
<Link to={`${url}/${sub.path}`}>
<div style={{ paddingLeft: 10 }}>
<ListItem style={{ paddingLeft: 57 }}>
<Typography style={{ fontFamily: 'nunito', color: 'white', fontSize: 14 }}>{sub.label}</Typography>
<div style={{ paddingLeft: 10, }} className={selectedSubIndex === sub.label ? "active" : ""} onClick={() => selectSub(sub.label)}>
<ListItem button style={{ paddingLeft: 61 }}>
<Typography style={{ fontFamily: 'nunito', color: '#525355', fontSize: 14 }}>{sub.label}</Typography>
</ListItem>
</div>
</Link>
......@@ -279,7 +301,7 @@ export default function MiniDrawer() {
</Drawer>
<div className={classes.content} style={{ justifyContent: 'space-between', padding: 0, backgroundColor: '#f8f8f8' }}>
<div>
<div className={classes.toolbar} />
{/* <div className={classes.toolbar} /> */}
<MuiPickersUtilsProvider locale={localeID} utils={DateFnsUtils}>
<Switch>
{HomeRoutes.map((route, index) => (
......@@ -299,9 +321,9 @@ export default function MiniDrawer() {
))}
</Switch>
</MuiPickersUtilsProvider>
<Footer>
{/* <Footer>
<Typography style={{ fontSize: '12px' }}>© EKSAD Technology. All rights reserved.</Typography>
</Footer>
</Footer> */}
</div>
</div>
......
src/container/HomePage.js
View file @ e1d5cff2
......@@ -84,7 +84,7 @@ class HomePage extends Component {
}]
return (
<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>
</div>
<div style={{ flex: 1, padding: 20, width: '100%' }}>
......
src/container/Laporan/DashboardCAT.js
View file @ e1d5cff2
......@@ -32,8 +32,8 @@ export default class DashboardCAT extends Component {
{ value: '2016', label: '2016' },
]
return (
<div style={{}}>
<div style={{ backgroundColor: '#354960', padding: 28 }}>
<div className='a-s-p-mid no-header'>
<div className={"main-color"} style={{ padding: 28 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>ON CHANGE CAT</Typography>
</div>
<div className="padding-20px">
......
src/container/MasterData/Parameter/Parameter.js
View file @ e1d5cff2
......@@ -155,7 +155,7 @@ export default class Parameter extends Component {
return (
<div style={{ height: this.props.height }}>
{/* <Row> */}
<div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
<div className={"main-color"} style={{ height: 199, width: '100%' }} />
<div>
<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>
......
src/container/MasterData/Perusahaan/Perusahaan.js
View file @ e1d5cff2
......@@ -263,7 +263,7 @@ export default class Perusahaan extends Component {
return (
<div style={{ height: this.props.height }}>
{/* <Row> */}
<div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
<div className={"main-color"} style={{ height: 199, width: '100%' }} />
{this.state.visiblePerusahaan === true ?
<div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
......
src/container/MasterData/ReportItems.js
View file @ e1d5cff2
......@@ -113,7 +113,7 @@ export default class ReportItems extends Component {
<div>
{this.state.itemReport === true ?
<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 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>
......@@ -200,7 +200,7 @@ export default class ReportItems extends Component {
/>
:
<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 }}>
......
src/container/MasterData/UnitBisnis.js
View file @ e1d5cff2
......@@ -352,7 +352,7 @@ export default class UnitBisnis extends Component {
return (
<div style={{ height: this.props.height }}>
{/* <Row> */}
<div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
<div style={{ height: 199, width: '100%' }} className={"main-color"}/>
{this.state.visibleUnitBisnis === true ?
<div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
......
src/container/MasterData/formReportItems/VisualReportItems.js
View file @ e1d5cff2
......@@ -58,7 +58,7 @@ export default class VisualReportItems extends Component {
return (
<div>
<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 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>
......
src/container/Otorisasi/User.js
View file @ e1d5cff2
......@@ -172,7 +172,7 @@ export default class UserRole extends Component {
downloadFile = async () => {
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()
console.log(res)
......@@ -186,7 +186,7 @@ export default class UserRole extends Component {
}
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()
console.log(res)
if (res.size > 0) {
......@@ -424,12 +424,14 @@ export default class UserRole extends Component {
{this.state.add && (
<AddUser
onClickClose={this.closeAdd.bind(this)}
refresh={this.getUser.bind(this)}
data={this.state.indexData}
/>
)}
{this.state.edit && (
<EditUser
onClickClose={this.closeEdit.bind(this)}
refresh={this.getUser.bind(this)}
data={this.state.indexData}
/>
)}
......
src/container/Otorisasi/User/AddUser.js
View file @ e1d5cff2
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 Autocomplete from '@material-ui/lab/Autocomplete';
import { titleCase } from '../../../library/Utils';
import localeID from "date-fns/locale/id"
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({
root: {
......@@ -31,8 +35,20 @@ export default class AddUser extends Component {
startDate: null,
endDate: null,
company: [],
listCompany: [],
listRole: null,
selectedIndex: 0,
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 {
componentDidMount() {
this.getRole()
this.getPerusahaan()
}
handleChange(e) {
handleChange(e, type) {
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: '',
})
}
}
validasi() {
this.createUser()
}
crateUser() {
createUser() {
let payload = {
"role_id": this.state.role.role_id,
"email": this.state.email,
......@@ -61,6 +110,12 @@ export default class AddUser extends Component {
}
api.create().createUser(payload).then((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 {
})
}
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() {
return (
......@@ -136,8 +215,8 @@ export default class AddUser extends Component {
id="fullname"
name="fullname"
label="Nama Lengkap"
value={this.state.tempData == null? '' : this.state.tempData.fullname}
onChange={(e) => this.handleChange(e)}
value={this.state.fullname}
onChange={(e) => this.handleChange(e, '')}
// defaultValue="Default Value"
// helperText="Some important text"
/>
......@@ -153,8 +232,8 @@ export default class AddUser extends Component {
id="email"
name="email"
label="Email"
value={this.state.tempData == null? '' : this.state.tempData.email}
onChange={(e) => this.handleChange(e)}
value={this.state.email}
onChange={(e) => this.handleChange(e, '')}
// defaultValue="Default Value"
// helperText="Some important text"
/>
......@@ -176,32 +255,43 @@ export default class AddUser extends Component {
</div>
<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">
<TextField
style={{ width: '100%'}}
id="startDate"
label="Berlaku Mulai"
name="start_date"
value={this.state.tempData == null? '' : this.state.tempData.start_date}
defaultValue="Default Value"
onChange={(e) => this.handleChange(e)}
// helperText="Some important text"
<DatePicker
margin="normal"
id="startDate"
label="Berlaku Mulai"
format="dd MMMM yyyy"
value={this.state.startDate}
error={this.state.errorStartDate}
helperText={this.state.msgErrorSD}
onChange={(e) => this.handleChange(e, 'start_date')}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
style={{ padding: 0, margin: 0, width: '100%' }}
/>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%'}}
id="endDate"
label="Berlaku Hingga"
name="end_date"
value={this.state.tempData == null? '' : this.state.tempData.end_date}
defaultValue="Default Value"
onChange={(e) => this.handleChange(e)}
// helperText="Some important text"
<DatePicker
margin="normal"
id="endDate"
label="Berlaku Hingga"
format="dd MMMM yyyy"
value={this.state.endDate}
error={this.state.errorEndDate}
helperText={this.state.msgErrorED}
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>
......@@ -256,8 +346,46 @@ export default class AddUser extends Component {
<Divider style={{margin: 20}}/>
<div style={{paddingLeft: 20, paddingRight: 20}}>
<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 className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1" style={{ alignSelf: 'center' }}>
......
src/container/Otorisasi/User/EditUser.js
View file @ e1d5cff2
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 { titleCase } from '../../../library/Utils';
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({
root: {
......@@ -26,6 +31,18 @@ export default class EditUser extends Component {
listRole: null,
role: null,
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 {
componentDidMount() {
this.getDetailUser()
this.getRole()
this.getPerusahaan()
}
handleChange(e) {
handleChange(e, type) {
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() {
api.create().getDetailUser(this.state.paramsId).then((response) => {
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)
} else {
alert(response.data.message)
......@@ -55,7 +101,7 @@ export default class EditUser extends Component {
}
validasi() {
this.props.onClickClose()
this.updateUser()
}
updateUser() {
......@@ -68,8 +114,14 @@ export default class EditUser extends Component {
"start_date": this.state.tempData.start_date,
"end_date": this.state.tempData.end_date
}
api.create().updateUser(payload).then((response) => {
console.log(response)
api.create().updateUser(payload).then((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 {
};
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]})
} else {
alert(response.data.message)
......@@ -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() {
return (
......@@ -149,7 +224,7 @@ export default class EditUser extends Component {
name="fullname"
label="Nama Lengkap"
value={this.state.tempData == null? '' : this.state.tempData.fullname}
onChange={(e) => this.handleChange(e)}
onChange={(e) => this.handleChange(e, '')}
// defaultValue="Default Value"
// helperText="Some important text"
/>
......@@ -166,7 +241,7 @@ export default class EditUser extends Component {
name="email"
label="Email"
value={this.state.tempData == null? '' : this.state.tempData.email}
onChange={(e) => this.handleChange(e)}
onChange={(e) => this.handleChange(e, '')}
// defaultValue="Default Value"
// helperText="Some important text"
/>
......@@ -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="column-1">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%'}}
id="startDate"
label="Berlaku Mulai"
name="start_date"
value={this.state.tempData == null? '' : this.state.tempData.start_date}
defaultValue="Default Value"
onChange={(e) => this.handleChange(e)}
// helperText="Some important text"
<DatePicker
margin="normal"
id="startDate"
label="Berlaku Mulai"
format="dd MMMM yyyy"
value={this.state.tempData == null ? null : this.state.tempData.start_date}
error={this.state.errorStartDate}
helperText={this.state.msgErrorSD}
onChange={(e) => this.handleChange(e, 'start_date')}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
style={{ padding: 0, margin: 0, width: '100%' }}
/>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%'}}
id="endDate"
label="Berlaku Hingga"
name="end_date"
value={this.state.tempData == null? '' : this.state.tempData.end_date}
defaultValue="Default Value"
onChange={(e) => this.handleChange(e)}
// helperText="Some important text"
<DatePicker
margin="normal"
id="endDate"
label="Berlaku Hingga"
format="dd MMMM yyyy"
value={this.state.tempData == null ? null : this.state.tempData.end_date}
error={this.state.errorEndDate}
helperText={this.state.msgErrorED}
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>
......@@ -268,7 +354,46 @@ export default class EditUser extends Component {
<Divider style={{margin: 20}}/>
<div style={{paddingLeft: 20, paddingRight: 20}}>
<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 className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
......
src/container/Otorisasi/UserRole.js
View file @ e1d5cff2
......@@ -178,7 +178,7 @@ class UserRole extends Component {
return (
<div style={{ height: this.props.height }}>
{/* <Row> */}
<div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
<div className={"main-color"} style={{ height: 199, width: '100%' }} />
<div>
<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>
......
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