Skip to content

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

create, update, donlot parameter

parent ce2d68d2
Hide whitespace changes
Inline Side-by-side
Showing with 1234 additions and 222 deletions
src/api/index.js
View file @ 20709072
...@@ -69,6 +69,7 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') => ...@@ -69,6 +69,7 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
//Role //Role
const getRole = () => api.get('role/get_all_role') const getRole = () => api.get('role/get_all_role')
const getRoleActive = () => api.get('role/get_all_role_active')
const getDetailRole = (roleId) => api.get(`role/get_role_by_id/${roleId}`) const getDetailRole = (roleId) => api.get(`role/get_role_by_id/${roleId}`)
const searchRole = (body) => api.post('/role/search_role', body) const searchRole = (body) => api.post('/role/search_role', body)
const addRole = (body) => api.post('role/create_role', body) const addRole = (body) => api.post('role/create_role', body)
...@@ -88,6 +89,7 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') => ...@@ -88,6 +89,7 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
// Perusahaan // Perusahaan
const getPerusahaan = () => api.get('company/get_all_company') const getPerusahaan = () => api.get('company/get_all_company')
const getPerusahaanActive = () => api.get('company/get_all_company_active')
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')
...@@ -112,6 +114,13 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') => ...@@ -112,6 +114,13 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
const checkUploadUser = (body) => api.post('/user/check_import', body) const checkUploadUser = (body) => api.post('/user/check_import', body)
const uploadUser = (body) => api.post('/user/import_user', body) const uploadUser = (body) => api.post('/user/import_user', body)
//PARAMETER
const getAllParameter = () => api.get('/setting/get_all_setting')
const getDetailParameter = (id) => api.get(`setting/get_setting_by_id/${id}`)
const getAllGroup = () => api.get('/setting_group/get_all_setting_group')
const getParameterByGroup = (groupID) => api.get(`/setting_type/get_all_setting_type_by_group/${groupID}`)
const createParameter = (body) => api.post('setting/create_setting', body)
const updateParameter = (body) => api.post('setting/update_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}`)
...@@ -167,7 +176,15 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') => ...@@ -167,7 +176,15 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
changePassword, changePassword,
getPerusahaanHierarki, getPerusahaanHierarki,
checkUploadUser, checkUploadUser,
uploadUser uploadUser,
getAllParameter,
getAllGroup,
getParameterByGroup,
getDetailParameter,
updateParameter,
createParameter,
getPerusahaanActive,
getRoleActive
} }
} }
......
src/assets/sass/app.css
View file @ 20709072
...@@ -161,6 +161,47 @@ ...@@ -161,6 +161,47 @@
.btn-no-outline{ .btn-no-outline{
outline: 'none' outline: 'none'
} }
.form {
display: flex;
}
.form>div {
display: inline-block;
vertical-align: top;
}
#treeviewDriveC,
#treeviewDriveD {
margin-top: 10px;
}
.drive-header {
min-height: auto;
padding: 0px;
cursor: default;
}
.drive-header .dx-icon {
margin-top: -4px;
}
.drive-panel {
padding: 20px 30px;
font-size: 115%;
font-weight: bold;
border-right: 1px solid rgba(165, 165, 165, 0.4);
height: 100%;
}
.drive-panel:last-of-type {
border-right: none;
}
.dx-treeview-item {
position: relative;
left: -2px;
}
.color-white { .color-white {
src/container/Laporan/DashboardCAT.js
View file @ 20709072
...@@ -78,10 +78,10 @@ export default class DashboardCAT extends Component { ...@@ -78,10 +78,10 @@ export default class DashboardCAT extends Component {
<Tab label="KPIs" style={{ color: '#fff', fontSize: 11 }} /> <Tab label="KPIs" style={{ color: '#fff', fontSize: 11 }} />
</Tabs> </Tabs>
</AppBar> </AppBar>
{this.state.tab == 0 ? {this.state.tab === 0 ?
<ExceutiveScoreboard height={this.props.height} /> <ExceutiveScoreboard height={this.props.height} />
: :
this.state.tab == 1 ? this.state.tab === 1 ?
<span>Testt</span> <span>Testt</span>
: :
<span>Test2</span> <span>Test2</span>
......
src/container/MasterData/Parameter/CreateParameter.js
View file @ 20709072
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 Autocomplete from '@material-ui/lab/Autocomplete';
import api from '../../../api';
import { DatePicker } from '@material-ui/pickers';
import { format } from 'date-fns';
import * as R from 'ramda'
export default class CreateParameter extends Component { export default class CreateParameter extends Component {
constructor(props) {
super(props)
this.state = {
enableParameter: false,
id: '',
description: '',
value: null,
order: null,
minValue: null,
maxValue: null,
startDate: '',
endDate: '',
date: new Date(),
approvedBy: null,
getApprovedBy: null,
types: null,
getTypes: null,
perusahaan: null,
getPerusahaan: null,
parameter: null,
getParameter: null,
operators: null,
getOperators: null,
tempData: null,
errorParameter: false,
errorDeskripsi: false,
errorValue: false,
errorMinValue: false,
errorOrder: false,
errorMaxValue: false,
errorStartDate: false,
errorEndDate: false,
msgErrorParameter: '',
msgErrorDeskripsi: '',
msgErrorValue: '',
msgErrorMinValue: '',
msgErrorOrder: '',
msgErrorMaxValue: '',
msgErrorStartDate: '',
msgErrorEndDate: ''
}
}
componentDidMount() {
if (this.props.type === 'edit') {
this.setState({
getSettingTypeID: this.props.data.setting_type_id,
})
this.getDetailParameter()
this.getParameterByGroup(this.props.data.setting_group_id)
} else {
this.getDataGroup()
this.getDataPerusahaan()
}
}
getDetailParameter() {
api.create().getDetailParameter(this.props.data.setting_id).then((response) => {
console.log(response);
if (response.data.status === 'success') {
let data = response.data.data
this.setState({
tempData: response.data.data,
getSettingGroupID: data.setting_group_id,
getCompanyID: data.company_id,
settingType: data.setting_type,
}, () => this.getAllGroup(), this.getPerusahaan())
} else {
alert(response.data.message)
}
})
}
getAllGroup() {
api.create().getAllGroup().then(response => {
console.log(response);
if (response.data.status == 'success') {
let data = response.data.data
let typeData = data.map((item) => {
return {
setting_group_id: item.setting_group_id,
setting_group_name: item.setting_group_name
}
})
let index = typeData.findIndex((val) => val.setting_group_id == this.state.getSettingGroupID)
let typeProps = {
options: typeData,
getOptionLabel: (option) => option.setting_group_name,
};
this.setState({ types: typeProps, typeData: response.data.data, getTypes: index == -1 ? typeData[0] : typeData[index] })
} else {
alert(response.data.message)
}
})
}
getPerusahaan() {
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
}
})
perusahaanData.push({
company_id: 0,
company_name: 'Default'
})
let index = perusahaanData.sort((a, b) => a.company_id - b.company_id).findIndex((val) => val.company_id == this.state.getCompanyID)
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)
}
})
}
getDataGroup() {
api.create().getAllGroup().then((response) => {
if (response.data.status == 'success') {
let data = response.data.data
let typeData = data.map((item) => {
return {
setting_group_id: item.setting_group_id,
setting_group_name: item.setting_group_name
}
})
let typeProps = {
options: typeData,
getOptionLabel: (option) => option.setting_group_name,
};
this.setState({ types: typeProps, typeData: response.data.data })
} else {
alert(response.data.message)
}
})
}
getDataPerusahaan() {
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
}
})
typeData.push({
company_id: 0,
company_name: 'Default'
})
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)
}
})
}
getParameterByGroup(id) {
api.create().getParameterByGroup(id).then(response => {
console.log(response);
if (response.data.status == 'success') {
let data = response.data.data
let typeData = data.map((item) => {
return {
setting_type_id: item.setting_type_id,
setting_type_name: item.setting_type_name
}
})
let index = typeData.findIndex((val) => val.setting_type_id == this.state.getSettingTypeID)
let typeProps = {
options: typeData,
getOptionLabel: (option) => option.setting_type_name,
};
this.setState({ enableParameter: true, parameter: typeProps, parameterData: response.data.data, getParameter: index == -1 ? typeData[0] : typeData[index] })
} else {
alert(response.data.message)
}
})
}
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 },
errorParameter: false,
errorDeskripsi: false,
errorValue: false,
errorMinValue: false,
errorOrder: false,
errorMaxValue: false,
errorStartDate: false,
errorEndDate: false,
msgErrorParameter: '',
msgErrorDeskripsi: '',
msgErrorValue: '',
msgErrorMinValue: '',
msgErrorOrder: '',
msgErrorMaxValue: '',
msgErrorStartDate: '',
msgErrorEndDate: ''
})
} else if (isDate && type == 'end_date') {
this.setState({
...data, tempData: { ...this.state.tempData, end_date: format(e, 'yyyy-MM-dd') },
errorParameter: false,
errorDeskripsi: false,
errorValue: false,
errorMinValue: false,
errorOrder: false,
errorMaxValue: false,
errorStartDate: false,
errorEndDate: false,
msgErrorParameter: '',
msgErrorDeskripsi: '',
msgErrorValue: '',
msgErrorMinValue: '',
msgErrorOrder: '',
msgErrorMaxValue: '',
msgErrorStartDate: '',
msgErrorEndDate: ''
})
} else {
this.setState({
...data,
tempData: { ...this.state.tempData, [e.target.name]: e.target.value },
errorParameter: false,
errorDeskripsi: false,
errorValue: false,
errorMinValue: false,
errorOrder: false,
errorMaxValue: false,
errorStartDate: false,
errorEndDate: false,
msgErrorParameter: '',
msgErrorDeskripsi: '',
msgErrorValue: '',
msgErrorMinValue: '',
msgErrorOrder: '',
msgErrorMaxValue: '',
msgErrorStartDate: '',
msgErrorEndDate: ''
})
}
}
handleChangeCreate(e, type) {
let data = this.state
let isDate = type !== '' ? true : false
if (isDate && type == 'start_date') {
this.setState({ startDate: format(e, 'yyyy-MM-dd') }, () => {
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, [e.target.name]: e.target.value })
}
}
validasi() {
if (R.isEmpty(this.state.tempData.description)) {
this.setState({ errorDeskripsi: true, msgErrorDeskripsi: 'Deskripsi tidak boleh kosong' })
} else if (R.isEmpty(this.state.tempData.value)) {
this.setState({ errorValue: true, msgErrorValue: 'Value tidak boleh kosong' })
} else if (R.isNil(this.state.tempData.min_value)) {
this.setState({ errorMinValue: true, msgErrorMinValue: 'Min Value tidak boleh kosong' })
} else if (R.isNil(this.state.tempData.start_date)) {
this.setState({ errorStartDate: true, msgErrorStartDate: 'Start Date tidak boleh kosong' })
} else if (R.isNil(this.state.tempData.order)) {
this.setState({ errorOrder: true, msgErrorOrder: 'Order tidak boleh kosong' })
} else if (R.isNil(this.state.tempData.max_value)) {
this.setState({ errorMaxValue: true, msgErrorMaxValue: 'Max Value tidak boleh kosong' })
} else if (R.isNil(this.state.tempData.end_date)) {
this.setState({ errorEndDate: true, msgErrorEndDate: 'End Date tidak boleh kosong' })
} else {
this.updateParameter()
}
}
validasiCreate() {
if (R.isEmpty(this.state.description)) {
this.setState({ errorDeskripsi: true, msgErrorDeskripsi: 'Deskripsi tidak boleh kosong' })
} else if (R.isEmpty(this.state.value)) {
this.setState({ errorValue: true, msgErrorValue: 'Value tidak boleh kosong' })
} else if (R.isNil(this.state.minValue)) {
this.setState({ errorMinValue: true, msgErrorMinValue: 'Min Value tidak boleh kosong' })
} else if (R.isNil(this.state.startDate)) {
this.setState({ errorStartDate: true, msgErrorStartDate: 'Start Date tidak boleh kosong' })
} else if (R.isNil(this.state.order)) {
this.setState({ errorOrder: true, msgErrorOrder: 'Order tidak boleh kosong' })
} else if (R.isNil(this.state.maxValue)) {
this.setState({ errorMaxValue: true, msgErrorMaxValue: 'Max Value tidak boleh kosong' })
} else if (R.isNil(this.state.endDate)) {
this.setState({ errorEndDate: true, msgErrorEndDate: 'End Date tidak boleh kosong' })
} else {
this.createParameter()
}
}
updateParameter() {
let body = {
"setting_id": this.state.tempData.setting_id,
"setting_group_id": this.state.getTypes.setting_group_id,
"setting_type_id": this.state.getParameter.setting_type_id,
"company_id": this.state.getPerusahaan.company_id,
"description": this.state.tempData.description,
"orders": this.state.tempData.order,
"value": this.state.tempData.value,
"max_value": this.state.tempData.max_value,
"min_value": this.state.tempData.min_value,
"start_date": this.state.tempData.start_date,
"end_date": this.state.tempData.end_date
}
console.log(body);
this.props.updateParameter(body)
}
createParameter() {
let body = {
"setting_group_id": this.state.getTypes.setting_group_id,
"setting_type_id": this.state.getParameter.setting_type_id,
"company_id": this.state.getPerusahaan.company_id,
"description": this.state.description,
"orders": this.state.order,
"value": this.state.value,
"max_value": this.state.maxValue,
"min_value": this.state.minValue,
"start_date": this.state.startDate,
"end_date": this.state.endDate
}
console.log(body);
this.props.createParameter(body)
}
render() { render() {
let { type } = this.props let { type } = this.props
return type === 'edit' ? this.renderEdit() : this.renderCreate() return type === 'edit' ? this.renderEdit() : this.renderCreate()
...@@ -9,9 +363,9 @@ export default class CreateParameter extends Component { ...@@ -9,9 +363,9 @@ export default class CreateParameter extends Component {
renderEdit() { renderEdit() {
return ( return (
<div className="test app-popup-show" style={{ paddingTop: 100 }}> <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 }}>
<div className="popup-panel grid grid-2x" style={{ backgroundColor: '#51c6ea', height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}> <div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
<div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}> <div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
<div className="popup-title"> <div className="popup-title">
<span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Ubah Data</span> <span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Ubah Data</span>
...@@ -34,7 +388,7 @@ export default class CreateParameter extends Component { ...@@ -34,7 +388,7 @@ export default class CreateParameter 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={this.props.data[5]} value={this.state.tempData === null ? '' : this.state.tempData.setting_id}
id="id" id="id"
label="ID" label="ID"
disabled disabled
...@@ -52,31 +406,21 @@ export default class CreateParameter extends Component { ...@@ -52,31 +406,21 @@ export default class CreateParameter extends Component {
/> />
</div> </div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField <Autocomplete
style={{ width: '100%' }} {...this.state.parameter}
id="parameter" debug
label="Parameter" id="tipe"
value={this.props.data[2]} onChange={(event, newInputValue) => this.setState({ getParameter: newInputValue })}
inputProps={{ renderInput={(params) => <TextField {...params} InputProps={{ ...params.InputProps, style: { fontSize: 11 } }} InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }} label="Parameter" />}
style: { value={this.state.getParameter}
fontSize: 11 />
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
>
</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="deskripsi" id="description"
label="Deskripsi" label="Description"
value={this.props.data[4]} value={this.state.tempData === null ? '' : this.state.tempData.description}
inputProps={{ inputProps={{
style: { style: {
fontSize: 11 fontSize: 11
...@@ -88,6 +432,10 @@ export default class CreateParameter extends Component { ...@@ -88,6 +432,10 @@ export default class CreateParameter extends Component {
color: '#7e8085' color: '#7e8085'
} }
}} }}
name="description"
onChange={(e) => this.handleChange(e, '')}
error={this.state.errorDeskripsi}
helperText={this.state.msgErrorDeskripsi}
> >
</TextField> </TextField>
</div> </div>
...@@ -96,7 +444,8 @@ export default class CreateParameter extends Component { ...@@ -96,7 +444,8 @@ export default class CreateParameter extends Component {
style={{ width: '100%' }} style={{ width: '100%' }}
id="value" id="value"
label="Value" label="Value"
value={this.props.data[6]} value={this.state.tempData === null ? '' : this.state.tempData.value}
type={"number"}
inputProps={{ inputProps={{
style: { style: {
fontSize: 11 fontSize: 11
...@@ -108,15 +457,20 @@ export default class CreateParameter extends Component { ...@@ -108,15 +457,20 @@ export default class CreateParameter extends Component {
color: '#7e8085' color: '#7e8085'
} }
}} }}
name="value"
onChange={(e) => this.handleChange(e, '')}
error={this.state.errorValue}
helperText={this.state.msgErrorValue}
> >
</TextField> </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="minValue" id="min_value"
label="Min Value" label="Min Value"
value={this.props.data[7]} type={"number"}
value={this.state.tempData === null ? '' : this.state.tempData.min_value}
inputProps={{ inputProps={{
style: { style: {
fontSize: 11 fontSize: 11
...@@ -128,17 +482,26 @@ export default class CreateParameter extends Component { ...@@ -128,17 +482,26 @@ export default class CreateParameter extends Component {
color: '#7e8085' color: '#7e8085'
} }
}} }}
name="min_value"
onChange={(e) => this.handleChange(e, '')}
error={this.state.errorMinValue}
helperText={this.state.msgErrorMinValue}
> >
</TextField> </TextField>
</div> </div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField <DatePicker
style={{ width: '100%' }} margin="normal"
id="periode" id="start_date"
value={"1 Januari 2020"}
label="Berlaku Mulai" label="Berlaku Mulai"
// value={this.state.periode} format="dd MMMM yyyy"
onChange={(e) => null} value={this.state.tempData === null ? '' : this.state.tempData.start_date}
error={this.state.errorStartDate}
helperText={this.state.msgErrorStartDate}
onChange={(e) => this.handleChange(e, 'start_date')}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
inputProps={{ inputProps={{
style: { style: {
fontSize: 11 fontSize: 11
...@@ -150,16 +513,17 @@ export default class CreateParameter extends Component { ...@@ -150,16 +513,17 @@ export default class CreateParameter extends Component {
color: '#7e8085' color: '#7e8085'
} }
}} }}
>
</TextField> 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={this.props.data[9]}
id="status" id="status"
label="Status" label="Status"
value={this.state.tempData === null ? '' : this.state.tempData.status}
disabled disabled
inputProps={{ inputProps={{
style: { style: {
...@@ -176,58 +540,45 @@ export default class CreateParameter extends Component { ...@@ -176,58 +540,45 @@ export default class CreateParameter extends Component {
</div> </div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<Typography style={{ fontSize: 11 }}>Dibuat : Admin - 21 Jul 2020, 18:45</Typography> <div style={{ display: 'flex' }}>
<Typography style={{ fontSize: 11 }}>Diubah : Admin - 21 Jul 2020, 18:45</Typography> <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> </div>
<div className="column-2"> <div className="column-2">
<div style={{ padding: 10, borderRadius: 5 }}> <div className="" style={{ padding: 10, borderRadius: 5 }}>
<TextField <Autocomplete
style={{ width: '100%' }} {...this.state.types}
id="group" debug
label="Group" id="tipe"
value={this.props.data[1]} onChange={(event, newInputValue) => this.setState({ getTypes: newInputValue }, () => newInputValue === null ? this.setState({ enableParameter: false, getParameter: null }) : this.getParameterByGroup(newInputValue.setting_group_id))}
inputProps={{ renderInput={(params) => <TextField {...params} InputProps={{ ...params.InputProps, style: { fontSize: 11 } }} InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }} label="Group" />}
style: { value={this.state.getTypes}
fontSize: 11 />
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
>
</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
style={{ width: '100%' }} {...this.state.perusahaan}
id="perusahaan" debug
label="Perusahaan" id="tipe"
value={this.props.data[3]} 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="Perusahaan" />}
style: { value={this.state.getPerusahaan}
fontSize: 11 />
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
>
</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={this.props.data[5]} type={"number"}
value={this.state.tempData === null ? '' : this.state.tempData.order}
inputProps={{ inputProps={{
style: { style: {
fontSize: 11 fontSize: 11
...@@ -239,15 +590,20 @@ export default class CreateParameter extends Component { ...@@ -239,15 +590,20 @@ export default class CreateParameter extends Component {
color: '#7e8085' color: '#7e8085'
} }
}} }}
name="order"
onChange={(e) => this.handleChange(e, '')}
error={this.state.errorOrder}
helperText={this.state.msgErrorOrder}
> >
</TextField> </TextField>
</div> </div>
<div style={{ marginTop: '80px', padding: 10, borderRadius: 5 }}> <div style={{ marginTop: '80px', padding: 10, borderRadius: 5 }}>
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
id="maxValue" id="max_value"
label="Max Value" label="Max Value"
value={this.props.data[8]} type={"number"}
value={this.state.tempData === null ? '' : this.state.tempData.max_value}
inputProps={{ inputProps={{
style: { style: {
fontSize: 11 fontSize: 11
...@@ -259,15 +615,27 @@ export default class CreateParameter extends Component { ...@@ -259,15 +615,27 @@ export default class CreateParameter extends Component {
color: '#7e8085' color: '#7e8085'
} }
}} }}
name="max_value"
onChange={(e) => this.handleChange(e, '')}
error={this.state.errorMaxValue}
helperText={this.state.msgErrorMaxValue}
> >
</TextField> </TextField>
</div> </div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField <DatePicker
style={{ width: '100%' }} margin="normal"
id="unit" id="end_date"
label="Berlaku Hingga" label="Berakhir Hingga"
defaultValue={"31 Desember 2020"} format="dd MMMM yyyy"
error={this.state.errorEndDate}
helperText={this.state.msgErrorEndDate}
minDate={this.state.tempData === null ? null : this.state.tempData.start_date}
value={this.state.tempData === null ? '' : this.state.tempData.end_date}
onChange={(e) => this.handleChange(e, 'end_date')}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
inputProps={{ inputProps={{
style: { style: {
fontSize: 11 fontSize: 11
...@@ -279,22 +647,33 @@ export default class CreateParameter extends Component { ...@@ -279,22 +647,33 @@ export default class CreateParameter extends Component {
color: '#7e8085' color: '#7e8085'
} }
}} }}
>
</TextField> style={{ padding: 0, margin: 0, width: '100%' }}
/>
</div> </div>
</div> </div>
</div> </div>
<div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}> <div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1" style={{ alignSelf: 'center' }}> <div className="column-1" style={{ alignSelf: 'center' }}>
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <button
<span style={{ color: '#354960', fontSize: 11 }}>Batal</span> type="button"
</div> 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>
<div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}> <div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <button
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span> type="button"
</div> 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>
</div> </div>
...@@ -304,9 +683,9 @@ export default class CreateParameter extends Component { ...@@ -304,9 +683,9 @@ export default class CreateParameter extends Component {
renderCreate() { renderCreate() {
return ( return (
<div className="test app-popup-show" style={{ paddingTop: 100 }}> <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 }}>
<div className="popup-panel grid grid-2x" style={{ backgroundColor: '#51c6ea', height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}> <div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
<div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}> <div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
<div className="popup-title"> <div className="popup-title">
<span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Create Data</span> <span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Create Data</span>
...@@ -326,12 +705,13 @@ export default class CreateParameter extends Component { ...@@ -326,12 +705,13 @@ export default class CreateParameter extends Component {
<div className="border-bottom grid grid-2x grid-mobile-none gap-15px" style={{ padding: 20 }}> <div className="border-bottom grid grid-2x grid-mobile-none gap-15px" style={{ padding: 20 }}>
<div className="column-1"> <div className="column-1">
<div style={{ padding: 10, borderRadius: 5 }}> <div style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
id="parameter" value={this.state.tempData === null ? '' : this.state.tempData.setting_id}
label="Parameter" id="id"
defaultValue={"BALANCE_SHEET"} label="ID"
disabled
inputProps={{ inputProps={{
style: { style: {
fontSize: 11 fontSize: 11
...@@ -343,15 +723,25 @@ export default class CreateParameter extends Component { ...@@ -343,15 +723,25 @@ export default class CreateParameter extends Component {
color: '#7e8085' color: '#7e8085'
} }
}} }}
> />
</TextField>
</div> </div>
<div style={{ padding: 10, borderRadius: 5 }}> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<Autocomplete
{...this.state.parameter}
debug
disabled={!this.state.enableParameter}
id="tipe"
onChange={(event, newInputValue) => this.setState({ getParameter: newInputValue })}
renderInput={(params) => <TextField {...params} InputProps={{ ...params.InputProps, style: { fontSize: 11 } }} InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }} label="Parameter" />}
value={this.state.getParameter}
/>
</div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
id="deskripsi" id="description"
label="Deskripsi" label="Description"
defaultValue={"Deskripsi"} value={this.state.description === '' ? '' : this.state.description}
inputProps={{ inputProps={{
style: { style: {
fontSize: 11 fontSize: 11
...@@ -363,15 +753,20 @@ export default class CreateParameter extends Component { ...@@ -363,15 +753,20 @@ export default class CreateParameter extends Component {
color: '#7e8085' color: '#7e8085'
} }
}} }}
name="description"
onChange={(e) => this.handleChangeCreate(e, '')}
error={this.state.errorDeskripsi}
helperText={this.state.msgErrorDeskripsi}
> >
</TextField> </TextField>
</div> </div>
<div style={{ padding: 10, borderRadius: 5 }}> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
id="value" id="value"
label="Value" label="Value"
defaultValue={"Value"} value={this.state.value === null ? '' : this.state.value}
type={"number"}
inputProps={{ inputProps={{
style: { style: {
fontSize: 11 fontSize: 11
...@@ -383,15 +778,20 @@ export default class CreateParameter extends Component { ...@@ -383,15 +778,20 @@ export default class CreateParameter extends Component {
color: '#7e8085' color: '#7e8085'
} }
}} }}
name="value"
onChange={(e) => this.handleChangeCreate(e, '')}
error={this.state.errorValue}
helperText={this.state.msgErrorValue}
> >
</TextField> </TextField>
</div> </div>
<div style={{ padding: 10, borderRadius: 5 }}> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
id="minValue" id="min_value"
label="Min Value" label="Min Value"
defaultValue={"1"} type={"number"}
value={this.state.minValue === null ? '' : this.state.minValue}
inputProps={{ inputProps={{
style: { style: {
fontSize: 11 fontSize: 11
...@@ -403,16 +803,26 @@ export default class CreateParameter extends Component { ...@@ -403,16 +803,26 @@ export default class CreateParameter extends Component {
color: '#7e8085' color: '#7e8085'
} }
}} }}
name="minValue"
onChange={(e) => this.handleChangeCreate(e, '')}
error={this.state.errorMinValue}
helperText={this.state.msgErrorMinValue}
> >
</TextField> </TextField>
</div> </div>
<div style={{ padding: 10, borderRadius: 5 }}> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField <DatePicker
style={{ width: '100%' }} margin="normal"
id="periode" id="startDate"
defaultValue={"1 Januari 2020"}
label="Berlaku Mulai" label="Berlaku Mulai"
onChange={(e) => null} format="dd MMMM yyyy"
error={this.state.errorStartDate}
helperText={this.state.msgErrorStartDate}
value={this.state.startDate == "" ? null : this.state.startDate}
onChange={(e) => this.handleChangeCreate(e, 'start_date')}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
inputProps={{ inputProps={{
style: { style: {
fontSize: 11 fontSize: 11
...@@ -424,11 +834,12 @@ export default class CreateParameter extends Component { ...@@ -424,11 +834,12 @@ export default class CreateParameter extends Component {
color: '#7e8085' color: '#7e8085'
} }
}} }}
>
</TextField> 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%' }}
defaultValue={"Aktif"} defaultValue={"Aktif"}
...@@ -456,52 +867,33 @@ export default class CreateParameter extends Component { ...@@ -456,52 +867,33 @@ export default class CreateParameter extends Component {
</div> </div>
<div className="column-2"> <div className="column-2">
<div style={{ padding: 10, borderRadius: 5 }}> <div className="" style={{ padding: 10, borderRadius: 5 }}>
<TextField <Autocomplete
style={{ width: '100%' }} {...this.state.types}
id="group" debug
label="Group" id="tipe"
defaultValue={"LAPORAN_BULANAN"} onChange={(event, newInputValue) => this.setState({ getTypes: newInputValue }, () => newInputValue === null ? this.setState({ enableParameter: false, getParameter: null }) : this.getParameterByGroup(newInputValue.setting_group_id))}
inputProps={{ renderInput={(params) => <TextField {...params} InputProps={{ ...params.InputProps, style: { fontSize: 11 } }} InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }} label="Group" />}
style: { value={this.state.getTypes}
fontSize: 11 />
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
>
</TextField>
</div> </div>
<div style={{ padding: 10, borderRadius: 5 }}> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField <Autocomplete
style={{ width: '100%' }} {...this.state.perusahaan}
id="perusahaan" debug
label="Perusahaan" id="tipe"
defaultValue={"Default"} 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="Perusahaan" />}
style: { value={this.state.getPerusahaan}
fontSize: 11 />
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
>
</TextField>
</div> </div>
<div 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"
defaultValue={"1"} type={"number"}
value={this.state.order === null ? '' : this.state.order}
inputProps={{ inputProps={{
style: { style: {
fontSize: 11 fontSize: 11
...@@ -513,15 +905,20 @@ export default class CreateParameter extends Component { ...@@ -513,15 +905,20 @@ export default class CreateParameter extends Component {
color: '#7e8085' color: '#7e8085'
} }
}} }}
name="order"
onChange={(e) => this.handleChangeCreate(e, '')}
error={this.state.errorOrder}
helperText={this.state.msgErrorOrder}
> >
</TextField> </TextField>
</div> </div>
<div style={{ padding: 10, borderRadius: 5 }}> <div style={{ marginTop: '80px', padding: 10, borderRadius: 5 }}>
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
id="maxValue" id="max_value"
label="Max Value" label="Max Value"
defaultValue={"10"} type={"number"}
value={this.state.maxValue === null ? '' : this.state.maxValue}
inputProps={{ inputProps={{
style: { style: {
fontSize: 11 fontSize: 11
...@@ -533,15 +930,27 @@ export default class CreateParameter extends Component { ...@@ -533,15 +930,27 @@ export default class CreateParameter extends Component {
color: '#7e8085' color: '#7e8085'
} }
}} }}
name="maxValue"
onChange={(e) => this.handleChangeCreate(e, '')}
error={this.state.errorMaxValue}
helperText={this.state.msgErrorMaxValue}
> >
</TextField> </TextField>
</div> </div>
<div style={{ padding: 10, borderRadius: 5 }}> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField <DatePicker
style={{ width: '100%' }} margin="normal"
id="unit" id="endDate"
label="Berlaku Hingga" label="Berakhir Hingga"
defaultValue={"31 Desember 2020"} 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.handleChangeCreate(e, 'end_date')}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
inputProps={{ inputProps={{
style: { style: {
fontSize: 11 fontSize: 11
...@@ -553,22 +962,33 @@ export default class CreateParameter extends Component { ...@@ -553,22 +962,33 @@ export default class CreateParameter extends Component {
color: '#7e8085' color: '#7e8085'
} }
}} }}
>
</TextField> style={{ padding: 0, margin: 0, width: '100%' }}
/>
</div> </div>
</div> </div>
</div> </div>
<div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}> <div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1" style={{ alignSelf: 'center' }}> <div className="column-1" style={{ alignSelf: 'center' }}>
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <button
<span style={{ color: '#354960', fontSize: 11 }}>Batal</span> type="button"
</div> 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>
<div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}> <div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <button
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span> type="button"
</div> 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>
</div>
</button>
</div> </div>
</div> </div>
</div> </div>
......
src/container/MasterData/Parameter/Parameter.js
View file @ 20709072
...@@ -4,10 +4,16 @@ import Images from '../../../assets/Images'; ...@@ -4,10 +4,16 @@ import Images from '../../../assets/Images';
import MUIDataTable from "mui-datatables"; import MUIDataTable from "mui-datatables";
import { InputBase } from "@material-ui/core"; import { InputBase } from "@material-ui/core";
import CreateParameter from '../Parameter/CreateParameter'; import CreateParameter from '../Parameter/CreateParameter';
import api from '../../../api';
import PopUpFailedSave from "../../../library/PopUpFailedSave";
import ReactTooltip from 'react-tooltip';
import UploadFile from "../../../library/Upload";
import { ExcelRenderer } from 'react-excel-renderer';
var ct = require("../../../library/CustomTable"); var ct = require("../../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable()); const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptions(); const options = ct.customOptions();
const options2 = ct.customOptions2();
export default class Parameter extends Component { export default class Parameter extends Component {
constructor(props) { constructor(props) {
...@@ -15,16 +21,436 @@ export default class Parameter extends Component { ...@@ -15,16 +21,436 @@ export default class Parameter extends Component {
this.state = { this.state = {
visibleCreate: false, visibleCreate: false,
visibleEdit: false, visibleEdit: false,
data: [] visibleParameter: true,
popupError: false,
data: [],
dataTable: []
} }
this.fileHandler = this.fileHandler.bind(this);
} }
componentDidMount() { componentDidMount() {
this.getAllParameter()
}
getAllParameter() {
api.create().getAllParameter().then(response => {
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, data: response.data.data })
} else {
alert(response.data.message)
}
})
}
openPopUp(index, type) {
if (type === 'edit') {
this.setState({
selectIndex: index,
visibleEdit: true
})
} else {
this.setState({
data: this.state.data[index],
visibleCreate: true
})
}
}
updateParameter = (payload) => {
this.setState({ visibleEdit: false })
api.create().updateParameter(payload).then(response => {
if (response.data.status == 'success') {
this.getAllParameter()
} else {
alert(response.data.message)
}
})
}
createParameter = (payload) => {
this.setState({ visibleCreate: false })
api.create().createParameter(payload).then(response => {
if (response.data.status == 'success') {
this.getAllParameter()
} else {
alert(response.data.message)
}
})
}
downloadFile = async () => {
let res = await fetch(
"https://tia.eksad.com/tia-reporting-dev/public/attachment/download_file?fileName=ParameterTemplate&&fileType=xlsx"
)
res = await res.blob()
console.log(res)
if (res.size > 0) {
let url = window.URL.createObjectURL(res);
let a = document.createElement('a');
a.href = url;
a.download = 'Template Parameter Unit.xlsx';
a.click();
}
}
downloadDataTable = async () => {
let res = await fetch(
"https://tia.eksad.com/tia-reporting-dev/public/setting/export_setting"
)
res = await res.blob()
console.log(res)
if (res.size > 0) {
let url = window.URL.createObjectURL(res);
let a = document.createElement('a');
a.href = url;
a.download = 'Parameter Unit.xlsx';
a.click();
}
}
fileHandler = (event) => {
let fileObj = event
ExcelRenderer(fileObj, (err, resp) => {
// console.log(resp)
if (err) {
console.log(err);
}
else {
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,
group: item[0],
parameter: item[1],
perusahaan: item[2],
description: item[3],
order: item[4],
value: item[5],
min_value: item[6],
max_value: item[7],
start_date: item[8],
end_date: item[9],
})
}
})
let body = {
business_unit: payload
}
this.setState({ payload: body })
api.create().checkUploadUnitBisnis(body).then(response => {
if (response.data.status === "success") {
let dataRow = response.data.data.map((item, index) => {
return [
index + 1,
item.group,
item.paramter,
item.perusahaan,
item.description,
item.order,
item.value,
item.min_value,
item.max_value,
item.start_date,
item.end_date,
]
})
let columns = [
"Data Ke-",
{
name: "Group",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[4] != null) {
check = tableMeta.rowData[4].findIndex((val) => val.field.includes('business_unit_name'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[4] != null && check > -1 ?
<a data-tip={tableMeta.rowData[4][check].message} data-for="unitbisnis">
<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="unitbisnis" place="bottom" type="light" effect="solid" />
</div >
);
}
}
},
{
name: "Parameter",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[4] != null) {
check = tableMeta.rowData[4].findIndex((val) => val.field.includes('start_date'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[4] != null && check > -1 ?
<a data-tip={tableMeta.rowData[4][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: "Perusahaan",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[4] != null) {
check = tableMeta.rowData[4].findIndex((val) => val.field.includes('end_date'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[4] != null && check > -1 ?
<a data-tip={tableMeta.rowData[4][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: "Deskripsi",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[4] != null) {
check = tableMeta.rowData[4].findIndex((val) => val.field.includes('end_date'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[4] != null && check > -1 ?
<a data-tip={tableMeta.rowData[4][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: "Order",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[4] != null) {
check = tableMeta.rowData[4].findIndex((val) => val.field.includes('end_date'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[4] != null && check > -1 ?
<a data-tip={tableMeta.rowData[4][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: "Value",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[4] != null) {
check = tableMeta.rowData[4].findIndex((val) => val.field.includes('end_date'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[4] != null && check > -1 ?
<a data-tip={tableMeta.rowData[4][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: "Min Value",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[4] != null) {
check = tableMeta.rowData[4].findIndex((val) => val.field.includes('end_date'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[4] != null && check > -1 ?
<a data-tip={tableMeta.rowData[4][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: "Max Value",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[4] != null) {
check = tableMeta.rowData[4].findIndex((val) => val.field.includes('end_date'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[4] != null && check > -1 ?
<a data-tip={tableMeta.rowData[4][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: "Berlaku Mulai",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[4] != null) {
check = tableMeta.rowData[4].findIndex((val) => val.field.includes('end_date'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[4] != null && check > -1 ?
<a data-tip={tableMeta.rowData[4][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: "Berlaku Hingga",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[4] != null) {
check = tableMeta.rowData[4].findIndex((val) => val.field.includes('end_date'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[4] != null && check > -1 ?
<a data-tip={tableMeta.rowData[4][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);
})
}
});
} }
render() { render() {
console.log(this.props.height)
const columns = [{ const columns = [{
name: "Action", name: "Action",
options: { options: {
...@@ -37,7 +463,7 @@ export default class Parameter extends Component { ...@@ -37,7 +463,7 @@ export default class Parameter extends Component {
cursor: 'pointer', cursor: 'pointer',
borderColor: 'transparent' borderColor: 'transparent'
}} }}
onClick={() => this.setState({ visibleEdit: true, data: tableMeta.rowData })} onClick={() => this.openPopUp(tableMeta.rowIndex, 'edit')}
> >
<img src={Images.editCopy} /> <img src={Images.editCopy} />
</button> </button>
...@@ -150,64 +576,172 @@ export default class Parameter extends Component { ...@@ -150,64 +576,172 @@ export default class Parameter extends Component {
["", "LAPORAN_BULANAN", "BALANCE_SHEET", "Puninar Group", "Range Periode Lap", "2", "-", "1", "15", "Aktif"], ["", "LAPORAN_BULANAN", "BALANCE_SHEET", "Puninar Group", "Range Periode Lap", "2", "-", "1", "15", "Aktif"],
["", "LAPORAN_BULANAN", "BALANCE_SHEET", "TAP Group", "Range Periode Lap", "3", "-", "1", "15", "Aktif"], ["", "LAPORAN_BULANAN", "BALANCE_SHEET", "TAP Group", "Range Periode Lap", "3", "-", "1", "15", "Aktif"],
["", "LAPORAN_BULANAN", "BALANCE_SHEET", "Daya Group", "Range Periode Lap", "4", "-", "1", "20", "Non Aktif"], ["", "LAPORAN_BULANAN", "BALANCE_SHEET", "Daya Group", "Range Periode Lap", "4", "-", "1", "20", "Non Aktif"],
["", "-", "-", "-", "-","-"] ["", "-", "-", "-", "-", "-"]
] ]
return ( return (
<div style={{ height: this.props.height }}> <div style={{ height: this.props.height }}>
{/* <Row> */} {/* <Row> */}
<div className={"main-color"} style={{ height: 199, width: '100%' }} /> <div className={"main-color"} style={{ height: 199, width: '100%' }} />
<div> {this.state.visibleParameter === true ?
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}> <div>
<label style={{ color: 'white', fontSize: 16, alignSelf: 'center' }}>Parameter</label> <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<div style={{ color: 'white', width: '50%', height: 37, display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center', borderRadius: 6, paddingLeft: 5, paddingRight: 5 }}> <label style={{ color: 'white', fontSize: 16, alignSelf: 'center' }}>Parameter</label>
<img src={Images.searchBlack} style={{ marginRight: 10 }} /> <div style={{ color: 'white', width: '50%', height: 37, display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center', borderRadius: 6, paddingLeft: 5, paddingRight: 5 }}>
<InputBase <img src={Images.searchBlack} style={{ marginRight: 10 }} />
style={{ width: '100%' }} <InputBase
placeholder="Search" style={{ width: '100%' }}
inputProps={{ 'aria-label': 'naked' }} placeholder="Search"
/> inputProps={{ 'aria-label': 'naked' }}
/>
</div>
<div style={{ width: '20%', justifyContent: 'space-around', display: 'flex' }}>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() => this.downloadFile()}
>
<img src={Images.template} />
</button>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() => this.setState({ visibleUpload: true })}
>
<img src={Images.upload} />
</button>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() => this.downloadDataTable()}
>
<img src={Images.download} />
</button>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent'
}}
onClick={() => this.setState({ visibleCreate: true })}
>
<img src={Images.add} />
</button>
</div>
</div>
<div style={{ padding: 25 }}>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
theme={getMuiTheme()}
data={this.state.dataTable}
columns={columns}
options={options}
/>
</MuiThemeProvider>
</div>
</div>
:
<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>
<div style={{ width: '20%', justifyContent: 'space-around', display: 'flex' }}> <div style={{ padding: 25 }}>
<img src={Images.template} /> {/* {this.state.dataLoaded && (
<img src={Images.upload} /> <MuiThemeProvider theme={getMuiTheme()}>
<img src={Images.download} /> <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 <button
style={{ type="button"
backgroundColor: 'transparent', onClick={() => this.setState({ visibleParameter: true })}
cursor: 'pointer', style={{ marginRight: 20 }}
borderColor: 'transparent'
}}
onClick={() => this.setState({ visibleCreate: true })}
> >
<img src={Images.add} /> <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.uploadParameter()}
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> </button>
</div> </div>
</div> </div>
<div style={{ padding: 25 }}> }
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
theme={getMuiTheme()}
data={data}
columns={columns}
options={options}
/>
</MuiThemeProvider>
</div>
</div>
{this.state.visibleCreate && ( {this.state.visibleCreate && (
<CreateParameter <CreateParameter
onClickClose={() => this.setState({ visibleCreate: false })} onClickClose={() => this.setState({ visibleCreate: false })}
createParameter={this.createParameter.bind(this)}
/> />
)} )}
{this.state.visibleEdit && ( {this.state.visibleEdit && (
<CreateParameter <CreateParameter
type={"edit"} type={"edit"}
onClickClose={() => this.setState({ visibleEdit: false })} onClickClose={() => this.setState({ visibleEdit: false })}
data={this.state.data} data={this.state.data[this.state.selectIndex]}
updateParameter={this.updateParameter.bind(this)}
/> />
)} )}
{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 }}>
<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' }}>Upload File</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.setState({ visibleUpload: false })}
>
<i className="fa fa-lg fa-times" style={{ color: 'white' }} />
</button>
</div>
</div>
<UploadFile
type={this.state.uploadStatus}
percentage={this.state.percentage}
result={this.state.result}
acceptedFiles={["pdf"]}
onHandle={(dt) => {
this.fileHandler(dt)
this.setState({ uploadStatus: 'idle', percentage: '0' })
}}
onUpload={() => this.setState({ visibleUpload: false, visibleParameter: false })}
/>
</div>
</div>
)}
</div> </div>
); );
} }
......
src/container/MasterData/formUnitBisnis/CreateUnitBisnis.js
View file @ 20709072
...@@ -78,7 +78,7 @@ export default class CreateUnitBisnis extends Component { ...@@ -78,7 +78,7 @@ export default class CreateUnitBisnis extends Component {
return ( return (
<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 }}>
<div className="popup-panel grid grid-2x" style={{ backgroundColor: '#51c6ea', height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}> <div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
<div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}> <div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
<div className="popup-title"> <div className="popup-title">
<span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Edit Data</span> <span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Edit Data</span>
......
src/container/Otorisasi/User/AddUser.js
View file @ 20709072
...@@ -119,7 +119,7 @@ export default class AddUser extends Component { ...@@ -119,7 +119,7 @@ export default class AddUser extends Component {
} }
getRole() { getRole() {
api.create().getRole().then((response) => { api.create().getRoleActive().then((response) => {
if(response.data.status === 'success') { if(response.data.status === 'success') {
let data = response.data.data let data = response.data.data
let roleData = data.map((item) => { let roleData = data.map((item) => {
......
src/container/Otorisasi/User/EditUser.js
View file @ 20709072
...@@ -154,7 +154,7 @@ export default class EditUser extends Component { ...@@ -154,7 +154,7 @@ export default class EditUser extends Component {
} }
getRole() { getRole() {
api.create().getRole().then((response) => { api.create().getRoleActive().then((response) => {
if(response.data.status === 'success') { if(response.data.status === 'success') {
let data = response.data.data let data = response.data.data
let roleData = data.map((item) => { let roleData = data.map((item) => {
......
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