From d130e18a14e167f97d5c145421d32ed271234648 Mon Sep 17 00:00:00 2001 From: Dilmurod Date: Fri, 21 Nov 2025 10:35:53 +0500 Subject: [PATCH] driver and updates page search filter --- src/API/LayoutApi/customers.ts | 3 + src/API/LayoutApi/update.ts | 25 +++++- src/App.tsx | 1 - src/Components/Customers/Customers.tsx | 34 ++++---- src/Components/Updates/Update.tsx | 108 ++++++++++++++++--------- src/Hooks/Customers/index.ts | 12 ++- src/Hooks/Update/index.ts | 11 ++- 7 files changed, 131 insertions(+), 63 deletions(-) diff --git a/src/API/LayoutApi/customers.ts b/src/API/LayoutApi/customers.ts index 0efd11b..c3d2389 100644 --- a/src/API/LayoutApi/customers.ts +++ b/src/API/LayoutApi/customers.ts @@ -9,6 +9,7 @@ export type TCustomerGetParams = { page?: string | number; for_driver_request?: boolean; is_active?: boolean; + telegram_group_id?: string; }; export type TCustomerByCompanyGetParams = { @@ -36,6 +37,8 @@ export const customerController = { if (!!filterObject.page_size) params.page_size = filterObject.page_size; if (!!filterObject.for_driver_request) params.for_driver_request = filterObject.for_driver_request; + if (!!filterObject.telegram_group_id) + params.telegram_group_id = filterObject.telegram_group_id; const { data } = await instance.get>( `customers/`, diff --git a/src/API/LayoutApi/update.ts b/src/API/LayoutApi/update.ts index 4d6a972..e060c06 100644 --- a/src/API/LayoutApi/update.ts +++ b/src/API/LayoutApi/update.ts @@ -24,10 +24,27 @@ export type TUpdatePostParams = { }; export const updateController = { - async read(status: string, page: number, page_size: number) { - const { data } = await instance.get( - `shift-updates/?status=${status}&page=${page}&page_size=${page_size}` - ); + async read( + status: string, + page: string | number, + page_size: string | number, + company_name: string, + driver_name: string + ) { + const params = new URLSearchParams({ + status, + page: String(page), + page_size: String(page_size), + }); + + if (company_name) { + params.append("company_name", company_name); + } + if (driver_name) { + params.append("driver_name", driver_name); + } + + const { data } = await instance.get(`shift-updates/?${params.toString()}`); return data; }, diff --git a/src/App.tsx b/src/App.tsx index 4f6ace0..940c02a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -303,7 +303,6 @@ const App: React.FC = () => { console.error("WebSocket error:", errorEvent); }); taskSocket.addEventListener("close", () => { - console.log("Socket closed → reconnecting…"); setIslive(false); }); } diff --git a/src/Components/Customers/Customers.tsx b/src/Components/Customers/Customers.tsx index eb40c80..6de5893 100644 --- a/src/Components/Customers/Customers.tsx +++ b/src/Components/Customers/Customers.tsx @@ -31,11 +31,13 @@ const Customer = () => { const { token } = theme.useToken(); const [search, setSearch] = useState(""); + const [searchChatId, setSearchChatId] = useState(""); const { data, isLoading, refetch } = useCustomerData({ name: search, is_active: undefined, page_size: pageSize, page: page, + telegram_group_id: searchChatId, }); const pageSizeOptions = [15, 20, 30, 40, 50]; @@ -72,6 +74,16 @@ const Customer = () => { setSearch(searchText); }, 1000); }; + const handleSearchChatId = (e: React.ChangeEvent) => { + if (timerRef.current) { + clearTimeout(timerRef.current); + } + + const searchChatId = e.target.value; + timerRef.current = setTimeout(() => { + setSearchChatId(searchChatId); + }, 1000); + }; const themes = localStorage.getItem("theme") === "true" ? true : false; return ( @@ -79,10 +91,7 @@ const Customer = () => { {open && }
Drivers - {/* */} +
-
- {/*
- - +
+ } onChange={handleSearchChange} /> -
*/} +
} - onChange={handleSearchChange} + onChange={handleSearchChatId} />
diff --git a/src/Components/Updates/Update.tsx b/src/Components/Updates/Update.tsx index 990aac5..ceec203 100644 --- a/src/Components/Updates/Update.tsx +++ b/src/Components/Updates/Update.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef, useState } from "react"; +import { useCallback, useEffect, useRef, useState } from "react"; import AddUpdate from "./AddUpdate"; import { Button, Input, Select, Space, Typography, theme } from "antd"; import { @@ -6,48 +6,72 @@ import { PlusOutlined, ReloadOutlined, RightOutlined, + SearchOutlined, } from "@ant-design/icons"; import UpdateTable from "./UpdateTable"; import { useUpdateData } from "../../Hooks/Update"; +import { useCompanyData } from "../../Hooks/Companies"; +import { debounce } from "lodash"; +const { Option } = Select; const Update = () => { const [open, setOpen] = useState(false); - - const timerRef = useRef(null); - - const handleSelectChange = (value: any) => { - if (timerRef.current) { - clearTimeout(timerRef.current); - } - - timerRef.current = setTimeout(() => { - setStatus(value); - }, 1000); - }; - const [status, setStatus] = useState([ "New", "In Progress", "Paper", "Setup", ]); - - const { Option } = Select; - const [page, setPage] = useState(1); const [pageSize, setPageSize] = useState(() => { const saved = localStorage.getItem("general_pageSize"); return saved ? Number(saved) : 15; }); + const [companyName, setCompanyName] = useState(""); + const [company, setCompany] = useState(""); + const [driverName, setDriverName] = useState(""); const pageSizeOptions = [15, 20, 30, 40, 50]; - const handlePageSizeChange = (value: number) => { setPageSize(value); - setPage(1); // Odatda pageSize o'zgarganda sahifani 1 ga qaytaramiz + setPage(1); }; - const { data, refetch, isLoading } = useUpdateData(status, page, pageSize); + const { data, refetch, isLoading } = useUpdateData( + status, + page, + pageSize, + company, + driverName + ); + + const companyData = useCompanyData({ + name: companyName, + }); + + const debouncedSearch = useCallback( + debounce((val: string, setCompany, setCompanyName) => { + if (val === "") { + setCompany(""); + } + setCompanyName(val); + }, 500), + [] + ); + + const handleSelectChange = useCallback( + debounce((value) => { + setStatus(value); + }, 1000), + [] + ); + + const handleSearchChange = useCallback( + debounce((value: string) => { + setDriverName(value); + }, 1000), + [] + ); const showModal = () => { setOpen(true); @@ -77,10 +101,6 @@ const Update = () => {
Updates
- {/* */} - {/* */}
-
+
+ + } + onChange={(e) => handleSearchChange(e.target.value)} + />
diff --git a/src/Hooks/Customers/index.ts b/src/Hooks/Customers/index.ts index 871e2f4..c9bc52d 100644 --- a/src/Hooks/Customers/index.ts +++ b/src/Hooks/Customers/index.ts @@ -10,9 +10,18 @@ export const useCustomerData = ({ is_active, page_size, for_driver_request, + telegram_group_id, }: TCustomerGetParams) => { return useQuery( - [`customers/`, name, page, is_active, page_size, for_driver_request], + [ + `customers/`, + name, + page, + is_active, + page_size, + for_driver_request, + telegram_group_id, + ], () => customerController.read({ name, @@ -20,6 +29,7 @@ export const useCustomerData = ({ is_active, page_size, for_driver_request, + telegram_group_id, }), { refetchOnWindowFocus: false } ); diff --git a/src/Hooks/Update/index.ts b/src/Hooks/Update/index.ts index bd205e7..ef4286b 100644 --- a/src/Hooks/Update/index.ts +++ b/src/Hooks/Update/index.ts @@ -11,12 +11,15 @@ import { updateController } from "../../API/LayoutApi/update"; export const useUpdateData = ( status: string, - page: number, - page_size: number + page: number | string, + page_size: number | number, + company_name: string, + driver_name: string ) => { return useQuery( - [`shift-updates`, status, page, page_size], - () => updateController.read(status, page, page_size), + [`shift-updates`, status, page, page_size, company_name, driver_name], + () => + updateController.read(status, page, page_size, company_name, driver_name), { refetchOnWindowFocus: false } ); };