add files

src/container/CRFM/InternalAudit.js

+import React, {Component} from 'react'
+import MUIDataTable from 'mui-datatables'
+import {withStyles} from '@material-ui/core/styles';
+import {createMuiTheme, MuiThemeProvider, Paper, Snackbar, Tab, Tabs, Typography} from '@material-ui/core';
+import MuiAlert from '@material-ui/lab/Alert';
+import Constant from '../../library/Constant';
+import Images from '../../assets/Images';
+import ReactTooltip from 'react-tooltip';
+import api from '../../api';
+import PropagateLoader from "react-spinners/PropagateLoader"
+import AllDocument from "../DocumentManagement/AllDocument";
+import PopUpKonfirmasi from "../DocumentManagement/PopUpKonfirmasi";
+import CreateManagementDoc from "../DocumentManagement/CreateManagementDoc";
+
+var ct = require("../../library/CustomTable");
+const getMuiTheme = () => createMuiTheme(ct.customTable());
+const options = ct.customOptionsManagementDocument();
+
+const Alert = withStyles({})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
+
+export default class InternalAudit extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            alert: false,
+            listData: [],
+            id: 0,
+            btncreate: false,
+            btnview: false,
+            load: false,
+            name: '',
+            userCompActive: [],
+            isHasAccessDocument: false,
+            submenu_id: 26
+        }
+    }
+
+
+    componentDidMount() {
+        // this.getPermission()
+        this.getPermission("internal audit");
+        this.getDataCrfm();
+    }
+
+    getDataCrfm(){
+        let payload = {
+            submenu_id: this.state.submenu_id
+        }
+        api.create().getCrfmDocumentBySubmenu(payload).then(
+            response => {
+                console.log("ini data crfm");
+                console.log(response);
+                console.log("data crfm");
+                if(response){
+                    if(response.status === 'success'){
+                        let dataList = []
+                        response.data.data.map((item, index) => {
+                            // if (item.value == "Manual Book TIA 4.0sss") {
+                            dataList.push(item)
+                            // }
+                        })
+
+                        if (dataList.length == 0) {
+                            this.setState({ isHasAccessDocument: dataList.length == 0 ? false : true })
+                        } else {
+                            this.setState({
+                                isHasAccessDocument: dataList.length == 0 ? false : true,
+                                listData: dataList,
+                                loadTable: true,
+                                refresh: ''
+                            }, () => {
+                                this.getPermission(dataList[0].value)
+                            })
+                        }
+                    } else {
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning', loading: false }, () => {
+                            if (response.data.message.includes("Someone Logged In") || response.data.message.includes("Token Expired")) {
+                                setTimeout(() => {
+                                    localStorage.removeItem(Constant.TOKEN)
+                                    window.location.reload();
+                                }, 1000);
+                            }
+                        })
+                    }
+                }else {
+                    this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error', loading: false })
+                }
+            }
+        )
+    }
+
+    getPermission(subMenu) {
+        let payload = {
+            menu: subMenu
+        }
+        api.create().getPermission(payload).then(response => {
+            console.log(response)
+            if (response.data) {
+                if (response.data.status === "success") {
+                    this.setState({
+                        btncreate: response.data.data.create,
+                        btnview: response.data.data.view,
+                        btndownload: response.data.data.download,
+                        load: true
+                    })
+                } else {
+                    this.setState({
+                        load: true
+                    })
+                }
+            } else {
+                this.setState({ load: true })
+            }
+        })
+    }
+
+    getDetailUser() {
+        let userId = localStorage.getItem(Constant.USER)
+        api.create().getDetailUser(userId).then((response) => {
+            if (response.data) {
+                if (response.ok) {
+                    if (response.data.status === 'success') {
+                        this.setState({ userCompany: response.data.data.company, visibleTrue: false }, () => {
+                            this.getCompanyActive()
+                        })
+                    }
+                }
+            }
+        })
+    }
+
+    getCompanyActive() {
+        api.create().getPerusahaanActive().then((response) => {
+            if (response.data) {
+                if (response.data.status === 'success') {
+                    let data = response.data.data
+                    let compActive = []
+                    let userCompActive = []
+                    this.state.userCompany.map((item, index) => {
+                        let indeks = data.findIndex((val) => val.company_id == item)
+                        if (indeks !== -1 && String(data[indeks].status).toLocaleLowerCase() == 'active'){
+                            userCompActive.push(item)
+                        }
+                    })
+                    data.map(( item, index ) => {
+                        if (String(item.status).toLocaleLowerCase() == 'active') {
+                            compActive.push(item)
+                        }
+                    })
+                    if (compActive.length == userCompActive.length){
+                        this.setState({ btnadd: true})
+                    } else {
+                        this.setState({ btnadd: false})
+                    }
+                    this.setState({ userCompActive, visibleTrue: true })
+                    // console.log(userCompActive)
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning', visibleTrue: true }, () => {
+                        if (response.data.message.includes("Someone Logged In") || response.data.message.includes("Token Expired")) {
+                            setTimeout(() => {
+                                localStorage.removeItem(Constant.TOKEN)
+                                window.location.reload();
+                            }, 1000);
+                        }
+                    })
+                }
+            } else {
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error', listCompany: null, company: null, visibleTrue: true })
+            }
+        })
+    }
+
+
+    closeAlert() {
+        this.setState({alert: false})
+    }
+
+    handleLoading(tipe) {
+        this.setState({loading: tipe == 0 ? false : true})
+    }
+
+    render() {
+        const loadingComponent = (
+            <div style={{
+                position: 'absolute',
+                zIndex: 1500,
+                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}
+                />
+            </div>
+        );
+        return (
+            <div style={{height: this.props.height, backgroundColor: '#f8f8f8'}}>
+
+                {/* {this.props.load && ()} */}
+                <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
+                    <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
+                        {this.state.messageAlert}
+                    </Alert>
+                </Snackbar>
+
+                <div className={"main-color"}
+                     style={{height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20}}>
+                    <Typography style={{fontSize: '16px', color: 'white'}}>Internal Audit</Typography>
+                </div>
+
+                <div style={{padding: 20}}>
+
+                    {this.state.loading && loadingComponent && this.state.isHasAccessDocument}
+
+                    <Paper style={{padding: 20}}>
+
+                        <div style={{display: 'flex', justifyContent: 'flex-end'}}>
+
+                            {(this.state.btncreate) && <span>
+                            <a data-tip={'Add'} data-for="add">
+                                <div style={{display: 'grid', justifyContent: 'flex-end'}}>
+                                    <button
+                                        type="button"
+                                        onClick={() => this.setState({visibleCreate: true, refresh: ''})}
+                                        style={{marginRight: 25, background: 'transparent'}}
+                                    >
+                                        <img src={Images.add}/>
+                                    </button>
+                                </div>
+                            </a>
+                            <ReactTooltip border={true} id="add" place="bottom" type="light" effect="solid"/>
+                        </span>}
+
+                        </div>
+
+                        <div style={{display: 'flex'}}>
+
+
+                            {/*{this.state.visibleTrue && (*/}
+                                <AllDocument
+                                    data={this.state.listData}
+                                    refresh={this.state.refresh}
+                                    load={true}
+                                    setId={1}
+                                    userCompActive={[]}
+                                    handleLoading={this.handleLoading.bind(this)}
+                                    name={this.state.name}
+                                />
+                            {/*)}*/}
+                        </div>
+
+                    </Paper>
+
+                    {/*{!this.state.isHasAccessDocument && (*/}
+                    {/*    <Paper style={{ padding: 20 }}>*/}
+                    {/*        <label>You Don't Have Any Access in Document Management</label>*/}
+                    {/*    </Paper>*/}
+                    {/*)}*/}
+
+
+
+                </div>
+
+
+
+
+
+            </div>
+        );
+    }
+}
+
+

