136 lines
3.8 KiB
TypeScript
136 lines
3.8 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";
|
|
import AdvancedSearch from "../../AdvancedSearch/AdvancedSearch";
|
|
|
|
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 }}
|
|
/>
|
|
<AdvancedSearch />
|
|
{/* <RightTemporaryDrawer /> */}
|
|
{/* <SearchFilterForm /> */}
|
|
<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",
|
|
}));
|