ReportItems.js 67.4 KB
Newer Older
EKSAD's avatar
EKSAD committed
1
import React, { Component } from "react";
2
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
EKSAD's avatar
EKSAD committed
3 4
import Images from "../../assets/Images";
import MUIDataTable from "mui-datatables";
5
import { InputBase, Snackbar, Tooltip, withStyles } from "@material-ui/core";
EKSAD's avatar
EKSAD committed
6 7
import { ExcelRenderer } from 'react-excel-renderer';
import UploadFile from "../../library/Upload";
8
import MuiAlert from '@material-ui/lab/Alert';
EKSAD's avatar
EKSAD committed
9 10 11
import CreateReportItems from "./formReportItems/CreateReportItems";
import EditReportItems from "./formReportItems/EditReportItems";
import VisualReportItems from "./formReportItems/VisualReportItems";
EKSAD's avatar
EKSAD committed
12
import api from "../../api";
EKSAD's avatar
EKSAD committed
13 14
import ReactTooltip from "react-tooltip";
import PopUpFailedSave from "../../library/PopUpFailedSave";
a.bairuha's avatar
a.bairuha committed
15
import Constant from "../../library/Constant";
a.bairuha's avatar
a.bairuha committed
16
import PopUpDelete from "../../library/PopUpDelete";
d.arizona's avatar
d.arizona committed
17 18
import { css } from "@emotion/core";
import PropagateLoader from "react-spinners/PropagateLoader"
EKSAD's avatar
EKSAD committed
19

20 21 22 23 24 25 26 27 28
const LightTooltip = withStyles((theme) => ({
    tooltip: {
        backgroundColor: theme.palette.common.white,
        color: 'rgba(0, 0, 0, 0.87)',
        boxShadow: theme.shadows[1],
        fontSize: 11,
    },
}))(Tooltip);

EKSAD's avatar
EKSAD committed
29 30 31 32 33
var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptions();
const options2 = ct.customOptions2();

34 35 36
const Alert = withStyles({
})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);

EKSAD's avatar
EKSAD committed
37 38 39 40 41 42 43 44 45 46 47 48 49 50
export default class ReportItems extends Component {
    constructor(props) {
        super(props)
        this.state = {
            dataTable: [],
            listData: [],
            data: [],
            search: "",
            itemReport: true,
            visualisasi: false,
            add: false,
            edit: false,
            dataLoaded: false,
            cols: null,
EKSAD's avatar
EKSAD committed
51
            rows: null,
52 53 54
            popupError: false,
            alert: false,
            tipeAlert: '',
a.bairuha's avatar
a.bairuha committed
55
            messageAlert: '',
Deni Rinaldi's avatar
Deni Rinaldi committed
56 57
            buttonCreate: false,
            buttonEdit: false,
d.arizona's avatar
d.arizona committed
58
            buttonDelete: false,
EKSAD's avatar
EKSAD committed
59
            load: false,
a.bairuha's avatar
a.bairuha committed
60 61
            judul: '',
            reportNameDelete: '',
EKSAD's avatar
EKSAD committed
62
            visibleDelete: false,
d.arizona's avatar
d.arizona committed
63 64
            invalidTemplate: false,
            loading: false
EKSAD's avatar
EKSAD committed
65 66 67 68 69 70 71 72
        }

        this.fileHandler = this.fileHandler.bind(this);
    }

