upd

2023-10-16 12:23:31 +05:00
parent 826ac1f621
commit 4c83933741
8 changed files with 435 additions and 95 deletions
@@ -1,7 +1,15 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { useEffect, useState } from "react";
+import SelectUser from "./SelectUser";
 import MoreIcon from "./icons/MoreIcon";
+import api from "../utils/api";

 interface CardProps {
+  companyId: string;
+  buildId: string;
+  scheduledSessionId: string;
+  scheduleSessionStartAt: string;
  client: {
    name: string;
    phone: string;
@@ -12,57 +20,106 @@ interface CardProps {
    name: string;
    avatar: string;
  };
+  managers: any[];
+  handleSelect: (scheduledSessionId: string, managerId: string) => void;
 }

-function Card({ client, manager }: CardProps) {
+function Card({
+  companyId,
+  buildId,
+  scheduledSessionId,
+  scheduleSessionStartAt,
+  client,
+  manager,
+  managers,
+  handleSelect,
+}: CardProps) {
+  const [isShow, setIsShow] = useState<boolean>(false);
+  const [availableManagers, setAvailableManagers] = useState<any[]>();
+
+  async function getAvailableManagers() {
+    const result: any[] = await api
+      .get(
+        `companies/${companyId}/builds/${buildId}/scheduled_sessions/${scheduledSessionId}/availableManagers?startAt=${scheduleSessionStartAt}`
+      )
+      .json();
+
+    const filteredManagers = managers.filter(
+      (manager) => !result.includes(manager.id)
+    );
+
+    setAvailableManagers(filteredManagers);
+  }
+
+  useEffect(() => {
+    if (!isShow) return;
+    getAvailableManagers();
+  }, [isShow]);
+
  return (
-    <div className="w-[264px] h-[128px] px-3 py-2 bg-white border-r border-b border-[#DAE0E5] flex flex-col gap-2">
-      <div className="flex justify-between">
-        <p className="text-sm font-semibold">{client.name}</p>
-        {manager ? (
-          <div className="bg-[#DAF2E4] rounded-full px-2 h-[20px] flex items-center gap-1">
-            <div className="w-1 h-1 rounded-full bg-[#27AE60]"></div>
-            <p className="text-[10px] font-semibold text-[#27AE60] pt-0.5">
-              Сеанс начат
-            </p>
-          </div>
-        ) : (
-          <div className="bg-[#F2DADA] rounded-full px-2 h-[20px] flex items-center gap-1">
-            <div className="w-1 h-1 rounded-full bg-[#EB5757]"></div>
-            <p className="text-[10px] font-semibold text-[#EB5757] pt-0.5">
-              Нет менеджена
-            </p>
-          </div>
-        )}
-      </div>
-      <div className="border-b border-[#DAE0E5] pb-2">
-        <p className="text-xs text-[#77828C] leading-tight">{client.phone}</p>
-        <p className="text-xs text-[#77828C] leading-tight">{client.email}</p>
-      </div>
-      <div className="flex justify-between items-center py-1">
-        <div className="flex items-center gap-2">
+    <div className="relative flex flex-col gap-2">
+      <div className="w-[264px] h-[128px] px-3 py-2 bg-white border-r border-b border-[#DAE0E5] flex flex-col gap-2">
+        <div className="flex justify-between">
+          <p className="text-sm font-semibold">{client.name}</p>
          {manager ? (
-            <div className="relative">
-              <img
-                src={manager.avatar}
-                alt=""
-                className="w-6 h-6 rounded-full"
-              />
-              <div className="absolute right-0 bottom-0 bg-[#27AE60] border border-white rounded-full w-2 h-2"></div>
+            <div className="bg-[#DAF2E4] rounded-full px-2 h-[20px] flex items-center gap-1">
+              <div className="w-1 h-1 rounded-full bg-[#27AE60]"></div>
+              <p className="text-[10px] font-semibold text-[#27AE60] pt-0.5">
+                Сеанс начат
+              </p>
            </div>
          ) : (
-            <div className="w-6 h-6 bg-[#ccc] rounded-full"></div>
+            <div className="bg-[#F2DADA] rounded-full px-2 h-[20px] flex items-center gap-1">
+              <div className="w-1 h-1 rounded-full bg-[#EB5757]"></div>
+              <p className="text-[10px] font-semibold text-[#EB5757] pt-0.5">
+                Нет менеджера
+              </p>
+            </div>
          )}
-          <p className="text-xs font-semibold">
-            {manager ? manager.name : "Не назначен"}
-          </p>
        </div>
-        <button
-          onClick={() => alert("Чё тыкаешь? В разработке еще!!")}
-          className="p-1 text-[#77828C] hover:bg-neutral-100 rounded-lg"
-        >
-          <MoreIcon />
-        </button>
+        <div className="border-b border-[#DAE0E5] pb-2">
+          <p className="text-xs text-[#77828C] leading-tight">{client.phone}</p>
+          <p className="text-xs text-[#77828C] leading-tight">{client.email}</p>
+        </div>
+        <div className="flex justify-between items-center py-1">
+          <div className=" flex items-center gap-2">
+            {manager ? (
+              <div className="relative">
+                <img
+                  src={manager.avatar}
+                  alt=""
+                  className="w-6 h-6 rounded-full"
+                />
+                {/* <div className="absolute right-0 bottom-0 bg-[#27AE60] border border-white rounded-full w-2 h-2"></div> */}
+              </div>
+            ) : (
+              <div className="w-6 h-6 bg-[#ccc] rounded-full"></div>
+            )}
+            <p className="text-xs font-semibold">
+              {manager ? manager.name : "Не назначен"}
+            </p>
+          </div>
+          <button
+            onClick={() => setIsShow(!isShow)}
+            className="p-1 text-[#77828C] hover:bg-neutral-100 rounded-lg"
+          >
+            <MoreIcon />
+          </button>
+        </div>
+      </div>
+
+      <div className="absolute bottom-[2px] left-[272px] z-10">
+        {availableManagers?.length && (
+          <SelectUser
+            shown={isShow}
+            selectedManagerId={manager?.id}
+            managers={availableManagers}
+            handleClick={(managerId) => (
+              handleSelect(scheduledSessionId, managerId), setIsShow(false)
+            )}
+            handleShown={() => setIsShow((prev) => !prev)}
+          />
+        )}
      </div>
    </div>
  );