From 40769d3664955d25a4eacb0f5f1913922c1c0d60 Mon Sep 17 00:00:00 2001
From: admin <fakc445@gmail.com>
Date: Sat, 24 Aug 2024 05:16:43 +0300
Subject: [PATCH] feat: search input

---
 src/client/models/AuthLoginRequest.ts         |  2 +-
 src/client/services/ProductService.ts         |  3 ++
 .../Selects/ClientSelect/ClientSelect.tsx     |  2 +-
 .../ProductsPage/hooks/useProductsList.tsx    |  7 +++--
 .../ProductsPage/ui/ProductsPage.module.css   |  1 +
 src/pages/ProductsPage/ui/ProductsPage.tsx    | 28 +++++++++++++------
 6 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/src/client/models/AuthLoginRequest.ts b/src/client/models/AuthLoginRequest.ts
index c37694a..8995d00 100644
--- a/src/client/models/AuthLoginRequest.ts
+++ b/src/client/models/AuthLoginRequest.ts
@@ -7,6 +7,6 @@ export type AuthLoginRequest = {
     first_name: string;
     hash: string;
     id: number;
-    photo_url: string;
+    photo_url?: (string | null);
 };
 
diff --git a/src/client/services/ProductService.ts b/src/client/services/ProductService.ts
index d77713e..734bd92 100644
--- a/src/client/services/ProductService.ts
+++ b/src/client/services/ProductService.ts
@@ -92,10 +92,12 @@ export class ProductService {
      */
     public static getProductsByClientId({
         clientId,
+        searchInput,
         page,
         itemsPerPage,
     }: {
         clientId: number,
+        searchInput: string,
         page?: (number | null),
         itemsPerPage?: (number | null),
     }): CancelablePromise<ProductGetResponse> {
@@ -104,6 +106,7 @@ export class ProductService {
             url: '/product/get',
             query: {
                 'client_id': clientId,
+                'search_input': searchInput,
                 'page': page,
                 'items_per_page': itemsPerPage,
             },
diff --git a/src/components/Selects/ClientSelect/ClientSelect.tsx b/src/components/Selects/ClientSelect/ClientSelect.tsx
index a6ce90f..ab14091 100644
--- a/src/components/Selects/ClientSelect/ClientSelect.tsx
+++ b/src/components/Selects/ClientSelect/ClientSelect.tsx
@@ -14,7 +14,7 @@ const ClientSelect: FC<Props> = ({value, onChange, withLabel = false}) => {
     const options = clients.map(client => ({label: client.name, value: client.id.toString()}))
     return (
         <Select
-
+            searchable
             placeholder={"Выберите клиента"}
             value={value && options.find(client => client.value == value.id.toString())?.value}
             onChange={event => {
diff --git a/src/pages/ProductsPage/hooks/useProductsList.tsx b/src/pages/ProductsPage/hooks/useProductsList.tsx
index 2d41273..4383e68 100644
--- a/src/pages/ProductsPage/hooks/useProductsList.tsx
+++ b/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;
diff --git a/src/pages/ProductsPage/ui/ProductsPage.module.css b/src/pages/ProductsPage/ui/ProductsPage.module.css
index 9326128..40c65db 100644
--- a/src/pages/ProductsPage/ui/ProductsPage.module.css
+++ b/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 {
diff --git a/src/pages/ProductsPage/ui/ProductsPage.tsx b/src/pages/ProductsPage/ui/ProductsPage.tsx
index d1e7a5c..e1b5fd4 100644
--- a/src/pages/ProductsPage/ui/ProductsPage.tsx
+++ b/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>