feat: deals table

2024-08-20 19:58:00 +03:00
parent 191f8ee972
commit a96b99eb01
9 changed files with 290 additions and 159 deletions
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -10,7 +10,6 @@ import {
    IconMan,
    IconMoon,
    IconSun,
-    IconTable,
 } from '@tabler/icons-react';
 import classes from './Navbar.module.css';
 import {useAppDispatch} from "../../redux/store.ts";
@@ -48,11 +47,11 @@ const mockdata = [
        label: 'Сделки',
        href: '/leads'
    },
-    {
-        icon: IconTable,
-        label: 'Таблица сделок',
-        href: '/deals'
-    },
+    // {
+    //     icon: IconTable,
+    //     label: 'Таблица сделок',
+    //     href: '/deals'
+    // },
    {
        icon: IconMan,
        label: 'Клиенты',
@@ -104,6 +103,7 @@ export function Navbar() {
                    p={rem(5)}
                >
                    <Image
+                        flex={1}
                        // style={{filter: "drop-shadow(0 0 30px #fff)"}}
                        src={colorScheme == "dark" ? "/icons/logo-light.png" : "/icons/logo.png"}
                    />
--- a/src/components/PageBlock/PageBlock.module.css
+++ b/src/components/PageBlock/PageBlock.module.css
@@ -19,5 +19,9 @@

 .container-full-height {
    min-height: calc(100vh - (rem(20) * 2));
+}
+
+.container-full-height-fixed {
+    height: calc(100vh - (rem(20) * 2));

 }
--- a/src/components/PageBlock/PageBlock.tsx
+++ b/src/components/PageBlock/PageBlock.tsx
@@ -7,11 +7,19 @@ type Props = {
    fluid?: boolean;
    style?: CSSProperties;
    fullHeight?: boolean;
+    fullHeightFixed?: boolean;
 }
-export const PageBlock: FC<Props> = ({children, style, fluid = true, fullHeight = false}) => {
+export const PageBlock: FC<Props> = ({children, style, fluid = true, fullHeight = false, fullHeightFixed = false}) => {
    return (
        <div style={style}
-             className={classNames(styles['container'], fluid && styles['container-fluid'], fullHeight && styles['container-full-height'])}>
+             className={
+                 classNames(
+                     styles['container'],
+                     fluid && styles['container-fluid'],
+                     fullHeight && styles['container-full-height'],
+                     fullHeightFixed && styles['container-full-height-fixed']
+                 )
+             }>
            {children}
        </div>
    )
--- a/src/pages/DealsPage/hooks/useDealsPageState.tsx
+++ b/src/pages/DealsPage/hooks/useDealsPageState.tsx
@@ -0,0 +1,42 @@
+import {useDealSummariesFull} from "../../LeadsPage/hooks/useDealSummaries.tsx";
+import {useForm} from "@mantine/form";
+import {useEffect, useState} from "react";
+import {BaseMarketplaceSchema, ClientSchema} from "../../../client";
+import {DealStatusType} from "../../../shared/enums/DealStatus.ts";
+
+type State = {
+    marketplace: BaseMarketplaceSchema | null;
+    dealStatus: DealStatusType | null;
+    client: ClientSchema | null;
+}
+const useDealsPageState = () => {
+    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 {data, form}
+}
+
+export default useDealsPageState;
--- a/src/pages/DealsPage/ui/DealsPage.tsx
+++ b/src/pages/DealsPage/ui/DealsPage.tsx
@@ -1,50 +1,16 @@
-import {FC, useEffect, useState} from "react";
+import {FC} 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";
+import useDealsPageState from "../hooks/useDealsPageState.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])
-
+    const {data, form} = useDealsPageState();
    return (
        <>
            <DealPageContextProvider>
--- a/src/pages/LeadsPage/ui/LeadsPage.module.css
+++ b/src/pages/LeadsPage/ui/LeadsPage.module.css
@@ -5,7 +5,6 @@
    height: 100%;
 }

-
 .search-input {

 }
@@ -37,5 +36,10 @@

 .delete-hidden {
    border: none;
-
+}
+
+.top-panel {
+    padding: rem(5);
+    gap: rem(10);
+    display: flex;
 }
--- a/src/pages/LeadsPage/ui/LeadsPage.tsx
+++ b/src/pages/LeadsPage/ui/LeadsPage.tsx
@@ -9,14 +9,28 @@ import DealEditDrawer from "../drawers/DealEditDrawer/DealEditDrawer.tsx";
 import {DealPageContextProvider} from "../contexts/DealPageContext.tsx";
 import {modals} from "@mantine/modals";
 import {DealService, DealSummaryReorderRequest} from "../../../client";
-import {Flex} from "@mantine/core";
+import {ActionIcon, Flex, rem, Text} from "@mantine/core";
 import classNames from "classnames";
 import {notifications} from "../../../shared/lib/notifications.ts";
+import {IconMenu2, IconMenuDeep} from "@tabler/icons-react";
+import useDealsPageState from "../../DealsPage/hooks/useDealsPageState.tsx";
+import DealStatusSelect from "../../DealsPage/components/DealStatusSelect/DealStatusSelect.tsx";
+import BaseMarketplaceSelect from "../../../components/Selects/BaseMarketplaceSelect/BaseMarketplaceSelect.tsx";
+import ClientSelectNew from "../../../components/Selects/ClientSelectNew/ClientSelectNew.tsx";
+import DealsTable from "../../DealsPage/components/DealsTable/DealsTable.tsx";
+import {motion} from "framer-motion";

+enum DisplayMode {
+    BOARD,
+    TABLE
+}

 export const LeadsPage: FC = () => {
+    const {data, form} = useDealsPageState();
+
    const {summariesRaw, refetch} = useDealSummaries();
    const [summaries, setSummaries] = useState(summariesRaw);
+    const [displayMode, setDisplayMode] = useState<DisplayMode>(DisplayMode.BOARD);
    const [isDragEnded, setIsDragEnded] = useState(true);
    useEffect(() => {
        setSummaries(summariesRaw);
@@ -92,99 +106,218 @@ export const LeadsPage: FC = () => {
        });

    }
-    return (
-        <>
-            <DealPageContextProvider>
+    const getTableBody = () => {
+        return (
+            <motion.div
+                key={displayMode}

-                <PageBlock fullHeight style={{
-                    display: "flex",
-                    flexDirection: "column"
-                }}>
-                    <DragDropContext
-                        onDragStart={() => {
-                            setIsDragEnded(false);
-                        }}
-                        onDragEnd={onDragEnd}>
-                        <div className={styles['boards']}>
-                            <Board
-                                withCreateButton
-                                summaries={summaries
-                                    .filter(summary => summary.status == DealStatus.AWAITING_ACCEPTANCE)}
-                                title={"Ожидает приемки"}
-                                droppableId={"AWAITING_ACCEPTANCE"}
-                                color={'#4A90E2'}
-                            />
-                            <Board
-                                summaries={summaries
-                                    .filter(summary => summary.status == DealStatus.PACKAGING)}
-                                title={"Упаковка"}
-                                droppableId={"PACKAGING"}
-                                color={'#F5A623'}
+                initial={{opacity: 0}}
+                animate={{opacity: 1}}
+                transition={{duration: 0.2}}
+            >

-                            />
-                            <Board
-                                summaries={summaries
-                                    .filter(summary => summary.status == DealStatus.AWAITING_SHIPMENT)}
-                                title={"Ожидает отгрузки"}
-                                droppableId={"AWAITING_SHIPMENT"}
-                                color={'#7ED321'}
+                <DealsTable items={data}/>
+            </motion.div>
+        )
+    }
+    const getBoardBody = () => {
+        return (
+            <motion.div
+                key={displayMode}
+                initial={{opacity: 0}}
+                animate={{opacity: 1}}
+                transition={{duration: 0.2}}
+            >

-                            />
-                            <Board
-                                summaries={summaries
-                                    .filter(summary => summary.status == DealStatus.AWAITING_PAYMENT)}
-                                title={"Ожидает оплаты"}
-                                droppableId={"AWAITING_PAYMENT"}
-                                color={'#D0021B'}
+                <DragDropContext
+                    onDragStart={() => {
+                        setIsDragEnded(false);
+                    }}
+                    onDragEnd={onDragEnd}>
+                    <div className={styles['boards']}>
+                        <Board
+                            withCreateButton
+                            summaries={summaries
+                                .filter(summary => summary.status == DealStatus.AWAITING_ACCEPTANCE)}
+                            title={"Ожидает приемки"}
+                            droppableId={"AWAITING_ACCEPTANCE"}
+                            color={'#4A90E2'}
+                        />
+                        <Board
+                            summaries={summaries
+                                .filter(summary => summary.status == DealStatus.PACKAGING)}
+                            title={"Упаковка"}
+                            droppableId={"PACKAGING"}
+                            color={'#F5A623'}

-                            />
-                            <Board
-                                summaries={summaries
-                                    .filter(summary => summary.status == DealStatus.COMPLETED)}
-                                title={"Завершена"}
-                                droppableId={"COMPLETED"}
-                                color={'#417505'}
-                            />
-                        </div>
-                        <Flex justify={"flex-end"}>
-                            <div
-                                className={
-                                    classNames(
-                                        styles['delete'],
-                                        isDragEnded && styles['delete-hidden']
-                                    )
-                                }
-                            >
-                                <Droppable droppableId={"DELETE"}>
-                                    {(provided) => (
-                                        <>
-                                            <div
-                                                {...provided.droppableProps}
-                                                ref={provided.innerRef}
-                                            >
-                                                {!isDragEnded  &&
-                                                    <span>
+                        />
+                        <Board
+                            summaries={summaries
+                                .filter(summary => summary.status == DealStatus.AWAITING_SHIPMENT)}
+                            title={"Ожидает отгрузки"}
+                            droppableId={"AWAITING_SHIPMENT"}
+                            color={'#7ED321'}
+
+                        />
+                        <Board
+                            summaries={summaries
+                                .filter(summary => summary.status == DealStatus.AWAITING_PAYMENT)}
+                            title={"Ожидает оплаты"}
+                            droppableId={"AWAITING_PAYMENT"}
+                            color={'#D0021B'}
+
+                        />
+                        <Board
+                            summaries={summaries
+                                .filter(summary => summary.status == DealStatus.COMPLETED)}
+                            title={"Завершена"}
+                            droppableId={"COMPLETED"}
+                            color={'#417505'}
+                        />
+                    </div>
+                    <Flex justify={"flex-end"}>
+                        <div
+                            className={
+                                classNames(
+                                    styles['delete'],
+                                    isDragEnded && styles['delete-hidden']
+                                )
+                            }
+                        >
+                            <Droppable droppableId={"DELETE"}>
+                                {(provided) => (
+                                    <>
+                                        <div
+                                            {...provided.droppableProps}
+                                            ref={provided.innerRef}
+                                        >
+                                            {!isDragEnded &&
+                                                <span>
                                                    Удалить
                                                    </span>

-                                                }
+                                            }

-                                            </div>
-                                            {provided.placeholder}
-                                        </>
+                                        </div>
+                                        {provided.placeholder}
+                                    </>

-                                    )}
-                                </Droppable>
-                            </div>
+                                )}
+                            </Droppable>
+                        </div>
+                    </Flex>
+                </DragDropContext>
+            </motion.div>
+
+        )
+    }
+    const getBody = () => {
+        return displayMode === DisplayMode.TABLE ? getTableBody() : getBoardBody();
+    }
+    return (
+        <PageBlock
+            fullHeight
+            style={{
+                gap: rem(10),
+                display: "flex",
+                flexDirection: "column",
+                backgroundColor: "transparent",
+                boxShadow: "none",
+            }}
+        >
+            <DealPageContextProvider>
+                <PageBlock
+                    style={{flex: 0}}
+                >
+                    <Flex
+                        align={"center"}
+                        justify={"space-between"}
+                    >
+                        <Flex
+                            gap={rem(10)}
+                            direction={"column"}
+                            align={"center"}
+                        >
+                            <Text size={"xs"}>Вид</Text>
+                            <Flex gap={rem(10)}>
+                                <ActionIcon
+                                    onClick={() => setDisplayMode(DisplayMode.BOARD)}
+                                    variant={
+                                        displayMode === DisplayMode.BOARD ?
+
+                                            "filled"
+                                            :
+                                            "default"
+
+                                    }>
+                                    <IconMenuDeep
+                                        style={{rotate: "-90deg"}}
+                                    />
+                                </ActionIcon>
+                                <ActionIcon
+                                    onClick={() => setDisplayMode(DisplayMode.TABLE)}
+                                    variant={
+                                        displayMode === DisplayMode.TABLE ?
+                                            "filled"
+                                            :
+                                            "default"
+                                    }
+                                >
+                                    <IconMenu2
+                                    />
+                                </ActionIcon>
+
+                            </Flex>
                        </Flex>
-                    </DragDropContext>
+                        <motion.div
+                            key={displayMode}
+                            initial={{opacity: 0}}
+                            animate={{opacity: 1}}
+                            transition={{duration: 0.2}}
+                        >
+                            <div

+                                className={styles['top-panel']}
+                                style={{display: displayMode === DisplayMode.TABLE ? "flex" : "none"}}
+                            >
+                                <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>
+                        </motion.div>
+                    </Flex>
+                </PageBlock>
+                <PageBlock
+                    style={{
+                        display: "flex",
+                        flexDirection: "column",
+                        flex: 1,
+                        height: "100%"
+                    }}>
+                    {getBody()}
                </PageBlock>
                <DealEditDrawer
                />
            </DealPageContextProvider>

-        </>
+        </PageBlock>

    )
 }
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -22,7 +22,6 @@ 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')()
@@ -55,11 +54,6 @@ 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,
@@ -81,8 +75,8 @@ const IndexLazyRoute = IndexLazyImport.update({
 } as any).lazy(() => import('./routes/index.lazy').then((d) => d.Route))

 const DealsDealIdRoute = DealsDealIdImport.update({
-  path: '/$dealId',
-  getParentRoute: () => DealsLazyRoute,
+  path: '/deals/$dealId',
+  getParentRoute: () => rootRoute,
 } as any)

 // Populate the FileRoutesByPath interface
@@ -117,13 +111,6 @@ 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'
@@ -161,10 +148,10 @@ declare module '@tanstack/react-router' {
    }
    '/deals/$dealId': {
      id: '/deals/$dealId'
-      path: '/$dealId'
+      path: '/deals/$dealId'
      fullPath: '/deals/$dealId'
      preLoaderRoute: typeof DealsDealIdImport
-      parentRoute: typeof DealsLazyImport
+      parentRoute: typeof rootRoute
    }
  }
 }
@@ -176,12 +163,12 @@ export const routeTree = rootRoute.addChildren({
  AdminLazyRoute,
  BarcodeLazyRoute,
  ClientsLazyRoute,
-  DealsLazyRoute: DealsLazyRoute.addChildren({ DealsDealIdRoute }),
  LeadsLazyRoute,
  LoginLazyRoute,
  ProductsLazyRoute,
  ServicesLazyRoute,
  TestLazyRoute,
+  DealsDealIdRoute,
 })

 /* prettier-ignore-end */
@@ -196,12 +183,12 @@ export const routeTree = rootRoute.addChildren({
        "/admin",
        "/barcode",
        "/clients",
-        "/deals",
        "/leads",
        "/login",
        "/products",
        "/services",
-        "/test"
+        "/test",
+        "/deals/$dealId"
      ]
    },
    "/": {
@@ -216,12 +203,6 @@ export const routeTree = rootRoute.addChildren({
    "/clients": {
      "filePath": "clients.lazy.tsx"
    },
-    "/deals": {
-      "filePath": "deals.lazy.tsx",
-      "children": [
-        "/deals/$dealId"
-      ]
-    },
    "/leads": {
      "filePath": "leads.lazy.tsx"
    },
@@ -238,8 +219,7 @@ export const routeTree = rootRoute.addChildren({
      "filePath": "test.lazy.tsx"
    },
    "/deals/$dealId": {
-      "filePath": "deals.$dealId.tsx",
-      "parent": "/deals"
+      "filePath": "deals.$dealId.tsx"
    }
  }
 }
--- a/src/routes/deals.lazy.tsx
+++ b/src/routes/deals.lazy.tsx
@@ -1,6 +0,0 @@
-import {createLazyFileRoute} from '@tanstack/react-router'
-import {DealsPage} from "../pages/DealsPage";
-
-export const Route = createLazyFileRoute('/deals')({
-    component: DealsPage
-})