72 lines
1.6 KiB
TypeScript
72 lines
1.6 KiB
TypeScript
|
import { FC } from "react";
|
||
|
|
import { Grid, Box } from "@mui/material";
|
||
|
|
import { GridColDef } from "@mui/x-data-grid-pro";
|
||
|
|
import { StyledDataGrid } from "./StyledDataGrid";
|
||
|
|
import { typography } from "styles/theme";
|
||
|
|
import { useRouter } from "next/router";
|
||
|
|
|
||
|
|
interface TicketListProps {
|
||
|
|
title: string;
|
||
|
|
tickets: any;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const TicketList: FC<TicketListProps> = ({ title, tickets }) => {
|
||
|
|
const router = useRouter();
|
||
|
|
let gridColumns: GridColDef[] = [
|
||
|
|
{
|
||
|
|
field: "number",
|
||
|
|
headerName: "Number",
|
||
|
|
flex: 1,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
field: "title",
|
||
|
|
headerName: "Title",
|
||
|
|
flex: 1,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
field: "customer",
|
||
|
|
headerName: "Sender",
|
||
|
|
valueGetter: (params) => params.row?.customer?.fullname,
|
||
|
|
flex: 1,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
field: "group",
|
||
|
|
headerName: "Group",
|
||
|
|
valueGetter: (params) => params.row?.group?.name,
|
||
|
|
flex: 1,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
console.log({ tickets });
|
||
|
|
const rowClick = ({ row }) => {
|
||
|
|
router.push(`/tickets/${row.internalId}`);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box sx={{ height: "100vh", backgroundColor: "#ddd", p: 3 }}>
|
||
|
|
<Grid container direction="column">
|
||
|
|
<Grid item>
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
backgroundColor: "#ddd",
|
||
|
|
px: "8px",
|
||
|
|
pb: "16px",
|
||
|
|
...typography.h4,
|
||
|
|
fontSize: 24,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{title}
|
||
|
|
</Box>
|
||
|
|
</Grid>
|
||
|
|
<Grid item>
|
||
|
|
<StyledDataGrid
|
||
|
|
name={title}
|
||
|
|
columns={gridColumns}
|
||
|
|
rows={tickets}
|
||
|
|
onRowClick={rowClick}
|
||
|
|
/>
|
||
|
|
</Grid>
|
||
|
|
</Grid>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
};
|