From 98a6dee996bfae9d9b4e474980abf75641e5ade6 Mon Sep 17 00:00:00 2001 From: fakz9 Date: Fri, 29 Mar 2024 21:40:57 +0300 Subject: [PATCH] othr --- src/client/index.ts | 1 + src/client/models/PaginationInfoSchema.ts | 9 ++++ src/client/models/ProductGetResponse.ts | 2 + .../CreateProductModal/CreateProductModal.tsx | 26 +++++++++ src/modals/modals.ts | 4 +- .../components/ClientsTable/ClientsTable.tsx | 29 +++++----- .../ProductsTable/ProductsTable.module.css | 9 ++++ .../ProductsTable/ProductsTable.tsx | 20 +++---- .../ProductsPage/hooks/useProductsList.tsx | 4 +- .../ProductsPage/ui/ProductsPage.module.css | 11 ++++ src/pages/ProductsPage/ui/ProductsPage.tsx | 53 +++++++++++++------ 11 files changed, 124 insertions(+), 44 deletions(-) create mode 100644 src/client/models/PaginationInfoSchema.ts create mode 100644 src/modals/CreateProductModal/CreateProductModal.tsx create mode 100644 src/pages/ProductsPage/components/ProductsTable/ProductsTable.module.css diff --git a/src/client/index.ts b/src/client/index.ts index c10f046..6fe2aa5 100644 --- a/src/client/index.ts +++ b/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'; diff --git a/src/client/models/PaginationInfoSchema.ts b/src/client/models/PaginationInfoSchema.ts new file mode 100644 index 0000000..76b3aba --- /dev/null +++ b/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; +}; + diff --git a/src/client/models/ProductGetResponse.ts b/src/client/models/ProductGetResponse.ts index 112ad44..4af6d3b 100644 --- a/src/client/models/ProductGetResponse.ts +++ b/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; + pagination_info: PaginationInfoSchema; }; diff --git a/src/modals/CreateProductModal/CreateProductModal.tsx b/src/modals/CreateProductModal/CreateProductModal.tsx new file mode 100644 index 0000000..46ba809 --- /dev/null +++ b/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 ( + <> + + + ) +}; +export default CreateProductModal; \ No newline at end of file diff --git a/src/modals/modals.ts b/src/modals/modals.ts index 8cab7cb..1bbde0b 100644 --- a/src/modals/modals.ts +++ b/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 } diff --git a/src/pages/ClientsPage/components/ClientsTable/ClientsTable.tsx b/src/pages/ClientsPage/components/ClientsTable/ClientsTable.tsx index fd4f4dd..8ff0275 100644 --- a/src/pages/ClientsPage/components/ClientsTable/ClientsTable.tsx +++ b/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 = ({data}) => { const columns = useClientsTableColumns(); return ( - } - /> + <> + } + /> + + ) } diff --git a/src/pages/ProductsPage/components/ProductsTable/ProductsTable.module.css b/src/pages/ProductsPage/components/ProductsTable/ProductsTable.module.css new file mode 100644 index 0000000..3e25924 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/pages/ProductsPage/components/ProductsTable/ProductsTable.tsx b/src/pages/ProductsPage/components/ProductsTable/ProductsTable.tsx index 32b509f..2efa2af 100644 --- a/src/pages/ProductsPage/components/ProductsTable/ProductsTable.tsx +++ b/src/pages/ProductsPage/components/ProductsTable/ProductsTable.tsx @@ -11,18 +11,14 @@ type Props = { const ProductsTable: FC = ({products, tableRef}) => { const columns = useProductsTableColumns(); return ( - } - - /> + } + /> ) } diff --git a/src/pages/ProductsPage/hooks/useProductsList.tsx b/src/pages/ProductsPage/hooks/useProductsList.tsx index 999cf60..1a9bbb4 100644 --- a/src/pages/ProductsPage/hooks/useProductsList.tsx +++ b/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; \ No newline at end of file diff --git a/src/pages/ProductsPage/ui/ProductsPage.module.css b/src/pages/ProductsPage/ui/ProductsPage.module.css index 8d14b66..97ec37a 100644 --- a/src/pages/ProductsPage/ui/ProductsPage.module.css +++ b/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; + } \ No newline at end of file diff --git a/src/pages/ProductsPage/ui/ProductsPage.tsx b/src/pages/ProductsPage/ui/ProductsPage.tsx index 19385bd..8fd6b4a 100644 --- a/src/pages/ProductsPage/ui/ProductsPage.tsx +++ b/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 ( <> -
-
- setClientId(event.id)}/> +
-
- +
+ + +
- ) }