upd

2025-06-19 18:36:20 +05:00
parent e635b7ef0a
commit 2e5790d246
7 changed files with 87 additions and 85 deletions
@@ -16,7 +16,7 @@ function ClientCard({ client }: { client: Client }) {
              Добавьте email
            </p>
          )}
-          <span className="w-[1.389vw] h-[1.389vw] flex items-center justify-center text-[#7B60F3]">
+          <span className="size-[1.389vw] flex items-center justify-center text-[#7B60F3]">
            <ChevronRightIcon />
          </span>
        </div>
@@ -8,7 +8,6 @@ function SearchInput(
    setSearch: React.Dispatch<React.SetStateAction<string | null>>;
  }
 ) {
-  // const [value, setValue] = useState();
  const ref = useRef<HTMLInputElement>(null);

  return (
@@ -4,6 +4,7 @@ import SessionModal from "./modals/SessionModal";

 function SessionCard({ session }: { session: Session }) {
  const { setModal, setPosition } = useModalStore();
+
  return (
    <div
      className="w-full h-[4.444vw] not-last:border-b-1 border-[#F6F6F6] flex py-[0.278vw] items-center gap-[0.556vw] cursor-pointer group"
@@ -14,15 +14,14 @@ import api from "../../utils/api";
 import SpinIcon from "../icons/SpinIcon";
 import useModalStore from "../../stores/useModalStore";
 import CreateSessionModal from "./CreateSessionModal";
+import SessionModal from "./SessionModal";

 function ClientModal({ client }: { client: Client }) {
  const queryClient = useQueryClient();
+
  const { setModal } = useModalStore();
-  const [clientData, setClientData] = useState({
-    name: client.name,
-    phone: client.phone,
-    email: client.email,
-  });
+
+  const [clientData, setClientData] = useState(client);

  const { mutate: updateClientData, isPending } = useMutation({
    mutationKey: ["clients", client.id],
@@ -32,6 +31,11 @@ function ClientModal({ client }: { client: Client }) {
    },
  });

+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    updateClientData();
+  };
+
  return (
    <div className="w-[49.722vw] bg-[#FFFFFF] rounded-[2.222vw] overflow-hidden">
      <div className="flex justify-center items-center py-[1.806vw] border-b border-[#D6D6D6]">
@@ -46,72 +50,70 @@ function ClientModal({ client }: { client: Client }) {
                Вы можете изменить данные клиента
              </p>
            </div>
-            <div className="flex flex-col gap-[0.278vw]">
-              <Input
-                placeholder="Имя"
-                defaultValue={clientData.name || ""}
-                onChange={(e) => {
-                  setClientData({ ...clientData, name: e.target.value });
-                }}
-                className="relative"
-              >
-                <span
-                  className="absolute z-10 top-[1.25vw] left-[17.917vw] size-[1.389vw] text-[#7D7D7D] cursor-pointer"
-                  onClick={() => {
-                    navigator.clipboard.writeText(clientData.name);
+            <form onSubmit={handleSubmit}>
+              <div className="flex flex-col gap-[0.278vw]">
+                <Input
+                  placeholder="Имя"
+                  defaultValue={clientData.name || ""}
+                  onChange={(e) => {
+                    setClientData({ ...clientData, name: e.target.value });
                  }}
+                  className="relative"
+                  required
                >
-                  <CopyIcon />
-                </span>
-              </Input>
-              <Input
-                placeholder="Номер телефона"
-                defaultValue={clientData.phone || ""}
-                onChange={(e) => {
-                  setClientData({ ...clientData, phone: e.target.value });
-                }}
-                className="relative"
-              >
-                <span
-                  className="absolute top-[1.25vw] left-[17.917vw] size-[1.389vw] text-[#7D7D7D] cursor-pointer"
-                  onClick={() => {
-                    navigator.clipboard.writeText(clientData.phone);
-                  }}
-                >
-                  <CopyIcon />
-                </span>
-              </Input>
-              <Input
-                placeholder="Эл. почта"
-                defaultValue={clientData.email || ""}
-                onChange={(e) => {
-                  setClientData({ ...clientData, email: e.target.value });
-                }}
-              />
-            </div>
-            <div>
-              <Button
-                variant="primary"
-                size="large"
-                className="w-full"
-                type="submit"
-                onClick={() => updateClientData()}
-                disabled={
-                  clientData.name === client.name &&
-                  clientData.phone === client.phone &&
-                  clientData.email === client.email &&
-                  !isPending
-                }
-              >
-                {isPending ? (
-                  <span className="size-[1.111vw] animate-spin text-[#7B60F3] flex items-center justify-center">
-                    <SpinIcon />
+                  <span
+                    className="absolute z-10 top-[1.25vw] left-[17.917vw] size-[1.389vw] text-[#7D7D7D] cursor-pointer"
+                    onClick={() => {
+                      navigator.clipboard.writeText(clientData.name);
+                    }}
+                  >
+                    <CopyIcon />
                  </span>
-                ) : (
-                  "Сохранить изменения"
-                )}
-              </Button>
-            </div>
+                </Input>
+                <Input
+                  placeholder="Номер телефона"
+                  defaultValue={clientData.phone || ""}
+                  onChange={(e) => {
+                    setClientData({ ...clientData, phone: e.target.value });
+                  }}
+                  className="relative"
+                  required
+                >
+                  <span
+                    className="absolute top-[1.25vw] left-[17.917vw] size-[1.389vw] text-[#7D7D7D] cursor-pointer"
+                    onClick={() => {
+                      navigator.clipboard.writeText(clientData.phone);
+                    }}
+                  >
+                    <CopyIcon />
+                  </span>
+                </Input>
+                <Input
+                  placeholder="Эл. почта"
+                  defaultValue={clientData.email || ""}
+                  onChange={(e) => {
+                    setClientData({ ...clientData, email: e.target.value });
+                  }}
+                />
+              </div>
+              <div className="mt-[1.111vw]">
+                <Button
+                  variant="primary"
+                  size="large"
+                  className="w-full"
+                  type="submit"
+                  disabled={!clientData.name || !clientData.phone || isPending}
+                >
+                  {isPending ? (
+                    <span className="size-[1.111vw] animate-spin text-[#7B60F3] flex items-center justify-center">
+                      <SpinIcon />
+                    </span>
+                  ) : (
+                    "Сохранить изменения"
+                  )}
+                </Button>
+              </div>
+            </form>
          </div>
          <div className="flex flex-col gap-[1.111vw] rounded-[1.667vw] bg-white p-[1.111vw]">
            <div className="flex flex-col gap-[0.278vw]">
@@ -150,6 +152,9 @@ function ClientModal({ client }: { client: Client }) {
                <div
                  key={session.id}
                  className="p-[0.278vw] border-b border-[#F6F6F6] cursor-pointer"
+                  onClick={() => {
+                    setModal(<SessionModal session={session} />);
+                  }}
                >
                  <div className="p-[0.833vw] flex justify-between items-center">
                    <div className="flex gap-[0.556vw] items-center">
@@ -10,7 +10,6 @@ import ClientCard from "../ClientCard";
 import SessionComments from "../SessionComments";
 import { useQuery } from "@tanstack/react-query";
 import api from "../../utils/api";
-import { useEffect } from "react";
 import SessionFiles from "../SessionFiles";
 import DownloadIcon from "../icons/DownloadIcon";
 import ShareIcon from "../icons/ShareIcon";
@@ -28,10 +27,6 @@ function SessionModal({ session }: { session: Session }) {
        .json<{ filename: string; size: number }[]>(),
  });

-  useEffect(() => {
-    console.log(data);
-  }, [data]);
-
  return (
    <div className="bg-[#FFFFFF] w-[49.722vw] rounded-[2.222vw]">
      <div className="w-full flex justify-center items-center h-[4.861vw] border-b-1 border-[#D6D6D6]">
@@ -66,7 +61,7 @@ function SessionModal({ session }: { session: Session }) {
                  Интерактивный стол:
                </span>
                <span className="caption-s font-medium">
-                  {session.server.name}
+                  {session.server?.name}
                </span>
              </p>
              <p className="flex gap-[0.556vw]">
@@ -1,8 +1,8 @@
 import api from "../utils/api";
 import Button from "../components/Button";
-import CloseIcon from "../components/icons/CloseIcon";
+// import CloseIcon from "../components/icons/CloseIcon";
 import SpinIcon from "../components/icons/SpinIcon";
-import MultySelect from "../components/MultySelect";
+// import MultySelect from "../components/MultySelect";
 import SearchInput from "../components/SearchInput";
 import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
@@ -52,9 +52,9 @@ function ClientsPage() {
    enabled: !!me,
  });

-  function reset() {
-    setSearch("");
-  }
+  // function reset() {
+  //   setSearch("");
+  // }

  return (
    <div className="flex flex-col gap-[1.667vw] h-full">
@@ -68,7 +68,7 @@ function ClientsPage() {
              onChange={(e) => setSearch(e.target.value)}
              setSearch={setSearch}
            />
-            <div className="flex gap-[0.556vw]">
+            {/* <div className="flex gap-[0.556vw]">
              <MultySelect
                data={[]}
                isGrid={false}
@@ -83,20 +83,20 @@ function ClientsPage() {
                resetTitle={"Все сценарии"}
                onSelect={() => console.log(1)}
              />
-            </div>
+            </div> */}
          </div>
          <div className="flex justify-between items-center">
            <p className="caption-m font-medium opacity-40">
              Найдено {count ? pluralize(count, "клиент") : "0 клиентов"}
            </p>
-            <button className="flex gap-[0.278vw] items-center" onClick={reset}>
+            {/* <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>
+            </button> */}
          </div>
        </div>
      </div>
@@ -1,3 +1,4 @@
+import { Manager } from "./Manager";
 import { Session } from "./Session";

 export interface Client {
@@ -9,4 +10,5 @@ export interface Client {
  createdAt: string;
  updatedAt: string;
  sessions: Session[];
+  managers: Manager[];
 }