update

src/container/MonthlyReport/BalanceSheetMR.js

@@ -7,6 +7,8 @@ import api from '../../api';
 import NumberFormat from 'react-number-format';
 import { type } from 'ramda';
 import { PropagateLoader } from 'react-spinners';
+import UploadFile from "../../library/Upload";
+import { ExcelRenderer } from 'react-excel-renderer';
 
 const LightTooltip = withStyles((theme) => ({
     tooltip: {
@@ -42,6 +44,7 @@ export default class BalanceSheetMR extends Component {
             dataTable: [],
             loading: true
         }
+        this.fileHandler = this.fileHandler.bind(this);
     }
 
     componentDidMount() {
@@ -165,12 +168,48 @@ export default class BalanceSheetMR extends Component {
         }
     }
 
+    fileHandler = (event) => {
+        let fileObj = event
+        ExcelRenderer(fileObj, (err, resp) => {
+            // console.log(resp)
+            if (err) {
+                console.log(err);
+            }
+            else {
+                let isi = resp.rows.slice(3)
+                // console.log(resp.rows[2]);
+                let payload = []
+                let reg = /^[-+]?(?:[0-9]+,)*[0-9]+(?:\.[0-9]+)?$/;
+                isi.map((i, index) => {
+                    if (i.length > 0) {
+                        payload.push({
+                            item_report_id: i[1] === undefined ? "" : String(i[1]).trim(),
+                            item_report: i[2] === undefined ? "" : String(i[2]).trim(),
+                            total_actual_before: i[2] === undefined ? "0" : reg.test(String(i[2])) === false ? "0" : String(i[2]).trim(),
+                            january: i[3] === undefined ? "0" : reg.test(String(i[3])) === false ? "0" : String(i[3]).trim(),
+                            february: i[4] === undefined ? "0" : reg.test(String(i[4])) === false ? "0" : String(i[4]).trim(),
+                        })
+                    }
+                })
+                let body = {
+                    company_id: this.props.company.company_id,
+                    periode: this.props.periode,
+                    report_id: this.props.report_id,
+                    balance_sheet: payload,
+                    months: this.props.month.month_id
+                }
+                // console.log(body)
+                this.setState({ payload: body, judul: resp.rows[1][0], judulColumn: resp.rows[2] })
+            }
+        });
+    }
+
     backToMonthlyReport(type) {
-        console.log(this.state.dataTable);
+        this.setState({ loading: true })
         let data = []
         this.state.dataTable.map(i => {
             data.push({
-                "item_report_id": i[2],
+                "item_report_id": i[1],
                 "rolling_outlook": i[6],
                 "master_budget": i[7],
                 "rolling_budget": i[8],
@@ -367,7 +406,7 @@ export default class BalanceSheetMR extends Component {
                     customBodyRender: (val, tableMeta, updateValue) => {
                         return (
                             <div style={{ textAlign: 'right' }}>
-                                {tableMeta.rowData[0] === 4 ?
+                                {tableMeta.rowData[0] === 4 || tableMeta.rowData[0] === 1 ?
                                     null :
                                     val
                                 }
@@ -1048,7 +1087,7 @@ export default class BalanceSheetMR extends Component {
                                                     borderColor: 'transparent',
                                                     margin: 5
                                                 }}
-                                                onClick={() => null}
+                                                onClick={() => this.setState({ visibleUpload: true })}
                                             >
                                                 <img src={Images.upload} />
                                             </button>
@@ -1187,6 +1226,43 @@ export default class BalanceSheetMR extends Component {
                         </div>
                     </Paper>
                 </div>
+                {this.state.visibleUpload && (
+                    <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' }}>Upload File</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({ visibleUpload: false })}
+                                    >
+                                        <img src={Images.close} />
+                                    </button>
+                                </div>
+                            </div>
+                            <UploadFile
+                                type={this.state.uploadStatus}
+                                percentage={this.state.percentage}
+                                result={this.state.result}
+                                acceptedFiles={["xlsx"]}
+                                onHandle={(dt) => {
+                                    this.fileHandler(dt)
+                                    this.setState({ uploadStatus: 'idle', percentage: '0' })
+                                }}
+                                onUpload={() => {
+                                    this.state.judul === "MONTHLY REPORT - BALANCE SHEET" ?
+                                        this.checkUpload() :
+                                        this.setState({ alert: true, messageAlert: "Invalid Template", tipeAlert: 'warning' })
+                                }}
+                            />
+                        </div>
+                    </div>
+                )}
             </div>
         )
     }