DownloadReport.js

import React, { Component, useRef } from 'react';
import { Typography, Paper, TextField, Snackbar, withStyles, Switch, FormControlLabel, InputAdornment } from '@material-ui/core';
import Images from '../../assets/Images';
import Constant from '../../library/Constant';
import api from '../../api';
import { PropagateLoader } from 'react-spinners';
import { format } from 'date-fns';
import Autocomplete from '@material-ui/lab/Autocomplete';
import { Alert } from '@material-ui/lab';
import ReactTooltip from "react-tooltip";
import SunEditor, { buttonList } from "suneditor-react";
import 'suneditor/dist/css/suneditor.min.css'; // Import Sun Editor's CSS File
import CloudDownloadIcon from '@material-ui/icons/CloudDownload';
import moment from 'moment';
import CheckCircleOutlineIcon from '@material-ui/icons/CheckCircleOutline';
import CheckCircleIcon from '@material-ui/icons/CheckCircle';
import SearchIcon from '@material-ui/icons/Search';


const IOSSwitch = withStyles((theme) => ({
    root: {
        width: 55,
        height: 31,
        padding: 0,
        margin: theme.spacing(1),
    },
    switchBase: {
        padding: 3,
        marginLeft: 1,
        '&$checked': {
            transform: 'translateX(16px)',
            color: theme.palette.common.white,
            paddingLeft: 11,
            '& + $track': {
                backgroundColor: '#52d869',
                opacity: 1,
                border: 'none',
            },
        },
        '&$focusVisible $thumb': {
            color: '#52d869',
            border: '6px solid #fff',
        },
    },
    thumb: {
        width: 25,
        height: 25,
    },
    track: {
        borderRadius: 30 / 2,
        border: `1px solid ${theme.palette.grey[400]}`,
        backgroundColor: 'red',
        opacity: 1,
        transition: theme.transitions.create(['background-color', 'border']),
    },
    checked: {},
    focusVisible: {},
}))(({ classes, ...props }) => {
    return (
        <Switch
            focusVisibleClassName={classes.focusVisible}
            disableRipple
            classes={{
                root: classes.root,
                switchBase: classes.switchBase,
                thumb: classes.thumb,
                track: classes.track,
                checked: classes.checked,
            }}
            {...props}
        />
    );
});


class DownloadReport extends Component {
    constructor(props) {
        super(props)
        this.editorRef = React.createRef();
        this.editorRefEmail = React.createRef();
        // this.handleChange = this.handleChange.bind(this)
        this.state = {
            load: false,
            loading: false,
            listDownload: [],
            oldListDownload: [],
            search: "",
            isSearch: false
        }
    }


    componentDidMount() {
        const interval = setInterval(() => {
            this.getListDownload()
        }, 500);
        return () => clearInterval(interval);
    }

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