    fileHandler = (event) => {
        let fileObj = event
        ExcelRenderer(fileObj, (err, resp) => {
EKSAD's avatar
EKSAD committed
73
            // console.log(resp)
EKSAD's avatar
EKSAD committed
74
            if (err) {
EKSAD's avatar
EKSAD committed
75
                console.log(err);
EKSAD's avatar
EKSAD committed
76 77
            }
            else {
EKSAD's avatar
EKSAD committed
78 79 80
                let isi = resp.rows.slice(3)
                let payload = []
                isi.map((item, index) => {
81
                    if (item.length > 0) {
EKSAD's avatar
EKSAD committed
82 83
                        payload.push({
                            id: index + 1,
EKSAD's avatar
EKSAD committed
84
                            report: item[0] === undefined ? "" : item[0],
EKSAD's avatar
EKSAD committed
85
                            company: item[1] === undefined ? "" : item[1],
EKSAD's avatar
EKSAD committed
86
                            orders: item[2] === undefined ? "" : item[2],
EKSAD's avatar
EKSAD committed
87
                            description: item[3] === undefined ? "" : item[3],
EKSAD's avatar
EKSAD committed
88
                            parent: item[4] === undefined ? 0 : item[4],
EKSAD's avatar
EKSAD committed
89
                            uom: item[5] === undefined ? "" : item[5],
Deni Rinaldi's avatar
Deni Rinaldi committed
90
                            weight: item[6] === undefined ? "" : item[6],
EKSAD's avatar
EKSAD committed
91 92 93 94
                            type_report: item[7] === undefined ? "" : item[7],
                            formula: item[8] === undefined ? "" : item[8],
                            condition_it_should_be: item[9] === undefined ? "" : item[9],
                            condition_if_wrong: item[10] === undefined ? "" : item[10],
a.bairuha's avatar
a.bairuha committed
95 96 97
                            kpi_type: item[11] === undefined ? "" : item[11],
                            max_ach: item[12] === undefined ? "" : item[12],
                            formula_ytd: item[13] === undefined ? "" : item[13],
EKSAD's avatar
EKSAD committed
98 99
                            start_date: item[14] === undefined ? "" : item[14],
                            end_date: item[15] === undefined ? "" : item[15],
EKSAD's avatar
EKSAD committed
100 101 102 103 104 105
                        })
                    }
                })
                let body = {
                    item_report: payload
                }
EKSAD's avatar
EKSAD committed
106 107 108 109 110 111 112

                if (resp.rows[2].length !== 16) {
                    this.setState({ invalidTemplate: true })
                } else {
                    this.setState({ invalidTemplate: false })
                }

EKSAD's avatar
EKSAD committed
113 114
                console.log(resp.rows[1])
                this.setState({ payload: body, buttonError: false, judul: resp.rows[1][0] })
EKSAD's avatar
EKSAD committed
115 116 117 118
            }
        });
    }

Deni Rinaldi's avatar
Deni Rinaldi committed
119
    checkUpload() {
EKSAD's avatar
EKSAD committed
120 121 122 123 124 125 126 127
        api.create().checkUploadReportItems(this.state.payload).then(response => {
            console.log(response)
            let dataRow = []
            if (response.data) {
                if (response.ok) {
                    if (response.data.status === "success") {
                        dataRow = response.data.data.map((item, index) => {
                            return [
EKSAD's avatar
EKSAD committed
128
                                item.report,
EKSAD's avatar
EKSAD committed
129 130 131 132 133 134 135 136 137 138
                                item.company,
                                item.orders,
                                item.description,
                                item.parent,
                                item.uom,
                                item.weight,
                                item.type_report,
                                item.formula,
                                item.condition_it_should_be,
                                item.condition_if_wrong,
a.bairuha's avatar
a.bairuha committed
139 140 141
                                item.kpi_type,
                                item.max_ach,
                                item.formula_ytd,
EKSAD's avatar
EKSAD committed
142 143 144 145 146 147 148 149 150 151 152
                                item.start_date,
                                item.end_date,
                                item.error
                            ]
                        })
                        let columns = [
                            {
                                name: "Report Type",
                                options: {
                                    customBodyRender: (val, tableMeta) => {
                                        let check = null
a.bairuha's avatar
a.bairuha committed
153
                                        if (tableMeta.rowData[16] != null) {
EKSAD's avatar
EKSAD committed
154
                                            check = tableMeta.rowData[16].findIndex((val) => val.field.includes('report_type'))
EKSAD's avatar
EKSAD committed
155 156
                                            if (check > -1) {
                                                this.setState({ buttonError: true })
EKSAD's avatar
EKSAD committed
157
                                            }
a.bairuha's avatar
a.bairuha committed
158
                                        }
EKSAD's avatar
EKSAD committed
159 160
                                        return (
                                            <div style={{ display: 'flex' }}>
a.bairuha's avatar
a.bairuha committed
161
                                                {tableMeta.rowData[16] != null && check > -1 ?
162
                                                    <LightTooltip title={tableMeta.rowData[16][check].message} arrow>
EKSAD's avatar
EKSAD committed
163
                                                        <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
164
                                                    </LightTooltip> :
EKSAD's avatar
EKSAD committed
165
                                                    <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
a.bairuha's avatar
a.bairuha committed
166
                                                }
EKSAD's avatar
EKSAD committed
167 168 169 170 171 172 173 174 175 176
                                            </div >
                                        );
                                    }
                                }
                            },
                            {
                                name: "Company Name",
                                options: {
                                    customBodyRender: (val, tableMeta) => {
                                        let check = null
a.bairuha's avatar
a.bairuha committed
177 178
                                        if (tableMeta.rowData[16] != null) {
                                            check = tableMeta.rowData[16].findIndex((val) => val.field.includes('company'))
EKSAD's avatar
EKSAD committed
179 180
                                            if (check > -1) {
                                                this.setState({ buttonError: true })
EKSAD's avatar
EKSAD committed
181
                                            }
a.bairuha's avatar
a.bairuha committed
182
                                        }
EKSAD's avatar
EKSAD committed
183 184
                                        return (
                                            <div style={{ display: 'flex' }}>
a.bairuha's avatar
a.bairuha committed
185
                                                {tableMeta.rowData[16] != null && check > -1 ?
186
                                                    <LightTooltip title={tableMeta.rowData[16][check].message} arrow>
EKSAD's avatar
EKSAD committed
187
                                                        <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
188
                                                    </LightTooltip> :
EKSAD's avatar
EKSAD committed
189
                                                    <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
a.bairuha's avatar
a.bairuha committed
190
                                                }
EKSAD's avatar
EKSAD committed
191 192 193 194 195 196 197 198 199 200
                                            </div >
                                        );
                                    }
                                }
                            },
                            {
                                name: "Order",
                                options: {
                                    customBodyRender: (val, tableMeta) => {
                                        let check = null
a.bairuha's avatar
a.bairuha committed
201 202
                                        if (tableMeta.rowData[16] != null) {
                                            check = tableMeta.rowData[16].findIndex((val) => val.field.includes('orders'))
EKSAD's avatar
EKSAD committed
203 204
                                            if (check > -1) {
                                                this.setState({ buttonError: true })
EKSAD's avatar
EKSAD committed
205
                                            }
a.bairuha's avatar
a.bairuha committed
206
                                        }
EKSAD's avatar
EKSAD committed
207 208
                                        return (
                                            <div style={{ display: 'flex' }}>
a.bairuha's avatar
a.bairuha committed
209
                                                {tableMeta.rowData[16] != null && check > -1 ?
210 211 212
                                                    <LightTooltip title={tableMeta.rowData[16][check].message} arrow>
                                                        <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
                                                    </LightTooltip> :
EKSAD's avatar
EKSAD committed
213
                                                    <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === null ? "Empty" : val}</span>
a.bairuha's avatar
a.bairuha committed
214
                                                }
EKSAD's avatar
EKSAD committed
215 216 217 218 219 220 221 222 223 224
                                            </div >
                                        );
                                    }
                                }
                            },
                            {
                                name: "Description",
                                options: {
                                    customBodyRender: (val, tableMeta) => {
                                        let check = null
a.bairuha's avatar
a.bairuha committed
225 226
                                        if (tableMeta.rowData[16] != null) {
                                            check = tableMeta.rowData[16].findIndex((val) => val.field.includes('description'))
EKSAD's avatar
EKSAD committed
227 228
                                            if (check > -1) {
                                                this.setState({ buttonError: true })
EKSAD's avatar
EKSAD committed
229
                                            }
a.bairuha's avatar
a.bairuha committed
230
                                        }
EKSAD's avatar
EKSAD committed
231 232
                                        return (
                                            <div style={{ display: 'flex' }}>
a.bairuha's avatar
a.bairuha committed
233
                                                {tableMeta.rowData[16] != null && check > -1 ?
234
                                                    <LightTooltip title={tableMeta.rowData[16][check].message} arrow>
EKSAD's avatar
EKSAD committed
235
                                                        <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
236
                                                    </LightTooltip> :
EKSAD's avatar
EKSAD committed
237
                                                    <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
a.bairuha's avatar
a.bairuha committed
238
                                                }
EKSAD's avatar
EKSAD committed
239 240 241 242 243 244 245 246 247 248
                                            </div >
                                        );
                                    }
                                }
                            },
                            {
                                name: "Parent ID",
                                options: {
                                    customBodyRender: (val, tableMeta) => {
                                        let check = null
a.bairuha's avatar
a.bairuha committed
249 250
                                        if (tableMeta.rowData[16] != null) {
                                            check = tableMeta.rowData[16].findIndex((val) => val.field.includes('parent'))
EKSAD's avatar
EKSAD committed
251 252
                                            if (check > -1) {
                                                this.setState({ buttonError: true })
EKSAD's avatar
EKSAD committed
253
                                            }
a.bairuha's avatar
a.bairuha committed
254
                                        }
EKSAD's avatar
EKSAD committed
255 256
                                        return (
                                            <div style={{ display: 'flex' }}>
a.bairuha's avatar
a.bairuha committed
257
                                                {tableMeta.rowData[16] != null && check > -1 ?
258 259 260
                                                    <LightTooltip title={tableMeta.rowData[16][check].message} arrow>
                                                        <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
                                                    </LightTooltip> :
EKSAD's avatar
EKSAD committed
261
                                                    <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
a.bairuha's avatar
a.bairuha committed
262
                                                }
EKSAD's avatar
EKSAD committed
263 264 265 266 267 268 269 270 271 272
                                            </div >
                                        );
                                    }
                                }
                            },
                            {
                                name: "UOM",
                                options: {
                                    customBodyRender: (val, tableMeta) => {
                                        let check = null
a.bairuha's avatar
a.bairuha committed
273 274
                                        if (tableMeta.rowData[16] != null) {
                                            check = tableMeta.rowData[16].findIndex((val) => val.field.includes('uom'))
EKSAD's avatar
EKSAD committed
275 276
                                            if (check > -1) {
                                                this.setState({ buttonError: true })
EKSAD's avatar
EKSAD committed
277
                                            }
a.bairuha's avatar
a.bairuha committed
278
                                        }
EKSAD's avatar
EKSAD committed
279 280
                                        return (
                                            <div style={{ display: 'flex' }}>
a.bairuha's avatar
a.bairuha committed
281
                                                {tableMeta.rowData[16] != null && check > -1 ?
282 283 284
                                                    <LightTooltip title={tableMeta.rowData[16][check].message} arrow>
                                                        <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
                                                    </LightTooltip> :
EKSAD's avatar
EKSAD committed
285
                                                    <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
a.bairuha's avatar
a.bairuha committed
286
                                                }
EKSAD's avatar
EKSAD committed
287 288 289 290 291 292 293 294 295 296
                                            </div >
                                        );
                                    }
                                }
                            },
                            {
                                name: "Weight",
                                options: {
                                    customBodyRender: (val, tableMeta) => {
                                        let check = null
a.bairuha's avatar
a.bairuha committed
297 298
                                        if (tableMeta.rowData[16] != null) {
                                            check = tableMeta.rowData[16].findIndex((val) => val.field.includes('weight'))
EKSAD's avatar
EKSAD committed
299 300
                                            if (check > -1) {
                                                this.setState({ buttonError: true })
EKSAD's avatar
EKSAD committed
301
                                            }
a.bairuha's avatar
a.bairuha committed
302
                                        }
EKSAD's avatar
EKSAD committed
303 304
                                        return (
                                            <div style={{ display: 'flex' }}>
a.bairuha's avatar
a.bairuha committed
305
                                                {tableMeta.rowData[16] != null && check > -1 ?
306 307 308
                                                    <LightTooltip title={tableMeta.rowData[16][check].message} arrow>
                                                        <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
                                                    </LightTooltip> :
EKSAD's avatar
EKSAD committed
309
                                                    <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
a.bairuha's avatar
a.bairuha committed
310
                                                }
EKSAD's avatar
EKSAD committed
311 312 313 314 315 316 317 318 319 320
                                            </div >
                                        );
                                    }
                                }
                            },
                            {
                                name: "Data Type",
                                options: {
                                    customBodyRender: (val, tableMeta) => {
                                        let check = null
a.bairuha's avatar
a.bairuha committed
321 322
                                        if (tableMeta.rowData[16] != null) {
                                            check = tableMeta.rowData[16].findIndex((val) => val.field.includes('type_report'))
EKSAD's avatar
EKSAD committed
323 324
                                            if (check > -1) {
                                                this.setState({ buttonError: true })
EKSAD's avatar
EKSAD committed
325
                                            }
a.bairuha's avatar
a.bairuha committed
326
                                        }
EKSAD's avatar
EKSAD committed
327 328
                                        return (
                                            <div style={{ display: 'flex' }}>
a.bairuha's avatar
a.bairuha committed
329
                                                {tableMeta.rowData[16] != null && check > -1 ?
330
                                                    <LightTooltip title={tableMeta.rowData[16][check].message} arrow>
EKSAD's avatar
EKSAD committed
331
                                                        <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
332
                                                    </LightTooltip> :
EKSAD's avatar
EKSAD committed
333
                                                    <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
a.bairuha's avatar
a.bairuha committed
334
                                                }
EKSAD's avatar
EKSAD committed
335 336 337 338 339 340 341 342 343 344
                                            </div >
                                        );
                                    }
                                }
                            },
                            {
                                name: "Formula",
                                options: {
                                    customBodyRender: (val, tableMeta) => {
                                        let check = null
a.bairuha's avatar
a.bairuha committed
345 346
                                        if (tableMeta.rowData[16] != null) {
                                            check = tableMeta.rowData[16].findIndex((val) => val.field.includes('formula'))
EKSAD's avatar
EKSAD committed
347 348
                                            if (check > -1) {
                                                this.setState({ buttonError: true })
EKSAD's avatar
EKSAD committed
349
                                            }
a.bairuha's avatar
a.bairuha committed
350
                                        }
EKSAD's avatar
EKSAD committed
351 352
                                        return (
                                            <div style={{ display: 'flex' }}>
a.bairuha's avatar
a.bairuha committed
353
                                                {tableMeta.rowData[16] != null && check > -1 ?
354 355 356
                                                    <LightTooltip title={tableMeta.rowData[16][check].message} arrow>
                                                        <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
                                                    </LightTooltip> :
EKSAD's avatar
EKSAD committed
357
                                                    <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
a.bairuha's avatar
a.bairuha committed
358
                                                }
EKSAD's avatar
EKSAD committed
359 360 361 362 363 364 365 366 367 368
                                            </div >
                                        );
                                    }
                                }
                            },
                            {
                                name: "True Value",
                                options: {
                                    customBodyRender: (val, tableMeta) => {
                                        let check = null
a.bairuha's avatar
a.bairuha committed
369 370
                                        if (tableMeta.rowData[16] != null) {
                                            check = tableMeta.rowData[16].findIndex((val) => val.field.includes('condition_it_should_be'))
EKSAD's avatar
EKSAD committed
371 372
                                            if (check > -1) {
                                                this.setState({ buttonError: true })
EKSAD's avatar
EKSAD committed
373
                                            }
a.bairuha's avatar
a.bairuha committed
374
                                        }
EKSAD's avatar
EKSAD committed
375 376
                                        return (
                                            <div style={{ display: 'flex' }}>
a.bairuha's avatar
a.bairuha committed
377
                                                {tableMeta.rowData[16] != null && check > -1 ?
378 379 380
                                                    <LightTooltip title={tableMeta.rowData[16][check].message} arrow>
                                                        <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
                                                    </LightTooltip> :
EKSAD's avatar
EKSAD committed
381
                                                    <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
a.bairuha's avatar
a.bairuha committed
382
                                                }
EKSAD's avatar
EKSAD committed
383 384 385 386 387 388 389 390 391 392
                                            </div >
                                        );
                                    }
                                }
                            },
                            {
                                name: "False Condition",
                                options: {
                                    customBodyRender: (val, tableMeta) => {
                                        let check = null
a.bairuha's avatar
a.bairuha committed
393 394
                                        if (tableMeta.rowData[16] != null) {
                                            check = tableMeta.rowData[16].findIndex((val) => val.field.includes('condition_if_wrong'))
EKSAD's avatar
EKSAD committed
395 396
                                            if (check > -1) {
                                                this.setState({ buttonError: true })
EKSAD's avatar
EKSAD committed
397
                                            }
a.bairuha's avatar
a.bairuha committed
398
                                        }
EKSAD's avatar
EKSAD committed
399 400
                                        return (
                                            <div style={{ display: 'flex' }}>
a.bairuha's avatar
a.bairuha committed
401
                                                {tableMeta.rowData[16] != null && check > -1 ?
402 403 404
                                                    <LightTooltip title={tableMeta.rowData[16][check].message} arrow>
                                                        <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
                                                    </LightTooltip> :
EKSAD's avatar
EKSAD committed
405
                                                    <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
a.bairuha's avatar
a.bairuha committed
406
                                                }
EKSAD's avatar
EKSAD committed
407 408 409 410 411
                                            </div >
                                        );
                                    }
                                }
                            },
a.bairuha's avatar
a.bairuha committed
412 413 414 415 416 417 418 419 420 421 422 423 424 425
                            {
                                name: "KPI Type",
                                options: {
                                    customBodyRender: (val, tableMeta) => {
                                        let check = null
                                        if (tableMeta.rowData[16] != null) {
                                            check = tableMeta.rowData[16].findIndex((val) => val.field.includes('kpi_type'))
                                            if (check > -1) {
                                                this.setState({ buttonError: true })
                                            }
                                        }
                                        return (
                                            <div style={{ display: 'flex' }}>
                                                {tableMeta.rowData[16] != null && check > -1 ?
426 427 428
                                                    <LightTooltip title={tableMeta.rowData[16][check].message} arrow>
                                                        <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
                                                    </LightTooltip> :
EKSAD's avatar
EKSAD committed
429
                                                    <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
a.bairuha's avatar
a.bairuha committed
430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449
                                                }
                                            </div >
                                        );
                                    }
                                }
                            },
                            {
                                name: "Max Achievement",
                                options: {
                                    customBodyRender: (val, tableMeta) => {
                                        let check = null
                                        if (tableMeta.rowData[16] != null) {
                                            check = tableMeta.rowData[16].findIndex((val) => val.field.includes('max_ach'))
                                            if (check > -1) {
                                                this.setState({ buttonError: true })
                                            }
                                        }
                                        return (
                                            <div style={{ display: 'flex' }}>
                                                {tableMeta.rowData[16] != null && check > -1 ?
450 451 452
                                                    <LightTooltip title={tableMeta.rowData[16][check].message} arrow>
                                                        <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
                                                    </LightTooltip> :
EKSAD's avatar
EKSAD committed
453
                                                    <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
a.bairuha's avatar
a.bairuha committed
454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473
                                                }
                                            </div >
                                        );
                                    }
                                }
                            },
                            {
                                name: "Formula YTD",
                                options: {
                                    customBodyRender: (val, tableMeta) => {
                                        let check = null
                                        if (tableMeta.rowData[16] != null) {
                                            check = tableMeta.rowData[16].findIndex((val) => val.field.includes('formula_ytd'))
                                            if (check > -1) {
                                                this.setState({ buttonError: true })
                                            }
                                        }
                                        return (
                                            <div style={{ display: 'flex' }}>
                                                {tableMeta.rowData[16] != null && check > -1 ?
474 475 476
                                                    <LightTooltip title={tableMeta.rowData[16][check].message} arrow>
                                                        <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
                                                    </LightTooltip> :
EKSAD's avatar
EKSAD committed
477
                                                    <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
a.bairuha's avatar
a.bairuha committed
478 479 480 481 482 483
                                                }
                                            </div >
                                        );
                                    }
                                }
                            },
EKSAD's avatar
EKSAD committed
484 485 486 487 488
                            {
                                name: "Valid From",
                                options: {
                                    customBodyRender: (val, tableMeta) => {
                                        let check = null
a.bairuha's avatar
a.bairuha committed
489 490
                                        if (tableMeta.rowData[16] != null) {
                                            check = tableMeta.rowData[16].findIndex((val) => val.field.includes('start_date'))
EKSAD's avatar
EKSAD committed
491 492
                                            if (check > -1) {
                                                this.setState({ buttonError: true })
EKSAD's avatar
EKSAD committed
493
                                            }
a.bairuha's avatar
a.bairuha committed
494
                                        }
EKSAD's avatar
EKSAD committed
495 496
                                        return (
                                            <div style={{ display: 'flex' }}>
a.bairuha's avatar
a.bairuha committed
497
                                                {tableMeta.rowData[16] != null && check > -1 ?
498
                                                    <LightTooltip title={tableMeta.rowData[16][check].message} arrow>
EKSAD's avatar
EKSAD committed
499
                                                        <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
500
                                                    </LightTooltip> :
EKSAD's avatar
EKSAD committed
501
                                                    <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
a.bairuha's avatar
a.bairuha committed
502
                                                }
EKSAD's avatar
EKSAD committed
503 504 505 506 507 508 509 510 511 512
                                            </div >
                                        );
                                    }
                                }
                            },
                            {
                                name: "Valid To",
                                options: {
                                    customBodyRender: (val, tableMeta) => {
                                        let check = null
a.bairuha's avatar
a.bairuha committed
513 514
                                        if (tableMeta.rowData[16] != null) {
                                            check = tableMeta.rowData[16].findIndex((val) => val.field.includes('end_date'))
EKSAD's avatar
EKSAD committed
515 516
                                            if (check > -1) {
                                                this.setState({ buttonError: true })
EKSAD's avatar
EKSAD committed
517
                                            }
a.bairuha's avatar
a.bairuha committed
518
                                        }
EKSAD's avatar
EKSAD committed
519 520
                                        return (
                                            <div style={{ display: 'flex' }}>
a.bairuha's avatar
a.bairuha committed
521
                                                {tableMeta.rowData[16] != null && check > -1 ?
522
                                                    <LightTooltip title={tableMeta.rowData[16][check].message} arrow>
EKSAD's avatar
EKSAD committed
523
                                                        <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
524
                                                    </LightTooltip> :
EKSAD's avatar
EKSAD committed
525
                                                    <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
EKSAD's avatar
EKSAD committed
526 527 528
                                                }
                                            </div >
                                        );
EKSAD's avatar
EKSAD committed
529 530
                                    }
                                }
EKSAD's avatar
EKSAD committed
531 532 533 534 535
                            },
                            {
                                name: "",
                                options: {
                                    display: false
a.bairuha's avatar
a.bairuha committed
536
                                }
EKSAD's avatar
EKSAD committed
537 538 539 540 541 542 543
                            }
                        ]

                        // console.log(dataRow);
                        this.setState({
                            dataLoaded: true,
                            cols: columns,
Deni Rinaldi's avatar
Deni Rinaldi committed
544
                            rows: dataRow, visibleUpload: false,
EKSAD's avatar
EKSAD committed
545 546
                            itemReport: false
                        });
a.bairuha's avatar
a.bairuha committed
547
                    } else {
EKSAD's avatar
EKSAD committed
548
                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
EKSAD's avatar
EKSAD committed
549
                            if (response.data.message.includes("Someone Logged In")) {
EKSAD's avatar
EKSAD committed
550 551 552 553 554 555
                                setTimeout(() => {
                                    localStorage.removeItem(Constant.TOKEN)
                                    window.location.reload();
                                }, 1000);
                            }
                        })
EKSAD's avatar
EKSAD committed
556
                    }
a.bairuha's avatar
a.bairuha committed
557
                } else {
EKSAD's avatar
EKSAD committed
558
                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
a.bairuha's avatar
a.bairuha committed
559
                }
EKSAD's avatar
EKSAD committed
560 561 562 563 564
            } else {
                this.setState({
                    dataLoaded: false,
                    alert: true, messageAlert: response.problem, tipeAlert: 'error'
                });
EKSAD's avatar
EKSAD committed
565
            }
EKSAD's avatar
EKSAD committed
566
        })
