EditManagementDoc.js

import React, { Component } from 'react'
import Images from '../../assets/Images'
import { TextField, withStyles, Snackbar, Typography } from '@material-ui/core'
import MuiAlert from '@material-ui/lab/Alert';
import api from '../../api'
import Autocomplete from '@material-ui/lab/Autocomplete'
import Constant from '../../library/Constant'
import { format } from 'date-fns';
import UploadFile from "../../library/Upload";
import { ExcelRenderer } from 'react-excel-renderer';
import * as R from 'ramda'

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

export default class EditManagementDoc extends Component {
    constructor(props) {
        super(props)
        this.state = {
            perusahaan: null,
            perusahaanData: null,
            getPerusahaan: null,
            errorPerusahaan: false,
            msgErrorPerusahaan: '',
            document: null,
            documentData: null,
            getDocument: null,
            errorDocument: false,
            msgErrorDocument: '',
            listPeriode: null,
            periode: null,
            listMonth: null,
            monthId: null,
            description: '',
            errorDesc: false,
            msgErrorDesc: '',
            errorMonth: false,
            msgErrorMonth: '',
            errorPeriode: false,
            msgErrorPeriode: '',
            file: null,
            alert: false,
            tipeAlert: '',
            messageAlert: '',
            fileType: '',
            konfirmasi: false,
            docId: '',
            document_name: "",
            document_size: 0,
            loadUpload: false,
            sizeUpload: "1",
            name: '',
            disabledPeriode: false
        }
    }

    componentDidMount() {
        this.getFileSize()
        if (this.props.type === 'edit') {
            this.getDetailDoc()
        }
    }

    getFileSize(){
        let body = {
            group: 'MAX_FILE_SIZE',
            company_id: 0,
            type: 'MAX_FILE_SIZE'
        }
        api.create().getAllSettingByType(body).then(response => {
            // console.log(response);
            if (response.data) {
                if (response.data.status === "success") {
                    this.setState({
                        sizeUpload: response.data.data[0] ? response.data.data[0].value === undefined ? "1" : response.data.data[0].value : "1"
                    })
                }
            }
        })
    }

