From b44e7fc3e4fe51b2c0dc98f24eb73ee19e3f59ce Mon Sep 17 00:00:00 2001
From: aldemirLucas <aldemirLucas23@gmail.com>
Date: Sun, 22 Sep 2024 18:47:55 -0300
Subject: [PATCH 1/3] feat: add dropdown and tooltip in DatasetResource

---
 next/components/organisms/DatasetResource.js | 330 ++++++++++++++++---
 next/pages/quem-somos.js                     |   2 +-
 2 files changed, 277 insertions(+), 55 deletions(-)

diff --git a/next/components/organisms/DatasetResource.js b/next/components/organisms/DatasetResource.js
index d9c22ebc..bd381b22 100644
--- a/next/components/organisms/DatasetResource.js
+++ b/next/components/organisms/DatasetResource.js
@@ -1,18 +1,27 @@
 import {
   Stack,
-  VStack,
   Box,
   HStack,
   Divider,
-  Text
+  Text,
+  Tooltip,
+  Menu,
+  MenuButton,
+  MenuOptionGroup,
+  MenuList,
+  MenuItem,
+  MenuDivider,
+  useBreakpointValue
 } from "@chakra-ui/react";
-import { useEffect, useState } from "react";
+import { useRef, useEffect, useState } from "react";
 import { useRouter } from "next/router";
 
 import BdmTablePage from "./BdmTablePage";
 import RawDataSourcesPage from "./RawDataSourcesPage";
 import InformationRequestPage from "./InformationRequestPage";
 
