fix client page
This commit is contained in:
+23
-20
@@ -1,3 +1,4 @@
|
||||
import api from "../utils/api";
|
||||
import Button from "../components/Button";
|
||||
import CloseIcon from "../components/icons/CloseIcon";
|
||||
import SpinIcon from "../components/icons/SpinIcon";
|
||||
@@ -6,8 +7,8 @@ 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";
|
||||
import { User } from "../types/User";
|
||||
import { Client } from "../types/Client";
|
||||
|
||||
function ClientsPage() {
|
||||
const [limit, setLimit] = useState(10);
|
||||
@@ -21,14 +22,26 @@ function ClientsPage() {
|
||||
});
|
||||
|
||||
const { data: clients, isLoading } = useQuery({
|
||||
queryKey: ["clients"],
|
||||
queryFn: () => api.get("clients").json<User[]>(),
|
||||
queryKey: ["clients", debouncedSearch],
|
||||
queryFn: () =>
|
||||
api
|
||||
.get("clients", {
|
||||
searchParams: debouncedSearch
|
||||
? { search: debouncedSearch, limit }
|
||||
: {},
|
||||
})
|
||||
.json<Client[]>(),
|
||||
enabled: !!me,
|
||||
});
|
||||
|
||||
const { data: count } = useQuery({
|
||||
queryKey: ["clients", "count", debouncedSearch],
|
||||
queryFn: () => api.get(`sessions/count?clients`).json<number>(),
|
||||
queryFn: () =>
|
||||
api
|
||||
.get(`clients/count`, {
|
||||
searchParams: debouncedSearch ? { search: debouncedSearch } : {},
|
||||
})
|
||||
.json<number>(),
|
||||
enabled: !!me,
|
||||
});
|
||||
|
||||
@@ -37,11 +50,11 @@ function ClientsPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className=" flex flex-col gap-[1.667vw]">
|
||||
<div className="flex flex-col gap-[1.667vw] h-full">
|
||||
<h1 className="title-l font-medium">Клиенты</h1>
|
||||
<div className="p-[1.389vw] rounded-[2.222vw] shadow-[0_4px_40px_0_rgba(15,16,17,0.05),0_2px_2px_0_rgba(15,16,17,0.05)] w-full">
|
||||
<div className="space-y-[1.111vw]">
|
||||
<div className="flex flex-col gap-[0.556vw]">
|
||||
<div className="flex flex-col gap-[0.556vw] h-full">
|
||||
<SearchInput
|
||||
placeholder="Поиск клиентов"
|
||||
value={search || ""}
|
||||
@@ -50,17 +63,7 @@ function ClientsPage() {
|
||||
/>
|
||||
<div className="flex gap-[0.556vw]">
|
||||
<MultySelect
|
||||
data={[
|
||||
{ name: "С бронью", id: "1" },
|
||||
{
|
||||
name: "С избранными лотами",
|
||||
id: "2",
|
||||
},
|
||||
{
|
||||
name: "Без отправленных КП",
|
||||
id: "3",
|
||||
},
|
||||
]}
|
||||
data={[]}
|
||||
isGrid={false}
|
||||
placeholder={"Все встречи"}
|
||||
resetTitle={"Все встречи"}
|
||||
@@ -96,9 +99,9 @@ function ClientsPage() {
|
||||
<SpinIcon />
|
||||
</div>
|
||||
) : clients?.length ? (
|
||||
clients?.map(({ fullname }) => (
|
||||
<div key={fullname} className="space-y-[0.833vw]">
|
||||
<p className="caption-m font-medium opacity-40">{fullname}</p>
|
||||
clients?.map(({ name }) => (
|
||||
<div key={name} className="aspace-y-[0.833vw]">
|
||||
<p className="caption-m font-medium opacity-40">{name}</p>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
|
||||
Reference in New Issue
Block a user