75 lines
2.7 KiB
TypeScript
75 lines
2.7 KiB
TypeScript
import { IconEdit } from "@tabler/icons-react";
|
|
import { MRT_TableOptions } from "mantine-react-table";
|
|
import { ActionIcon, Group, Pagination, Stack, Tooltip } from "@mantine/core";
|
|
import useDealsTableColumns from "@/app/deals/components/desktop/DealsTable/useDealsTableColumns";
|
|
import { useDealsContext } from "@/app/deals/contexts/DealsContext";
|
|
import BaseTable from "@/components/ui/BaseTable/BaseTable";
|
|
import { useDrawersContext } from "@/drawers/DrawersContext";
|
|
import { DealSchema } from "@/lib/client";
|
|
|
|
const DealsTable = () => {
|
|
const { deals, paginationInfo, page, setPage, dealsCrud } =
|
|
useDealsContext();
|
|
const { openDrawer } = useDrawersContext();
|
|
const columns = useDealsTableColumns();
|
|
const defaultSorting = [{ id: "createdAt", desc: false }];
|
|
|
|
const onEditDeal = (deal: DealSchema) => {
|
|
openDrawer({
|
|
key: "dealEditorDrawer",
|
|
props: {
|
|
deal,
|
|
dealsCrud,
|
|
},
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Stack
|
|
gap={"xs"}
|
|
h={"calc(100vh - 125px)"}>
|
|
<BaseTable
|
|
data={deals}
|
|
columns={columns}
|
|
restProps={
|
|
{
|
|
enableSorting: true,
|
|
enableColumnActions: false,
|
|
paginationDisplayMode: "pages",
|
|
initialState: {
|
|
sorting: defaultSorting,
|
|
},
|
|
mantinePaginationProps: {
|
|
showRowsPerPage: false,
|
|
},
|
|
enableStickyHeader: true,
|
|
enableStickyFooter: true,
|
|
enableRowActions: true,
|
|
renderRowActions: ({ row }) => (
|
|
<Tooltip label="Редактировать">
|
|
<ActionIcon
|
|
bdrs={"md"}
|
|
size={"lg"}
|
|
onClick={() => onEditDeal(row.original)}
|
|
variant={"default"}>
|
|
<IconEdit />
|
|
</ActionIcon>
|
|
</Tooltip>
|
|
),
|
|
} as MRT_TableOptions<DealSchema>
|
|
}
|
|
/>
|
|
<Group justify={"flex-end"}>
|
|
<Pagination
|
|
withEdges
|
|
total={paginationInfo.totalPages}
|
|
value={page}
|
|
onChange={setPage}
|
|
/>
|
|
</Group>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export default DealsTable;
|