    getDetailDoc() {
        api.create().getDetailDocument(this.props.idoc).then(response => {
            // console.log(response)
            if (response.data) {
                if (response.ok) {
                    if (response.data.status === "success") {
                        let data = response.data.data
                        this.setState({
                            companyId: data.company_id,
                            companyName: data.company_name,
                            categoryId: data.setting_id,
                            categoryName: data.values,
                            period: data.document_periode,
                            getMonthName: data.document_month,
                            description: data.description,
                            filePath: data.document_filepath,
                            file: data.document_filepath,
                            document_name: data.document_name,
                            document_size: data.document_size,
                            // id: data.approval_matrix_id,
                            // status: data.status,
                            fileType: data.document_type,
                            created: data.created,
                            updated: data.updated === null ? "" : data.updated,
                            loadUpload: true,
                            name: data.values,
                            disabledPeriode: data.values === 'Manual Book TIA 4.0' ? true : false
                        }, () => {
                            this.getDataCompany()
                            this.getDataDocument()
                            this.getPeriode()
                            this.getMonth()
                        })
                    } else {
                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
                            if (response.data.message.includes("Someone Logged In")) {
                                setTimeout(() => {
                                    localStorage.removeItem(Constant.TOKEN)
                                    window.location.reload();
                                }, 1000);
                            }
                        })
                    }
                } else {
                    this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
                }
            } else {
                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
            }
        })
    }

    getDataCompany() {
        api.create().getPerusahaanUserActive().then((response) => {
            if (response.data) {
                if (response.data.status == 'success') {
                    let data = response.data.data
                    let typeData = data.map((item) => {
                        return {
                            company_id: item.company_id,
                            company_name: item.company_name
                        }
                    })
                    let typeProps = {
                        options: typeData,
                        getOptionLabel: (option) => option.company_name,
                    };
                    let index = typeData.findIndex((val) => val.company_id == this.state.companyId)
                    this.setState({ perusahaan: typeProps, perusahaanData: response.data.data, getPerusahaan: index === -1 ? typeData[0] : typeData[index] })
                } else {
                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
                        if (response.data.message.includes("Someone Logged In")) {
                            setTimeout(() => {
                                localStorage.removeItem(Constant.TOKEN)
                                window.location.reload();
                            }, 1000);
                        }
                    })
                }
            } else {
                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
            }
        })
    }

    getDataDocument() {
        // let payload = {
        //     "setting_group_id": 7,
        //     "setting_type_id": 167,
        //     "company_id": 0

        // }
        api.create().getDocumentCategory().then(response => {
            // console.log(response);
            if (response.data) {
                if (response.data.status == 'success') {
                    let data = response.data.data
                    let typeData = data.map((item) => {
                        return {
                            document_category_id: item.setting_id,
                            document_category_name: item.value
                        }
                    })
                    let typeProps = {
                        options: typeData,
                        getOptionLabel: (option) => option.document_category_name,
                    };
                    let index = typeData.findIndex((val) => val.document_category_id == this.state.categoryId)
                    this.setState({ document: typeProps, documentData: response.data.data, getDocument: index === -1 ? typeData[0] : typeData[index] })
                } else {
                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
                        if (response.data.message.includes("Someone Logged In")) {
                            setTimeout(() => {
                                localStorage.removeItem(Constant.TOKEN)
                                window.location.reload();
                            }, 1000);
                        }
                    })
                }
            } else {
                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
            }
        })
    }

    getPeriode() {
        api.create().getPeriodeTransaction().then(response => {
            let dateNow = new Date
            let year = format(dateNow, 'yyyy')
            if (response.data) {
                if (response.data.status === "success") {
                    let data = response.data.data
                    let periodeData = data.map((item) => {
                        return {
                            periode: item,
                        }
                    })
                    let defaultProps = {
                        options: periodeData,
                        getOptionLabel: (option) => option.periode,
                    };
                    let index = data.sort((a, b) => a - b).findIndex((val) => val == this.state.period)
                    this.setState({ listPeriode: defaultProps, periode: index == -1 ? periodeData[0] : periodeData[index] })
                }
            }
        })
    }

    getMonth() {
        api.create().getMonthTransaction().then(response => {
            let dateNow = new Date
            // let bulan = format(dateNow, 'MMMM')
            if (response.data) {
                if (response.data.status === "success") {
                    let data = response.data.data
                    let monthData = data.map((item) => {
                        return {
                            month_name: item.month_name,
                            month_id: item.month_id
                        }
                    })
                    let index = monthData.findIndex((val) => val.month_name == this.state.getMonthName)
                    let defaultProps = {
                        options: monthData,
                        getOptionLabel: (option) => option.month_name,
                    };
                    // let index = data.sort((a, b) => a - b).findIndex((val) => val.month_name == this.state.getMonth)
                    this.setState({ listMonth: defaultProps, monthId: index == -1 ? monthData[0] : monthData[index] })
                }
            }
        })
    }

    clearMessage() {
        this.setState({
            errorPerusahaan: false,
            msgErrorPerusahaan: '',
            errorDocument: false,
            msgErrorDocument: '',
            errorMonth: false,
            msgErrorMonth: '',
            errorPeriode: false,
            msgErrorPeriode: '',
        })
    }

    fileHandler = (event) => {
        let fileObj = event
        let length = event.name.split(".").length
        let fileType = event.name.split(".")[length - 1]
        if (fileType === 'zip' || 'rar') {
            this.setState({ file: event, fileType: String(fileType) })
        } else {
            ExcelRenderer(fileObj, (err, resp) => {
                // console.log(fileType)
                if (err) {
                    // console.log(err);
                }
                else {
                    this.setState({ file: event, fileType: String(fileType) })
                }
            })
        }
    }

    validasi() {
        if (String(this.props.name).includes('Manual Book TIA')){
        } else {
            if (R.isNil(this.state.periode)) {
                this.setState({ errorPeriode: true, msgErrorPeriode: 'Period Cannot be Empty' })
            }  else if (R.isNil(this.state.monthId)) {
                this.setState({ errorMonth: true, msgErrorMonth: 'Month Cannot be Empty' })
            } else if (R.isNil(this.state.getPerusahaan)) {
                this.setState({ errorPerusahaan: true, msgErrorPerusahaan: 'Company Cannot be Empty' })
            }
        }
        if (R.isNil(this.state.getDocument)) {
            this.setState({ errorDocument: true, msgErrorDocument: 'Category Cannot be Empty' })
        } else if (R.isNil(this.state.file)) {
            this.setState({ alert: true, messageAlert: 'File Cannot be Empty', tipeAlert: 'warning' })
        } 
        
        else {
            const formData = new FormData();
            if (this.state.file == this.state.filePath){
                formData.append("updated", 0);
                formData.append("file", null);
            } else {
                formData.append("updated", 1);
                formData.append("file", this.state.file);
            }
            if (String(this.props.name).includes('Manual Book TIA')){
                formData.append("documentMonth", null);
                formData.append("documentPeriode", null);
                formData.append("companyId", 1);

            } else {
                formData.append("documentMonth", this.state.monthId.month_id);
                formData.append("documentPeriode", this.state.periode.periode);
                formData.append("companyId", this.state.getPerusahaan.company_id);
            }
            formData.append("settingId", this.state.getDocument.document_category_id);
            formData.append("description", this.state.description);
            formData.append("extension", this.state.fileType);
            formData.append("documentId", this.props.idoc);
            this.setState({ formData }, () => {
                this.props.updateDocument(this.state.formData)
            })
        }
    }

    deleteFile(e) {
        this.setState({ file: null })
    }

    closeAlert() {
        this.setState({ alert: false })
    }

    render() {
        return (
            <div>
                <div className="test app-popup-show">
                    <div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
                        <div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
                            <div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
                                <div className="popup-title">
                                    <span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Edit</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.props.onClickClose()}
                                >
                                    <img src={Images.close} />
                                </button>
                            </div>
                        </div>

                        <div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20, paddingTop: 20 }}>
                            {this.state.disabledPeriode === false ?
                            <div className="column-1">
                                <div style={{ padding: 10, borderRadius: 5 }}>
                                    <Autocomplete
                                        {...this.state.perusahaan}
                                        debug
                                        // clearOnEscape
                                        id="tipe"
                                        onChange={(event, newInputValue) => this.setState({ getPerusahaan: newInputValue }, () => this.clearMessage())}
                                        renderInput={(params) =>
                                            <TextField {...params}
                                                error={this.state.errorPerusahaan}
                                                helperText={this.state.msgErrorPerusahaan}
                                                InputProps={{ ...params.InputProps, style: { fontSize: 11 } }}
                                                InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }}
                                                label="Company Name" />}
                                        value={this.state.getPerusahaan}
                                    />
                                </div>
                            </div>
                            :true}
                            {this.state.disabledPeriode === false ?
                            <div className="column-2">
                                <div style={{ padding: 10, borderRadius: 5 }}>
                                    <Autocomplete
                                        {...this.state.document}
                                        // debug
                                        clearOnEscape
                                        id="tipe"
                                        onChange={(event, newInputValue) => this.setState({ getDocument: newInputValue }, 
                                        () => newInputValue === null ? this.setState({ disabledPeriode: false })
                                            : newInputValue.document_category_name === 'Manual Book TIA 4.0' ?
                                                this.setState({ disabledPeriode: true }, () => this.clearMessage())
                                            : this.setState({ disabledPeriode: false }, () => this.clearMessage())
                                        )}
                                        renderInput={(params) =>
                                            <TextField {...params}
                                                error={this.state.errorDocument}
                                                helperText={this.state.msgErrorDocument}
                                                InputProps={{ ...params.InputProps, style: { fontSize: 11 } }}
                                                InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }}
                                                label="Category" />}
                                        value={this.state.getDocument}
                                    />
                                </div>
                            </div>
                            :
                            <div className="column-1">
                                <div style={{ padding: 10, borderRadius: 5 }}>
                                    <Autocomplete
                                        {...this.state.document}
                                        // debug
                                        clearOnEscape
                                        id="tipe"
                                        onChange={(event, newInputValue) => this.setState({ getDocument: newInputValue }, 
                                        () => newInputValue === null ? this.setState({ disabledPeriode: false })
                                            : newInputValue.document_category_name === 'Manual Book TIA 4.0' ?
                                                this.setState({ disabledPeriode: true }, () => this.clearMessage())
                                            : this.setState({ disabledPeriode: false }, () => this.clearMessage())
                                        )}
                                        renderInput={(params) =>
                                            <TextField {...params}
                                                error={this.state.errorDocument}
                                                helperText={this.state.msgErrorDocument}
                                                InputProps={{ ...params.InputProps, style: { fontSize: 11 } }}
                                                InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }}
                                                label="Category" />}
                                        value={this.state.getDocument}
                                    />
                                </div>
                            </div>
                            }
                            {this.state.disabledPeriode === false ?
                            <div className="column-1">
                                <div style={{ padding: 10, borderRadius: 5 }}>
                                    <Autocomplete
                                        {...this.state.listMonth}
                                        // debug
                                        clearOnEscape
                                        id="month"
                                        onChange={(event, newInputValue) => this.setState({ monthId: newInputValue }, () => this.clearMessage())}
                                        style={{ width: 250 }}
                                        renderInput={(params) =>
                                            <TextField {...params} label="Period Month" margin="normal" style={{ marginTop: 7 }}
                                                InputProps={{ ...params.InputProps, style: { fontSize: 11 } }}
                                                InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }}
                                                error={this.state.errorMonth}
                                                helperText={this.state.msgErrorMonth}
                                            />}
                                        value={this.state.monthId}
                                    />
                                </div>
                            </div>
                            : true }
                            {this.state.disabledPeriode === false ?
                            <div className="column-2">
                                <div style={{ padding: 10, borderRadius: 5 }}>
                                    <Autocomplete
                                        {...this.state.listPeriode}
                                        // debug
                                        clearOnEscape
                                        id="periode"
                                        onChange={(event, newInputValue) => this.setState({ periode: newInputValue }, () => this.clearMessage())}
                                        style={{ width: 250 }}
                                        renderInput={(params) =>
                                            <TextField {...params} label="Period Year" margin="normal" style={{ marginTop: 7 }}
                                                InputProps={{ ...params.InputProps, style: { fontSize: 11 } }}
                                                InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }}
                                                error={this.state.errorPeriode}
                                                helperText={this.state.msgErrorPeriode}
                                            />}
                                        value={this.state.periode}
                                    />
                                </div>
                            </div>
                            : true}
                        </div>
                        <div style={{ paddingLeft: 30, paddingRight: 30, paddingTop: 10 }}>
                            {this.state.loadUpload && (
                                <UploadFile
                                    type={this.state.uploadStatus}
                                    percentage={this.state.percentage}
                                    result={this.state.result}
                                    acceptedFiles={["xls", "xlsx", "pdf", "PDF", "docx", "doc", "pptx", "ppt", "ods", "odf" ]}
                                    intent={"management"}
                                    onHandle={(dt) => {
                                        this.fileHandler(dt)
                                        this.setState({ uploadStatus: 'idle', percentage: '0' })
                                    }}
                                    onDelete={(e) => {
                                        this.deleteFile(e)
                                    }}
                                    onUpload={() => alert('sukses')}
                                    value={this.state.file}
                                    docSize={this.state.document_size}
                                    docName={this.state.document_name}
                                    sizeUpload={Number(this.state.sizeUpload)}
                                />
                            )}
                        </div>
                        <div className="margin-top-10px" style={{ paddingLeft: 30, paddingRight: 30, borderRadius: 5, paddingBottom: 20 }}>
                            <TextField
                                style={{ width: '100%' }}
                                id="description"
                                label="Description"
                                value={this.state.description}
                                inputProps={{
                                    min: 0,
                                    style: {
                                        fontSize: 11
                                    }
                                }}

                                InputLabelProps={{
                                    style: {
                                        fontSize: 11,
                                        color: '#7e8085'
                                    }
                                }}
                                name="Description"
                                onChange={(e) => {
                                    this.setState({
                                        description: e.target.value
                                    })
                                    this.clearMessage()
                                }}
                                error={this.state.errorDesc}
                                helperText={this.state.msgErrorDesc}
                            >
                            </TextField>
                        </div>
                        <div className="margin-top-10px" style={{ paddingLeft: 30, paddingRight: 30, borderRadius: 5, paddingBottom: 20 }}>
                            <div style={{ display: 'flex' }}>
                                <Typography style={{ fontSize: 11, width: '12%' }}>Created By</Typography>
                                <Typography style={{ fontSize: 11 }}>: {this.state.created}</Typography>
                            </div>
                            <div style={{ display: 'flex' }}>
                                <Typography style={{ fontSize: 11, width: '12%' }}>Updated By</Typography>
                                <Typography style={{ fontSize: 11 }}>: {this.state.updated == - null ? "" : this.state.updated}</Typography>
                            </div>
                        </div>
                        <div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
                            <div className="column-1" style={{ alignSelf: 'center' }}>
                                <button
                                    type="button"
                                    onClick={() => this.props.onClickClose()}
                                >
                                    <div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
                                        <span style={{ color: '#354960', fontSize: 11 }}>Cancel</span>
                                    </div>
                                </button>
                            </div>
                            <div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
                                <button
                                    type="button"
                                    onClick={() => 
                                        this.setState({ loading: true }, () => {
                                            setTimeout(() => {
                                                this.validasi()
                                            }, 100);
                                        })
                                    }
                                >
                                    <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>
                        </div>
                    </div>
                    <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
                        <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
                            {this.state.messageAlert}
                        </Alert>
                    </Snackbar>
                </div>
            </div>
        )
    }
}