87 lines
3.0 KiB
TypeScript
87 lines
3.0 KiB
TypeScript
import { FC, useCallback } from "react";
|
||
import { IconMoodSad } from "@tabler/icons-react";
|
||
import { Group, Pagination, Stack, Text } from "@mantine/core";
|
||
import useDealsTableColumns from "@/app/deals/components/shared/DealsTable/useDealsTableColumns";
|
||
import { useDealsContext } from "@/app/deals/contexts/DealsContext";
|
||
import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
|
||
import BaseTable from "@/components/ui/BaseTable/BaseTable";
|
||
import { useDrawersContext } from "@/drawers/DrawersContext";
|
||
import useIsMobile from "@/hooks/utils/useIsMobile";
|
||
import { DealSchema } from "@/lib/client";
|
||
|
||
const DealsTable: FC = () => {
|
||
const isMobile = useIsMobile();
|
||
const { selectedProject } = useProjectsContext();
|
||
const { deals, paginationInfo, page, setPage, sortingForm, dealsCrud } =
|
||
useDealsContext();
|
||
const { openDrawer } = useDrawersContext();
|
||
|
||
const onEditClick = useCallback(
|
||
(deal: DealSchema) => {
|
||
openDrawer({
|
||
key: "dealEditorDrawer",
|
||
props: {
|
||
value: deal,
|
||
onChange: deal => dealsCrud.onUpdate(deal.id, deal),
|
||
onDelete: dealsCrud.onDelete,
|
||
project: selectedProject,
|
||
},
|
||
});
|
||
},
|
||
[openDrawer, dealsCrud]
|
||
);
|
||
|
||
const columns = useDealsTableColumns({ onEditClick });
|
||
|
||
return (
|
||
<Stack
|
||
p={isMobile ? "xs" : ""}
|
||
gap={"xs"}
|
||
h={"100%"}>
|
||
<BaseTable
|
||
withTableBorder
|
||
records={[...deals]}
|
||
columns={columns}
|
||
sortStatus={{
|
||
columnAccessor: sortingForm.values.sortingField ?? "",
|
||
direction: sortingForm.values.sortingDirection,
|
||
}}
|
||
onSortStatusChange={sorting => {
|
||
sortingForm.setFieldValue(
|
||
"sortingField",
|
||
sorting.columnAccessor
|
||
);
|
||
sortingForm.setFieldValue(
|
||
"sortingDirection",
|
||
sorting.direction
|
||
);
|
||
}}
|
||
emptyState={
|
||
<Group
|
||
align={"center"}
|
||
gap={"xs"}>
|
||
<Text>Нет сделок</Text>
|
||
<IconMoodSad />
|
||
</Group>
|
||
}
|
||
groups={undefined}
|
||
style={{
|
||
height: "100%",
|
||
}}
|
||
/>
|
||
{paginationInfo && paginationInfo.totalPages > 1 && (
|
||
<Group justify={"flex-end"}>
|
||
<Pagination
|
||
withEdges
|
||
total={paginationInfo.totalPages}
|
||
value={page}
|
||
onChange={setPage}
|
||
/>
|
||
</Group>
|
||
)}
|
||
</Stack>
|
||
);
|
||
};
|
||
|
||
export default DealsTable;
|