othr

src/pages/ProductsPage/ui/ProductsPage.tsx

@@ -1,40 +1,61 @@
 import PageBlock from "../../../components/PageBlock/PageBlock.tsx";
-import {FC, useState} from "react";
+import {FC, useEffect, useState} from "react";
 import styles from './ProductsPage.module.css';
-import {Drawer} from "@mantine/core";
-import {useDisclosure} from "@mantine/hooks";
+import {Button, Drawer, Pagination} from "@mantine/core";
+import {useDisclosure, usePagination} from "@mantine/hooks";
 import ClientSelect from "../../../components/Selects/ClientSelect/ClientSelect.tsx";
 import ProductsTable from "../components/ProductsTable/ProductsTable.tsx";
 import useProductsList from "../hooks/useProductsList.tsx";
+import {notifications} from "../../../shared/lib/notifications.ts";
+import {modals} from "@mantine/modals";
 
 export const ProductsPage: FC = () => {
-    const [opened, {open, close}] = useDisclosure(false);
+    // const [opened, {open, close}] = useDisclosure(false);
     const [clientId, setClientId] = useState(-1);
-    const {products} = useProductsList({clientId, page: 0, itemsPerPage: 10});
+    const [totalPages, setTotalPages] = useState(1);
+    const pagination = usePagination({total: totalPages});
+    const {products, paginationInfo} = useProductsList({
+        clientId,
+        page: pagination.active - 1,
+        itemsPerPage: 10
+    });
+    const onCreateProductClick = () => {
+        modals.openContextModal({
+            modal: "createProduct",
+            title: 'Создание категории',
+            withCloseButton: false,
+            innerProps: {
+                clientId
+            }
+        })
+    }
+    useEffect(() => {
+        if (!paginationInfo) return;
+        setTotalPages(paginationInfo.total_pages);
+    }, [paginationInfo]);
+
+
     return (
         <>
-            <Drawer
-                opened={opened}
-                onClose={close}
-                position={"right"}
-                size={"100%"}
-            />
             <div className={styles['container']}>
-
                 <PageBlock>
                     <div className={styles['top-panel']}>
-
                         <ClientSelect onChange={event => setClientId(event.id)}/>
+                        <Button
+                            onClick={() => onCreateProductClick()}
+                            variant={"default"}
+                        >Создать</Button>
                     </div>
-
                 </PageBlock>
                 <PageBlock>
                     <div className={styles['body-container']}>
-                        <ProductsTable products={products}/>
+                        <div className={styles['table-container']}>
+                            <ProductsTable products={products}/>
+                            <Pagination className={styles['table-pagination']} total={100}/>
+                        </div>
                     </div>
                 </PageBlock>
             </div>
-
         </>
     )
 }