Skip to content

Commit

Permalink
Merge pull request #720 from basedosdados/feat/user
Browse files Browse the repository at this point in the history 
Feat/user
  • Loading branch information
@AldemirLucas
AldemirLucas authored Oct 26, 2023
2 parents 1a6448a + baeb6e9 commit 869a15d
Show file tree
Hide file tree
Showing 10 changed files with 2,088 additions and 343 deletions.
1 change: 1 addition & 0 deletions next/components/atoms/GreenTab.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { Tab } from "@chakra-ui/tabs";
export default function GreenTab({ children, ...style }) {
return (
<Tab
fontFamily="ubuntu"
fontSize="18px"
fontWeight="400"
letterSpacing="0.1px"
Expand Down
4 changes: 2 additions & 2 deletions next/components/molecules/FormTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -404,8 +404,8 @@ export default function FormTable({
</Stack>

<Modal isCentered isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalOverlay/>
<ModalContent margin="24px">
<ModalHeader>Deletar table</ModalHeader>
<ModalBody>
Você tem certeza em deletar esse table? Uma vez deletada, todas as informações dele e de Columns serão excluídas em consequência.
Expand Down
309 changes: 278 additions & 31 deletions next/components/molecules/Menu.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import {
Box,
Stack,
HStack,
VStack,
Drawer,
DrawerOverlay,
DrawerContent,
useDisclosure,
Avatar,
Text,
Accordion,
AccordionItem,
Expand All @@ -15,16 +15,20 @@ import {
AccordionIcon,
useBoolean,
Divider,
Image,
Menu,
MenuButton,
MenuList,
MenuItem
} from "@chakra-ui/react";
import { useEffect, useRef, useState } from "react";
import { useRouter } from "next/router"
import { MenuDropdown } from "./MenuDropdown";
import cookies from "js-cookie";
import { MenuDropdown } from "./MenuDropdown";
import { useCheckMobile } from "../../hooks/useCheckMobile.hook"
import ControlledInput from "../atoms/ControlledInput";
import Link from "../atoms/Link";
import RoundedButton from "../atoms/RoundedButton";
import SectionText from "../atoms/SectionText";

import BDLogoProImage from "../../public/img/logos/bd_logo_pro";
import BDLogoEduImage from "../../public/img/logos/bd_logo_edu";
Expand All @@ -33,6 +37,7 @@ import FarBarsIcon from "../../public/img/icons/farBarsIcon";
import SearchIcon from "../../public/img/icons/searchIcon";
import CrossIcon from "../../public/img/icons/crossIcon";
import RedirectIcon from "../../public/img/icons/redirectIcon";
import SettingsIcon from "../../public/img/icons/settingsIcon";

function MenuDrawer({ isOpen, onClose, links }) {
return (
Expand Down Expand Up @@ -123,6 +128,266 @@ function MenuDrawer({ isOpen, onClose, links }) {
);
}

function MenuDrawerUser({ isOpen, onClose}) {
const router = useRouter()

const links = [
{name: "Perfil público", value: "profile"},
{name: "Conta", value: "account"},
{name: "Senha", value: "new_password"},
{name: "Planos e pagamento", value: "plans_and_payment"},
{name: "Acessos", value: "accesses"},
]

return (
<Drawer isOpen={isOpen} onClose={onClose}>
<DrawerOverlay backdropFilter="blur(2px)"/>
<DrawerContent padding="16px">
<BDLogoImage
widthImage="65px"
heightImage="30px"
marginBottom="24px"
onClick={() => window.open("/", "_self")}
/>

<Stack spacing={0} justifyContent="center" alignItems="center" padding="16px 0" marginBottom="24px">
<Box
width="48px"
height="48px"
borderRadius="50%"
overflow="hidden"
marginBottom="10px"
>
<Image
display={{ base: "flex", lg: "none" }}
alt=""
width="100%"
height="100%"
src="https://basedosdados-static.s3.us-east-2.amazonaws.com/equipe/sem_foto.png"
/>
</Box>
<Text
color="#252A32"
fontFamily="Ubuntu"
fontSize="14px"
fontWeight="400"
lineHeight="27px"
letterSpacing="0.3px"
>Dadinho</Text>
<Text
color="#6F6F6F"
fontFamily="Ubuntu"
fontSize="14px"
fontWeight="400"
lineHeight="27px"
letterSpacing="0.3px"
>[email protected]</Text>
</Stack>

<Accordion allowToggle width="100%" defaultIndex={0}>
<AccordionItem borderWidth="0 !important">
<AccordionButton
padding="16px 0"
_hover={{background: "none"}}
justifyContent="space-between"
>
<Stack spacing={0} flexDirection="row" gap="8px">
<SettingsIcon fill="#D0D0D0" width="16px" height="16px"/>
<Text
fontSize="16px"
fontFamily="Ubuntu"
fontWeight="400"
lineHeight="16px"
letterSpacing="0.2px"
color="#252A32"
>
Configurações
</Text>
</Stack>
<AccordionIcon />
</AccordionButton>
<AccordionPanel
display="flex"
flexDirection="column"
gridGap="10px"
padding="8px 0 0 24px"
>
{links.map((elm, index) => {
return (
<Link
key={index}
color="#575757"
fontSize="14px"
fontFamily="Ubuntu"
fontWeight="400"
lineHeight="27px"
letterSpacing="0.3px"
onClick={() => {
onClose()
router.push({pathname: "/user/dev", query: elm.value})}
}
>{elm.name}</Link>
)
})}
</AccordionPanel>
</AccordionItem>
</Accordion>
</DrawerContent>
</Drawer>
)
}

function MenuUser ({ userData, onOpen, onClose }) {
const timerRef = useRef()
const [isOpenMenu, setIsOpenMenu] = useState(false)

const btnMouseEnterEvent = () => {
setIsOpenMenu(true)
}
const btnMouseLeaveEvent = () => {
timerRef.current = setTimeout(() => {
setIsOpenMenu(false)
}, 100)
}
const menuListMouseEnterEvent = () => {
clearTimeout(timerRef.current)
timerRef.current = undefined
setIsOpenMenu(true)
}
const menuListMouseLeaveEvent = () => {
setIsOpenMenu(false)
}

if(useCheckMobile()) {
return (
<Box
cursor="pointer"
position="fixed"
right="24px"
height="40px"
width="40px"
borderRadius="50%"
overflow="hidden"
display={{ base: "flex", lg: "none" }}
onClick={() => onOpen()}
>
<Image
display={{ base: "flex", lg: "none" }}
alt=""
width="100%"
height="100%"
src={userData?.picture ? userData.picture : "https://basedosdados-static.s3.us-east-2.amazonaws.com/equipe/sem_foto.png"}
/>
</Box>
)
} else {
return (
<Menu
isOpen={isOpenMenu}
autoSelect={false}
placement="bottom"
>
<MenuButton
onClick={btnMouseEnterEvent}
onMouseLeave={btnMouseLeaveEvent}
>
<Box
height="40px"
width="40px"
borderRadius="50%"
overflow="hidden"
>
<Image
alt=""
width="100%"
height="100%"
src={userData?.picture ? userData.picture : "https://basedosdados-static.s3.us-east-2.amazonaws.com/equipe/sem_foto.png"}
/>
</Box>
</MenuButton>
<MenuList
width="260px"
borderWidth={0}
padding={0}
boxShadow="0 1.6px 16px 0 rgba(100, 96, 103, 0.16)"
onMouseEnter={menuListMouseEnterEvent}
onMouseLeave={menuListMouseLeaveEvent}
>
<MenuItem
display="flex"
flexDirection="column"
cursor="default"
width="100%"
textAlign="center"
alignItems="center"
padding="16px"
_hover={{ backgroundColor: "transparent"}}
>
<Box
height="48px"
width="48px"
borderRadius="50%"
overflow="hidden"
marginBottom="10px"
>
<Image
alt=""
width="100%"
height="100%"
display={{ base: "none", lg: "flex" }}
src={userData?.picture ? userData.picture : "https://basedosdados-static.s3.us-east-2.amazonaws.com/equipe/sem_foto.png"}
/>
</Box>
<Text
color="#252A32"
fontFamily="Ubuntu"
fontSize="12px"
fontWeight="400"
lineHeight="16px"
letterSpacing="0.3px"
>
Dadinho
</Text>
<Text
color="#6F6F6F"
fontFamily="Ubuntu"
fontSize="12px"
fontWeight="400"
lineHeight="16px"
letterSpacing="0.3px"
>
[email protected]
</Text>
</MenuItem>

<MenuItem
display="flex"
flexDirection="row"
alignItems="start"
gap="8px"
padding="16px"
_hover={{ backgroundColor: "transparent", opacity: "0.6" }}
onClick={() => window.open("/user/dev", "_self")}
>
<SettingsIcon fill="#D0D0D0" width="16px" height="16px"/>
<Text
color="#252A32"
fontFamily="Ubuntu"
fontSize="12px"
fontWeight="400"
lineHeight="16px"
letterSpacing="0.3px"
>
Configurações
</Text>
</MenuItem>
</MenuList>
</Menu>
)
}

}

function SearchInput ({ status }) {
const router = useRouter()
const { query } = router
Expand Down Expand Up @@ -321,20 +586,7 @@ function DesktopLinks({ links, position = false, path }) {
{!statusSearch &&
<HStack spacing={8} display={{ base: "none", lg: "flex" }}>
{userData ? (
<HStack spacing={5}>
<Avatar
bg="#2B8C4D"
name={userData?.firstName}
src={userData.picture}
/>
<Link
fontSize="14px"
textTransform="capitalize"
href={`/user/${userData.username}`}
>
{userData.username}
</Link>
</HStack>
<MenuUser />
) : (
<>
{/* <Link fontSize="15px" fontFamily="Ubuntu" fontWeight="400" letterSpacing="0.3px" href="/user/login">
Expand All @@ -344,7 +596,7 @@ function DesktopLinks({ links, position = false, path }) {
<RoundedButton height="35px" fontSize="15px" minWidth="110px">
Cadastrar
</RoundedButton>
</Link> */}
</Link>
</>
)}
</HStack>
Expand All @@ -353,10 +605,11 @@ function DesktopLinks({ links, position = false, path }) {
);
}

export default function Menu({}) {
export default function MenuNav({}) {
const router = useRouter()
const { route } = router
const menuDisclosure = useDisclosure();
const menuDisclosure = useDisclosure()
const menuUserMobile = useDisclosure()
const divRef = useRef()
const bannerRef = useRef()
const [isScrollDown, setIsScrollDown] = useState(false)
Expand Down Expand Up @@ -503,18 +756,12 @@ export default function Menu({}) {
/>
</Link>

<Avatar
bg="#2B8C4D"
color="#FFF"
position="fixed"
right="24px"
height="40px"
width="40px"
display={{ base: "flex", lg: "none" }}
src={userData?.picture}
name={userData?.username}
/>
<DesktopLinks links={links} position={isScrollDown} path={route}/>

{useCheckMobile() && userData &&
<MenuUser userData={userData} onOpen={menuUserMobile.onOpen} onClose={menuUserMobile.onClose}/>
}
<MenuDrawerUser isOpen={menuUserMobile.isOpen} onClose={menuUserMobile.onClose}/>
</HStack>
</Box>
</>
Expand Down
Loading

0 comments on commit 869a15d

Please sign in to comment.