    getListDownload() {
        api.create().getListDownload().then((response) => {
            // console.log(response);
            if (response.data) {
                if (response.ok) {
                    if (response.data.status === 'success') {
                        let data = response.data.data
                        // console.log(data);
                        let arr = [];
                        var groups = this.groupItems(data, "created_at"); // array will be grouped by 'date' property

                        for (var key in groups) {
                            if (this.state.search.length == 0) {
                                arr.push({
                                    time: key,
                                    items: groups[key],
                                });
                            } else {
                                let itmDtl = []
                                // console.log(groups);
                                groups[key].forEach((d) => {
                                    let dtS = d.download_file_report_name;
                                    let kS = this.state.search;
                                    if (dtS.toLowerCase().includes(kS.toLowerCase())) {
                                        itmDtl.push(d);
                                    }
                                })

                                let itm = {
                                    time: key,
                                    items: itmDtl
                                }

                                if (itmDtl.length > 0) {
                                    arr.push(itm)
                                }
                            }                         
                        }
                        this.setState({ listDownload: arr, oldListDownload: arr })
                    } else {
                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
                            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' })
                }
            } else {
                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
            }
        })
    }

    groupItems(array, property) {
        return array.reduce(function (groups, item) {
            var reference = moment(item.created_at).format("DD-MM-YYYY");
            var pastDate = moment(reference, "DD-MM-YYYY");
            var todayDate = moment(moment().format("DD-MM-YYYY"), "DD-MM-YYYY");
            let dDiff = todayDate.diff(pastDate, "days");
            var name = item.status === 0 ? "" : (dDiff === 0 ? "Today" : dDiff === 1 ? "Yesterday" : "Days Ago");
            var group = groups[name] || (groups[name] = []);
            group.push(item);
            return groups;
        }, {});
    }

    async handleDownload(idFile, name) {
        let url = `${process.env.REACT_APP_URL_MAIN_BE}/public/transaction/download/zip-files?downloadedFileReportId=${idFile}`
        let res = await fetch(
            `${process.env.REACT_APP_URL_MAIN_BE}/public/transaction/download/zip-files?downloadedFileReportId=${idFile}`
        )
        res = await res.blob()
        this.setState({ loading: false })
        if (res.size > 0) {
            let url = window.URL.createObjectURL(res);
            let a = document.createElement('a');
            a.href = url;
            a.download = `${name}.zip`;
            a.click();
        }
    }

    handleChange(e, type) {
        this.setState({ search: e.target.value }, () => {
            if (this.state.search.length == 0) {
                this.setState({ listDownload: this.state.oldListDownload })
            }
        })
    }

    // handleSearch(key) {
    //     this.setState({ isSearch: true }, () => {
    //         let newListDownload = []
    //         console.log(this.state.oldListDownload);
    //         this.state.oldListDownload.forEach((i) => {
    //             let itmDtl = []
    //             i.items.forEach((d) => {
    //                 let dtS = d.download_file_report_name;
    //                 let kS = this.state.search;
    //                 if (dtS.toLowerCase().includes(kS.toLowerCase())) {
    //                     itmDtl.push(d);
    //                 }
    //             })

    //             let itm = {
    //                 time: i.time,
    //                 items: itmDtl
    //             }
                
    //             if (itmDtl.length > 0) {
    //                 newListDownload.push(itm)
    //             }
    //         })
    //         console.log(newListDownload);
    //         this.setState({ listDownload: newListDownload, isSearch: false })
    //     })
    // }

    render() {
        let { listDownload, messageAlert, pageEmpty } = this.state
        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={{ flex: 1, backgroundColor: '#f8f8f8', minHeight: this.props.height, boxShadow: 'none' }}>
                <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
                    <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
                        {messageAlert}
                    </Alert>
                </Snackbar>
                <div>
                    {this.state.loading && loadingComponent}
                    <div className={"main-color"} style={{ height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
                        <Typography style={{ fontSize: '16px', color: 'white' }}>Download Report</Typography>
                    </div>

                    {listDownload.length > 0 || this.state.search.length != 0 ?
                        <div style={{ padding: 20, width: '100%' }}>
                            <Paper style={{ paddingTop: 10, minHeight: this.props.height, paddingBottom: 50, background: '#d9d9d91c' }}>
                                <div style={{ margin: '40px 100px', background: '#fff', borderRadius: 10, minHeight: this.props.height, padding: 45 }}>
                                    <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 10 }}>
                                        <TextField
                                            variant="outlined"
                                            id="search"
                                            name="search"
                                            value={this.state.search}
                                            onChange={(e) => this.handleChange(e, '')}
                                            size="small"
                                            InputProps={{
                                                style: { borderRadius: 7 },
                                                endAdornment: <InputAdornment position="end"><SearchIcon /></InputAdornment>,
                                            }}
                                        />
                                    </div>
                                    {!this.state.isSearch && (
                                    listDownload.map((listItem) => {
                                        return (
                                            <div>
                                                <div style={{ fontSize: 18, fontWeight: 700, color: '#273B80', marginLeft: 5, marginBottom: 10 }}>{listItem.time}</div>
                                                {listItem.items.length > 0 &&
                                                    listItem.items.map((item) => {
                                                        return (
                                                            <div>
                                                                {item.status == 0 ?
                                                                    null
                                                                    :
                                                                    <div style={{ display: 'flex' }}>
                                                                        <div style={{ background: '#D9D9D9', borderRadius: 10, marginBottom: 15, marginRight: 2, borderBottomRightRadius: 0, borderTopRightRadius: 0 }}>
                                                                            <div style={{ alignItems: 'center', display: 'flex' }}>
                                                                                <img src={Images.zip} style={{ width: 80, margin: 9 }} />
                                                                            </div>
                                                                        </div>
                                                                        <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', background: '#D9D9D9', borderRadius: 10, marginBottom: 15, borderBottomLeftRadius: 0, borderTopLeftRadius: 0 }}>
                                                                            <div style={{ marginRight: 10 }}>
                                                                                <Typography style={{ fontSize: 18, color: '#273B80', fontWeight: 700, marginTop: 10, marginLeft: 10 }}>{item.download_file_report_name}</Typography>
                                                                                <Typography style={{ marginLeft: 10, marginTop: 5, fontSize: 11, marginBottom: 10 }}>Last Download by: {item.created_by}  -  {item.created_at}</Typography>
                                                                            </div>
                                                                            <div style={{ display: 'flex', justifyContent: 'center', marginRight: 20 }}>
                                                                                {item.status === 1 ?
                                                                                    <button
                                                                                        type="button"
                                                                                        disabled={true}
                                                                                        onClick={() => null}
                                                                                        style={{
                                                                                            backgroundColor: 'transparent',
                                                                                            borderColor: 'transparent',
                                                                                            outline: 'none',
                                                                                        }}
                                                                                    >
                                                                                        <div style={{ backgroundColor: '#939497de', width: 140, height: 40, borderRadius: 10, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
                                                                                            <Typography style={{ fontSize: '16px', color: '#fff', textAlign: 'center' }}>In Progress</Typography>
                                                                                        </div>
                                                                                    </button>
                                                                                    :
                                                                                    item.status === 2 ?
                                                                                        <button
                                                                                            type="button"
                                                                                            // disabled={this.state.buttonError}
                                                                                            onClick={() => this.handleDownload(item.download_file_report_id, item.download_file_report_name)}
                                                                                            style={{
                                                                                                backgroundColor: 'transparent',
                                                                                                borderColor: 'transparent',
                                                                                                outline: 'none',
                                                                                            }}
                                                                                        >
                                                                                            <div style={{ backgroundColor: '#354960', width: 140, height: 40, borderRadius: 10, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
                                                                                                <Typography style={{ fontSize: '16px', color: '#fff', textAlign: 'center' }}>Download</Typography>
                                                                                            </div>
                                                                                        </button>
                                                                                        :
                                                                                        item.status === 3 ?
                                                                                            <button
                                                                                                type="button"
                                                                                                // disabled={this.state.buttonError}
                                                                                                onClick={() => this.handleDownload(item.download_file_report_id, item.download_file_report_name)}
                                                                                                style={{
                                                                                                    backgroundColor: 'transparent',
                                                                                                    borderColor: 'transparent',
                                                                                                    outline: 'none',
                                                                                                }}
                                                                                            >
                                                                                                <div style={{ backgroundColor: '#354960', width: 140, height: 40, borderRadius: 10, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
                                                                                                    <Typography style={{ fontSize: '16px', color: '#fff', textAlign: 'center' }}>Download <span><CheckCircleIcon fontSize='small' style={{ marginBottom: 1, marginLeft: 7 }} /></span></Typography>
                                                                                                </div>
                                                                                            </button>
                                                                                            :
                                                                                            null
                                                                                }

                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                }
                                                            </div>

                                                        )
                                                    })}
                                            </div>

                                        )
                                    })
                                    )}
                                    <div style={{ fontSize: this.state.listDownload.length > 0 ? 12 : 18, fontWeight: 700, color: this.state.listDownload.length > 0 ? 'red' : 'black', marginLeft: 5, marginBottom: 10 }}>{this.state.listDownload.length > 0 ? 'Note : File download akan hilang dalam 3 hari setelah di generate.' : 'Data not found.'}</div>
                                </div>
                            </Paper>
                        </div>
                        :
                        <div style={{ flex: 1, height: '100vh', alignItems: 'center', justifyContent: 'center', display: 'flex' }}>
                            <div style={{ flexDirection: 'column', textAlign: 'center' }}>
                                <CloudDownloadIcon style={{ fontSize: 50, color: 'grey' }} />
                                <h3 style={{ marginTop: 5, color: 'grey' }}>
                                    Download Report Empty
                                </h3>
                            </div>
                        </div>
                    }

                    {/* {this.state.pageEmpty &&
                        <div style={{ flex: 1, height: '100vh', alignItems: 'center', justifyContent: 'center', display: 'flex' }}>
                            <div style={{ flexDirection: 'column', textAlign: 'center' }}>
                                <CloudDownloadIcon style={{ fontSize: 50, color: 'grey' }} />
                                <h3 style={{ marginTop: 5, color: 'grey' }}>
                                    Download Report Empty
                                </h3>
                            </div>
                        </div>
                    } */}

                </div>
            </div>
        );

    }
}

export default DownloadReport;