From bb4324822a55d6121cd645b4d1d07b5415edfd11 Mon Sep 17 00:00:00 2001
From: fakz9 <fakc445@gmail.com>
Date: Sat, 10 Aug 2024 06:53:45 +0300
Subject: [PATCH] feat: deals table

---
 src/client/models/DealSummary.ts              |  1 +
 src/client/services/DealService.ts            | 12 ++-
 src/components/Navbar/Navbar.tsx              | 15 ++--
 src/components/ObjectSelect/ObjectSelect.tsx  |  3 +
 .../ClientSelectNew/ClientSelectNew.tsx       | 17 ++++
 .../DealStatusSelect/DealStatusSelect.tsx     | 20 +++++
 .../components/DealsTable/DealsTable.tsx      | 49 ++++++++++
 .../components/DealsTable/columns.tsx         | 50 +++++++++++
 src/pages/DealsPage/index.ts                  |  1 +
 src/pages/DealsPage/ui/DealsPage.module.css   | 27 ++++++
 src/pages/DealsPage/ui/DealsPage.tsx          | 89 +++++++++++++++++++
 .../LeadsPage/hooks/useDealSummaries.tsx      | 10 ++-
 src/routeTree.gen.ts                          | 36 ++++++--
 src/routes/deals.lazy.tsx                     |  6 ++
 src/shared/enums/DealStatus.ts                |  9 +-
 15 files changed, 327 insertions(+), 18 deletions(-)
 create mode 100644 src/components/Selects/ClientSelectNew/ClientSelectNew.tsx
 create mode 100644 src/pages/DealsPage/components/DealStatusSelect/DealStatusSelect.tsx
 create mode 100644 src/pages/DealsPage/components/DealsTable/DealsTable.tsx
 create mode 100644 src/pages/DealsPage/components/DealsTable/columns.tsx
 create mode 100644 src/pages/DealsPage/index.ts
 create mode 100644 src/pages/DealsPage/ui/DealsPage.module.css
 create mode 100644 src/pages/DealsPage/ui/DealsPage.tsx
 create mode 100644 src/routes/deals.lazy.tsx