EKSAD's avatar
EKSAD committed
567 568
    }

EKSAD's avatar
EKSAD committed
569 570
    componentDidMount() {
        this.getData()
Deni Rinaldi's avatar
Deni Rinaldi committed
571
        this.getPermission()
a.bairuha's avatar
a.bairuha committed
572 573 574 575 576 577 578 579 580 581 582
    }

    getPermission() {
        let payload = {
            menu: "report items"
        }
        api.create().getPermission(payload).then(response => {
            console.log(response)
            if (response.data) {
                if (response.data.status === "success") {
                    this.setState({
Deni Rinaldi's avatar
Deni Rinaldi committed
583 584
                        buttonCreate: response.data.data.create,
                        buttonEdit: response.data.data.edit,
d.arizona's avatar
d.arizona committed
585
                        buttonDelete: response.data.data.delete,
Deni Rinaldi's avatar
Deni Rinaldi committed
586
                        load: true
a.bairuha's avatar
a.bairuha committed
587
                    })
Deni Rinaldi's avatar
Deni Rinaldi committed
588 589
                } else {
                    this.setState({ load: true })
a.bairuha's avatar
a.bairuha committed
590 591 592
                }
            }
        })
EKSAD's avatar
EKSAD committed
593
    }
EKSAD's avatar
EKSAD committed
594 595

    getData() {
596
        this.setState({ loading: true })
EKSAD's avatar
EKSAD committed
597 598
        api.create().getReportItems().then((response) => {
            console.log(response)
599
            if (response.data) {
a.bairuha's avatar
a.bairuha committed
600 601 602 603
                if (response.ok) {
                    if (response.data.status == 'success') {
                        let data = response.data.data
                        let listData = data.sort((a, b) => a.item_report_id - b.item_report_id).map((item, index) => {
EKSAD's avatar
EKSAD committed
604
                            return [index, item.item_report_id, item.report_name, item.company_name, item.order, item.description, item.parent, item.uom, item.weight, item.type_item_report_name, item.kpi_type, item.max_ach, item.formula_ytd, item.status]
a.bairuha's avatar
a.bairuha committed
605
                        })
Deni Rinaldi's avatar
Deni Rinaldi committed
606
                        this.setState({ dataTable: listData, listData: response.data.data }, () => {
d.arizona's avatar
d.arizona committed
607
                            setTimeout(() => {
608
                                this.setState({ loading: false })
d.arizona's avatar
d.arizona committed
609
                            }, 2000);
Deni Rinaldi's avatar
Deni Rinaldi committed
610
                        })
a.bairuha's avatar
a.bairuha committed
611
                    } else {
d.arizona's avatar
d.arizona committed
612
                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning', loading: false }, () => {
EKSAD's avatar
EKSAD committed
613
                            if (response.data.message.includes("Someone Logged In")) {
a.bairuha's avatar
a.bairuha committed
614 615 616 617 618 619 620
                                setTimeout(() => {
                                    localStorage.removeItem(Constant.TOKEN)
                                    window.location.reload();
                                }, 1000);
                            }
                        })
                    }
621
                } else {
d.arizona's avatar
d.arizona committed
622
                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error', loading: false })
623
                }
EKSAD's avatar
EKSAD committed
624
            } else {
d.arizona's avatar
d.arizona committed
625
                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error', loading: false })
EKSAD's avatar
EKSAD committed
626 627 628 629
            }
        })
    }

