Skip to content

T
Tia-dev
Commit b02b78db authored by Riri Novita's avatar Riri Novita
Browse files
Options

request md cat

parent 92380485
Hide whitespace changes
Inline Side-by-side
Showing with 3776 additions and 1 deletion
src/container/MasterData/MasterDataCAT/CreateMasterDataCAT.js 0 → 100644
View file @ b02b78db
import React, { Component } from 'react';
import { TextField, Typography, Snackbar, withStyles } from '@material-ui/core';
import * as R from 'ramda';
import api from '../../../api';
import Autocomplete from '@material-ui/lab/Autocomplete';
import { titleCase } from '../../../library/Utils';
import format from "date-fns/format";
import { DatePicker } from '@material-ui/pickers';
import Images from '../../../assets/Images';
import MuiAlert from '@material-ui/lab/Alert';
import Constant from '../../../library/Constant';
const Alert = withStyles({
})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
export default class CreateMasterDataCAT extends Component {
constructor(props) {
super(props)
this.state = {
InputType: null,
company: null,
parent: null,
reportType: null,
startDate: null,
endDate: null,
order: '',
description: '',
uom: '',
weight: '',
formula: '',
formulasum: '',
realVal: '',
condition: null,
date: new Date(),
listInputType: null,
listCompany: null,
listReportType: null,
listParent: null,
listKPI: null,
listMaxAch: null,
errorOrder: false,
errorDesc: false,
errorFormula: false,
errorRV: false,
errorStartDate: false,
errorEndDate: false,
errorTipeData: false,
errorCondition: false,
errorJenisLaporan: false,
errorPerusahaan: false,
msgErrorJenisLaporan: '',
msgErrorPerusahaan: '',
msgErrorTipeData: '',
msgErrorCondition: '',
msgErrorOrder: '',
msgErrorDesc: '',
msgErrorFormula: '',
msgErrorRV: '',
msgErrorSD: '',
msgErrorED: '',
disabledFormula: true,
disabledFormulaSum: true,
disabledCondt: true,
disabledValue: true,
options: ['WARNING', 'STOPPER'],
alert: false,
tipeAlert: '',
messageAlert: '',
kpiType: ['HIG', 'HIB'],
maxAch: ['50%', '100%', 'Unlimited'],
formulaYtd: ['SUM', 'AVG', 'LAST'],
kpiTypeValue: null,
maxAchValue: null,
formulaYTDValue: null,
kpiDisable: true,
maxAchDisable: true
}
}
componentDidMount() {
this.getInputType()
this.getPerusahaan()
this.getReportType()
// this.getParent()
let date = format(new Date, 'yyyy-MM-dd')
// console.log(date);
this.setState({
startDate: date,
endDate: date
})
}
handleChange(e, type) {
let data = this.state
let isDate = type !== '' ? true : false
if (isDate && type === 'start_date') {
this.setState({
...data, startDate: format(e, 'yyyy-MM-dd'), endDate: null,
errorOrder: false,
errorDesc: false,
errorFormula: false,
errorRV: false,
errorStartDate: false,
errorEndDate: false,
errorTipeData: false,
errorCondition: false,
msgErrorTipeData: '',
msgErrorCondition: '',
msgErrorOrder: '',
msgErrorDesc: '',
msgErrorFormula: '',
msgErrorRV: '',
msgErrorSD: '',
msgErrorED: '',
})
} else if (isDate && type === 'end_date') {
this.setState({
...data, endDate: format(e, 'yyyy-MM-dd'),
errorOrder: false,
errorDesc: false,
errorFormula: false,
errorRV: false,
errorStartDate: false,
errorEndDate: false,
errorTipeData: false,
errorCondition: false,
msgErrorTipeData: '',
msgErrorCondition: '',
msgErrorOrder: '',
msgErrorDesc: '',
msgErrorFormula: '',
msgErrorRV: '',
msgErrorSD: '',
msgErrorED: '',
})
} else {
this.setState({
...data, [e.target.name]: e.target.value,
errorOrder: false,
errorDesc: false,
errorFormula: false,
errorRV: false,
errorStartDate: false,
errorEndDate: false,
errorTipeData: false,
errorCondition: false,
msgErrorTipeData: '',
msgErrorCondition: '',
msgErrorOrder: '',
msgErrorDesc: '',
msgErrorFormula: '',
msgErrorRV: '',
msgErrorSD: '',
msgErrorED: '',
})
}
}
validasi() {
// alert('coba ya')
if (R.isNil(this.state.reportType)) {
this.setState({ errorJenisLaporan: true, msgErrorJenisLaporan: 'Report Type Cannot be Empty' })
} else if (R.isNil(this.state.company)) {
this.setState({ errorPerusahaan: true, msgErrorPerusahaan: 'Company Name Cannot be Empty' })
} else if (R.isEmpty(this.state.order)) {
this.setState({ errorOrder: true, msgErrorOrder: 'Order Cannot be Empty' })
}
else if (R.isEmpty(this.state.description)) {
this.setState({ errorDesc: true, msgErrorDesc: 'Description Cannot be Empty' })
}
else if (R.isNil(this.state.InputType)) {
this.setState({ errorTipeData: true, msgErrorTipeData: 'Data Type Cannot be Empty' })
}
else if (this.state.disabledFormula === false && R.isEmpty(this.state.formula)) {
this.setState({ errorFormula: true, msgErrorFormula: 'Formula Cannot be Empty' })
}
else if (this.state.disabledValue === false && R.isEmpty(this.state.realVal)) {
this.setState({ errorRV: true, msgErrorRV: 'True Value Cannot be Empty' })
}
else if (this.state.disabledCondt === false && R.isEmpty(this.state.condition)) {
this.setState({ errorCondition: true, msgErrorCondition: 'False Condition Cannot be Empty' })
}
else if (R.isNil(this.state.startDate)) {
this.setState({ errorStartDate: true, msgErrorSD: 'Valid From Cannot be Empty' })
}
else if (R.isNil(this.state.endDate)) {
this.setState({ errorEndDate: true, msgErrorED: 'Valid To Cannot be Empty' })
}
else {
this.addReportItems()
}
}
addReportItems() {
// alert("test")
let payload = {
"report_id": this.state.reportType.report_id,
"company_id": this.state.company.company_id,
"description": this.state.description,
"orders": this.state.order,
"parent": this.state.parent === null ? null : this.state.parent.item_report_id,
"type_report_id": this.state.InputType.type_item_report_id,
"formula": this.state.formula,
"uom": this.state.uom,
"weight": this.state.weight,
"condition_if_wrong": this.state.condition,
"condition_it_should_be": this.state.realVal,
"type_kpi": this.state.kpiTypeValue ? this.state.kpiTypeValue.value : null,
"max_ach": this.state.maxAchValue ? this.state.maxAchValue.value : null,
"formula_ytd": this.state.formulaYTDValue,
"start_date": this.state.startDate,
"end_date": this.state.endDate
}
// console.log(payload)
this.props.createReportItems(payload)
}
getKPIType() {
let body = {
group: 'CAT',
company_id: this.state.company.company_id,
type: 'KPI_TYPE'
}
api.create().getAllSettingByType(body).then(response => {
if (response.data) {
if (response.ok) {
if (response.data.status === 'success') {
let data = response.data.data
let inputKPI = data.map((item) => {
return {
value: item.value
}
})
let defaultProps = {
options: inputKPI,
getOptionLabel: (option) => titleCase(option.value),
};
this.setState({ listKPI: defaultProps, inputKPI: response.data.data })
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
// alert(response.data.message)
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
}
})
}
getMaxAch() {
let body = {
group: 'CAT',
company_id: this.state.company.company_id,
type: 'MAX_ACHIEVEMENT'
}
api.create().getAllSettingByType(body).then(response => {
if (response.data) {
if (response.ok) {
if (response.data.status === 'success') {
let data = response.data.data
let inputMaxAch = data.map((item) => {
return {
value: item.value
}
})
let defaultProps = {
options: inputMaxAch,
getOptionLabel: (option) => titleCase(option.value),
};
this.setState({ listMaxAch: defaultProps, inputMaxAch: response.data.data })
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
// alert(response.data.message)
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
}
})
}
getInputType() {
api.create().getInputType().then((response) => {
// console.log(response.data)
if (response.data) {
if (response.ok) {
if (response.data.status === 'success') {
let data = response.data.data
let inputData = data.map((item) => {
return {
type_item_report_id: item.type_item_report_id,
type_item_report_name: item.type_item_report_name
}
})
let defaultProps = {
options: inputData,
getOptionLabel: (option) => titleCase(option.type_item_report_name),
};
this.setState({ listInputType: defaultProps, inputData: response.data.data })
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
// alert(response.data.message)
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
}
})
}
getPerusahaan() {
api.create().getPerusahaanActive().then((response) => {
// console.log(response)
if (response.data) {
if (response.ok) {
if (response.data.status === 'success') {
let data = response.data.data
let companyData = data.map((item) => {
return {
company_id: item.company_id,
company_name: item.company_name
}
})
companyData.push({
company_id: 0,
company_name: 'Default'
})
let typeProps = {
options: companyData.sort((a, b) => a.company_id - b.company_id),
getOptionLabel: (option) => option.company_name,
};
this.setState({ listCompany: typeProps, companyData: response.data.data })
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
// alert(response.data.message)
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
}
})
}
getReportType() {
api.create().getReportType().then((response) => {
// console.log(response)
if (response.data) {
if (response.ok) {
if (response.data.status === 'success') {
let data = response.data.data
let reportTypeData = data.map((item) => {
return {
report_id: item.report_id,
report_name: item.report_name,
}
})
let defaultProps = {
options: reportTypeData,
getOptionLabel: (option) => titleCase(option.report_name),
};
this.setState({ listReportType: defaultProps, reportTypeData: response.data.data })
} else {
// alert(response.data.message)
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
}
})
}
getParent() {
if (this.state.reportType !== null && this.state.company !== null) {
let payload = {
"report_id": this.state.reportType.report_id,
"company_id": this.state.company.company_id
}
api.create().getReportParent(payload).then((response) => {
// console.log(response)
if (response.data) {
if (response.ok) {
if (response.data.status === 'success') {
let data = response.data.data
let parentData = data.map((item) => {
return {
item_report_id: item.item_report_id,
description: item.description
}
})
let defaultProps = {
options: parentData,
getOptionLabel: (option) => titleCase(option.description),
};
this.setState({ listParent: defaultProps, parentData: response.data.data })
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
// alert(response.data.message)
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
}
})
}
}
handleDate(item) {
let value = format(item, 'dd MMMM yyyy')
return value
}
clearMessage() {
this.setState({
errorFormula: false, msgErrorFormula: '',
errorTipeData: false,
errorCondition: false,
msgErrorTipeData: '',
msgErrorCondition: '',
errorRV: false, msgErrorRV: '',
errorJenisLaporan: false, msgErrorJenisLaporan: '',
errorPerusahaan: false, msgErrorPerusahaan: ''
})
}
closeAlert() {
this.setState({ alert: false })
}
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 main-color" style={{ 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' }}>Create 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()}
>
<img src={Images.close} />
</button>
</div>
</div>
<Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
<Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
{this.state.messageAlert}
</Alert>
</Snackbar>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1">
<div className="margin-top-10px" style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
value={'-'}
id="ID"
label="ID"
disabled
inputProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
}
}}
InputLabelProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085',
}
}}
/>
</div>
</div>
<div className="column-2">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<Autocomplete
{...this.state.listReportType}
id="reportType"
onChange={(event, newInputValue) => this.setState({ reportType: newInputValue, kpiDisable: true, maxAchDisable: true }, () => {
newInputValue == null || (newInputValue.report_name !== 'CAT') ? this.setState({ kpiTypeValue: null, maxAchValue: null, formulaYTDValue: null }, () => this.clearMessage())
: this.clearMessage();
})}
debug
renderInput={(params) =>
<TextField {...params}
label="Report Type"
InputLabelProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085'
}
}}
error={this.state.errorJenisLaporan}
helperText={this.state.msgErrorJenisLaporan}
InputProps={{ ...params.InputProps, style: { fontSize: 11, fontFamily: 'Nunito Sans, sans-serif' } }}
/>}
value={this.state.reportType}
/>
</div>
</div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }} >
<Autocomplete
{...this.state.listCompany}
id="company"
onChange={(event, newInputValue) => this.setState({ company: newInputValue, kpiDisable: false, maxAchDisable: false }, () => {
this.getParent()
this.clearMessage()
this.getKPIType()
this.getMaxAch()
})}
debug
renderInput={(params) =>
<TextField {...params}
label="Company Name"
InputLabelProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085'
}
}}
error={this.state.errorPerusahaan}
helperText={this.state.msgErrorPerusahaan}
InputProps={{ ...params.InputProps, style: { fontSize: 11, fontFamily: 'Nunito Sans, sans-serif' } }}
/>}
value={this.state.company}
/>
</div>
</div>
<div className="column-2">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
id="orders"
name="order"
label="Order"
type="number"
onChange={(e) => this.handleChange(e, null)}
value={this.state.order}
error={this.state.errorOrder}
helperText={this.state.msgErrorOrder}
inputProps={{
min: 0,
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
}
}}
InputLabelProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085',
}
}}
>
</TextField>
</div>
</div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
id="description"
label="Description"
name="description"
value={this.state.description}
error={this.state.errorDesc}
helperText={this.state.msgErrorDesc}
onChange={(e) => this.handleChange(e, '')}
// value={this.props.data.business_unit_name}
inputProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
}
}}
InputLabelProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085',
}
}}
>
</TextField>
</div>
</div>
<div className="column-2">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }} >
<Autocomplete
{...this.state.listParent}
id="parentId"
onChange={(event, newInputValue) => this.setState({ parent: newInputValue })}
debug
disabled={this.state.reportType == null || this.state.company == null}
renderInput={(params) =>
<TextField {...params}
label="Parent ID"
InputLabelProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085'
}
}}
InputProps={{ ...params.InputProps, style: { fontSize: 11, fontFamily: 'Nunito Sans, sans-serif' } }}
/>}
value={this.state.parent}
/>
</div>
</div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
id="uom"
name="uom"
label="UOM"
value={this.state.uom}
onChange={(e) => this.handleChange(e, '')}
inputProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
}
}}
InputLabelProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085',
}
}}
>
</TextField>
</div>
</div>
<div className="column-2">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
id="weight"
label="Weight"
name="weight"
value={this.state.weight}
onChange={(e) => this.handleChange(e, '')}
inputProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
}
}}
InputLabelProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085',
}
}}
>
</TextField>
</div>
</div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<Autocomplete
{...this.state.listInputType}
id="inputType"
onChange={(event, newInputValue) => this.setState({ InputType: newInputValue },
() => newInputValue === null ? this.setState({ disabledFormula: true, disabledCondt: true, disabledValue: true, formula: '', condition: '', realVal: '' })
: newInputValue.type_item_report_name === 'Formula' ?
this.setState({
disabledFormula: false,
disabledCondt: true,
disabledValue: true,
formula: '',
condition: '',
realVal: ''
}, () => this.clearMessage())
: newInputValue.type_item_report_name === 'Validation' ?
this.setState({
disabledFormula: false,
disabledCondt: false,
disabledValue: false,
formula: '',
condition: '',
realVal: ''
}, () => this.clearMessage())
: newInputValue.type_item_report_name === 'Formula - Summary' ?
this.setState({
disabledFormula: false,
disabledCondt: true,
disabledValue: true,
formula: '',
condition: '',
realVal: ''
}, () => this.clearMessage())
: this.setState({
disabledFormula: true,
disabledCondt: true,
disabledValue: true,
formula: '',
condition: '',
realVal: ''
}, () => this.clearMessage())
)}
debug
renderInput={(params) =>
<TextField {...params}
label="Data Type"
error={this.state.errorTipeData}
helperText={this.state.msgErrorTipeData}
InputLabelProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085'
}
}}
error={this.state.errorTipeData}
helperText={this.state.msgErrorTipeData}
InputProps={{ ...params.InputProps, style: { fontSize: 11, fontFamily: 'Nunito Sans, sans-serif' } }}
/>}
value={this.state.InputType}
/>
</div>
</div>
<div className="column-2">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
id="formula"
label="Formula"
name="formula"
disabled={this.state.disabledFormula}
value={this.state.formula}
error={this.state.errorFormula}
helperText={this.state.msgErrorFormula}
onChange={(e) => this.handleChange(e, '')}
inputProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
}
}}
InputLabelProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085',
}
}}
>
</TextField>
</div>
</div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
id="realVal"
label="True Value"
name="realVal"
disabled={this.state.disabledValue}
value={this.state.realVal}
error={this.state.errorRV}
helperText={this.state.msgErrorRV}
onChange={(e) => this.handleChange(e, '')}
inputProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
}
}}
InputLabelProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085',
}
}}
/>
</div>
</div>
<div className="column-2">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<Autocomplete
value={this.state.condition}
id="isWrongCondition"
disabled={this.state.disabledCondt}
onChange={(event, newValue) => {
this.setState({ condition: newValue }, () => this.clearMessage());
}}
options={this.state.options}
renderInput={(params) =>
<TextField {...params}
error={this.state.errorCondition}
helperText={this.state.msgErrorCondition}
label="False Condition"
InputLabelProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085'
}
}}
InputProps={{ ...params.InputProps, style: { fontSize: 11, fontFamily: 'Nunito Sans, sans-serif' } }}
/>}
/>
</div>
</div>
</div>
{this.state.reportType !== null && (
this.state.reportType.report_name === 'CAT' && (
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<Autocomplete
{...this.state.listKPI}
value={this.state.kpiTypeValue}
id="kpiType"
onChange={(event, newValue) => {
this.setState({ kpiTypeValue: newValue }, () => this.clearMessage());
}}
disabled={this.state.kpiDisable}
renderInput={(params) =>
<TextField {...params}
label="KPI Type"
InputLabelProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085'
}
}}
InputProps={{ ...params.InputProps, style: { fontSize: 11, fontFamily: 'Nunito Sans, sans-serif' } }}
/>}
/>
</div>
</div>
<div className="column-2">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<Autocomplete
{...this.state.listMaxAch}
value={this.state.maxAchValue}
id="maxAch"
onChange={(event, newValue) => {
this.setState({ maxAchValue: newValue }, () => this.clearMessage());
}}
disabled={this.state.maxAchDisable}
renderInput={(params) =>
<TextField {...params}
label="Max Achievement"
InputLabelProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085'
}
}}
InputProps={{ ...params.InputProps, style: { fontSize: 11, fontFamily: 'Nunito Sans, sans-serif' } }}
/>}
/>
</div>
</div>
</div>
))}
{this.state.reportType !== null && (
this.state.reportType.report_name === 'CAT' && (
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<Autocomplete
value={this.state.formulaYTDValue}
id="formulaYTD"
onChange={(event, newValue) => {
this.setState({ formulaYTDValue: newValue }, () => this.clearMessage());
}}
options={this.state.formulaYtd}
renderInput={(params) =>
<TextField {...params}
label="Formula YTD"
InputLabelProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085'
}
}}
InputProps={{ ...params.InputProps, style: { fontSize: 11, fontFamily: 'Nunito Sans, sans-serif' } }}
/>}
/>
</div>
</div>
</div>
))}
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<DatePicker
margin="normal"
id="startDate"
label="Valid From"
format="dd-MM-yyyy"
value={this.state.startDate == "" ? null : this.state.startDate}
error={this.state.errorStartDate}
helperText={this.state.msgErrorSD}
onChange={(e) => this.handleChange(e, 'start_date')}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
inputProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085',
fontFamily: 'Nunito Sans, sans-serif',
}
}}
style={{ padding: 0, margin: 0, width: '100%' }}
/>
</div>
</div>
<div className="column-2">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<DatePicker
margin="normal"
id="endDate"
label="Valid To"
format="dd-MM-yyyy"
value={this.state.endDate == "" ? null : this.state.endDate}
error={this.state.errorEndDate}
helperText={this.state.msgErrorED}
onChange={(e) => this.handleChange(e, 'end_date')}
minDate={this.state.startDate}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
inputProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085',
fontFamily: 'Nunito Sans, sans-serif',
}
}}
style={{ padding: 0, margin: 0, width: '100%' }}
/>
</div>
</div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1">
<div className="margin-top-10px" style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
defaultValue={"active"}
id="status"
label="Status"
disabled
inputProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
}
}}
InputLabelProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085',
}
}}
/>
</div>
</div>
</div>
<div className="margin-top-10px" style={{ paddingTop: 10, paddingBottom: 30, paddingRight: 30, paddingLeft: 30 }}>
<div style={{ display: 'flex' }}>
<Typography style={{ fontSize: 11, width: '13%' }}>Created By :</Typography>
{/* <Typography style={{ fontSize: 11 }}>: </Typography> */}
</div>
<div style={{ display: 'flex' }}>
<Typography style={{ fontSize: 11, width: '13%' }}>Updated By :</Typography>
{/* <Typography style={{ fontSize: 11 }}>: </Typography> */}
</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 }}>Cancel</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 }}>Save</span>
</div>
</button>
</div>
</div>
</div>
</div>
)
}
}
src/container/MasterData/MasterDataCAT/EditMasterDataCAT.js 0 → 100644
View file @ b02b78db
import React, { Component } from 'react';
import { TextField, Typography, withStyles, Snackbar } from '@material-ui/core';
import { DatePicker } from '@material-ui/pickers';
import format from "date-fns/format";
import Autocomplete from '@material-ui/lab/Autocomplete';
import MuiAlert from '@material-ui/lab/Alert';
import api from '../../../api';
import * as R from 'ramda'
import { titleCase } from '../../../library/Utils';
import Images from '../../../assets/Images';
import Constant from '../../../library/Constant';
const Alert = withStyles({
})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
export default class EditMasterDataCAT extends Component {
constructor(props) {
super(props)
this.state = {
tempData: null,
InputType: null,
company: null,
parent: null,
reportType: null,
startDate: null,
endDate: null,
order: null,
description: '',
uom: '',
weight: "",
formula: '',
realVal: '',
condition: null,
date: new Date(),
listInputType: null,
listCompany: null,
listReportType: null,
listParent: null,
listKPI: null,
listMaxAch: null,
MaxAchValue: null,
KPIValue: null,
errorOrder: false,
errorDesc: false,
errorFormula: false,
errorRV: false,
errorStartDate: false,
errorEndDate: false,
errorJenisLaporan: false,
errorPerusahaan: false,
msgErrorJenisLaporan: '',
msgErrorPerusahaan: '',
msgErrorOrder: '',
msgErrorDesc: '',
msgErrorFormula: '',
errorTipeData: false,
msgErrorTipeData: '',
errorCondition: false,
msgErrorCondition: '',
msgErrorRV: '',
msgErrorSD: '',
msgErrorED: '',
disabledFormula: true,
disabledCondt: true,
disabledValue: true,
options: ['WARNING', 'STOPPER'],
alert: false,
tipeAlert: '',
messageAlert: '',
kpiType: ['HIG', 'HIB'],
maxAch: ['50%', '100%', 'Unlimited'],
formulaYtd: ['SUM', 'AVG', 'LAST'],
kpiTypeValue: null,
maxAchValue: null,
formulaYTDValue: null
}
}
componentDidMount() {
this.getDetailReportItems();
}
handleChange(e, type) {
let data = this.state
let isDate = type !== '' ? true : false
if (isDate && type === 'start_date') {
this.setState({
...data, tempData: { ...this.state.tempData, start_date: format(e, 'yyyy-MM-dd'), end_date: null },
errorOrder: false,
errorDesc: false,
errorFormula: false,
errorRV: false,
errorStartDate: false,
errorEndDate: false,
msgErrorOrder: '',
msgErrorDesc: '',
msgErrorFormula: '',
msgErrorRV: '',
msgErrorSD: '',
msgErrorED: '',
})
} else if (isDate && type === 'end_date') {
this.setState({
...data, tempData: { ...this.state.tempData, end_date: format(e, 'yyyy-MM-dd') },
errorOrder: false,
errorDesc: false,
errorFormula: false,
errorRV: false,
errorStartDate: false,
errorEndDate: false,
msgErrorOrder: '',
msgErrorDesc: '',
msgErrorFormula: '',
msgErrorRV: '',
msgErrorSD: '',
msgErrorED: '',
})
} else {
this.setState({
...data, tempData: { ...this.state.tempData, [e.target.name]: e.target.value },
errorOrder: false,
errorDesc: false,
errorFormula: false,
errorRV: false,
errorStartDate: false,
errorEndDate: false,
msgErrorOrder: '',
msgErrorDesc: '',
msgErrorFormula: '',
msgErrorRV: '',
msgErrorSD: '',
msgErrorED: '',
})
}
}
validasi() {
// alert('coba ya')
if (R.isNil(this.state.reportType)) {
this.setState({ errorJenisLaporan: true, msgErrorJenisLaporan: 'Report Type Cannot be Empty' })
} else if (R.isNil(this.state.company)) {
this.setState({ errorPerusahaan: true, msgErrorPerusahaan: 'Company Name Cannot be Empty' })
} else if (R.isEmpty(this.state.tempData.order)) {
this.setState({ errorOrder: true, msgErrorOrder: 'Order Cannot be Empty' })
} else if (R.isEmpty(this.state.tempData.description)) {
this.setState({ errorDesc: true, msgErrorDesc: 'Description Cannot be Empty' })
} else if (R.isNil(this.state.InputType)) {
this.setState({ errorTipeData: true, msgErrorTipeData: 'Data Type Cannot be Empty' })
} else if ((this.state.InputType.type_item_report_name === 'Formula' && R.isEmpty(this.state.tempData.formula)) || (this.state.InputType.type_item_report_name === 'Validation' && R.isEmpty(this.state.tempData.formula))) {
this.setState({ errorFormula: true, msgErrorFormula: 'Formula Cannot be Empty' })
} else if (this.state.InputType.type_item_report_name === 'Validation' && R.isEmpty(this.state.tempData.condition_it_should_be)) {
this.setState({ errorRV: true, msgErrorRV: 'True Value Cannot be Empty' })
} else if (this.state.InputType.type_item_report_name === 'Validation' && R.isNil(this.state.tempData.condition_if_wrong)) {
this.setState({ errorCondition: true, msgErrorCondition: 'False Condition Cannot be Empty' })
} else if (R.isNil(this.state.tempData.start_date)) {
this.setState({ errorStartDate: true, msgErrorSD: 'Valid From Cannot be Empty' })
} else if (R.isNil(this.state.tempData.end_date)) {
this.setState({ errorEndDate: true, msgErrorED: 'Valid To Cannot be Empty' })
} else {
this.updateReportItems()
}
}
updateReportItems() {
// alert('test')
let payload = {
"item_report_id": this.state.tempData.item_report_id,
"report_id": this.state.reportType == null ? this.state.tempData.report_id : this.state.reportType.report_id,
"company_id": this.state.company == null ? this.state.tempData.company_id : this.state.company.company_id,
"description": this.state.tempData.description,
"orders": this.state.tempData.order,
"parent": this.state.parent == null ? null : this.state.parent.item_report_id,
"type_report_id": this.state.InputType == null ? this.state.tempData.type_item_report_id : this.state.InputType.type_item_report_id,
"formula": this.state.tempData.formula,
"uom": this.state.tempData.uom,
"weight": this.state.tempData.weight == null ? "" : this.state.tempData.weight,
"condition_if_wrong": this.state.tempData.condition_if_wrong,
"condition_it_should_be": this.state.tempData.condition_it_should_be,
"type_kpi": this.state.tempData.kpi_type,
"max_ach": this.state.tempData.max_ach,
"formula_ytd": this.state.tempData.formula_ytd,
"start_date": this.state.tempData.start_date,
"end_date": this.state.tempData.end_date
}
// console.log(payload)
this.props.updateReportItems(payload)
}
getDetailReportItems() {
api.create().getDetailReportItems(this.props.data[1]).then((response) => {
if (response.data) {
if (response.ok) {
if (response.data.status === 'success') {
let data = response.data.data
this.setState({
tempData: response.data.data,
getCompanyID: data.company_id
}, () => this.getInputType(),
this.getPerusahaan(),
this.getReportType())
// console.log(response.data.data)
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
}
})
}
getInputType() {
api.create().getInputType().then((response) => {
// console.log(response)
if (response.data) {
if (response.ok) {
if (response.data.status === 'success') {
let data = response.data.data
let inputData = data.map((item) => {
return {
type_item_report_id: item.type_item_report_id,
type_item_report_name: item.type_item_report_name
}
})
let defaultProps = {
options: inputData,
getOptionLabel: (option) => titleCase(option.type_item_report_name),
};
let index = inputData.findIndex((val) => val.type_item_report_id === this.state.tempData.type_item_report_id)
this.setState({ listInputType: defaultProps, InputType: index === -1 ? null : inputData[index] })
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
}
})
}
getPerusahaan() {
api.create().getPerusahaanActive().then((response) => {
// console.log(response)
if (response.data) {
if (response.ok) {
if (response.data.status === 'success') {
let data = response.data.data
let companyData = data.map((item) => {
return {
company_id: item.company_id,
company_name: item.company_name
}
})
companyData.push({
company_id: 0,
company_name: 'Default'
})
let index = companyData.sort((a, b) => a.company_id - b.company_id).findIndex((val) => val.company_id == this.state.getCompanyID)
let defaultProps = {
options: companyData,
getOptionLabel: (option) => option.company_name,
};
// let index = companyData.findIndex((val) => val.company_id === this.state.tempData.company_id)
this.setState({ listCompany: defaultProps, companyData: response.data.data, company: index === -1 ? null : companyData[index], msgErrorPerusahaan: index === -1 ? 'Company has been Inactive.' : "", errorPerusahaan: index === -1 ? true : false }, () => {
this.getParent()
this.getKPIType()
this.getMaxAch()
})
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
}
})
}
getKPIType() {
let body = {
group: 'CAT',
company_id: this.state.company.company_id,
type: 'KPI_TYPE'
}
api.create().getAllSettingByType(body).then(response => {
if (response.data) {
if (response.ok) {
if (response.data.status === 'success') {
let data = response.data.data
let inputKPI = data.map((item) => {
return {
value: item.value
}
})
let defaultProps = {
options: inputKPI,
getOptionLabel: (option) => titleCase(option.value),
};
let index = inputKPI.findIndex((val) => val.value === this.state.tempData.kpi_type)
this.setState({ listKPI: defaultProps, inputKPI: response.data.data, KPIValue: index === -1 ? null : inputKPI[index]})
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
// alert(response.data.message)
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
}
})
}
getMaxAch() {
let body = {
group: 'CAT',
company_id: this.state.company.company_id,
type: 'MAX_ACHIEVEMENT'
}
api.create().getAllSettingByType(body).then(response => {
if (response.data) {
if (response.ok) {
if (response.data.status === 'success') {
let data = response.data.data
let inputMaxAch = data.map((item) => {
return {
value: item.value
}
})
let defaultProps = {
options: inputMaxAch,
getOptionLabel: (option) => titleCase(option.value),
};
let index = inputMaxAch.findIndex((val) => val.value === this.state.tempData.max_ach)
this.setState({ listMaxAch: defaultProps, inputMaxAch: response.data.data, MaxAchValue: index === -1 ? null : inputMaxAch[index] })
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
// alert(response.data.message)
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
}
})
}
getReportType() {
api.create().getReportType().then((response) => {
// console.log(response)
if (response.data) {
if (response.ok) {
if (response.data.status === 'success') {
let data = response.data.data
let reportTypeData = data.map((item) => {
return {
report_id: item.report_id,
report_name: item.report_name,
}
})
let defaultProps = {
options: reportTypeData,
getOptionLabel: (option) => titleCase(option.report_name),
};
let index = reportTypeData.findIndex((val) => val.report_id === this.state.tempData.report_id)
this.setState({ listReportType: defaultProps, reportType: index === -1 ? null : reportTypeData[index] }, () => this.getParent())
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
}
})
}
getParent() {
if (this.state.reportType !== null && this.state.company !== null) {
// console.log(this.state.tempData.item_report_id)
let payload = {
"report_id": this.state.reportType.report_id,
"company_id": this.state.company.company_id
}
api.create().getReportParent(payload).then((response) => {
// console.log(response)
if (response.data) {
if (response.ok) {
if (response.data.status === 'success') {
let data = response.data.data
let currentIndex = null
let parentData = data.map((item, index) => {
if (this.state.tempData.item_report_id !== item.item_report_id) {
return {
item_report_id: item.item_report_id,
description: item.description
}
} else {
currentIndex = index
}
})
if (currentIndex !== null) {
parentData.splice(currentIndex, 1)
}
// console.log(parentData)
let defaultProps = {
options: parentData,
getOptionLabel: (option) => titleCase(option.description),
};
let index = parentData.findIndex((val) => val.item_report_id === this.state.tempData.parent)
this.setState({ listParent: defaultProps, parent: index == -1 ? null : parentData[index] })
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
}
})
}
}
clearMessage() {
this.setState({
errorFormula: false, msgErrorFormula: '',
errorTipeData: false, msgErrorTipeData: '',
errorCondition: false, msgErrorCondition: '',
errorRV: false, msgErrorRV: '',
errorJenisLaporan: false, msgErrorJenisLaporan: '',
errorPerusahaan: false, msgErrorPerusahaan: ''
})
}
closeAlert() {
this.setState({ alert: false })
}
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 main-color" style={{ 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' }}>Edit 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()}
>
<img src={Images.close} />
</button>
</div>
</div>
<Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
<Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
{this.state.messageAlert}
</Alert>
</Snackbar>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1">
<div className="margin-top-10px" style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
value={this.state.tempData === null ? '' : this.state.tempData.item_report_id}
id="ID"
label="ID"
disabled
onChange={(e) => null}
inputProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif'
}
}}
InputLabelProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085'
}
}}
/>
</div>
</div>
<div className="column-2">
<div className="margin-top-10px" style={{ padding: 10 }}>
<Autocomplete
{...this.state.listReportType}
id="reportType"
onChange={(event, newInputValue) => this.setState({ reportType: newInputValue }, () =>
newInputValue == null || (newInputValue.report_name !== 'CAT') ? this.setState({ tempData: { ...this.state.tempData, kpi_type: null, max_ach: null, formula_ytd: null } }, () => this.getParent(), this.clearMessage())
: this.getParent(), this.clearMessage()
)}
debug
renderInput={(params) =>
<TextField {...params}
label="Report Type"
InputLabelProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085'
}
}}
error={this.state.errorJenisLaporan}
helperText={this.state.msgErrorJenisLaporan}
InputProps={{ ...params.InputProps, style: { fontSize: 11, fontFamily: 'Nunito Sans, sans-serif' } }}
/>}
value={this.state.reportType}
/>
</div>
</div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1">
<div className="margin-top-10px" style={{ padding: 10 }} >
<Autocomplete
{...this.state.listCompany}
id="company"
onChange={(event, newInputValue) => this.setState({ company: newInputValue }, () => this.getParent(), this.clearMessage())}
debug
renderInput={(params) =>
<TextField {...params}
label="Company Name"
InputLabelProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085'
}
}}
error={this.state.errorPerusahaan}
helperText={this.state.msgErrorPerusahaan}
InputProps={{ ...params.InputProps, style: { fontSize: 11, fontFamily: 'Nunito Sans, sans-serif' } }}
/>}
value={this.state.company}
/>
</div>
</div>
<div className="column-2">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
id="order"
label="Order"
name="order"
type="number"
value={this.state.tempData === null ? '' : this.state.tempData.order}
error={this.state.errorOrder}
helperText={this.state.msgErrorOrder}
onChange={(e) => this.handleChange(e, '')}
inputProps={{
min: 0,
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif'
}
}}
InputLabelProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085'
}
}}
>
</TextField>
</div>
</div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
id="description"
label="Description"
name="description"
error={this.state.errorDesc}
helperText={this.state.msgErrorDesc}
onChange={(e) => this.handleChange(e, '')}
value={this.state.tempData === null ? '' : this.state.tempData.description}
inputProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif'
}
}}
InputLabelProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085'
}
}}
>
</TextField>
</div>
</div>
<div className="column-2">
<div className="margin-top-10px" style={{ padding: 10 }} >
<Autocomplete
{...this.state.listParent}
id="parentId"
onChange={(event, newInputValue) => this.setState({ parent: newInputValue })}
disabled={this.state.reportType == null || this.state.company == null}
debug
renderInput={(params) =>
<TextField {...params}
label="Parent ID"
InputLabelProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085'
}
}}
InputProps={{ ...params.InputProps, style: { fontSize: 11, fontFamily: 'Nunito Sans, sans-serif' } }}
/>}
value={this.state.parent}
/>
</div>
</div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
id="uom"
label="UOM"
name="uom"
onChange={(e) => this.handleChange(e, '')}
value={this.state.tempData === null ? '' : this.state.tempData.uom}
inputProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif'
}
}}
InputLabelProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085'
}
}}
>
</TextField>
</div>
</div>
<div className="column-2">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
id="weight"
label="Weight"
name="weight"
onChange={(e) => this.handleChange(e, '')}
value={this.state.tempData === null ? '' : this.state.tempData.weight}
inputProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif'
}
}}
InputLabelProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085'
}
}}
>
</TextField>
</div>
</div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1">
<div className="margin-top-10px" style={{ padding: 10 }}>
<Autocomplete
{...this.state.listInputType}
id="inputType"
onChange={(event, newInputValue) =>
this.setState({
InputType: newInputValue,
tempData: { ...this.state.tempData, formula: '', condition_it_should_be: '', condition_if_wrong: '' },
},
() => console.log(this.state.InputType), this.clearMessage())}
debug
renderInput={(params) =>
<TextField {...params}
label="Data Type"
InputLabelProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085'
}
}}
error={this.state.errorTipeData}
helperText={this.state.msgErrorTipeData}
InputProps={{ ...params.InputProps, style: { fontSize: 11, fontFamily: 'Nunito Sans, sans-serif' } }}
/>}
value={this.state.InputType}
/>
</div>
</div>
<div className="column-2">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
id="formula"
label="Formula"
disabled={this.state.InputType == null ? true : (this.state.InputType.type_item_report_name === 'Formula' || this.state.InputType.type_item_report_name === 'Validation' || this.state.InputType.type_item_report_name === 'Formula - Summary' ? false : true)}
name="formula"
error={this.state.errorFormula}
helperText={this.state.msgErrorFormula}
onChange={(e) => this.handleChange(e, '')}
value={this.state.tempData === null ? '' : this.state.tempData.formula}
inputProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif'
}
}}
InputLabelProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085'
}
}}
>
</TextField>
</div>
</div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1">
<div className="margin-top-10px" style={{ padding: 10 }}>
<TextField
style={{ width: '100%' }}
id="condition_it_should_be"
label="True Value"
error={this.state.errorRV}
helperText={this.state.msgErrorRV}
disabled={this.state.InputType == null ? true : (this.state.InputType.type_item_report_name === 'Validation' ? false : true)}
name="condition_it_should_be"
onChange={(e) => this.handleChange(e, '')}
value={this.state.tempData === null ? '' : this.state.tempData.condition_it_should_be}
inputProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif'
}
}}
InputLabelProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085'
}
}}
/>
</div>
</div>
<div className="column-2">
<div className="margin-top-10px" style={{ padding: 10 }}>
<Autocomplete
value={this.state.tempData === null ? "" : this.state.tempData.condition_if_wrong}
id="isWrongCondition"
disabled={this.state.InputType == null ? true : (this.state.InputType.type_item_report_name === 'Validation' ? false : true)}
onChange={(event, newValue) => {
this.setState({ tempData: { ...this.state.tempData, condition_if_wrong: newValue } }, () => this.clearMessage());
}}
options={this.state.options}
renderInput={(params) =>
<TextField {...params}
label="False Condition"
InputLabelProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085'
}
}}
error={this.state.errorCondition}
helperText={this.state.msgErrorCondition}
InputProps={{ ...params.InputProps, style: { fontSize: 11, fontFamily: 'Nunito Sans, sans-serif' } }}
/>}
/>
</div>
</div>
</div>
{this.state.reportType !== null && (
this.state.reportType.report_name === 'CAT' && (
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<Autocomplete
{...this.state.listKPI}
value={this.state.KPIValue}
id="kpiType"
onChange={(event, newValue) => {
this.setState({ tempData: { ...this.state.tempData, kpi_type: newValue.value }, KPIValue: newValue }, () => this.clearMessage());
}}
renderInput={(params) =>
<TextField {...params}
label="KPI Type"
InputLabelProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085'
}
}}
InputProps={{ ...params.InputProps, style: { fontSize: 11, fontFamily: 'Nunito Sans, sans-serif' } }}
/>}
/>
</div>
</div>
<div className="column-2">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<Autocomplete
{...this.state.listMaxAch}
value={this.state.MaxAchValue}
id="maxAch"
onChange={(event, newValue) => {
this.setState({ tempData: { ...this.state.tempData, max_ach: newValue.value }, MaxAchValue: newValue }, () => this.clearMessage());
}}
renderInput={(params) =>
<TextField {...params}
label="Max Achievement"
InputLabelProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085'
}
}}
InputProps={{ ...params.InputProps, style: { fontSize: 11, fontFamily: 'Nunito Sans, sans-serif' } }}
/>}
/>
</div>
</div>
</div>
))}
{this.state.reportType !== null && (
this.state.reportType.report_name === 'CAT' && (
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<Autocomplete
value={this.state.tempData === null ? "" : this.state.tempData.formula_ytd}
id="kpiType"
onChange={(event, newValue) => {
this.setState({ tempData: { ...this.state.tempData, formula_ytd: newValue } }, () => this.clearMessage());
}}
options={this.state.formulaYtd}
renderInput={(params) =>
<TextField {...params}
label="Formula YTD"
InputLabelProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085'
}
}}
InputProps={{ ...params.InputProps, style: { fontSize: 11, fontFamily: 'Nunito Sans, sans-serif' } }}
/>}
/>
</div>
</div>
</div>
))}
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<DatePicker
margin="normal"
id="startDate"
label="Valid From"
format="dd-MM-yyyy"
value={this.state.tempData === null ? null : this.state.tempData.start_date}
error={this.state.errorStartDate}
helperText={this.state.msgErrorSD}
onChange={(e) => this.handleChange(e, 'start_date')}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
inputProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085',
fontFamily: 'Nunito Sans, sans-serif',
}
}}
style={{ padding: 0, margin: 0, width: '100%' }}
/>
</div>
</div>
<div className="column-2">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<DatePicker
margin="normal"
id="endDate"
label="Valid To"
format="dd-MM-yyyy"
value={this.state.tempData === null ? null : this.state.tempData.end_date}
error={this.state.errorEndDate}
helperText={this.state.msgErrorED}
minDate={this.state.tempData === null ? null : this.state.tempData.start_date}
onChange={(e) => this.handleChange(e, 'end_date')}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
inputProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085',
fontFamily: 'Nunito Sans, sans-serif',
}
}}
style={{ padding: 0, margin: 0, width: '100%' }}
/>
</div>
</div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1">
<div className="margin-top-10px" style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
value={this.state.tempData === null ? '' : this.state.tempData.status}
id="status"
label="Status"
disabled
inputProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif'
}
}}
InputLabelProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085'
}
}}
/>
</div>
</div>
</div>
<div className="margin-top-10px" style={{ paddingTop: 10, paddingBottom: 30, paddingRight: 30, paddingLeft: 30 }}>
<div style={{ display: 'flex' }}>
<Typography style={{ fontSize: 11, width: '12%' }}>Created By</Typography>
<Typography style={{ fontSize: 11 }}>: {this.state.tempData === null ? "" : this.state.tempData.created}</Typography>
</div>
<div style={{ display: 'flex' }}>
<Typography style={{ fontSize: 11, width: '12%' }}>Updated By</Typography>
<Typography style={{ fontSize: 11 }}>: {this.state.tempData === null ? "" : this.state.tempData.updated}</Typography>
</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 }}>Cancel</span>
</div>
</button>
</div>
<div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
<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 }}>Save</span>
</div>
</button>
</div>
</div>
</div>
</div>
)
}
}
src/container/MasterData/MasterDataCAT/MasterDataCAT.js 0 → 100644
View file @ b02b78db
import React, { Component } from "react";
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import Images from "../../../assets/Images";
import MUIDataTable from "mui-datatables";
import { InputBase, Snackbar, Tooltip, withStyles } from "@material-ui/core";
import { ExcelRenderer } from 'react-excel-renderer';
import UploadFile from "../../../library/Upload";
import MuiAlert from '@material-ui/lab/Alert';
import CreateMasterDataCAT from "./CreateMasterDataCAT";
import EditMasterDataCAT from "./EditMasterDataCAT";
import VisualMasterDataCAT from "./VisualMasterDataCAT";
import api from '../../../api';
import ReactTooltip from "react-tooltip";
import PopUpFailedSave from "../../../library/PopUpFailedSave";
import Constant from "../../../library/Constant";
import PopUpDelete from "../../../library/PopUpDelete";
import { css } from "@emotion/core";
import PropagateLoader from "react-spinners/PropagateLoader"
const LightTooltip = withStyles((theme) => ({
tooltip: {
backgroundColor: theme.palette.common.white,
color: 'rgba(0, 0, 0, 0.87)',
boxShadow: theme.shadows[1],
fontSize: 11,
},
}))(Tooltip);
var ct = require("../../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptions();
const options2 = ct.customOptions2();
const Alert = withStyles({
})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
export default class MasterDataCAT extends Component {
constructor(props) {
super(props)
this.state = {
dataTable: [],
listData: [],
data: [],
search: "",
itemReport: true,
visualisasi: false,
add: false,
edit: false,
dataLoaded: false,
cols: null,
rows: null,
popupError: false,
alert: false,
tipeAlert: '',
messageAlert: '',
buttonCreate: false,
buttonEdit: false,
buttonDelete: false,
load: false,
judul: '',
reportNameDelete: '',
visibleDelete: false,
invalidTemplate: false,
loading: false
}
this.myRef = React.createRef()
this.fileHandler = this.fileHandler.bind(this);
}
fileHandler = (event) => {
let fileObj = event
ExcelRenderer(fileObj, (err, resp) => {
// console.log(resp)
if (err) {
console.log(err);
}
else {
let isi = resp.rows.slice(3)
let payload = []
isi.map((item, index) => {
if (item.length > 0) {
payload.push({
id: index + 1,
report: item[0] === undefined ? "" : item[0],
company: item[1] === undefined ? "" : item[1],
orders: item[2] === undefined ? "" : item[2],
description: item[3] === undefined ? "" : item[3],
parent: item[4] === undefined ? 0 : item[4],
uom: item[5] === undefined ? "" : item[5],
weight: item[6] === undefined ? "" : item[6],
type_report: item[7] === undefined ? "" : item[7],
formula: item[8] === undefined ? "" : item[8],
condition_it_should_be: item[9] === undefined ? "" : item[9],
condition_if_wrong: item[10] === undefined ? "" : item[10],
kpi_type: item[11] === undefined ? "" : item[11],
max_ach: item[12] === undefined ? "" : item[12],
formula_ytd: item[13] === undefined ? "" : item[13],
start_date: item[14] === undefined ? "" : item[14],
end_date: item[15] === undefined ? "" : item[15],
})
}
})
let body = {
item_report: payload
}
if (resp.rows[2].length !== 16) {
this.setState({ invalidTemplate: true })
} else {
this.setState({ invalidTemplate: false })
}
console.log(resp.rows[1])
this.setState({ payload: body, buttonError: false, judul: resp.rows[1][0] })
}
});
}
checkUpload() {
api.create().checkUploadReportItems(this.state.payload).then(response => {
console.log(response)
let dataRow = []
if (response.data) {
if (response.ok) {
if (response.data.status === "success") {
dataRow = response.data.data.map((item, index) => {
return [
item.report,
item.company,
item.orders,
item.description,
item.parent,
item.uom,
item.weight,
item.type_report,
item.formula,
item.condition_it_should_be,
item.condition_if_wrong,
item.kpi_type,
item.max_ach,
item.formula_ytd,
item.start_date,
item.end_date,
item.error
]
})
let columns = [
{
name: "Report Type",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[16] != null) {
check = tableMeta.rowData[16].findIndex((val) => val.field.includes('report_type'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ?
<LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
}
</div >
);
}
}
},
{
name: "Company Name",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[16] != null) {
check = tableMeta.rowData[16].findIndex((val) => val.field.includes('company'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ?
<LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
}
</div >
);
}
}
},
{
name: "Order",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[16] != null) {
check = tableMeta.rowData[16].findIndex((val) => val.field.includes('orders'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ?
<LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === null ? "Empty" : val}</span>
}
</div >
);
}
}
},
{
name: "Description",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[16] != null) {
check = tableMeta.rowData[16].findIndex((val) => val.field.includes('description'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ?
<LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
}
</div >
);
}
}
},
{
name: "Parent ID",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[16] != null) {
check = tableMeta.rowData[16].findIndex((val) => val.field.includes('parent'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ?
<LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
</div >
);
}
}
},
{
name: "UOM",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[16] != null) {
check = tableMeta.rowData[16].findIndex((val) => val.field.includes('uom'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ?
<LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
</div >
);
}
}
},
{
name: "Weight",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[16] != null) {
check = tableMeta.rowData[16].findIndex((val) => val.field.includes('weight'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ?
<LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
</div >
);
}
}
},
{
name: "Data Type",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[16] != null) {
check = tableMeta.rowData[16].findIndex((val) => val.field.includes('type_report'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ?
<LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
}
</div >
);
}
}
},
{
name: "Formula",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[16] != null) {
check = tableMeta.rowData[16].findIndex((val) => val.field.includes('formula'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ?
<LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
</div >
);
}
}
},
{
name: "True Value",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[16] != null) {
check = tableMeta.rowData[16].findIndex((val) => val.field.includes('condition_it_should_be'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ?
<LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
</div >
);
}
}
},
{
name: "False Condition",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[16] != null) {
check = tableMeta.rowData[16].findIndex((val) => val.field.includes('condition_if_wrong'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ?
<LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
</div >
);
}
}
},
{
name: "KPI Type",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[16] != null) {
check = tableMeta.rowData[16].findIndex((val) => val.field.includes('kpi_type'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ?
<LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
</div >
);
}
}
},
{
name: "Max Achievement",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[16] != null) {
check = tableMeta.rowData[16].findIndex((val) => val.field.includes('max_ach'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ?
<LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
</div >
);
}
}
},
{
name: "Formula YTD",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[16] != null) {
check = tableMeta.rowData[16].findIndex((val) => val.field.includes('formula_ytd'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ?
<LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
</div >
);
}
}
},
{
name: "Valid From",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[16] != null) {
check = tableMeta.rowData[16].findIndex((val) => val.field.includes('start_date'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ?
<LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
}
</div >
);
}
}
},
{
name: "Valid To",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[16] != null) {
check = tableMeta.rowData[16].findIndex((val) => val.field.includes('end_date'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ?
<LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
}
</div >
);
}
}
},
{
name: "",
options: {
display: false
}
}
]
// console.log(dataRow);
this.setState({
dataLoaded: true,
cols: columns,
rows: dataRow, visibleUpload: false,
itemReport: false
});
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
} else {
this.setState({
dataLoaded: false,
alert: true, messageAlert: response.problem, tipeAlert: 'error'
});
}
})
}
componentDidMount() {
this.getData()
this.getPermission()
}
getPermission() {
let payload = {
menu: "report items"
}
api.create().getPermission(payload).then(response => {
// console.log(response)
if (response.data) {
if (response.data.status === "success") {
this.setState({
buttonCreate: response.data.data.create,
buttonEdit: response.data.data.edit,
buttonDelete: response.data.data.delete,
load: true
})
} else {
this.setState({ load: true })
}
}
})
}
getData() {
this.setState({ loading: true })
api.create().getReportItems().then((response) => {
// console.log(response)
if (response.data) {
if (response.ok) {
if (response.data.status == 'success') {
let data = response.data.data
let listData = data.sort((a, b) => a.item_report_id - b.item_report_id).map((item, index) => {
return [
index,
item.item_report_id,
item.report_name,
item.company_name,
item.order,
item.description,
item.parent !== null ? `${item.parent} - ${item.parent_name}` : "" ,
item.uom,
item.weight,
item.type_item_report_name,
item.kpi_type,
item.max_ach,
item.formula_ytd,
item.status]
})
this.setState({ dataTable: listData, listData: response.data.data }, () => {
setTimeout(() => {
this.setState({ loading: false })
}, 2000);
})
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning', loading: false }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error', loading: false })
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error', loading: false })
}
})
}
deleteReport(payload) {
// console.log(payload);
let id = String(payload[1])
api.create().deleteReportItems(id).then(response => {
if (response.data) {
if (response.ok) {
if (response.data.status === "success") {
this.getData()
this.setState({ visibleDelete: false, alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
}
})
}
openPopUp(index, type) {
if (type === 'edit') {
this.setState({
rowData: index,
edit: true
})
} else if (type === 'delete') {
this.setState({
rowData: index,
reportNameDelete: "[" + String(index[2]) + " - " + String(index[3]) + " - " + String(index[5]) + "]",
visibleDelete: true
})
} else {
this.setState({
add: true
})
}
}
handleInputChange(e) {
this.setState({ search: e })
let body = {
"keyword": e
}
api.create().searchReportItems(body).then(response => {
// console.log(response.data);
if (response.data) {
if (response.ok) {
if (response.data.status == 'success') {
let data = response.data.data
let listData = data.map((item, index) => {
return [index, item.item_report_id, item.report_name, item.company_name, item.order, item.description, item.parent, item.uom, item.weight, item.type_item_report_name, item.status]
})
this.setState({ dataTable: listData, listData: response.data.data })
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
}
})
}
createReportItems = (payload) => {
this.setState({ add: false })
api.create().createReportItems(payload).then(response => {
// console.log(response);
if (response.data) {
if (response.ok) {
if (response.data.status == 'success') {
this.getData()
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
}
})
}
downloadFile = async () => {
let res = await fetch(
`${process.env.REACT_APP_URL_MAIN_BE}/public/attachment/download_file?fileName=ItemReportTemplate&&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 Report Item.xlsx';
a.click();
}
}
downloadDataTable = async () => {
let res = await fetch(
`${process.env.REACT_APP_URL_MAIN_BE}/public/item_report/export_item_report`
)
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 = 'Report Items.xlsx';
a.click();
}
}
updateReportItems = (payload) => {
this.setState({ edit: false })
api.create().updateReportItems(payload).then(response => {
if (response.data) {
if (response.ok) {
if (response.data.status == 'success') {
this.getData()
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
}
})
}
uploadReportItems() {
api.create().uploadReportItems(this.state.payload).then(response => {
if (response.data) {
if (response.ok) {
if (response.data.status === "success") {
// alert(response.data.message)
this.getData()
this.setState({ itemReport: true, alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
}
})
}
closeAlert() {
this.setState({ alert: false })
}
scrollToMyRef = () => window.scrollTo(0, this.myRef.current.offsetTop)
render() {
const columns = [{
name: "Action",
options: {
sort: false,
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
{this.state.buttonEdit &&
<span>
<a data-tip={'Edit'} data-for="edit">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent'
}}
onClick={() => this.openPopUp(tableMeta.rowData, 'edit')}
>
<img src={Images.editCopy} />
</button>
</a>
<ReactTooltip border={true} id="edit" place="bottom" type="light" effect="solid" />
</span>
}
{this.state.buttonDelete &&
<span>
<a data-tip={'Delete'} data-for="delete">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginLeft: 15
}}
// onClick={() => console.log(tableMeta)}
onClick={() => this.openPopUp(tableMeta.rowData, 'delete')}
>
<img src={Images.delete} />
</button>
</a>
<ReactTooltip border={true} id="delete" place="bottom" type="light" effect="solid" />
</span>
}
</div >
);
}
}
},
{
name: "ID",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[13] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div >
);
}
}
},
{
name: "Item Report Name",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[13] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div >
);
}
}
},
{
name: "Company Name",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[13] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div >
);
}
}
},
{
name: "Report Name",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[13] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div >
);
}
}
},
{
name: "Weight",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[13] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div >
);
}
}
},
{
name: "Year",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[13] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div >
);
}
}
},
{
name: "Status",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[13] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div >
);
}
}
}
]
const data = [
["", "1", "KPI", "TIA", "1", "Financial Perspective", "0", "-", "35%", "Formula", "Aktif"],
["", "2", "KPI", "TIA", "2", "Trading Profit", "1", "Rp Bio", "35%", "Formula", "Aktif"],
["", "3", "KPI", "TIA", "3", "Revenue", "1", "Rp Bio", "0%", "Formula", "Aktif"],
["", "4", "KPI", "TIA", "4", "EBITDA", "1", "Rp Bio", "0%", "Formula", "Non Aktif"],
["", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-"],
]
const loadingComponent = (
<div style={{ position: 'absolute', zIndex: 110, top: 0, left: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'rgba(255,255,255,0.8)' }}>
<PropagateLoader
// css={override}
size={20}
color={"#274B80"}
loading={this.state.loading}
/>
</div>
);
return (
<div style={{ height: this.props.height }} ref={this.myRef}>
{/* <Row> */}
<div className={"main-color"} style={{ height: 195, width: '100%' }} />
<Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
<Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
{this.state.messageAlert}
</Alert>
</Snackbar>
{this.state.loading && loadingComponent}
{this.state.itemReport === true ?
this.state.load && (
<div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -182 }}>
<label style={{ color: 'white', fontSize: 16, alignSelf: 'center', width: '50%', }}>Master Data - CAT</label>
{/* <div style={{ color: 'white', width: '50%', height: 37, display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center', borderRadius: 6, paddingLeft: 5, paddingRight: 5, alignSelf: 'center' }}>
<img src={Images.searchBlack} style={{ marginRight: 10 }} />
<InputBase
style={{ width: '100%' }}
placeholder="Search"
value={this.state.search}
onChange={(e) => this.handleInputChange(e.target.value)}
inputProps={{ 'aria-label': 'naked' }}
/>
</div> */}
<div style={{ width: '50%', justifyContent: 'flex-end', display: 'flex', flexFlow: 'wrap' }}>
<a data-tip={'Download Template'} data-for="template">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() => this.downloadFile()}
>
<img src={Images.template} />
</button>
</a>
<ReactTooltip border={true} id="template" place="bottom" type="light" effect="solid" />
{this.state.buttonCreate && (
<a data-tip={'Upload'} data-for="upload">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() => null}
>
<img src={Images.upload} onClick={() => this.setState({ visibleUpload: true })} />
</button>
</a>
)}
<ReactTooltip border={true} id="upload" place="bottom" type="light" effect="solid" />
<a data-tip={'Download'} data-for="download">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() => this.downloadDataTable()}
>
<img src={Images.download} />
</button>
</a>
<ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
<a data-tip={'Visualization'} data-for="visualisasi">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() => this.setState({ visualisasi: true, itemReport: false })}
>
<img src={Images.visualisasi} />
</button>
</a>
<ReactTooltip border={true} id="visualisasi" place="bottom" type="light" effect="solid" />
{this.state.buttonCreate && (
<a data-tip={'Add New'} data-for="tambah">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5,
marginRight: 20
}}
>
<img src={Images.add} onClick={() => this.setState({ add: true })} />
</button>
</a>
)}
<ReactTooltip border={true} id="tambah" place="bottom" type="light" effect="solid" />
</div>
</div>
<div style={{ padding: 25 }}>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
theme={getMuiTheme()}
data={this.state.dataTable}
columns={columns}
options={options}
/>
</MuiThemeProvider>
</div>
</div>
)
:
this.state.visualisasi == true ?
<VisualMasterDataCAT
buttonCreate={this.state.buttonCreate}
buttonEdit={this.state.buttonEdit}
onClickClose={() => this.setState({ visualisasi: false, itemReport: true }, () => this.getData())}
height={this.props.height}
handleLoading={() => this.setState({ loading: true })}
scrollToTop={() => this.scrollToMyRef()}
/>
:
<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 }}>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
theme={getMuiTheme()}
data={this.state.rows}
columns={this.state.cols}
options={options}
/>
</MuiThemeProvider>
</div>
<div style={{ display: 'flex', width: '100%', placeContent: 'flex-end', padding: 20 }}>
<button
type="button"
onClick={() => this.setState({ itemReport: 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 }}>Cancel</span>
</div>
</button>
<button
type="button"
disabled={this.state.buttonError == true ? true : false}
onClick={() => this.uploadReportItems()}
style={{}}
>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Save</span>
</div>
</button>
</div>
</div>
}
{this.state.add && (
<CreateMasterDataCAT
onClickClose={() => this.setState({ add: false })}
data={this.state.listData}
refresh={this.getData.bind(this)}
createReportItems={this.createReportItems.bind(this)}
/>
)}
{this.state.edit && (
<EditMasterDataCAT
onClickClose={() => this.setState({ edit: false })}
data={this.state.rowData}
refresh={this.getData.bind(this)}
updateReportItems={this.updateReportItems.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 main-color" style={{ 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 })}
>
<img src={Images.close} />
</button>
</div>
</div>
<UploadFile
type={this.state.uploadStatus}
percentage={this.state.percentage}
result={this.state.result}
acceptedFiles={["xlsx"]}
onHandle={(dt) => {
this.fileHandler(dt)
this.setState({ uploadStatus: 'idle', percentage: '0' })
}}
onUpload={() => {
String(this.state.judul).includes("MASTER") && String(this.state.judul).includes("DATA") && String(this.state.judul).includes("REPORT") && String(this.state.judul).includes("ITEMS") && !this.state.invalidTemplate ?
this.checkUpload() :
this.setState({ alert: true, messageAlert: "Invalid Template", tipeAlert: 'warning' })
}}
/>
</div>
</div>
)}
{this.state.visibleDelete && (
<PopUpDelete
rowData={this.state.rowData}
name={this.state.reportNameDelete}
onClickClose={() => this.setState({ visibleDelete: false })}
onClickDelete={this.deleteReport.bind(this)}
/>
)}
</div>
);
}
}
src/container/MasterData/MasterDataCAT/VisualMasterDataCAT.js 0 → 100644
View file @ b02b78db
import React, { Component } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { TextField, Snackbar, withStyles } from '@material-ui/core';
import MinimizeIcon from '@material-ui/icons/Minimize';
import AddIcon from '@material-ui/icons/Add';
import RemoveIcon from '@material-ui/icons/Remove';
import Nestable from 'react-nestable';
import api from '../../../api';
import { titleCase } from '../../../library/Utils';
import Autocomplete from '@material-ui/lab/Autocomplete';
import MuiAlert from '@material-ui/lab/Alert';
import Constant from '../../../library/Constant';
const useStyles = makeStyles((theme) => ({
root: {
width: '100%',
maxWidth: 500,
backgroundColor: theme.palette.background.paper,
},
nested: {
paddingLeft: theme.spacing(4),
},
}));
const Alert = withStyles({
})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
const type = [
{
value: '1',
label: 'KPI',
},
{
value: '2',
label: 'KPI',
},
];
const companies = [
{
value: '',
label: '',
},
{
value: '1',
label: 'TIA',
},
{
value: '2',
label: 'TIA',
},
];
export default class VisualMasterDataCAT extends Component {
constructor(props) {
super(props)
this.state = {
open: false,
items: [],
arrayCollapse: [],
defaultCollapsed: false,
listReport: null,
report: null,
listCompany: null,
company: null,
alert: false,
tipeAlert: '',
messageAlert: '',
realItems: []
}
}
componentDidMount() {
// console.log(this.props.height)
this.getReportType()
}
getReportType() {
api.create().getReportType().then((response) => {
this.getCompanyActive()
if (response.data) {
if (response.ok) {
if (response.data.status === 'success') {
let data = response.data.data
let reportData = data.map((item) => {
return {
report_id: item.report_id,
report_name: item.report_name,
}
})
let defaultProps = {
options: reportData,
getOptionLabel: (option) => titleCase(option.report_name),
};
this.setState({ listReport: defaultProps, report: reportData[0] })
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
}
})
}
getCompanyActive() {
api.create().getPerusahaanActive().then((response) => {
if (response.data) {
if (response.ok) {
if (response.data.status === 'success') {
let data = response.data.data
let companyData = data.map((item) => {
return {
company_id: item.company_id,
company_name: item.company_name,
}
})
let defaultProps = {
options: companyData,
getOptionLabel: (option) => titleCase(option.company_name),
};
this.setState({ listCompany: defaultProps, company: companyData[0] }, () => {
this.getItemHierarki()
})
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
}
})
}
getItemHierarki() {
let payload = {
"report_id": this.state.report.report_id,
"company_id": this.state.company.company_id
}
api.create().getItemReportHierarki(payload).then((response) => {
// console.log(response.data)
if (response.data) {
if (response.ok) {
if (response.data.status == 'success') {
this.setState({ items: response.data.data, realItems: response.data.data})
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
}
})
}
handleCollapse(item) {
let index = this.state.items.findIndex((val) => val.id === item.id)
let items = this.state.items
if (index == -1) {
if (item.children.length > 0) {
this.handleCollapse(item)
}
} else {
items[index].collapse = !items[index].collapse
// console.log(items[index])
}
}
onDefaultCollapsed = () => this.setState({
defaultCollapsed: !this.state.defaultCollapsed
});
collapse = (collapseCase) => {
let arrayCollapse = this.state.arrayCollapse
let index = arrayCollapse.findIndex((val) => val.id === collapseCase)
if (arrayCollapse.includes(collapseCase)) {
arrayCollapse.splice(index, 1)
} else {
arrayCollapse.push(collapseCase)
}
if (this.refNestable) {
this.refNestable.collapse(arrayCollapse.length > 0 ? arrayCollapse : 'NONE');
}
};
handleSave() {
let payload = {
"item_report": this.state.items
}
if (JSON.stringify(this.state.items) === JSON.stringify(this.state.realItems)) {
this.setState({ alert: true, messageAlert: 'Save visualization item report success!', tipeAlert: 'success' }, () => {
setTimeout(() => {
this.props.onClickClose()
}, 1000);
})
} else {
api.create().saveVisualisasiReport(payload).then((response) => {
// console.log(response);
// if (response.data.status == 'ucces') {
if (response.data) {
if (response.ok) {
if (response.data.status === "success") {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' }, () => {
setTimeout(() => {
this.props.onClickClose()
}, 1000);
})
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
}
// } else {
// alert(response.data.message)
// }
})
}
}
renderItem = ({ item, collapseIcon }) => {
return (
<div>
<button type="button" onClick={() => this.collapse(item.id)}>{collapseIcon ? (this.state.arrayCollapse.includes(item.id) ? <AddIcon /> : <RemoveIcon />) : null}</button>
<label style={{ marginLeft: collapseIcon ? 10 : 0 }}>{item.description}</label>
</div>
)
};
closeAlert() {
this.setState({ alert: false })
}
render() {
return (
<div>
<Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
<Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
{this.state.messageAlert}
</Alert>
</Snackbar>
<div style={{ height: this.props.height }}>
<div style={{ width: '100%' }} className={"main-color"} />
<div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -118 }}>
<label style={{ color: 'white', width: '20%', fontSize: 16, paddingTop: 8 }}>Data Visualization</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' }}>Reports Item Hierarchy</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
disableClearable
renderInput={(params) =>
<TextField {...params}
label="Report Type"
margin="normal"
style={{ marginTop: 7 }}
InputProps={{ ...params.InputProps, style: { width: "15%", fontSize: 11, fontFamily: 'Nunito Sans, sans-serif' } }}
/>}
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
disableClearable
renderInput={(params) =>
<TextField {...params}
label="Company"
margin="normal"
style={{ marginTop: 7 }}
InputProps={{ ...params.InputProps, style: { width: "15%", fontSize: 11, fontFamily: 'Nunito Sans, sans-serif' } }}
/>}
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>
{/* <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 }}>Back</span>
</div> */}
{this.props.buttonEdit && (
<div className="row" style={{ float: 'right', marginRight: 25, paddingRight: 15, paddingLeft: 15, paddingBottom: 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 }}>Cancel</span>
</div>
<button onClick={() => {
this.props.handleLoading()
this.props.scrollToTop()
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 }}>Save</span>
</div>
</button>
</div>
)}
{/* </div> */}
</div>
</div>
</div>
);
}
}
src/router/homeRoutes.js
View file @ b02b78db
......@@ -18,7 +18,8 @@ import MonthlyReport from '../container/MonthlyReport';
import DocumentManagement from '../container/DocumentManagement/DocumentManagement';
import OutlookPA from '../container/OutlookPA';
import SubHolding from '../container/Laporan/SubHolding';
import SummaryTriputra from '../container/SummaryTriputra/SummaryOfTriputra'
import SummaryTriputra from '../container/SummaryTriputra/SummaryOfTriputra';
import MasterDataCAT from '../container/MasterData/MasterDataCAT/MasterDataCAT'
const routes = [
{
......@@ -69,6 +70,10 @@ const routes = [
path: "/home/parameters",
main: Parameter
},
{
path: "/home/master-data-cat",
main: MasterDataCAT
},
{
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