diff --git a/src/components/ManagerSelect.tsx b/src/components/ManagerSelect.tsx new file mode 100644 index 0000000..71eff34 --- /dev/null +++ b/src/components/ManagerSelect.tsx @@ -0,0 +1,114 @@ +import { useEffect, useState } from "react"; +import { Manager } from "../types/Manager"; +import SortIcon from "./icons/SortIcon"; +import clsx from "clsx"; +import CheckIcon from "./icons/CheckIcon"; +import { useClickAway } from "@uidotdev/usehooks"; +import { AnimatePresence, motion } from "motion/react"; + +function ManagerSelect({ + placeholder, + data, +}: { + placeholder: string; + data: Manager[]; +}) { + const [isOpen, setIsOpen] = useState(false); + const [selectedManager, setSelectedManager] = useState( + data[0] || null + ); + const [position, setPosition] = useState<"top" | "bottom">("bottom"); + const selectRef = useClickAway(() => setIsOpen(false)); + + useEffect(() => { + const rect = selectRef.current?.getBoundingClientRect(); + if (rect) { + setPosition(rect.top > window.innerHeight / 2 ? "top" : "bottom"); + } + }, [isOpen, selectRef]); + + useEffect(() => { + const handleScroll = () => { + if (isOpen) { + const rect = selectRef.current?.getBoundingClientRect(); + if (rect) { + setPosition(rect.top > window.innerHeight / 2 ? "top" : "bottom"); + } + } + }; + + window.addEventListener("scroll", handleScroll, true); + return () => window.removeEventListener("scroll", handleScroll, true); + }, [isOpen, selectRef]); + + const handleToggle = () => { + setIsOpen(!isOpen); + }; + + return ( +
+
+
+ {placeholder} +
+
+
+
+ {selectedManager?.fullname || data[0].fullname} +
+
+
+ + + + + {isOpen && ( + +
+ {data.map((item) => ( +
{ + e.stopPropagation(); + setSelectedManager(item); + setIsOpen(false); + }} + > +
+ {selectedManager?.id === item.id && } +
+
+
{item.fullname}
+
+ ))} +
+ + )} + +
+ ); +} + +export default ManagerSelect; diff --git a/src/components/Selector.tsx b/src/components/Selector.tsx deleted file mode 100644 index c61c08f..0000000 --- a/src/components/Selector.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function Selector() { - return
Selector
; -} diff --git a/src/components/icons/SortIcon.tsx b/src/components/icons/SortIcon.tsx new file mode 100644 index 0000000..6560e79 --- /dev/null +++ b/src/components/icons/SortIcon.tsx @@ -0,0 +1,16 @@ +function SortIcon() { + return ( + + + + ); +} + +export default SortIcon; diff --git a/src/components/modals/CreateSessionModal.tsx b/src/components/modals/CreateSessionModal.tsx index 8e5ffe8..0c59ce5 100644 --- a/src/components/modals/CreateSessionModal.tsx +++ b/src/components/modals/CreateSessionModal.tsx @@ -13,6 +13,7 @@ import ProjectSelector from "../ProjectSelector.tsx"; import { useQueryClient, useMutation, useQuery } from "@tanstack/react-query"; import { AnimatePresence, motion } from "motion/react"; import useClientSearch from "../../hooks/useClientSearch.tsx"; +import ManagerSelect from "../ManagerSelect.tsx"; interface Props { targetServerId: string | null; @@ -207,6 +208,65 @@ export default function CreateSessionModal({ targetServerId, client }: Props) { required isLoading={isLoading} /> + {isFullPhone && ( <> @@ -258,6 +318,7 @@ export default function CreateSessionModal({ targetServerId, client }: Props) { /> )}
+ {isSessionExists && (
+

Последние сеансы