a.bairuha's avatar
a.bairuha committed
630 631 632 633 634 635 636 637 638 639 640
    deleteReport(payload) {
        console.log(payload);
        let id = String(payload[1])
        api.create().deleteReportItems(id).then(response => {
            if (response.data) {
                if (response.ok) {
                    if (response.data.status === "success") {
                        this.getData()
                        this.setState({ visibleDelete: false, alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
                    } else {
                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
EKSAD's avatar
EKSAD committed
641
                            if (response.data.message.includes("Someone Logged In")) {
a.bairuha's avatar
a.bairuha committed
642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657
                                setTimeout(() => {
                                    localStorage.removeItem(Constant.TOKEN)
                                    window.location.reload();
                                }, 1000);
                            }
                        })
                    }
                } else {
                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
                }
            } else {
                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
            }
        })
    }

EKSAD's avatar
EKSAD committed
658 659 660
    openPopUp(index, type) {
        if (type === 'edit') {
            this.setState({
EKSAD's avatar
EKSAD committed
661
                rowData: index,
EKSAD's avatar
EKSAD committed
662 663
                edit: true
            })
a.bairuha's avatar
a.bairuha committed
664 665 666 667 668 669
        } else if (type === 'delete') {
            this.setState({
                rowData: index,
                reportNameDelete: "[" + String(index[2]) + " - " + String(index[3]) + " - " + String(index[5]) + "]",
                visibleDelete: true
            })
EKSAD's avatar
EKSAD committed
670 671 672 673 674 675 676 677 678 679 680 681 682 683
        } else {
            this.setState({
                add: true
            })
        }
    }

    handleInputChange(e) {
        this.setState({ search: e })
        let body = {
            "keyword": e
        }
        api.create().searchReportItems(body).then(response => {
            // console.log(response.data);
684
            if (response.data) {
a.bairuha's avatar
a.bairuha committed
685 686 687 688 689 690 691 692 693
                if (response.ok) {
                    if (response.data.status == 'success') {
                        let data = response.data.data
                        let listData = data.map((item, index) => {
                            return [index, item.item_report_id, item.report_name, item.company_name, item.order, item.description, item.parent, item.uom, item.weight, item.type_item_report_name, item.status]
                        })
                        this.setState({ dataTable: listData, listData: response.data.data })
                    } else {
                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
EKSAD's avatar
EKSAD committed
694
                            if (response.data.message.includes("Someone Logged In")) {
a.bairuha's avatar
a.bairuha committed
695 696 697 698 699 700 701
                                setTimeout(() => {
                                    localStorage.removeItem(Constant.TOKEN)
                                    window.location.reload();
                                }, 1000);
                            }
                        })
                    }
702
                } else {
a.bairuha's avatar
a.bairuha committed
703
                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
704
                }
EKSAD's avatar
EKSAD committed
705
            } else {
706
                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
EKSAD's avatar
EKSAD committed
707 708 709 710 711 712 713
            }
        })
    }

    createReportItems = (payload) => {
        this.setState({ add: false })
        api.create().createReportItems(payload).then(response => {
714
            console.log(response);
715
            if (response.data) {
a.bairuha's avatar
a.bairuha committed
716 717 718 719 720 721
                if (response.ok) {
                    if (response.data.status == 'success') {
                        this.getData()
                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
                    } else {
                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
EKSAD's avatar
EKSAD committed
722
                            if (response.data.message.includes("Someone Logged In")) {
a.bairuha's avatar
a.bairuha committed
723 724 725 726 727 728 729
                                setTimeout(() => {
                                    localStorage.removeItem(Constant.TOKEN)
                                    window.location.reload();
                                }, 1000);
                            }
                        })
                    }
730
                } else {
a.bairuha's avatar
a.bairuha committed
731
                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
732
                }
EKSAD's avatar
EKSAD committed
733
            } else {
734
                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
EKSAD's avatar
EKSAD committed
735 736 737 738
            }
        })
    }

