Skip to content

T
Tia-dev
Commit 48725352 authored by Deni Rinaldi's avatar Deni Rinaldi
Browse files
Options

Merge branch 'riri' into 'master' 

gabut

See merge request !467
parents 0a403cf3 26fadb2f
Hide whitespace changes
Inline Side-by-side
Showing with 950 additions and 169 deletions
src/container/RollingOutlook.js
View file @ 48725352
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Typography, Paper, TextField, MenuItem, Select, FormControlLabel } 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 MUIDataTable from 'mui-datatables';
import Images from '../assets/Images'; import Images from '../assets/Images';
import api from '../api'; import api from '../api';
import Autocomplete from '@material-ui/lab/Autocomplete'; import Autocomplete from '@material-ui/lab/Autocomplete';
import MuiAlert from '@material-ui/lab/Alert';
import { titleCase } from '../library/Utils'; import { titleCase } from '../library/Utils';
import { ExcelRenderer } from 'react-excel-renderer'; import { ExcelRenderer } from 'react-excel-renderer';
import UploadFile from "../library/Upload"; import UploadFile from "../library/Upload";
import { format } from 'date-fns'; import { format } from 'date-fns';
import Constant from '../library/Constant';
import PropagateLoader from "react-spinners/PropagateLoader"
import { DatePicker } from '@material-ui/pickers';
import moment from 'moment';
import BalanceSheetRO from './RollingOutlook/BalanceSheetRO'; import BalanceSheetRO from './RollingOutlook/BalanceSheetRO';
var ct = require("../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable());
const Alert = withStyles({
})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
export default class RollingOutlook extends Component { export default class RollingOutlook extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
...@@ -17,23 +28,115 @@ export default class RollingOutlook extends Component { ...@@ -17,23 +28,115 @@ export default class RollingOutlook extends Component {
perusahaan: 'TAP Group', perusahaan: 'TAP Group',
listRevision: null, listRevision: null,
revision: null, revision: null,
visibleRollingOutlook: true,
visibleBS: false,
listPeriode: null, listPeriode: null,
periode: null, periode: null,
listCompany: null, listCompany: null,
company: null, company: null,
report_id: null, report_id: null,
visibleRollingOutlook: true,
visibleBS: false,
visiblePL: false, visiblePL: false,
visibleTP: false,
visibleCAT: false, visibleCAT: false,
listAttachment: [], listAttachment: [],
visibleUpload: false visibleUpload: false,
revisionTable: null,
alert: false,
tipeAlert: '',
messageAlert: '',
submissionID: null,
isSubmit: false,
visibleTableHistory: false,
isApprover: false,
lastStatus: "",
intent: "",
approverID: null,
pic: '',
submitter: false,
detailRevisiCheck: [],
lastRevision: "",
checkApprover: false,
lastPeriod: '',
latestPeriode: '',
minDateRevision: new Date(),
maxDateRevision: new Date(),
btnApprove: false
} }
this.myRef = React.createRef()
this.fileHandler = this.fileHandler.bind(this); this.fileHandler = this.fileHandler.bind(this);
} }
scrollToMyRef = () => window.scrollTo(0, this.myRef.current.offsetTop)
componentDidMount() { componentDidMount() {
this.getCompanyActive() this.setState({ loading: true })
this.props.selectIndex('Rolling Outlook & CAT')
if (this.props.location.state !== undefined) {
console.log(this.props);
this.setState({ userType: this.props.location.state.userType, intent: 'Home', lastPeriod: this.props.location.state.rawData.periode, rawData: this.props.location.state.rawData }, () => {
this.checkApprover()
})
} else {
this.checkApprover()
}
}
checkApprover() {
api.create().checkApprover().then(response => {
console.log(response);
if (response.data.data.is_approver === true) {
this.setState({ isApprover: true, checkApprover: true }, () =>
this.getPeriode())
} else {
this.setState({ isApprover: false, checkApprover: false }, () =>
this.getDetailUser())
}
})
}
getCompanySubmitted() {
let body = {
"periode": this.state.periode.periode
}
api.create().getCompanySubmitted(body).then(response => {
console.log(response);
if (response.data) {
if (response.data.status === 'success') {
let data = response.data.data
let companyData = data.map((item) => {
return {
company_id: item.company_id,
company_name: item.company_name,
}
})
let defaultProps = {
options: companyData,
getOptionLabel: (option) => titleCase(option.company_name),
};
this.setState({ listCompany: defaultProps, company: companyData[0] }, () => {
// console.log(response.data.data);
if (response.data.data.length > 0) {
this.getRevision()
} else {
this.setState({ listRevision: null, revision: null, dataTable: [], loading: false, checkApprover: false, lastRevision: "", visibleTableHistory: false })
}
//
})
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error', listCompany: null, company: null })
}
})
} }
getReportAttachment() { getReportAttachment() {
...@@ -43,6 +146,7 @@ export default class RollingOutlook extends Component { ...@@ -43,6 +146,7 @@ export default class RollingOutlook extends Component {
"revision": this.state.revision.revision, "revision": this.state.revision.revision,
} }
api.create().getMasterBudgetAtt(payload).then(response => { api.create().getMasterBudgetAtt(payload).then(response => {
console.log(response)
if (response.data) { if (response.data) {
if (response.data.status === "success") { if (response.data.status === "success") {
this.setState({ listAttachment: response.data.data }) this.setState({ listAttachment: response.data.data })
...@@ -59,7 +163,7 @@ export default class RollingOutlook extends Component { ...@@ -59,7 +163,7 @@ export default class RollingOutlook extends Component {
"report_type": "Rolling Outlook", "report_type": "Rolling Outlook",
} }
api.create().getReportTypeBody(payload).then(response => { api.create().getReportTypeBody(payload).then(response => {
// console.log(response); console.log(response);
if (response.data) { if (response.data) {
if (response.data.status === "success") { if (response.data.status === "success") {
let dataTable = response.data.data.map((item, index) => { let dataTable = response.data.data.map((item, index) => {
...@@ -67,14 +171,56 @@ export default class RollingOutlook extends Component { ...@@ -67,14 +171,56 @@ export default class RollingOutlook extends Component {
item.number, item.number,
item.report_name, item.report_name,
item.revision, item.revision,
item.current_status, this.state.isSubmit === false ? "CLOSED" : item.current_status,
item.report_id, item.report_id,
item.is_can_upload, Number(item.revision) > 0 ? (item.current_status == "not-yet" ? false : item.is_can_upload) : item.is_can_upload,
item.revision item.revision
] ]
}) })
let dataTableRevision = response.data.data.map((item, index) => {
return [
item.report_id,
item.report_name,
""
]
})
// console.log(dataTable); // console.log(dataTable);
this.setState({ dataTable }) this.setState({ dataTable, loading: false, dataTableRevision, dataForRevision: response.data.data })
}
} else {
this.setState({ loading: false })
}
})
}
getLatestPeriodSubmit() {
let body = {
"company_id": this.state.company.company_id,
"periode": this.state.periode.periode
}
api.create().getSubmitMasterBudget(body).then(response => {
console.log(response);
if (response.data) {
if (response.data.status === "success") {
this.setState({ isSubmit: response.data.data.is_can_submit }, () => {
this.getReport()
this.getReportAttachment()
})
}
}
})
}
getDetailUser() {
let userId = localStorage.getItem(Constant.USER)
api.create().getDetailUser(userId).then((response) => {
if (response.data) {
if (response.ok) {
if (response.data.status === 'success') {
this.setState({ userCompany: response.data.data.company }, () => {
this.getCompanyActive()
})
}
} }
} }
}) })
...@@ -82,34 +228,81 @@ export default class RollingOutlook extends Component { ...@@ -82,34 +228,81 @@ export default class RollingOutlook extends Component {
getCompanyActive() { getCompanyActive() {
api.create().getPerusahaanActive().then((response) => { api.create().getPerusahaanActive().then((response) => {
if (response.data.status === 'success') { console.log(response);
let data = response.data.data if (response.data) {
let companyData = data.map((item) => { if (response.data.status === 'success') {
return { let data = response.data.data
company_id: item.company_id, let comID = this.state.rawData ? this.state.rawData.company_id : 0
company_name: item.company_name, let companyData = data.map((item) => {
} return {
}) company_id: item.company_id,
let defaultProps = { company_name: item.company_name,
options: companyData, }
getOptionLabel: (option) => titleCase(option.company_name), })
};
this.setState({ listCompany: defaultProps, company: companyData[0] }, () => { let arrayBaru = []
this.state.userCompany.map((item, index) => {
let indexID = companyData.findIndex((val) => val.company_id == item)
if (indexID !== -1) {
arrayBaru.push(companyData[indexID])
}
})
let defaultProps = {
options: arrayBaru,
getOptionLabel: (option) => titleCase(option.company_name),
};
let index = arrayBaru.findIndex((val) => val.company_id == comID)
this.setState({ listCompany: defaultProps, company: arrayBaru.length < 1 ? companyData[0] : (index == -1 ? arrayBaru[0] : arrayBaru[index]) }, () => {
this.getLastPeriod()
})
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error', listCompany: null, company: null })
}
})
}
getLastPeriod() {
api.create().getLastPeriod(this.state.company.company_id).then(response => {
console.log(response);
if (response.data.status === "success") {
this.setState({ lastPeriod: response.data.data.last_periode, latestPeriode: response.data.data.latest_periode }, () => {
this.getPeriode() this.getPeriode()
}) })
} else {
alert(response.data.message)
} }
}) })
} }
getPeriode() { getPeriode() {
api.create().getPeriodeTransaction().then(response => { api.create().getPeriodeTransaction().then(response => {
let dateNow = new Date // let dateNow = new Date
let year = format(dateNow, 'yyyy') // let year = this.state.rawData ? this.state.rawData.periode : format(dateNow, 'yyyy')
let currentYear = new Date().getFullYear()
// console.log(currentYear)
if (response.data) { if (response.data) {
if (response.data.status === "success") { if (response.data.status === "success") {
let data = response.data.data let data = []
response.data.data.map((item) => {
if (this.state.isApprover) {
if (item >= 2000 && item <= (Number(currentYear) + 1)) {
data.push(item)
}
} else {
if ((item >= 2000) && (item == this.state.lastPeriod || item < this.state.lastPeriod)) {
data.push(item)
}
}
})
let periodeData = data.map((item) => { let periodeData = data.map((item) => {
return { return {
periode: item, periode: item,
...@@ -119,9 +312,17 @@ export default class RollingOutlook extends Component { ...@@ -119,9 +312,17 @@ export default class RollingOutlook extends Component {
options: periodeData, options: periodeData,
getOptionLabel: (option) => option.periode, getOptionLabel: (option) => option.periode,
}; };
let index = data.sort((a, b) => a - b).findIndex((val) => val == year) let index = data.sort((a, b) => a - b).findIndex((val) => val === (this.state.lastPeriod == "" ? String(Number(currentYear) + 1) : this.state.lastPeriod))
this.setState({ listPeriode: defaultProps, periode: index == -1 ? periodeData[0] : periodeData[index] }, () => { // console.log(data)
this.getRevision() 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.getCompanySubmitted()
} else {
this.getRevision()
}
}) })
} }
} }
...@@ -148,57 +349,150 @@ export default class RollingOutlook extends Component { ...@@ -148,57 +349,150 @@ export default class RollingOutlook extends Component {
getOptionLabel: (option) => option.revision, getOptionLabel: (option) => option.revision,
}; };
this.setState({ listRevision: defaultProps, revision: revisionData[0] }, () => { this.setState({ listRevision: defaultProps, revision: revisionData[0] }, () => {
this.getReport() this.getSubmission()
this.getReportAttachment()
}) })
} }
} }
}) })
} }
clickDetail(item, id) { getSubmission() {
this.setState({ report_id: id }) this.setState({ loading: true })
if (item === 'Balance Sheet') { let payload = {
this.setState({ "company_id": this.state.company.company_id,
visibleRollingOutlook: false, "periode": this.state.periode.periode,
visibleBS: true, "is_approver": this.state.isApprover
visiblePL: false, }
visibleCAT: false, api.create().getSubmission(payload).then(response => {
visibleTP: false, console.log(response)
}) if (response) {
} else if (item === 'Profit & Loss') { if (response.data.status === "success") {
this.setState({ this.setState({
visibleRollingOutlook: false, submissionID: response.data.data.submission_id,
visibleBS: false, submitter: response.data.data.submitter,
visiblePL: true, approverID: response.data.data.approve_id, pic: response.data.data.approver == null ? '' : response.data.data.approver,
visibleCAT: false, lastStatus: response.data.data.last_status === null ? 'SUBMIT' : response.data.data.last_status,
visibleTP: false loading: false,
}) lastRevision: response.data.data.last_revision,
} else if (item === 'Tax Planning') { btnApprove: response.data.data.is_submit
this.setState({ }, () => {
visibleRollingOutlook: false, console.log(this.state.lastStatus);
visibleBS: false, this.historyApproval()
visiblePL: false, this.getLatestPeriodSubmit()
visibleCAT: false, api.create().checkApprover().then(response => {
visibleTP: true // console.log(response);
}) if (response.data.data.is_approver === true) {
} else if (item === 'Fixed Assets Movement') { this.setState({ isApprover: true, checkApprover: true })
this.setState({ } else {
visibleRollingOutlook: false, this.setState({ isApprover: this.state.lastStatus === "SUBMITTED" ? true : false, checkApprover: false })
visibleBS: false, }
visiblePL: false,
visibleCAT: false, })
visibleTP: false })
}) } else {
} else if (item === 'CAT') { this.setState({ submissionID: null, loading: false })
this.setState({ }
visibleRollingOutlook: false, }
visibleBS: false, })
visiblePL: false, }
visibleCAT: true,
visibleTP: false historyApproval() {
}) let body = {
"company_id": this.state.company.company_id,
"periode": this.state.periode.periode
} }
api.create().historyApproval(body).then(response => {
console.log(response);
if (response.data.data.length > 0) {
let dataTableHistory = response.data.data.map(item => {
return [
item.pic,
item.status_approval,
item.remarks,
item.item_revision,
item.history_approval_date
]
})
this.setState({ dataTableHistory, visibleTableHistory: true })
}
})
}
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
}
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)
this.setState({ loading: false }, () => {
this.getSubmission()
})
if (type == 'revision') {
api.create().createPeriodeRevision(payload).then((res) => console.log(res))
}
})
}
clickDetail(item, id, revision, status) {
console.log(this.state.dataForRevision);
this.state.dataForRevision.map(i => {
if (i.report_name === item) {
if (i.revision !== revision) {
this.setState({ prevRevision: true })
} else {
this.setState({ prevRevision: false })
}
}
})
this.setState({
report_id: id,
revisionTable: revision,
status: status
}, () => {
if (item === 'Balance Sheet') {
this.setState({
visibleRollingOutlook: false,
visibleBS: true,
visiblePL: false,
visibleCAT: false,
visibleTP: false,
})
} else if (item === 'Profit Loss') {
this.setState({
visibleRollingOutlook: false,
visibleBS: false,
visiblePL: true,
visibleCAT: false,
visibleTP: false,
})
} else if (item === 'Tax Planning') {
this.setState({
visibleRollingOutlook: false,
visibleBS: false,
visiblePL: false,
visibleCAT: false,
visibleTP: true,
})
} else if (item === 'CAT') {
this.setState({
visibleRollingOutlook: false,
visibleBS: false,
visiblePL: false,
visibleCAT: true,
visibleTP: false,
})
}
})
} }
handleChange(value, tableMeta) { handleChange(value, tableMeta) {
...@@ -229,17 +523,129 @@ export default class RollingOutlook extends Component { ...@@ -229,17 +523,129 @@ export default class RollingOutlook extends Component {
if (response.data) { if (response.data) {
if (response.data.status === "success") { if (response.data.status === "success") {
this.setState({ visibleUpload: false }, () => { this.setState({ visibleUpload: false }, () => {
this.getReport() this.getSubmission()
this.getReportAttachment() })
}
}
})
}
deleteAttachment(item) {
api.create().deleteAttachment(item.attachment_id).then(response => {
if (response.data) {
if (response.data.status === "success") {
this.getSubmission()
}
}
})
}
closeAlert() {
this.setState({ alert: false })
}
saveToMasterBudget(data) {
this.setState({ loading: true })
// console.log(JSON.stringify(data));
api.create('UPLOAD').createSubmitReport(data).then(response => {
console.log(response);
if (response.data) {
if (response.data.status === "success") {
this.getSubmission()
} else {
this.setState({ loading: false }, () => {
this.getSubmission()
}) })
} }
} else {
this.setState({ loading: false }, () => {
this.getSubmission()
})
} }
// console.log(response)
}) })
} }
async downloadAttachment(fileurl, name) {
let length = name.split(".").length
let fileType = name.split(".")[length - 1]
console.log(fileType);
let url = `https://tia.eksad.com/tia-reporting-dev/public/transaction/master_budget/download_attachment?fileName=${fileurl}&&fileType=${fileType}`
// console.log(url);
let res = await fetch(
`https://tia.eksad.com/tia-reporting-dev/public/transaction/master_budget/download_attachment?fileName=${fileurl}&&fileType=${fileType}`
)
res = await res.blob()
this.setState({ loading: false })
if (res.size > 0) {
let url = window.URL.createObjectURL(res);
let a = document.createElement('a');
a.href = url;
a.download = 'Rolling Outlook Attachment.xlsx';
a.click();
}
}
validate() {
this.setState({ loading: true })
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 })
}
// if (array.includes("not-yet" || "draft")) {
// console.log('gagal');
// } else {
// console.log('masuk');
// }
}
validateRevision() {
let arrayRevisi = this.state.detailRevisiCheck
let remarksKosong = 0
arrayRevisi.map((item,index) => {
if (item.remarks == "") {
remarksKosong += 1
}
})
if (remarksKosong > 0) {
this.setState({ alert: true, messageAlert: 'Remarks Cannot be Empty', tipeAlert: 'error' })
} else {
this.setState({ visibleRevision: false }, () => this.approvalSubmission('revision'))
}
}
render() { render() {
const columns = ["#", "Jenis Laporan", 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", name: "Revision",
options: { options: {
...@@ -280,10 +686,20 @@ export default class RollingOutlook extends Component { ...@@ -280,10 +686,20 @@ export default class RollingOutlook extends Component {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
{val === "submitted" || val === "approved" ? {val === "submitted" || val === "approved" ?
<img src={Images.ceklis} style={{ width: 31, height: 24 }} /> : <span>COMPLETED</span> :
val === "revision" ? val === "draft" ?
<span>Revisi</span> : <span>DRAFT</span> :
null val === "revision" ?
<span>REVISION</span> :
val === "approval_proccess" ?
<span>APPROVAL PROCCESS</span> :
val === "approval_review" ?
<span>APPROVAL REVIEW</span> :
val === "not-yet" ?
<span>OPEN</span> :
val === "CLOSED" ?
<span>CLOSED</span> :
<img src={Images.cross} style={{ width: 31, height: 24 }} />
} }
</div > </div >
); );
...@@ -299,13 +715,19 @@ export default class RollingOutlook extends Component { ...@@ -299,13 +715,19 @@ export default class RollingOutlook extends Component {
<button <button
style={{ style={{
backgroundColor: 'transparent', backgroundColor: 'transparent',
cursor: tableMeta.rowData[5] ? 'pointer' : null, cursor: tableMeta.rowData[5] ? 'pointer' : 'default',
borderColor: 'transparent' borderColor: 'transparent'
}} }}
onClick={() => onClick={() =>
tableMeta.rowData[5] ? this.clickDetail(tableMeta.rowData[1], tableMeta.rowData[4]) : 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: tableMeta.rowData[5] ? '#5198ea' : 'GrayText', fontSize: 12, }}>Detail</Typography> <Typography style={{ color: tableMeta.rowData[5] ? '#5198ea' : 'GrayText', fontSize: 12, }}>Detail</Typography>
</button> </button>
</div > </div >
...@@ -319,23 +741,98 @@ export default class RollingOutlook extends Component { ...@@ -319,23 +741,98 @@ export default class RollingOutlook extends Component {
name: "", name: "",
options: { display: false } options: { display: false }
}] }]
const dataTable = [
["1", "Balance Sheet", "done"], const columnsHistory = [
["2", "Profit & Loss", ""], "Name", "Status", "Remarks", "Revision Item", "Date"
["3", "CAT", "done"], ]
["4", "Fixed Assets Movement", ""],
["5", "Tax Planning", "done"], const columnRevisi = [
["6", "Balance Sheet", "done"], {
["7", "Profit & Loss", ""], name: "#",
["8", "CAT", "done"], options: {
["9", "Fixed Assets Movement", ""], customBodyRender: (val, tableMeta, updateValue) => {
["10", "Tax Planning", "done"], var list = [];
["11", "Balance Sheet", "done"], for (var i = 0; i <= tableMeta.rowData[6]; i++) {
["12", "Profit & Loss", "done"], list.push(i);
["13", "CAT", "done"], }
["14", "Fixed Assets Movement", "done"], return (
["15", "Tax Planning", "done"], <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>
)
}
}
}
] ]
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]
}
let indexId = detailRevisiCheck.findIndex((val) => val.report_id == value[0])
if (indexId == -1) {
detailRevisiCheck.push(payload)
} else {
detailRevisiCheck.splice(indexId, 1)
}
this.setState({ detailRevisiCheck })
console.log(detailRevisiCheck)
}
const options = { const options = {
filter: false, filter: false,
sort: false, sort: false,
...@@ -344,40 +841,47 @@ export default class RollingOutlook extends Component { ...@@ -344,40 +841,47 @@ export default class RollingOutlook extends Component {
download: false, download: false,
selectableRows: false, selectableRows: false,
viewColumns: false, viewColumns: false,
rowsPerPage: 5, pagination: false,
rowsPerPageOptions: [5, 25, 100],
search: false search: false
} }
const periode = [ const optionsRevision = {
{ value: '2021', label: '2021' }, filter: false,
{ value: '2020', label: '2020' }, sort: false,
{ value: '2019', label: '2019' }, responsive: "scroll",
{ value: '2018', label: '2018' }, print: false,
{ value: '2017', label: '2017' }, download: false,
{ value: '2016', label: '2016' }, selectableRows: false,
] viewColumns: false,
const perusahaan = [ pagination: false,
{ value: 'TAP Group', label: 'TAP Group' }, search: false
{ value: '2019', label: '2019' }, }
{ value: '2018', label: '2018' }, const loadingComponent = (
{ value: '2017', label: '2017' }, <div style={{ position: 'absolute', zIndex: 110, top: 0, left: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'rgba(255,255,255,0.8)' }}>
{ value: '2016', label: '2016' }, <PropagateLoader
] // css={override}
const revisi = [ size={20}
{ value: '0', label: '0' }, color={"#274B80"}
{ value: '1', label: '1' }, loading={this.state.loading}
] />
</div>
);
return ( 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}
</Alert>
</Snackbar>
{this.state.loading && loadingComponent}
{this.state.visibleRollingOutlook && ( {this.state.visibleRollingOutlook && (
<div> <div>
<div className={"main-color"} style={{ height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20 }}> <div className={"main-color"} style={{ height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>Rolling Outlook & Revisi CAT</Typography> <Typography style={{ fontSize: '16px', color: 'white' }}>Rolling Outlook & CAT Revision</Typography>
</div> </div>
<div style={{ padding: 20, width: '100%' }}> <div style={{ padding: 20, width: '100%' }}>
<Paper style={{ paddingTop: 10 }}> <Paper style={{ paddingTop: 10 }}>
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} > <div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
<Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Rolling Outlook & Revisi CAT</Typography> <Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Rolling Outlook & CAT</Typography>
</div> </div>
<div style={{ padding: 20 }}> <div style={{ padding: 20 }}>
<div> <div>
...@@ -385,13 +889,19 @@ export default class RollingOutlook extends Component { ...@@ -385,13 +889,19 @@ export default class RollingOutlook extends Component {
{...this.state.listPeriode} {...this.state.listPeriode}
id="periode" id="periode"
onChange={(event, newInputValue) => this.setState({ periode: newInputValue }, () => { onChange={(event, newInputValue) => this.setState({ periode: newInputValue }, () => {
this.getReport() if (this.state.isApprover === true) {
this.getReportAttachment() this.getCompanySubmitted()
} else {
this.setState({ visibleTableHistory: false })
this.getRevision()
}
})} })}
debug disabled={this.state.intent === 'Home' ? true : false}
disableClearable disableClearable
style={{ width: 250 }} style={{ width: 250 }}
renderInput={(params) => <TextField {...params} label="Periode" margin="normal" style={{ marginTop: 7 }} />} renderInput={(params) =>
<TextField {...params} label="Period" margin="normal" style={{ marginTop: 7 }}
/>}
value={this.state.periode} value={this.state.periode}
/> />
</div> </div>
...@@ -399,11 +909,11 @@ export default class RollingOutlook extends Component { ...@@ -399,11 +909,11 @@ export default class RollingOutlook extends Component {
<Autocomplete <Autocomplete
{...this.state.listCompany} {...this.state.listCompany}
id="company" id="company"
disabled={this.state.intent === 'Home' ? true : false}
onChange={(event, newInputValue) => this.setState({ company: newInputValue }, () => { onChange={(event, newInputValue) => this.setState({ company: newInputValue }, () => {
this.getReport() this.setState({ visibleTableHistory: false })
this.getReportAttachment() this.getRevision()
})} })}
debug
disableClearable disableClearable
style={{ width: 250 }} style={{ width: 250 }}
renderInput={(params) => <TextField {...params} label="Company" margin="normal" style={{ marginTop: 7 }} />} renderInput={(params) => <TextField {...params} label="Company" margin="normal" style={{ marginTop: 7 }} />}
...@@ -411,74 +921,228 @@ export default class RollingOutlook extends Component { ...@@ -411,74 +921,228 @@ export default class RollingOutlook extends Component {
/> />
</div> </div>
<div style={{ marginTop: 20 }}> <div style={{ marginTop: 20 }}>
<Autocomplete {/* <Autocomplete
{...this.state.listRevision} {...this.state.listRevision}
id="revision" id="revision"
onChange={(event, newInputValue) => this.setState({ revision: newInputValue }, () => { onChange={(event, newInputValue) => this.setState({ revision: newInputValue }, () => {
this.getReport() this.getReport()
this.getReportAttachment() this.getReportAttachment()
})} })}
debug disabled={true}
disableClearable disableClearable
style={{ width: 250 }} style={{ width: 250 }}
renderInput={(params) => <TextField {...params} label="Revision" margin="normal" style={{ marginTop: 7 }} />} renderInput={(params) => <TextField {...params} label="Revision" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.revision} value={this.state.revision}
/> /> */}
<TextField disabled={true} label="Revision" margin="normal" style={{ marginTop: 7, width: 250 }} value={this.state.lastRevision} />
</div> </div>
<div style={{ marginTop: 20 }}> <div style={{ marginTop: 20 }}>
<MUIDataTable <MuiThemeProvider theme={getMuiTheme()}>
data={this.state.dataTable} <MUIDataTable
columns={columns} data={this.state.dataTable}
options={options} columns={columns}
/> options={options}
/>
</MuiThemeProvider>
</div> </div>
<div style={{ display: 'flex', marginTop: 20 }}> <div style={{ display: 'flex', marginTop: 20 }}>
<div style={{ width: '50%' }}> <div style={{ width: '50%' }}>
<Typography style={{ fontSize: '16px', color: '#4b4b4b', fontWeight: 'bold' }}>Attachment: </Typography> <Typography style={{ fontSize: '16px', color: '#4b4b4b', fontWeight: 'bold' }}>Attachment: </Typography>
</div> </div>
<div style={{ width: '50%' }}> {!this.state.isApprover && (this.state.lastStatus === 'SUBMIT' && this.state.lastStatus === 'REVISION') && (
<button <div style={{ width: '50%' }}>
style={{ <button
backgroundColor: 'transparent', style={{
cursor: 'pointer', backgroundColor: 'transparent',
borderColor: 'transparent', cursor: this.state.isSubmit === false ? 'default' : 'pointer',
outline: 'none' borderColor: 'transparent',
}} outline: 'none'
onClick={() => this.setState({ visibleUpload: true })} }}
> onClick={() => this.state.isSubmit === false ? null : this.setState({ visibleUpload: true })}
<Typography style={{ fontSize: '16px', color: '#5198ea' }}>Upload File</Typography> >
</button> <Typography style={{ fontSize: '16px', color: this.state.isSubmit === false ? 'GrayText' : '#5198ea' }}>Upload File</Typography>
</div> </button>
</div>
)}
</div> </div>
<div style={{ display: 'flex', marginTop: 10 }}> <div style={{ display: 'flex', marginTop: 10 }}>
<div style={{ width: '50%', paddingLeft: 20 }}> <div style={{ width: '50%', paddingLeft: 20 }}>
{this.state.listAttachment.length > 0 ? {this.state.listAttachment.length > 0 ?
this.state.listAttachment.map((item) => { this.state.listAttachment.map((item, index) => {
return ( return (
<Typography style={{ fontSize: '16px', color: '#4b4b4b' }}>{item.attachment_name}</Typography> <div style={{ display: 'flex' }}>
) <Typography style={{ fontSize: '13px', color: '#4b4b4b', width: 25 }}>{index + 1}. </Typography>
})
: null <button
} style={{
</div> backgroundColor: 'transparent',
<div style={{ width: '50%' }}> cursor: 'pointer',
{this.state.listAttachment.length > 0 ? borderColor: 'transparent',
this.state.listAttachment.map((item) => { outline: 'none',
return ( display: 'grid'
<Typography style={{ fontSize: '16px', color: '#ff3939' }}>Delete</Typography> }}
onClick={() => {
this.downloadAttachment(item.attachment_url, item.attachment_name)
}}
>
<div>
<Typography style={{ fontSize: '13px', color: '#5198ea' }}> {item.attachment_name}</Typography>
</div>
</button>
</div>
) )
}) })
: null : null
} }
</div> </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
}
</div>
)}
</div> </div>
{this.state.checkApprover === 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>
</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
:
this.state.lastStatus === 'SUBMITTED' ?
<div style={{ width: '100%', padding: '10px 20px', backgroundColor: 'yellow', textAlign: 'center', marginTop: 20 }}>
<span>{this.state.lastStatus}</span>
</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 === 'REVISION' ?
<div style={{ width: '100%', padding: '10px 20px', backgroundColor: 'yellow', textAlign: 'center', marginTop: 20 }}>
<span>NEED REVISION</span>
</div> :
this.state.lastStatus === 'APPROVED' ?
<div style={{ width: '100%', padding: '10px 20px', backgroundColor: 'yellow', textAlign: 'center', marginTop: 20 }}>
<span>APPROVED</span>
</div> : null
}
{this.state.visibleTableHistory && (
<div style={{ marginTop: 20 }}>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={this.state.dataTableHistory}
columns={columnsHistory}
options={options}
/>
</MuiThemeProvider>
</div>
)}
</div> </div>
<div style={{ borderTop: 'solid 1px #c4c4c4', padding: 10, backgroundColor: '#f5f5f5', width: '100%', display: 'flex', justifyContent: 'flex-end' }} > {this.state.checkApprover === true ?
<div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}> this.state.lastStatus === 'WAITING FOR REVIEW' ?
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Submit</Typography> <div style={{ borderTop: 'solid 1px #c4c4c4', padding: 10, backgroundColor: '#f5f5f5', width: '100%', display: 'flex', justifyContent: 'flex-end' }} >
</div> <button
</div> 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">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none',
}}
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>
</div>
<div className="col-2" style={{ display: 'flex', justifyContent: 'flex-end', maxWidth: '100%' }}>
<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> </Paper>
</div> </div>
...@@ -526,6 +1190,123 @@ export default class RollingOutlook extends Component { ...@@ -526,6 +1190,123 @@ export default class RollingOutlook extends Component {
onClickClose={() => this.setState({ visibleBS: false, visibleRollingOutlook: true })} onClickClose={() => this.setState({ visibleBS: false, visibleRollingOutlook: true })}
/> />
)} )}
{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 > </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