diff --git a/src/components/MultySelect.tsx b/src/components/MultySelect.tsx index aa819ec..1e7b27d 100644 --- a/src/components/MultySelect.tsx +++ b/src/components/MultySelect.tsx @@ -15,12 +15,14 @@ function MultySelect({ placeholder, resetTitle, onSelect, + reset, }: { data: T[]; isGrid: boolean; placeholder: string; resetTitle: string; onSelect: (values: T[]) => void; + reset?: boolean; }) { const [selectedValues, setSelectedValues] = useState([]); const [isSelectVisible, setIsSelectVisible] = useState(false); @@ -29,6 +31,12 @@ function MultySelect({ setIsSelectVisible(false); }); + useEffect(() => { + if (reset) { + setSelectedValues([]); + } + }, [reset]); + useEffect(() => { onSelect(selectedValues); }, [selectedValues]); diff --git a/src/pages/ClientsPage.tsx b/src/pages/ClientsPage.tsx index 871b985..1e9c785 100644 --- a/src/pages/ClientsPage.tsx +++ b/src/pages/ClientsPage.tsx @@ -1,5 +1,131 @@ +import Button from "../components/Button"; +import CloseIcon from "../components/icons/CloseIcon"; +import SpinIcon from "../components/icons/SpinIcon"; +import MultySelect from "../components/MultySelect"; +import SearchInput from "../components/SearchInput"; +import { useState } from "react"; +import { useDebounce } from "@uidotdev/usehooks"; +import { useQuery } from "@tanstack/react-query"; +import { IUser } from "../types/User"; +import api from "../utils/api"; + function ClientsPage() { - return
; + const [limit, setLimit] = useState(10); + const [search, setSearch] = useState(null); + + const debouncedSearch = useDebounce(search, 500); + + const { data: me } = useQuery({ + queryKey: ["me"], + queryFn: () => api.get("auth/me").json(), + }); + + const { data: clients, isLoading } = useQuery({ + queryKey: ["clients"], + queryFn: () => api.get("clients").json(), + enabled: !!me, + }); + + const { data: count } = useQuery({ + queryKey: ["clients", "count", debouncedSearch], + queryFn: () => api.get(`sessions/count?clients`).json(), + enabled: !!me, + }); + + function reset() { + setSearch(""); + } + + return ( +
+

Клиенты

+
+
+
+ setSearch(e.target.value)} + setSearch={setSearch} + /> +
+ console.log(1)} + /> + console.log(1)} + /> +
+
+
+

+ Найдено {count} клиентов +

+ +
+
+
+
+ {isLoading ? ( +
+ +
+ ) : clients?.length ? ( + clients?.map(({ fullname }) => ( +
+

{fullname}

+
+ )) + ) : ( +
+ +
+

Ничего не нашли

+

+ Попробуйте изменить параметры поиска +

+
+
+ )} +
+ {!!count && clients?.length === 0 && ( + + )} +
+ ); } export default ClientsPage; diff --git a/src/pages/SessionsPage.tsx b/src/pages/SessionsPage.tsx index 4d03af5..f640295 100644 --- a/src/pages/SessionsPage.tsx +++ b/src/pages/SessionsPage.tsx @@ -20,6 +20,7 @@ function SessionsPage() { const [search, setSearch] = useState(null); const [managerIds, setManagerIds] = useState([]); const [appIds, setAppIds] = useState([]); + const [shouldReset, setShouldReset] = useState(false); const debouncedSearch = useDebounce(search, 500); @@ -75,10 +76,12 @@ function SessionsPage() { setSearch(""); setAppIds([]); setManagerIds([]); + setShouldReset(true); + setTimeout(() => setShouldReset(false), 0); } return ( -
+

Сеансы

@@ -101,6 +104,7 @@ function SessionsPage() { placeholder={"Менеджер"} resetTitle={"Все менеджеры"} onSelect={(values) => setManagerIds(values.map(({ id }) => id))} + reset={shouldReset} /> setAppIds(values.map(({ id }) => id))} + reset={shouldReset} />