Merge branch 'main' of http://192.168.1.163:3000/inmake/graff-mate-client

src/components/MultySelect.tsx

@@ -15,12 +15,14 @@ function MultySelect<T extends { name: string; id: string }>({
   placeholder,
   resetTitle,
   onSelect,
+  reset,
 }: {
   data: T[];
   isGrid: boolean;
   placeholder: string;
   resetTitle: string;
   onSelect: (values: T[]) => void;
+  reset?: boolean;
 }) {
   const [selectedValues, setSelectedValues] = useState<T[]>([]);
   const [isSelectVisible, setIsSelectVisible] = useState(false);
@@ -29,7 +31,15 @@ function MultySelect<T extends { name: string; id: string }>({
     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);

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<string | null>(null);
 
+  const debouncedSearch = useDebounce(search, 500);
+
+  const { data: me } = useQuery({
+    queryKey: ["me"],
+    queryFn: () => api.get("auth/me").json<IUser>(),
+  });
+
+  const { data: clients, isLoading } = useQuery({
+    queryKey: ["clients"],
+    queryFn: () => api.get("clients").json<IUser[]>(),
+    enabled: !!me,
+  });
+
+  const { data: count } = useQuery({
+    queryKey: ["clients", "count", debouncedSearch],
+    queryFn: () => api.get(`sessions/count?clients`).json<number>(),
+    enabled: !!me,
+  });
+
+  function reset() {
+    setSearch("");
+  }
+
   return (
-    <div className="py-[1.667vw] flex flex-col gap-[1.667vw]">
+    <div className=" flex flex-col gap-[1.667vw]">
       <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]">
@@ -13,12 +44,85 @@ function ClientsPage() {
             <SearchInput
               placeholder="Поиск клиентов"
               value={search || ""}
-              setSearch={setSearch}
               onChange={(e) => setSearch(e.target.value)}
+              setSearch={setSearch}
             />
+            <div className="flex gap-[0.556vw]">
+              <MultySelect
+                data={[
+                  { name: "С бронью", id: "1" },
+                  {
+                    name: "С избранными лотами",
+                    id: "2",
+                  },
+                  {
+                    name: "Без отправленных КП",
+                    id: "3",
+                  },
+                ]}
+                isGrid={false}
+                placeholder={"Все встречи"}
+                resetTitle={"Все встречи"}
+                onSelect={() => console.log(1)}
+              />
+              <MultySelect
+                data={[{ name: "сценарии", id: "1" }]}
+                isGrid
+                placeholder={"Все сценарии"}
+                resetTitle={"Все сценарии"}
+                onSelect={() => console.log(1)}
+              />
+            </div>
+          </div>
+          <div className="flex justify-between items-center">
+            <p className="caption-m font-medium opacity-40">
+              Найдено {count} клиентов
+            </p>
+            <button className="flex gap-[0.278vw] items-center" onClick={reset}>
+              <div className="size-[1.111vw] text-[#7D7D7D]">
+                <CloseIcon />
+              </div>
+              <p className="text-[#7D7D7D] text-[0.972vw] font-medium">
+                Сбросить все
+              </p>
+            </button>
           </div>
         </div>
       </div>
+      <div className="space-y-[1.667vw]">
+        {isLoading ? (
+          <div className="size-[2.222vw] m-auto text-[#7B60F3] animate-spin">
+            <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>
+            </div>
+          ))
+        ) : (
+          <div className="m-auto flex flex-col items-center gap-[1.111vw] w-[18.333vw] mt-[6.111vw]">
+            <img src="/images/sad_ghost.png" alt="" className="w-[13.889vw]" />
+            <div className="space-y-[0.556vw]">
+              <p className="text-center font-medium title-m">Ничего не нашли</p>
+              <p className="text-[#BDBDBD] caption-s font-medium">
+                Попробуйте изменить параметры поиска
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
+      {!!count && clients?.length === 0 && (
+        <Button
+          size="large"
+          variant="primary"
+          className="w-full"
+          onClick={() => setLimit((prev) => prev + 10)}
+          disabled={!!count && limit >= count}
+        >
+          Показать еще
+        </Button>
+      )}
     </div>
   );
 }

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<string | null>(null);
-  const [selectedManagers, setSelectedManagers] = useState<User[]>([]);
-  const [selectedApps, setSelectedApps] = useState<App[]>([]);
+
+  const [managerIds, setManagerIds] = useState<string[]>([]);
+  const [appIds, setAppIds] = useState<string[]>([]);
+  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<number>(),
     enabled: !!me,
@@ -95,12 +75,14 @@ function SessionsPage() {
 
   function reset() {
     setSearch("");
-    setSelectedApps([]);
-    setSelectedManagers([]);
+    setAppIds([]);
+    setManagerIds([]);
+    setShouldReset(true);
+    setTimeout(() => setShouldReset(false), 0);
   }
 
   return (
-    <div className="py-[1.667vw] flex flex-col gap-[1.667vw]">
+    <div className=" flex flex-col gap-[1.667vw]">
       <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]">
@@ -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}
               />
               <MultySelect
                 data={apps || []}
                 isGrid
                 placeholder={"Проект"}
                 resetTitle={"Все проекты"}
-                onSelect={setSelectedApps}
+                onSelect={(values) => setAppIds(values.map(({ id }) => id))}
+                reset={shouldReset}
               />
             </div>
           </div>