fakz9/Crm-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: deals filters

Browse Source
This commit is contained in:
AlexSserb
2025-09-01 17:54:31 +04:00
parent ab7ef1e753
commit 48d539154c
24 changed files with 489 additions and 306 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/app/deals/components/desktop/DealsTable/DealsTable.tsx
View File

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

86
src/app/deals/components/desktop/DealsTable/useDealsTableColumns.tsx
View File

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

0
src/app/deals/components/desktop/ProjectAction/ProjectAction.module.css → src/app/deals/components/desktop/ToolPanelAction/ToolPanelAction.module.css
View File

6
src/app/deals/components/desktop/ProjectAction/ProjectAction.tsx → src/app/deals/components/desktop/ToolPanelAction/ToolPanelAction.tsx
View File

@ -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;

27
src/app/deals/components/desktop/TopToolPanel/TopToolPanel.tsx
View File

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

67
src/app/deals/components/shared/PageBody/PageBody.tsx
View File

@ -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;

5
src/app/deals/contexts/DealsContext.tsx
View File

@ -2,6 +2,7 @@
import React from "react";
import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
import { DealsFilters } from "@/app/deals/hooks/useDealsFilters";
import { DealsCrud, useDealsCrud } from "@/hooks/cruds/useDealsCrud";
import useDealsList from "@/hooks/lists/useDealsList";
import { DealSchema, PaginationInfoSchema } from "@/lib/client";
@ -15,6 +16,7 @@ type DealsContextState = {
paginationInfo?: PaginationInfoSchema;
page: number;
setPage: React.Dispatch<React.SetStateAction<number>>;
dealsFilters: DealsFilters;
};
type Props = {
@ -24,11 +26,12 @@ type Props = {
};
const useDealsContextState = ({
withPagination = false,
boardId,
projectId,
withPagination = false,
}: Props): DealsContextState => {
const { statuses } = useStatusesContext();
const dealsListObjects = useDealsList({
boardId,
projectId,

25
src/app/deals/drawers/DealEditorDrawer/components/GeneralTab.tsx
View File

@ -1,33 +1,33 @@
import { FC, useState } from "react";
import { isEqual } from "lodash";
import { Button, Group, Stack, TextInput } from "@mantine/core";
import { Button, Group, Stack, Text, TextInput } from "@mantine/core";
import { useForm } from "@mantine/form";
import { ProjectsCrud } from "@/hooks/cruds/useProjectsCrud";
import { ProjectSchema } from "@/lib/client";
import { DealsCrud } from "@/hooks/cruds/useDealsCrud";
import { DealSchema } from "@/lib/client";
import { utcDateTimeToLocalString } from "@/utils/datetime";
type Props = {
projectsCrud: ProjectsCrud;
project: ProjectSchema;
dealsCrud: DealsCrud;
deal: DealSchema;
onClose: () => void;
};
const GeneralTab: FC<Props> = ({ project, projectsCrud, onClose }) => {
const [initialValues, setInitialValues] = useState(project);
const form = useForm<ProjectSchema>({
const GeneralTab: FC<Props> = ({ deal, dealsCrud, onClose }) => {
const [initialValues, setInitialValues] = useState(deal);
const form = useForm<DealSchema>({
initialValues,
validate: {
name: value => !value && "Введите название",
},
});
const onSubmit = (values: ProjectSchema) => {
projectsCrud.onUpdate(project.id, values);
const onSubmit = (values: DealSchema) => {
dealsCrud.onUpdate(deal.id, values);
setInitialValues(values);
};
const onDelete = () => {
projectsCrud.onDelete(project, onClose);
dealsCrud.onDelete(deal, onClose);
};
return (
@ -37,6 +37,7 @@ const GeneralTab: FC<Props> = ({ project, projectsCrud, onClose }) => {
label={"Название"}
{...form.getInputProps("name")}
/>
<Text>Создано: {utcDateTimeToLocalString(deal.createdAt)}</Text>
<Group
justify={"space-between"}
wrap={"nowrap"}>

0
src/app/deals/drawers/SelectedProjectEditorDrawer/DealEditorDrawer.module.css → src/app/deals/drawers/SelectedProjectEditorDrawer/SelectedProjectEditorDrawer.module.css
View File

25
src/app/deals/drawers/SelectedProjectEditorDrawer/components/GeneralTab.tsx
View File

@ -1,33 +1,33 @@
import { FC, useState } from "react";
import { isEqual } from "lodash";
import { Button, Group, Stack, Text, TextInput } from "@mantine/core";
import { Button, Group, Stack, TextInput } from "@mantine/core";
import { useForm } from "@mantine/form";
import { DealsCrud } from "@/hooks/cruds/useDealsCrud";
import { DealSchema } from "@/lib/client";
import { utcDateTimeToLocalString } from "@/utils/datetime";
import { ProjectsCrud } from "@/hooks/cruds/useProjectsCrud";
import { ProjectSchema } from "@/lib/client";
type Props = {
dealsCrud: DealsCrud;
deal: DealSchema;
projectsCrud: ProjectsCrud;
project: ProjectSchema;
onClose: () => void;
};
const GeneralTab: FC<Props> = ({ deal, dealsCrud, onClose }) => {
const [initialValues, setInitialValues] = useState(deal);
const form = useForm<DealSchema>({
const GeneralTab: FC<Props> = ({ project, projectsCrud, onClose }) => {
const [initialValues, setInitialValues] = useState(project);
const form = useForm<ProjectSchema>({
initialValues,
validate: {
name: value => !value && "Введите название",
},
});
const onSubmit = (values: DealSchema) => {
dealsCrud.onUpdate(deal.id, values);
const onSubmit = (values: ProjectSchema) => {
projectsCrud.onUpdate(project.id, values);
setInitialValues(values);
};
const onDelete = () => {
dealsCrud.onDelete(deal, onClose);
projectsCrud.onDelete(project, onClose);
};
return (
@ -37,7 +37,6 @@ const GeneralTab: FC<Props> = ({ deal, dealsCrud, onClose }) => {
label={"Название"}
{...form.getInputProps("name")}
/>
<Text>Создано: {utcDateTimeToLocalString(deal.createdAt)}</Text>
<Group
justify={"space-between"}
wrap={"nowrap"}>

4
src/app/deals/drawers/SelectedProjectEditorDrawer/components/ProjectEditorBody.tsx
View File

@ -1,10 +1,10 @@
import { FC } from "react";
import { IconEdit } from "@tabler/icons-react";
import { Tabs } from "@mantine/core";
import GeneralTab from "@/app/deals/drawers/DealEditorDrawer/components/GeneralTab";
import GeneralTab from "@/app/deals/drawers/SelectedProjectEditorDrawer/components/GeneralTab";
import { ProjectsCrud } from "@/hooks/cruds/useProjectsCrud";
import { ProjectSchema } from "@/lib/client";
import styles from "../DealEditorDrawer.module.css";
import styles from "../SelectedProjectEditorDrawer.module.css";
type Props = {
projectsCrud: ProjectsCrud;

53
src/app/deals/hooks/useDealsFilters.ts Normal file
View File

@ -0,0 +1,53 @@
import { Dispatch, SetStateAction, useState } from "react";
import { useDebouncedValue } from "@mantine/hooks";
import { BoardSchema, SortDir, StatusSchema } from "@/lib/client";
export type DealsFilters = {
id?: number;
debouncedId?: number;
setId: Dispatch<SetStateAction<number | undefined>>;
name?: string;
debouncedName?: string;
setName: Dispatch<SetStateAction<string | undefined>>;
board: BoardSchema | null;
setBoard: Dispatch<SetStateAction<BoardSchema | null>>;
status: StatusSchema | null;
setStatus: Dispatch<SetStateAction<StatusSchema | null>>;
sortingField: string;
setSortingField: Dispatch<SetStateAction<string>>;
sortingDirection: SortDir;
setSortingDirection: Dispatch<SetStateAction<SortDir>>;
};
const useDealsFilters = (): DealsFilters => {
const [id, setId] = useState<number>();
const [debouncedId] = useDebouncedValue(id, 300);
const [name, setName] = useState<string>();
const [debouncedName] = useDebouncedValue(name, 300);
const [board, setBoard] = useState<BoardSchema | null>(null);
const [status, setStatus] = useState<StatusSchema | null>(null);
const [sortingField, setSortingField] = useState("createdAt");
const [sortingDirection, setSortingDirection] = useState<SortDir>("asc");
return {
id,
setId,
debouncedId,
name,
setName,
debouncedName,
board,
setBoard,
status,
setStatus,
sortingField,
setSortingField,
sortingDirection,
setSortingDirection,
};
};
export default useDealsFilters;

77
src/app/deals/modals/DealsTableFiltersModal/DealsTableFiltersModal.tsx Normal file
View File

@ -0,0 +1,77 @@
"use client";
import { ReactNode } from "react";
import { Flex, Modal, NumberInput, rem, TextInput } from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { DealsFilters } from "@/app/deals/hooks/useDealsFilters";
import BoardSelect from "@/components/selects/BoardSelect/BoardSelect";
import StatusSelect from "@/components/selects/StatusSelect/StatusSelect";
import { ProjectSchema } from "@/lib/client";
type Props = {
filters: DealsFilters;
selectedProject: ProjectSchema | null;
boardAndStatusEnabled: boolean;
getOpener: (open: () => void) => ReactNode;
};
const DealsTableFiltersModal = ({
filters,
selectedProject,
boardAndStatusEnabled,
getOpener,
}: Props) => {
const [opened, { open, close }] = useDisclosure();
return (
<>
{getOpener(open)}
<Modal
title={"Фильтры"}
opened={opened}
onClose={close}>
<Flex
gap={rem(10)}
direction={"column"}>
<NumberInput
label={"ID"}
placeholder={"Введите ID"}
value={filters.id}
onChange={value =>
typeof value === "number"
? filters.setId(Number(value))
: filters.setId(undefined)
}
min={1}
/>
<TextInput
label={"Название"}
placeholder={"Введите название"}
defaultValue={filters.name}
onChange={event => filters.setName(event.target.value)}
/>
{boardAndStatusEnabled && (
<>
<BoardSelect
label={"Доска"}
value={filters.board}
onChange={filters.setBoard}
projectId={selectedProject?.id}
clearable
/>
<StatusSelect
label={"Статус"}
value={filters.status}
onChange={filters.setStatus}
boardId={filters.board?.id}
clearable
/>
</>
)}
</Flex>
</Modal>
</>
);
};
export default DealsTableFiltersModal;

41
src/app/deals/page.tsx
View File

@ -1,31 +1,22 @@
import { Suspense } from "react";
import {
dehydrate,
HydrationBoundary,
QueryClient,
} from "@tanstack/react-query";
import { Suspense } from "react";
import { Loader, Center } from "@mantine/core";
import dynamic from "next/dynamic";
import { Center, Loader } from "@mantine/core";
import PageBody from "@/app/deals/components/shared/PageBody/PageBody";
import { BoardsContextProvider } from "@/app/deals/contexts/BoardsContext";
import { ProjectsContextProvider } from "@/app/deals/contexts/ProjectsContext";
import { StatusesContextProvider } from "@/app/deals/contexts/StatusesContext";
import { ViewContextProvider } from "@/app/deals/contexts/ViewContext";
import PageContainer from "@/components/layout/PageContainer/PageContainer";
import {
getBoardsOptions,
getProjectsOptions,
} from "@/lib/client/@tanstack/react-query.gen";
import { combineProviders } from "@/utils/combineProviders";
// Dynamic imports for better code splitting
const PageBody = dynamic(() => import("@/app/deals/components/shared/PageBody/PageBody"), {
loading: () => <Center h={400}><Loader /></Center>
});
const BoardsContextProvider = dynamic(() => import("@/app/deals/contexts/BoardsContext").then(mod => ({ default: mod.BoardsContextProvider })));
const ProjectsContextProvider = dynamic(() => import("@/app/deals/contexts/ProjectsContext").then(mod => ({ default: mod.ProjectsContextProvider })));
const StatusesContextProvider = dynamic(() => import("@/app/deals/contexts/StatusesContext").then(mod => ({ default: mod.StatusesContextProvider })));
const ViewContextProvider = dynamic(() => import("@/app/deals/contexts/ViewContext").then(mod => ({ default: mod.ViewContextProvider })));
const PageBlock = dynamic(() => import("@/components/layout/PageBlock/PageBlock"));
const PageContainer = dynamic(() => import("@/components/layout/PageContainer/PageContainer"));
const TopToolPanel = dynamic(() => import("./components/desktop/TopToolPanel/TopToolPanel"), {
loading: () => <div style={{ height: 60 }} />
});
async function prefetchData() {
const queryClient = new QueryClient();
const projectsData = await queryClient.fetchQuery(getProjectsOptions());
@ -53,16 +44,14 @@ export default async function DealsPage() {
return (
<Providers>
<Suspense fallback={
<Center h="50vh">
<Loader size="lg" />
</Center>
}>
<Suspense
fallback={
<Center h="50vh">
<Loader size="lg" />
</Center>
}>
<PageContainer>
<TopToolPanel />
<PageBlock>
<PageBody />
</PageBlock>
<PageBody />
</PageContainer>
</Suspense>
</Providers>