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

// material-ui
import * as React from 'react';
import {
    DataGrid,
    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"
// ==============================|| EVENT TABLE ||============================== //

export default function FileList({refType, refId, allowDelete, sx}) {
    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 = [
        {
            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%'}}>
            <DataGrid
                sx={sx}
                rows={rows}
                columns={columns}
                editMode="row"
                rowModesModel={rowModesModel}
                initialState={{
                    pagination: {
                        paginationModel: {page: 0, pageSize: 5},
                    },
                }}
                pageSizeOptions={[5, 10]}
                autoHeight = {true}
            />
        </div>
    );
}