feat: deals filters

2025-09-01 17:54:31 +04:00
parent ab7ef1e753
commit 48d539154c
24 changed files with 489 additions and 306 deletions
--- a/src/app/deals/components/desktop/DealsTable/DealsTable.tsx
+++ b/src/app/deals/components/desktop/DealsTable/DealsTable.tsx
@ -1,63 +1,39 @@
-import { IconEdit } from "@tabler/icons-react";
-import { MRT_TableOptions } from "mantine-react-table";
-import { ActionIcon, Group, Pagination, Stack, Tooltip } from "@mantine/core";
+import { FC } from "react";
+import { IconMoodSad } from "@tabler/icons-react";
+import { Group, Pagination, Stack, Text } 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 } =
+const DealsTable: FC = () => {
+    const { deals, paginationInfo, page, setPage, dealsFilters } =
        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}
+                records={[...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>
+                sortStatus={{
+                    columnAccessor: dealsFilters.sortingField,
+                    direction: dealsFilters.sortingDirection,
+                }}
+                onSortStatusChange={sorting => {
+                    dealsFilters.setSortingField(sorting.columnAccessor);
+                    dealsFilters.setSortingDirection(sorting.direction);
+                }}
+                emptyState={
+                    <Group
+                        align={"center"}
+                        gap={"xs"}>
+                        <Text>Нет сделок</Text>
+                        <IconMoodSad />
+                    </Group>
                }
+                groups={undefined}
            />
            {paginationInfo && paginationInfo.totalPages > 1 && (
                <Group justify={"flex-end"}>
--- a/src/app/deals/components/desktop/DealsTable/useDealsTableColumns.tsx
+++ b/src/app/deals/components/desktop/DealsTable/useDealsTableColumns.tsx
@ -1,33 +1,67 @@
-import { useMemo } from "react";
-import { MRT_ColumnDef } from "mantine-react-table";
+import { useCallback, useMemo } from "react";
+import { IconEdit } from "@tabler/icons-react";
+import { DataTableColumn } from "mantine-datatable";
+import { ActionIcon, Tooltip } from "@mantine/core";
+import { useDealsContext } from "@/app/deals/contexts/DealsContext";
+import { useDrawersContext } from "@/drawers/DrawersContext";
 import { DealSchema } from "@/lib/client";
 import { utcDateTimeToLocalString } from "@/utils/datetime";

 const useDealsTableColumns = () => {
-    return useMemo<MRT_ColumnDef<DealSchema>[]>(
-        () => [
-            {
-                accessorKey: "id",
-                header: "Номер",
-                size: 20,
-            },
-            {
-                accessorKey: "name",
-                header: "Название",
-                enableSorting: false,
-            },
-            {
-                header: "Дата создания",
-                accessorKey: "createdAt",
-                Cell: ({ row }) =>
-                    utcDateTimeToLocalString(row.original.createdAt),
-                enableSorting: true,
-                sortingFn: (rowA, rowB) =>
-                    new Date(rowB.original.createdAt).getTime() -
-                    new Date(rowA.original.createdAt).getTime(),
-            },
-        ],
-        []
+    const { dealsCrud } = useDealsContext();
+    const { openDrawer } = useDrawersContext();
+
+    const onEditDeal = useCallback(
+        (deal: DealSchema) => {
+            openDrawer({
+                key: "dealEditorDrawer",
+                props: {
+                    deal,
+                    dealsCrud,
+                },
+            });
+        },
+        [openDrawer, dealsCrud]
+    );
+
+    return useMemo(
+        () =>
+            [
+                {
+                    accessor: "actions",
+                    title: "Действия",
+                    sortable: false,
+                    textAlign: "center",
+                    width: "0%",
+                    render: deal => (
+                        <Tooltip label="Редактировать">
+                            <ActionIcon
+                                bdrs={"md"}
+                                size={"lg"}
+                                onClick={() => onEditDeal(deal)}
+                                variant={"default"}>
+                                <IconEdit />
+                            </ActionIcon>
+                        </Tooltip>
+                    ),
+                },
+                {
+                    accessor: "id",
+                    title: "Номер",
+                    sortable: true,
+                },
+                {
+                    accessor: "name",
+                    title: "Название",
+                },
+                {
+                    title: "Дата создания",
+                    accessor: "createdAt",
+                    render: deal => utcDateTimeToLocalString(deal.createdAt),
+                    sortable: true,
+                },
+            ] as DataTableColumn<DealSchema>[],
+        [onEditDeal]
    );
 };

--- a/src/app/deals/components/desktop/ToolPanelAction/ToolPanelAction.module.css
+++ b/src/app/deals/components/desktop/ToolPanelAction/ToolPanelAction.module.css
--- a/src/app/deals/components/desktop/ToolPanelAction/ToolPanelAction.tsx
+++ b/src/app/deals/components/desktop/ToolPanelAction/ToolPanelAction.tsx
@ -1,12 +1,12 @@
 import { FC, PropsWithChildren } from "react";
 import { ActionIcon, Box } from "@mantine/core";
-import style from "./ProjectAction.module.css";
+import style from "./ToolPanelAction.module.css";

 type Props = {
    onClick: () => void;
 };

-const ProjectAction: FC<PropsWithChildren<Props>> = ({
+const ToolPanelAction: FC<PropsWithChildren<Props>> = ({
    onClick,
    children,
 }) => {
@ -23,4 +23,4 @@ const ProjectAction: FC<PropsWithChildren<Props>> = ({
    );
 };

-export default ProjectAction;
+export default ToolPanelAction;
--- a/src/app/deals/components/desktop/TopToolPanel/TopToolPanel.tsx
+++ b/src/app/deals/components/desktop/TopToolPanel/TopToolPanel.tsx
@ -1,16 +1,21 @@
 "use client";

-import { IconEdit, IconPlus } from "@tabler/icons-react";
+import { IconEdit, IconFilter, IconPlus } from "@tabler/icons-react";
 import { Flex, Group } from "@mantine/core";
 import { modals } from "@mantine/modals";
-import ProjectAction from "@/app/deals/components/desktop/ProjectAction/ProjectAction";
+import ToolPanelAction from "@/app/deals/components/desktop/ToolPanelAction/ToolPanelAction";
 import ViewSelector from "@/app/deals/components/desktop/ViewSelector/ViewSelector";
+import { useDealsContext } from "@/app/deals/contexts/DealsContext";
 import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
+import { useViewContext } from "@/app/deals/contexts/ViewContext";
+import DealsTableFiltersModal from "@/app/deals/modals/DealsTableFiltersModal/DealsTableFiltersModal";
 import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
 import { useDrawersContext } from "@/drawers/DrawersContext";
 import useIsMobile from "@/hooks/utils/useIsMobile";

 const TopToolPanel = () => {
+    const { dealsFilters } = useDealsContext();
+    const { view } = useViewContext();
    const { projects, setSelectedProjectId, selectedProject, projectsCrud } =
        useProjectsContext();
    const { openDrawer } = useDrawersContext();
@ -45,12 +50,22 @@ const TopToolPanel = () => {
                wrap={"nowrap"}
                align={"center"}
                gap={"sm"}>
-                <ProjectAction onClick={onEditClick}>
+                <DealsTableFiltersModal
+                    getOpener={onFiltersClick => (
+                        <ToolPanelAction onClick={onFiltersClick}>
+                            <IconFilter />
+                        </ToolPanelAction>
+                    )}
+                    filters={dealsFilters}
+                    selectedProject={selectedProject}
+                    boardAndStatusEnabled={view === "table"}
+                />
+                <ToolPanelAction onClick={onEditClick}>
                    <IconEdit />
-                </ProjectAction>
-                <ProjectAction onClick={onCreateClick}>
+                </ToolPanelAction>
+                <ToolPanelAction onClick={onCreateClick}>
                    <IconPlus />
-                </ProjectAction>
+                </ToolPanelAction>
                <ProjectSelect
                    data={projects}
                    value={selectedProject}
--- a/src/app/deals/components/shared/PageBody/PageBody.tsx
+++ b/src/app/deals/components/shared/PageBody/PageBody.tsx
@ -1,44 +1,61 @@
 "use client";

-import { Box, Space } from "@mantine/core";
-import DealsTable from "@/app/deals/components/desktop/DealsTable/DealsTable";
+import { Space } from "@mantine/core";
+import TopToolPanel from "@/app/deals/components/desktop/TopToolPanel/TopToolPanel";
 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";
+import PageBlock from "@/components/layout/PageBlock/PageBlock";
+import DealsTable from "../../desktop/DealsTable/DealsTable";
+
+const BoardView = () => (
+    <PageBlock>
+        <MainBlockHeader />
+        <Space h="md" />
+        <Funnel />
+    </PageBlock>
+);
+
+const TableView = () => (
+    <PageBlock>
+        <DealsTable />
+    </PageBlock>
+);
+
+const ScheduleView = () => <PageBlock>-</PageBlock>;

 const PageBody = () => {
    const { selectedBoard } = useBoardsContext();
    const { selectedProject } = useProjectsContext();
    const { view } = useViewContext();

-    if (view === "board") {
-        return (
-            <>
-                <MainBlockHeader />
-                <Space h={"md"} />
-                <DealsContextProvider boardId={selectedBoard?.id}>
-                    <Funnel />
-                </DealsContextProvider>
-            </>
-        );
-    }
+    const getViewContent = () => {
+        switch (view) {
+            case "board":
+                return <BoardView />;
+            case "table":
+                return <TableView />;
+            default:
+                return <ScheduleView />;
+        }
+    };

-    if (view === "table") {
-        return (
-            <Box>
-                <DealsContextProvider
-                    withPagination
-                    projectId={selectedProject?.id}>
-                    <DealsTable />
-                </DealsContextProvider>
-            </Box>
-        );
-    }
+    const getContextProps = () => {
+        if (view === "table") {
+            return { withPagination: true, projectId: selectedProject?.id };
+        }
+        return { boardId: selectedBoard?.id };
+    };

-    return <>-</>;
+    return (
+        <DealsContextProvider {...getContextProps()}>
+            <TopToolPanel />
+            {getViewContent()}
+        </DealsContextProvider>
+    );
 };

 export default PageBody;