111 lines
4.1 KiB
TypeScript
111 lines
4.1 KiB
TypeScript
'use client';
|
|
import { useState } from 'react';
|
|
import {
|
|
Button, Dialog, DialogTitle, DialogContent, DialogActions,
|
|
FormControl, Select, MenuItem, FormControlLabel, Checkbox,
|
|
Stack, Paper, styled,
|
|
TextField
|
|
} from '@mui/material';
|
|
import FileUploadIcon from '@mui/icons-material/FileUpload';
|
|
import * as XLSX from 'xlsx';
|
|
import { saveAs } from 'file-saver';
|
|
import { DataGrid } from '@mui/x-data-grid';
|
|
import { columns } from './constants';
|
|
import { rows } from './mockData';
|
|
|
|
const paginationModel = { page: 0, pageSize: 50 };
|
|
|
|
export default function TransactionTable() {
|
|
const [open, setOpen] = useState(false);
|
|
const [fileType, setFileType] = useState<'csv' | 'xls' | 'xlsx'>('csv');
|
|
const [onlyCurrentTable, setOnlyCurrentTable] = useState(false);
|
|
|
|
const handleExport = () => {
|
|
const exportRows = onlyCurrentTable ? rows.slice(0, 5) : rows;
|
|
const exportData = [
|
|
columns.map(col => col.headerName),
|
|
// @ts-expect-error - Dynamic field access from DataGrid columns
|
|
...exportRows.map(row => columns.map(col => row[col.field] ?? '')),
|
|
];
|
|
|
|
const worksheet = XLSX.utils.aoa_to_sheet(exportData);
|
|
const workbook = XLSX.utils.book_new();
|
|
XLSX.utils.book_append_sheet(workbook, worksheet, 'Transactions');
|
|
|
|
if (fileType === 'csv') {
|
|
const csv = XLSX.utils.sheet_to_csv(worksheet);
|
|
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
|
|
saveAs(blob, 'transactions.csv');
|
|
} else {
|
|
XLSX.writeFile(workbook, `transactions.${fileType}`, { bookType: fileType });
|
|
}
|
|
|
|
setOpen(false);
|
|
};
|
|
|
|
return (
|
|
<StyledPaper>
|
|
<Stack direction="row" justifyContent="space-between" alignItems="center" p={2}>
|
|
<TextField
|
|
label="Search"
|
|
variant="outlined"
|
|
size="small"
|
|
// value={'searchQuery'}
|
|
onChange={(e) => console.log(`setSearchQuery(${e.target.value})`)}
|
|
sx={{ width: 300 }}
|
|
/>
|
|
<Button
|
|
variant="outlined"
|
|
startIcon={<FileUploadIcon />}
|
|
onClick={() => setOpen(true)}
|
|
>
|
|
Export
|
|
</Button>
|
|
</Stack>
|
|
|
|
<DataGrid
|
|
rows={rows}
|
|
columns={columns}
|
|
initialState={{ pagination: { paginationModel } }}
|
|
pageSizeOptions={[50 , 100]}
|
|
sx={{ border: 0 }}
|
|
/>
|
|
|
|
{/* Export Dialog */}
|
|
<Dialog open={open} onClose={() => setOpen(false)}>
|
|
<DialogTitle>Export Transactions</DialogTitle>
|
|
<DialogContent>
|
|
<FormControl fullWidth sx={{ mt: 2 }}>
|
|
<Select
|
|
value={fileType}
|
|
onChange={(e) => setFileType(e.target.value as 'csv' | 'xls' | 'xlsx')}
|
|
>
|
|
<MenuItem value="csv">CSV</MenuItem>
|
|
<MenuItem value="xls">XLS</MenuItem>
|
|
<MenuItem value="xlsx">XLSX</MenuItem>
|
|
</Select>
|
|
</FormControl>
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox
|
|
checked={onlyCurrentTable}
|
|
onChange={(e) => setOnlyCurrentTable(e.target.checked)}
|
|
/>
|
|
}
|
|
label="Only export the results in the current table"
|
|
sx={{ mt: 2 }}
|
|
/>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={() => setOpen(false)}>Cancel</Button>
|
|
<Button variant="contained" onClick={handleExport}>Export</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
</StyledPaper>
|
|
);
|
|
}
|
|
|
|
const StyledPaper = styled(Paper)(() => ({
|
|
height: '90vh',
|
|
}));
|