Skip to content

T
Tia-dev
Commit bd259167 authored by Dida Adams Arizona's avatar Dida Adams Arizona
Browse files
Options

Merge branch 'didam' into 'master' 

Didam

See merge request !966
parents cace6b4c 0df1af41
Show whitespace changes
Inline Side-by-side
Showing with 585 additions and 44 deletions
src/container/MonthlyReport.js
View file @ bd259167
import React, { Component } from 'react';
import { Typography, Paper, TextField, MenuItem, Select, FormControlLabel, Snackbar, withStyles, createMuiTheme, MuiThemeProvider, Checkbox } from '@material-ui/core';
import { Typography, Paper, TextField, MenuItem, Select, FormControlLabel, Snackbar, withStyles, createMuiTheme, MuiThemeProvider, Checkbox, Input } from '@material-ui/core';
import MUIDataTable from 'mui-datatables';
import Images from '../assets/Images';
import api from '../api';
......@@ -19,6 +19,8 @@ import Constant from '../library/Constant';
import OperatingIndicatorMR from './MonthlyReport/OperatingIndicatorMR';
import CorporateAnnualTargetMR from './MonthlyReport/CorporateAnnualTargetMR';
import CashFlowMR from './MonthlyReport/CashFlowMR';
import { DatePicker } from '@material-ui/pickers';
import moment from 'moment';
var ct = require("../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable());
......@@ -61,11 +63,17 @@ export default class MonthlyReport extends Component {
company_submit: null,
still_approver: false,
status: '',
lastStatus: ''
lastStatus: '',
approverTrue: false,
listStatus: [],
selectedStatus: []
}
this.myRef = React.createRef()
this.fileHandler = this.fileHandler.bind(this);
}
scrollToMyRef = () => window.scrollTo(0, this.myRef.current.offsetTop)
getPermission() {
let payload = {
menu: "monthly report"
......@@ -100,25 +108,43 @@ export default class MonthlyReport extends Component {
this.getPermission()
this.setState({ loading: true })
// this.getCompanyActive()
// this.getCompanySubmitted()
}
getChecApprover() {
let listStatus1 = [
{name: 'Open', value: 'not-yet'},
{name: 'Submitted', value: 'submitted'},
{name: 'Waiting for Review', value: 'approval_review'},
{name: 'Waiting for Approval', value: 'approval_process'},
{name: 'Revision', value: 'revision'},
{name: 'Approved', value: 'approved'},
]
let listStatus2 = [
{name: 'Open', value: 'not-yet'},
{name: 'Submitted', value: 'submitted'},
{name: 'Revision', value: 'revision'},
{name: 'Approved', value: 'approved'},
]
api.create().checkApproverMonthly().then(response => {
console.log(response)
if (response.data) {
if (response.data.status === "success") {
if (response.data.data.is_approver === true) {
this.setState({ isApprover: true, checkApprover: true, still_approver: true}, () =>
this.setState({ isApprover: true, checkApprover: true, still_approver: true, approverTrue: true, listStatus: listStatus1, selectedStatus: [listStatus1[0]]}, () =>
{
if (this.state.submittedOnly) {
// if (this.state.submittedOnly) {
this.getMonth()
} else {
this.getCompanyActive()
}
// } else {
// this.getCompanyActive()
// }
})
} else {
this.setState({ isApprover: false, checkApprover: false, still_approver: false }, () =>
this.getCompanyActive())
this.setState({ isApprover: false, checkApprover: false, still_approver: false, approverTrue: false, listStatus: listStatus2, selectedStatus: [listStatus2[0]]}, () =>
this.getMonth())
// this.getCompanyActive())
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
......@@ -185,8 +211,20 @@ export default class MonthlyReport extends Component {
item.revision
]
})
let dataTableRevision = []
response.data.data.map((item, index) => {
if (item.report_name !== 'Cash Flow') {
dataTableRevision.push([
item.report_id,
item.report_name === 'CAT' ? 'Corporate Annual Target' : item.report_name,
"",
item.number
])
}
})
// console.log(dataTable);
this.setState({ dataTable, loading: false })
this.setState({ dataTable, loading: false, dataTableRevision: dataTableRevision.sort((a, b) => a.number - b.number), dataForRevision: response.data.data })
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
......@@ -260,15 +298,17 @@ export default class MonthlyReport extends Component {
let index = data.sort((a, b) => a - b).findIndex((val) => val.month_name == month)
console.log(index);
this.setState({ listMonth: defaultProps, month: index == -1 ? monthData[0] : monthData[index] }, () => {
if (this.state.isApprover === true) {
if (this.state.submittedOnly) {
// if (this.state.isApprover === true) {
// if (this.state.submittedOnly) {
// console.log('masuk cuk')
// this.getPeriode()
// } else {
// this.getLastPeriod()
// }
// } else {
// this.getLastPeriod()
this.getPeriode()
} else {
this.getLastPeriod()
}
} else {
this.getLastPeriod()
}
// }
})
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
......@@ -299,6 +339,7 @@ export default class MonthlyReport extends Component {
getPeriode() {
api.create().getPeriodeTransaction().then(response => {
console.log(response)
let currentYear = new Date().getFullYear()
if (response.data) {
if (response.data.status === "success") {
......@@ -309,7 +350,10 @@ export default class MonthlyReport extends Component {
data.push(item)
}
} else {
if ((item >= 2000) && (item == this.state.lastPeriod || item < this.state.lastPeriod)) {
// if ((item >= 2000) && (item == this.state.lastPeriod || item < this.state.lastPeriod)) {
// data.push(item)
// }
if ((item >= 2000) && (item == currentYear || item <= currentYear + 1)) {
data.push(item)
}
}
......@@ -323,18 +367,19 @@ export default class MonthlyReport extends Component {
options: periodeData,
getOptionLabel: (option) => option.periode,
};
let periode = (this.state.lastPeriod == "" ? String(Number(currentYear) + 1) : this.state.lastPeriod === undefined ? String(Number(currentYear) + 1) : this.state.lastPeriod)
let periode = (this.state.lastPeriod == "" ? String(Number(currentYear)) : this.state.lastPeriod === undefined ? String(Number(currentYear)) : 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)
console.log(index)
this.setState({ listPeriode: defaultProps, periode: index === -1 ? periodeData[0] : periodeData[index] }, () => {
if (this.state.isApprover === true && this.state.submittedOnly) {
// if (this.state.isApprover === true && this.state.submittedOnly) {
this.getCompanySubmitted()
} else {
this.getRevision()
}
// console.log('masuk')
// } else {
// this.getRevision()
// }
})
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
......@@ -353,9 +398,13 @@ export default class MonthlyReport extends Component {
}
getCompanySubmitted() {
let selectedStatus = this.state.selectedStatus.map((item) => {
return item.value
})
let body = {
"periode": this.state.periode.periode,
"months": this.state.month.month_id,
"status": selectedStatus
}
api.create().getCompanySubmittedMonthly(body).then(response => {
console.log(response);
......@@ -478,9 +527,10 @@ export default class MonthlyReport extends Component {
// this.getReport()
// this.getReportAttachment()
api.create().checkApproverMonthly().then(response => {
console.log(response)
if (this.state.btnCreate === true && this.state.btnEdit === true) {
console.log('editable');
this.setState({ isApprover: this.state.still_approver? true : false, checkApprover: false })
this.setState({ isApprover: false, checkApprover: false })
} else {
console.log('just view');
this.setState({ isApprover: true, checkApprover: true })
......@@ -756,6 +806,98 @@ export default class MonthlyReport extends Component {
this.setState({ alert: false })
}
validate() {
this.setState({ loading: true }, () => {
document.body.style.overflow = 'hidden';
})
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[3].includes("not-yet") || item[3].includes("draft")) {
// array.push(item[3])
// } else {
// array.push(item[3])
// }
})
if (canSubmit === true) {
let body = {
submission_id: this.state.submissionID
}
api.create().submitMasterBudget(body).then(response => {
// // // console.log(response);
if (response.data) {
if (response.data.status === "success") {
this.getSubmission()
}
}
})
} else {
this.setState({ alert: true, messageAlert: 'Data Is Not Complete', tipeAlert: 'warning', loading: false }, () => {
document.body.style.overflow = 'unset';
})
}
// if (array.includes("not-yet" || "draft")) {
// // // console.log('gagal');
// } else {
// // // console.log('masuk');
// }
}
validateRevision() {
this.scrollToMyRef()
let arrayRevisi = this.state.detailRevisiCheck
let remarksKosong = 0
arrayRevisi.map((item, index) => {
if (item.remarks == "") {
remarksKosong += 1
}
})
// // console.log(arrayRevisi)
if (arrayRevisi.length == 0 || remarksKosong > 0) {
this.setState({ alert: true, messageAlert: 'Remarks Cannot be Empty', tipeAlert: 'error' })
} else {
this.setState({ visibleRevision: false }, () => this.approvalSubmission('revision'))
}
}
approvalSubmission(type) {
this.scrollToMyRef()
this.setState({ loading: true }, () => {
document.body.style.overflow = 'hidden';
})
let body = {
"approval_id": this.state.approverID,
"status": type,
"detail": this.state.detailRevisiCheck
}
let payload = {
"company_id": this.state.company.company_id,
"periode": this.state.periode.periode,
"min_periode": moment(this.state.minDateRevision).format('YYYY-MM-DD'),
"max_periode": moment(this.state.maxDateRevision).format('YYYY-MM-DD')
}
// // // console.log(payload)
// // console.log(this.props.location);
// // console.log(body)
api.create().approvalSubmission(body).then((res) => {
// // // console.log(res)
// this.setState({ loading: false }, () => {
// })
if (type == 'revision') {
api.create().createPeriodeRevision(payload).then((res))
}
this.getSubmission()
})
}
render() {
const columns = ["#", "Report Type",
{
......@@ -883,6 +1025,145 @@ export default class MonthlyReport extends Component {
rowsPerPage: 5
}
const optionsRevision = {
filter: false,
sort: false,
responsive: "scroll",
print: false,
download: false,
selectableRows: false,
viewColumns: false,
pagination: false,
search: false
}
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 handleChangeText = (value, tableMeta) => {
let dataTableRevision = this.state.dataTableRevision
dataTableRevision[tableMeta.rowIndex][tableMeta.columnIndex] = value
let detailRevisiCheck = this.state.detailRevisiCheck
let indexId = detailRevisiCheck.findIndex((val) => val.report_id == tableMeta.rowData[0])
if (indexId !== -1) {
detailRevisiCheck[indexId].remarks = value
}
this.setState({ dataTableRevision, detailRevisiCheck })
}
const handleCheckRevision = (value) => {
let detailRevisiCheck = this.state.detailRevisiCheck
let payload = {
report_id: value[0],
remarks: value[2],
number: value[3]
}
let indexDataRevisi = this.state.dataTableRevision.findIndex((val) => val[3] == value[3])
let indexId = detailRevisiCheck.sort((a, b) => a.number - b.number).findIndex((val) => val.number == value[3])
// // console.log(indexId)
if (indexId == -1) {
this.state.dataTableRevision.map((item, index) => {
if (index > indexDataRevisi) {
let indexIds = detailRevisiCheck.findIndex((val) => val.number == item[3])
if (indexIds == -1) {
let payload2 = {
report_id: item[0],
remarks: item[2],
number: item[3]
}
detailRevisiCheck.push(payload2)
}
}
})
detailRevisiCheck.push(payload)
} else {
let x = 0
detailRevisiCheck.sort((a, b) => a.number - b.number).map((item, index) => {
if (item.number < value[3]) {
x += 1
}
})
if (x < 1) {
this.state.dataTableRevision.map((item, index) => {
if (index > indexDataRevisi) {
let indexIdz = detailRevisiCheck.findIndex((val) => val.number == item[3])
if (indexIdz !== -1) {
detailRevisiCheck.splice(indexIdz, 1)
}
}
})
detailRevisiCheck.splice(indexId, 1)
}
}
this.setState({ detailRevisiCheck: detailRevisiCheck.sort((a, b) => a.number - b.number) })
// // console.log(detailRevisiCheck)
}
const columnRevisi = [
{
name: "#",
options: {
customBodyRender: (val, tableMeta, updateValue) => {
var list = [];
for (var i = 0; i <= tableMeta.rowData[6]; i++) {
list.push(i);
}
return (
<div style={{ display: 'flex' }}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<Checkbox
checked={this.state.detailRevisiCheck.findIndex((val) => val.report_id == tableMeta.rowData[0]) == -1 ? false : true}
onClick={() => handleCheckRevision(tableMeta.rowData)} />
}
/>
</div >
);
}
}
}, "Report Type",
{
name: 'Remarks',
options: {
customBodyRender: (value, tableMeta, updateValue) => {
return (
<div style={{ textAlign: 'left' }}>
<FormControlLabel
style={{ margin: 0 }}
// value={value}
control={
<Input
disableUnderline={true}
style={{ fontSize: 12, textAlign: 'center', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent', marginTop: -10 }}
type="text"
placeholder=""
defaultValue={value}
color={"#5198ea"}
onBlur={(event) => {
// // // console.log(event.target.value)
// updateValue(event.target.value)
handleChangeText(event.target.value, tableMeta)
// // // console.log(dataTable2)
}}
/>}
/>
</div>
)
}
}
}, {
name: "",
options: { display: false }
}
]
const loadingComponent = (
<div style={{ position: 'fixed', zIndex: 110, top: 0, left: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'rgba(255,255,255,0.8)' }}>
<PropagateLoader
......@@ -914,7 +1195,7 @@ export default class MonthlyReport extends Component {
</div>
<div style={{ padding: 20 }}>
<div style={{ display: 'flex' }}>
{this.state.isApprover?
{/* {this.state.isApprover?
<div className="grid grid-2x" style={{}}>
<div className="col-1" style={{ display: 'flex', maxWidth: '100%', paddingLeft: 0}}>
<Autocomplete
......@@ -976,18 +1257,18 @@ export default class MonthlyReport extends Component {
<Typography style={{ fontSize: '16px', color: '#4b4b4b', fontWeight: 'bold', marginLeft: 5, alignSelf: 'center'}}>Submitted Only</Typography>
</div>
</div>
:
: */}
<div style={{ display: 'flex' }}>
<Autocomplete
{...this.state.listMonth}
id="month"
onChange={(event, newInputValue) => this.setState({ month: newInputValue, loading: true }, () => {
if (this.state.isApprover === true) {
this.getCompanySubmitted()
} else {
// if (this.state.isApprover === true) {
// this.getCompanySubmitted()
// } else {
this.setState({ visibleTableHistory: false })
this.getRevision()
}
// }
})}
disableClearable
style={{ minWidth: 250, marginRight: 20 }}
......@@ -998,12 +1279,12 @@ export default class MonthlyReport extends Component {
{...this.state.listPeriode}
id="periode"
onChange={(event, newInputValue) => this.setState({ periode: newInputValue, loading: true }, () => {
if (this.state.isApprover === true) {
this.getCompanySubmitted()
} else {
// if (this.state.isApprover === true) {
// this.getCompanySubmitted()
// } else {
this.setState({ visibleTableHistory: false })
this.getRevision()
}
// }
})}
disableClearable
style={{ width: 250 }}
......@@ -1012,10 +1293,38 @@ export default class MonthlyReport extends Component {
/>
</div>
}
{/* } */}
</div>
<div style={{ marginTop: 20 }}>
<Autocomplete
multiple
id="tags-standard"
options={this.state.listStatus}
getOptionLabel={(option) => option.name}
style={{ width: 250 }}
onChange={(event, newInputValue) => {
this.setState({selectedStatus: newInputValue}, () => {
this.getCompanySubmitted()
})
}}
value={this.state.selectedStatus}
renderInput={(params) => <TextField {...params} label="Submission Status" margin="normal" style={{ marginTop: 7 }} />}
/>
{/* <Autocomplete
{...this.state.listCompany}
multiple
id="company"
disabled={this.state.listCompany === null ? true : false}
onChange={(event, newInputValue) => this.setState({ company: newInputValue }, () => {
this.getMonthlyReportID()
})}
style={{ width: 250 }}
renderInput={(params) => <TextField {...params} label="Company" margin="normal" style={{ marginTop: 7 }} />}
value={[this.state.listCompany[0]]}
/> */}
</div>
<div style={{ marginTop: 20 }}>
<Autocomplete
......@@ -1061,7 +1370,7 @@ export default class MonthlyReport extends Component {
<div style={{ width: '50%' }}>
<Typography style={{ fontSize: '16px', color: '#4b4b4b', fontWeight: 'bold' }}>Attachment: </Typography>
</div>
{!this.state.isApprover && (this.state.lastStatus === 'SUBMIT' || this.state.lastStatus === 'REVISION') && (
{!this.state.approverTrue && (this.state.lastStatus === 'SUBMIT' || this.state.lastStatus === 'REVISION') && (
<div style={{ width: '50%' }}>
<button
style={{
......@@ -1107,7 +1416,7 @@ export default class MonthlyReport extends Component {
: null
}
</div>
{!this.state.isApprover && (this.state.lastStatus === 'SUBMIT' || this.state.lastStatus === 'REVISION') && (
{!this.state.approverTrue && (this.state.lastStatus === 'SUBMIT' || this.state.lastStatus === 'REVISION') && (
<div style={{ width: '50%' }}>
{
this.state.listAttachment.length > 0 ?
......@@ -1132,7 +1441,7 @@ export default class MonthlyReport extends Component {
</div>
)}
</div>
{this.state.checkApprover === true ?
{this.state.approverTrue === true ?
this.state.lastStatus === 'WAITING FOR REVIEW' ?
<div style={{ width: '100%', padding: '10px 20px', backgroundColor: 'yellow', textAlign: 'center', marginTop: 20 }}>
<span>{this.state.lastStatus}</span>
......@@ -1176,11 +1485,125 @@ export default class MonthlyReport extends Component {
</div>
)}
</div>
{this.state.isAdmin && this.state.lastStatus == 'APPROVED' ?
<div className="grid grid-2x" style={{ borderTop: 'solid 1px #c4c4c4', padding: 10, backgroundColor: '#f5f5f5', width: '100%', }}>
<div className="col-1" />
<div className="col-2" style={{ display: 'flex', justifyContent: 'flex-end', maxWidth: '100%' }}>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none',
marginRight: 20
}}
onClick={() => this.setState({ visibleRevision: true })}
>
<div style={{ backgroundColor: '#019ce5', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Revision</Typography>
</div>
</button>
{/* <button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none',
}}
onClick={() => this.approvalSubmission('approve')}
>
<div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Approve</Typography>
</div>
</button> */}
</div>
</div>
:
this.state.checkApprover === true ?
this.state.lastStatus === 'WAITING FOR REVIEW' ?
<div style={{ borderTop: 'solid 1px #c4c4c4', padding: 10, backgroundColor: '#f5f5f5', width: '100%', display: 'flex', justifyContent: 'flex-end' }} >
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none',
}}
onClick={() =>
this.approvalSubmission('review')
}
>
<div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Review</Typography>
</div>
</button>
</div> : (this.state.lastStatus === 'WAITING FOR YOUR APPROVAL' && this.state.btnApprove) ?
<div className="grid grid-2x" style={{ borderTop: 'solid 1px #c4c4c4', padding: 10, backgroundColor: '#f5f5f5', width: '100%', }}>
<div className="col-1" />
<div className="col-2" style={{ display: 'flex', justifyContent: 'flex-end', maxWidth: '100%' }}>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none',
marginRight: 20
}}
onClick={() => this.setState({ visibleRevision: true })}
>
<div style={{ backgroundColor: '#019ce5', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Revision</Typography>
</div>
</button>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none',
}}
onClick={() => this.approvalSubmission('approve')}
>
<div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Approve</Typography>
</div>
</button>
</div>
</div> : null
:
(this.state.lastStatus === 'SUBMIT' || this.state.lastStatus === 'REVISION') && this.state.isSubmit === true ?
<div style={{ borderTop: 'solid 1px #c4c4c4', padding: 10, backgroundColor: '#f5f5f5', width: '100%', display: 'flex', justifyContent: 'flex-end' }} >
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none',
}}
onClick={() => this.validate()}
>
<div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Submit</Typography>
</div>
</button>
</div> :
this.state.lastStatus === 'SUBMITTED' && this.state.submitter ?
<div style={{ borderTop: 'solid 1px #c4c4c4', padding: 10, backgroundColor: '#f5f5f5', width: '100%', display: 'flex', justifyContent: 'flex-end' }} >
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none',
}}
onClick={() => this.approvalSubmission('cancel')}
>
<div style={{ backgroundColor: 'gray', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Cancel</Typography>
</div>
</button>
</div> : null
}
</Paper>
</div>
......@@ -1370,6 +1793,124 @@ export default class MonthlyReport extends Component {
lastStatus={this.state.lastStatus}
/>
)}
{
this.state.visibleRevision && (
<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' }}>Revision</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.setState({ visibleRevision: false })}
>
<img src={Images.close} />
</button>
</div>
</div>
<div className="border-bottom" style={{ padding: 20 }}>
<span>You ask your subsidiary to make a revision</span>
<div style={{ marginTop: 20 }}>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={this.state.dataTableRevision}
columns={columnRevisi}
options={optionsRevision}
/>
</MuiThemeProvider>
</div>
<div style={{ marginTop: 20 }}>
<span>Timing duration you give for revision:</span>
<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 20 }}>
<div>
<DatePicker
margin="normal"
id="startDate"
label="Valid From"
format="dd-MM-yyyy"
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',
}}
inputProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
style={{ padding: 0, margin: 0, width: '100%' }}
/>
</div>
<span style={{ alignSelf: 'center' }}>Until</span>
<div>
<DatePicker
margin="normal"
id="startDate"
label="Valid To"
format="dd-MM-yyyy"
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',
}}
inputProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
style={{ padding: 0, margin: 0, width: '100%' }}
/>
</div>
</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.setState({ visibleRevision: false })}
>
<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.validateRevision()}
>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Revision</span>
</div>
</button>
</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