EKSAD's avatar
EKSAD committed
739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763
    downloadFile = async () => {
        let res = await fetch(
            "https://tia.eksad.com/tia-reporting-dev/public/attachment/download_file?fileName=ItemReportTemplate&&fileType=xlsx"
        )
        res = await res.blob()
        console.log(res)
        if (res.size > 0) {
            let url = window.URL.createObjectURL(res);
            let a = document.createElement('a');
            a.href = url;
            a.download = 'Template Report Item.xlsx';
            a.click();
        }
    }

    downloadDataTable = async () => {
        let res = await fetch(
            "https://tia.eksad.com/tia-reporting-dev/public/item_report/export_item_report"
        )
        res = await res.blob()
        console.log(res)
        if (res.size > 0) {
            let url = window.URL.createObjectURL(res);
            let a = document.createElement('a');
            a.href = url;
764
            a.download = 'Report Items.xlsx';
EKSAD's avatar
EKSAD committed
765 766 767 768
            a.click();
        }
    }

EKSAD's avatar
EKSAD committed
769 770 771
    updateReportItems = (payload) => {
        this.setState({ edit: false })
        api.create().updateReportItems(payload).then(response => {
772
            if (response.data) {
a.bairuha's avatar
a.bairuha committed
773 774 775 776 777 778
                if (response.ok) {
                    if (response.data.status == 'success') {
                        this.getData()
                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
                    } else {
                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
EKSAD's avatar
EKSAD committed
779
                            if (response.data.message.includes("Someone Logged In")) {
a.bairuha's avatar
a.bairuha committed
780 781 782 783 784 785 786
                                setTimeout(() => {
                                    localStorage.removeItem(Constant.TOKEN)
                                    window.location.reload();
                                }, 1000);
                            }
                        })
                    }
787
                } else {
a.bairuha's avatar
a.bairuha committed
788
                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
789
                }
EKSAD's avatar
EKSAD committed
790
            } else {
791
                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
EKSAD's avatar
EKSAD committed
792
            }
EKSAD's avatar
EKSAD committed
793
        })
