Skip to content

T
Tia-dev
Commit 714cf0d5 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 1e92aec5 f5ec6c7b
Show whitespace changes
Inline Side-by-side
Showing with 2082 additions and 1229 deletions
src/api/index.js
View file @ 714cf0d5
...@@ -79,6 +79,7 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') => ...@@ -79,6 +79,7 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
//Menu //Menu
const getMenu = () => api.get('menu/get_menu_hierarki') const getMenu = () => api.get('menu/get_menu_hierarki')
const getMenuByRole = () => api.get('menu/get_menu_hierarki_by_role') const getMenuByRole = () => api.get('menu/get_menu_hierarki_by_role')
const getMenuByUser = () => api.get('menu/get_menu')
//UNIT BISNIS //UNIT BISNIS
const getUnitBisnis = () => api.get('business_unit/get_all_business_unit') const getUnitBisnis = () => api.get('business_unit/get_all_business_unit')
...@@ -87,6 +88,7 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') => ...@@ -87,6 +88,7 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
const searchUnitBisnis = (body) => api.post('/business_unit/search_business_unit', body) const searchUnitBisnis = (body) => api.post('/business_unit/search_business_unit', body)
const checkUploadUnitBisnis = (body) => api.post('/business_unit/check_import', body) const checkUploadUnitBisnis = (body) => api.post('/business_unit/check_import', body)
const uploadUnitBisnis = (body) => api.post('/business_unit/import_business_unit', body) const uploadUnitBisnis = (body) => api.post('/business_unit/import_business_unit', body)
const getUnitBisnisActive = () => api.get('business_unit/get_all_business_unit_active')
// Perusahaan // Perusahaan
const getPerusahaan = () => api.get('company/get_all_company') const getPerusahaan = () => api.get('company/get_all_company')
...@@ -94,6 +96,11 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') => ...@@ -94,6 +96,11 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
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') const getPerusahaanHierarki = () => api.get('company/get_company_hierarki')
const saveVisualisasiPerusahaan = (body) => api.post('company/save_visualization', body)
const checkUploadPerusahaan = (body) => api.post('company/check_import', body)
const getDetailPerusahaan = (id) => api.get(`company/get_company_by_id/${id}`)
const uploadPerusahaan = (body) => api.post('company/import_company', body)
const searchPerusahaan = (body) => api.post('company/search_company', body)
// APPROVAL MATRIX // APPROVAL MATRIX
const getAM = () => api.get('approval_matrix/get_all_approval_matrix') const getAM = () => api.get('approval_matrix/get_all_approval_matrix')
...@@ -119,11 +126,15 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') => ...@@ -119,11 +126,15 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
const getReportItems = () => api.get('item_report/get_all_item_report') const getReportItems = () => api.get('item_report/get_all_item_report')
const getInputType = () => api.get('type_report/get_all_type_report') const getInputType = () => api.get('type_report/get_all_type_report')
const getReportType = () => api.get('report/get_all_report') const getReportType = () => api.get('report/get_all_report')
const getDetailReportItems = (userId) => api.get(`item_report/get_item_report_by_id/${userId}`)
const searchReportItems = (body) => api.post('/item_report/search_item_report', body) const searchReportItems = (body) => api.post('/item_report/search_item_report', body)
const createReportItems = (body) => api.post('/item_report/create_item_report', body) const createReportItems = (body) => api.post('/item_report/create_item_report', body)
const updateReportItems = (body) => api.post('/item_report/update_item_report', body)
const checkUploadReportItems = (body) => api.post('/item_report/check_import', body) const checkUploadReportItems = (body) => api.post('/item_report/check_import', body)
const uploadReportItems = (body) => api.post('/item_report/import_item_report', body) const uploadReportItems = (body) => api.post('/item_report/import_item_report', body)
const getItemReportHierarki = () => api.get('item_report/get_item_report_hierarki') const getItemReportHierarki = (body) => api.post('item_report/get_item_report_hierarki', body)
const saveVisualisasiReport = (body) => api.post('item_report/save_visualization', body)
const getReportParent = (body) => api.post('item_report/get_parent_item_report', body)
//PARAMETER //PARAMETER
const getAllParameter = () => api.get('/setting/get_all_setting') const getAllParameter = () => api.get('/setting/get_all_setting')
...@@ -134,6 +145,7 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') => ...@@ -134,6 +145,7 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
const updateParameter = (body) => api.post('setting/update_setting', body) const updateParameter = (body) => api.post('setting/update_setting', body)
const checkUploadParameter = (body) => api.post('setting/check_import', body) const checkUploadParameter = (body) => api.post('setting/check_import', body)
const uploadParameter = (body) => api.post('/setting/import_setting', body) const uploadParameter = (body) => api.post('/setting/import_setting', body)
const searchParameter = (body) => api.post('setting/search_setting', body)
//Template //Template
const downloadTemplate = (fileName, fileType) => api.get(`attachment/download_file?fileName=${fileName}&&fileType=${fileType}`) const downloadTemplate = (fileName, fileType) => api.get(`attachment/download_file?fileName=${fileName}&&fileType=${fileType}`)
...@@ -193,6 +205,8 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') => ...@@ -193,6 +205,8 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
getReportItems, getReportItems,
searchReportItems, searchReportItems,
createReportItems, createReportItems,
updateReportItems,
getDetailReportItems,
getInputType, getInputType,
getReportType, getReportType,
checkUploadReportItems, checkUploadReportItems,
...@@ -208,7 +222,17 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') => ...@@ -208,7 +222,17 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
checkUploadParameter, checkUploadParameter,
uploadParameter, uploadParameter,
getItemReportHierarki, getItemReportHierarki,
getMenuByRole getMenuByRole,
saveVisualisasiReport,
saveVisualisasiPerusahaan,
getReportParent,
searchParameter,
checkUploadPerusahaan,
getDetailPerusahaan,
uploadPerusahaan,
searchPerusahaan,
getUnitBisnisActive,
getMenuByUser
} }
} }
......
src/assets/Images.js
View file @ 714cf0d5
...@@ -43,6 +43,7 @@ const Images = { ...@@ -43,6 +43,7 @@ const Images = {
logout: require('./setting.png'), logout: require('./setting.png'),
setting: require('./logout.png'), setting: require('./logout.png'),
failedCopy: require('./failed-copy.svg'), failedCopy: require('./failed-copy.svg'),
triputraLogo: require('./triputra-logo.png')
} }
......
src/container/Home.js
View file @ 714cf0d5
...@@ -69,6 +69,30 @@ const useStyles = makeStyles((theme) => ({ ...@@ -69,6 +69,30 @@ const useStyles = makeStyles((theme) => ({
flexShrink: 0, flexShrink: 0,
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
}, },
topleftOpen: {
width: drawerWidth,
borderRight: 0,
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
backgroundColor: '#1a2d3e'
},
topleftClose: {
borderRight: 0,
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
overflowX: 'hidden',
width: theme.spacing(3) + 2,
height: '78px',
[theme.breakpoints.up('sm')]: {
width: theme.spacing(7) + 1,
},
paddingLeft: 15,
backgroundColor: '#1a2d3e'
},
drawerOpen: { drawerOpen: {
width: drawerWidth, width: drawerWidth,
borderRight: 0, borderRight: 0,
...@@ -76,7 +100,7 @@ const useStyles = makeStyles((theme) => ({ ...@@ -76,7 +100,7 @@ const useStyles = makeStyles((theme) => ({
easing: theme.transitions.easing.sharp, easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen, duration: theme.transitions.duration.enteringScreen,
}), }),
backgroundColor: '#f6f7f9' backgroundColor: '#f6f7f9',
}, },
drawerClose: { drawerClose: {
borderRight: 0, borderRight: 0,
...@@ -89,7 +113,7 @@ const useStyles = makeStyles((theme) => ({ ...@@ -89,7 +113,7 @@ const useStyles = makeStyles((theme) => ({
[theme.breakpoints.up('sm')]: { [theme.breakpoints.up('sm')]: {
width: theme.spacing(7) + 1, width: theme.spacing(7) + 1,
}, },
backgroundColor: '#f6f7f9' backgroundColor: '#f6f7f9',
}, },
toolbar: { toolbar: {
display: 'flex', display: 'flex',
...@@ -126,6 +150,8 @@ export default function MiniDrawer() { ...@@ -126,6 +150,8 @@ export default function MiniDrawer() {
const [selectedSubIndex, setSelectSub] = React.useState([]); const [selectedSubIndex, setSelectSub] = React.useState([]);
const [userFullname, setUserFullname] = React.useState("") const [userFullname, setUserFullname] = React.useState("")
const [userEmail, setUserEmail] = React.useState("") const [userEmail, setUserEmail] = React.useState("")
const [application, setApplication] = React.useState([])
const [setting, setSetting] = React.useState([])
const [data, setData] = React.useState({ const [data, setData] = React.useState({
array: [ array: [
{ {
...@@ -282,15 +308,48 @@ export default function MiniDrawer() { ...@@ -282,15 +308,48 @@ export default function MiniDrawer() {
}) })
React.useEffect(() => { React.useEffect(() => {
if(userFullname == "" && userEmail == "") { if (userFullname == "" && userEmail == "") {
getUserData() getUserData()
getMenuHierarki() getMenuHierarki()
} }
}) })
const parseChildren = (val) => {
let data = Object.assign([], val)
data = data.sort((a,b) => a.menu_id - b.menu_id).map((i) => {
return {
img: i.icon === '#' ? "" : i.icon,
label: i.menu_name,
path: i.url,
subItem: parseChildren(i.sub_menu),
collapse: false
}
})
return data
}
const getMenuHierarki = () => { const getMenuHierarki = () => {
api.create().getMenuByRole().then((response) => { api.create().getMenuByRole().then((response) => {
console.log(response.data.data) console.log(response)
if (response.data.status === "success") {
let app = null
let set = null
response.data.data.map((item) => {
if (item.menu_name === "Application") {
app = parseChildren(item.sub_menu)
return app
} else {
set = parseChildren(item.sub_menu)
return set
}
})
setApplication(app)
setSetting(set)
console.log(app);
} else {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}
}) })
} }
...@@ -298,9 +357,8 @@ export default function MiniDrawer() { ...@@ -298,9 +357,8 @@ export default function MiniDrawer() {
let userId = localStorage.getItem(Constant.USER) let userId = localStorage.getItem(Constant.USER)
api.create().getDetailUser(userId).then((response) => { api.create().getDetailUser(userId).then((response) => {
if (response.data.status == 'success') { if (response.data.status == 'success') {
setUserFullname(response.data.data.fullname == null? 'Anonym' : response.data.data.fullname) setUserFullname(response.data.data.fullname == null ? 'Anonym' : response.data.data.fullname)
setUserEmail(response.data.data.email == null? 'Anonym@123.xyz' : response.data.data.email) setUserEmail(response.data.data.email == null ? 'Anonym@123.xyz' : response.data.data.email)
console.log(userEmail)
} }
}) })
} }
...@@ -337,11 +395,18 @@ export default function MiniDrawer() { ...@@ -337,11 +395,18 @@ export default function MiniDrawer() {
const { height, width } = UseWindowDimensions(); const { height, width } = UseWindowDimensions();
function handleCollapse(item){ function handleCollapse(item) {
let arr = data.array let arr = application
let index = arr.findIndex((val) => val.label === item.label)
arr[index].collapse = !arr[index].collapse
setData({ ...application, application: arr })
}
function handleCollapseSetting(item) {
let arr = setting
let index = arr.findIndex((val) => val.label === item.label) let index = arr.findIndex((val) => val.label === item.label)
arr[index].collapse = !arr[index].collapse arr[index].collapse = !arr[index].collapse
setData({...data, array: arr}) setData({ ...setting, setting: arr })
} }
return ( return (
...@@ -367,33 +432,35 @@ export default function MiniDrawer() { ...@@ -367,33 +432,35 @@ export default function MiniDrawer() {
}), }),
}} }}
> >
<div className={classes.toolbarDrawer} style={{ <div className={clsx(classes.drawer, {
backgroundColor: '#1a2d3e', [classes.topleftOpen]: open,
height: open ? 203 : 78, [classes.topleftClose]: !open,
paddingLeft: open ? null : 55, })}
display: open ? null : 'grid', classes={{
// paddingBottom: open ? 55 : null, paper: clsx({
alignSelf: open? null : 'center' [classes.topleftOpen]: open,
[classes.topleftClose]: !open,
}),
}}> }}>
{open === true ? {open === true ?
<div style={{ display: 'flex', justifyContent: 'space-between', flex: 1, padding: 10 }}> <div style={{ display: 'flex', justifyContent: 'space-between', flex: 1, padding: 10 }}>
<img src={Images.triputra} alt="React Logo" style={{ height: 31, width: 151, alignSelf: 'center' }} /> <img src={Images.triputra} alt="React Logo" style={{ height: 31, width: 151, alignSelf: 'center', marginLeft: 5 }} />
<IconButton onClick={handleDrawerClose} style={{outline: 'none'}}> <IconButton onClick={handleDrawerClose} style={{ outline: 'none' }}>
<ChevronLeftIcon style={{ fill: 'white' }} /> <MenuIcon style={{ fill: 'white' }} />
</IconButton> </IconButton>
</div> : </div> :
<IconButton <IconButton
color="inherit" color="inherit"
aria-label="open drawer" aria-label="open drawer"
style={{outline: 'none'}} style={{ outline: 'none' }}
onClick={handleDrawerOpen} onClick={handleDrawerOpen}
edge="start" edge="start"
className={clsx(classes.menuButton, { className={clsx(classes.menuButton, {
[classes.hide]: open, [classes.hide]: open,
})} })}
> >
<MenuIcon style={{ fill: 'white' }} /> <img src={Images.triputraLogo} alt="React Logo" style={{ height: 30, width: 30, alignSelf: 'center', marginTop: 10 }} />
</IconButton>} </IconButton>}
{open && {open &&
<div style={{ width: '100%', marginTop: 15, marginBottom: 60 }}> <div style={{ width: '100%', marginTop: 15, marginBottom: 60 }}>
...@@ -404,7 +471,7 @@ export default function MiniDrawer() { ...@@ -404,7 +471,7 @@ export default function MiniDrawer() {
</div> </div>
<Divider /> <Divider />
{open && {open &&
<div style={{ width: '100%', textAlign: '-webkit-center', marginTop: -45 }}> <div style={{ width: '100%', textAlign: '-webkit-center', marginTop: -45, display: 'flex', justifyContent: 'center' }}>
<div className={"sub-color"} style={{ width: 90, height: 90, 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: '#838383', borderRadius: 50, alignSelf: 'center' }}> <div style={{ width: 72, height: 72, backgroundColor: '#838383', borderRadius: 50, alignSelf: 'center' }}>
</div> </div>
...@@ -418,24 +485,64 @@ export default function MiniDrawer() { ...@@ -418,24 +485,64 @@ export default function MiniDrawer() {
</div> </div>
} }
<List> <List>
{data.array.map((item, index) => ( {application.map((item, index) => (
<div style={{ marginTop: index === 0 ? null : 5 }} > <div style={{ marginTop: index === 0 ? null : 5 }} >
{item.subItem != null ? {item.subItem.length !== 0 ?
<div style={{ justifyContent: 'space-between', flexDirection: 'row', display: 'flex', paddingLeft: 5, paddingRight: 10 }} onClick={() => {handleCollapse(item)}}> <div style={{ justifyContent: 'space-between', flexDirection: 'row', display: 'flex', paddingLeft: 5, paddingRight: 10 }} onClick={() => { handleCollapse(item) }}>
<ListItem 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: '#525355', fontSize: 14 }}>{item.label}</Typography> <Typography style={{ fontFamily: 'nunito', color: '#525355', fontSize: 14 }}>{item.label}</Typography>
</ListItem> </ListItem>
{item.subItem != null ? (item.collapse? <ExpandLess style={{ color: "#525355", marginLeft: 50, alignSelf: 'center' }} /> : <ExpandMore style={{ color: "#525355", marginLeft: 50, alignSelf: 'center' }} />) : null} {item.subItem.length !== 0 ? (item.collapse ? <ExpandLess style={{ color: "#525355", marginLeft: 50, alignSelf: 'center' }} /> : <ExpandMore style={{ color: "#525355", marginLeft: 50, alignSelf: 'center' }} />) : null}
</div> </div>
: :
item.label === 'Settings' ?
open ?
<Link to={`${url}/${item.path}`}> <Link to={`${url}/${item.path}`}>
<ListItem button key={item.label} onClick={() => null}> <div style={{ paddingLeft: 5 }} className={selectedIndex === item.label ? "active" : ""}>
<Typography style={{ color: '#525355', fontSize: 14, fontFamily: 'nunito' }}>{item.label}</Typography> <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> </ListItem>
</Link> : null </div>
</Link>
}
{item.subItem.length !== 0 &&
<div>
<Collapse in={item.collapse} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
{item.subItem.map((sub, indexs) => {
return (
<Link to={sub.label === "Logout" ? `/` : `${url}/${sub.path}`}>
<div style={{ paddingLeft: 5, }} className={selectedSubIndex === sub.label ? "active" : ""} onClick={() => sub.label === "Logout" ? logout() : selectSub(sub.label)}>
<ListItem button style={{ paddingLeft: 61 }}>
<Typography style={{ fontFamily: 'nunito', color: '#525355', fontSize: 14 }}>{sub.label}</Typography>
</ListItem>
</div>
</Link>
)
})}
</List>
</Collapse>
</div>
}
</div>
))}
</List>
{open &&
<div style={{ marginLeft: 20 }}>
<Typography style={{ color: '#525355', fontSize: 14, fontFamily: 'nunito' }}>Setting</Typography>
</div>
}
<List style={{ marginTop: !open ? -10 : null, marginLeft: !open ? -2 : null }}>
{setting.map((item, index) => (
<div style={{ marginTop: index === 0 ? null : 5 }} >
{item.subItem.length !== 0 ?
<div style={{ justifyContent: 'space-between', flexDirection: 'row', display: 'flex', paddingLeft: 5, paddingRight: 10 }} onClick={() => { handleCollapseSetting(item) }}>
<ListItem key={item.label}>
<ListItemIcon style={{ minWidth: open ? 40 : 56 }}><img src={item.img} /></ListItemIcon>
<Typography style={{ fontFamily: 'nunito', color: '#525355', fontSize: 14 }}>{item.label}</Typography>
</ListItem>
{item.subItem.length !== 0 ? (item.collapse ? <ExpandLess style={{ color: "#525355", marginLeft: 50, alignSelf: 'center' }} /> : <ExpandMore style={{ color: "#525355", marginLeft: 50, alignSelf: 'center' }} />) : null}
</div>
: :
<Link to={`${url}/${item.path}`}> <Link to={`${url}/${item.path}`}>
<div style={{ paddingLeft: 5 }} className={selectedIndex === item.label ? "active" : ""}> <div style={{ paddingLeft: 5 }} className={selectedIndex === item.label ? "active" : ""}>
...@@ -446,7 +553,7 @@ export default function MiniDrawer() { ...@@ -446,7 +553,7 @@ export default function MiniDrawer() {
</div> </div>
</Link> </Link>
} }
{item.subItem != null && {item.subItem.length !== 0 &&
<div> <div>
<Collapse in={item.collapse} timeout="auto" unmountOnExit> <Collapse in={item.collapse} timeout="auto" unmountOnExit>
<List component="div" disablePadding> <List component="div" disablePadding>
......
src/container/MasterData/Parameter/Parameter.js
View file @ 714cf0d5
...@@ -124,6 +124,36 @@ export default class Parameter extends Component { ...@@ -124,6 +124,36 @@ export default class Parameter extends Component {
} }
} }
handleInputChange(e) {
this.setState({ search: e })
let body = {
"keyword": e
}
api.create().searchParameter(body).then(response => {
console.log(response.data);
if (response.data.status == 'success') {
let data = response.data.data
let listData = data.map((item, index) => {
return [
index,
item.setting_group,
item.setting_type,
item.company_name,
item.description,
item.order,
item.value,
item.min_value,
item.max_value,
item.status
]
})
this.setState({ dataTable: listData, listData: response.data.data })
} else {
alert(response.data.message)
}
})
}
fileHandler = (event) => { fileHandler = (event) => {
let fileObj = event let fileObj = event
ExcelRenderer(fileObj, (err, resp) => { ExcelRenderer(fileObj, (err, resp) => {
...@@ -612,6 +642,8 @@ export default class Parameter extends Component { ...@@ -612,6 +642,8 @@ export default class Parameter extends Component {
<InputBase <InputBase
style={{ width: '100%' }} style={{ width: '100%' }}
placeholder="Search" placeholder="Search"
value={this.state.search}
onChange={(e) => this.handleInputChange(e.target.value)}
inputProps={{ 'aria-label': 'naked' }} inputProps={{ 'aria-label': 'naked' }}
/> />
</div> </div>
......
src/container/MasterData/Perusahaan/CreatePerusahaan.js
View file @ 714cf0d5
...@@ -3,6 +3,8 @@ import { TextField, Typography } from '@material-ui/core'; ...@@ -3,6 +3,8 @@ import { TextField, Typography } from '@material-ui/core';
import * as R from 'ramda'; import * as R from 'ramda';
import { DateTimePicker, KeyboardDatePicker, DatePicker } from "@material-ui/pickers"; import { DateTimePicker, KeyboardDatePicker, DatePicker } from "@material-ui/pickers";
import format from "date-fns/format"; import format from "date-fns/format";
import Autocomplete from '@material-ui/lab/Autocomplete';
import api from '../../../api';
export default class CreatePerusahaan extends Component { export default class CreatePerusahaan extends Component {
constructor(props) { constructor(props) {
...@@ -14,35 +16,67 @@ export default class CreatePerusahaan extends Component { ...@@ -14,35 +16,67 @@ export default class CreatePerusahaan extends Component {
unitBisnis: '', unitBisnis: '',
totalReport: '', totalReport: '',
startDate: '', startDate: '',
endDate: '' endDate: '',
types: null,
getTypes: null,
perusahaan: null,
getPerusahaan: null,
}
}
componentDidMount() {
this.getParentCompany()
this.getAllUnitBisnis()
} }
getParentCompany() {
api.create().getPerusahaanActive().then((response) => {
if (response.data.status == 'success') {
let data = response.data.data
let typeData = data.map((item) => {
return {
company_id: item.company_id,
company_name: item.company_name
} }
render() { })
let { type } = this.props let typeProps = {
return type === 'edit' ? this.renderEdit() : this.renderCreate() options: typeData.sort((a, b) => a.company_id - b.company_id),
getOptionLabel: (option) => option.company_name,
};
this.setState({ perusahaan: typeProps, perusahaanData: response.data.data })
} else {
alert(response.data.message)
}
})
} }
componentDidMount() { getAllUnitBisnis() {
if (this.props.type === 'edit') { api.create().getUnitBisnisActive().then(response => {
let data = this.props.data console.log(response);
this.setState({ if (response.data.status == 'success') {
id: data.company_id, let data = response.data.data
company: data.company_name, let typeData = data.map((item) => {
parentCompany: data.parentName, return {
unitBisnis: data.businessUnitName, business_unit_id: item.business_unit_id,
totalReport: data.total_report, business_unit_name: item.business_unit_name
startDate: data.start_date, }
endDate: data.end_date
}) })
let typeProps = {
options: typeData,
getOptionLabel: (option) => option.business_unit_name,
};
this.setState({ types: typeProps, typeData: response.data.data })
} else {
alert(response.data.message)
} }
})
} }
handleChange(e, type) { handleChange(e, type) {
let data = this.state let data = this.state
let isDate = type !== '' ? true : false let isDate = type !== '' ? true : false
if (isDate && type == 'start_date') { if (isDate && type == 'start_date') {
this.setState({ startDate: format(e, 'yyyy-MM-dd') }, () => { this.setState({ startDate: format(e, 'yyyy-MM-dd'), endDate: null }, () => {
console.log(this.state.startDate) console.log(this.state.startDate)
}) })
} else if (isDate && type == 'end_date') { } else if (isDate && type == 'end_date') {
...@@ -57,281 +91,23 @@ export default class CreatePerusahaan extends Component { ...@@ -57,281 +91,23 @@ export default class CreatePerusahaan extends Component {
validasi() { validasi() {
if (R.isEmpty(this.state.company)) return alert("Nama perusahaan harus diisi."); if (R.isEmpty(this.state.company)) return alert("Nama perusahaan harus diisi.");
if (R.isEmpty(this.state.unitBisnis)) return alert("Unit Bisnis is Required.");
if (R.isEmpty(this.state.parentCompany)) return alert("Parent Company is Required.");
if (R.isEmpty(this.state.totalReport)) return alert("Total Report is Required."); if (R.isEmpty(this.state.totalReport)) return alert("Total Report is Required.");
if (!R.isEmpty(this.state.startDate) && !R.isEmpty(this.state.endDate) && (this.state.startDate > this.state.endDate)) return alert("Masa Berlaku Tidak Boleh Kurang Dari Tanggal Mulai"); if (!R.isEmpty(this.state.startDate) && !R.isEmpty(this.state.endDate) && (this.state.startDate > this.state.endDate)) return alert("Masa Berlaku Tidak Boleh Kurang Dari Tanggal Mulai");
if (R.isEmpty(this.state.startDate)) return alert("Tanggal Mulai is Required."); if (R.isEmpty(this.state.startDate)) return alert("Tanggal Mulai is Required.");
if (R.isEmpty(this.state.endDate)) return alert("Tanggal Berakhir is Required."); if (R.isEmpty(this.state.endDate)) return alert("Tanggal Berakhir is Required.");
console.log('masuk');
if (this.props.type == 'edit') {
let payload = { let payload = {
"company_id": this.state.id,
"company_name": this.state.company, "company_name": this.state.company,
"business_unit_id": this.state.unitBisnis, "parent": this.state.getPerusahaan.company_id,
"parent": this.state.parentCompany, "business_unit_id": this.state.getTypes.business_unit_id,
"total_report": this.state.totalReport,
"start_date": this.state.startDate,
"end_date": this.state.endDate
}
this.props.updatePerusahaan(payload)
} else if (this.props.type == 'create') {
let payload = {
"company_name": this.state.company,
"parent": this.state.parentCompany,
"business_unit_id": this.state.unitBisnis,
"total_report": this.state.totalReport, "total_report": this.state.totalReport,
"start_date": this.state.startDate, "start_date": this.state.startDate,
"end_date": this.state.endDate "end_date": this.state.endDate
} }
console.log(payload);
this.props.createPerusahaan(payload) this.props.createPerusahaan(payload)
} }
} render() {
renderEdit() {
return (
<div className="test app-popup-show">
<div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
<div className="popup-panel grid grid-2x" style={{ backgroundColor: '#51c6ea', height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
<div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
<div className="popup-title">
<span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Ubah Data</span>
</div>
</div>
<div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
<button
type="button"
className="btn btn-circle btn-white"
onClick={() => this.props.onClickClose()}
>
<i className="fa fa-lg fa-times" style={{ color: 'white' }} />
</button>
</div>
</div>
<div className="border-bottom grid grid-2x grid-mobile-none gap-15px" style={{ padding: 20 }}>
<div className="column-1">
<div style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
value={this.props.data.company_id}
id="id"
label="ID"
disabled
inputProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
/>
</div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
id="unit"
label="Unit Bisnis"
value={this.state.unitBisnis}
inputProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
>
</TextField>
</div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<DatePicker
margin="normal"
id="startDate"
label="Berlaku Mulai"
format="dd MMMM yyyy"
value={this.state.startDate}
onChange={(e) => this.handleChange(e, 'start_date')}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
inputProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
style={{ padding: 0, margin: 0, width: '100%' }}
/>
</div>
<div className="margin-top-10px" style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
value={this.props.data.status}
id="status"
label="Status"
disabled
inputProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
/>
</div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<div style={{ display: 'flex' }}>
<Typography style={{ fontSize: 11, width: '20%' }}>Dibuat</Typography>
<Typography style={{ fontSize: 11 }}>: {this.props.data.created}</Typography>
</div>
<div style={{ display: 'flex' }}>
<Typography style={{ fontSize: 11, width: '20%' }}>Diubah</Typography>
<Typography style={{ fontSize: 11 }}>: {this.props.data.updated == - null ? "" : this.props.data.updated}</Typography>
</div>
</div>
</div>
<div className="column-2">
<div style={{ padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
id="perusahaan"
label="Nama Perusahaan"
value={this.state.company}
inputProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
onChange={(e) => this.setState({ company: e.target.value })}
>
</TextField>
</div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
id="parent"
label="Parent Company"
value={this.state.parentCompany}
inputProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
>
</TextField>
</div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<DatePicker
margin="normal"
id="endDate"
label="Berlaku Hingga"
format="dd MMMM yyyy"
value={this.state.endDate}
onChange={(e) => this.handleChange(e, 'end_date')}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
inputProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
style={{ padding: 0, margin: 0, width: '100%' }}
/>
</div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
id="report"
label="Jumlah Laporan"
value={this.state.totalReport}
inputProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
onChange={(e) => this.setState({ totalReport: e.target.value })}
>
</TextField>
</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' }}>
<button
type="button"
onClick={() => this.props.onClickClose()}
>
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
</div>
</button>
</div>
<div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
<button
type="button"
onClick={() => this.validasi()}
>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div>
</button>
</div>
</div>
</div>
</div>
)
}
renderCreate() {
return ( return (
<div className="test app-popup-show" style={{ paddingTop: 100 }}> <div className="test app-popup-show" style={{ paddingTop: 100 }}>
<div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}> <div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
...@@ -375,25 +151,14 @@ export default class CreatePerusahaan extends Component { ...@@ -375,25 +151,14 @@ export default class CreatePerusahaan extends Component {
/> />
</div> </div>
<div style={{ padding: 10, borderRadius: 5 }}> <div style={{ padding: 10, borderRadius: 5 }}>
<TextField <Autocomplete
style={{ width: '100%' }} {...this.state.types}
id="unit" debug
label="Unit Bisnis" id="tipe"
value={this.state.unitBisnis} onChange={(event, newInputValue) => this.setState({ getTypes: newInputValue })}
inputProps={{ renderInput={(params) => <TextField {...params} InputProps={{ ...params.InputProps, style: { fontSize: 11 } }} InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }} label="Unit Bisnis" />}
style: { value={this.state.getTypes}
fontSize: 11 />
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
onChange={(e) => this.setState({ unitBisnis: e.target.value })}
>
</TextField>
</div> </div>
<div style={{ padding: 10, borderRadius: 5 }}> <div style={{ padding: 10, borderRadius: 5 }}>
<TextField <TextField
...@@ -492,25 +257,14 @@ export default class CreatePerusahaan extends Component { ...@@ -492,25 +257,14 @@ export default class CreatePerusahaan extends Component {
</TextField> </TextField>
</div> </div>
<div style={{ padding: 10, borderRadius: 5 }}> <div style={{ padding: 10, borderRadius: 5 }}>
<TextField <Autocomplete
style={{ width: '100%' }} {...this.state.perusahaan}
id="parentCompany" debug
label="Parent Company" id="tipe"
value={this.state.parentCompany} onChange={(event, newInputValue) => this.setState({ getPerusahaan: newInputValue })}
inputProps={{ renderInput={(params) => <TextField {...params} InputProps={{ ...params.InputProps, style: { fontSize: 11 } }} InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }} label="Parent Company" />}
style: { value={this.state.getPerusahaan}
fontSize: 11 />
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
onChange={(e) => this.setState({ parentCompany: e.target.value })}
>
</TextField>
</div> </div>
<div style={{ padding: 10, borderRadius: 5 }}> <div style={{ padding: 10, borderRadius: 5 }}>
<DatePicker <DatePicker
...@@ -518,6 +272,7 @@ export default class CreatePerusahaan extends Component { ...@@ -518,6 +272,7 @@ export default class CreatePerusahaan extends Component {
id="endDate" id="endDate"
label="Berlaku Hingga" label="Berlaku Hingga"
format="dd MMMM yyyy" format="dd MMMM yyyy"
minDate={this.state.startDate}
value={this.state.endDate == "" ? null : this.state.endDate} value={this.state.endDate == "" ? null : this.state.endDate}
onChange={(e) => this.handleChange(e, 'end_date')} onChange={(e) => this.handleChange(e, 'end_date')}
KeyboardButtonProps={{ KeyboardButtonProps={{
......
src/container/MasterData/Perusahaan/EditPerusahaan.js 0 → 100644
View file @ 714cf0d5
import React, { Component } from 'react'
import { TextField, Typography } from '@material-ui/core'
import { DatePicker } from '@material-ui/pickers'
import * as R from 'ramda'
import api from '../../../api'
import Autocomplete from '@material-ui/lab/Autocomplete'
import { format } from 'date-fns'
export default class EditPerusahaan extends Component {
constructor(props) {
super(props)
this.state = {
id: '',
company: '',
parent: '',
unitBisnis: '',
totalReport: '',
startDate: '',
endDate: '',
types: null,
getTypes: null,
perusahaan: null,
getPerusahaan: null,
errorNP: false,
errorPC: false,
errorSD: false,
errorED: false,
errorJL: false,
msgErrorNP: '',
msgErrorPC: '',
msgErrorSD: '',
msgErrorED: '',
msgErrorJL: '',
}
}
componentDidMount() {
let data = this.props.data
this.getDetailPerusahaan(data.company_id,)
// this.getAllUnitBisnis()
}
getDetailPerusahaan(id) {
api.create().getDetailPerusahaan(id).then(response => {
if (response.data.status === "success") {
console.log(response);
this.setState({
businessID: response.data.data.business_unit_id,
companyID: response.data.data.company_id,
status: response.data.data.status,
company: response.data.data.company_name,
parentID: response.data.data.parent,
parent: response.data.data.parent_name,
startDate: response.data.data.start_date,
endDate: response.data.data.end_date,
totalReport: response.data.data.total_report,
created: response.data.data.created,
updated: response.data.data.updated === null ? "" : response.data.data.updated
}, () => this.getAllUnitBisnis(), this.getCompanyActive())
}
})
}
getAllUnitBisnis() {
api.create().getUnitBisnisActive().then(response => {
console.log(response);
if (response.data.status == 'success') {
let data = response.data.data
let typeData = data.map((item) => {
return {
business_unit_id: item.business_unit_id,
business_unit_name: item.business_unit_name
}
})
let index = typeData.findIndex((val) => val.business_unit_id == this.state.businessID)
let typeProps = {
options: typeData,
getOptionLabel: (option) => option.business_unit_name,
};
this.setState({ types: typeProps, typeData: response.data.data, getTypes: index == -1 ? typeData[0] : typeData[index] })
} else {
alert(response.data.message)
}
})
}
getCompanyActive() {
api.create().getPerusahaanActive().then(response => {
if (response.data.status == 'success') {
let data = response.data.data
let perusahaanData = data.map((item) => {
return {
company_id: item.company_id,
company_name: item.company_name
}
})
let index = perusahaanData.sort((a, b) => a.company_id - b.company_id).findIndex((val) => val.company_id == this.state.parentID)
let typeProps = {
options: perusahaanData,
getOptionLabel: (option) => option.company_name,
};
this.setState({ perusahaan: typeProps, perusahaanData: response.data.data, getPerusahaan: index == -1 ? perusahaanData[0] : perusahaanData[index] })
} else {
alert(response.data.message)
}
})
}
clearError() {
this.setState({
errorNP: false,
errorPC: false,
errorSD: false,
errorED: false,
errorJL: false,
msgErrorNP: '',
msgErrorPC: '',
msgErrorSD: '',
msgErrorED: '',
msgErrorJL: '',
})
}
validasi() {
if (R.isEmpty(this.state.company)) {
this.setState({ errorNP: true, msgErrorNP: 'Nama perusahaan harus diisi' })
} else if (R.isEmpty(this.state.totalReport)) {
this.setState({ errorJL: true, msgErrorJL: 'Total Report harus diisi' })
} else if (R.isNil(this.state.startDate)) {
this.setState({ errorSD: true, msgErrorSD: 'Start Date tidak boleh kosong' })
} else if (R.isNil(this.state.endDate)) {
this.setState({ errorED: true, msgErrorED: 'End Date tidak boleh kosong' })
}
let payload = {
"company_id": this.state.companyID,
"company_name": this.state.company,
"business_unit_id": this.state.getTypes.business_unit_id,
"parent": this.state.getPerusahaan.company_id,
"total_report": this.state.totalReport,
"start_date": this.state.startDate,
"end_date": this.state.endDate
}
// console.log(payload);
this.props.updatePerusahaan(payload)
}
handleChange(e, type) {
let data = this.state
let isDate = type !== '' ? true : false
if (isDate && type == 'start_date') {
this.setState({ startDate: format(e, 'yyyy-MM-dd'), endDate: null }, () => {
console.log(this.state.startDate)
})
} else if (isDate && type == 'end_date') {
this.setState({ endDate: format(e, 'yyyy-MM-dd') }, () => {
console.log(this.state.endDate)
})
} else {
// this.setState({...data, tempData: {...this.state.tempData, [e.target.name] : e.target.value}})
}
}
render() {
return (
<div className="test app-popup-show">
<div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
<div className="popup-panel grid grid-2x" style={{ backgroundColor: '#51c6ea', height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
<div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
<div className="popup-title">
<span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Ubah Data</span>
</div>
</div>
<div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
<button
type="button"
className="btn btn-circle btn-white"
onClick={() => this.props.onClickClose()}
>
<i className="fa fa-lg fa-times" style={{ color: 'white' }} />
</button>
</div>
</div>
<div className="border-bottom grid grid-2x grid-mobile-none gap-15px" style={{ padding: 20 }}>
<div className="column-1">
<div style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
value={this.state.businessID}
id="id"
label="ID"
disabled
inputProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
/>
</div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<Autocomplete
{...this.state.types}
debug
id="tipe"
onChange={(event, newInputValue) => this.setState({ getTypes: newInputValue })}
renderInput={(params) => <TextField {...params} InputProps={{ ...params.InputProps, style: { fontSize: 11 } }} InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }} label="Unit Bisnis" />}
value={this.state.getTypes}
/>
</div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<DatePicker
margin="normal"
id="startDate"
label="Berlaku Mulai"
format="dd MMMM yyyy"
value={this.state.startDate}
onChange={(e) => this.handleChange(e, 'start_date'), () => this.clearError()}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
inputProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
error={this.state.errorSD}
helperText={this.state.msgErrorSD}
style={{ padding: 0, margin: 0, width: '100%' }}
/>
</div>
<div className="margin-top-10px" style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
value={this.state.status}
id="status"
label="Status"
disabled
inputProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
/>
</div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<div style={{ display: 'flex' }}>
<Typography style={{ fontSize: 11, width: '20%' }}>Dibuat</Typography>
<Typography style={{ fontSize: 11 }}>: {this.state.created}</Typography>
</div>
<div style={{ display: 'flex' }}>
<Typography style={{ fontSize: 11, width: '20%' }}>Diubah</Typography>
<Typography style={{ fontSize: 11 }}>: {this.state.updated == - null ? "" : this.props.data.updated}</Typography>
</div>
</div>
</div>
<div className="column-2">
<div style={{ padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
id="perusahaan"
label="Nama Perusahaan"
value={this.state.company}
inputProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
onChange={(e) => this.setState({ company: e.target.value }, () => this.clearError())}
error={this.state.errorNP}
helperText={this.state.msgErrorNP}
>
</TextField>
</div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<Autocomplete
{...this.state.perusahaan}
debug
id="tipe"
onChange={(event, newInputValue) => this.setState({ getPerusahaan: newInputValue })}
renderInput={(params) => <TextField {...params} InputProps={{ ...params.InputProps, style: { fontSize: 11 } }} InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }} label="Parent Company" />}
value={this.state.getPerusahaan}
/>
</div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<DatePicker
margin="normal"
id="endDate"
label="Berlaku Hingga"
format="dd MMMM yyyy"
value={this.state.endDate}
minDate={this.state.startDate}
onChange={(e) => this.handleChange(e, 'end_date'), () => this.clearError()}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
inputProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
style={{ padding: 0, margin: 0, width: '100%' }}
error={this.state.errorED}
helperText={this.state.msgErrorED}
/>
</div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
id="report"
label="Jumlah Laporan"
value={this.state.totalReport}
inputProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
onChange={(e) => this.setState({ totalReport: e.target.value }, () => this.clearError())}
error={this.state.errorJL}
helperText={this.state.msgErrorJL}
>
</TextField>
</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' }}>
<button
type="button"
onClick={() => this.props.onClickClose()}
>
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
</div>
</button>
</div>
<div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
<button
type="button"
onClick={() => this.validasi()}
>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div>
</button>
</div>
</div>
</div>
</div>
)
}
}
src/container/MasterData/Perusahaan/Perusahaan.js
View file @ 714cf0d5
...@@ -9,8 +9,11 @@ import { render } from '@testing-library/react'; ...@@ -9,8 +9,11 @@ import { render } from '@testing-library/react';
import { TextField, InputBase } from "@material-ui/core"; import { TextField, InputBase } from "@material-ui/core";
import { ExcelRenderer } from 'react-excel-renderer'; import { ExcelRenderer } from 'react-excel-renderer';
import CreatePerusahaan from "./CreatePerusahaan"; import CreatePerusahaan from "./CreatePerusahaan";
import EditPerusahaan from "./EditPerusahaan"
import VisualPerusahaan from "./VisualPerusahaan"; import VisualPerusahaan from "./VisualPerusahaan";
import api from "../../../api"; import api from "../../../api";
import ReactTooltip from 'react-tooltip';
import PopUpFailedSave from '../../../library/PopUpFailedSave';
var ct = require("../../../library/CustomTable"); var ct = require("../../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable()); const getMuiTheme = () => createMuiTheme(ct.customTable());
...@@ -31,7 +34,8 @@ export default class Perusahaan extends Component { ...@@ -31,7 +34,8 @@ export default class Perusahaan extends Component {
visiblePerusahaan: true, visiblePerusahaan: true,
cols: null, cols: null,
rows: null, rows: null,
dataLoaded: false dataLoaded: false,
popupError: false
} }
this.fileHandler = this.fileHandler.bind(this); this.fileHandler = this.fileHandler.bind(this);
} }
...@@ -43,20 +47,185 @@ export default class Perusahaan extends Component { ...@@ -43,20 +47,185 @@ export default class Perusahaan extends Component {
console.log(err); console.log(err);
} }
else { else {
let judul = resp.rows[0] let judul = resp.rows[2]
let isi = resp.rows.slice(1) let isi = resp.rows.slice(3)
// let body = isi.map((item) => { let payload = []
// return { isi.map((item, index) => {
// item if (item.length > 0) {
// ] payload.push({
// }) "id": index + 1,
console.log(JSON.stringify(isi)); "company_name": item[0],
"company_parent": item[1],
"unit_bisnis": item[2],
"startDate": item[3],
"endDate": item[4],
})
}
})
let body = {
company: payload
}
this.setState({ payload: body, buttonError: false })
api.create().checkUploadPerusahaan(body).then(response => {
console.log(response);
if (response.data.status === "success") {
let dataRow = response.data.data.map((item, index) => {
return [
index + 1,
item.company_name,
item.company_parent,
item.unit_bisnis,
item.start_date,
item.end_date,
item.error
]
})
let columns = [
"Data Ke-",
{
name: "Nama Perusahaan",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[6] != null) {
check = tableMeta.rowData[6].findIndex((val) => val.field.includes('company_name'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[6] != null && check > -1 ?
<a data-tip={tableMeta.rowData[6][check].message} data-for="company_name">
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
</a> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
<ReactTooltip border={true} id="company_name" place="bottom" type="light" effect="solid" />
</div >
);
}
}
},
{
name: "Parent Company",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[6] != null) {
check = tableMeta.rowData[6].findIndex((val) => val.field.includes('company_parent'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[6] != null && check > -1 ?
<a data-tip={tableMeta.rowData[6][check].message} data-for="company_parent">
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
</a> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
<ReactTooltip border={true} id="company_parent" place="bottom" type="light" effect="solid" />
</div >
);
}
}
},
{
name: "Unit Bisnis",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[6] != null) {
check = tableMeta.rowData[6].findIndex((val) => val.field.includes('unit_bisnis'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[6] != null && check > -1 ?
<a data-tip={tableMeta.rowData[6][check].message} data-for="unit_bisnis">
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
</a> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
<ReactTooltip border={true} id="unit_bisnis" place="bottom" type="light" effect="solid" />
</div >
);
}
}
},
{
name: "Start Date",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[6] != null) {
check = tableMeta.rowData[6].findIndex((val) => val.field.includes('start_date'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[6] != null && check > -1 ?
<a data-tip={tableMeta.rowData[6][check].message} data-for="startdate">
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
</a> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
<ReactTooltip border={true} id="startdate" place="bottom" type="light" effect="solid" />
</div >
);
}
}
},
{
name: "End Date",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[6] != null) {
check = tableMeta.rowData[6].findIndex((val) => val.field.includes('end_date'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[6] != null && check > -1 ?
<a data-tip={tableMeta.rowData[6][check].message} data-for="enddate">
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
</a> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
<ReactTooltip border={true} id="enddate" place="bottom" type="light" effect="solid" />
</div >
);
}
}
},
{
name: "",
options: {
display: false
}
}
]
console.log(dataRow);
this.setState({ this.setState({
dataLoaded: true, dataLoaded: true,
cols: judul, cols: columns,
rows: isi rows: dataRow
}); });
} }
console.log(response);
})
}
}); });
} }
...@@ -70,7 +239,7 @@ export default class Perusahaan extends Component { ...@@ -70,7 +239,7 @@ export default class Perusahaan extends Component {
if (response.data.status == 'success') { if (response.data.status == 'success') {
let data = response.data.data let data = response.data.data
let listData = data.map((item, index) => { let listData = data.map((item, index) => {
return [index, item.company_id, item.company_name, item.parentName, item.businessUnitName, item.total_report, item.status] return [index, item.company_id, item.company_name, item.parent_name, item.business_unit_name, item.total_report, item.status]
}) })
this.setState({ dataTable: listData, listData: response.data.data }) this.setState({ dataTable: listData, listData: response.data.data })
} else { } else {
...@@ -99,11 +268,11 @@ export default class Perusahaan extends Component { ...@@ -99,11 +268,11 @@ export default class Perusahaan extends Component {
"keyword": e "keyword": e
} }
api.create().searchPerusahaan(body).then(response => { api.create().searchPerusahaan(body).then(response => {
// console.log(response.data); console.log(response.data);
if (response.data.status == 'success') { if (response.data.status == 'success') {
let data = response.data.data let data = response.data.data
let listData = data.map((item, index) => { let listData = data.map((item, index) => {
// return [index, item.business_unit_id, item.business_unit_name, item.status] return [index, item.company_id, item.company_name, item.parent_name, item.business_unit_name, item.total_report, item.status]
}) })
this.setState({ dataTable: listData, listData: response.data.data }) this.setState({ dataTable: listData, listData: response.data.data })
} else { } else {
...@@ -164,6 +333,14 @@ export default class Perusahaan extends Component { ...@@ -164,6 +333,14 @@ export default class Perusahaan extends Component {
} }
} }
uploadPerusahaan() {
api.create().uploadPerusahaan(this.state.payload).then(response => {
console.log(response)
this.getData()
this.setState({ visiblePerusahaan: true })
})
}
render() { render() {
const columns = [{ const columns = [{
name: "Action", name: "Action",
...@@ -258,7 +435,7 @@ export default class Perusahaan extends Component { ...@@ -258,7 +435,7 @@ export default class Perusahaan extends Component {
["", "2", "Gawi Bahandep Sawit Mekar", "Triputra Agro Persada Group", "Agrobisnis", "2", "Aktif"], ["", "2", "Gawi Bahandep Sawit Mekar", "Triputra Agro Persada Group", "Agrobisnis", "2", "Aktif"],
["", "3", "Puninar Group", "Triputra Investindo Arya", "Service", "5", "Aktif"], ["", "3", "Puninar Group", "Triputra Investindo Arya", "Service", "5", "Aktif"],
["", "4", "Puninar Infinite Raya", "Puninar Group", "Service", "5", "Non Aktif"], ["", "4", "Puninar Infinite Raya", "Puninar Group", "Service", "5", "Non Aktif"],
["", "-", "-", "-", "-","-"], ["", "-", "-", "-", "-", "-"],
] ]
return ( return (
<div style={{ height: this.props.height }}> <div style={{ height: this.props.height }}>
...@@ -352,7 +529,7 @@ export default class Perusahaan extends Component { ...@@ -352,7 +529,7 @@ export default class Perusahaan extends Component {
this.state.visibleVisual == true ? this.state.visibleVisual == true ?
<VisualPerusahaan <VisualPerusahaan
onClickClose={() => this.setState({ visibleVisual: false, visiblePerusahaan: true })} onClickClose={() => this.setState({ visibleVisual: false, visiblePerusahaan: true })}
height= {this.props.height} height={this.props.height}
/> />
: :
<div> <div>
...@@ -381,9 +558,15 @@ export default class Perusahaan extends Component { ...@@ -381,9 +558,15 @@ export default class Perusahaan extends Component {
<span style={{ color: '#354960', fontSize: 11 }}>Batal</span> <span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
</div> </div>
</button> </button>
<button
type="button"
onClick={() => this.state.buttonError ? this.setState({ popupError: true }) : this.uploadPerusahaan()}
style={{}}
>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span> <span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div> </div>
</button>
</div> </div>
</div> </div>
} }
...@@ -397,7 +580,7 @@ export default class Perusahaan extends Component { ...@@ -397,7 +580,7 @@ export default class Perusahaan extends Component {
)} )}
{this.state.visibleEdit && ( {this.state.visibleEdit && (
<CreatePerusahaan <EditPerusahaan
type={"edit"} type={"edit"}
onClickClose={() => this.setState({ visibleEdit: false })} onClickClose={() => this.setState({ visibleEdit: false })}
data={this.state.listData[this.state.selectIndex]} data={this.state.listData[this.state.selectIndex]}
...@@ -405,6 +588,10 @@ export default class Perusahaan extends Component { ...@@ -405,6 +588,10 @@ export default class Perusahaan extends Component {
/> />
)} )}
{this.state.popupError && (
<PopUpFailedSave onClickClose={() => this.setState({ popupError: false })} />
)}
{this.state.visibleUpload && ( {this.state.visibleUpload && (
<div className="test app-popup-show"> <div className="test app-popup-show">
<div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}> <div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
......
src/container/MasterData/Perusahaan/VisualPerusahaan.js
View file @ 714cf0d5
...@@ -8,19 +8,96 @@ import TreeView from '@material-ui/lab/TreeView'; ...@@ -8,19 +8,96 @@ import TreeView from '@material-ui/lab/TreeView';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import ChevronRightIcon from '@material-ui/icons/ChevronRight'; import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import TreeItem from '@material-ui/lab/TreeItem'; import TreeItem from '@material-ui/lab/TreeItem';
import Nestable from 'react-nestable/dist/Nestable';
import AddIcon from '@material-ui/icons/Add';
import RemoveIcon from '@material-ui/icons/Remove';
import api from '../../../api';
export default class VisualPerusahaan extends Component { export default class VisualPerusahaan extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
items: [
{ id: 0, GG: 'Accumulated Depreciation (negative value)', collapse: false,
children: [
{ id: 3, GG: 'Beginning Balance', collapse: false },
{ id: 4, GG: 'Depreciation expense MTD (please fill in, if any)', collapse: false },
{ id: 5, GG: 'Depreciation expense MTD (please fill in, if any)', collapse: false }
]
},{
id: 1, GG: 'Control Gain/(Loss) on Fixed Assets', collapse: false
},{
id: 2, GG: 'Gain/(Loss) on Fixed Assets', collapse: false,
children: [
{ id: 6, GG: 'NBV', collapse: false,
children : [
{ id: 8, GG: 'Cost', collapse: false },
{ id: 9, GG: 'Accm. Depreciation', collapse: false },
]
},
{ id: 7, GG: 'Proceed from sale or disposal of Fixed Assets (please fill in, if any)', collapse: false },
]
},
],
arrayCollapse: [],
defaultCollapsed: false
} }
} }
componentDidMount() { componentDidMount() {
console.log(this.props.height) this.getPerusahaan()
}
getPerusahaan() {
api.create().getPerusahaanHierarki().then((response) => {
if (response.data.status == 'success') {
this.setState({ items: response.data.data })
console.log(response.data.data)
}
})
}
onDefaultCollapsed = () => this.setState({
defaultCollapsed: !this.state.defaultCollapsed
});
collapse = (collapseCase) => {
let arrayCollapse = this.state.arrayCollapse
let index = arrayCollapse.findIndex((val) => val.id === collapseCase)
if (arrayCollapse.includes(collapseCase)) {
arrayCollapse.splice(index, 1)
} else {
arrayCollapse.push(collapseCase)
}
if (this.refNestable) {
this.refNestable.collapse(arrayCollapse.length > 0? arrayCollapse : 'NONE');
} }
};
handleSave() {
let payload = {
"company": this.state.items
}
api.create().saveVisualisasiPerusahaan(payload).then((response) => {
// if (response.data.status == 'ucces') {
this.props.onClickClose()
// } else {
// alert(response.data.message)
// }
})
}
renderItem = ({ item, collapseIcon }) => {
return (
<div>
<button type="button" onClick={() => this.collapse(item.id)}>
{collapseIcon ? (this.state.arrayCollapse.includes(item.id)? <AddIcon/> : <RemoveIcon/>) : null}
</button>
<label style={{marginLeft: collapseIcon ? 10 : 0}}>{item.company_name}</label>
</div>
)
};
render() { render() {
...@@ -34,7 +111,15 @@ export default class VisualPerusahaan extends Component { ...@@ -34,7 +111,15 @@ export default class VisualPerusahaan extends Component {
</div> </div>
<div style={{ padding: 25, width: '100%' }}> <div style={{ padding: 25, width: '100%' }}>
<div style={{ width: '100%', padding: 25, backgroundColor: 'white', borderRadius: 6, border: 'solid 1px #c4c4c4'}}> <div style={{ width: '100%', padding: 25, backgroundColor: 'white', borderRadius: 6, border: 'solid 1px #c4c4c4'}}>
<TreeView <Nestable
items={this.state.items}
collapsed={this.state.defaultCollapsed}
renderItem={this.renderItem}
ref={el => this.refNestable = el}
onChange={(e) => this.setState({items: e}, () => console.log(JSON.stringify(e)))}
/>
{/* <TreeView
defaultCollapseIcon={<ExpandMoreIcon />} defaultCollapseIcon={<ExpandMoreIcon />}
defaultExpandIcon={<ChevronRightIcon />} defaultExpandIcon={<ChevronRightIcon />}
> >
...@@ -68,7 +153,7 @@ export default class VisualPerusahaan extends Component { ...@@ -68,7 +153,7 @@ export default class VisualPerusahaan extends Component {
</TreeItem> </TreeItem>
</TreeItem> </TreeItem>
</TreeItem> </TreeItem>
</TreeView> </TreeView> */}
</div> </div>
</div> </div>
<div className="row" style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 15, paddingLeft: 15, paddingBottom: 25 }}> <div className="row" style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 15, paddingLeft: 15, paddingBottom: 25 }}>
...@@ -79,7 +164,7 @@ export default class VisualPerusahaan extends Component { ...@@ -79,7 +164,7 @@ export default class VisualPerusahaan extends Component {
<div onClick={() => this.props.onClickClose()} style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor:"pointer" }}> <div onClick={() => this.props.onClickClose()} style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor:"pointer" }}>
<span style={{ color: '#354960', fontSize: 11 }} >Batal</span> <span style={{ color: '#354960', fontSize: 11 }} >Batal</span>
</div> </div>
<div style={{ width: 102, height: 30, marginLeft: 25, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor:"pointer" }}> <div onClick={() => this.handleSave()} style={{ width: 102, height: 30, marginLeft: 25, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor:"pointer" }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span> <span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div> </div>
</div> </div>
......
src/container/MasterData/ReportItems.js
View file @ 714cf0d5
...@@ -452,7 +452,7 @@ export default class ReportItems extends Component { ...@@ -452,7 +452,7 @@ export default class ReportItems extends Component {
console.log(response) console.log(response)
if (response.data.status == 'success') { if (response.data.status == 'success') {
let data = response.data.data let data = response.data.data
let listData = data.map((item, index) => { let listData = data.sort((a,b) => a.item_report_id-b.item_report_id).map((item, index) => {
return [index, item.item_report_id, item.report_name, item.company_name, item.order, item.description, item.parent, item.uom, item.weight, item.type_report_name, item.status ] return [index, item.item_report_id, item.report_name, item.company_name, item.order, item.description, item.parent, item.uom, item.weight, item.type_report_name, item.status ]
}) })
this.setState({ dataTable: listData, listData: response.data.data }) this.setState({ dataTable: listData, listData: response.data.data })
...@@ -708,13 +708,13 @@ export default class ReportItems extends Component { ...@@ -708,13 +708,13 @@ export default class ReportItems extends Component {
] ]
return ( return (
<div>
{this.state.itemReport === true ?
<div style={{ height: this.props.height }}> <div style={{ height: this.props.height }}>
{/* <Row> */}
<div className={"main-color"} style={{ height: 199, width: '100%' }} /> <div className={"main-color"} style={{ height: 199, width: '100%' }} />
{this.state.itemReport === 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 }}>
<label style={{ width: '20%', color: 'white', fontSize: 16, alignSelf: 'center', paddingTop: 8 }}>Master Data - Item Report</label> <label style={{ color: 'white', fontSize: 16, alignSelf: 'center', width: '20%', }}>Master Data - Item Report</label>
<div style={{ color: 'white', width: '50%', height: 37, display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center', borderRadius: 6, paddingLeft: 5, paddingRight: 5, alignSelf: 'center' }}> <div style={{ color: 'white', width: '50%', height: 37, display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center', borderRadius: 6, paddingLeft: 5, paddingRight: 5, alignSelf: 'center' }}>
<img src={Images.searchBlack} style={{ marginRight: 10 }} /> <img src={Images.searchBlack} style={{ marginRight: 10 }} />
<InputBase <InputBase
...@@ -731,7 +731,6 @@ export default class ReportItems extends Component { ...@@ -731,7 +731,6 @@ export default class ReportItems extends Component {
backgroundColor: 'transparent', backgroundColor: 'transparent',
cursor: 'pointer', cursor: 'pointer',
borderColor: 'transparent', borderColor: 'transparent',
padding: 0,
margin: 5 margin: 5
}} }}
onClick={() => this.downloadFile()} onClick={() => this.downloadFile()}
...@@ -794,7 +793,6 @@ export default class ReportItems extends Component { ...@@ -794,7 +793,6 @@ export default class ReportItems extends Component {
</MuiThemeProvider> </MuiThemeProvider>
</div> </div>
</div> </div>
</div>
: :
this.state.visualisasi == true ? this.state.visualisasi == true ?
<VisualReportItems <VisualReportItems
......
src/container/MasterData/formReportItems/CreateReportItems.js
View file @ 714cf0d5
...@@ -24,7 +24,6 @@ export default class CreateReportItems extends Component { ...@@ -24,7 +24,6 @@ export default class CreateReportItems extends Component {
formula: '', formula: '',
realVal: '', realVal: '',
condition: null, condition: null,
inputValue: '',
date: new Date(), date: new Date(),
listInputType: null, listInputType: null,
listCompany: null, listCompany: null,
...@@ -54,7 +53,7 @@ export default class CreateReportItems extends Component { ...@@ -54,7 +53,7 @@ export default class CreateReportItems extends Component {
this.getInputType() this.getInputType()
this.getPerusahaan() this.getPerusahaan()
this.getReportType() this.getReportType()
this.getParent() // this.getParent()
} }
...@@ -137,7 +136,6 @@ export default class CreateReportItems extends Component { ...@@ -137,7 +136,6 @@ export default class CreateReportItems extends Component {
else { else {
this.addReportItems() this.addReportItems()
} }
} }
addReportItems() { addReportItems() {
...@@ -171,7 +169,7 @@ export default class CreateReportItems extends Component { ...@@ -171,7 +169,7 @@ export default class CreateReportItems extends Component {
getInputType() { getInputType() {
api.create().getInputType().then((response) => { api.create().getInputType().then((response) => {
// console.log(response) console.log(response.data)
if(response.data.status === 'success') { if(response.data.status === 'success') {
let data = response.data.data let data = response.data.data
let inputData = data.map((item) => { let inputData = data.map((item) => {
...@@ -236,19 +234,24 @@ export default class CreateReportItems extends Component { ...@@ -236,19 +234,24 @@ export default class CreateReportItems extends Component {
} }
getParent() { getParent() {
api.create().getReportItems().then((response) => { if (this.state.reportType !== null && this.state.company !== null) {
// console.log(response) let payload = {
"report_id": this.state.reportType.report_id,
"company_id": this.state.company.company_id
}
api.create().getReportParent(payload).then((response) => {
console.log(response)
if(response.data.status === 'success') { if(response.data.status === 'success') {
let data = response.data.data let data = response.data.data
let parentData = data.map((item) => { let parentData = data.map((item) => {
return { return {
item_report_id: item.item_report_id, item_report_id: item.item_report_id,
report_name: item.report_name description: item.description
} }
}) })
let defaultProps = { let defaultProps = {
options: parentData, options: parentData,
getOptionLabel: (option) => titleCase(option.report_name), getOptionLabel: (option) => titleCase(option.description),
}; };
this.setState({listParent: defaultProps, parentData: response.data.data}) this.setState({listParent: defaultProps, parentData: response.data.data})
} else { } else {
...@@ -256,6 +259,7 @@ export default class CreateReportItems extends Component { ...@@ -256,6 +259,7 @@ export default class CreateReportItems extends Component {
} }
}) })
} }
}
handleDate(item) { handleDate(item) {
let value = format(item, 'dd MMMM yyyy') let value = format(item, 'dd MMMM yyyy')
...@@ -316,7 +320,7 @@ export default class CreateReportItems extends Component { ...@@ -316,7 +320,7 @@ export default class CreateReportItems extends Component {
<Autocomplete <Autocomplete
{...this.state.listCompany} {...this.state.listCompany}
id="company" id="company"
onChange={(event, newInputValue) => this.setState({company: newInputValue})} onChange={(event, newInputValue) => this.setState({company: newInputValue}, () => this.getParent())}
debug debug
renderInput={(params) => renderInput={(params) =>
<TextField {...params} <TextField {...params}
...@@ -395,8 +399,8 @@ export default class CreateReportItems extends Component { ...@@ -395,8 +399,8 @@ export default class CreateReportItems extends Component {
id="inputType" id="inputType"
onChange={(event, newInputValue) => this.setState({InputType: newInputValue}, onChange={(event, newInputValue) => this.setState({InputType: newInputValue},
() => newInputValue === null ? this.setState({disabledFormula: true, disabledCondt: true, disabledValue: true, formula: '', condition: '', realVal: ''}) () => newInputValue === null ? this.setState({disabledFormula: true, disabledCondt: true, disabledValue: true, formula: '', condition: '', realVal: ''})
: newInputValue.type_report_name === 'FORMULA' ? this.setState({disabledFormula: false, disabledCondt: true, disabledValue: true, formula: '', condition: '', realVal: ''}) : newInputValue.type_report_name === 'Formula' ? this.setState({disabledFormula: false, disabledCondt: true, disabledValue: true, formula: '', condition: '', realVal: ''})
: newInputValue.type_report_name === 'VALIDATION' ? this.setState({disabledFormula: false, disabledCondt: false, disabledValue: false, formula: '', condition: '', realVal: ''}) : newInputValue.type_report_name === 'Validation' ? this.setState({disabledFormula: false, disabledCondt: false, disabledValue: false, formula: '', condition: '', realVal: ''})
: this.setState({disabledFormula: true, disabledCondt: true, disabledValue: true, formula: '', condition: '', realVal: ''}) : this.setState({disabledFormula: true, disabledCondt: true, disabledValue: true, formula: '', condition: '', realVal: ''})
)} )}
debug debug
...@@ -572,6 +576,7 @@ export default class CreateReportItems extends Component { ...@@ -572,6 +576,7 @@ export default class CreateReportItems extends Component {
id="parentId" id="parentId"
onChange={(event, newInputValue) => this.setState({parent: newInputValue})} onChange={(event, newInputValue) => this.setState({parent: newInputValue})}
debug debug
disabled={this.state.reportType == null || this.state.company == null}
renderInput={(params) => renderInput={(params) =>
<TextField {...params} <TextField {...params}
label="Parent ID" label="Parent ID"
......
src/container/MasterData/formReportItems/EditReportItems.js
View file @ 714cf0d5
import React, { Component } from 'react'; import React, { Component } from 'react';
import { TextField, Typography } from '@material-ui/core'; import { TextField, Typography } from '@material-ui/core';
import { DatePicker } from '@material-ui/pickers'; import { DatePicker } from '@material-ui/pickers';
import format from "date-fns/format";
const companies = [ import Autocomplete from '@material-ui/lab/Autocomplete';
{ import api from '../../../api';
value: '', import * as R from 'ramda'
label: '', import { titleCase } from '../../../library/Utils';
},
{
value: '1',
label: 'TIA',
},
{
value: '2',
label: 'TIA',
},
];
const dataTypes = [
{
value: '',
label: '',
},
{
value: '1',
label: 'Formula',
},
{
value: '2',
label: 'Formula',
},
];
const reportTypes = [
{
value: '',
label: '',
},
{
value: '1',
label: 'KPI',
},
{
value: '2',
label: 'KPI',
},
];
const parents = [
{
value: '-',
label: '-',
},
{
value: '1',
label: '1',
},
{
value: '2',
label: '2',
},
];
export default class EditReportItems extends Component { export default class EditReportItems extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
startDate: new Date(),
endDate: new Date(), tempData: null,
InputType: null,
company: null,
parent: null,
reportType: null,
startDate: null,
endDate: null,
order: null,
description: '',
uom: '',
weight: null,
formula: '',
realVal: '',
condition: null,
date: new Date(),
listInputType: null,
listCompany: null,
listReportType: null,
listParent: null,
errorOrder: false,
errorDesc: false,
errorFormula: false,
errorRV: false,
errorStartDate: false,
errorEndDate: false,
msgErrorOrder: '',
msgErrorDesc: '',
msgErrorFormula: '',
msgErrorRV: '',
msgErrorSD: '',
msgErrorED: '',
disabledFormula: true,
disabledCondt: true,
disabledValue: true,
options: ['WARNING', 'STOPPER']
} }
} }
handleStartDate = (date) => { componentDidMount() {
// console.log(this.props.data);
this.getDetailReportItems();
}
handleChange(e, type) {
let data = this.state
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 },
errorOrder: false,
errorDesc: false,
errorFormula: false,
errorRV: false,
errorStartDate: false,
errorEndDate: false,
msgErrorOrder: '',
msgErrorDesc: '',
msgErrorFormula: '',
msgErrorRV: '',
msgErrorSD: '',
msgErrorED: '',
})
} else if (isDate && type === 'end_date') {
this.setState({ this.setState({
startDate: date ...data, tempData: { ...this.state.tempData, end_date: format(e, 'yyyy-MM-dd') },
}); errorOrder: false,
errorDesc: false,
errorFormula: false,
errorRV: false,
errorStartDate: false,
errorEndDate: false,
msgErrorOrder: '',
msgErrorDesc: '',
msgErrorFormula: '',
msgErrorRV: '',
msgErrorSD: '',
msgErrorED: '',
})
} else {
this.setState({
...data, tempData: { ...this.state.tempData, [e.target.name]: e.target.value },
errorOrder: false,
errorDesc: false,
errorFormula: false,
errorRV: false,
errorStartDate: false,
errorEndDate: false,
msgErrorOrder: '',
msgErrorDesc: '',
msgErrorFormula: '',
msgErrorRV: '',
msgErrorSD: '',
msgErrorED: '',
})
}
}
validasi() {
// alert('coba ya')
if (R.isNil(this.state.reportType)) return alert("Jenis Laporan is Required.");
if (R.isNil(this.state.company)) return alert("Perusahaan is Required.");
else if (R.isNil(this.state.order)) {
this.setState({errorOrder: true, msgErrorOrder: 'Order Harus Diisi'})
}
else if (R.isEmpty(this.state.description)) {
this.setState({errorDesc: true, msgErrorDesc: 'Deskripsi Harus Diisi'})
}
else if (R.isNil(this.state.parent)) return alert("Parent ID is Required.")
else if (R.isNil(this.state.InputType)) return alert("Tipe Data is Required.");
else if (this.state.disabledFormula === false && R.isEmpty(this.state.formula)) {
this.setState({errorFormula: true, msgErrorFormula: 'Formula Harus Diisi'})
}
else if (this.state.disabledValue === false && R.isEmpty(this.state.realVal)) {
this.setState({errorRV: true, msgErrorRV: 'Nilai Seharusnya Harus Diisi'})
}
else if (this.state.disabledCondt === false && R.isEmpty(this.state.condition)) return alert("Kondisi Jika Salah is Required.")
else if (R.isNil(this.state.startDate)) {
this.setState({errorStartDate: true, msgErrorSD: 'Start Date tidak boleh kosong'})
}
else if (R.isNil(this.state.endDate)) {
this.setState({errorEndDate: true, msgErrorED: 'End Date tidak boleh kosong'})
}
else {
this.updateReportItems()
}
}
updateReportItems() {
// alert('test')
let payload = {
"item_report_id": this.state.tempData.item_report_id,
"report_id": this.state.reportType == null? this.state.tempData.report_id : this.state.reportType.report_id,
"company_id": this.state.company == null? this.state.tempData.company_id : this.state.company.company_id,
"description": this.state.tempData.description,
"orders": this.state.tempData.order,
"parent": this.state.parent == null? this.state.tempData.parent : this.state.parent.item_report_id,
"type_report_id": this.state.InputType == null? this.state.tempData.type_report_id : this.state.InputType.type_report_id,
"formula": this.state.tempData.formula,
"uom": this.state.tempData.uom,
"weight": this.state.tempData.weight,
"condition_if_wrong": this.state.tempData.condition_if_wrong,
"condition_it_should_be": this.state.tempData.condition_it_should_be,
"start_date": this.state.tempData.start_date,
"end_date": this.state.tempData.end_date
}
console.log(payload)
api.create().updateReportItems(payload).then((response) => {
if (response.data.status === 'success') {
this.props.onClickClose()
this.props.refresh()
} else {
alert(response.data.message)
}
})
}
getDetailReportItems() {
api.create().getDetailReportItems(this.props.data.item_report_id).then((response) => {
this.getInputType()
this.getPerusahaan()
this.getReportType()
this.getParent()
if (response.data.status === 'success') {
this.setState({ tempData: response.data.data})
console.log(response.data.data)
} else {
alert(response.data.message)
}
})
}
getInputType() {
api.create().getInputType().then((response) => {
// console.log(response)
if(response.data.status === 'success') {
let data = response.data.data
let inputData = data.map((item) => {
return {
type_report_id: item.type_report_id,
type_report_name: item.type_report_name
}
})
let defaultProps = {
options: inputData,
getOptionLabel: (option) => titleCase(option.type_report_name),
}; };
handleEndDate = (date) => { let index = inputData.findIndex((val) => val.type_report_id === this.state.tempData.type_report_id)
this.setState({ this.setState({listInputType: defaultProps, InputType: index === -1 ? null : inputData[index]})
endDate: date } else {
}); alert(response.data.message)
}
})
}
getPerusahaan() {
api.create().getPerusahaanActive().then((response) => {
console.log(response)
if(response.data.status === 'success') {
let data = response.data.data
let companyData = data.map((item) => {
return {
company_id: item.company_id,
company_name: item.company_name
}
})
let defaultProps = {
options: companyData,
getOptionLabel: (option) => titleCase(option.company_name),
}; };
componentDidMount() { let index = companyData.findIndex((val) => val.company_id === this.state.tempData.company_id)
console.log(this.props.data); this.setState({listCompany: defaultProps, company: index === -1 ? null : companyData[index]})
} else {
alert(response.data.message)
}
})
}
getReportType() {
api.create().getReportType().then((response) => {
console.log(response)
if(response.data.status === 'success') {
let data = response.data.data
let reportTypeData = data.map((item) => {
return {
report_id: item.report_id,
report_name: item.report_name,
}
})
let defaultProps = {
options: reportTypeData,
getOptionLabel: (option) => titleCase(option.report_name),
};
let index = reportTypeData.findIndex((val) => val.report_id === this.state.tempData.report_id)
this.setState({listReportType: defaultProps, reportType: index === -1 ? null: reportTypeData[index]})
} else {
alert(response.data.message)
}
})
}
getParent() {
if (this.state.reportType !== null && this.state.company !== null) {
let payload = {
"report_id": this.state.reportType.report_id,
"company_id": this.state.company.company_id
}
api.create().getReportParent(payload).then((response) => {
console.log(response)
if(response.data.status === 'success') {
let data = response.data.data
let parentData = data.map((item) => {
return {
item_report_id: item.item_report_id,
description: item.description
}
})
let defaultProps = {
options: parentData,
getOptionLabel: (option) => titleCase(option.description),
};
let index = parentData.findIndex((val) => val.item_report_id === this.state.tempData.parent)
this.setState({listParent: defaultProps, parent: index == -1? null : parentData[index]})
} else {
alert(response.data.message)
}
})
}
} }
render() { render() {
...@@ -117,16 +316,17 @@ export default class EditReportItems extends Component { ...@@ -117,16 +316,17 @@ export default class EditReportItems extends Component {
<div style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}> <div style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
value={1} value={this.state.tempData === null ? '' : this.state.tempData.item_report_id}
id="ID" id="ID"
label="ID" label="ID"
disabled disabled
variant="filled"
onChange={(e) => null}
inputProps={{ inputProps={{
style: { style: {
fontSize: 11, fontSize: 11,
fontWeight: 600, fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif', fontFamily: 'Nunito Sans, sans-serif'
paddingLeft: 10
} }
}} }}
InputLabelProps={{ InputLabelProps={{
...@@ -134,60 +334,46 @@ export default class EditReportItems extends Component { ...@@ -134,60 +334,46 @@ export default class EditReportItems extends Component {
fontSize: 11, fontSize: 11,
fontWeight: 600, fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif', fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085', color: '#7e8085'
paddingLeft: 10
} }
}} }}
/> />
</div> </div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}> <div className="margin-top-10px" style={{padding: 10}} >
<TextField <Autocomplete
{...this.state.listCompany}
id="company" id="company"
style={{ width: '100%' }} onChange={(event, newInputValue) => this.setState({company: newInputValue}, () => this.getParent())}
select debug
renderInput={(params) =>
<TextField {...params}
label="Perusahaan" label="Perusahaan"
// onChange={handleChange}
helperText=""
SelectProps={{
native: true,
}}
InputLabelProps={{ InputLabelProps={{
style: { style: {
fontSize: 11, fontSize: 11,
fontWeight: 600, fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif', fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085', color: '#7e8085'
paddingLeft: 10
}
}}
inputProps={{
style: {
fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
paddingLeft: 10
} }
}} }}
> InputProps={{ ...params.InputProps, style: { fontSize: 11, fontWeight: 600, fontFamily: 'Nunito Sans, sans-serif' } }}
{companies.map((option) => ( />}
<option key={option.value} value={option.value}> value={this.state.company}
{option.label} />
</option>
))}
</TextField>
</div> </div>
<div style={{ padding: 10, borderRadius: 5 }}> <div style={{ padding: 10, borderRadius: 5 }}>
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
id="description" id="description"
label="Deskripsi" label="Deskripsi"
// value={this.props.data.business_unit_name} name="description"
onChange={(e) => this.handleChange(e, '')}
value={this.state.tempData === null ? '' : this.state.tempData.description}
inputProps={{ inputProps={{
style: { style: {
fontSize: 11, fontSize: 11,
fontWeight: 600, fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif', fontFamily: 'Nunito Sans, sans-serif'
paddingLeft: 10
} }
}} }}
InputLabelProps={{ InputLabelProps={{
...@@ -195,8 +381,7 @@ export default class EditReportItems extends Component { ...@@ -195,8 +381,7 @@ export default class EditReportItems extends Component {
fontSize: 11, fontSize: 11,
fontWeight: 600, fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif', fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085', color: '#7e8085'
paddingLeft: 10
} }
}} }}
> >
...@@ -207,13 +392,14 @@ export default class EditReportItems extends Component { ...@@ -207,13 +392,14 @@ export default class EditReportItems extends Component {
style={{ width: '100%' }} style={{ width: '100%' }}
id="uom" id="uom"
label="UOM" label="UOM"
// value={this.props.data.business_unit_name} name="uom"
onChange={(e) => this.handleChange(e, '')}
value={this.state.tempData === null ? '' : this.state.tempData.uom}
inputProps={{ inputProps={{
style: { style: {
fontSize: 11, fontSize: 11,
fontWeight: 600, fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif', fontFamily: 'Nunito Sans, sans-serif'
paddingLeft: 10
} }
}} }}
InputLabelProps={{ InputLabelProps={{
...@@ -221,64 +407,49 @@ export default class EditReportItems extends Component { ...@@ -221,64 +407,49 @@ export default class EditReportItems extends Component {
fontSize: 11, fontSize: 11,
fontWeight: 600, fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif', fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085', color: '#7e8085'
paddingLeft: 10
} }
}} }}
> >
</TextField> </TextField>
</div> </div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}> <div className="margin-top-10px" style={{padding: 10}}>
<TextField <Autocomplete
id="dataType" {...this.state.listInputType}
style={{ width: '100%' }} id="inputType"
select onChange={(event, newInputValue) => this.setState({InputType: newInputValue}, () => console.log(this.state.InputType))}
debug
renderInput={(params) =>
<TextField {...params}
label="Tipe Data" label="Tipe Data"
// onChange={handleChange}
helperText=""
SelectProps={{
native: true,
}}
InputLabelProps={{ InputLabelProps={{
style: { style: {
fontSize: 11, fontSize: 11,
fontWeight: 600, fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif', fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085', color: '#7e8085'
paddingLeft: 10
}
}}
inputProps={{
style: {
fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
paddingLeft: 10
} }
}} }}
> InputProps={{ ...params.InputProps, style: { fontSize: 11, fontWeight: 600, fontFamily: 'Nunito Sans, sans-serif' } }}
{dataTypes.map((option) => ( />}
<option key={option.value} value={option.value}> value={this.state.InputType}
{option.label} />
</option>
))}
</TextField>
</div> </div>
<div className="margin-top-10px" style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}> <div className="margin-top-10px" style={{ padding: 10 }}>
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
// value={this.props.data.status} id="condition_it_should_be"
id="realValue"
label="Nilai Seharusnya" label="Nilai Seharusnya"
value="-" disabled={this.state.InputType == null? true : (this.state.InputType.type_report_name === 'Validation'? false : true)}
disabled name="condition_it_should_be"
onChange={(e) => this.handleChange(e, '')}
value={this.state.tempData === null ? '' : this.state.tempData.condition_it_should_be}
inputProps={{ inputProps={{
style: { style: {
fontSize: 11, fontSize: 11,
fontWeight: 600, fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif', fontFamily: 'Nunito Sans, sans-serif'
paddingLeft: 10
} }
}} }}
InputLabelProps={{ InputLabelProps={{
...@@ -286,8 +457,7 @@ export default class EditReportItems extends Component { ...@@ -286,8 +457,7 @@ export default class EditReportItems extends Component {
fontSize: 11, fontSize: 11,
fontWeight: 600, fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif', fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085', color: '#7e8085'
paddingLeft: 10
} }
}} }}
/> />
...@@ -296,38 +466,22 @@ export default class EditReportItems extends Component { ...@@ -296,38 +466,22 @@ export default class EditReportItems extends Component {
<DatePicker <DatePicker
margin="normal" margin="normal"
id="startDate" id="startDate"
value={startDate}
onChange={this.handleStartDate}
label="Berlaku Mulai" label="Berlaku Mulai"
format="dd MMMM yyyy" 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={{ KeyboardButtonProps={{
'aria-label': 'change date', 'aria-label': 'change date',
}} }}
inputProps={{
style: {
fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
paddingLeft: 10
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085',
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
paddingLeft: 10
}
}}
style={{ padding: 0, margin: 0, width: '100%' }} style={{ padding: 0, margin: 0, width: '100%' }}
/> />
</div> </div>
<div className="margin-top-10px" style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}> <div className="margin-top-10px" style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
value="Aktif" value={this.state.tempData === null ? '' : this.state.tempData.status}
id="status" id="status"
label="Status" label="Status"
disabled disabled
...@@ -335,8 +489,7 @@ export default class EditReportItems extends Component { ...@@ -335,8 +489,7 @@ export default class EditReportItems extends Component {
style: { style: {
fontSize: 11, fontSize: 11,
fontWeight: 600, fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif', fontFamily: 'Nunito Sans, sans-serif'
paddingLeft: 10
} }
}} }}
InputLabelProps={{ InputLabelProps={{
...@@ -344,8 +497,7 @@ export default class EditReportItems extends Component { ...@@ -344,8 +497,7 @@ export default class EditReportItems extends Component {
fontSize: 11, fontSize: 11,
fontWeight: 600, fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif', fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085', color: '#7e8085'
paddingLeft: 10
} }
}} }}
/> />
...@@ -364,48 +516,36 @@ export default class EditReportItems extends Component { ...@@ -364,48 +516,36 @@ export default class EditReportItems extends Component {
</div> </div>
<div className="column-2"> <div className="column-2">
<div style={{ padding: 10, borderRadius: 5 }}> <div className="margin-top-10px" style={{padding: 10}}>
<TextField <Autocomplete
{...this.state.listReportType}
id="reportType" id="reportType"
style={{ width: '100%' }} onChange={(event, newInputValue) => this.setState({reportType: newInputValue}, () => this.getParent())}
select debug
renderInput={(params) =>
<TextField {...params}
label="Jenis Laporan" label="Jenis Laporan"
// onChange={handleChange}
helperText=""
SelectProps={{
native: true,
}}
InputLabelProps={{ InputLabelProps={{
style: { style: {
fontSize: 11, fontSize: 11,
fontWeight: 600, fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif', fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085', color: '#7e8085'
paddingLeft: 10
}
}}
inputProps={{
style: {
fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
paddingLeft: 10
} }
}} }}
> InputProps={{ ...params.InputProps, style: { fontSize: 11, fontWeight: 600, fontFamily: 'Nunito Sans, sans-serif' } }}
{reportTypes.map((option) => ( />}
<option key={option.value} value={option.value}> value={this.state.reportType}
{option.label} />
</option>
))}
</TextField>
</div> </div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
id="order" id="order"
label="Order" label="Order"
value="1" name="order"
onChange={(e) => this.handleChange(e, '')}
value={this.state.tempData === null ? '' : this.state.tempData.order}
inputProps={{ inputProps={{
style: { style: {
fontSize: 11, fontSize: 11,
...@@ -426,54 +566,42 @@ export default class EditReportItems extends Component { ...@@ -426,54 +566,42 @@ export default class EditReportItems extends Component {
> >
</TextField> </TextField>
</div> </div>
<div style={{ padding: 10, borderRadius: 5 }}> <div style={{padding: 10}} >
<TextField <Autocomplete
id="parent" {...this.state.listParent}
style={{ width: '100%' }} id="parentId"
select onChange={(event, newInputValue) => this.setState({parent: newInputValue})}
label="Parent" disabled={this.state.reportType == null || this.state.company == null}
// onChange={handleChange} debug
helperText="" renderInput={(params) =>
SelectProps={{ <TextField {...params}
native: true, label="Parent ID"
}}
InputLabelProps={{ InputLabelProps={{
style: { style: {
fontSize: 11, fontSize: 11,
fontWeight: 600, fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif', fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085', color: '#7e8085'
paddingLeft: 10
}
}}
inputProps={{
style: {
fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
paddingLeft: 10
} }
}} }}
> InputProps={{ ...params.InputProps, style: { fontSize: 11, fontWeight: 600, fontFamily: 'Nunito Sans, sans-serif' } }}
{parents.map((option) => ( />}
<option key={option.value} value={option.value}> value={this.state.parent}
{option.label} />
</option>
))}
</TextField>
</div> </div>
<div style={{ padding: 10, borderRadius: 5 }}> <div style={{ padding: 10, borderRadius: 5 }}>
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
id="weight" id="weight"
label="Weight" label="Weight"
value="1" name="weight"
onChange={(e) => this.handleChange(e, '')}
value={this.state.tempData === null ? '' : this.state.tempData.weight}
inputProps={{ inputProps={{
style: { style: {
fontSize: 11, fontSize: 11,
fontWeight: 600, fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif', fontFamily: 'Nunito Sans, sans-serif'
paddingLeft: 10
} }
}} }}
InputLabelProps={{ InputLabelProps={{
...@@ -481,8 +609,7 @@ export default class EditReportItems extends Component { ...@@ -481,8 +609,7 @@ export default class EditReportItems extends Component {
fontSize: 11, fontSize: 11,
fontWeight: 600, fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif', fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085', color: '#7e8085'
paddingLeft: 10
} }
}} }}
> >
...@@ -493,13 +620,15 @@ export default class EditReportItems extends Component { ...@@ -493,13 +620,15 @@ export default class EditReportItems extends Component {
style={{ width: '100%' }} style={{ width: '100%' }}
id="formula" id="formula"
label="Formula" label="Formula"
value="1" disabled={this.state.InputType == null? true : (this.state.InputType.type_report_name === 'Formula' || this.state.InputType.type_report_name === 'Validation'? false : true)}
name="formula"
onChange={(e) => this.handleChange(e, '')}
value={this.state.tempData === null ? '' : this.state.tempData.formula}
inputProps={{ inputProps={{
style: { style: {
fontSize: 11, fontSize: 11,
fontWeight: 600, fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif', fontFamily: 'Nunito Sans, sans-serif'
paddingLeft: 10
} }
}} }}
InputLabelProps={{ InputLabelProps={{
...@@ -507,67 +636,50 @@ export default class EditReportItems extends Component { ...@@ -507,67 +636,50 @@ export default class EditReportItems extends Component {
fontSize: 11, fontSize: 11,
fontWeight: 600, fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif', fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085', color: '#7e8085'
paddingLeft: 10
} }
}} }}
> >
</TextField> </TextField>
</div> </div>
<div className="margin-top-10px" style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}> <div className="margin-top-10px" style={{padding: 10}}>
<TextField <Autocomplete
style={{ width: '100%' }} value={this.state.tempData === null ? '' : this.state.tempData.condition}
value="-"
id="isWrongCondition" id="isWrongCondition"
label="Kondisi Jika Salah" disabled={this.state.InputType == null? true : (this.state.InputType.type_report_name === 'Validation'? false : true)}
disabled onChange={(event, newValue) => {
inputProps={{ this.setState({condition: newValue});
style: {
fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
paddingLeft: 10
}
}} }}
options={this.state.options}
renderInput={(params) =>
<TextField {...params}
label="Kondisi Jika Salah"
InputLabelProps={{ InputLabelProps={{
style: { style: {
fontSize: 11, fontSize: 11,
fontWeight: 600, fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif', fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085', color: '#7e8085'
paddingLeft: 10
} }
}} }}
InputProps={{ ...params.InputProps, style: { fontSize: 11, fontWeight: 600, fontFamily: 'Nunito Sans, sans-serif' } }}
/>}
/> />
</div> </div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<DatePicker <DatePicker
margin="normal" margin="normal"
id="endDate" id="endDate"
value={endDate}
onChange={this.handleEndDate}
label="Berlaku Hingga" label="Berlaku Hingga"
format="dd MMMM yyyy" 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={{ KeyboardButtonProps={{
'aria-label': 'change date', 'aria-label': 'change date',
}} }}
inputProps={{
style: {
fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
paddingLeft: 10
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085',
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
paddingLeft: 10
}
}}
style={{ padding: 0, margin: 0, width: '100%' }} style={{ padding: 0, margin: 0, width: '100%' }}
/> />
...@@ -588,9 +700,11 @@ export default class EditReportItems extends Component { ...@@ -588,9 +700,11 @@ export default class EditReportItems extends Component {
</button> </button>
</div> </div>
<div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}> <div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
<button onClick={() => this.updateReportItems()}>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span> <span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div> </div>
</button>
</div> </div>
</div> </div>
</div> </div>
......
src/container/MasterData/formReportItems/VisualReportItems.js
View file @ 714cf0d5
...@@ -6,6 +6,8 @@ import AddIcon from '@material-ui/icons/Add'; ...@@ -6,6 +6,8 @@ import AddIcon from '@material-ui/icons/Add';
import RemoveIcon from '@material-ui/icons/Remove'; import RemoveIcon from '@material-ui/icons/Remove';
import Nestable from 'react-nestable'; import Nestable from 'react-nestable';
import api from '../../../api'; import api from '../../../api';
import { titleCase } from '../../../library/Utils';
import Autocomplete from '@material-ui/lab/Autocomplete';
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
root: { root: {
...@@ -16,7 +18,7 @@ const useStyles = makeStyles((theme) => ({ ...@@ -16,7 +18,7 @@ const useStyles = makeStyles((theme) => ({
nested: { nested: {
paddingLeft: theme.spacing(4), paddingLeft: theme.spacing(4),
}, },
})); }));
const type = [ const type = [
...@@ -43,7 +45,7 @@ const companies = [ ...@@ -43,7 +45,7 @@ const companies = [
value: '2', value: '2',
label: 'TIA', label: 'TIA',
}, },
]; ];
export default class VisualReportItems extends Component { export default class VisualReportItems extends Component {
constructor(props) { constructor(props) {
...@@ -51,19 +53,21 @@ export default class VisualReportItems extends Component { ...@@ -51,19 +53,21 @@ export default class VisualReportItems extends Component {
this.state = { this.state = {
open: false, open: false,
items: [ items: [
{ id: 0, GG: 'Accumulated Depreciation (negative value)', collapse: false, {
id: 0, GG: 'Accumulated Depreciation (negative value)', collapse: false,
children: [ children: [
{ id: 3, GG: 'Beginning Balance', collapse: false }, { id: 3, GG: 'Beginning Balance', collapse: false },
{ id: 4, GG: 'Depreciation expense MTD (please fill in, if any)', collapse: false }, { id: 4, GG: 'Depreciation expense MTD (please fill in, if any)', collapse: false },
{ id: 5, GG: 'Depreciation expense MTD (please fill in, if any)', collapse: false } { id: 5, GG: 'Depreciation expense MTD (please fill in, if any)', collapse: false }
] ]
},{ }, {
id: 1, GG: 'Control Gain/(Loss) on Fixed Assets', collapse: false id: 1, GG: 'Control Gain/(Loss) on Fixed Assets', collapse: false
},{ }, {
id: 2, GG: 'Gain/(Loss) on Fixed Assets', collapse: false, id: 2, GG: 'Gain/(Loss) on Fixed Assets', collapse: false,
children: [ children: [
{ id: 6, GG: 'NBV', collapse: false, {
children : [ id: 6, GG: 'NBV', collapse: false,
children: [
{ id: 8, GG: 'Cost', collapse: false }, { id: 8, GG: 'Cost', collapse: false },
{ id: 9, GG: 'Accm. Depreciation', collapse: false }, { id: 9, GG: 'Accm. Depreciation', collapse: false },
] ]
...@@ -73,19 +77,74 @@ export default class VisualReportItems extends Component { ...@@ -73,19 +77,74 @@ export default class VisualReportItems extends Component {
}, },
], ],
arrayCollapse: [], arrayCollapse: [],
defaultCollapsed: false defaultCollapsed: false,
listReport: null,
report: null,
listCompany: null,
company: null
} }
} }
componentDidMount() { componentDidMount() {
console.log(this.props.height) console.log(this.props.height)
this.getReportType()
}
getReportType() {
api.create().getReportType().then((response) => {
this.getCompanyActive()
if (response.data.status === 'success') {
let data = response.data.data
let reportData = data.map((item) => {
return {
report_id: item.report_id,
report_name: item.report_name,
}
})
let defaultProps = {
options: reportData,
getOptionLabel: (option) => titleCase(option.report_name),
};
this.setState({ listReport: defaultProps, report: reportData[0] })
} else {
alert(response.data.message)
}
})
}
getCompanyActive() {
api.create().getPerusahaanActive().then((response) => {
if (response.data.status === 'success') {
let data = response.data.data
let companyData = data.map((item) => {
return {
company_id: item.company_id,
company_name: item.company_name,
}
})
let defaultProps = {
options: companyData,
getOptionLabel: (option) => titleCase(option.company_name),
};
this.setState({ listCompany: defaultProps, company: companyData[0] }, () => {
this.getItemHierarki() this.getItemHierarki()
})
} else {
alert(response.data.message)
}
})
} }
getItemHierarki() { getItemHierarki() {
api.create().getItemReportHierarki().then((response) => { let payload = {
"report_id": this.state.report.report_id,
"company_id": this.state.company.company_id
}
api.create().getItemReportHierarki(payload).then((response) => {
console.log(response.data)
if (response.data.status == 'success') { if (response.data.status == 'success') {
this.setState({items : response.data.data}) this.setState({ items: response.data.data })
} }
}) })
} }
...@@ -93,7 +152,7 @@ export default class VisualReportItems extends Component { ...@@ -93,7 +152,7 @@ export default class VisualReportItems extends Component {
handleCollapse(item) { handleCollapse(item) {
let index = this.state.items.findIndex((val) => val.id === item.id) let index = this.state.items.findIndex((val) => val.id === item.id)
let items = this.state.items let items = this.state.items
if ( index == -1 ){ if (index == -1) {
if (item.children.length > 0) { if (item.children.length > 0) {
this.handleCollapse(item) this.handleCollapse(item)
} }
...@@ -116,103 +175,65 @@ export default class VisualReportItems extends Component { ...@@ -116,103 +175,65 @@ export default class VisualReportItems extends Component {
arrayCollapse.push(collapseCase) arrayCollapse.push(collapseCase)
} }
if (this.refNestable) { if (this.refNestable) {
this.refNestable.collapse(arrayCollapse.length > 0? arrayCollapse : 'NONE'); this.refNestable.collapse(arrayCollapse.length > 0 ? arrayCollapse : 'NONE');
} }
}; };
handleSave() {
let payload = {
"item_report": this.state.items
}
api.create().saveVisualisasiReport(payload).then((response) => {
// if (response.data.status == 'ucces') {
this.props.onClickClose()
// } else {
// alert(response.data.message)
// }
})
}
renderItem = ({ item, collapseIcon }) => { renderItem = ({ item, collapseIcon }) => {
return ( return (
<div> <div>
{collapseIcon ? (this.state.arrayCollapse.includes(item.id)? <AddIcon/> : <RemoveIcon/>) : null} <button type="button" onClick={() => this.collapse(item.id)}>{collapseIcon ? (this.state.arrayCollapse.includes(item.id) ? <AddIcon /> : <RemoveIcon />) : null}</button>
<button type="button" onClick={() => this.collapse(item.id)}>{item.report_name}</button> <label style={{ marginLeft: collapseIcon ? 10 : 0 }}>{item.report_name}</label>
</div> </div>
) )
}; };
render() { render() {
return ( return (
<div> <div>
<div style={{ height: this.props.height }}> <div style={{ height: this.props.height }}>
<div style={{ height: 199, width: '100%' }} className={"main-color"} /> <div style={{ 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>
</div> </div>
<div style={{ padding: 25, width: '100%' }}> <div style={{ padding: 25, width: '100%' }}>
<div style={{ width: '100%', padding: 25, backgroundColor: 'white', borderRadius: 6, border: 'solid 1px #c4c4c4'}}> <div style={{ width: '100%', padding: 25, backgroundColor: 'white', borderRadius: 6, border: 'solid 1px #c4c4c4' }}>
<label style={{ color: '#4b4b4b', fontSize: '16px', fontWeight: 'bold' }}>Hirarki Item Laporan</label> <label style={{ color: '#4b4b4b', fontSize: '16px', fontWeight: 'bold' }}>Hirarki Item Laporan</label>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField <Autocomplete
id="reportItems" {...this.state.listReport}
style={{ width: 250 }} id="report"
select onChange={(event, newInputValue) => this.setState({ report: newInputValue }, () => this.getItemHierarki())}
label="Item Laporan" debug
helperText=""
SelectProps={{ renderInput={(params) => <TextField {...params} label="Jenis Laporan" margin="normal" style={{ marginTop: 7 }} />}
native: true, value={this.state.report}
}} />
InputLabelProps={{
style: {
fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085',
paddingLeft: 10
}
}}
inputProps={{
style: {
fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
paddingLeft: 10
}
}}
>
{type.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</TextField>
</div> </div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField <Autocomplete
{...this.state.listCompany}
id="company" id="company"
style={{ width: 250 }} onChange={(event, newInputValue) => this.setState({ company: newInputValue }, () => this.getItemHierarki())}
select debug
label="Perusahaan"
helperText="" renderInput={(params) => <TextField {...params} label="Compan" margin="normal" style={{ marginTop: 7 }} />}
SelectProps={{ value={this.state.company}
native: true, />
}}
InputLabelProps={{
style: {
fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085',
paddingLeft: 10
}
}}
inputProps={{
style: {
fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
paddingLeft: 10
}
}}
>
{companies.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</TextField>
</div> </div>
<div className="margin-top-30px"> <div className="margin-top-30px">
<Nestable <Nestable
...@@ -220,22 +241,24 @@ export default class VisualReportItems extends Component { ...@@ -220,22 +241,24 @@ export default class VisualReportItems extends Component {
collapsed={this.state.defaultCollapsed} collapsed={this.state.defaultCollapsed}
renderItem={this.renderItem} renderItem={this.renderItem}
ref={el => this.refNestable = el} ref={el => this.refNestable = el}
onChange={(e) => this.setState({items: e})} onChange={(e) => this.setState({ items: e }, () => console.log(JSON.stringify(e)))}
/> />
</div> </div>
</div> </div>
</div> </div>
<div className="row" style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 15, paddingLeft: 15, paddingBottom: 25 }}> <div className="row" style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 15, paddingLeft: 15, paddingBottom: 25 }}>
<div onClick={() => this.props.onClickClose()} style={{ width: 102, height: 30, marginLeft: 25, backgroundColor: 'dodgerblue', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor:"pointer" }}> <div onClick={() => this.props.onClickClose()} style={{ width: 102, height: 30, marginLeft: 25, backgroundColor: 'dodgerblue', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor: "pointer" }}>
<span style={{ color: '#fff', fontSize: 11 }}>Kembali</span> <span style={{ color: '#fff', fontSize: 11 }}>Kembali</span>
</div> </div>
<div className="row" style={{ float: 'right', marginRight: 25 }}> <div className="row" style={{ float: 'right', marginRight: 25 }}>
<div onClick={() => this.props.onClickClose()} style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor:"pointer" }}> <div onClick={() => this.props.onClickClose()} style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor: "pointer" }}>
<span style={{ color: '#354960', fontSize: 11 }} >Batal</span> <span style={{ color: '#354960', fontSize: 11 }} >Batal</span>
</div> </div>
<div style={{ width: 102, height: 30, marginLeft: 25, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor:"pointer" }}> <button onClick={() => this.handleSave()}>
<div style={{ width: 102, height: 30, marginLeft: 25, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor: "pointer" }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span> <span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div> </div>
</button>
</div> </div>
</div> </div>
</div> </div>
......
src/container/MasterData/formUnitBisnis/CreateUnitBisnis.js
View file @ 714cf0d5
...@@ -11,8 +11,13 @@ export default class CreateUnitBisnis extends Component { ...@@ -11,8 +11,13 @@ export default class CreateUnitBisnis extends Component {
id: '', id: '',
name: '', name: '',
startDate: '', startDate: '',
endDate: '' endDate: '',
errorName: false,
errorStartDate: false,
errorEndDate: false,
msgErrorName: "",
msgErrorStartDate: "",
msgErrorEndDate: ""
} }
} }
render() { render() {
...@@ -36,11 +41,13 @@ export default class CreateUnitBisnis extends Component { ...@@ -36,11 +41,13 @@ export default class CreateUnitBisnis extends Component {
let data = this.state let data = this.state
let isDate = type !== '' ? true : false let isDate = type !== '' ? true : false
if (isDate && type == 'start_date') { if (isDate && type == 'start_date') {
this.setState({ startDate: format(e, 'yyyy-MM-dd') }, () => { this.setState({ startDate: format(e, 'yyyy-MM-dd'), endDate: null }, () => {
this.clearError()
console.log(this.state.startDate) console.log(this.state.startDate)
}) })
} else if (isDate && type == 'end_date') { } else if (isDate && type == 'end_date') {
this.setState({ endDate: format(e, 'yyyy-MM-dd') }, () => { this.setState({ endDate: format(e, 'yyyy-MM-dd') }, () => {
this.clearError()
console.log(this.state.endDate) console.log(this.state.endDate)
}) })
} else { } else {
...@@ -49,13 +56,25 @@ export default class CreateUnitBisnis extends Component { ...@@ -49,13 +56,25 @@ export default class CreateUnitBisnis extends Component {
} }
clearError() {
this.setState({
errorName: false,
errorStartDate: false,
errorEndDate: false,
msgErrorName: "",
msgErrorStartDate: "",
msgErrorEndDate: ""
})
}
validasi() { validasi() {
if (R.isEmpty(this.state.name)) return alert("Unit Bisnis Name is Required."); if (R.isEmpty(this.state.name)) {
if (!R.isEmpty(this.state.startDate) && !R.isEmpty(this.state.endDate) && (this.state.startDate > this.state.endDate)) return alert("Masa Berlaku Tidak Boleh Kurang Dari Tanggal Mulai"); this.setState({ errorName: true, msgErrorName: 'Unit Bisnis tidak boleh kosong' })
if (R.isEmpty(this.state.startDate)) return alert("Tanggal Mulai is Required."); } else if (R.isEmpty(this.state.startDate)) {
if (R.isEmpty(this.state.endDate)) return alert("Tanggal Berakhir is Required."); this.setState({ errorStartDate: true, msgErrorStartDate: 'Tanggal Mulai tidak boleh kosong' })
console.log('masuk'); } else if (R.isEmpty(this.state.endDate) || this.state.endDate === null) {
if (this.props.type == 'edit') { this.setState({ errorEndDate: true, msgErrorEndDate: 'Tanggal Berakhir tidak boleh kosong' })
} else {
let payload = { let payload = {
"business_unit_id": this.state.id, "business_unit_id": this.state.id,
"business_unit_name": this.state.name, "business_unit_name": this.state.name,
...@@ -63,7 +82,17 @@ export default class CreateUnitBisnis extends Component { ...@@ -63,7 +82,17 @@ export default class CreateUnitBisnis extends Component {
"end_date": this.state.endDate "end_date": this.state.endDate
} }
this.props.updateUnitBisnis(payload) this.props.updateUnitBisnis(payload)
} else if (this.props.type == 'create') { }
}
validasiCreate() {
if (R.isEmpty(this.state.name)) {
this.setState({ errorName: true, msgErrorName: 'Unit Bisnis tidak boleh kosong' })
} else if (R.isEmpty(this.state.startDate)) {
this.setState({ errorStartDate: true, msgErrorStartDate: 'Tanggal Mulai tidak boleh kosong' })
} else if (R.isEmpty(this.state.endDate)) {
this.setState({ errorEndDate: true, msgErrorEndDate: 'Tanggal Berakhir tidak boleh kosong' })
} else {
let payload = { let payload = {
"business_unit_name": this.state.name, "business_unit_name": this.state.name,
"start_date": this.state.startDate, "start_date": this.state.startDate,
...@@ -71,7 +100,6 @@ export default class CreateUnitBisnis extends Component { ...@@ -71,7 +100,6 @@ export default class CreateUnitBisnis extends Component {
} }
this.props.createUnitBisnis(payload) this.props.createUnitBisnis(payload)
} }
} }
renderEdit() { renderEdit() {
...@@ -140,7 +168,8 @@ export default class CreateUnitBisnis extends Component { ...@@ -140,7 +168,8 @@ export default class CreateUnitBisnis extends Component {
color: '#7e8085' color: '#7e8085'
} }
}} }}
error={this.state.errorStartDate}
helperText={this.state.msgErrorStartDate}
style={{ padding: 0, margin: 0, width: '100%' }} style={{ padding: 0, margin: 0, width: '100%' }}
/> />
</div> </div>
...@@ -196,7 +225,9 @@ export default class CreateUnitBisnis extends Component { ...@@ -196,7 +225,9 @@ export default class CreateUnitBisnis extends Component {
color: '#7e8085' color: '#7e8085'
} }
}} }}
onChange={(e) => this.setState({ name: e.target.value })} error={this.state.errorName}
helperText={this.state.msgErrorName}
onChange={(e) => this.setState({ name: e.target.value }, () => this.clearError())}
> >
</TextField> </TextField>
</div> </div>
...@@ -206,6 +237,9 @@ export default class CreateUnitBisnis extends Component { ...@@ -206,6 +237,9 @@ export default class CreateUnitBisnis extends Component {
id="startDate" id="startDate"
label="Berakhir Hingga" label="Berakhir Hingga"
format="dd MMMM yyyy" format="dd MMMM yyyy"
error={this.state.errorEndDate}
helperText={this.state.msgErrorEndDate}
minDate={this.state.startDate}
value={this.state.endDate} value={this.state.endDate}
onChange={(e) => this.handleChange(e, 'end_date')} onChange={(e) => this.handleChange(e, 'end_date')}
KeyboardButtonProps={{ KeyboardButtonProps={{
...@@ -222,7 +256,6 @@ export default class CreateUnitBisnis extends Component { ...@@ -222,7 +256,6 @@ export default class CreateUnitBisnis extends Component {
color: '#7e8085' color: '#7e8085'
} }
}} }}
style={{ padding: 0, margin: 0, width: '100%' }} style={{ padding: 0, margin: 0, width: '100%' }}
/> />
</div> </div>
...@@ -323,7 +356,8 @@ export default class CreateUnitBisnis extends Component { ...@@ -323,7 +356,8 @@ export default class CreateUnitBisnis extends Component {
color: '#7e8085' color: '#7e8085'
} }
}} }}
error={this.state.errorStartDate}
helperText={this.state.msgErrorStartDate}
style={{ padding: 0, margin: 0, width: '100%' }} style={{ padding: 0, margin: 0, width: '100%' }}
/> />
</div> </div>
...@@ -373,7 +407,9 @@ export default class CreateUnitBisnis extends Component { ...@@ -373,7 +407,9 @@ export default class CreateUnitBisnis extends Component {
color: '#7e8085' color: '#7e8085'
} }
}} }}
onChange={(e) => this.setState({ name: e.target.value })} error={this.state.errorName}
helperText={this.state.msgErrorName}
onChange={(e) => this.setState({ name: e.target.value }, () => this.clearError())}
> >
</TextField> </TextField>
</div> </div>
...@@ -383,6 +419,9 @@ export default class CreateUnitBisnis extends Component { ...@@ -383,6 +419,9 @@ export default class CreateUnitBisnis extends Component {
id="endDate" id="endDate"
label="Berakhir Hingga" label="Berakhir Hingga"
format="dd MMMM yyyy" format="dd MMMM yyyy"
error={this.state.errorEndDate}
helperText={this.state.msgErrorEndDate}
minDate={this.state.startDate}
value={this.state.endDate == "" ? null : this.state.endDate} value={this.state.endDate == "" ? null : this.state.endDate}
onChange={(e) => this.handleChange(e, 'end_date')} onChange={(e) => this.handleChange(e, 'end_date')}
KeyboardButtonProps={{ KeyboardButtonProps={{
...@@ -421,7 +460,7 @@ export default class CreateUnitBisnis extends Component { ...@@ -421,7 +460,7 @@ export default class CreateUnitBisnis extends Component {
<div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}> <div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
<button <button
type="button" type="button"
onClick={() => this.validasi()} onClick={() => this.validasiCreate()}
> >
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span> <span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
......
src/container/Otorisasi/User/AddUser.js
View file @ 714cf0d5
...@@ -152,15 +152,15 @@ export default class AddUser extends Component { ...@@ -152,15 +152,15 @@ export default class AddUser extends Component {
} }
handleItemChecked(item) { handleItemChecked(item) {
let indexID = this.state.company.findIndex((val) => val === item.company_id) let indexID = this.state.company.findIndex((val) => val === item.id)
return indexID === -1 ? false : true return indexID === -1 ? false : true
} }
handleItemClick(item) { handleItemClick(item) {
let indexID = this.state.company.findIndex((val) => val === item.company_id) let indexID = this.state.company.findIndex((val) => val === item.id)
let company = this.state.company let company = this.state.company
if (indexID === -1) { if (indexID === -1) {
company.push(item.company_id) company.push(item.id)
} else { } else {
company.splice(indexID, 1) company.splice(indexID, 1)
} }
...@@ -176,14 +176,21 @@ export default class AddUser extends Component { ...@@ -176,14 +176,21 @@ export default class AddUser extends Component {
} }
return ( return (
<ul> <ul>
{item.child.map((data, index) => { {item.children.map((data, index) => {
return ( return (
<li> // <li>
<Collapse key={index} timeout="auto" unmountOnExit in={item.collapse}> <Collapse key={index} timeout="auto" unmountOnExit in={item.collapse}>
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', paddingLeft: R.isNil(data.child) ? (padding + 20) : padding }}> <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', paddingLeft: R.isNil(data.children) ? (padding + 20) : padding }}>
{!R.isNil(data.child) && <span onClick={() => this.handleCollapse(data)} style={{ marginLeft: 7, marginRight: 2 }}> {R.isNil(data.children)?
null
:
data.children.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'} />} {data.collapse? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />}
</span>} </span>
}
<span> <span>
<CustomCheckbox <CustomCheckbox
checked={this.handleItemChecked(data)} checked={this.handleItemChecked(data)}
...@@ -192,9 +199,9 @@ export default class AddUser extends Component { ...@@ -192,9 +199,9 @@ export default class AddUser extends Component {
</span> </span>
<Typography style={{ fontSize: 12 }}>{titleCase(data.company_name)}</Typography> <Typography style={{ fontSize: 12 }}>{titleCase(data.company_name)}</Typography>
</div> </div>
{!R.isNil(data.child) && this.renderChildren(data, padding + 20)} {!R.isNil(data.children) && this.renderChildren(data, padding + 20)}
</Collapse> </Collapse>
</li> // </li>
) )
})} })}
</ul> </ul>
...@@ -202,7 +209,7 @@ export default class AddUser extends Component { ...@@ -202,7 +209,7 @@ export default class AddUser extends Component {
} }
handleCollapse(item) { handleCollapse(item) {
let path = this.searchIt({child: this.state.listCompany}, item.company_id) let path = this.searchIt({children: this.state.listCompany}, item.id)
let listCompany = this.state.listCompany let listCompany = this.state.listCompany
let arrayPath = [] let arrayPath = []
...@@ -217,17 +224,17 @@ export default class AddUser extends Component { ...@@ -217,17 +224,17 @@ export default class AddUser extends Component {
if (arrayPath.length == 1) { if (arrayPath.length == 1) {
pathSelect= listCompany[arrayPath[0]] pathSelect= listCompany[arrayPath[0]]
} else if (arrayPath.length == 2) { } else if (arrayPath.length == 2) {
pathSelect= listCompany[arrayPath[0]].child[arrayPath[1]] pathSelect= listCompany[arrayPath[0]].children[arrayPath[1]]
} else if (arrayPath.length == 3) { } else if (arrayPath.length == 3) {
pathSelect= listCompany[arrayPath[0]].child[arrayPath[1]].child[arrayPath[2]] pathSelect= listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]]
} else if (arrayPath.length == 4) { } else if (arrayPath.length == 4) {
pathSelect= listCompany[arrayPath[0]].child[arrayPath[1]].child[arrayPath[2]].child[arrayPath[3]] pathSelect= listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]].children[arrayPath[3]]
} else if (arrayPath.length == 5) { } else if (arrayPath.length == 5) {
pathSelect= listCompany[arrayPath[0]].child[arrayPath[1]].child[arrayPath[2]].child[arrayPath[3]].child[arrayPath[4]] pathSelect= listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]].children[arrayPath[3]].children[arrayPath[4]]
} else if (arrayPath.length == 6) { } else if (arrayPath.length == 6) {
pathSelect= listCompany[arrayPath[0]].child[arrayPath[1]].child[arrayPath[2]].child[arrayPath[3]].child[arrayPath[4]].child[arrayPath[5]] pathSelect= listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]].children[arrayPath[3]].children[arrayPath[4]].children[arrayPath[5]]
} else if (arrayPath.length == 7) { } 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= listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]].children[arrayPath[3]].children[arrayPath[4]].children[arrayPath[5]].children[arrayPath[6]]
} }
pathSelect.collapse = !pathSelect.collapse pathSelect.collapse = !pathSelect.collapse
...@@ -236,14 +243,14 @@ export default class AddUser extends Component { ...@@ -236,14 +243,14 @@ export default class AddUser extends Component {
} }
searchIt = (node, search, path = '', position = 0) => { searchIt = (node, search, path = '', position = 0) => {
if (node.company_id && node.company_id === search) {return path !== '' ? `${path}-${position}` : position;} if (node.id && node.id === search) {return path !== '' ? `${path}-${position}` : position;}
if (!node.child) {return false} if (!node.children) {return false}
const index = node.child.findIndex((x) => x.company_id && x.company_id === search); const index = node.children.findIndex((x) => x.id && x.id === search);
if (index >= 0) { if (index >= 0) {
return path !== '' ? `${path}-${index}` : index; return path !== '' ? `${path}-${index}` : index;
} }
for (let i = 0; i < node.child.length; i++) { for (let i = 0; i < node.children.length; i++) {
const result = this.searchIt(node.child[i], search, path !== '' ? `${path}-${i}` : i , i); const result = this.searchIt(node.children[i], search, path !== '' ? `${path}-${i}` : i , i);
if (result){ if (result){
return result; return result;
} }
...@@ -436,10 +443,10 @@ export default class AddUser extends Component { ...@@ -436,10 +443,10 @@ export default class AddUser extends Component {
{this.state.listCompany.map((item,index) => { {this.state.listCompany.map((item,index) => {
return( return(
<div> <div>
<ul> {/* <ul>
<li> <li> */}
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}> <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
{item.child.length > 0 && <span onClick={() => this.handleCollapse(item)} style={{ marginLeft: 7, marginRight: 2 }}> {item.children.length > 0 && <span onClick={() => this.handleCollapse(item)} style={{ marginLeft: 7, marginRight: 2 }}>
{item.collapse ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />} {item.collapse ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />}
</span>} </span>}
<span> <span>
...@@ -450,9 +457,9 @@ export default class AddUser extends Component { ...@@ -450,9 +457,9 @@ export default class AddUser extends Component {
</span> </span>
<Typography style={{ fontSize: 12 }}>{titleCase(item.company_name)}</Typography> <Typography style={{ fontSize: 12 }}>{titleCase(item.company_name)}</Typography>
</div> </div>
{!R.isNil(item.child) && this.renderChildren(item)} {!R.isNil(item.children) && this.renderChildren(item)}
</li> {/* </li>
</ul> </ul> */}
</div> </div>
) )
})} })}
......
src/container/Otorisasi/User/EditUser.js
View file @ 714cf0d5
...@@ -188,15 +188,15 @@ export default class EditUser extends Component { ...@@ -188,15 +188,15 @@ export default class EditUser extends Component {
} }
handleItemChecked(item) { handleItemChecked(item) {
let indexID = this.state.company.findIndex((val) => val === item.company_id) let indexID = this.state.company.findIndex((val) => val === item.id)
return indexID === -1 ? false : true return indexID === -1 ? false : true
} }
handleItemClick(item) { handleItemClick(item) {
let indexID = this.state.company.findIndex((val) => val === item.company_id) let indexID = this.state.company.findIndex((val) => val === item.id)
let company = this.state.company let company = this.state.company
if (indexID === -1) { if (indexID === -1) {
company.push(item.company_id) company.push(item.id)
} else { } else {
company.splice(indexID, 1) company.splice(indexID, 1)
} }
...@@ -212,14 +212,21 @@ export default class EditUser extends Component { ...@@ -212,14 +212,21 @@ export default class EditUser extends Component {
} }
return ( return (
<ul> <ul>
{item.child.map((data, index) => { {item.children.map((data, index) => {
return ( return (
<li> // <li>
<Collapse key={index} timeout="auto" unmountOnExit in={item.collapse}> <Collapse key={index} timeout="auto" unmountOnExit in={item.collapse}>
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', paddingLeft: R.isNil(data.child) ? (padding + 20) : padding }}> <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', paddingLeft: R.isNil(data.children) ? (padding + 20) : padding }}>
{!R.isNil(data.child) && <span onClick={() => this.handleCollapse(data)} style={{ marginLeft: 7, marginRight: 2 }}> {R.isNil(data.children)?
null
:
data.children.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'} />} {data.collapse? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />}
</span>} </span>
}
<span> <span>
<CustomCheckbox <CustomCheckbox
checked={this.handleItemChecked(data)} checked={this.handleItemChecked(data)}
...@@ -228,9 +235,9 @@ export default class EditUser extends Component { ...@@ -228,9 +235,9 @@ export default class EditUser extends Component {
</span> </span>
<Typography style={{ fontSize: 12 }}>{titleCase(data.company_name)}</Typography> <Typography style={{ fontSize: 12 }}>{titleCase(data.company_name)}</Typography>
</div> </div>
{!R.isNil(data.child) && this.renderChildren(data, padding + 20)} {!R.isNil(data.children) && this.renderChildren(data, padding + 20)}
</Collapse> </Collapse>
</li> // </li>
) )
})} })}
</ul> </ul>
...@@ -238,7 +245,7 @@ export default class EditUser extends Component { ...@@ -238,7 +245,7 @@ export default class EditUser extends Component {
} }
handleCollapse(item) { handleCollapse(item) {
let path = this.searchIt({child: this.state.listCompany}, item.company_id) let path = this.searchIt({children: this.state.listCompany}, item.id)
let listCompany = this.state.listCompany let listCompany = this.state.listCompany
let arrayPath = [] let arrayPath = []
...@@ -253,17 +260,17 @@ export default class EditUser extends Component { ...@@ -253,17 +260,17 @@ export default class EditUser extends Component {
if (arrayPath.length == 1) { if (arrayPath.length == 1) {
pathSelect= listCompany[arrayPath[0]] pathSelect= listCompany[arrayPath[0]]
} else if (arrayPath.length == 2) { } else if (arrayPath.length == 2) {
pathSelect= listCompany[arrayPath[0]].child[arrayPath[1]] pathSelect= listCompany[arrayPath[0]].children[arrayPath[1]]
} else if (arrayPath.length == 3) { } else if (arrayPath.length == 3) {
pathSelect= listCompany[arrayPath[0]].child[arrayPath[1]].child[arrayPath[2]] pathSelect= listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]]
} else if (arrayPath.length == 4) { } else if (arrayPath.length == 4) {
pathSelect= listCompany[arrayPath[0]].child[arrayPath[1]].child[arrayPath[2]].child[arrayPath[3]] pathSelect= listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]].children[arrayPath[3]]
} else if (arrayPath.length == 5) { } else if (arrayPath.length == 5) {
pathSelect= listCompany[arrayPath[0]].child[arrayPath[1]].child[arrayPath[2]].child[arrayPath[3]].child[arrayPath[4]] pathSelect= listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]].children[arrayPath[3]].children[arrayPath[4]]
} else if (arrayPath.length == 6) { } else if (arrayPath.length == 6) {
pathSelect= listCompany[arrayPath[0]].child[arrayPath[1]].child[arrayPath[2]].child[arrayPath[3]].child[arrayPath[4]].child[arrayPath[5]] pathSelect= listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]].children[arrayPath[3]].children[arrayPath[4]].children[arrayPath[5]]
} else if (arrayPath.length == 7) { } 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= listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]].children[arrayPath[3]].children[arrayPath[4]].children[arrayPath[5]].children[arrayPath[6]]
} }
pathSelect.collapse = !pathSelect.collapse pathSelect.collapse = !pathSelect.collapse
...@@ -272,14 +279,14 @@ export default class EditUser extends Component { ...@@ -272,14 +279,14 @@ export default class EditUser extends Component {
} }
searchIt = (node, search, path = '', position = 0) => { searchIt = (node, search, path = '', position = 0) => {
if (node.company_id && node.company_id === search) {return path !== '' ? `${path}-${position}` : position;} if (node.id && node.id === search) {return path !== '' ? `${path}-${position}` : position;}
if (!node.child) {return false} if (!node.children) {return false}
const index = node.child.findIndex((x) => x.company_id && x.company_id === search); const index = node.children.findIndex((x) => x.id && x.id === search);
if (index >= 0) { if (index >= 0) {
return path !== '' ? `${path}-${index}` : index; return path !== '' ? `${path}-${index}` : index;
} }
for (let i = 0; i < node.child.length; i++) { for (let i = 0; i < node.children.length; i++) {
const result = this.searchIt(node.child[i], search, path !== '' ? `${path}-${i}` : i , i); const result = this.searchIt(node.children[i], search, path !== '' ? `${path}-${i}` : i , i);
if (result){ if (result){
return result; return result;
} }
...@@ -473,10 +480,10 @@ export default class EditUser extends Component { ...@@ -473,10 +480,10 @@ export default class EditUser extends Component {
{this.state.listCompany.map((item, index) => { {this.state.listCompany.map((item, index) => {
return ( return (
<div> <div>
<ul> {/* <ul>
<li> <li> */}
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}> <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
{item.child.length > 0 && <span onClick={() => this.handleCollapse(item)} style={{ marginLeft: 7, marginRight: 2 }}> {item.children.length > 0 && <span onClick={() => this.handleCollapse(item)} style={{ marginLeft: 7, marginRight: 2 }}>
{item.collapse ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />} {item.collapse ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />}
</span>} </span>}
<span> <span>
...@@ -487,9 +494,9 @@ export default class EditUser extends Component { ...@@ -487,9 +494,9 @@ export default class EditUser extends Component {
</span> </span>
<Typography style={{ fontSize: 12 }}>{titleCase(item.company_name)}</Typography> <Typography style={{ fontSize: 12 }}>{titleCase(item.company_name)}</Typography>
</div> </div>
{!R.isNil(item.child) && this.renderChildren(item)} {!R.isNil(item.children) && this.renderChildren(item)}
</li> {/* </li>
</ul> </ul> */}
</div> </div>
) )
})} })}
......
src/container/Profile.js
View file @ 714cf0d5
...@@ -7,6 +7,7 @@ import Constant from '../library/Constant'; ...@@ -7,6 +7,7 @@ import Constant from '../library/Constant';
import RemoveIcon from '@material-ui/icons/Remove'; import RemoveIcon from '@material-ui/icons/Remove';
import AddIcon from '@material-ui/icons/Add'; import AddIcon from '@material-ui/icons/Add';
import { titleCase } from '../library/Utils'; import { titleCase } from '../library/Utils';
import * as R from 'ramda'
const CustomCheckbox = withStyles({ const CustomCheckbox = withStyles({
root: { root: {
...@@ -141,10 +142,101 @@ export default class Profile extends Component { ...@@ -141,10 +142,101 @@ export default class Profile extends Component {
} }
handleItemChecked(item) { handleItemChecked(item) {
let indexID = this.state.company.findIndex((val) => val == item.company_id) let indexID = this.state.company.findIndex((val) => val == item.id)
return indexID == -1 ? false : true return indexID == -1 ? false : true
} }
renderChildren = (item, pad) => {
let padding = null
if (pad !== undefined) {
padding = pad
} else {
padding = 20
}
return (
<ul>
{item.children.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.children) ? (padding + 20) : padding }}>
{R.isNil(data.children)?
null
:
data.children.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.children) && this.renderChildren(data, padding + 20)}
</Collapse>
// </li>
)
})}
</ul>
)
}
handleCollapse(item) {
let path = this.searchIt({children: this.state.listCompany}, item.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]].children[arrayPath[1]]
} else if (arrayPath.length == 3) {
pathSelect= listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]]
} else if (arrayPath.length == 4) {
pathSelect= listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]].children[arrayPath[3]]
} else if (arrayPath.length == 5) {
pathSelect= listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]].children[arrayPath[3]].children[arrayPath[4]]
} else if (arrayPath.length == 6) {
pathSelect= listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]].children[arrayPath[3]].children[arrayPath[4]].children[arrayPath[5]]
} else if (arrayPath.length == 7) {
pathSelect= listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]].children[arrayPath[3]].children[arrayPath[4]].children[arrayPath[5]].children[arrayPath[6]]
}
pathSelect.collapse = !pathSelect.collapse
// console.log(pathSelect.collapse)
this.setState({listCompany}, () => console.log(pathSelect))
}
searchIt = (node, search, path = '', position = 0) => {
if (node.id && node.id === search) {return path !== '' ? `${path}-${position}` : position;}
if (!node.children) {return false}
const index = node.children.findIndex((x) => x.id && x.id === search);
if (index >= 0) {
return path !== '' ? `${path}-${index}` : index;
}
for (let i = 0; i < node.children.length; i++) {
const result = this.searchIt(node.children[i], search, path !== '' ? `${path}-${i}` : i , i);
if (result){
return result;
}
}
return false;
};
render() { render() {
return ( return (
<div style={{ height: this.props.height, backgroundColor: '#f8f8f8', marginBottom: 100, minHeight: 1000 }}> <div style={{ height: this.props.height, backgroundColor: '#f8f8f8', marginBottom: 100, minHeight: 1000 }}>
...@@ -249,38 +341,23 @@ export default class Profile extends Component { ...@@ -249,38 +341,23 @@ export default class Profile extends Component {
{this.state.listCompany.map((item, index) => { {this.state.listCompany.map((item, index) => {
return ( return (
<div> <div>
{/* <ul>
<li> */}
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}> <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
{item.children.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> <span>
<CustomCheckbox <CustomCheckbox
disabled={true}
disabled={true}
checked={this.handleItemChecked(item)} checked={this.handleItemChecked(item)}
// onChange={() => this.handleItemClick(item)} onChange={() => null}
/> />
</span> </span>
<Typography style={{ fontSize: 12 }}>{titleCase(item.company_name)}</Typography> <Typography style={{ fontSize: 12 }}>{titleCase(item.company_name)}</Typography>
</div> </div>
{item.childCompany.length > 0 && item.childCompany.map((items, indexs) => { {!R.isNil(item.children) && this.renderChildren(item)}
return ( {/* </li>
<Collapse in={index == this.state.selectedIndex} timeout="auto" unmountOnExit> </ul> */}
<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>
)
})}
</div> </div>
) )
})} })}
......
src/router/homeRoutes.js
View file @ 714cf0d5
...@@ -17,7 +17,7 @@ const routes = [ ...@@ -17,7 +17,7 @@ const routes = [
main: HomePage main: HomePage
}, },
{ {
path: "/home/userrole", path: "/home/user-role",
main: UserRole main: UserRole
}, },
{ {
...@@ -29,7 +29,7 @@ const routes = [ ...@@ -29,7 +29,7 @@ const routes = [
main: ReportItems main: ReportItems
}, },
{ {
path: "/home/budget-tahunan", path: "/home/master-budget",
main: BalanceSheet main: BalanceSheet
}, },
{ {
...@@ -37,7 +37,7 @@ const routes = [ ...@@ -37,7 +37,7 @@ const routes = [
main: Profile main: Profile
}, },
{ {
path: "/home/perusahaan", path: "/home/company",
main: Perusahaan main: Perusahaan
}, },
{ {
...@@ -45,15 +45,15 @@ const routes = [ ...@@ -45,15 +45,15 @@ const routes = [
main: User main: User
}, },
{ {
path: "/home/unit-bisnis", path: "/home/business-unit",
main: UnitBisnis main: UnitBisnis
}, },
{ {
path: "/home/parameter", path: "/home/parameters",
main: Parameter main: Parameter
}, },
{ {
path: "/home/dashboard-cat", path: "/home/cat-dashboard",
main: DashboardCAT main: DashboardCAT
}, },
{ {
......
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