feat: deals table

2024-08-10 06:53:45 +03:00
parent be9c8e604f
commit bb4324822a
15 changed files with 327 additions and 18 deletions
--- a/src/pages/DealsPage/ui/DealsPage.tsx
+++ 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>
+        </>
+    )
+}