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 {
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 className="popup-content background-white border-radius" style={{ borderRadius: 8, maxHeight: 600 }}>
<div>
<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>
<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 style={{ maxHeight: 500, overflow: 'scroll' }}>
<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 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>
<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 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="Year"
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>
<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 style={{ borderBottom: 'solid 1px #c4c4c4', margin: 20, marginBottom: 10 }} >
<Typography style={{ fontSize: '12px', color: '#4b4b4b', padding: 10 }}>Item Report - 1</Typography>
</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 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>
<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 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 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 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="reportName1"
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>
<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 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 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 style={{ borderBottom: 'solid 1px #c4c4c4', margin: 20, marginBottom: 10 }} >
<Typography style={{ fontSize: '12px', color: '#4b4b4b', padding: 10 }}>Item Report - 2</Typography>
</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 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 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 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>
<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 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>
{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 style={{ borderBottom: 'solid 1px #c4c4c4', margin: 20, marginBottom: 10 }} >
<Typography style={{ fontSize: '12px', color: '#4b4b4b', padding: 10 }}>Item Report - 3</Typography>
</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={'-'}
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 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 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>
{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 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 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',
}
}}
<div style={{ borderBottom: 'solid 1px #c4c4c4', margin: 20, marginBottom: 10 }} >
<Typography style={{ fontSize: '12px', color: '#4b4b4b', padding: 10 }}>Item Report - 4</Typography>
</div>
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 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 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 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>
<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 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>
<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 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>
......
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