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

feat: deals table

Browse Source
This commit is contained in:
AlexSserb
2025-08-28 20:23:58 +04:00
parent 4323695069
commit 19e5ef2a7e
14 changed files with 523 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/app/deals/components/desktop/DealsTable/DealsTable.tsx Normal file
View 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;

33
src/app/deals/components/desktop/DealsTable/useDealsTableColumns.tsx Normal file
View File

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

80
src/app/deals/components/shared/Header/Header.tsx → src/app/deals/components/mobile/MainBlockHeader/MainBlockHeader.tsx
View File

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

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

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

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

@ -1,11 +1,10 @@
"use client";
import React from "react";
import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
import { DealsCrud, useDealsCrud } from "@/hooks/cruds/useDealsCrud";
import useDealsList from "@/hooks/lists/useDealsList";
import { DealSchema } from "@/lib/client";
import { DealSchema, PaginationInfoSchema } from "@/lib/client";
import makeContext from "@/lib/contextFactory/contextFactory";
type DealsContextState = {
@ -13,29 +12,42 @@ type DealsContextState = {
setDeals: React.Dispatch<React.SetStateAction<DealSchema[]>>;
refetchDeals: () => void;
dealsCrud: DealsCrud;
paginationInfo: PaginationInfoSchema;
page: number;
setPage: React.Dispatch<React.SetStateAction<number>>;
};
const useDealsContextState = (): DealsContextState => {
const { selectedBoard } = useBoardsContext();
type Props = {
withPagination?: boolean;
boardId?: number;
projectId?: number;
};
const useDealsContextState = ({
withPagination = false,
boardId,
projectId,
}: Props): DealsContextState => {
const { statuses } = useStatusesContext();
const {
deals,
setDeals,
refetch: refetchDeals,
} = useDealsList({
boardId: selectedBoard?.id,
const dealsListObjects = useDealsList({
boardId,
projectId,
withPagination,
});
const dealsCrud = useDealsCrud({
deals,
setDeals,
refetchDeals,
boardId: selectedBoard?.id,
...dealsListObjects,
boardId,
statuses,
});
return { deals, setDeals, refetchDeals, dealsCrud };
return {
...dealsListObjects,
dealsCrud,
};
};
export const [DealsContextProvider, useDealsContext] =
makeContext<DealsContextState>(useDealsContextState, "Deals");
export const [DealsContextProvider, useDealsContext] = makeContext<
DealsContextState,
Props
>(useDealsContextState, "Deals");

2
src/app/layout.tsx
View File

@ -1,5 +1,7 @@
import "@mantine/core/styles.css";
import "@mantine/notifications/styles.css";
import "@mantine/dates/styles.css";
import "mantine-react-table/styles.css";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/scrollbar";

59
src/components/ui/BaseTable/BaseTable.tsx Normal file
View File

@ -0,0 +1,59 @@
import React, { useEffect, useImperativeHandle } from "react";
import {
MantineReactTable,
MRT_ColumnDef,
MRT_RowData,
MRT_TableInstance,
MRT_TableOptions,
useMantineReactTable,
} from "mantine-react-table";
import { MRT_Localization_RU } from "mantine-react-table/locales/ru";
type Props<T extends MRT_RowData> = {
data: T[];
onSelectionChange?: (selectedRows: T[]) => void;
columns: MRT_ColumnDef<T>[];
restProps?: MRT_TableOptions<T>;
striped?: boolean | "odd" | "even";
};
export type BaseTableRef<T extends MRT_RowData> = {
getTable: () => MRT_TableInstance<T>;
};
function BaseTableInner<T extends MRT_RowData>(
{ data, columns, restProps, onSelectionChange, striped = false }: Props<T>,
ref: React.Ref<BaseTableRef<T>>
) {
const table = useMantineReactTable<T>({
localization: MRT_Localization_RU,
enablePagination: false,
data,
columns,
mantineTableProps: {
striped,
highlightOnHover: false,
},
enableTopToolbar: false,
enableBottomToolbar: false,
enableRowSelection: onSelectionChange !== undefined,
...restProps,
});
useEffect(() => {
if (!onSelectionChange) return;
onSelectionChange(
table.getSelectedRowModel().rows.map(r => r.original)
);
}, [onSelectionChange, table.getState().rowSelection]);
useImperativeHandle(ref, () => ({ getTable: () => table }));
return <MantineReactTable table={table} />;
}
const BaseTable = React.forwardRef(BaseTableInner) as <T extends MRT_RowData>(
props: Props<T> & { ref?: React.Ref<BaseTableRef<T>> }
) => React.ReactElement | null;
export default BaseTable;

53
src/hooks/lists/useDealsList.ts
View File

@ -1,40 +1,61 @@
import { useEffect, useState } from "react";
import { useQueryClient } from "@tanstack/react-query";
import { DealSchema } from "@/lib/client";
import { DealSchema, PaginationInfoSchema } from "@/lib/client";
import { getDealsOptions } from "@/lib/client/@tanstack/react-query.gen";
type Props = {
boardId?: number;
boardId?: number | null;
projectId?: number | null;
withPagination: boolean;
};
const useDealsList = ({ boardId }: Props) => {
const useDealsList = ({
withPagination,
projectId = null,
boardId = null,
}: Props) => {
const [deals, setDeals] = useState<DealSchema[]>([]);
const [page, setPage] = useState(1);
const [paginationInfo, setPaginationInfo] = useState<PaginationInfoSchema>({
totalPages: 1,
totalItems: 1,
});
const itemsPerPage = 10;
const queryClient = useQueryClient();
const fetchDeals = () => {
if (!boardId) {
setDeals([]);
return;
}
const refetchDeals = () => {
if (!boardId && !projectId) return;
queryClient
.fetchQuery({
...getDealsOptions({ path: { boardId } }),
...getDealsOptions({
query: {
boardId: boardId ?? null,
projectId: projectId ?? null,
page: withPagination ? page : null,
itemsPerPage: withPagination ? itemsPerPage : null,
},
}),
})
.then(data => {
setDeals(data.deals);
setPaginationInfo(data.paginationInfo);
})
.catch(err => {
console.error(err);
});
.catch(err => console.error(err));
};
useEffect(() => {
fetchDeals();
}, [boardId]);
refetchDeals();
}, [boardId, withPagination, projectId, page]);
return { deals, setDeals, refetch: fetchDeals };
return {
deals,
setDeals,
refetchDeals,
page,
setPage,
paginationInfo,
};
};
export default useDealsList;

98
src/lib/client/@tanstack/react-query.gen.ts
View File

@ -1,6 +1,11 @@
// This file is auto-generated by @hey-api/openapi-ts
import { queryOptions, type UseMutationOptions } from "@tanstack/react-query";
import {
infiniteQueryOptions,
queryOptions,
type InfiniteData,
type UseMutationOptions,
} from "@tanstack/react-query";
import type { AxiosError } from "axios";
import { client as _heyApiClient } from "../client.gen";
import {
@ -49,6 +54,8 @@ import type {
DeleteStatusResponse2,
GetBoardsData,
GetDealsData,
GetDealsError,
GetDealsResponse2,
GetProjectsData,
GetStatusesData,
UpdateBoardData,
@ -224,13 +231,13 @@ export const updateBoardMutation = (
return mutationOptions;
};
export const getDealsQueryKey = (options: Options<GetDealsData>) =>
export const getDealsQueryKey = (options?: Options<GetDealsData>) =>
createQueryKey("getDeals", options);
/**
* Get Deals
*/
export const getDealsOptions = (options: Options<GetDealsData>) => {
export const getDealsOptions = (options?: Options<GetDealsData>) => {
return queryOptions({
queryFn: async ({ queryKey, signal }) => {
const { data } = await getDeals({
@ -245,6 +252,91 @@ export const getDealsOptions = (options: Options<GetDealsData>) => {
});
};
const createInfiniteParams = <
K extends Pick<QueryKey<Options>[0], "body" | "headers" | "path" | "query">,
>(
queryKey: QueryKey<Options>,
page: K
) => {
const params = {
...queryKey[0],
};
if (page.body) {
params.body = {
...(queryKey[0].body as any),
...(page.body as any),
};
}
if (page.headers) {
params.headers = {
...queryKey[0].headers,
...page.headers,
};
}
if (page.path) {
params.path = {
...(queryKey[0].path as any),
...(page.path as any),
};
}
if (page.query) {
params.query = {
...(queryKey[0].query as any),
...(page.query as any),
};
}
return params as unknown as typeof page;
};
export const getDealsInfiniteQueryKey = (
options?: Options<GetDealsData>
): QueryKey<Options<GetDealsData>> => createQueryKey("getDeals", options, true);
/**
* Get Deals
*/
export const getDealsInfiniteOptions = (options?: Options<GetDealsData>) => {
return infiniteQueryOptions<
GetDealsResponse2,
AxiosError<GetDealsError>,
InfiniteData<GetDealsResponse2>,
QueryKey<Options<GetDealsData>>,
| number
| null
| Pick<
QueryKey<Options<GetDealsData>>[0],
"body" | "headers" | "path" | "query"
>
>(
// @ts-ignore
{
queryFn: async ({ pageParam, queryKey, signal }) => {
// @ts-ignore
const page: Pick<
QueryKey<Options<GetDealsData>>[0],
"body" | "headers" | "path" | "query"
> =
typeof pageParam === "object"
? pageParam
: {
query: {
page: pageParam,
},
};
const params = createInfiniteParams(queryKey, page);
const { data } = await getDeals({
...options,
...params,
signal,
throwOnError: true,
});
return data;
},
queryKey: getDealsInfiniteQueryKey(options),
}
);
};
export const createDealQueryKey = (options: Options<CreateDealData>) =>
createQueryKey("createDeal", options);

6
src/lib/client/sdk.gen.ts
View File

@ -207,9 +207,9 @@ export const updateBoard = <ThrowOnError extends boolean = false>(
* Get Deals
*/
export const getDeals = <ThrowOnError extends boolean = false>(
options: Options<GetDealsData, ThrowOnError>
options?: Options<GetDealsData, ThrowOnError>
) => {
return (options.client ?? _heyApiClient).get<
return (options?.client ?? _heyApiClient).get<
GetDealsResponses,
GetDealsErrors,
ThrowOnError
@ -221,7 +221,7 @@ export const getDeals = <ThrowOnError extends boolean = false>(
responseValidator: async data => {
return await zGetDealsResponse2.parseAsync(data);
},
url: "/deal/{boardId}",
url: "/deal/",
...options,
});
};

35
src/lib/client/types.gen.ts
View File

@ -242,6 +242,7 @@ export type GetDealsResponse = {
* Deals
*/
deals: Array<DealSchema>;
paginationInfo: PaginationInfoSchema;
};
/**
@ -274,6 +275,20 @@ export type HttpValidationError = {
detail?: Array<ValidationError>;
};
/**
* PaginationInfoSchema
*/
export type PaginationInfoSchema = {
/**
* Totalpages
*/
totalPages: number;
/**
* Totalitems
*/
totalItems: number;
};
/**
* ProjectSchema
*/
@ -568,14 +583,26 @@ export type UpdateBoardResponse2 =
export type GetDealsData = {
body?: never;
path: {
path?: never;
query?: {
/**
* Boardid
*/
boardId: number;
boardId?: number | null;
/**
* Projectid
*/
projectId?: number | null;
/**
* Page
*/
page?: number | null;
/**
* Itemsperpage
*/
itemsPerPage?: number | null;
};
query?: never;
url: "/deal/{boardId}";
url: "/deal/";
};
export type GetDealsErrors = {

22
src/lib/client/zod.gen.ts
View File

@ -171,11 +171,20 @@ export const zGetBoardsResponse = z.object({
boards: z.array(zBoardSchema),
});
/**
* PaginationInfoSchema
*/
export const zPaginationInfoSchema = z.object({
totalPages: z.int(),
totalItems: z.int(),
});
/**
* GetDealsResponse
*/
export const zGetDealsResponse = z.object({
deals: z.array(zDealSchema),
paginationInfo: zPaginationInfoSchema,
});
/**
@ -348,10 +357,15 @@ export const zUpdateBoardResponse2 = zUpdateBoardResponse;
export const zGetDealsData = z.object({
body: z.optional(z.never()),
path: z.object({
boardId: z.int(),
}),
query: z.optional(z.never()),
path: z.optional(z.never()),
query: z.optional(
z.object({
boardId: z.optional(z.union([z.int(), z.null()])),
projectId: z.optional(z.union([z.int(), z.null()])),
page: z.optional(z.union([z.int(), z.null()])),
itemsPerPage: z.optional(z.union([z.int(), z.null()])),
})
),
});
/**