101 lines
2.8 KiB
TypeScript
101 lines
2.8 KiB
TypeScript
import { Box, Typography } from "@mui/material";
|
|
import ResponsiveTable, { Column } from "common/ResponsiveTable";
|
|
import { cloneDeep } from "lodash";
|
|
//import { getTableIcons } from "common/ResponsiveTable";
|
|
//import MaterialTable, { Column, MTableToolbar } from "material-table";
|
|
import { Transaction } from "models/Transaction";
|
|
import moment from "moment";
|
|
import ObjectDescriber from "objects/ObjectDescriber";
|
|
import React, { useEffect, useState } from "react";
|
|
import TransactionDataDisplay from "./transactionDataDisplay";
|
|
|
|
interface Props {
|
|
transactions: Transaction[];
|
|
loading?: boolean;
|
|
objectNames?: Map<string, string>;
|
|
}
|
|
|
|
export default function TransactionViewer(props: Props) {
|
|
const { transactions, loading, objectNames } = props;
|
|
const [displayedRows, setDisplayedRows] = useState<Transaction[]>([])
|
|
const [tablePage, setTablePage] = useState(0)
|
|
const [pageSize, setPageSize] = useState(10)
|
|
|
|
useEffect(()=>{
|
|
let clone: Transaction[] = cloneDeep(transactions)
|
|
let rows = clone.splice(tablePage * pageSize, pageSize)
|
|
setDisplayedRows(rows)
|
|
},[transactions, tablePage, pageSize])
|
|
|
|
const columns: Column<Transaction>[] = [
|
|
{
|
|
title: "Date",
|
|
render: row => {
|
|
return (
|
|
<Box padding={2}>
|
|
<Typography>{moment(row.transaction.timestamp).format("YYYY-MM-DD")}</Typography>
|
|
</Box>
|
|
);
|
|
}
|
|
},
|
|
{
|
|
title: "From",
|
|
render: row => {
|
|
return (
|
|
<Box padding={2}>
|
|
<Typography>{ObjectDescriber(row.transaction.fromObject).name}</Typography>
|
|
<Typography>
|
|
{objectNames ? objectNames.get(row.transaction.fromKey) : row.transaction.fromKey}
|
|
</Typography>
|
|
</Box>
|
|
);
|
|
}
|
|
},
|
|
{
|
|
title: "To",
|
|
render: row => {
|
|
return (
|
|
<Box padding={2}>
|
|
<Typography>{ObjectDescriber(row.transaction.toObject).name}</Typography>
|
|
<Typography>
|
|
{objectNames ? objectNames.get(row.transaction.toKey) : row.transaction.toKey}
|
|
</Typography>
|
|
</Box>
|
|
);
|
|
}
|
|
},
|
|
{
|
|
title: "Transaction",
|
|
render: row => {
|
|
return (
|
|
<Box padding={2}>
|
|
<TransactionDataDisplay transaction={row} />
|
|
</Box>
|
|
);
|
|
}
|
|
}
|
|
];
|
|
|
|
const handleChange = (event: any) => {
|
|
setPageSize(event.target.value);
|
|
};
|
|
|
|
const myTable = () => {
|
|
console.log(transactions)
|
|
return (
|
|
<ResponsiveTable<Transaction>
|
|
isLoading={loading}
|
|
title={"Inventory Transactions"}
|
|
page={tablePage}
|
|
columns={columns}
|
|
pageSize={pageSize}
|
|
rows={displayedRows}
|
|
total={transactions.length}
|
|
setPage={page => setTablePage(page)}
|
|
handleRowsPerPageChange={handleChange}
|
|
/>
|
|
)
|
|
};
|
|
|
|
return <Box>{myTable()}</Box>;
|
|
}
|