Skip to content

T
Tia-dev
Commit d506d464 authored by Deni Rinaldi's avatar Deni Rinaldi
Browse files
Options

Merge branch 'deni-dev(pc)' into 'master' 

push banyak banget pokonya ampe puyeng

See merge request !112
parents 8115bdd0 41083315
Hide whitespace changes
Inline Side-by-side
Showing with 1155 additions and 652 deletions
src/api/index.js
View file @ d506d464
......@@ -79,6 +79,7 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
//Menu
const getMenu = () => api.get('menu/get_menu_hierarki')
const getMenuByRole = () => api.get('menu/get_menu_hierarki_by_role')
const getMenuByUser = () => api.get('menu/get_menu')
//UNIT BISNIS
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/') =>
const searchUnitBisnis = (body) => api.post('/business_unit/search_business_unit', body)
const checkUploadUnitBisnis = (body) => api.post('/business_unit/check_import', body)
const uploadUnitBisnis = (body) => api.post('/business_unit/import_business_unit', body)
const getUnitBisnisActive = () => api.get('business_unit/get_all_business_unit_active')
// Perusahaan
const getPerusahaan = () => api.get('company/get_all_company')
......@@ -95,6 +97,10 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
const updatePerusahaan = (body) => api.post('/company/update_company', body)
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
const getAM = () => api.get('approval_matrix/get_all_approval_matrix')
......@@ -138,6 +144,7 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
const updateParameter = (body) => api.post('setting/update_setting', body)
const checkUploadParameter = (body) => api.post('setting/check_import', body)
const uploadParameter = (body) => api.post('/setting/import_setting', body)
const searchParameter = (body) => api.post('setting/search_setting', body)
//Template
const downloadTemplate = (fileName, fileType) => api.get(`attachment/download_file?fileName=${fileName}&&fileType=${fileType}`)
......@@ -216,7 +223,14 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
getItemReportHierarki,
getMenuByRole,
saveVisualisasiReport,
saveVisualisasiPerusahaan
saveVisualisasiPerusahaan,
searchParameter,
checkUploadPerusahaan,
getDetailPerusahaan,
uploadPerusahaan,
searchPerusahaan,
getUnitBisnisActive,
getMenuByUser
}
}
......
src/container/Home.js
View file @ d506d464
......@@ -150,171 +150,206 @@ export default function MiniDrawer() {
const [selectedSubIndex, setSelectSub] = React.useState([]);
const [userFullname, setUserFullname] = React.useState("")
const [userEmail, setUserEmail] = React.useState("")
const [application, setApplication] = React.useState([])
const [setting, setSetting] = React.useState([])
const [data, setData] = React.useState({
array: [
{
img: Images.Home,
label: 'Home',
path: 'beranda',
subItem: null,
collapse: false,
img: Images.Home,
label: 'Home',
path: 'beranda',
subItem: null,
collapse: false,
},
{
img: Images.budgetTahunan,
label: 'Master Budget & CAT',
path: 'budget-tahunan',
subItem: null,
collapse: false,
img: Images.budgetTahunan,
label: 'Master Budget & CAT',
path: 'budget-tahunan',
subItem: null,
collapse: false,
},
{
img: Images.laporanBulanan,
label: 'Monthly Report',
path: 'beranda',
subItem: null,
collapse: false,
img: Images.laporanBulanan,
label: 'Monthly Report',
path: 'beranda',
subItem: null,
collapse: false,
},
{
img: Images.rolling,
label: 'Rolling Outlook & CAT Revision',
path: 'beranda',
subItem: null,
collapse: false,
img: Images.rolling,
label: 'Rolling Outlook & CAT Revision',
path: 'beranda',
subItem: null,
collapse: false,
},
{
img: Images.outlookperformance,
label: 'Outlook Performance Appraisal',
path: 'beranda',
subItem: null,
collapse: false,
img: Images.outlookperformance,
label: 'Outlook Performance Appraisal',
path: 'beranda',
subItem: null,
collapse: false,
},
{
img: Images.operatingindicator,
label: 'Operating Indicator',
path: 'beranda',
subItem: null,
collapse: false,
img: Images.operatingindicator,
label: 'Operating Indicator',
path: 'beranda',
subItem: null,
collapse: false,
},
{
img: Images.manajemenDokumen,
label: 'Document Management',
path: 'beranda',
subItem: null,
collapse: false,
img: Images.manajemenDokumen,
label: 'Document Management',
path: 'beranda',
subItem: null,
collapse: false,
},
{
img: Images.laporan,
label: 'Reports',
path: '',
subItem: [
{
img: 'beranda',
label: 'CAT Dashboard',
path: 'dashboard-cat',
},
{
img: 'beranda',
label: 'Summary of Triputra Group',
path: 'beranda',
},
{
img: '',
label: 'Sub Holding',
path: 'beranda',
}
],
collapse: false,
img: Images.laporan,
label: 'Reports',
path: '',
subItem: [
{
img: 'beranda',
label: 'CAT Dashboard',
path: 'dashboard-cat',
},
{
img: 'beranda',
label: 'Summary of Triputra Group',
path: 'beranda',
},
{
img: '',
label: 'Sub Holding',
path: 'beranda',
}
],
collapse: false,
},
{
img: '',
label: 'Settings',
path: 'beranda',
subItem: null,
collapse: false,
img: '',
label: 'Settings',
path: 'beranda',
subItem: null,
collapse: false,
},
{
img: Images.masterdata,
label: 'Master Data',
path: '',
subItem: [
{
img: '',
label: 'Business Unit',
path: 'unit-bisnis',
},
{
img: '',
label: 'Company',
path: 'perusahaan',
},
{
img: '',
label: 'Report Items',
path: 'report-items',
},
{
img: '',
label: 'Parameters',
path: 'parameter',
},
],
collapse: false,
img: Images.masterdata,
label: 'Master Data',
path: '',
subItem: [
{
img: '',
label: 'Business Unit',
path: 'unit-bisnis',
},
{
img: '',
label: 'Company',
path: 'perusahaan',
},
{
img: '',
label: 'Report Items',
path: 'report-items',
},
{
img: '',
label: 'Parameters',
path: 'parameter',
},
],
collapse: false,
},
{
img: Images.otorisasi,
label: 'Authorization',
path: '',
subItem: [
{
img: '',
label: 'User Role',
path: 'userrole',
},
{
img: '',
label: 'User',
path: 'user',
}
],
collapse: false,
img: Images.otorisasi,
label: 'Authorization',
path: '',
subItem: [
{
img: '',
label: 'User Role',
path: 'userrole',
},
{
img: '',
label: 'User',
path: 'user',
}
],
collapse: false,
},
{
img: Images.approvalmatrix,
label: 'Approval Matrix',
path: 'approval-matrix',
subItem: null,
collapse: false,
img: Images.approvalmatrix,
label: 'Approval Matrix',
path: 'approval-matrix',
subItem: null,
collapse: false,
},
{
img: Images.otorisasi,
label: 'User Management',
path: '',
subItem: [
{
img: '',
label: 'Profile',
path: 'profile',
},
{
img: '',
label: 'Logout',
path: '',
},
],
collapse: false,
img: Images.otorisasi,
label: 'User Management',
path: '',
subItem: [
{
img: '',
label: 'Profile',
path: 'profile',
},
{
img: '',
label: 'Logout',
path: '',
},
],
collapse: false,
}
]
]
})
React.useEffect(() => {
if(userFullname == "" && userEmail == "") {
if (userFullname == "" && userEmail == "") {
getUserData()
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 = () => {
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();
}
})
}
......@@ -322,13 +357,13 @@ export default function MiniDrawer() {
let userId = localStorage.getItem(Constant.USER)
api.create().getDetailUser(userId).then((response) => {
if (response.data.status == 'success') {
setUserFullname(response.data.data.fullname == null? 'Anonym' : response.data.data.fullname)
setUserEmail(response.data.data.email == null? 'Anonym@123.xyz' : response.data.data.email)
setUserFullname(response.data.data.fullname == null ? 'Anonym' : response.data.data.fullname)
setUserEmail(response.data.data.email == null ? 'Anonym@123.xyz' : response.data.data.email)
}
})
}
const logout = () => {
const logout = () => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}
......@@ -360,11 +395,18 @@ export default function MiniDrawer() {
const { height, width } = UseWindowDimensions();
function handleCollapse(item){
let arr = data.array
function handleCollapse(item) {
let arr = application
let index = arr.findIndex((val) => val.label === item.label)
arr[index].collapse = !arr[index].collapse
setData({...data, array: arr})
setData({ ...application, application: arr })
}
function handleCollapseSetting(item) {
let arr = setting
let index = arr.findIndex((val) => val.label === item.label)
arr[index].collapse = !arr[index].collapse
setData({ ...setting, setting: arr })
}
return (
......@@ -394,31 +436,31 @@ export default function MiniDrawer() {
[classes.topleftOpen]: open,
[classes.topleftClose]: !open,
})}
classes={{
paper: clsx({
[classes.topleftOpen]: open,
[classes.topleftClose]: !open,
}),
}}>
classes={{
paper: clsx({
[classes.topleftOpen]: open,
[classes.topleftClose]: !open,
}),
}}>
{open === true ?
<div style={{ display: 'flex', justifyContent: 'space-between', flex: 1, padding: 10 }}>
<img src={Images.triputra} alt="React Logo" style={{ height: 31, width: 151, alignSelf: 'center', marginLeft: 5 }} />
<IconButton onClick={handleDrawerClose} style={{outline: 'none'}}>
<IconButton onClick={handleDrawerClose} style={{ outline: 'none' }}>
<MenuIcon style={{ fill: 'white' }} />
</IconButton>
</div> :
<IconButton
color="inherit"
aria-label="open drawer"
style={{outline: 'none'}}
style={{ outline: 'none' }}
onClick={handleDrawerOpen}
edge="start"
className={clsx(classes.menuButton, {
[classes.hide]: open,
})}
>
<img src={Images.triputraLogo} alt="React Logo" style={{ height: 30, width: 30, alignSelf: 'center', marginTop: 10}} />
<img src={Images.triputraLogo} alt="React Logo" style={{ height: 30, width: 30, alignSelf: 'center', marginTop: 10 }} />
</IconButton>}
{open &&
<div style={{ width: '100%', marginTop: 15, marginBottom: 60 }}>
......@@ -429,7 +471,7 @@ export default function MiniDrawer() {
</div>
<Divider />
{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 style={{ width: 72, height: 72, backgroundColor: '#838383', borderRadius: 50, alignSelf: 'center' }}>
</div>
......@@ -443,35 +485,75 @@ export default function MiniDrawer() {
</div>
}
<List>
{data.array.map((item, index) => (
{application.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={() => { handleCollapse(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}`}>
<div style={{ paddingLeft: 5 }} className={selectedIndex === item.label ? "active" : ""}>
<ListItem button key={item.label} onClick={() => selectIndex(item.label)}>
<ListItemIcon style={{ minWidth: open ? 40 : 56 }}><img src={item.img} style={{ fill: '#525355' }} /></ListItemIcon>
<Typography style={{ fontFamily: 'nunito', color: '#525355', fontSize: 14 }}>{item.label}</Typography>
</ListItem>
</div>
</Link>
}
{item.subItem.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 != null ?
<div style={{ justifyContent: 'space-between', flexDirection: 'row', display: 'flex', paddingLeft: 5, paddingRight: 10 }} onClick={() => {handleCollapse(item)}}>
{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 != 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>
:
item.label === 'Settings' ?
open ?
<Link to={`${url}/${item.path}`}>
<ListItem button key={item.label} onClick={() => null}>
<Typography style={{ color: '#525355', fontSize: 14, fontFamily: 'nunito' }}>{item.label}</Typography>
</ListItem>
</Link> : null
:
<Link to={`${url}/${item.path}`}>
<div style={{ paddingLeft: 5 }} className={selectedIndex === item.label ? "active" : ""}>
<ListItem button key={item.label} onClick={() => selectIndex(item.label)}>
<ListItemIcon style={{ minWidth: open ? 40 : 56 }}><img src={item.img} style={{ fill: '#525355' }} /></ListItemIcon>
<Typography style={{ fontFamily: 'nunito', color: '#525355', fontSize: 14 }}>{item.label}</Typography>
</ListItem>
</div>
</Link>
<Link to={`${url}/${item.path}`}>
<div style={{ paddingLeft: 5 }} className={selectedIndex === item.label ? "active" : ""}>
<ListItem button key={item.label} onClick={() => selectIndex(item.label)}>
<ListItemIcon style={{ minWidth: open ? 40 : 56 }}><img src={item.img} style={{ fill: '#525355' }} /></ListItemIcon>
<Typography style={{ fontFamily: 'nunito', color: '#525355', fontSize: 14 }}>{item.label}</Typography>
</ListItem>
</div>
</Link>
}
{item.subItem != null &&
{item.subItem.length !== 0 &&
<div>
<Collapse in={item.collapse} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
......
src/container/MasterData/Parameter/Parameter.js
View file @ d506d464
......@@ -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) => {
let fileObj = event
ExcelRenderer(fileObj, (err, resp) => {
......@@ -612,6 +642,8 @@ export default class Parameter extends Component {
<InputBase
style={{ width: '100%' }}
placeholder="Search"
value={this.state.search}
onChange={(e) => this.handleInputChange(e.target.value)}
inputProps={{ 'aria-label': 'naked' }}
/>
</div>
......
src/container/MasterData/Perusahaan/CreatePerusahaan.js
View file @ d506d464
......@@ -3,6 +3,8 @@ import { TextField, Typography } from '@material-ui/core';
import * as R from 'ramda';
import { DateTimePicker, KeyboardDatePicker, DatePicker } from "@material-ui/pickers";
import format from "date-fns/format";
import Autocomplete from '@material-ui/lab/Autocomplete';
import api from '../../../api';
export default class CreatePerusahaan extends Component {
constructor(props) {
......@@ -14,35 +16,67 @@ export default class CreatePerusahaan extends Component {
unitBisnis: '',
totalReport: '',
startDate: '',
endDate: ''
endDate: '',
types: null,
getTypes: null,
perusahaan: null,
getPerusahaan: null,
}
}
render() {
let { type } = this.props
return type === 'edit' ? this.renderEdit() : this.renderCreate()
}
componentDidMount() {
if (this.props.type === 'edit') {
let data = this.props.data
this.setState({
id: data.company_id,
company: data.company_name,
parentCompany: data.parentName,
unitBisnis: data.businessUnitName,
totalReport: data.total_report,
startDate: data.start_date,
endDate: data.end_date
})
}
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
}
})
let typeProps = {
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)
}
})
}
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 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) {
let data = this.state
let isDate = type !== '' ? true : false
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)
})
} else if (isDate && type == 'end_date') {
......@@ -57,281 +91,23 @@ export default class CreatePerusahaan extends Component {
validasi() {
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.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.endDate)) return alert("Tanggal Berakhir is Required.");
console.log('masuk');
if (this.props.type == 'edit') {
let payload = {
"company_id": this.state.id,
"company_name": this.state.company,
"business_unit_id": this.state.unitBisnis,
"parent": this.state.parentCompany,
"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,
"start_date": this.state.startDate,
"end_date": this.state.endDate
}
this.props.createPerusahaan(payload)
let payload = {
"company_name": this.state.company,
"parent": this.state.getPerusahaan.company_id,
"business_unit_id": this.state.getTypes.business_unit_id,
"total_report": this.state.totalReport,
"start_date": this.state.startDate,
"end_date": this.state.endDate
}
}
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>
)
console.log(payload);
this.props.createPerusahaan(payload)
}
renderCreate() {
render() {
return (
<div className="test app-popup-show" style={{ paddingTop: 100 }}>
<div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
......@@ -375,25 +151,14 @@ export default class CreatePerusahaan extends Component {
/>
</div>
<div 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'
}
}}
onChange={(e) => this.setState({ unitBisnis: e.target.value })}
>
</TextField>
<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 style={{ padding: 10, borderRadius: 5 }}>
<TextField
......@@ -492,25 +257,14 @@ export default class CreatePerusahaan extends Component {
</TextField>
</div>
<div style={{ padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
id="parentCompany"
label="Parent Company"
value={this.state.parentCompany}
inputProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
onChange={(e) => this.setState({ parentCompany: e.target.value })}
>
</TextField>
<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 style={{ padding: 10, borderRadius: 5 }}>
<DatePicker
......@@ -518,6 +272,7 @@ export default class CreatePerusahaan extends Component {
id="endDate"
label="Berlaku Hingga"
format="dd MMMM yyyy"
minDate={this.state.startDate}
value={this.state.endDate == "" ? null : this.state.endDate}
onChange={(e) => this.handleChange(e, 'end_date')}
KeyboardButtonProps={{
......
src/container/MasterData/Perusahaan/EditPerusahaan.js 0 → 100644
View file @ d506d464
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 @ d506d464
......@@ -9,8 +9,11 @@ import { render } from '@testing-library/react';
import { TextField, InputBase } from "@material-ui/core";
import { ExcelRenderer } from 'react-excel-renderer';
import CreatePerusahaan from "./CreatePerusahaan";
import EditPerusahaan from "./EditPerusahaan"
import VisualPerusahaan from "./VisualPerusahaan";
import api from "../../../api";
import ReactTooltip from 'react-tooltip';
import PopUpFailedSave from '../../../library/PopUpFailedSave';
var ct = require("../../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable());
......@@ -31,7 +34,8 @@ export default class Perusahaan extends Component {
visiblePerusahaan: true,
cols: null,
rows: null,
dataLoaded: false
dataLoaded: false,
popupError: false
}
this.fileHandler = this.fileHandler.bind(this);
}
......@@ -43,19 +47,184 @@ export default class Perusahaan extends Component {
console.log(err);
}
else {
let judul = resp.rows[0]
let isi = resp.rows.slice(1)
// let body = isi.map((item) => {
// return {
// item
// ]
// })
console.log(JSON.stringify(isi));
this.setState({
dataLoaded: true,
cols: judul,
rows: isi
});
let judul = resp.rows[2]
let isi = resp.rows.slice(3)
let payload = []
isi.map((item, index) => {
if (item.length > 0) {
payload.push({
"id": index + 1,
"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({
dataLoaded: true,
cols: columns,
rows: dataRow
});
}
console.log(response);
})
}
});
}
......@@ -70,7 +239,7 @@ export default class Perusahaan extends Component {
if (response.data.status == 'success') {
let data = response.data.data
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 })
} else {
......@@ -99,11 +268,11 @@ export default class Perusahaan extends Component {
"keyword": e
}
api.create().searchPerusahaan(body).then(response => {
// console.log(response.data);
console.log(response.data);
if (response.data.status == 'success') {
let data = response.data.data
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 })
} else {
......@@ -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() {
const columns = [{
name: "Action",
......@@ -258,7 +435,7 @@ export default class Perusahaan extends Component {
["", "2", "Gawi Bahandep Sawit Mekar", "Triputra Agro Persada Group", "Agrobisnis", "2", "Aktif"],
["", "3", "Puninar Group", "Triputra Investindo Arya", "Service", "5", "Aktif"],
["", "4", "Puninar Infinite Raya", "Puninar Group", "Service", "5", "Non Aktif"],
["", "-", "-", "-", "-","-"],
["", "-", "-", "-", "-", "-"],
]
return (
<div style={{ height: this.props.height }}>
......@@ -350,42 +527,48 @@ export default class Perusahaan extends Component {
</div>
:
this.state.visibleVisual == true ?
<VisualPerusahaan
onClickClose={() => this.setState({ visibleVisual: false, visiblePerusahaan: true })}
height= {this.props.height}
/>
:
<div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<label style={{ color: 'white', fontSize: 16, alignSelf: 'center' }}>Preview Data</label>
</div>
<div style={{ padding: 25 }}>
{this.state.dataLoaded && (
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
theme={getMuiTheme()}
data={this.state.rows}
columns={this.state.cols}
options={options2}
/>
</MuiThemeProvider>
)}
</div>
<div style={{ display: 'flex', width: '100%', placeContent: 'flex-end', padding: 20 }}>
<button
type="button"
onClick={() => this.setState({ visiblePerusahaan: true })}
style={{ marginRight: 20 }}
>
<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 style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
<VisualPerusahaan
onClickClose={() => this.setState({ visibleVisual: false, visiblePerusahaan: true })}
height={this.props.height}
/>
:
<div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<label style={{ color: 'white', fontSize: 16, alignSelf: 'center' }}>Preview Data</label>
</div>
<div style={{ padding: 25 }}>
{this.state.dataLoaded && (
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
theme={getMuiTheme()}
data={this.state.rows}
columns={this.state.cols}
options={options2}
/>
</MuiThemeProvider>
)}
</div>
<div style={{ display: 'flex', width: '100%', placeContent: 'flex-end', padding: 20 }}>
<button
type="button"
onClick={() => this.setState({ visiblePerusahaan: true })}
style={{ marginRight: 20 }}
>
<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>
<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' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div>
</button>
</div>
</div>
</div>
}
{this.state.visibleCreate && (
......@@ -397,7 +580,7 @@ export default class Perusahaan extends Component {
)}
{this.state.visibleEdit && (
<CreatePerusahaan
<EditPerusahaan
type={"edit"}
onClickClose={() => this.setState({ visibleEdit: false })}
data={this.state.listData[this.state.selectIndex]}
......@@ -405,6 +588,10 @@ export default class Perusahaan extends Component {
/>
)}
{this.state.popupError && (
<PopUpFailedSave onClickClose={() => this.setState({ popupError: false })} />
)}
{this.state.visibleUpload && (
<div className="test app-popup-show">
<div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
......
src/container/MasterData/formReportItems/VisualReportItems.js
View file @ d506d464
......@@ -11,41 +11,41 @@ import Autocomplete from '@material-ui/lab/Autocomplete';
const useStyles = makeStyles((theme) => ({
root: {
width: '100%',
maxWidth: 500,
backgroundColor: theme.palette.background.paper,
width: '100%',
maxWidth: 500,
backgroundColor: theme.palette.background.paper,
},
nested: {
paddingLeft: theme.spacing(4),
paddingLeft: theme.spacing(4),
},
}));
}));
const type = [
{
value: '1',
label: 'KPI',
},
{
value: '2',
label: 'KPI',
},
{
value: '1',
label: 'KPI',
},
{
value: '2',
label: 'KPI',
},
];
const companies = [
{
value: '',
label: '',
value: '',
label: '',
},
{
value: '1',
label: 'TIA',
value: '1',
label: 'TIA',
},
{
value: '2',
label: 'TIA',
value: '2',
label: 'TIA',
},
];
];
export default class VisualReportItems extends Component {
constructor(props) {
......@@ -53,22 +53,24 @@ export default class VisualReportItems extends Component {
this.state = {
open: false,
items: [
{ id: 0, GG: 'Accumulated Depreciation (negative value)', collapse: false,
{
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: 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 },
]
......@@ -142,7 +144,7 @@ export default class VisualReportItems extends Component {
api.create().getItemReportHierarki(payload).then((response) => {
console.log(response.data)
if (response.data.status == 'success') {
this.setState({items : response.data.data})
this.setState({ items: response.data.data })
}
})
}
......@@ -150,7 +152,7 @@ export default class VisualReportItems extends Component {
handleCollapse(item) {
let index = this.state.items.findIndex((val) => val.id === item.id)
let items = this.state.items
if ( index == -1 ){
if (index == -1) {
if (item.children.length > 0) {
this.handleCollapse(item)
}
......@@ -173,7 +175,7 @@ export default class VisualReportItems extends Component {
arrayCollapse.push(collapseCase)
}
if (this.refNestable) {
this.refNestable.collapse(arrayCollapse.length > 0? arrayCollapse : 'NONE');
this.refNestable.collapse(arrayCollapse.length > 0 ? arrayCollapse : 'NONE');
}
};
......@@ -183,9 +185,9 @@ export default class VisualReportItems extends Component {
}
api.create().saveVisualisasiReport(payload).then((response) => {
// if (response.data.status == 'ucces') {
this.props.onClickClose()
this.props.onClickClose()
// } else {
// alert(response.data.message)
// alert(response.data.message)
// }
})
}
......@@ -193,76 +195,76 @@ export default class VisualReportItems extends Component {
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.report_name}</label>
<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.report_name}</label>
</div>
)
};
render() {
return (
<div>
<div>
<div style={{ height: this.props.height }}>
<div style={{ height: 199, width: '100%' }} className={"main-color"} />
<div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<label style={{ color: 'white', width: '20%', fontSize: 16, paddingTop: 8 }}>Visualisasi Data</label>
</div>
<div style={{ padding: 25, width: '100%' }}>
<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>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<Autocomplete
{...this.state.listReport}
id="report"
onChange={(event, newInputValue) => this.setState({ report: newInputValue }, () => this.getItemHierarki())}
debug
<div style={{ width: '100%' }} className={"main-color"} />
<div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<label style={{ color: 'white', width: '20%', fontSize: 16, paddingTop: 8 }}>Visualisasi Data</label>
</div>
<div style={{ padding: 25, width: '100%' }}>
<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>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<Autocomplete
{...this.state.listReport}
id="report"
onChange={(event, newInputValue) => this.setState({ report: newInputValue }, () => this.getItemHierarki())}
debug
renderInput={(params) => <TextField {...params} label="Jenis Laporan" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.report}
/>
</div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<Autocomplete
{...this.state.listCompany}
id="company"
onChange={(event, newInputValue) => this.setState({ company: newInputValue }, () => this.getItemHierarki())}
debug
renderInput={(params) => <TextField {...params} label="Jenis Laporan" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.report}
/>
</div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<Autocomplete
{...this.state.listCompany}
id="company"
onChange={(event, newInputValue) => this.setState({ company: newInputValue }, () => this.getItemHierarki())}
debug
renderInput={(params) => <TextField {...params} label="Compan" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.company}
/>
</div>
<div className="margin-top-30px">
<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)))}
/>
</div>
renderInput={(params) => <TextField {...params} label="Compan" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.company}
/>
</div>
<div className="margin-top-30px">
<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)))}
/>
</div>
</div>
<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" }}>
<span style={{ color: '#fff', fontSize: 11 }}>Kembali</span>
</div>
<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" }}>
<span style={{ color: '#fff', fontSize: 11 }}>Kembali</span>
</div>
<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" }}>
<span style={{ color: '#354960', fontSize: 11 }} >Batal</span>
</div>
<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" }}>
<span style={{ color: '#354960', fontSize: 11 }} >Batal</span>
<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>
</div>
<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>
</div>
</button>
</div>
</button>
</div>
</div>
</div>
</div>
</div>
);
}
}
src/container/MasterData/formUnitBisnis/CreateUnitBisnis.js
View file @ d506d464
......@@ -11,8 +11,13 @@ export default class CreateUnitBisnis extends Component {
id: '',
name: '',
startDate: '',
endDate: ''
endDate: '',
errorName: false,
errorStartDate: false,
errorEndDate: false,
msgErrorName: "",
msgErrorStartDate: "",
msgErrorEndDate: ""
}
}
render() {
......@@ -36,11 +41,13 @@ export default class CreateUnitBisnis extends Component {
let data = this.state
let isDate = type !== '' ? true : false
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)
})
} else if (isDate && type == 'end_date') {
this.setState({ endDate: format(e, 'yyyy-MM-dd') }, () => {
this.clearError()
console.log(this.state.endDate)
})
} else {
......@@ -49,13 +56,25 @@ export default class CreateUnitBisnis extends Component {
}
clearError() {
this.setState({
errorName: false,
errorStartDate: false,
errorEndDate: false,
msgErrorName: "",
msgErrorStartDate: "",
msgErrorEndDate: ""
})
}
validasi() {
if (R.isEmpty(this.state.name)) return alert("Unit Bisnis Name 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)) return alert("Tanggal Mulai is Required.");
if (R.isEmpty(this.state.endDate)) return alert("Tanggal Berakhir is Required.");
console.log('masuk');
if (this.props.type == 'edit') {
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.state.endDate === null) {
this.setState({ errorEndDate: true, msgErrorEndDate: 'Tanggal Berakhir tidak boleh kosong' })
} else {
let payload = {
"business_unit_id": this.state.id,
"business_unit_name": this.state.name,
......@@ -63,7 +82,17 @@ export default class CreateUnitBisnis extends Component {
"end_date": this.state.endDate
}
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 = {
"business_unit_name": this.state.name,
"start_date": this.state.startDate,
......@@ -71,7 +100,6 @@ export default class CreateUnitBisnis extends Component {
}
this.props.createUnitBisnis(payload)
}
}
renderEdit() {
......@@ -140,7 +168,8 @@ export default class CreateUnitBisnis extends Component {
color: '#7e8085'
}
}}
error={this.state.errorStartDate}
helperText={this.state.msgErrorStartDate}
style={{ padding: 0, margin: 0, width: '100%' }}
/>
</div>
......@@ -196,7 +225,9 @@ export default class CreateUnitBisnis extends Component {
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>
</div>
......@@ -206,6 +237,9 @@ export default class CreateUnitBisnis extends Component {
id="startDate"
label="Berakhir Hingga"
format="dd MMMM yyyy"
error={this.state.errorEndDate}
helperText={this.state.msgErrorEndDate}
minDate={this.state.startDate}
value={this.state.endDate}
onChange={(e) => this.handleChange(e, 'end_date')}
KeyboardButtonProps={{
......@@ -222,7 +256,6 @@ export default class CreateUnitBisnis extends Component {
color: '#7e8085'
}
}}
style={{ padding: 0, margin: 0, width: '100%' }}
/>
</div>
......@@ -323,7 +356,8 @@ export default class CreateUnitBisnis extends Component {
color: '#7e8085'
}
}}
error={this.state.errorStartDate}
helperText={this.state.msgErrorStartDate}
style={{ padding: 0, margin: 0, width: '100%' }}
/>
</div>
......@@ -373,7 +407,9 @@ export default class CreateUnitBisnis extends Component {
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>
</div>
......@@ -383,6 +419,9 @@ export default class CreateUnitBisnis extends Component {
id="endDate"
label="Berakhir Hingga"
format="dd MMMM yyyy"
error={this.state.errorEndDate}
helperText={this.state.msgErrorEndDate}
minDate={this.state.startDate}
value={this.state.endDate == "" ? null : this.state.endDate}
onChange={(e) => this.handleChange(e, 'end_date')}
KeyboardButtonProps={{
......@@ -421,7 +460,7 @@ export default class CreateUnitBisnis extends Component {
<div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
<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' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
......
src/router/homeRoutes.js
View file @ d506d464
......@@ -17,7 +17,7 @@ const routes = [
main: HomePage
},
{
path: "/home/userrole",
path: "/home/user-role",
main: UserRole
},
{
......@@ -29,7 +29,7 @@ const routes = [
main: ReportItems
},
{
path: "/home/budget-tahunan",
path: "/home/master-budget",
main: BalanceSheet
},
{
......@@ -37,7 +37,7 @@ const routes = [
main: Profile
},
{
path: "/home/perusahaan",
path: "/home/company",
main: Perusahaan
},
{
......@@ -45,15 +45,15 @@ const routes = [
main: User
},
{
path: "/home/unit-bisnis",
path: "/home/business-unit",
main: UnitBisnis
},
{
path: "/home/parameter",
path: "/home/parameters",
main: Parameter
},
{
path: "/home/dashboard-cat",
path: "/home/cat-dashboard",
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