107 lines
3.2 KiB
TypeScript
107 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { IconChevronLeft, IconSettings } from "@tabler/icons-react";
|
|
import { Box, Flex, Group, Stack, Text } from "@mantine/core";
|
|
import Boards from "@/app/deals/components/shared/Boards/Boards";
|
|
import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
|
|
import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
|
|
import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
|
|
import { useDrawersContext } from "@/drawers/DrawersContext";
|
|
import useIsMobile from "@/hooks/useIsMobile";
|
|
|
|
const Header = () => {
|
|
const { projects, setSelectedProjectId, refetchProjects, selectedProject } =
|
|
useProjectsContext();
|
|
const { refetchBoards } = useBoardsContext();
|
|
const { openDrawer } = useDrawersContext();
|
|
const isMobile = useIsMobile();
|
|
|
|
const getDesktopHeader = () => {
|
|
return (
|
|
<Flex
|
|
wrap={"nowrap"}
|
|
justify={"space-between"}>
|
|
<Boards />
|
|
<Box
|
|
flex={1}
|
|
style={{ borderBottom: "2px solid gray" }}
|
|
/>
|
|
<Flex
|
|
align={"center"}
|
|
style={{
|
|
borderBottom: "2px solid gray",
|
|
}}>
|
|
<ProjectSelect
|
|
data={projects}
|
|
value={selectedProject}
|
|
onChange={value =>
|
|
value && setSelectedProjectId(value.id)
|
|
}
|
|
style={{ minWidth: 200 }}
|
|
/>
|
|
</Flex>
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
const selectProjectId = async (projectId: number | null) => {
|
|
await refetchProjects();
|
|
setSelectedProjectId(projectId);
|
|
};
|
|
|
|
const openProjectsEditorDrawer = () => {
|
|
openDrawer({
|
|
key: "projectsEditorDrawer",
|
|
props: {
|
|
setSelectedProjectId: selectProjectId,
|
|
},
|
|
});
|
|
};
|
|
|
|
const openBoardsEditorDrawer = () => {
|
|
if (!selectedProject) return;
|
|
openDrawer({
|
|
key: "projectBoardsEditorDrawer",
|
|
props: {
|
|
project: selectedProject,
|
|
},
|
|
onClose: refetchBoards,
|
|
});
|
|
};
|
|
|
|
const getMobileHeader = () => {
|
|
return (
|
|
<>
|
|
<Group justify={"space-between"}>
|
|
<Box
|
|
p={"md"}
|
|
onClick={openProjectsEditorDrawer}>
|
|
<IconChevronLeft />
|
|
</Box>
|
|
<Text>{selectedProject?.name}</Text>
|
|
<Box
|
|
p={"md"}
|
|
onClick={openBoardsEditorDrawer}>
|
|
<IconSettings />
|
|
</Box>
|
|
</Group>
|
|
<Boards />
|
|
</>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<Group
|
|
justify={"flex-end"}
|
|
w={"100%"}>
|
|
<Stack
|
|
gap={0}
|
|
w={"100%"}>
|
|
{isMobile ? getMobileHeader() : getDesktopHeader()}
|
|
</Stack>
|
|
</Group>
|
|
);
|
|
};
|
|
|
|
export default Header;
|