othr

src/client/index.ts

@@ -24,6 +24,7 @@ export type { DealServiceSchema } from './models/DealServiceSchema';
 export type { DealSummary } from './models/DealSummary';
 export type { DealSummaryResponse } from './models/DealSummaryResponse';
 export type { HTTPValidationError } from './models/HTTPValidationError';
+export type { PaginationInfoSchema } from './models/PaginationInfoSchema';
 export type { ProductCreateRequest } from './models/ProductCreateRequest';
 export type { ProductCreateResponse } from './models/ProductCreateResponse';
 export type { ProductGetResponse } from './models/ProductGetResponse';

src/client/models/PaginationInfoSchema.ts

@@ -0,0 +1,9 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type PaginationInfoSchema = {
+    total_pages: number;
+    total_items: number;
+};
+

src/client/models/ProductGetResponse.ts

@@ -2,8 +2,10 @@
 /* istanbul ignore file */
 /* tslint:disable */
 /* eslint-disable */
+import type { PaginationInfoSchema } from './PaginationInfoSchema';
 import type { ProductSchema } from './ProductSchema';
 export type ProductGetResponse = {
     products: Array<ProductSchema>;
+    pagination_info: PaginationInfoSchema;
 };
 

src/modals/CreateProductModal/CreateProductModal.tsx

@@ -0,0 +1,26 @@
+import {ContextModalProps} from "@mantine/modals";
+import {Button, Text} from "@mantine/core";
+import {useForm} from "@mantine/form";
+
+
+const CreateProductModal = ({
+                                context,
+                                id,
+                                innerProps,
+                            }: ContextModalProps<{ clientId: number }>) => {
+    const form = useForm({
+        initialValues: {
+            name: '',
+            article: '',
+            barcode: ''
+        }
+    })
+    return (
+        <>
+            <Button fullWidth mt="md" onClick={() => context.closeModal(id)}>
+                Close modal
+            </Button>
+        </>
+    )
+};
+export default CreateProductModal;

src/modals/modals.ts

@@ -1,9 +1,11 @@
 import EnterDeadlineModal from "./EnterDeadlineModal/EnterDeadlineModal.tsx";
 import CreateServiceCategoryModal from "../pages/ServicesPage/modals/CreateServiceCategoryModal.tsx";
 import CreateServiceModal from "../pages/ServicesPage/modals/CreateServiceModal.tsx";
+import createProductModal from "./CreateProductModal/CreateProductModal.tsx";
 
 export const modals = {
     enterDeadline: EnterDeadlineModal,
     createServiceCategory: CreateServiceCategoryModal,
-    createService: CreateServiceModal
+    createService: CreateServiceModal,
+    createProduct: createProductModal
 }

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
+            <BaseTable
-            data={data}
+                striped
-            columns={columns}
+                data={data}
-            restProps={{
+                columns={columns}
-                enableSorting: false,
+                restProps={{
-                enableColumnActions: false,
+                    enableSorting: false,
-                enableRowSelection: true,
+                    enableColumnActions: false,
-                enableColumnResizing: true,
+                    enableRowSelection: true,
-                layoutMode: "grid"
+                    enableColumnResizing: true,
-            } as MRT_TableOptions<ClientSchema>}
+                    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
+            <BaseTable
-            ref={tableRef}
+                ref={tableRef}
-            data={products}
+                data={products}
-            columns={columns}
+                columns={columns}
-            restProps={{
+                restProps={{
-                enableColumnActions: false,
+                    enableColumnActions: false,
-                manualPagination: true,
+                } as MRT_TableOptions<ProductSchema>}
-                enableBottomToolbar: true,
+            />
-                enablePagination: true
-            } 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;
-
+    const paginationInfo = data?.pagination_info;
-    return {products, refetch}
+    return {products, paginationInfo, refetch}
 }
 export default useServicesList;

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

@@ -15,3 +15,14 @@
     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 {Button, Drawer, Pagination} from "@mantine/core";
-import {useDisclosure} from "@mantine/hooks";
+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>
-
         </>
     )
 }