diff --git a/src/components/ManagerSelect.tsx b/src/components/ManagerSelect.tsx index 8e1ffe1..918f71b 100644 --- a/src/components/ManagerSelect.tsx +++ b/src/components/ManagerSelect.tsx @@ -5,6 +5,7 @@ import clsx from "clsx"; import CheckIcon from "./icons/CheckIcon"; import { useClickAway } from "@uidotdev/usehooks"; import { AnimatePresence, motion } from "motion/react"; +import { getPositionAbove } from "../utils/getPositionAbove"; function ManagerSelect({ placeholder, @@ -21,19 +22,15 @@ function ManagerSelect({ const selectRef = useClickAway(() => setIsOpen(false)); useEffect(() => { - const rect = selectRef.current?.getBoundingClientRect(); - if (rect) { - setPosition(rect.top > window.innerHeight / 2 ? "top" : "bottom"); - } + if (!isOpen || !selectRef.current) return; + + setPosition(getPositionAbove(selectRef) ? "top" : "bottom"); }, [isOpen, selectRef]); useEffect(() => { const handleScroll = () => { if (isOpen) { - const rect = selectRef.current?.getBoundingClientRect(); - if (rect) { - setPosition(rect.top > window.innerHeight / 2 ? "top" : "bottom"); - } + setPosition(getPositionAbove(selectRef) ? "top" : "bottom"); } }; diff --git a/src/components/ProjectSelector.tsx b/src/components/ProjectSelector.tsx index 889d8ae..fc6ff96 100644 --- a/src/components/ProjectSelector.tsx +++ b/src/components/ProjectSelector.tsx @@ -1,10 +1,12 @@ import { useEffect, useState } from "react"; import { App } from "../types/App"; -import ChevronDownIcon from "./icons/ChevronDownIcon"; import CheckIcon from "./icons/CheckIcon"; import { useClickAway } from "@uidotdev/usehooks"; import { AnimatePresence, motion } from "motion/react"; import clsx from "clsx"; +import FlashIcon from "./icons/FlashIcon"; +import SortIcon from "./icons/SortIcon"; +import { getPositionAbove } from "../utils/getPositionAbove"; interface Props { projects: App[]; @@ -24,19 +26,13 @@ function ProjectSelector({ const selectRef = useClickAway(() => setIsOpen(false)); useEffect(() => { - const rect = selectRef.current?.getBoundingClientRect(); - if (rect) { - setPosition(rect.top > window.innerHeight / 2 ? "top" : "bottom"); - } + setPosition(getPositionAbove(selectRef) ? "top" : "bottom"); }, [isOpen, selectRef]); useEffect(() => { const handleScroll = () => { if (isOpen) { - const rect = selectRef.current?.getBoundingClientRect(); - if (rect) { - setPosition(rect.top > window.innerHeight / 2 ? "top" : "bottom"); - } + setPosition(getPositionAbove(selectRef) ? "top" : "bottom"); } }; @@ -61,13 +57,20 @@ function ProjectSelector({
Проект
-
{selectedProject?.name}
- - - +
+ app_image + + + +
+ {isOpen && (
{project.name}
{activeProject && project.name === activeProject.name && ( - + + + )}
diff --git a/src/components/modals/CreateSessionModal.tsx b/src/components/modals/CreateSessionModal.tsx index 79ded1b..290fbdc 100644 --- a/src/components/modals/CreateSessionModal.tsx +++ b/src/components/modals/CreateSessionModal.tsx @@ -39,7 +39,7 @@ export default function CreateSessionModal({ targetServerId, client }: Props) { const { data: managers } = useQuery({ queryKey: ["managers"], - queryFn: () => api.get("managers").json(), + queryFn: () => api.get("users").json(), }); const targetServer = targetServerId @@ -176,6 +176,10 @@ export default function CreateSessionModal({ targetServerId, client }: Props) { selectedServer, ]); + useEffect(() => { + console.log(managers); + }, [managers]); + const ref = useRef(null); return ( @@ -246,20 +250,26 @@ export default function CreateSessionModal({ targetServerId, client }: Props) {

Выберите параметры сеанса

- + {selectedServer && selectedServer?.appsToServers && selectedServer.appsToServers?.length > 0 && ( - app)} - selectedProject={selectedApp} - setSelectedProject={setSelectedApp} - /> + <> + + app)} + selectedProject={selectedApp} + setSelectedProject={setSelectedApp} + /> + )}
diff --git a/src/utils/getPositionAbove.ts b/src/utils/getPositionAbove.ts new file mode 100644 index 0000000..e1d35ed --- /dev/null +++ b/src/utils/getPositionAbove.ts @@ -0,0 +1,11 @@ +export function getPositionAbove(selectRef: React.RefObject) { + const rect = selectRef.current.getBoundingClientRect(); + const dropdownHeight = 200; + const margin = 8; + + const spaceBelow = window.innerHeight - rect.bottom - margin; + + const spaceAbove = rect.top - margin; + + return spaceBelow < dropdownHeight && spaceAbove >= dropdownHeight; +}