EKSAD's avatar
EKSAD committed
794
    }
EKSAD's avatar
EKSAD committed
795 796 797

    uploadReportItems() {
        api.create().uploadReportItems(this.state.payload).then(response => {
798
            if (response.data) {
a.bairuha's avatar
a.bairuha committed
799 800 801 802 803 804 805
                if (response.ok) {
                    if (response.data.status === "success") {
                        // alert(response.data.message)
                        this.getData()
                        this.setState({ itemReport: true, alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
                    } else {
                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
EKSAD's avatar
EKSAD committed
806
                            if (response.data.message.includes("Someone Logged In")) {
a.bairuha's avatar
a.bairuha committed
807 808 809 810 811 812 813
                                setTimeout(() => {
                                    localStorage.removeItem(Constant.TOKEN)
                                    window.location.reload();
                                }, 1000);
                            }
                        })
                    }
814
                } else {
Deni Rinaldi's avatar
Deni Rinaldi committed
815
                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
816
                }
817 818
            } else {
                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
819
            }
EKSAD's avatar
EKSAD committed
820 821
        })
    }
822

823 824 825 826
    closeAlert() {
        this.setState({ alert: false })
    }

EKSAD's avatar
EKSAD committed
827 828 829 830
    render() {
        const columns = [{
            name: "Action",
            options: {
EKSAD's avatar
EKSAD committed
831
                sort: false,
EKSAD's avatar
EKSAD committed
832 833
                customBodyRender: (val, tableMeta) => {
                    return (
d.arizona's avatar
d.arizona committed
834
                        <div style={{ display: 'flex' }}>
835
                            {this.state.buttonEdit &&
d.arizona's avatar
d.arizona committed
836 837 838 839 840 841 842 843 844
                                <span>
                                    <a data-tip={'Edit'} data-for="edit">
                                        <button
                                            style={{
                                                backgroundColor: 'transparent',
                                                cursor: 'pointer',
                                                borderColor: 'transparent'
                                            }}
                                            onClick={() => this.openPopUp(tableMeta.rowData, 'edit')}
845

d.arizona's avatar
d.arizona committed
846 847 848 849 850 851 852
                                        >
                                            <img src={Images.editCopy} />
                                        </button>
                                    </a>
                                    <ReactTooltip border={true} id="edit" place="bottom" type="light" effect="solid" />
                                </span>
                            }
853
                            {this.state.buttonDelete &&
d.arizona's avatar
d.arizona committed
854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872
                                <span>
                                    <a data-tip={'Delete'} data-for="delete">
                                        <button
                                            style={{
                                                backgroundColor: 'transparent',
                                                cursor: 'pointer',
                                                borderColor: 'transparent',
                                                marginLeft: 15
                                            }}
                                            // onClick={() => console.log(tableMeta)}
                                            onClick={() => this.openPopUp(tableMeta.rowData, 'delete')}
                                        >
                                            <img src={Images.delete} />
                                        </button>
                                    </a>
                                    <ReactTooltip border={true} id="delete" place="bottom" type="light" effect="solid" />
                                </span>
                            }
                        </div >
EKSAD's avatar
EKSAD committed
873 874 875
                    );
                }
            }
EKSAD's avatar
EKSAD committed
876 877 878 879 880 881 882
        },
        {
            name: "ID",
            options: {
                customBodyRender: (val, tableMeta) => {
                    return (
                        <div style={{ display: 'flex' }}>
EKSAD's avatar
EKSAD committed
883
                            <span style={{ color: tableMeta.rowData[13] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
EKSAD's avatar
EKSAD committed
884 885 886 887 888 889
                        </div >
                    );
                }
            }
        },
        {
890
            name: "Report Type",
EKSAD's avatar
EKSAD committed
891 892 893 894
            options: {
                customBodyRender: (val, tableMeta) => {
                    return (
                        <div style={{ display: 'flex' }}>
EKSAD's avatar
EKSAD committed
895
                            <span style={{ color: tableMeta.rowData[13] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
EKSAD's avatar
EKSAD committed
896 897 898 899 900 901
                        </div >
                    );
                }
            }
        },
        {
EKSAD's avatar
EKSAD committed
902
            name: "Company Name",
EKSAD's avatar
EKSAD committed
903 904 905 906
            options: {
                customBodyRender: (val, tableMeta) => {
                    return (
                        <div style={{ display: 'flex' }}>
EKSAD's avatar
EKSAD committed
907
                            <span style={{ color: tableMeta.rowData[13] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
EKSAD's avatar
EKSAD committed
908 909 910 911 912 913 914 915 916 917 918
                        </div >
                    );
                }
            }
        },
        {
            name: "Order",
            options: {
                customBodyRender: (val, tableMeta) => {
                    return (
                        <div style={{ display: 'flex' }}>
EKSAD's avatar
EKSAD committed
919
                            <span style={{ color: tableMeta.rowData[13] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
EKSAD's avatar
EKSAD committed
920 921 922 923 924 925
                        </div >
                    );
                }
            }
        },
        {
926
            name: "Description",
EKSAD's avatar
EKSAD committed
927 928 929 930
            options: {
                customBodyRender: (val, tableMeta) => {
                    return (
                        <div style={{ display: 'flex' }}>
EKSAD's avatar
EKSAD committed
931
                            <span style={{ color: tableMeta.rowData[13] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
EKSAD's avatar
EKSAD committed
932 933 934 935 936 937 938 939 940 941 942
                        </div >
                    );
                }
            }
        },
        {
            name: "Parent ID",
            options: {
                customBodyRender: (val, tableMeta) => {
                    return (
                        <div style={{ display: 'flex' }}>
EKSAD's avatar
EKSAD committed
943
                            <span style={{ color: tableMeta.rowData[13] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
EKSAD's avatar
EKSAD committed
944 945 946 947 948 949 950 951 952 953 954
                        </div >
                    );
                }
            }
        },
        {
            name: "UOM",
            options: {
                customBodyRender: (val, tableMeta) => {
                    return (
                        <div style={{ display: 'flex' }}>
EKSAD's avatar
EKSAD committed
955
                            <span style={{ color: tableMeta.rowData[13] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
EKSAD's avatar
EKSAD committed
956 957 958 959 960 961 962 963 964 965 966
                        </div >
                    );
                }
            }
        },
        {
            name: "Weight",
            options: {
                customBodyRender: (val, tableMeta) => {
                    return (
                        <div style={{ display: 'flex' }}>
EKSAD's avatar
EKSAD committed
967
                            <span style={{ color: tableMeta.rowData[13] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
EKSAD's avatar
EKSAD committed
968 969 970 971 972 973
                        </div >
                    );
                }
            }
        },
        {
974
            name: "Data Type",
EKSAD's avatar
EKSAD committed
975 976 977 978
            options: {
                customBodyRender: (val, tableMeta) => {
                    return (
                        <div style={{ display: 'flex' }}>
EKSAD's avatar
EKSAD committed
979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015
                            <span style={{ color: tableMeta.rowData[13] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
                        </div >
                    );
                }
            }
        },
        {
            name: "KPI Type",
            options: {
                customBodyRender: (val, tableMeta) => {
                    return (
                        <div style={{ display: 'flex' }}>
                            <span style={{ color: tableMeta.rowData[13] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
                        </div >
                    );
                }
            }
        },
        {
            name: "Max Achievement",
            options: {
                customBodyRender: (val, tableMeta) => {
                    return (
                        <div style={{ display: 'flex' }}>
                            <span style={{ color: tableMeta.rowData[13] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
                        </div >
                    );
                }
            }
        },
        {
            name: "Formula YTD",
            options: {
                customBodyRender: (val, tableMeta) => {
                    return (
                        <div style={{ display: 'flex' }}>
                            <span style={{ color: tableMeta.rowData[13] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
EKSAD's avatar
EKSAD committed
1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026
                        </div >
                    );
                }
            }
        },
        {
            name: "Status",
            options: {
                customBodyRender: (val, tableMeta) => {
                    return (
                        <div style={{ display: 'flex' }}>
EKSAD's avatar
EKSAD committed
1027
                            <span style={{ color: tableMeta.rowData[13] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
EKSAD's avatar
EKSAD committed
1028 1029 1030 1031
                        </div >
                    );
                }
            }
EKSAD's avatar
EKSAD committed
1032
        }
1033 1034 1035 1036 1037 1038 1039 1040
        ]
        const data = [
            ["", "1", "KPI", "TIA", "1", "Financial Perspective", "0", "-", "35%", "Formula", "Aktif"],
            ["", "2", "KPI", "TIA", "2", "Trading Profit", "1", "Rp Bio", "35%", "Formula", "Aktif"],
            ["", "3", "KPI", "TIA", "3", "Revenue", "1", "Rp Bio", "0%", "Formula", "Aktif"],
            ["", "4", "KPI", "TIA", "4", "EBITDA", "1", "Rp Bio", "0%", "Formula", "Non Aktif"],
            ["", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-"],
        ]
d.arizona's avatar
d.arizona committed
1041
        const loadingComponent = (
1042 1043 1044 1045 1046 1047 1048
            <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)' }}>
                <PropagateLoader
                    // css={override}
                    size={20}
                    color={"#274B80"}
                    loading={this.state.loading}
                />
d.arizona's avatar
d.arizona committed
1049
            </div>
1050
        );
EKSAD's avatar
EKSAD committed
1051
        return (
EKSAD's avatar
EKSAD committed
1052 1053
            <div style={{ height: this.props.height }}>
                {/* <Row> */}
EKSAD's avatar
EKSAD committed
1054
                <div className={"main-color"} style={{ height: 195, width: '100%' }} />
1055 1056 1057 1058 1059
                <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
                    <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
                        {this.state.messageAlert}
                    </Alert>
                </Snackbar>
EKSAD's avatar
EKSAD committed
1060
                {this.state.itemReport === true ?
EKSAD's avatar
EKSAD committed
1061 1062 1063
                    this.state.load && (
                        <div>
                            <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -182 }}>
Deni Rinaldi's avatar
Deni Rinaldi committed
1064 1065
                                <label style={{ color: 'white', fontSize: 16, alignSelf: 'center', width: '50%', }}>Master Data - Report Items</label>
                                {/* <div style={{ color: 'white', width: '50%', height: 37, display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center', borderRadius: 6, paddingLeft: 5, paddingRight: 5, alignSelf: 'center' }}>
EKSAD's avatar
EKSAD committed
1066 1067 1068 1069 1070 1071 1072 1073 1074
                                        <img src={Images.searchBlack} style={{ marginRight: 10 }} />
                                        <InputBase
                                            style={{ width: '100%' }}
                                            placeholder="Search"
                                            value={this.state.search}
                                            onChange={(e) => this.handleInputChange(e.target.value)}
                                            inputProps={{ 'aria-label': 'naked' }}
                                        />
                                    </div> */}
Deni Rinaldi's avatar
Deni Rinaldi committed
1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087 1088 1089 1090 1091
                                <div style={{ width: '50%', justifyContent: 'flex-end', display: 'flex', flexFlow: 'wrap' }}>
                                    <a data-tip={'Download Template'} data-for="template">
                                        <button
                                            style={{
                                                backgroundColor: 'transparent',
                                                cursor: 'pointer',
                                                borderColor: 'transparent',
                                                margin: 5
                                            }}
                                            onClick={() => this.downloadFile()}
                                        >
                                            <img src={Images.template} />
                                        </button>
                                    </a>
                                    <ReactTooltip border={true} id="template" place="bottom" type="light" effect="solid" />
                                    {this.state.buttonCreate && (
                                        <a data-tip={'Upload'} data-for="upload">
Deni Rinaldi's avatar
Deni Rinaldi committed
1092 1093 1094 1095 1096 1097 1098
                                            <button
                                                style={{
                                                    backgroundColor: 'transparent',
                                                    cursor: 'pointer',
                                                    borderColor: 'transparent',
                                                    margin: 5
                                                }}
Deni Rinaldi's avatar
Deni Rinaldi committed
1099
                                                onClick={() => null}
Deni Rinaldi's avatar
Deni Rinaldi committed
1100
                                            >
Deni Rinaldi's avatar
Deni Rinaldi committed
1101
                                                <img src={Images.upload} onClick={() => this.setState({ visibleUpload: true })} />
Deni Rinaldi's avatar
Deni Rinaldi committed
1102 1103
                                            </button>
                                        </a>
Deni Rinaldi's avatar
Deni Rinaldi committed
1104 1105 1106 1107 1108 1109 1110 1111 1112 1113 1114 1115 1116 1117 1118
                                    )}
                                    <ReactTooltip border={true} id="upload" place="bottom" type="light" effect="solid" />
                                    <a data-tip={'Download'} data-for="download">
                                        <button
                                            style={{
                                                backgroundColor: 'transparent',
                                                cursor: 'pointer',
                                                borderColor: 'transparent',
                                                margin: 5
                                            }}
                                            onClick={() => this.downloadDataTable()}
                                        >
                                            <img src={Images.download} />
                                        </button>
                                    </a>
a.bairuha's avatar
a.bairuha committed
1119
                                    <ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
Deni Rinaldi's avatar
Deni Rinaldi committed
1120 1121 1122 1123 1124 1125 1126 1127 1128 1129 1130 1131 1132
                                    <a data-tip={'Visualization'} data-for="visualisasi">
                                        <button
                                            style={{
                                                backgroundColor: 'transparent',
                                                cursor: 'pointer',
                                                borderColor: 'transparent',
                                                margin: 5
                                            }}
                                            onClick={() => this.setState({ visualisasi: true, itemReport: false })}
                                        >
                                            <img src={Images.visualisasi} />
                                        </button>
                                    </a>
a.bairuha's avatar
a.bairuha committed
1133
                                    <ReactTooltip border={true} id="visualisasi" place="bottom" type="light" effect="solid" />
Deni Rinaldi's avatar
Deni Rinaldi committed
1134 1135
                                    {this.state.buttonCreate && (
                                        <a data-tip={'Add New'} data-for="tambah">
Deni Rinaldi's avatar
Deni Rinaldi committed
1136 1137 1138 1139 1140
                                            <button
                                                style={{
                                                    backgroundColor: 'transparent',
                                                    cursor: 'pointer',
                                                    borderColor: 'transparent',
Deni Rinaldi's avatar
Deni Rinaldi committed
1141 1142
                                                    margin: 5,
                                                    marginRight: 20
Deni Rinaldi's avatar
Deni Rinaldi committed
1143 1144
                                                }}
                                            >
Deni Rinaldi's avatar
Deni Rinaldi committed
1145
                                                <img src={Images.add} onClick={() => this.setState({ add: true })} />
Deni Rinaldi's avatar
Deni Rinaldi committed
1146 1147
                                            </button>
                                        </a>
Deni Rinaldi's avatar
Deni Rinaldi committed
1148 1149
                                    )}
                                    <ReactTooltip border={true} id="tambah" place="bottom" type="light" effect="solid" />
Deni Rinaldi's avatar
Deni Rinaldi committed
1150
                                </div>
Deni Rinaldi's avatar
Deni Rinaldi committed
1151 1152
                            </div>
                            <div style={{ padding: 25 }}>
1153
                                {this.state.loading && loadingComponent}
Deni Rinaldi's avatar
Deni Rinaldi committed
1154 1155 1156 1157 1158 1159 1160 1161 1162 1163
                                <MuiThemeProvider theme={getMuiTheme()}>
                                    <MUIDataTable
                                        theme={getMuiTheme()}
                                        data={this.state.dataTable}
                                        columns={columns}
                                        options={options}
                                    />
                                </MuiThemeProvider>

                            </div>
EKSAD's avatar
EKSAD committed
1164
                        </div>
EKSAD's avatar
EKSAD committed
1165
                    )
1166 1167 1168
                    :
                    this.state.visualisasi == true ?
                        <VisualReportItems
Deni Rinaldi's avatar
Deni Rinaldi committed
1169 1170
                            buttonCreate={this.state.buttonCreate}
                            buttonEdit={this.state.buttonEdit}
a.bairuha's avatar
a.bairuha committed
1171
                            onClickClose={() => this.setState({ visualisasi: false, itemReport: true }, () => this.getData())}
1172 1173
                            height={this.props.height}
                        />
Deni Rinaldi's avatar
Deni Rinaldi committed
1174 1175 1176 1177 1178 1179
                        :
                        <div>
                            <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
                                <label style={{ color: 'white', fontSize: 16, alignSelf: 'center' }}>Preview Data</label>
                            </div>
                            <div style={{ padding: 25 }}>
EKSAD's avatar
EKSAD committed
1180 1181 1182 1183 1184 1185 1186 1187
                                <MuiThemeProvider theme={getMuiTheme()}>
                                    <MUIDataTable
                                        theme={getMuiTheme()}
                                        data={this.state.rows}
                                        columns={this.state.cols}
                                        options={options}
                                    />
                                </MuiThemeProvider>
Deni Rinaldi's avatar
Deni Rinaldi committed
1188 1189 1190 1191 1192 1193 1194 1195 1196 1197 1198 1199 1200
                            </div>
                            <div style={{ display: 'flex', width: '100%', placeContent: 'flex-end', padding: 20 }}>
                                <button
                                    type="button"
                                    onClick={() => this.setState({ itemReport: true })}
                                    style={{ marginRight: 20 }}
                                >
                                    <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>
                                <button
                                    type="button"
EKSAD's avatar
EKSAD committed
1201 1202
                                    disabled={this.state.buttonError == true ? true : false}
                                    onClick={() => this.uploadReportItems()}
Deni Rinaldi's avatar
Deni Rinaldi committed
1203 1204 1205 1206 1207 1208 1209
                                    style={{}}
                                >
                                    <div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
                                        <span style={{ color: '#fff', fontSize: 11 }}>Save</span>
                                    </div>
                                </button>
                            </div>
EKSAD's avatar
EKSAD committed
1210 1211 1212
                        </div>
                }
                {this.state.add && (
1213
                    <CreateReportItems
EKSAD's avatar
EKSAD committed
1214
                        onClickClose={() => this.setState({ add: false })}
EKSAD's avatar
EKSAD committed
1215
                        data={this.state.listData}
EKSAD's avatar
EKSAD committed
1216
                        refresh={this.getData.bind(this)}
EKSAD's avatar
EKSAD committed
1217
                        createReportItems={this.createReportItems.bind(this)}
EKSAD's avatar
EKSAD committed
1218
                    />
1219
                )}
EKSAD's avatar
EKSAD committed
1220
                {this.state.edit && (
1221
                    <EditReportItems
EKSAD's avatar
EKSAD committed
1222
                        onClickClose={() => this.setState({ edit: false })}
EKSAD's avatar
EKSAD committed
1223
                        data={this.state.rowData}
EKSAD's avatar
EKSAD committed
1224
                        refresh={this.getData.bind(this)}
EKSAD's avatar
EKSAD committed
1225
                        updateReportItems={this.updateReportItems.bind(this)}
EKSAD's avatar
EKSAD committed
1226
                    />
1227
                )}
EKSAD's avatar
EKSAD committed
1228
                {this.state.popupError && (
1229 1230
                    <PopUpFailedSave onClickClose={() => this.setState({ popupError: false })} />
                )}
EKSAD's avatar
EKSAD committed
1231 1232 1233
                {this.state.visibleUpload && (
                    <div className="test app-popup-show">
                        <div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
Deni Rinaldi's avatar
Deni Rinaldi committed
1234
                            <div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
EKSAD's avatar
EKSAD committed
1235 1236 1237 1238 1239 1240 1241 1242 1243 1244 1245
                                <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 })}
                                    >
1246
                                        <img src={Images.close} />
EKSAD's avatar
EKSAD committed
1247 1248 1249 1250 1251 1252 1253
                                    </button>
                                </div>
                            </div>
                            <UploadFile
                                type={this.state.uploadStatus}
                                percentage={this.state.percentage}
                                result={this.state.result}
1254
                                acceptedFiles={["xlsx"]}
EKSAD's avatar
EKSAD committed
1255 1256 1257 1258
                                onHandle={(dt) => {
                                    this.fileHandler(dt)
                                    this.setState({ uploadStatus: 'idle', percentage: '0' })
                                }}
EKSAD's avatar
EKSAD committed
1259
                                onUpload={() => {
EKSAD's avatar
EKSAD committed
1260
                                    this.state.judul === "MASTER DATA - REPORT ITEMS" && !this.state.invalidTemplate ?
Deni Rinaldi's avatar
Deni Rinaldi committed
1261 1262
                                        this.checkUpload() :
                                        this.setState({ alert: true, messageAlert: "Invalid Template", tipeAlert: 'warning' })
EKSAD's avatar
EKSAD committed
1263
                                }}
Deni Rinaldi's avatar
Deni Rinaldi committed
1264

EKSAD's avatar
EKSAD committed
1265 1266 1267 1268
                            />
                        </div>
                    </div>
                )}
a.bairuha's avatar
a.bairuha committed
1269 1270 1271 1272 1273 1274 1275 1276
                {this.state.visibleDelete && (
                    <PopUpDelete
                        rowData={this.state.rowData}
                        name={this.state.reportNameDelete}
                        onClickClose={() => this.setState({ visibleDelete: false })}
                        onClickDelete={this.deleteReport.bind(this)}
                    />
                )}
1277
            </div>
EKSAD's avatar
EKSAD committed
1278 1279 1280
        );
    }
}