// material-ui
import * as React from 'react';
import {
DataGrid,
GridActionsCellItem,
GridRowModes
} from "@mui/x-data-grid";
import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
import { useEffect } from "react";
// import {useNavigate} from "react-router-dom";
// import { useTheme } from '@mui/material/styles';
import {
Box,
Stack,
Button
} from '@mui/material';
// ==============================|| EVENT TABLE ||============================== //
export default function UploadFileTable({ recordList, setRecordList, showPageColumn, _checkCode, _expectedCode }) {
const [rows, setRows] = React.useState(recordList);
const [rowModesModel, setRowModesModel] = React.useState({});
const [showPage, setShowPage] = React.useState(false);
const [checkCode, setCheckCode] = React.useState("");
const [expectedCode, setExpectedCode] = React.useState("");
// const theme = useTheme();
// const navigate = useNavigate()
useEffect(() => {
setCheckCode(_checkCode)
}, [_checkCode]);
useEffect(() => {
setExpectedCode(_expectedCode)
}, [_expectedCode]);
useEffect(() => {
setRows(recordList);
// console.log(disableDelete);
}, [recordList]);
useEffect(() => {
setShowPage(showPageColumn);
// console.log(disableDelete);
}, [showPageColumn]);
function NoRowsOverlay() {
return (
No File Record
{/* (rows={[]}) */}
);
}
const handleCancelClick = (id) => () => {
setRowModesModel({
...rowModesModel,
[id]: { mode: GridRowModes.View, ignoreModifications: true },
});
// console.log("Starting Delete")
// const editedRow = rows.find((row) => row.id === id);
// console.log(editedRow)
// console.log(editedRow.isNew)
setRecordList(rows.filter((row) => row.id !== id));
setRows(rows.filter((row) => row.id !== id));
}
const handlePreviewClick = (param) => () => {
var reader = new FileReader();
reader.onload = function () {
let path = reader.result;
var pdf_newTab = window.open("");
pdf_newTab.document.write(
""
+ "" + param.row.name + ""
+ ""
+ ""
+ ""
+ ""
);
};
reader.readAsDataURL(param.row);
}
const columns = showPage?[
{
field: 'actions',
type: 'actions',
headerName: '',
width: 30,
cellClassName: 'actions',
// hide:true,
getActions: ({ id }) => {
return [
}
label="delete"
className="textPrimary"
onClick={handleCancelClick(id)}
color="error"
/>]
},
},
{
field: 'name',
headerName: 'File Name',
flex: 1,
renderCell: (params) => {
return ;
},
},
{
id: 'size',
field: 'size',
headerName: 'File Size',
valueGetter: (params) => {
// console.log(params)
return Math.ceil(params.value / 1024) + " KB";
},
flex: 1,
},
{
id: 'no_of_page',
field: 'no_of_page',
headerName: 'Page',
flex: 1,
hide: true
},
]:[
{
field: 'actions',
type: 'actions',
headerName: '',
width: 30,
cellClassName: 'actions',
// hide:true,
getActions: ({ id }) => {
return [
}
label="delete"
className="textPrimary"
onClick={handleCancelClick(id)}
color="error"
/>]
},
},
{
field: 'name',
headerName: 'File Name',
flex: 1,
renderCell: (params) => {
return ;
},
},
{
id: 'check_code',
field: 'check_code',
headerName: 'File Code',
flex: 1,
hide: true,
renderCell: () => {
return (expectedCode == checkCode)?checkCode:Warning, File Code not match.
File Code: {checkCode}
Expected Code: {expectedCode}
;
},
},
{
id: 'size',
field: 'size',
headerName: 'File Size',
valueGetter: (params) => {
// console.log(params)
return Math.ceil(params.value / 1024) + " KB";
},
flex: 1,
},
];
return (
'auto'}
/>
);
}