feat: deals filters

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"}>

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]
     );
 };
 

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;

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}