feat: deals table
This commit is contained in:
74
src/app/deals/components/desktop/DealsTable/DealsTable.tsx
Normal file
74
src/app/deals/components/desktop/DealsTable/DealsTable.tsx
Normal file
@ -0,0 +1,74 @@
|
||||
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;
|
||||
@ -0,0 +1,33 @@
|
||||
import { useMemo } from "react";
|
||||
import { MRT_ColumnDef } from "mantine-react-table";
|
||||
import { DealSchema } from "@/lib/client";
|
||||
|
||||
const useDealsTableColumns = () => {
|
||||
return useMemo<MRT_ColumnDef<DealSchema>[]>(
|
||||
() => [
|
||||
{
|
||||
accessorKey: "id",
|
||||
header: "Номер",
|
||||
size: 20,
|
||||
},
|
||||
{
|
||||
accessorKey: "name",
|
||||
header: "Название",
|
||||
enableSorting: false,
|
||||
},
|
||||
{
|
||||
header: "Дата создания",
|
||||
accessorKey: "createdAt",
|
||||
Cell: ({ row }) =>
|
||||
new Date(row.original.createdAt).toLocaleString("ru-RU"),
|
||||
enableSorting: true,
|
||||
sortingFn: (rowA, rowB) =>
|
||||
new Date(rowB.original.createdAt).getTime() -
|
||||
new Date(rowA.original.createdAt).getTime(),
|
||||
},
|
||||
],
|
||||
[]
|
||||
);
|
||||
};
|
||||
|
||||
export default useDealsTableColumns;
|
||||
@ -1,53 +1,20 @@
|
||||
"use client";
|
||||
|
||||
import { IconChevronLeft, IconSettings } from "@tabler/icons-react";
|
||||
import { Box, Flex, Group, Stack, Text } from "@mantine/core";
|
||||
import { Box, Group, Stack, Text } from "@mantine/core";
|
||||
import Boards from "@/app/deals/components/shared/Boards/Boards";
|
||||
import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
|
||||
import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
|
||||
import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
|
||||
import { useDrawersContext } from "@/drawers/DrawersContext";
|
||||
import useIsMobile from "@/hooks/utils/useIsMobile";
|
||||
|
||||
const Header = () => {
|
||||
const { projects, setSelectedProjectId, refetchProjects, selectedProject } =
|
||||
const MainBlockHeader = () => {
|
||||
const { setSelectedProjectId, refetchProjects, selectedProject } =
|
||||
useProjectsContext();
|
||||
const { refetchBoards } = useBoardsContext();
|
||||
const { openDrawer } = useDrawersContext();
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
const spacer = (
|
||||
<Box
|
||||
flex={1}
|
||||
style={{ borderBottom: "2px solid gray" }}
|
||||
/>
|
||||
);
|
||||
|
||||
const getDesktopHeader = () => {
|
||||
return (
|
||||
<Flex
|
||||
wrap={"nowrap"}
|
||||
justify={"space-between"}>
|
||||
<Boards />
|
||||
{spacer}
|
||||
<Flex
|
||||
align={"center"}
|
||||
style={{
|
||||
borderBottom: "2px solid gray",
|
||||
}}>
|
||||
<ProjectSelect
|
||||
data={projects}
|
||||
value={selectedProject}
|
||||
onChange={value =>
|
||||
value && setSelectedProjectId(value.id)
|
||||
}
|
||||
style={{ minWidth: 200 }}
|
||||
/>
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
const selectProjectId = async (projectId: number | null) => {
|
||||
await refetchProjects();
|
||||
setSelectedProjectId(projectId);
|
||||
@ -73,9 +40,11 @@ const Header = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const getMobileHeader = () => {
|
||||
return (
|
||||
<>
|
||||
return (
|
||||
<Stack
|
||||
gap={0}
|
||||
w={"100%"}>
|
||||
{isMobile && (
|
||||
<Group justify={"space-between"}>
|
||||
<Box
|
||||
p={"md"}
|
||||
@ -89,28 +58,19 @@ const Header = () => {
|
||||
<IconSettings />
|
||||
</Box>
|
||||
</Group>
|
||||
<Group
|
||||
wrap={"nowrap"}
|
||||
gap={0}
|
||||
align={"end"}>
|
||||
<Boards />
|
||||
{spacer}
|
||||
</Group>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Group
|
||||
justify={"flex-end"}
|
||||
w={"100%"}>
|
||||
<Stack
|
||||
)}
|
||||
<Group
|
||||
wrap={"nowrap"}
|
||||
gap={0}
|
||||
w={"100%"}>
|
||||
{isMobile ? getMobileHeader() : getDesktopHeader()}
|
||||
</Stack>
|
||||
</Group>
|
||||
align={"end"}>
|
||||
<Boards />
|
||||
<Box
|
||||
flex={1}
|
||||
style={{ borderBottom: "2px solid gray" }}
|
||||
/>
|
||||
</Group>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
export default MainBlockHeader;
|
||||
@ -1,26 +1,42 @@
|
||||
"use client";
|
||||
|
||||
import { Space } from "@mantine/core";
|
||||
import { Box, Space } from "@mantine/core";
|
||||
import DealsTable from "@/app/deals/components/desktop/DealsTable/DealsTable";
|
||||
import MainBlockHeader from "@/app/deals/components/mobile/MainBlockHeader/MainBlockHeader";
|
||||
import Funnel from "@/app/deals/components/shared/Funnel/Funnel";
|
||||
import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
|
||||
import { DealsContextProvider } from "@/app/deals/contexts/DealsContext";
|
||||
import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
|
||||
import { useViewContext } from "@/app/deals/contexts/ViewContext";
|
||||
|
||||
const PageBody = () => {
|
||||
const { selectedBoard } = useBoardsContext();
|
||||
const { selectedProject } = useProjectsContext();
|
||||
const { view } = useViewContext();
|
||||
|
||||
if (view === "board")
|
||||
if (view === "board") {
|
||||
return (
|
||||
<>
|
||||
<MainBlockHeader />
|
||||
<Space h={"md"} />
|
||||
<DealsContextProvider>
|
||||
<DealsContextProvider boardId={selectedBoard?.id}>
|
||||
<Funnel />
|
||||
</DealsContextProvider>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (view === "table") return <>-</>;
|
||||
if (view === "table") {
|
||||
return (
|
||||
<Box>
|
||||
<DealsContextProvider
|
||||
withPagination
|
||||
projectId={selectedProject?.id}>
|
||||
<DealsTable />
|
||||
</DealsContextProvider>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return <>-</>;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user