diff --git a/src/components/MultySelect.tsx b/src/components/MultySelect.tsx index 0f89976..f36644e 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,7 +31,15 @@ function MultySelect({ setIsSelectVisible(false); }); - useEffect(() => onSelect(selectedValues), [selectedValues]); + useEffect(() => { + if (reset) { + setSelectedValues([]); + } + }, [reset]); + + useEffect(() => { + onSelect(selectedValues); + }, [selectedValues]); const handleSelectClick = (item: T) => { const isItemSelected = selectedValues.some((val) => val.id === item.id); diff --git a/src/pages/ClientsPage.tsx b/src/pages/ClientsPage.tsx index 06604e7..94ec89f 100644 --- a/src/pages/ClientsPage.tsx +++ b/src/pages/ClientsPage.tsx @@ -1,11 +1,42 @@ -import { useState } from "react"; +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 api from "../utils/api"; function ClientsPage() { + 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 ( -
+

Клиенты

@@ -13,12 +44,85 @@ function ClientsPage() { setSearch(e.target.value)} + setSearch={setSearch} /> +
+ console.log(1)} + /> + console.log(1)} + /> +
+
+
+

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

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

{fullname}

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

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

+

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

+
+
+ )} +
+ {!!count && clients?.length === 0 && ( + + )}
); } diff --git a/src/pages/SessionsPage.tsx b/src/pages/SessionsPage.tsx index f85db10..95e39aa 100644 --- a/src/pages/SessionsPage.tsx +++ b/src/pages/SessionsPage.tsx @@ -18,8 +18,10 @@ import SpinIcon from "../components/icons/SpinIcon"; function SessionsPage() { const [limit, setLimit] = useState(10); const [search, setSearch] = useState(null); - const [selectedManagers, setSelectedManagers] = useState([]); - const [selectedApps, setSelectedApps] = useState([]); + + const [managerIds, setManagerIds] = useState([]); + const [appIds, setAppIds] = useState([]); + const [shouldReset, setShouldReset] = useState(false); const debouncedSearch = useDebounce(search, 500); @@ -41,25 +43,13 @@ function SessionsPage() { }); const { data: grouppedSessions, isLoading } = useQuery({ - queryKey: [ - "sessions", - selectedManagers, - selectedApps, - debouncedSearch, - limit, - ], + queryKey: ["sessions", managerIds, appIds, debouncedSearch, limit], queryFn: () => api .get( `sessions?${ - selectedManagers.length - ? `ownerIds=${selectedManagers.map((m) => m.id).join()}` - : "" - }${ - selectedApps.length - ? `&appIds=${selectedApps.map((a) => a.id).join()}` - : "" - }${ + managerIds.length ? `ownerIds=${managerIds.join()}` : "" + }${appIds.length ? `&appIds=${appIds.join()}` : ""}${ debouncedSearch ? `&clientSearch=${debouncedSearch}` : "" }&limit=${limit}` ) @@ -69,25 +59,15 @@ function SessionsPage() { }); const { data: count } = useQuery({ - queryKey: [ - "sessions", - "count", - selectedManagers, - selectedApps, - debouncedSearch, - ], + queryKey: ["sessions", "count", managerIds, appIds, debouncedSearch], queryFn: () => api .get( `sessions/count?${ - selectedManagers.length - ? `ownerIds=${selectedManagers.map((m) => m.id).join()}` - : "" - }${ - selectedApps.length - ? `&appIds=${selectedApps.map((a) => a.id).join()}` - : "" - }${debouncedSearch ? `&clientSearch=${debouncedSearch}` : ""}` + managerIds.length ? `ownerIds=${managerIds.join()}` : "" + }${appIds.length ? `&appIds=${appIds.join()}` : ""}${ + debouncedSearch ? `&clientSearch=${debouncedSearch}` : "" + }` ) .json(), enabled: !!me, @@ -95,12 +75,14 @@ function SessionsPage() { function reset() { setSearch(""); - setSelectedApps([]); - setSelectedManagers([]); + setAppIds([]); + setManagerIds([]); + setShouldReset(true); + setTimeout(() => setShouldReset(false), 0); } return ( -
+

Сеансы

@@ -122,21 +104,16 @@ function SessionsPage() { isGrid placeholder={"Менеджер"} resetTitle={"Все менеджеры"} - onSelect={(values) => - setSelectedManagers( - values.map(({ name: fullname, ...manager }) => ({ - fullname, - ...manager, - })) - ) - } + onSelect={(values) => setManagerIds(values.map(({ id }) => id))} + reset={shouldReset} /> setAppIds(values.map(({ id }) => id))} + reset={shouldReset} />