PNSPS-frontend-MaterialUI/src/components/FileList.js

// material-ui
import * as React from 'react';
import {
    GridActionsCellItem,
} from "@mui/x-data-grid";
import * as Icon from '../utils/IconUtils';
import * as HttpUtils from "../utils/HttpUtils"
import * as UrlUtils from "../utils/ApiPathConst"
import * as DateUtils from "../utils/DateUtils"
import { FiDataGrid } from './FiDataGrid';
// ==============================|| EVENT TABLE ||============================== //

export default function FileList({ refType, refId, allowDelete, sx, dateHideable, ...props }) {
    const [rows, setRows] = React.useState([]);
    const [rowModesModel] = React.useState({});

    React.useEffect(() => {
        loadData();
    }, []);

    const onDeleteClick = (fileId, skey, filename) => () => {
        HttpUtils.get(
            {
                url: UrlUtils.GET_FILE_DELETE,
                params: {
                    fileId: fileId,
                    skey: skey,
                    filename: filename
                },
                onSuccess: function () {
                    loadData();
                }
            }
        );
    };

    const onDownloadClick = (fileId, skey, filename) => () => {
        HttpUtils.fileDownload({
            fileId: fileId,
            skey: skey,
            filename: filename,
        });
    };


    const loadData = () => {
      
            HttpUtils.post(
                {
                    url: UrlUtils.POST_FILE_LIST,
                    params: {
                        refType: refType,
                        refId:refId,
                    },
                    onSuccess: function (responseData) {
                        setRows(responseData.records);
                    }
                }
            );
    };

    const convertToStr = (bytes, decimals) => {
        if (bytes == 0) return '0 Bytes';
        var dm = decimals || 2,
            sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
        let i = 0;
        i = Math.floor(Math.log(bytes) / Math.log(1024));
        return parseFloat((bytes / Math.pow(1024, i)).toFixed(dm)) + ' ' + sizes[i];
    }

    const columns = (dateHideable ?
        [
            {
                field: 'actions',
                type: 'actions',
                headerName: '',
                width: 50,
                cellClassName: 'actions',
                getActions: (params) => {
                    return [
                        <GridActionsCellItem
                            key="OutSave"
                            icon={<Icon.Download />}
                            label="Download"
                            className="textPrimary"
                            onClick={onDownloadClick(params.id, params.row.skey, params.row.filename)}
                            color="primary"
                        />]
                },
            },
            {
                id: 'filename',
                field: 'filename',
                headerName: 'filename',
                flex: 3,
            },
            {
                id: 'filesize',
                field: 'filesize',
                headerName: 'filesize',
                flex: 1,
                valueGetter: (params) => {
                    return convertToStr(params.value);
                }
            }
        ]
        :
        [
            {
                id: 'created',
                field: 'created',
                headerName: 'created',
                flex: 1,
                valueGetter: (params) => {
                    return DateUtils.datetimeStr(params.value);
                }
            },
            {
                field: 'actions',
                type: 'actions',
                headerName: '',
                width: 50,
                cellClassName: 'actions',
                getActions: (params) => {
                    return [
                        <GridActionsCellItem
                            key="OutSave"
                            icon={<Icon.Download />}
                            label="Download"
                            className="textPrimary"
                            onClick={onDownloadClick(params.id, params.row.skey, params.row.filename)}
                            color="primary"
                        />]
                },
            },
            {
                id: 'filename',
                field: 'filename',
                headerName: 'filename',
                flex: 3,
            },
            {
                id: 'filesize',
                field: 'filesize',
                headerName: 'filesize',
                flex: 1,
                valueGetter: (params) => {
                    return convertToStr(params.value);
                }
            },
        ]
    );



    if (allowDelete) {
        columns.push({
            field: 'actions',
            type: 'actions',
            headerName: 'Delete',
            width: 100,
            cellClassName: 'actions',
            getActions: (params) => {
                return [
                    <GridActionsCellItem
                        key="OutSave"
                        icon={<Icon.Delete />}
                        label="Delete"
                        className="textPrimary"
                        onClick={onDeleteClick(params.id, params.row.skey, params.row.filename)}
                        color="primary"
                    />]
            },
        });
    }

    return (
        // <div style={{height: 400, width: '100%'}}>
        <FiDataGrid
            {...props}
            hideFooterSelectedRowCount={true}
            sx={sx}
            rows={rows}
            columns={columns}
            editMode="row"
            rowModesModel={rowModesModel}
            initialState={{
                pagination: {
                    paginationModel: { page: 0, pageSize: 5 },
                },
            }}
            pageSizeOptions={[5, 10]}
            autoHeight={true}
        />
        // </div>
    );
}