src/container/CRFM/TableDocument.js

+import React, {Component} from 'react';
+import api from "../../api";
+import Constant from "../../library/Constant";
+import Images from "../../assets/Images";
+import ReactTooltip from "react-tooltip";
+import PropagateLoader from "react-spinners/PropagateLoader";
+import {createMuiTheme, MuiThemeProvider, Snackbar} from "@material-ui/core";
+import MUIDataTable from "mui-datatables";
+import {withStyles} from "@material-ui/core/styles";
+import MuiAlert from "@material-ui/lab/Alert";
+
+var ct = require("../../library/CustomTable");
+const getMuiTheme = () => createMuiTheme(ct.customTable());
+const options = ct.customOptionsManagementDocument();
+
+const Alert = withStyles({
+})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
+
+
+export default class TableDocument extends Component {
+
+    constructor(props) {
+        super(props)
+        this.state = {
+            dataTable: [],
+            visibleCreate: false,
+            refresh: '',
+            alert: false,
+
+        }
+    }
+
+    componentDidMount() {
+        this.getData()
+    }
+
+    componentWillReceiveProps(props) {
+        // console.log(props);
+        const { refresh, id } = this.props;
+        if (props.refresh !== refresh) {
+            this.getData()
+        }
+    }
+
+    getData() {
+        let payload = {
+            "submenu_id": this.props.submenu_id
+        }
+        this.setState({ loading: true })
+        api.create().getCrfmDocumentBySubmenu(payload).then(response => {
+            console.log(response)
+            if (response.data) {
+                if (response.ok) {
+                    if (response.data.status == 'success') {
+                        let dataTable = []
+                        response.data.data.map((item, index) => {
+                            let indexId = this.props.userCompActive.findIndex((val) => val == item.company_id)
+
+                                if (indexId !== -1) {
+                                    dataTable.push( [
+                                        index,
+                                        item.document_name,
+                                        item.description,
+                                        item.company_name,
+                                        item.document_month,
+                                        item.document_periode,
+                                        item.document_type,
+                                        String(Number(item.document_size) / 1000 + ' KB'),
+                                        item.created_by,
+                                        item.created_at,
+                                        item.values
+                                    ])
+                                }
+
+                        })
+                        // console.log(dataTable)
+                        this.setState({ dataTable, loading: false })
+                        let docPath = response.data.data.map((item) => {
+                            return [
+                                item.document_filepath
+                            ]
+                        })
+                        this.setState({ docPath, loading: false })
+                        let docId = response.data.data.map((item) => {
+                            return [
+                                item.document_id
+                            ]
+                        })
+                        this.setState({ docId, loading: false })
+                    } else {
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning', loading: false }, () => {
+                            if (response.data.message.includes("Someone Logged In") || response.data.message.includes("Token Expired")) {
+                                setTimeout(() => {
+                                    localStorage.removeItem(Constant.TOKEN)
+                                    window.location.reload();
+                                }, 1000);
+                            }
+                        })
+                    }
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error', loading: false })
+                }
+            } else {
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error', loading: false })
+            }
+        })
+    }
+
+    openPopUp = async (index, val, type) =>{
+        console.log(index)
+        if (type === 'download') {
+            let res = await fetch(
+                `${process.env.REACT_APP_URL_MAIN_BE}/public/document/download_cafrm_document?documentName=`+this.state.docPath[val]+"&&fileType="+index[6]
+            )
+            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 = (String(index[3]).includes(":") ? String(index[3]).replace(":", " (") + ` )` : String(index[3])) +" - "+index[4]+" - "+index[5]+" - "+index[10]+"."+index[6];
+                a.click();
+            }
+        }
+    }
+
+    closeAlert() {
+        this.setState({ alert: false })
+    }
+
+    render() {
+        let columns = [{
+            name: "Action",
+            options: {
+                filter: false,
+                sort: false,
+                customBodyRender: (val, tableMeta) => {
+                    return (
+
+                        <div style={{ display: 'flex' }}>
+
+                            {this.props.btnview && <a data-tip={'Download'} data-for="download">
+                                <button
+                                    style={{
+                                        backgroundColor: 'transparent',
+                                        cursor: 'pointer',
+                                        borderColor: 'transparent',
+                                        marginRight: 15
+                                    }}
+                                    onClick={() => this.openPopUp(tableMeta.rowData, val, 'download')}
+                                >
+                                    <img src={Images.download} />
+                                </button>
+                            </a>}
+
+                            <ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
+
+                        </div >
+                    );
+                }
+            }
+        },
+            {
+                name: "File Name",
+                options: {
+                    display: false
+                }
+            },
+            "Description",
+            "Type", "File Size", "Created By", "Created Date",
+            {
+                name: "Category",
+                options: {
+                    display: false
+                }
+            },
+        ]
+
+        const loadingComponent = (
+            <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}
+                />
+            </div>
+        );
+
+        return (
+            <div style={{ width: '100%' }}>
+                {this.props.load && (
+                    <div style={{ padding: 25 }}>
+                        <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
+                            <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
+                                {this.state.messageAlert}
+                            </Alert>
+                        </Snackbar>
+                        {this.state.loading && loadingComponent}
+                        <MuiThemeProvider theme={getMuiTheme()}>
+                            <MUIDataTable
+                                // theme={getMuiTheme()}
+                                data={this.state.dataTable}
+                                columns={columns}
+                                options={options}
+                            />
+                        </MuiThemeProvider>
+                    </div>
+                )}
+
+            </div>
+        )
+    }
+}
+