othr

src/pages/LeadsPage/components/DealProductsTable/DealProductsTable.tsx

@@ -0,0 +1,57 @@
+import {BaseTable} from "../../../../components/BaseTable/BaseTable.tsx";
+import useDealProductsTableColumns from "./columns.tsx";
+import {FC} from "react";
+import {CRUDTableProps} from "../../../../types/CRUDTable.tsx";
+import {DealProductSchema} from "../../../../client";
+import {Button, Flex, rem} from "@mantine/core";
+import {MRT_TableOptions} from "mantine-react-table";
+import {modals} from "@mantine/modals";
+
+type RestProps = {
+    clientId: number;
+}
+type Props = CRUDTableProps<DealProductSchema> & RestProps;
+const DealProductsTable: FC<Props> = ({items, clientId}) => {
+    const columns = useDealProductsTableColumns();
+    const onCreateClick = () => {
+        modals.openContextModal({
+            modal: "addDealProduct",
+            title: "Добавление товара",
+            innerProps: {
+                onCreate: event => console.log(event),
+                clientId
+            }
+        })
+
+    }
+
+    return (
+        <BaseTable
+            data={items}
+            columns={columns}
+            restProps={{
+                renderBottomToolbar: ({}) => (
+                    <Flex justify={"flex-end"} gap={rem(10)} p={rem(10)}>
+                        {/*{(onMultipleDelete && table.getSelectedRowModel().rows.length > 0) && (*/}
+                        {/*    <Button*/}
+                        {/*        onClick={() => {*/}
+                        {/*            onMultipleDelete(table.getSelectedRowModel().rows.map(row => row.original))*/}
+                        {/*        }}*/}
+                        {/*        variant={"filled"}*/}
+                        {/*        color={"red"}*/}
+                        {/*    >*/}
+                        {/*        Удалить выбранные*/}
+                        {/*    </Button>*/}
+                        {/*)}*/}
+                        <Button onClick={onCreateClick} variant={"default"}>
+                            Добавить услугу
+                        </Button>
+
+                    </Flex>
+                ),
+            } as MRT_TableOptions<DealProductSchema>}
+        />
+    )
+}
+
+export default DealProductsTable;

src/pages/LeadsPage/components/DealProductsTable/columns.tsx

@@ -0,0 +1,22 @@
+import {useMemo} from "react";
+import {MRT_ColumnDef} from "mantine-react-table";
+import {DealProductSchema} from "../../../../client";
+
+const useDealProductsTableColumns = () => {
+    return useMemo<MRT_ColumnDef<DealProductSchema>[]>(() => [
+        {
+            accessorKey: "products.name",
+            header: "Название"
+        },
+        {
+            accessorKey: "products.article",
+            header: "Артикул"
+        },
+        {
+            accessorKey: "quantity",
+            header: "Количество"
+        }
+    ], [])
+}
+
+export default useDealProductsTableColumns;

src/pages/LeadsPage/components/DealServicesTable/DealServicesTable.tsx

@@ -4,7 +4,7 @@ import {BaseTable} from "../../../../components/BaseTable/BaseTable.tsx";
 import {DealServiceSchema} from "../../../../client";
 import {CRUDTableProps} from "../../../../types/CRUDTable.tsx";
 import {MRT_TableOptions} from "mantine-react-table";
-import {ActionIcon, Box, Button, Flex, rem, Tooltip} from "@mantine/core";
+import {ActionIcon, Button, Flex, rem, Tooltip} from "@mantine/core";
 import {openContextModal} from "@mantine/modals";
 import {IconTrash} from "@tabler/icons-react";
 

src/pages/LeadsPage/drawers/DealEditDrawer/DealEditDrawer.tsx

@@ -6,6 +6,7 @@ import {DealService, DealServiceSchema} from "../../../../client";
 import {notifications} from "../../../../shared/lib/notifications.ts";
 import {modals} from "@mantine/modals";
 import {BaseTableRef} from "../../../../components/BaseTable/BaseTable.tsx";
+import DealProductsTable from "../../components/DealProductsTable/DealProductsTable.tsx";
 
 const useDealServicesTableState = () => {
     const {selectedDeal, setSelectedDeal} = useDealPageContext();
@@ -130,7 +131,6 @@ const useDealServicesTableState = () => {
         services: selectedDeal?.services || []
     }
 }
-
 const DealEditDrawerServicesTable = () => {
     const {
         services,
@@ -150,6 +150,29 @@ const DealEditDrawerServicesTable = () => {
         onMultipleDelete={onsServiceMultipleDelete}
     />)
 }
+
+const useDealProductTableState = () => {
+    const {selectedDeal} = useDealPageContext();
+
+    return {
+        clientId: selectedDeal?.clientId || -1,
+        products: selectedDeal?.products || []
+    }
+}
+
+const DealEditDrawerProductsTable = () => {
+    const {
+        products,
+        clientId
+    } = useDealProductTableState();
+    return (
+        <DealProductsTable
+            clientId={clientId}
+            items={products}
+        />
+    )
+}
+
 const useDealEditDrawerState = () => {
     const {selectedDeal, setSelectedDeal} = useDealPageContext();
     return {
@@ -168,6 +191,7 @@ const DealEditDrawer: FC = () => {
             onClose={onClose}
             opened={isVisible}>
             <DealEditDrawerServicesTable/>
+            <DealEditDrawerProductsTable/>
         </Drawer>
     );
 }

src/pages/LeadsPage/modals/AddDealProductModal.tsx

@@ -0,0 +1,60 @@
+import {ContextModalProps} from "@mantine/modals";
+import BaseFormModal, {CreateEditFormProps} from "../../ClientsPage/modals/BaseFormModal/BaseFormModal.tsx";
+import {DealProductSchema} from "../../../client";
+import {useForm} from "@mantine/form";
+import {NumberInput} from "@mantine/core";
+import ProductSelect from "../../../components/ProductSelect/ProductSelect.tsx";
+
+type RestProps = {
+    clientId: number
+}
+
+type Props = CreateEditFormProps<Partial<DealProductSchema>> & RestProps;
+const AddDealProductModal = ({
+                                 context,
+                                 id,
+                                 innerProps
+                             }: ContextModalProps<Props>) => {
+    const form = useForm<Partial<DealProductSchema>>({
+        initialValues: {
+            product: undefined,
+            quantity: 0
+        },
+        validate: {
+            product: (product?: DealProductSchema['product']) => product !== undefined ? null : "Необходимо выбрать товар",
+            quantity: (quantity?: number) => (quantity && quantity > 0) ? null : "Количество должно быть больше 0"
+        }
+    });
+    const onClose = () => {
+        context.closeContextModal(id);
+    }
+
+
+    return (
+        <BaseFormModal
+            {...innerProps}
+            form={form}
+            closeOnSubmit
+            onClose={onClose}>
+            <BaseFormModal.Body>
+                <>
+                    <ProductSelect
+                        placeholder={"Выберите услугу"}
+                        label={"Услуга"}
+                        clientId={innerProps.clientId}
+                        {...form.getInputProps('service')}
+                    />
+                    <NumberInput
+                        placeholder={"Введите количество"}
+                        label={"Количество"}
+                        min={1}
+                        {...form.getInputProps('quantity')}
+                    />
+                </>
+
+            </BaseFormModal.Body>
+        </BaseFormModal>
+    )
+}
+
+export default AddDealProductModal;