diff --git a/src/client/models/DealSummary.ts b/src/client/models/DealSummary.ts
index da0833d..a0273fc 100644
--- a/src/client/models/DealSummary.ts
+++ b/src/client/models/DealSummary.ts
@@ -8,6 +8,7 @@ export type DealSummary = {
     name: string;
     clientName: string;
     changedAt: string;
+    createdAt: string;
     deadline: string;
     status: number;
     totalPrice: number;
diff --git a/src/client/services/DealService.ts b/src/client/services/DealService.ts
index 36f104e..6560d47 100644
--- a/src/client/services/DealService.ts
+++ b/src/client/services/DealService.ts
@@ -134,10 +134,20 @@ export class DealService {
      * @returns DealSummaryResponse Successful Response
      * @throws ApiError
      */
-    public static getDealSummaries(): CancelablePromise<DealSummaryResponse> {
+    public static getDealSummaries({
+        full,
+    }: {
+        full: (boolean | null),
+    }): CancelablePromise<DealSummaryResponse> {
         return __request(OpenAPI, {
             method: 'GET',
             url: '/deal/summaries',
+            query: {
+                'full': full,
+            },
+            errors: {
+                422: `Validation Error`,
+            },
         });
     }
     /**
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
index f191a2b..e3d789b 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -2,13 +2,15 @@ import {Center, Flex, Image, rem, Stack, Tooltip, UnstyledButton, useMantineColo
 import {
     IconBarcode,
     IconBox,
-    IconCash, IconDashboard,
+    IconCash,
+    IconDashboard,
     IconFileBarcode,
     IconHome2,
     IconLogout,
     IconMan,
     IconMoon,
     IconSun,
+    IconTable,
 } from '@tabler/icons-react';
 import classes from './Navbar.module.css';
 import {useAppDispatch} from "../../redux/store.ts";
@@ -40,16 +42,17 @@ function NavbarLink(props: NavbarLinkProps) {
 }
 
 const mockdata = [
-    // {
-    //     icon: IconHome2,
-    //     label: 'Главная',
-    //     href: '/'
-    // },
+
     {
         icon: IconCash,
         label: 'Сделки',
         href: '/leads'
     },
+    {
+        icon: IconTable,
+        label: 'Таблица сделок',
+        href: '/deals'
+    },
     {
         icon: IconMan,
         label: 'Клиенты',
diff --git a/src/components/ObjectSelect/ObjectSelect.tsx b/src/components/ObjectSelect/ObjectSelect.tsx
index 7378ece..e99ba0c 100644
--- a/src/components/ObjectSelect/ObjectSelect.tsx
+++ b/src/components/ObjectSelect/ObjectSelect.tsx
@@ -26,10 +26,12 @@ type RestProps<T> = {
     filterBy?: (item: SelectObjectType<T>) => boolean;
 };
 const defaultGetLabelFn = <T extends { name: string }>(item: T): string => {
+
     return item.name;
 }
 
 const defaultGetValueFn = <T extends { id: number }>(item: T): string => {
+    if (!item) return item;
     return item.id.toString();
 }
 export type ObjectSelectProps<T> =
@@ -85,6 +87,7 @@ const ObjectSelect = <T, >(props: ObjectSelectProps<T>) => {
         if (isControlled || !internalValue) return;
         props.onChange(internalValue);
     }, [internalValue]);
+
     const restProps = omit(props, ['filterBy', 'groupBy', 'getValueFn', 'getLabelFn']);
     return (
         <Select
diff --git a/src/components/Selects/ClientSelectNew/ClientSelectNew.tsx b/src/components/Selects/ClientSelectNew/ClientSelectNew.tsx
new file mode 100644
index 0000000..d36099c
--- /dev/null
+++ b/src/components/Selects/ClientSelectNew/ClientSelectNew.tsx
@@ -0,0 +1,17 @@
+import ObjectSelect, {ObjectSelectProps} from "../../ObjectSelect/ObjectSelect.tsx";
+import {ClientSchema} from "../../../client";
+import {FC} from "react";
+import useClientsList from "../../../pages/ClientsPage/hooks/useClientsList.tsx";
+
+type Props = Omit<ObjectSelectProps<ClientSchema>, 'data'>
+
+const ClientSelectNew: FC<Props> = (props) => {
+    const {clients} = useClientsList();
+    return (
+        <ObjectSelect
+            data={clients}
+            {...props}
+        />
+    )
+}
+export default ClientSelectNew;
\ No newline at end of file
diff --git a/src/pages/DealsPage/components/DealStatusSelect/DealStatusSelect.tsx b/src/pages/DealsPage/components/DealStatusSelect/DealStatusSelect.tsx
new file mode 100644
index 0000000..4ae7cd4
--- /dev/null
+++ b/src/pages/DealsPage/components/DealStatusSelect/DealStatusSelect.tsx
@@ -0,0 +1,20 @@
+import ObjectSelect, {ObjectSelectProps} from "../../../../components/ObjectSelect/ObjectSelect.tsx";
+import {FC} from "react";
+import {DealStatuses} from "../../../../shared/enums/DealStatus.ts";
+
+type DealStatus = {
+    name: string;
+    id: number
+}
+type Props = Omit<ObjectSelectProps<DealStatus>, 'data'>;
+
+const DealStatusSelect: FC<Props> = (props) => {
+    const data: DealStatus[] = DealStatuses;
+    return (
+        <ObjectSelect
+            data={data}
+            {...props}
+        />
+    )
+}
+export default DealStatusSelect;
\ No newline at end of file
diff --git a/src/pages/DealsPage/components/DealsTable/DealsTable.tsx b/src/pages/DealsPage/components/DealsTable/DealsTable.tsx
new file mode 100644
index 0000000..665514d
--- /dev/null
+++ b/src/pages/DealsPage/components/DealsTable/DealsTable.tsx
@@ -0,0 +1,49 @@
+import {CRUDTableProps} from "../../../../types/CRUDTable.tsx";
+import {DealService, DealSummary} from "../../../../client";
+import {FC} from "react";
+import useDealsTableColumns from "./columns.tsx";
+import {BaseTable} from "../../../../components/BaseTable/BaseTable.tsx";
+import {ActionIcon, Flex, Tooltip} from "@mantine/core";
+import {IconEdit} from "@tabler/icons-react";
+import {MRT_TableOptions} from "mantine-react-table";
+import {useDealPageContext} from "../../../LeadsPage/contexts/DealPageContext.tsx";
+
+type Props = CRUDTableProps<DealSummary>;
+
+const DealsTable: FC<Props> = ({items}) => {
+    const columns = useDealsTableColumns();
+    const {setSelectedDeal} = useDealPageContext();
+    const onEditClick = (dealSummary: DealSummary) => {
+        DealService.getDealById({dealId: dealSummary.id})
+            .then((deal) => {
+                setSelectedDeal(deal);
+            })
+    }
+    return (
+        <BaseTable
+            data={items}
+            columns={columns}
+            restProps={{
+                enableSorting: true,
+                enableColumnActions: false,
+                enablePagination: true,
+                enableBottomToolbar: true,
+                paginationDisplayMode: "pages",
+                enableRowActions: true,
+                renderRowActions: ({row}) => (
+                    <Flex gap="md">
+                        <Tooltip label="Редактировать">
+                            <ActionIcon
+                                onClick={() => onEditClick(row.original)}
+                                variant={"default"}>
+                                <IconEdit/>
+                            </ActionIcon>
+                        </Tooltip>
+                    </Flex>
+                )
+            } as MRT_TableOptions<DealSummary>}
+        />
+    )
+}
+
+export default DealsTable;
\ No newline at end of file
diff --git a/src/pages/DealsPage/components/DealsTable/columns.tsx b/src/pages/DealsPage/components/DealsTable/columns.tsx
new file mode 100644
index 0000000..2456598
--- /dev/null
+++ b/src/pages/DealsPage/components/DealsTable/columns.tsx
@@ -0,0 +1,50 @@
+import {useMemo} from "react";
+import {MRT_ColumnDef} from "mantine-react-table";
+import {DealSummary} from "../../../../client";
+import {ActionIcon, Image} from "@mantine/core";
+
+const useDealsTableColumns = () => {
+    return useMemo<MRT_ColumnDef<DealSummary>[]>(() => [
+
+        {
+            header: "Маркетплейс",
+            size: 10,
+            Cell: ({row}) => (
+                <ActionIcon variant={"transparent"}>
+                    <Image src={row.original.baseMarketplace?.iconUrl || ""}/>
+                </ActionIcon>
+            )
+        },
+        {
+            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())
+        },
+        {
+            accessorKey: "name",
+            header: "Название",
+            enableSorting: false
+        },
+        {
+            accessorKey: "clientName",
+            header: "Клиент",
+            enableSorting: false
+        },
+        {
+            Cell: ({row}) => (new Date(row.original.deadline)).toLocaleString("ru-RU"),
+            accessorKey: "deadline",
+            header: "Дедлайн",
+            sortingFn: (rowA, rowB) => ((new Date(rowB.original.deadline)).getTime() - (new Date(rowA.original.deadline)).getTime())
+
+        },
+        {
+            header: "Общая стоимость",
+            Cell: ({row}) => (row.original.totalPrice).toLocaleString("ru-RU") + '₽',
+            accessorKey:"totalPrice"
+        }
+    ], [])
+}
+
+export default useDealsTableColumns;
\ No newline at end of file
diff --git a/src/pages/DealsPage/index.ts b/src/pages/DealsPage/index.ts
new file mode 100644
index 0000000..4186fba
--- /dev/null
+++ b/src/pages/DealsPage/index.ts
@@ -0,0 +1 @@
+export {DealsPage} from './ui/DealsPage.tsx';
\ No newline at end of file
diff --git a/src/pages/DealsPage/ui/DealsPage.module.css b/src/pages/DealsPage/ui/DealsPage.module.css
new file mode 100644
index 0000000..9326128
--- /dev/null
+++ b/src/pages/DealsPage/ui/DealsPage.module.css
@@ -0,0 +1,27 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    gap: rem(10);
+}
+
+
+.body-container {
+}
+
+.top-panel {
+    padding: rem(5);
+    gap: rem(10);
+    display: flex;
+}
+
+.table-container {
+    display: flex;
+    gap: rem(10);
+    flex-direction: column;
+}
+
+.table-pagination {
+    align-self: flex-end;
+
+}
\ No newline at end of file
diff --git a/src/pages/DealsPage/ui/DealsPage.tsx b/src/pages/DealsPage/ui/DealsPage.tsx
new file mode 100644
index 0000000..b13074d
--- /dev/null
+++ b/src/pages/DealsPage/ui/DealsPage.tsx
@@ -0,0 +1,89 @@
+import {FC, useEffect, useState} from "react";
+import PageBlock from "../../../components/PageBlock/PageBlock.tsx";
+import styles from './DealsPage.module.css';
+import DealStatusSelect from "../components/DealStatusSelect/DealStatusSelect.tsx";
+import DealsTable from "../components/DealsTable/DealsTable.tsx";
+import {useDealSummariesFull} from "../../LeadsPage/hooks/useDealSummaries.tsx";
+import {DealStatusType} from "../../../shared/enums/DealStatus.ts";
+import {BaseMarketplaceSchema, ClientSchema} from "../../../client";
+import BaseMarketplaceSelect from "../../../components/Selects/BaseMarketplaceSelect/BaseMarketplaceSelect.tsx";
+import {useForm} from "@mantine/form";
+import ClientSelectNew from "../../../components/Selects/ClientSelectNew/ClientSelectNew.tsx";
+import {DealPageContextProvider} from "../../LeadsPage/contexts/DealPageContext.tsx";
+import DealEditDrawer from "../../LeadsPage/drawers/DealEditDrawer/DealEditDrawer.tsx";
+
+type State = {
+    marketplace: BaseMarketplaceSchema | null;
+    dealStatus: DealStatusType | null;
+    client: ClientSchema | null;
+}
+export const DealsPage: FC = () => {
+    const {objects} = useDealSummariesFull();
+    const form = useForm<State>({
+        initialValues: {
+            marketplace: null,
+            dealStatus: null,
+            client: null
+        }
+    });
+    const [data, setData] = useState(objects);
+    const applyFilters = () => {
+        let result = objects;
+        if (form.values.marketplace) {
+            result = result.filter(obj => obj.baseMarketplace?.key === form.values.marketplace?.key);
+        }
+        if (form.values.dealStatus) {
+            result = result.filter(obj => obj.status === form.values.dealStatus?.id);
+        }
+        if (form.values.client) {
+            result = result.filter(obj => obj.clientName === form.values.client?.name);
+
+        }
+        setData(result);
+    }
+    useEffect(() => {
+        applyFilters();
+    }, [form.values, objects])
+
+    return (
+        <>
+            <DealPageContextProvider>
+                <div className={styles['container']}>
+                    <PageBlock>
+                        <div className={styles['top-panel']}>
+                            <DealStatusSelect
+                                onClear={() => form.setFieldValue("dealStatus", null)}
+                                clearable
+                                placeholder={"Выберите статус "}
+                                {...form.getInputProps("dealStatus")}
+                            />
+                            <BaseMarketplaceSelect
+                                onClear={() => form.setFieldValue("marketplace", null)}
+                                clearable
+
+                                placeholder={"Выберите маркетплейс"}
+                                {...form.getInputProps("marketplace")}
+                            />
+                            <ClientSelectNew
+                                onClear={() => form.setFieldValue("client", null)}
+                                clearable
+                                searchable
+                                placeholder={"Выберите клиента"}
+                                {...form.getInputProps("client")}
+                            />
+                        </div>
+                    </PageBlock>
+                    <PageBlock>
+                        <div className={styles['body-container']}>
+                            <div className={styles['table-container']}>
+                                <DealsTable items={data}/>
+                            </div>
+                        </div>
+                    </PageBlock>
+                </div>
+                <DealEditDrawer
+                />
+            </DealPageContextProvider>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/pages/LeadsPage/hooks/useDealSummaries.tsx b/src/pages/LeadsPage/hooks/useDealSummaries.tsx
index b551850..f0921f3 100644
--- a/src/pages/LeadsPage/hooks/useDealSummaries.tsx
+++ b/src/pages/LeadsPage/hooks/useDealSummaries.tsx
@@ -1,10 +1,11 @@
 import {useQuery} from "@tanstack/react-query";
 import {DealService} from "../../../client";
+import ObjectList from "../../../hooks/objectList.tsx";
 
 export const useDealSummaries = () => {
     const {data: summariesRaw = [], refetch} = useQuery({
         queryKey: ['getDealSummaries'],
-        queryFn: DealService.getDealSummaries,
+        queryFn: () => DealService.getDealSummaries({full: false}),
         select: data => data.summaries || [] // Трансформируем полученные данные
     });
 
@@ -12,4 +13,9 @@ export const useDealSummaries = () => {
     // isLoading и isError могут быть использованы для отображения индикаторов загрузки или ошибки
 
     return {summariesRaw, refetch};
-}
\ No newline at end of file
+}
+export const useDealSummariesFull = () => ObjectList({
+    queryFn: () => DealService.getDealSummaries({full: true}),
+    queryKey: "getDealSummariesFull",
+    getObjectsFn: response => response.summaries
+});
\ No newline at end of file
diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index f5a2ae2..706d430 100644
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -22,6 +22,7 @@ const ServicesLazyImport = createFileRoute('/services')()
 const ProductsLazyImport = createFileRoute('/products')()
 const LoginLazyImport = createFileRoute('/login')()
 const LeadsLazyImport = createFileRoute('/leads')()
+const DealsLazyImport = createFileRoute('/deals')()
 const ClientsLazyImport = createFileRoute('/clients')()
 const BarcodeLazyImport = createFileRoute('/barcode')()
 const AdminLazyImport = createFileRoute('/admin')()
@@ -54,6 +55,11 @@ const LeadsLazyRoute = LeadsLazyImport.update({
   getParentRoute: () => rootRoute,
 } as any).lazy(() => import('./routes/leads.lazy').then((d) => d.Route))
 
+const DealsLazyRoute = DealsLazyImport.update({
+  path: '/deals',
+  getParentRoute: () => rootRoute,
+} as any).lazy(() => import('./routes/deals.lazy').then((d) => d.Route))
+
 const ClientsLazyRoute = ClientsLazyImport.update({
   path: '/clients',
   getParentRoute: () => rootRoute,
@@ -75,8 +81,8 @@ const IndexLazyRoute = IndexLazyImport.update({
 } as any).lazy(() => import('./routes/index.lazy').then((d) => d.Route))
 
 const DealsDealIdRoute = DealsDealIdImport.update({
-  path: '/deals/$dealId',
-  getParentRoute: () => rootRoute,
+  path: '/$dealId',
+  getParentRoute: () => DealsLazyRoute,
 } as any)
 
 // Populate the FileRoutesByPath interface
@@ -111,6 +117,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ClientsLazyImport
       parentRoute: typeof rootRoute
     }
+    '/deals': {
+      id: '/deals'
+      path: '/deals'
+      fullPath: '/deals'
+      preLoaderRoute: typeof DealsLazyImport
+      parentRoute: typeof rootRoute
+    }
     '/leads': {
       id: '/leads'
       path: '/leads'
@@ -148,10 +161,10 @@ declare module '@tanstack/react-router' {
     }
     '/deals/$dealId': {
       id: '/deals/$dealId'
-      path: '/deals/$dealId'
+      path: '/$dealId'
       fullPath: '/deals/$dealId'
       preLoaderRoute: typeof DealsDealIdImport
-      parentRoute: typeof rootRoute
+      parentRoute: typeof DealsLazyImport
     }
   }
 }
@@ -163,12 +176,12 @@ export const routeTree = rootRoute.addChildren({
   AdminLazyRoute,
   BarcodeLazyRoute,
   ClientsLazyRoute,
+  DealsLazyRoute: DealsLazyRoute.addChildren({ DealsDealIdRoute }),
   LeadsLazyRoute,
   LoginLazyRoute,
   ProductsLazyRoute,
   ServicesLazyRoute,
   TestLazyRoute,
-  DealsDealIdRoute,
 })
 
 /* prettier-ignore-end */
@@ -183,12 +196,12 @@ export const routeTree = rootRoute.addChildren({
         "/admin",
         "/barcode",
         "/clients",
+        "/deals",
         "/leads",
         "/login",
         "/products",
         "/services",
-        "/test",
-        "/deals/$dealId"
+        "/test"
       ]
     },
     "/": {
@@ -203,6 +216,12 @@ export const routeTree = rootRoute.addChildren({
     "/clients": {
       "filePath": "clients.lazy.tsx"
     },
+    "/deals": {
+      "filePath": "deals.lazy.tsx",
+      "children": [
+        "/deals/$dealId"
+      ]
+    },
     "/leads": {
       "filePath": "leads.lazy.tsx"
     },
@@ -219,7 +238,8 @@ export const routeTree = rootRoute.addChildren({
       "filePath": "test.lazy.tsx"
     },
     "/deals/$dealId": {
-      "filePath": "deals.$dealId.tsx"
+      "filePath": "deals.$dealId.tsx",
+      "parent": "/deals"
     }
   }
 }
diff --git a/src/routes/deals.lazy.tsx b/src/routes/deals.lazy.tsx
new file mode 100644
index 0000000..1ff0ad6
--- /dev/null
+++ b/src/routes/deals.lazy.tsx
@@ -0,0 +1,6 @@
+import {createLazyFileRoute} from '@tanstack/react-router'
+import {DealsPage} from "../pages/DealsPage";
+
+export const Route = createLazyFileRoute('/deals')({
+    component: DealsPage
+})
\ No newline at end of file
diff --git a/src/shared/enums/DealStatus.ts b/src/shared/enums/DealStatus.ts
index aed41ee..337f3ec 100644
--- a/src/shared/enums/DealStatus.ts
+++ b/src/shared/enums/DealStatus.ts
@@ -19,4 +19,11 @@ export const DealStatusDictionary = {
     [DealStatus.AWAITING_PAYMENT]: "Ожидает оплаты",
     [DealStatus.COMPLETED]: "Завершена",
     [DealStatus.CANCELLED]: "Отменена",
-}
\ No newline at end of file
+}
+export type DealStatusType = {
+    id: number,
+    name: string
+}
+export const DealStatuses: DealStatusType[] = Object.entries(DealStatusDictionary).map(([key, value]) => {
+    return {id: parseInt(key), name: value}
+});
\ No newline at end of file