Skip to content

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

update cat mr

parent 1fc4e482
Hide whitespace changes
Inline Side-by-side
Showing with 278 additions and 143 deletions
src/container/MonthlyReport/CorporateAnnualTargetMR.js
View file @ add6b603
...@@ -524,7 +524,7 @@ export default class CorporateAnnualTargetMR extends Component { ...@@ -524,7 +524,7 @@ export default class CorporateAnnualTargetMR extends Component {
console.log(response) console.log(response)
if (response.data) { if (response.data) {
if (response.data.status === 'success') { if (response.data.status === 'success') {
this.setState({ visibleUpload: false, loading: true, visibleCATMR: false, visibleButtonUpload: true }) this.setState({ visibleUploadSimulasi: false, loading: true, visibleCATMR: false, visibleButtonUpload: true })
let dataTable = response.data.data.map((item, index) => { let dataTable = response.data.data.map((item, index) => {
return [ return [
item.type_report_id, item.type_report_id,
...@@ -2381,166 +2381,301 @@ export default class CorporateAnnualTargetMR extends Component { ...@@ -2381,166 +2381,301 @@ export default class CorporateAnnualTargetMR extends Component {
</div> </div>
} }
</div> </div>
</Paper> : </Paper>
<Paper style={{ paddingTop: 10 }}> :
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} > this.state.visibleButtonUpload ?
<Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Monthly Report - Corporate Annual Target - Performance</Typography> <Paper style={{ paddingTop: 10 }}>
</div> <div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
<div style={{ padding: 20 }}> <Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Monthly Report - Corporate Annual Target - Performance</Typography>
<div>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>{this.props.company.company_name}</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Period : {String(this.props.month.month_value).toLocaleUpperCase()} {this.props.periode} (rev.{this.props.revision})</Typography>
{this.props.defaultCurrency.id === 1 ?
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
:
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in USD thousand</Typography>
}
</div>
<div style={{ marginTop: 20, width: this.props.width - (this.props.open === true ? 400 : 150) }}>
{!this.state.loading && (
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={dataTable2}
columns={columns}
options={options}
/>
</MuiThemeProvider>
)}
</div> </div>
<div style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '100%', paddingLeft: 15, paddingRight: 15, marginTop: 5 }}> <div style={{ padding: 20 }}>
<div> <div>
<div style={{ display: 'flex' }}> <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>{this.props.company.company_name}</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b', marginTop: 20 }}>Last Updated by : </Typography> <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Period : {String(this.props.month.month_value).toLocaleUpperCase()} {this.props.periode} (rev.{this.props.revision})</Typography>
<div style={{ marginLeft: 10, overflowY: 'scroll', height: this.state.updateBy.length < 2 ? 25 : 75, marginTop: 10 }}> {this.props.defaultCurrency.id === 1 ?
{ <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
this.state.updateBy.length > 0 ? this.state.updateBy.reverse().map((item, index) => { :
return ( <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in USD thousand</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b', marginTop: 10, marginRight: 5 }}>{item.latest_update}</Typography> }
) </div>
}) : <div style={{ marginTop: 20, width: this.props.width - (this.props.open === true ? 400 : 150) }}>
<Typography style={{ fontSize: '11px', color: '#4b4b4b', marginTop: 10, marginRight: 5 }}>-</Typography> {!this.state.loading && (
<MuiThemeProvider theme={getMuiTheme()}>
} <MUIDataTable
data={dataTable2}
columns={columns}
options={options}
/>
</MuiThemeProvider>
)}
</div>
<div style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '100%', paddingLeft: 15, paddingRight: 15, marginTop: 5 }}>
<div>
<div style={{ display: 'flex' }}>
<Typography style={{ fontSize: '11px', color: '#4b4b4b', marginTop: 20 }}>Last Updated by : </Typography>
<div style={{ marginLeft: 10, overflowY: 'scroll', height: this.state.updateBy.length < 2 ? 25 : 75, marginTop: 10 }}>
{
this.state.updateBy.length > 0 ? this.state.updateBy.reverse().map((item, index) => {
return (
<Typography style={{ fontSize: '11px', color: '#4b4b4b', marginTop: 10, marginRight: 5 }}>{item.latest_update}</Typography>
)
}) :
<Typography style={{ fontSize: '11px', color: '#4b4b4b', marginTop: 10, marginRight: 5 }}>-</Typography>
}
</div>
</div>
</div>
<div style={{ display: 'flex', flexDirection: 'row' }}>
<div style={{ padding: 5 }}>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>TOTAL SCORE</Typography>
</div>
<div style={{ border: '1px solid black', padding: 5, minWidth: 200, display: 'flex', justifyContent: 'flex-end' }}>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>{this.state.totalScore}</Typography>
</div> </div>
</div> </div>
</div> </div>
<div style={{ display: 'flex', flexDirection: 'row' }}> <div style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '100%', paddingLeft: 15, paddingRight: 15 }}>
<div style={{ padding: 5 }}> <div>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>TOTAL SCORE</Typography> <Typography style={{ fontSize: '11px', color: '#4b4b4b', marginTop: 10 }}>Notes : {this.state.notes}</Typography>
</div> </div>
<div style={{ border: '1px solid black', padding: 5, minWidth: 200, display: 'flex', justifyContent: 'flex-end' }}> <div style={{ display: 'flex', flexDirection: 'row' }}>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>{this.state.totalScore}</Typography> <div style={{ padding: 5 }}>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>PERFOMANCE</Typography>
</div>
<div style={{ borderStyle: 'solid', backgroundColor: this.state.perfomanceScoreColor, borderWidth: '0px 1px 1px 1px', padding: 5, minWidth: 200, display: 'flex', justifyContent: 'flex-end' }}>
<Typography style={{ fontSize: '11px', color: 'black', fontWeight: 'bold' }}>{this.state.perfomanceScore}</Typography>
</div>
</div>
</div>
<div className="grid grid-2x" style={{ marginTop: 10, padding: 20, paddingLeft: 0, paddingRight: 0 }}>
<div className="col-1" style={{ paddingLeft: 0 }}>
<button
type="button"
onClick={() => this.setState({ loading: true, visibleCATMR: true }, () => {
setTimeout(() => {
this.getItemHierarki()
}, 100);
})}
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none'
}}
>
<div style={{ backgroundColor: '#019ce5', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Back</Typography>
</div>
</button>
</div>
<div className="col-2" style={{ display: 'flex', justifyContent: 'flex-end', maxWidth: '100%', paddingRight: 5 }}>
<button
className="button"
type="button"
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none',
marginRight: 20
}}
onClick={() => {
this.setState({ loading: true, dataTable: dataTable2, saveDraft: false, buttonError: false }, () => {
setTimeout(() => {
// this.handleValidate()
this.handleCalculate(dataTable2)
}, 100);
})
}}
>
<div style={{ backgroundColor: '#fff', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', border: 'solid 1px #354960' }}>
<Typography style={{ fontSize: '11px', color: '#354960', textAlign: 'center' }}>Calculate</Typography>
</div>
</button>
<button
type="button"
// disabled={this.state.buttonError}
onClick={() =>
this.setState({ handleDoubleClick: 1, loading: true }, () => {
this.uploadSimulasi('submitted')
})}
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none',
}}
>
<div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Save Data</Typography>
</div>
</button>
</div> </div>
</div> </div>
</div> </div>
<div style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '100%', paddingLeft: 15, paddingRight: 15 }}> </Paper>
:
<Paper style={{ paddingTop: 10 }}>
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
<Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Monthly Report - Corporate Annual Target - Performance</Typography>
</div>
<div style={{ padding: 20 }}>
<div> <div>
<Typography style={{ fontSize: '11px', color: '#4b4b4b', marginTop: 10 }}>Notes : {this.state.notes}</Typography> <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>{this.props.company.company_name}</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Period : {String(this.props.month.month_value).toLocaleUpperCase()} {this.props.periode} (rev.{this.props.revision})</Typography>
{this.props.defaultCurrency.id === 1 ?
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
:
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in USD thousand</Typography>
}
</div> </div>
<div style={{ display: 'flex', flexDirection: 'row' }}> <div style={{ marginTop: 20, width: this.props.width - (this.props.open === true ? 400 : 150) }}>
<div style={{ padding: 5 }}> {!this.state.loading && (
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>PERFOMANCE</Typography> <MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={dataTable2}
columns={columns}
options={options}
/>
</MuiThemeProvider>
)}
</div>
<div style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '100%', paddingLeft: 15, paddingRight: 15, marginTop: 5 }}>
<div>
<div style={{ display: 'flex' }}>
<Typography style={{ fontSize: '11px', color: '#4b4b4b', marginTop: 20 }}>Last Updated by : </Typography>
<div style={{ marginLeft: 10, overflowY: 'scroll', height: this.state.updateBy.length < 2 ? 25 : 75, marginTop: 10 }}>
{
this.state.updateBy.length > 0 ? this.state.updateBy.reverse().map((item, index) => {
return (
<Typography style={{ fontSize: '11px', color: '#4b4b4b', marginTop: 10, marginRight: 5 }}>{item.latest_update}</Typography>
)
}) :
<Typography style={{ fontSize: '11px', color: '#4b4b4b', marginTop: 10, marginRight: 5 }}>-</Typography>
}
</div>
</div>
</div> </div>
<div style={{ borderStyle: 'solid', backgroundColor: this.state.perfomanceScoreColor, borderWidth: '0px 1px 1px 1px', padding: 5, minWidth: 200, display: 'flex', justifyContent: 'flex-end' }}> <div style={{ display: 'flex', flexDirection: 'row' }}>
<Typography style={{ fontSize: '11px', color: 'black', fontWeight: 'bold' }}>{this.state.perfomanceScore}</Typography> <div style={{ padding: 5 }}>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>TOTAL SCORE</Typography>
</div>
<div style={{ border: '1px solid black', padding: 5, minWidth: 200, display: 'flex', justifyContent: 'flex-end' }}>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>{this.state.totalScore}</Typography>
</div>
</div> </div>
</div> </div>
</div> <div style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '100%', paddingLeft: 15, paddingRight: 15 }}>
<div className="grid grid-2x" style={{ marginTop: 10, padding: 20, paddingLeft: 0, paddingRight: 0 }}> <div>
<div className="col-1" style={{ paddingLeft: 0 }}> <Typography style={{ fontSize: '11px', color: '#4b4b4b', marginTop: 10 }}>Notes : {this.state.notes}</Typography>
<button </div>
type="button" <div style={{ display: 'flex', flexDirection: 'row' }}>
onClick={() => this.setState({ loading: true, visibleCATMR: true }, () => { <div style={{ padding: 5 }}>
setTimeout(() => { <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>PERFOMANCE</Typography>
this.getItemHierarki()
}, 100);
})}
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none'
}}
>
<div style={{ backgroundColor: '#019ce5', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Back</Typography>
</div> </div>
</button> <div style={{ borderStyle: 'solid', backgroundColor: this.state.perfomanceScoreColor, borderWidth: '0px 1px 1px 1px', padding: 5, minWidth: 200, display: 'flex', justifyContent: 'flex-end' }}>
<Typography style={{ fontSize: '11px', color: 'black', fontWeight: 'bold' }}>{this.state.perfomanceScore}</Typography>
</div>
</div>
</div> </div>
<div className="col-2" style={{ display: 'flex', justifyContent: 'flex-end', maxWidth: '100%', paddingRight: 5 }}> <div className="grid grid-2x" style={{ marginTop: 10, padding: 20, paddingLeft: 0, paddingRight: 0 }}>
<button <div className="col-1" style={{ paddingLeft: 0 }}>
className="button" <button
type="button" type="button"
style={{ onClick={() => this.setState({ loading: true, visibleCATMR: true }, () => {
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none',
marginRight: 20
}}
onClick={() => {
this.setState({ loading: true, dataTable: dataTable2, saveDraft: false, buttonError: false }, () => {
setTimeout(() => { setTimeout(() => {
// this.handleValidate() this.getItemHierarki()
this.handleCalculate(dataTable2)
}, 100); }, 100);
}) })}
}} style={{
> backgroundColor: 'transparent',
<div style={{ backgroundColor: '#fff', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', border: 'solid 1px #354960' }}> cursor: 'pointer',
<Typography style={{ fontSize: '11px', color: '#354960', textAlign: 'center' }}>Calculate</Typography> borderColor: 'transparent',
</div> outline: 'none'
</button> }}
<button >
className="button" <div style={{ backgroundColor: '#019ce5', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
type="button" <Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Back</Typography>
style={{ </div>
backgroundColor: 'transparent', </button>
cursor: 'pointer', </div>
borderColor: 'transparent', <div className="col-2" style={{ display: 'flex', justifyContent: 'flex-end', maxWidth: '100%', paddingRight: 5 }}>
outline: 'none', <button
marginRight: 20 className="button"
}} type="button"
onClick={() => style={{
this.state.saveDraft === true ? backgroundColor: 'transparent',
this.setState({ alert: true, messageAlert: 'Data Incomplete', tipeAlert: 'error' }) cursor: 'pointer',
: borderColor: 'transparent',
this.state.handleDoubleClick === 1 ? null : outline: 'none',
this.setState({ handleDoubleClick: 1, loading: true }, () => { marginRight: 20
this.uploadCATMR('draft') }}
}) onClick={() => {
} this.setState({ loading: true, dataTable: dataTable2, saveDraft: false, buttonError: false }, () => {
> setTimeout(() => {
<div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}> // this.handleValidate()
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Save as Draft</Typography> this.handleCalculate(dataTable2)
</div> }, 100);
</button> })
<button }}
type="button" >
// disabled={this.state.buttonError} <div style={{ backgroundColor: '#fff', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', border: 'solid 1px #354960' }}>
onClick={() => <Typography style={{ fontSize: '11px', color: '#354960', textAlign: 'center' }}>Calculate</Typography>
this.state.buttonError ? </div>
this.setState({ alert: true, messageAlert: 'Data Incomplete', tipeAlert: 'error' }) </button>
: <button
this.state.handleDoubleClick === 1 ? null : className="button"
this.setState({ handleDoubleClick: 1, loading: true }, () => { type="button"
this.uploadCATMR('submitted') style={{
})} backgroundColor: 'transparent',
style={{ cursor: 'pointer',
backgroundColor: 'transparent', borderColor: 'transparent',
cursor: 'pointer', outline: 'none',
borderColor: 'transparent', marginRight: 20
outline: 'none', }}
}} onClick={() =>
> this.state.saveDraft === true ?
<div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}> this.setState({ alert: true, messageAlert: 'Data Incomplete', tipeAlert: 'error' })
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Save & Complete</Typography> :
</div> this.state.handleDoubleClick === 1 ? null :
</button> this.setState({ handleDoubleClick: 1, loading: true }, () => {
this.uploadCATMR('draft')
})
}
>
<div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Save as Draft</Typography>
</div>
</button>
<button
type="button"
// disabled={this.state.buttonError}
onClick={() =>
this.state.buttonError ?
this.setState({ alert: true, messageAlert: 'Data Incomplete', tipeAlert: 'error' })
:
this.state.handleDoubleClick === 1 ? null :
this.setState({ handleDoubleClick: 1, loading: true }, () => {
this.uploadCATMR('submitted')
})}
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none',
}}
>
<div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Save & Complete</Typography>
</div>
</button>
</div>
</div> </div>
</div> </div>
</div> </Paper>
</Paper>
} }
</div> </div>
{this.state.visibleUpload && ( {this.state.visibleUpload && (
...@@ -2620,7 +2755,7 @@ export default class CorporateAnnualTargetMR extends Component { ...@@ -2620,7 +2755,7 @@ export default class CorporateAnnualTargetMR extends Component {
}} }}
/> />
</div> </div>
{this.state.visibleButtonUpload && {/* {this.state.visibleButtonUpload &&
<div style={{ display: 'flex', justifyContent: 'flex-end', margin: '0px 32px 16px' }}> <div style={{ display: 'flex', justifyContent: 'flex-end', margin: '0px 32px 16px' }}>
<div> <div>
<button <button
...@@ -2644,7 +2779,7 @@ export default class CorporateAnnualTargetMR extends Component { ...@@ -2644,7 +2779,7 @@ export default class CorporateAnnualTargetMR extends Component {
</button> </button>
</div> </div>
</div> </div>
} } */}
{/* <div style={{ padding: '0px 30px 29px', fontSize: 17, color: 'red' }}><b>Warning:</b> Valid currency for uploading data is <b>{this.props.defaultCurrency.id == 1 ? "IDR" : "USD"}</b></div> */} {/* <div style={{ padding: '0px 30px 29px', fontSize: 17, color: 'red' }}><b>Warning:</b> Valid currency for uploading data is <b>{this.props.defaultCurrency.id == 1 ? "IDR" : "USD"}</b></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