Skip to content

T
Tia-dev
Commit cd5fe3ce authored by EKSAD's avatar EKSAD
Browse files
Options

Outlook PA

parent 162b210c
Hide whitespace changes
Inline Side-by-side
Showing with 94 additions and 54 deletions
src/container/OutlookPA.js
View file @ cd5fe3ce
......@@ -15,6 +15,7 @@ import Constant from '../library/Constant';
import PropagateLoader from "react-spinners/PropagateLoader"
import { DatePicker } from '@material-ui/pickers';
import BalanceSheetOLPA from './OutlookPA/BalanceSheetOLPA';
import moment from 'moment';
var ct = require("../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable());
......@@ -57,11 +58,16 @@ export default class OutlookPA extends Component {
checkApprover: false,
lastPeriod: '',
latestPeriode: '',
minDateRevision: new Date(),
maxDateRevision: new Date(),
btnApprove: false
}
this.myRef = React.createRef()
this.fileHandler = this.fileHandler.bind(this);
}
scrollToMyRef = () => window.scrollTo(0, this.myRef.current.offsetTop)
componentDidMount() {
this.setState({ loading: true })
this.props.selectIndex('Outlook Performance Appraisal')
......@@ -306,7 +312,8 @@ export default class OutlookPA extends Component {
options: periodeData,
getOptionLabel: (option) => option.periode,
};
let index = data.sort((a, b) => a - b).findIndex((val) => val === (this.state.latestPeriode == "" ? String(Number(currentYear) + 1) : this.state.latestPeriode))
let periode = (this.state.lastPeriod == "" ? String(Number(currentYear) + 1) : this.state.lastPeriod)
let index = data.sort((a, b) => a - b).findIndex((val) => val === periode)
// console.log(data)
console.log(this.state.lastPeriod)
// console.log(periodeData)
......@@ -400,7 +407,8 @@ export default class OutlookPA extends Component {
let dataTableHistory = response.data.data.map(item => {
return [
item.pic,
String(item.status_approval).replace('APPROVAL_PROCCESS', 'WAITING FOR APPROVAL').replace('- -', ''),
item.status_approval,
// String(item.status_approval).replace('APPROVAL_PROCCESS', 'WAITING FOR APPROVAL').replace('- -', ''),
item.remarks,
item.item_revision,
item.history_approval_date
......@@ -412,24 +420,26 @@ export default class OutlookPA extends Component {
}
approvalSubmission(type) {
this.scrollToMyRef()
this.setState({ loading: true })
let body = {
"approval_id": this.props.location.state == undefined ? this.state.approverID : this.state.rawData.approval_id,
"status": type,
"detail": this.state.detailRevisiCheck
}
api.create().approvalSubmissionOLPA(body).then((res) => {
let payload = {
"company_id": this.state.company.company_id,
"min_periode": moment(this.state.minDateRevision).format('YYYY-MM-DD'),
"max_periode": moment(this.state.maxDateRevision).format('YYYY-MM-DD')
}
console.log(payload)
api.create().approvalSubmission(body).then((res) => {
console.log(res)
if (res.data) {
if (res.data.status === "success") {
this.getOutlookPAID()
} else {
this.setState({ loading: false })
alert(res.data.message)
}
} else {
this.setState({ loading: false })
alert(res.problem)
this.setState({ loading: false }, () => {
this.getSubmission()
})
if (type == 'revision') {
api.create().createPeriodeRevision(payload).then((res) => console.log(res))
}
})
}
......@@ -551,12 +561,14 @@ export default class OutlookPA extends Component {
this.getOutlookPAID()
} else {
this.setState({ loading: false }, () => {
alert(response.data.message)
// alert(response.data.message)
this.getOutlookPAID()
})
}
} else {
this.setState({ loading: false }, () => {
alert(response.problem)
// alert(response.problem)
this.getOutlookPAID()
})
}
})
......@@ -587,12 +599,12 @@ export default class OutlookPA extends Component {
let array = []
let canSubmit = true
this.state.dataTable.map(item => {
if (item[1] !== 'Cash Flow') {
if (item[3] !== "submitted" && item[3] !== 'approved') {
canSubmit = false
array.push(item[3])
}
}
// if (item[1] !== 'Cash Flow') {
// if (item[3] !== "submitted" && item[3] !== 'approved') {
// canSubmit = false
// array.push(item[3])
// }
// }
// if (item[3].includes("not-yet") || item[3].includes("draft")) {
// array.push(item[3])
// } else {
......@@ -623,6 +635,10 @@ export default class OutlookPA extends Component {
}
render() {
const handleMaxDate = () => {
let handleDate = Number(moment(this.state.maxDateRevision).format('YYYYMMDD')) - Number(moment(this.state.minDateRevision).format('YYYYMMDD'))
return handleDate < 0 ? moment(this.state.minDateRevision).format('YYYY/MM/DD') : moment(this.state.maxDateRevision).format('YYYY/MM/DD')
}
const columns = ["#", "Report Type",
{
name: "Revision",
......@@ -694,20 +710,20 @@ export default class OutlookPA extends Component {
style={{
backgroundColor: 'transparent',
cursor: this.state.isSubmit === false ? 'default' : tableMeta.rowData[5] ? 'pointer' : 'default',
// cursor: tableMeta.rowData[5] ? 'pointer' : 'default',
borderColor: 'transparent'
}}
onClick={() =>
this.state.isSubmit === false ? null :
tableMeta.rowData[5] == true ?
this.clickDetail(tableMeta.rowData[1], tableMeta.rowData[4], tableMeta.rowData[2], tableMeta.rowData[3])
: null
tableMeta.rowData[5] == true ?
this.clickDetail(tableMeta.rowData[1], tableMeta.rowData[4], tableMeta.rowData[2], tableMeta.rowData[3])
: null
}
>
{/* {this.state.isApprover == true ?
(tableMeta.rowData[5] ? '#5198ea' : 'GrayText') :
(this.state.lastRevision == 0 ? (tableMeta.rowData[5] ? '#5198ea' : 'GrayText') :
(tableMeta.rowData[3] !== 'submitted' ? '#5198ea' : 'GrayText'))} */}
<Typography style={{ color: this.state.isSubmit === false ? 'GrayText' : tableMeta.rowData[5] ? '#5198ea' : 'GrayText', fontSize: 12, }}>Detail</Typography>
<Typography style={{ color: tableMeta.rowData[5] ? '#5198ea' : 'GrayText', fontSize: 12, }}>Detail</Typography>
</button>
</div >
);
......@@ -823,6 +839,18 @@ export default class OutlookPA extends Component {
pagination: false,
search: false
}
const optionsHistory = {
filter: false,
sort: false,
responsive: "scroll",
print: false,
download: false,
selectableRows: false,
viewColumns: false,
pagination: true,
search: false,
rowsPerPage: 5
}
const optionsRevision = {
filter: false,
sort: false,
......@@ -845,7 +873,7 @@ export default class OutlookPA extends Component {
</div>
);
return (
<div style={{ flex: 1, backgroundColor: '#f8f8f8' }}>
<div style={{ flex: 1, backgroundColor: '#f8f8f8' }} ref={this.myRef}>
<Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
<Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
{this.state.messageAlert}
......@@ -977,24 +1005,25 @@ export default class OutlookPA extends Component {
</div>
{!this.state.isApprover && (this.state.lastStatus === 'SUBMIT' || this.state.lastStatus === 'REVISION') && (
<div style={{ width: '50%' }}>
{this.state.listAttachment.length > 0 ?
this.state.listAttachment.map((item) => {
return (
<button
style={{
backgroundColor: 'transparent',
cursor: this.state.isSubmit === false ? 'default' : 'pointer',
borderColor: 'transparent',
outline: 'none',
display: 'grid'
}}
onClick={() => this.state.isSubmit === false ? null : this.deleteAttachment(item)}
>
<Typography style={{ fontSize: '13px', color: this.state.isSubmit === false ? 'GrayText' : '#ff3939' }}>Delete</Typography>
</button>
)
})
: null
{
this.state.listAttachment.length > 0 ?
this.state.listAttachment.map((item) => {
return (
<button
style={{
backgroundColor: 'transparent',
cursor: this.state.isSubmit === false ? 'default' : 'pointer',
borderColor: 'transparent',
outline: 'none',
display: 'grid'
}}
onClick={() => this.state.isSubmit === false ? null : this.deleteAttachment(item)}
>
<Typography style={{ fontSize: '13px', color: this.state.isSubmit === false ? 'GrayText' : '#ff3939' }}>Delete</Typography>
</button>
)
})
: null
}
</div>
)}
......@@ -1006,7 +1035,13 @@ export default class OutlookPA extends Component {
</div> : this.state.lastStatus === 'WAITING FOR YOUR APPROVAL' ?
<div style={{ width: '100%', padding: '10px 20px', backgroundColor: 'yellow', textAlign: 'center', marginTop: 20 }}>
<span>{this.state.lastStatus}</span>
</div> : null
</div> : this.state.lastStatus === 'WAITING FOR APPROVAL' ?
<div style={{ width: '100%', padding: '10px 20px', backgroundColor: 'yellow', textAlign: 'center', marginTop: 20 }}>
<span>{`${this.state.lastStatus} - ${this.state.pic}`}</span>
</div> : this.state.lastStatus === 'APPROVED' ?
<div style={{ width: '100%', padding: '10px 20px', backgroundColor: 'yellow', textAlign: 'center', marginTop: 20 }}>
<span>{`${this.state.lastStatus}`}</span>
</div> : null
:
this.state.lastStatus === 'SUBMITTED' ?
<div style={{ width: '100%', padding: '10px 20px', backgroundColor: 'yellow', textAlign: 'center', marginTop: 20 }}>
......@@ -1177,7 +1212,7 @@ export default class OutlookPA extends Component {
getReport={this.getOutlookPAID.bind(this)}
isApprover={this.state.isApprover}
lastStatus={this.state.lastStatus}
prevRevision={this.state.prevRevision}
prevRevision={this.state.isSubmit ? this.state.prevRevision : true}
status={this.state.status}
/>
)}
......@@ -1197,7 +1232,7 @@ export default class OutlookPA extends Component {
status={this.state.status}
isApprover={this.state.isApprover}
lastStatus={this.state.lastStatus}
prevRevision={this.state.prevRevision}
prevRevision={this.state.isSubmit ? this.state.prevRevision : true}
/>
)}
......@@ -1217,7 +1252,7 @@ export default class OutlookPA extends Component {
status={this.state.status}
isApprover={this.state.isApprover}
lastStatus={this.state.lastStatus}
prevRevision={this.state.prevRevision}
prevRevision={this.state.isSubmit ? this.state.prevRevision : true}
/>
)}
......@@ -1241,7 +1276,7 @@ export default class OutlookPA extends Component {
</div>
</div>
<div className="border-bottom" style={{ padding: 20 }}>
<span>Anda meminta anak perusahaan untuk melakukan revisi.</span>
<span>You ask your subsidiary to make a revision</span>
<div style={{ marginTop: 20 }}>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
......@@ -1252,7 +1287,7 @@ export default class OutlookPA extends Component {
</MuiThemeProvider>
</div>
<div style={{ marginTop: 20 }}>
<span>Durasi waktu yang anda berikan untuk revisi: </span>
<span>Timing duration you give for revision:</span>
<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 20 }}>
<div>
<DatePicker
......@@ -1260,7 +1295,9 @@ export default class OutlookPA extends Component {
id="startDate"
label="Valid From"
format="dd-MM-yyyy"
onChange={(e) => null}
// onChange={(e) => null}
onChange={(e) => this.setState({ minDateRevision: moment(e).format('YYYY/MM/DD') }, () => this.setState({ maxDateRevision: handleMaxDate() }))}
value={moment(this.state.minDateRevision).format('YYYY/MM/DD')}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
......@@ -1279,14 +1316,17 @@ export default class OutlookPA extends Component {
style={{ padding: 0, margin: 0, width: '100%' }}
/>
</div>
<span style={{ alignSelf: 'center' }}>Sampai dengan</span>
<span style={{ alignSelf: 'center' }}>Until</span>
<div>
<DatePicker
margin="normal"
id="startDate"
label="Valid To"
format="dd-MM-yyyy"
onChange={(e) => null}
// onChange={(e) => null}
onChange={(e) => this.setState({ maxDateRevision: moment(e).format('YYYY/MM/DD') })}
minDate={moment(this.state.minDateRevision).format('YYYY/MM/DD')}
value={moment(this.state.maxDateRevision).format('YYYY/MM/DD')}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
......
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