Skip to content

T
Tia-dev
Commit 049b1f4a authored by rifkaki's avatar rifkaki
Browse files
Options

create master data cat

parent 75ee7b2a
Hide whitespace changes
Inline Side-by-side
Showing with 586 additions and 573 deletions
src/container/MasterData/MasterDataCAT/CreateMasterDataCAT.js
View file @ 049b1f4a
...@@ -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