feat: search input

src/pages/ProductsPage/hooks/useProductsList.tsx

@@ -5,12 +5,13 @@ type Props = {
     clientId: number,
     page?: number,
     itemsPerPage?: number,
+    searchInput: string
 }
 const useProductsList = (props: Props) => {
-    const {clientId, page, itemsPerPage} = props;
+    const {clientId, page, itemsPerPage, searchInput} = props;
     const {data, refetch} = useQuery({
-        queryKey: ['getAllServices', clientId, page, itemsPerPage],
-        queryFn: () => ProductService.getProductsByClientId({clientId, page, itemsPerPage})
+        queryKey: ['getAllServices', clientId, page, itemsPerPage, searchInput],
+        queryFn: () => ProductService.getProductsByClientId(props)
     });
     const products = !data ? [] : data.products;
     const paginationInfo = data?.paginationInfo;

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

@@ -13,6 +13,7 @@
     padding: rem(5);
     gap: rem(10);
     display: flex;
+    justify-content: space-between;
 }
 
 .table-container {

src/pages/ProductsPage/ui/ProductsPage.tsx

@@ -1,7 +1,7 @@
 import PageBlock from "../../../components/PageBlock/PageBlock.tsx";
 import {FC, useEffect, useState} from "react";
 import styles from './ProductsPage.module.css';
-import {Button, Pagination, Text} from "@mantine/core";
+import {Button, Flex, Pagination, rem, Text, TextInput} from "@mantine/core";
 import ClientSelect from "../../../components/Selects/ClientSelect/ClientSelect.tsx";
 import ProductsTable from "../components/ProductsTable/ProductsTable.tsx";
 import {modals} from "@mantine/modals";
@@ -9,16 +9,19 @@ import {notifications} from "../../../shared/lib/notifications.ts";
 import {CreateProductRequest} from "../types.ts";
 import {ProductSchema, ProductService} from "../../../client";
 import useProductsList from "../hooks/useProductsList.tsx";
+import {useDebouncedValue} from "@mantine/hooks";
 
 export const ProductsPage: FC = () => {
     const [clientId, setClientId] = useState(-1);
     const [totalPages, setTotalPages] = useState(1);
     const [currentPage, setCurrentPage] = useState(1);
-
+    const [searchInputRaw, setSearchInputRaw] = useState<string>("");
+    const [searchInput] = useDebouncedValue(searchInputRaw, 500);
     const {products, paginationInfo, refetch} = useProductsList({
         clientId,
         page: currentPage - 1,
-        itemsPerPage: 10
+        itemsPerPage: 10,
+        searchInput
     });
     const onProductCreate = (request: CreateProductRequest) => {
         ProductService.createProduct({requestBody: request})
@@ -88,12 +91,21 @@ export const ProductsPage: FC = () => {
             <div className={styles['container']}>
                 <PageBlock>
                     <div className={styles['top-panel']}>
-                        <ClientSelect onChange={event => setClientId(event.id)}/>
-                        <Button
-                            onClick={() => onCreateProductClick()}
-                            variant={"default"}
-                        >Создать</Button>
+                        <Flex gap={rem(10)}>
 
+                            <ClientSelect onChange={event => setClientId(event.id)}/>
+                            <Button
+                                onClick={() => onCreateProductClick()}
+                                variant={"default"}
+                            >Создать</Button>
+                        </Flex>
+                        <Flex>
+                            <TextInput
+                                placeholder={"Артикул, название, шк"}
+                                onChange={event => setSearchInputRaw(event.currentTarget.value)}
+                                value={searchInputRaw}
+                            />
+                        </Flex>
                     </div>
                 </PageBlock>
                 <PageBlock>