othr

src/pages/ClientsPage/components/ClientsTable/ClientsTable.tsx

@@ -1,7 +1,7 @@
 import {FC} from "react";
 import {BaseTable} from "../../../../components/BaseTable/BaseTable.tsx";
 import {useClientsTableColumns} from "./columns.tsx";
-import {MantineReactTable, MRT_Table, MRT_TableOptions, useMantineReactTable} from "mantine-react-table";
+import {MRT_TableOptions} from "mantine-react-table";
 import {ClientSchema} from "../../../../client";
 
 type Props = {
@@ -11,18 +11,21 @@ type Props = {
 const ClientsTable: FC<Props> = ({data}) => {
     const columns = useClientsTableColumns();
     return (
-        <BaseTable
-            striped
-            data={data}
-            columns={columns}
-            restProps={{
-                enableSorting: false,
-                enableColumnActions: false,
-                enableRowSelection: true,
-                enableColumnResizing: true,
-                layoutMode: "grid"
-            } as MRT_TableOptions<ClientSchema>}
-        />
+        <>
+            <BaseTable
+                striped
+                data={data}
+                columns={columns}
+                restProps={{
+                    enableSorting: false,
+                    enableColumnActions: false,
+                    enableRowSelection: true,
+                    enableColumnResizing: true,
+                    layoutMode: "grid"
+                } as MRT_TableOptions<ClientSchema>}
+            />
+        </>
+
     )
 }
 

src/pages/ProductsPage/components/ProductsTable/ProductsTable.module.css

@@ -0,0 +1,9 @@
+.container {
+    display: flex;
+    gap: rem(10);
+    flex-direction: column;
+}
+
+.pagination {
+align-self: flex-end;
+}

src/pages/ProductsPage/components/ProductsTable/ProductsTable.tsx

@@ -11,18 +11,14 @@ type Props = {
 const ProductsTable: FC<Props> = ({products, tableRef}) => {
     const columns = useProductsTableColumns();
     return (
-        <BaseTable
-            ref={tableRef}
-            data={products}
-            columns={columns}
-            restProps={{
-                enableColumnActions: false,
-                manualPagination: true,
-                enableBottomToolbar: true,
-                enablePagination: true
-            } as MRT_TableOptions<ProductSchema>}
-
-        />
+            <BaseTable
+                ref={tableRef}
+                data={products}
+                columns={columns}
+                restProps={{
+                    enableColumnActions: false,
+                } as MRT_TableOptions<ProductSchema>}
+            />
     )
 }
 

src/pages/ProductsPage/hooks/useProductsList.tsx

@@ -13,7 +13,7 @@ const useServicesList = (props: Props) => {
         queryFn: () => ProductService.getProductsByClientId({clientId, page, itemsPerPage})
     });
     const products = isPending || error || !data ? [] : data.products;
-
-    return {products, refetch}
+    const paginationInfo = data?.pagination_info;
+    return {products, paginationInfo, refetch}
 }
 export default useServicesList;

src/pages/ProductsPage/ui/ProductsPage.module.css

@@ -14,4 +14,15 @@
     padding: rem(5);
     gap: rem(10);
     display: flex;
+}
+
+.table-container {
+    display: flex;
+    gap: rem(10);
+    flex-direction: column;
+}
+
+.table-pagination {
+    align-self: flex-end;
+
 }

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>
-
         </>
     )
 }