Skip to content

T
Tia-dev
Commit 3e4f7d88 authored by Rifka Kurnia's avatar Rifka Kurnia
Browse files
Options

Merge branch 'rifka' into 'master' 

create cat

See merge request !1201
parents 4a65b170 13a68a27
Hide whitespace changes
Inline Side-by-side
Showing with 586 additions and 573 deletions
src/container/MasterData/MasterDataCAT/CreateMasterDataCAT.js
View file @ 3e4f7d88
...@@ -485,624 +485,637 @@ export default class CreateMasterDataCAT extends Component { ...@@ -485,624 +485,637 @@ export default class CreateMasterDataCAT extends Component {
return ( return (
<div className="test app-popup-show"> <div className="test app-popup-show">
<div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}> <div className="popup-content background-white border-radius" style={{ borderRadius: 8, maxHeight: 600 }}>
<div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}> <div>
<div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}> <div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
<div className="popup-title"> <div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
<span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Create Data</span> <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>
</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>
</div> </div>
<Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}> <div style={{ maxHeight: 500, overflow: 'scroll' }}>
<Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}> <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
{this.state.messageAlert} <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
</Alert> {this.state.messageAlert}
</Snackbar> </Alert>
</Snackbar>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}> <div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1"> <div className="column-1">
<div className="margin-top-10px" style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }} >
<TextField <Autocomplete
style={{ width: '100%' }} {...this.state.listCompany}
value={'-'} id="company"
id="ID" onChange={(event, newInputValue) => this.setState({ company: newInputValue, kpiDisable: false, maxAchDisable: false }, () => {
label="ID" this.getParent()
disabled this.clearMessage()
inputProps={{ this.getKPIType()
style: { this.getMaxAch()
fontSize: 11, })}
fontFamily: 'Nunito Sans, sans-serif', debug
} renderInput={(params) =>
}} <TextField {...params}
InputLabelProps={{ label="Company Name"
style: { InputLabelProps={{
fontSize: 11, style: {
fontFamily: 'Nunito Sans, sans-serif', fontSize: 11,
color: '#7e8085', 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>
</div> <div className="column-2">
<div className="column-2"> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}> <Autocomplete
<Autocomplete {...this.state.listReportType}
{...this.state.listReportType} id="reportType"
id="reportType" onChange={(event, newInputValue) => this.setState({ reportType: newInputValue, kpiDisable: true, maxAchDisable: true }, () => {
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())
newInputValue == null || (newInputValue.report_name !== 'CAT') ? this.setState({ kpiTypeValue: null, maxAchValue: null, formulaYTDValue: null }, () => this.clearMessage()) : this.clearMessage();
: this.clearMessage(); })}
})} debug
debug renderInput={(params) =>
renderInput={(params) => <TextField {...params}
<TextField {...params} label="Year"
label="Report Type" InputLabelProps={{
InputLabelProps={{ style: {
style: { fontSize: 11,
fontSize: 11, fontFamily: 'Nunito Sans, sans-serif',
fontFamily: 'Nunito Sans, sans-serif', color: '#7e8085'
color: '#7e8085' }
} }}
}} error={this.state.errorJenisLaporan}
error={this.state.errorJenisLaporan} helperText={this.state.msgErrorJenisLaporan}
helperText={this.state.msgErrorJenisLaporan} InputProps={{ ...params.InputProps, style: { fontSize: 11, fontFamily: 'Nunito Sans, sans-serif' } }}
InputProps={{ ...params.InputProps, style: { fontSize: 11, fontFamily: 'Nunito Sans, sans-serif' } }} />}
/>} value={this.state.reportType}
value={this.state.reportType} />
/> </div>
</div> </div>
</div> </div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}> <div style={{ borderBottom: 'solid 1px #c4c4c4', margin: 20, marginBottom: 10 }} >
<div className="column-1"> <Typography style={{ fontSize: '12px', color: '#4b4b4b', padding: 10 }}>Item Report - 1</Typography>
<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>
<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="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1"> <div className="column-1">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}> <div className="margin-top-10px" style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
id="description" value={'-'}
label="Description" id="ID"
name="description" label="ID"
value={this.state.description} disabled
error={this.state.errorDesc} inputProps={{
helperText={this.state.msgErrorDesc} style: {
onChange={(e) => this.handleChange(e, '')} fontSize: 11,
// value={this.props.data.business_unit_name} fontFamily: 'Nunito Sans, sans-serif',
inputProps={{ }
style: { }}
fontSize: 11, InputLabelProps={{
fontFamily: 'Nunito Sans, sans-serif', style: {
} fontSize: 11,
}} fontFamily: 'Nunito Sans, sans-serif',
InputLabelProps={{ color: '#7e8085',
style: { }
fontSize: 11, }}
fontFamily: 'Nunito Sans, sans-serif', />
color: '#7e8085', </div>
}
}}
>
</TextField>
</div> </div>
</div> <div className="column-2">
<div className="column-2"> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }} > <TextField
<Autocomplete style={{ width: '100%' }}
{...this.state.listParent} id="orders"
id="parentId" name="order"
onChange={(event, newInputValue) => this.setState({ parent: newInputValue })} label="Report Name"
debug // disabled
disabled={this.state.reportType == null || this.state.company == null} // onChange={(e) => this.handleChange(e, null)}
renderInput={(params) => // value={this.state.order}
<TextField {...params} value={'CAT'}
label="Parent ID" // error={this.state.errorOrder}
InputLabelProps={{ // helperText={this.state.msgErrorOrder}
style: { inputProps={{
fontSize: 11, min: 0,
fontFamily: 'Nunito Sans, sans-serif', style: {
color: '#7e8085' fontSize: 11,
} fontFamily: 'Nunito Sans, sans-serif',
}} }
InputProps={{ ...params.InputProps, style: { fontSize: 11, fontFamily: 'Nunito Sans, sans-serif' } }} }}
/>} InputLabelProps={{
value={this.state.parent} style: {
/> fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085',
}
}}
>
</TextField>
</div>
</div> </div>
</div> </div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}> <div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1"> <div className="column-1">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField <Autocomplete
style={{ width: '100%' }} {...this.state.listReportType}
id="uom" id="reportName1"
name="uom" onChange={(event, newInputValue) => this.setState({ reportType: newInputValue, kpiDisable: true, maxAchDisable: true }, () => {
label="UOM" newInputValue == null || (newInputValue.report_name !== 'CAT') ? this.setState({ kpiTypeValue: null, maxAchValue: null, formulaYTDValue: null }, () => this.clearMessage())
value={this.state.uom} : this.clearMessage();
onChange={(e) => this.handleChange(e, '')} })}
inputProps={{ debug
style: { renderInput={(params) =>
fontSize: 11, <TextField {...params}
fontFamily: 'Nunito Sans, sans-serif', label="Item Report Name"
} InputLabelProps={{
}} style: {
InputLabelProps={{ fontSize: 11,
style: { fontFamily: 'Nunito Sans, sans-serif',
fontSize: 11, color: '#7e8085'
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' } }}
</TextField> />}
value={this.state.reportType}
// value={'FINANCIAL PERSPECTIVE'}
// disabled
/>
</div>
</div> </div>
</div> <div className="column-2">
<div className="column-2"> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}> <TextField
<TextField style={{ width: '100%' }}
style={{ width: '100%' }} id="weight"
id="weight" label="Weight"
label="Weight" name="weight"
name="weight" value={this.state.weight}
value={this.state.weight} onChange={(e) => this.handleChange(e, '')}
onChange={(e) => this.handleChange(e, '')} inputProps={{
inputProps={{ style: {
style: { fontSize: 11,
fontSize: 11, fontFamily: 'Nunito Sans, sans-serif',
fontFamily: 'Nunito Sans, sans-serif', }
} }}
}} InputLabelProps={{
InputLabelProps={{ style: {
style: { fontSize: 11,
fontSize: 11, fontFamily: 'Nunito Sans, sans-serif',
fontFamily: 'Nunito Sans, sans-serif', color: '#7e8085',
color: '#7e8085', }
} }}
}} >
> </TextField>
</TextField> </div>
</div> </div>
</div> </div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}> <div style={{ borderBottom: 'solid 1px #c4c4c4', margin: 20, marginBottom: 10 }} >
<div className="column-1"> <Typography style={{ fontSize: '12px', color: '#4b4b4b', padding: 10 }}>Item Report - 2</Typography>
<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>
<div className="column-2">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}> <div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
<TextField <div className="column-1">
style={{ width: '100%' }} <div className="margin-top-10px" style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
id="formula" <TextField
label="Formula" style={{ width: '100%' }}
name="formula" value={'-'}
disabled={this.state.disabledFormula} id="ID"
value={this.state.formula} label="ID"
error={this.state.errorFormula} disabled
helperText={this.state.msgErrorFormula} inputProps={{
onChange={(e) => this.handleChange(e, '')} style: {
inputProps={{ fontSize: 11,
style: { fontFamily: 'Nunito Sans, sans-serif',
fontSize: 11, }
fontFamily: 'Nunito Sans, sans-serif', }}
} InputLabelProps={{
}} style: {
InputLabelProps={{ fontSize: 11,
style: { fontFamily: 'Nunito Sans, sans-serif',
fontSize: 11, color: '#7e8085',
fontFamily: 'Nunito Sans, sans-serif', }
color: '#7e8085', }}
} />
}} </div>
> </div>
</TextField> <div className="column-2">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
id="orders"
name="order"
label="Report Name"
disabled
// onChange={(e) => this.handleChange(e, null)}
// value={this.state.order}
value={'CAT'}
// 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> </div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}> <div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1"> <div className="column-1">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField <Autocomplete
style={{ width: '100%' }} {...this.state.listReportType}
id="realVal" id="reportType"
label="True Value" onChange={(event, newInputValue) => this.setState({ reportType: newInputValue, kpiDisable: true, maxAchDisable: true }, () => {
name="realVal" newInputValue == null || (newInputValue.report_name !== 'CAT') ? this.setState({ kpiTypeValue: null, maxAchValue: null, formulaYTDValue: null }, () => this.clearMessage())
disabled={this.state.disabledValue} : this.clearMessage();
value={this.state.realVal} })}
error={this.state.errorRV} debug
helperText={this.state.msgErrorRV} renderInput={(params) =>
onChange={(e) => this.handleChange(e, '')} <TextField {...params}
inputProps={{ label="Item Report Name"
style: { InputLabelProps={{
fontSize: 11, style: {
fontFamily: 'Nunito Sans, sans-serif', fontSize: 11,
} fontFamily: 'Nunito Sans, sans-serif',
}} color: '#7e8085'
InputLabelProps={{ }
style: { }}
fontSize: 11, error={this.state.errorJenisLaporan}
fontFamily: 'Nunito Sans, sans-serif', helperText={this.state.msgErrorJenisLaporan}
color: '#7e8085', InputProps={{ ...params.InputProps, style: { fontSize: 11, fontFamily: 'Nunito Sans, sans-serif' } }}
} />}
}} value={this.state.reportType}
/> // value={'FINANCIAL PERSPECTIVE'}
// disabled
/>
</div>
</div> </div>
</div> <div className="column-2">
<div className="column-2"> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}> <TextField
<Autocomplete style={{ width: '100%' }}
value={this.state.condition} id="weight"
id="isWrongCondition" label="Weight"
disabled={this.state.disabledCondt} name="weight"
onChange={(event, newValue) => { value={this.state.weight}
this.setState({ condition: newValue }, () => this.clearMessage()); onChange={(e) => this.handleChange(e, '')}
}} inputProps={{
options={this.state.options} style: {
renderInput={(params) => fontSize: 11,
<TextField {...params} fontFamily: 'Nunito Sans, sans-serif',
error={this.state.errorCondition} }
helperText={this.state.msgErrorCondition} }}
label="False Condition" InputLabelProps={{
InputLabelProps={{ style: {
style: { fontSize: 11,
fontSize: 11, fontFamily: 'Nunito Sans, sans-serif',
fontFamily: 'Nunito Sans, sans-serif', color: '#7e8085',
color: '#7e8085' }
} }}
}} >
InputProps={{ ...params.InputProps, style: { fontSize: 11, fontFamily: 'Nunito Sans, sans-serif' } }} </TextField>
/>} </div>
/>
</div> </div>
</div> </div>
</div>
{this.state.reportType !== null && ( <div style={{ borderBottom: 'solid 1px #c4c4c4', margin: 20, marginBottom: 10 }} >
this.state.reportType.report_name === 'CAT' && ( <Typography style={{ fontSize: '12px', color: '#4b4b4b', padding: 10 }}>Item Report - 3</Typography>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}> </div>
<div className="column-1">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}> <div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
<Autocomplete <div className="column-1">
{...this.state.listKPI} <div className="margin-top-10px" style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
value={this.state.kpiTypeValue} <TextField
id="kpiType" style={{ width: '100%' }}
onChange={(event, newValue) => { value={'-'}
this.setState({ kpiTypeValue: newValue }, () => this.clearMessage()); id="ID"
}} label="ID"
disabled={this.state.kpiDisable} disabled
renderInput={(params) => inputProps={{
<TextField {...params} style: {
label="KPI Type" fontSize: 11,
InputLabelProps={{ fontFamily: 'Nunito Sans, sans-serif',
style: { }
fontSize: 11, }}
fontFamily: 'Nunito Sans, sans-serif', InputLabelProps={{
color: '#7e8085' style: {
} fontSize: 11,
}} fontFamily: 'Nunito Sans, sans-serif',
InputProps={{ ...params.InputProps, style: { fontSize: 11, fontFamily: 'Nunito Sans, sans-serif' } }} color: '#7e8085',
/>} }
/> }}
</div> />
</div> </div>
<div className="column-2"> </div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}> <div className="column-2">
<Autocomplete <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
{...this.state.listMaxAch} <TextField
value={this.state.maxAchValue} style={{ width: '100%' }}
id="maxAch" id="orders"
onChange={(event, newValue) => { name="order"
this.setState({ maxAchValue: newValue }, () => this.clearMessage()); label="Report Name"
}} disabled
disabled={this.state.maxAchDisable} // onChange={(e) => this.handleChange(e, null)}
renderInput={(params) => // value={this.state.order}
<TextField {...params} value={'CAT'}
label="Max Achievement" // error={this.state.errorOrder}
InputLabelProps={{ // helperText={this.state.msgErrorOrder}
style: { inputProps={{
fontSize: 11, min: 0,
fontFamily: 'Nunito Sans, sans-serif', style: {
color: '#7e8085' fontSize: 11,
} fontFamily: 'Nunito Sans, sans-serif',
}} }
InputProps={{ ...params.InputProps, style: { fontSize: 11, fontFamily: 'Nunito Sans, sans-serif' } }} }}
/>} InputLabelProps={{
/> style: {
</div> fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085',
}
}}
>
</TextField>
</div> </div>
</div> </div>
))} </div>
{this.state.reportType !== null && ( <div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
this.state.reportType.report_name === 'CAT' && ( <div className="column-1">
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<div className="column-1"> <Autocomplete
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}> {...this.state.listReportType}
<Autocomplete id="reportType"
value={this.state.formulaYTDValue} onChange={(event, newInputValue) => this.setState({ reportType: newInputValue, kpiDisable: true, maxAchDisable: true }, () => {
id="formulaYTD" newInputValue == null || (newInputValue.report_name !== 'CAT') ? this.setState({ kpiTypeValue: null, maxAchValue: null, formulaYTDValue: null }, () => this.clearMessage())
onChange={(event, newValue) => { : this.clearMessage();
this.setState({ formulaYTDValue: newValue }, () => this.clearMessage()); })}
}} debug
options={this.state.formulaYtd} renderInput={(params) =>
renderInput={(params) => <TextField {...params}
<TextField {...params} label="Item Report Name"
label="Formula YTD" InputLabelProps={{
InputLabelProps={{ style: {
style: { fontSize: 11,
fontSize: 11, fontFamily: 'Nunito Sans, sans-serif',
fontFamily: 'Nunito Sans, sans-serif', color: '#7e8085'
color: '#7e8085' }
} }}
}} error={this.state.errorJenisLaporan}
InputProps={{ ...params.InputProps, style: { fontSize: 11, fontFamily: 'Nunito Sans, sans-serif' } }} helperText={this.state.msgErrorJenisLaporan}
/>} InputProps={{ ...params.InputProps, style: { fontSize: 11, fontFamily: 'Nunito Sans, sans-serif' } }}
/> />}
</div> value={this.state.reportType}
// value={'FINANCIAL PERSPECTIVE'}
// disabled
/>
</div> </div>
</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 style={{ borderBottom: 'solid 1px #c4c4c4', margin: 20, marginBottom: 10 }} >
<div className="column-1"> <Typography style={{ fontSize: '12px', color: '#4b4b4b', padding: 10 }}>Item Report - 4</Typography>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}> </div>
<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 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 }}>
<TextField
style={{ width: '100%' }}
id="orders"
name="order"
label="Report Name"
disabled
// onChange={(e) => this.handleChange(e, null)}
// value={this.state.order}
value={'CAT'}
// 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> </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 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.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="Item Report Name"
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}
// value={'FINANCIAL PERSPECTIVE'}
// disabled
/>
</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> </div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}> <div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1"> <div className="column-1">
<div className="margin-top-10px" style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}> <div className="margin-top-10px" style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
defaultValue={"active"} defaultValue={"active"}
id="status" id="status"
label="Status" label="Status"
disabled disabled
inputProps={{ inputProps={{
style: { style: {
fontSize: 11, fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif', fontFamily: 'Nunito Sans, sans-serif',
} }
}} }}
InputLabelProps={{ InputLabelProps={{
style: { style: {
fontSize: 11, fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif', fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085', color: '#7e8085',
} }
}} }}
/> />
</div>
</div> </div>
</div> </div>
</div>
<div className="margin-top-10px" style={{ paddingTop: 10, paddingBottom: 30, paddingRight: 30, paddingLeft: 30 }}> <div className="margin-top-10px" style={{ paddingTop: 10, paddingBottom: 30, paddingRight: 30, paddingLeft: 30 }}>
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<Typography style={{ fontSize: 11, width: '13%' }}>Created By :</Typography> <Typography style={{ fontSize: 11, width: '13%' }}>Created By :</Typography>
{/* <Typography style={{ fontSize: 11 }}>: </Typography> */} {/* <Typography style={{ fontSize: 11 }}>: </Typography> */}
</div> </div>
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<Typography style={{ fontSize: 11, width: '13%' }}>Updated By :</Typography> <Typography style={{ fontSize: 11, width: '13%' }}>Updated By :</Typography>
{/* <Typography style={{ fontSize: 11 }}>: </Typography> */} {/* <Typography style={{ fontSize: 11 }}>: </Typography> */}
</div>
</div> </div>
</div> </div>
<div>
<div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}> <div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1" style={{ alignSelf: 'center' }}> <div className="column-1" style={{ alignSelf: 'center' }}>
<button <button
type="button" type="button"
onClick={() => this.props.onClickClose()} onClick={() => this.props.onClickClose()}
> >
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <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> <span style={{ color: '#354960', fontSize: 11 }}>Cancel</span>
</div> </div>
</button> </button>
</div> </div>
<div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}> <div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
<button <button
type="button" type="button"
onClick={() => this.validasi()} onClick={() => this.validasi()}
> >
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Save</span> <span style={{ color: '#fff', fontSize: 11 }}>Save</span>
</div> </div>
</button> </button>
</div>
</div> </div>
</div> </div>
</div> </div>
......
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