+import ChevronIcon from "../../public/img/icons/chevronIcon";
+
 export default function DatasetResource({
   dataset
 }) {
@@ -21,6 +30,7 @@ export default function DatasetResource({
   const [tables, setTables] = useState([])
   const [rawDataSources, setRawDataSources] = useState([])
   const [informationRequests, setInformationRequests] = useState([])
+  const displayScreen = useBreakpointValue({ base: "mobile", lg: "desktop" })
 
   const pushQuery = (key, value) => {
     router.replace({
@@ -84,10 +94,25 @@ export default function DatasetResource({
     value,
     hasDivider = true
   }) {
-    if(choices.length < 1) return null
+    if(choices.length === 0) return null
+
+    const [isOverflow, setIsOverflow] = useState({})
+    const textRefs = useRef({})
+
+    useEffect(() => {
+      choices.forEach((elm, i) => {
+        const textElement = textRefs.current[i]
+        if (textElement) {
+          setIsOverflow((prev) => ({
+            ...prev,
+            [i]: textElement.scrollWidth > textElement.clientWidth,
+          }))
+        }
+      })
+    }, [choices])
 
     return (
-      <Box width={{base:"100%", lg:"272px"}}>
+      <Box width="272px">
         <Divider
           display={hasDivider ? "flex" : "none"}
           marginY="24px"
@@ -120,26 +145,45 @@ export default function DatasetResource({
                 backgroundColor={elm._id === value && "#2B8C4D"}
                 borderRadius="10px"
               />
-              <Text
-                textOverflow="ellipsis"
-                whiteSpace="nowrap"
-                overflow="hidden"
-                width="100%"
+              <Tooltip
+                label={elm.name || elm.number}
+                isDisabled={!isOverflow[i]}
+                hasArrow
+                padding="16px"
+                backgroundColor="#252A32"
+                boxSizing="border-box"
+                borderRadius="8px"
                 fontFamily="Roboto"
-                fontWeight="500"
+                fontWeight="400"
                 fontSize="14px"
                 lineHeight="20px"
-                color={elm._id === value ? "#2B8C4D" : "#71757A"}
-                backgroundColor={elm._id === value && "#F7F7F7"}
-                _hover={{
-                  backgroundColor:elm._id === value ? "#F7F7F7" :"#EEEEEE",
-                }}
-                borderRadius="8px"
-                padding="6px 8px"
-                onClick={() => onChange(elm._id)}
+                textAlign="center"
+                color="#FFFFFF"
+                placement="top"
+                maxWidth="100%"
               >
-                {elm.name || elm.number}
-              </Text>
+                <Text
+                  ref={(el) => (textRefs.current[i] = el)}
+                  textOverflow="ellipsis"
+                  whiteSpace="nowrap"
+                  overflow="hidden"
+                  width="100%"
+                  fontFamily="Roboto"
+                  fontWeight="500"
+                  fontSize="14px"
+                  lineHeight="20px"
+                  color={elm._id === value ? "#2B8C4D" : "#71757A"}
+                  backgroundColor={elm._id === value && "#F7F7F7"}
+                  _hover={{
+                    backgroundColor:elm._id === value ? "#F7F7F7" :"#EEEEEE",
+                  }}
+                  borderRadius="8px"
+                  padding="6px 8px"
+                  onClick={() => onChange(elm._id)}
+                >
+                  {elm.name || elm.number}
+                </Text>
+              </Tooltip>
             </HStack>
           ))}
         </Box>
@@ -147,6 +191,180 @@ export default function DatasetResource({
     )
   }
 
+  function SelectResource() {
+    const [widthScreen, setWidthScreen] = useState(0)
+
+    useEffect(() => {
+      const updateWidthScreen = () => {
+        setWidthScreen(window.innerWidth - 48)
+      }
+
+      updateWidthScreen()
+
+      window.addEventListener('resize', updateWidthScreen)
+
+      return () => {
+        window.removeEventListener('resize', updateWidthScreen)
+      }
+    }, [])
+
+    return (
+      <Menu>
+        <MenuButton
+          width="100%"
+          maxWidth="360px"
+          borderRadius="8px"
+          padding="14px 20px"
+          fontFamily="Roboto"
+          fontWeight="400"
+          fontSize="14px"
+          lineHeight="20px"
+          backgroundColor="#EEEEEE"
+          color="#464A51"
+          textAlign="start"
+        >
+          <Text
+            display="flex"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            Selecione uma tabela ou fonte original
+            <ChevronIcon
+              marginLeft="auto"
+              transform="rotate(90deg)"
+            />
+          </Text>
+        </MenuButton>
+
+        <MenuList
+          minWidth={widthScreen}
+          maxWidth={widthScreen}
+          borderWidth={0}
+          padding={0}
+          zIndex={100}
+          boxShadow="0 1.6px 16px 0 rgba(100, 96, 103, 0.16)"
+        >
+          {tables.length > 0 &&
+            <MenuOptionGroup
+              title="Tabela tratada"
+              fontFamily="Roboto"
+              fontWeight="400"
+              fontSize="16px"
+              lineHeight="24px"
+              color="#71757A"
+              margin="0"
+              padding="24px 20px 8px"
+            >
+              {tables.map((elm, i) => {return (
+                <MenuItem
+                  key={i}
+                  width="100%"
+                  whiteSpace="normal"
+                  overflow="hidden"
+                  textOverflow="ellipsis"
+                  wordBreak="break-all"
+                  fontFamily="Roboto"
+                  fontWeight="500"
+                  fontSize="14px"
+                  lineHeight="20px"
+                  color="#252A32"
+                  padding="16px 20px"
+                  _hover={{ backgroundColor: "transparent"}}
+                  _focus={{ backgroundColor: "transparent"}}
+                  _active={{ backgroundColor: "transparent" }}
+                  _focusVisible={{ backgroundColor: "transparent" }}
+                  onClick={() => pushQuery("table", elm._id)}
+                  >
+                  {elm.name || elm.number}
+                </MenuItem>
+              )})}
+            </MenuOptionGroup>
+          }
+
+          {rawDataSources.length > 0 &&
+            <>
+              <MenuDivider margin="0" borderWidth="2px" borderColor="#DEDFE0"/>
+              <MenuOptionGroup
+                title="Fonte original"
+                fontFamily="Roboto"
+                fontWeight="400"
+                fontSize="16px"
+                lineHeight="24px"
+                color="#71757A"
+                margin="0"
+                padding="24px 20px 8px"
+              >
+                {rawDataSources.map((elm, i) => {return (
+                  <MenuItem
+                    key={i}
+                    width="100%"
+                    whiteSpace="normal"
+                    overflow="hidden"
+                    textOverflow="ellipsis"
+                    wordBreak="break-all"
+                    fontFamily="Roboto"
+                    fontWeight="500"
+                    fontSize="14px"
+                    lineHeight="20px"
+                    color="#252A32"
+                    padding="16px 20px"
+                    _hover={{ backgroundColor: "transparent"}}
+                    _focus={{ backgroundColor: "transparent"}}
+                    _active={{ backgroundColor: "transparent" }}
+                    _focusVisible={{ backgroundColor: "transparent" }}
+                    onClick={() => pushQuery("raw_data_source", elm._id)}
+                  >
+                    {elm.name || elm.number}
+                  </MenuItem>
+                )})}
+              </MenuOptionGroup>
+            </>
+          }
+
+          {informationRequests.length > 0 &&
+            <>
+              <MenuDivider margin="0" borderWidth="2px" borderColor="#DEDFE0"/>
+              <MenuOptionGroup
+                title="Pedidos LAI"
+                fontFamily="Roboto"
+                fontWeight="400"
+                fontSize="16px"
+                lineHeight="24px"
+                color="#71757A"
+                margin="0"
+                padding="24px 20px 8px"
+              >
+                {informationRequests.map((elm, i) => {return (
+                  <MenuItem
+                    key={i}
+                    width="100%"
+                    whiteSpace="normal"
+                    overflow="hidden"
+                    textOverflow="ellipsis"
+                    wordBreak="break-all"
+                    fontFamily="Roboto"
+                    fontWeight="500"
+                    fontSize="14px"
+                    lineHeight="20px"
+                    color="#252A32"
+                    padding="16px 20px"
+                    _hover={{ backgroundColor: "transparent"}}
+                    _focus={{ backgroundColor: "transparent"}}
+                    _active={{ backgroundColor: "transparent" }}
+                    _focusVisible={{ backgroundColor: "transparent" }}
+                    onClick={() => pushQuery("information_request", elm._id)}
+                  >
+                    {elm.name || elm.number}
+                  </MenuItem>
+                )})}
+              </MenuOptionGroup>
+            </>
+          }
+        </MenuList>
+      </Menu>
+    )
+  }
+
   return (
     <Stack
       paddingTop="32px"
@@ -155,41 +373,45 @@ export default function DatasetResource({
       spacing={0}
       height="100%"
     >
-      <Stack
-        minWidth={{base: "100%", lg: "296px"}}
-        maxWidth={{base: "100%", lg: "296px"}}
-        spacing={0}
-      >
-        <ContentFilter
-          fieldName="Tabelas tratadas"
-          choices={tables}
-          value={query.table}
-          onChange={(id) => {
-            pushQuery("table", id)
-          }}
-          hasDivider={false}
-        />
+      {displayScreen === "desktop" ? 
+        <Stack
+          minWidth={{base: "100%", lg: "296px"}}
+          maxWidth={{base: "100%", lg: "296px"}}
+          spacing={0}
+        >
+          <ContentFilter
+            fieldName="Tabelas tratadas"
+            choices={tables}
+            value={query.table}
+            onChange={(id) => {
+              pushQuery("table", id)
+            }}
+            hasDivider={false}
+          />
 
-        <ContentFilter
-          fieldName="Fontes originais"
-          choices={rawDataSources}
-          value={query.raw_data_source}
-          onChange={(id) => {
-            pushQuery("raw_data_source", id)
-          }}
-          hasDivider={tables.length > 0 ? true : false}
-        />
+          <ContentFilter
+            fieldName="Fontes originais"
+            choices={rawDataSources}
+            value={query.raw_data_source}
+            onChange={(id) => {
+              pushQuery("raw_data_source", id)
+            }}
+            hasDivider={tables.length > 0 ? true : false}
+          />
 
-        <ContentFilter
-          fieldName="Pedidos LAI"
-          choices={informationRequests}
-          value={query.information_request}
-          onChange={(id) => {
-            pushQuery("information_request", id)
-          }}
-          hasDivider={tables.length > 0 || rawDataSources.length > 0 ? true : false}
-        />
-      </Stack>
+          <ContentFilter
+            fieldName="Pedidos LAI"
+            choices={informationRequests}
+            value={query.information_request}
+            onChange={(id) => {
+              pushQuery("information_request", id)
+            }}
+            hasDivider={tables.length > 0 || rawDataSources.length > 0 ? true : false}
+          />
+        </Stack>
+      :
+        <SelectResource />
+      }
 
       <SwitchResource route={query}/>
     </Stack>
diff --git a/next/pages/quem-somos.js b/next/pages/quem-somos.js
index 840a6216..f37d3b9e 100755
--- a/next/pages/quem-somos.js
+++ b/next/pages/quem-somos.js
@@ -712,7 +712,7 @@ export default function QuemSomos({ data }) {
           Uma equipe colaborativa
         </Display>
 
-        {data.length > 1 ?
+        {data.length > 0 ?
           <Stack
             position="relative"
             gridGap="96px"

From a872e5cf05396d7e5a5cba0d5bfedb8e40147733 Mon Sep 17 00:00:00 2001
From: aldemirLucas <aldemirLucas23@gmail.com>
Date: Mon, 23 Sep 2024 12:20:06 -0300
Subject: [PATCH 2/3] feat: final adjustments for feature 936

---
 next/components/atoms/ObservationLevelTable.js | 1 +
 next/components/organisms/BdmTablePage.js      | 4 ++--
 next/components/organisms/DatasetResource.js   | 6 ++++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/next/components/atoms/ObservationLevelTable.js b/next/components/atoms/ObservationLevelTable.js
index fe3d365d..97c271fe 100644
--- a/next/components/atoms/ObservationLevelTable.js
+++ b/next/components/atoms/ObservationLevelTable.js
@@ -114,6 +114,7 @@ export default function ObservationLevel({ resource }) {
                 borderColor="#DEDFE0"
                 textTransform="none"
                 letterSpacing="inherit"
+                whiteSpace="break-spaces"
               >
                 {elm[1]}
               </Td>
diff --git a/next/components/organisms/BdmTablePage.js b/next/components/organisms/BdmTablePage.js
index f85cae58..a2a9374c 100644
--- a/next/components/organisms/BdmTablePage.js
+++ b/next/components/organisms/BdmTablePage.js
@@ -246,10 +246,10 @@ export default function BdmTablePage({ id }) {
           fontSize="24px"
           lineHeight="36px"
           color="#252A32"
-          width="fit-content"
+          width={{base: "100%", lg:"fit-content"}}
           overflow="hidden"
           textOverflow="ellipsis"
-          whiteSpace="nowrap"
+          whiteSpace={{base: "normal", lg:"nowrap"}}
         >
           {resource?.name}
         </Text>
diff --git a/next/components/organisms/DatasetResource.js b/next/components/organisms/DatasetResource.js
index bd381b22..6628d91c 100644
--- a/next/components/organisms/DatasetResource.js
+++ b/next/components/organisms/DatasetResource.js
@@ -94,11 +94,11 @@ export default function DatasetResource({
     value,
     hasDivider = true
   }) {
-    if(choices.length === 0) return null
-
     const [isOverflow, setIsOverflow] = useState({})
     const textRefs = useRef({})
 
+    if(choices.length === 0) return null
+
     useEffect(() => {
       choices.forEach((elm, i) => {
         const textElement = textRefs.current[i]
@@ -239,6 +239,8 @@ export default function DatasetResource({
         <MenuList
           minWidth={widthScreen}
           maxWidth={widthScreen}
+          maxHeight="420px"
+          overflowY="auto"
           borderWidth={0}
           padding={0}
           zIndex={100}

From 985197bcf136719adeebe9e021ee82a17c95111d Mon Sep 17 00:00:00 2001
From: aldemirLucas <aldemirLucas23@gmail.com>
Date: Mon, 23 Sep 2024 15:18:32 -0300
Subject: [PATCH 3/3] fix: ajust plural text and footer

---
 next/components/molecules/Footer.js          | 2 +-
 next/components/organisms/DatasetResource.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/next/components/molecules/Footer.js b/next/components/molecules/Footer.js
index 6b1a8613..b73156d5 100644
--- a/next/components/molecules/Footer.js
+++ b/next/components/molecules/Footer.js
@@ -102,7 +102,7 @@ export default function Footer({ template, ocult = false }) {
           gridGap={{base: "8px", lg: "40px"}}
           padding={{base: "24px", lg: "0"}}
         >
-          <TextFooterSimple textAlign="center">
+          <TextFooterSimple >
             ® 2024 Base dos Dados
           </TextFooterSimple>
           <TextFooterSimple as="a" href="/termos-e-privacidade?section=terms" _hover={{ color: "#252A32" }}>
diff --git a/next/components/organisms/DatasetResource.js b/next/components/organisms/DatasetResource.js
index 6628d91c..4a0fe163 100644
--- a/next/components/organisms/DatasetResource.js
+++ b/next/components/organisms/DatasetResource.js
@@ -248,7 +248,7 @@ export default function DatasetResource({
         >
           {tables.length > 0 &&
             <MenuOptionGroup
-              title="Tabela tratada"
+              title="Tabelas tratadas"
               fontFamily="Roboto"
               fontWeight="400"
               fontSize="16px"
@@ -287,7 +287,7 @@ export default function DatasetResource({
             <>
               <MenuDivider margin="0" borderWidth="2px" borderColor="#DEDFE0"/>
               <MenuOptionGroup
-                title="Fonte original"
+                title="Fontes originais"
                 fontFamily="Roboto"
                 fontWeight="400"
                 fontSize="16px"