ManualBookETMS.js

import React, { Component } from 'react'
import MUIDataTable from 'mui-datatables'
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core';
import api from '../../api';
import Images from '../../assets/Images';
import ReactTooltip from 'react-tooltip';


var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptions();

export default class ManualBookETMS extends Component {
    constructor(props) {
        super(props)
        this.state = {
            dataTable: [],
            visibleCreate: false,
            refresh: ''
        }
    }

    componentDidMount() {
        // console.log(this.props.data)
        this.getData()
    }

    componentWillReceiveProps(props) {
        // console.log(props);
        const { refresh, id } = this.props;
        if (props.refresh !== refresh) {
            this.getData()
        }
      }

    getData() {
        let payload = {
            "setting_id": this.props.data.setting_id
        }

        api.create().getAllDocument(payload).then(response => {
            console.log(response)
            let dataTable = response.data.data.map((item, index) => {
                return [
                    index,
                    item.document_name,
                    item.description,
                    item.company_name,
                    item.document_type,
                    String(Number(item.document_size) / 1000 + ' KB'),
                    item.created_by,
                    item.created_at,
                ]
            })
            this.setState({ dataTable })
            let docPath = response.data.data.map((item) => {
                return [
                    item.document_filepath
                ]
            })
            this.setState({ docPath })
        })
    }

    openPopUp = async (index, val, type) =>{
        if (type === 'download') {
            console.log(this.state.docPath[val])
            let res = await fetch(
                `${process.env.REACT_APP_URL_MAIN_BE}/public/document/download_document?documentName=`+this.state.docPath[val]+"&&fileType="+index[5]
            )
            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 = index[1];
                a.click();
            }
        }
    }

    render() {
        let columns = [{
            name: "Action",
            options: {
                filter: false,
                sort: false,
                customBodyRender: (val, tableMeta) => {
                    console.log(tableMeta)
                    return (
                        <div style={{ display: 'flex' }}>
                            {/* {this.state.btnedit && <span> */}
                                <a data-tip={'Download'} data-for="download">
                                <button
                                    style={{
                                        backgroundColor: 'transparent',
                                        cursor: 'pointer',
                                        borderColor: 'transparent',
                                        marginRight: 15
                                    }}
                                    // onClick={() => console.log(tableMeta)}
                                    onClick={() => this.openPopUp(tableMeta.rowData, val, 'download')}
                                    >
                                        <img src={Images.download} />
                                    </button>
                                </a>
                                <ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
                            {/* </span>} */}
                        </div >
                    );
                }
            }
        }, "Nama File", "Keterangan", "Perusahaan", "Tipe", "Ukuran", "Ditambahkan Oleh", "Ditambahkan Tanggal"
        ]
        return (
            <div style={{ width: '100%' }}>
                <div style={{ padding: 25 }}>
                    <MuiThemeProvider theme={getMuiTheme()}>
                        <MUIDataTable
                            theme={getMuiTheme()}
                            data={this.state.dataTable}
                            columns={columns}
                            options={options}
                        />
                    </MuiThemeProvider>
                </div>
            </div>
        )
    }
}