Merge pull request #982 from basedosdados/development

Development
basedosdados · Oct 22, 2024 · c6efc60 · c6efc60
2 parents 160f761 + 6ef0e62
commit c6efc60
Show file tree

Hide file tree

Showing 105 changed files with 6,448 additions and 1,816 deletions.
diff --git a/next/components/atoms/ControlledInput.js b/next/components/atoms/ControlledInput.js
@@ -7,7 +7,7 @@ import {
 } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 
-export default function ControlledInput({
+export function ControlledInput({
   placeholder,
   value,
   onChange,

diff --git a/next/components/atoms/FilterAccordion.js b/next/components/atoms/FilterAccordion.js
@@ -11,10 +11,11 @@ import {
   Skeleton
 } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
+import { useTranslation } from 'next-i18next';
 import Checkbox from "../atoms/Checkbox";
-import { ControlledInput, ControlledInputSimple} from "./ControlledInput";
+import { ControlledInput, ControlledInputSimple } from "./ControlledInput";
 import SectionText from "./SectionText";
-import SearchIcon from "../../public/img/icons/searchIcon"
+import SearchIcon from "../../public/img/icons/searchIcon";
 
 export function BaseFilterAccordion({
   fieldName,
@@ -26,6 +27,8 @@ export function BaseFilterAccordion({
   alwaysOpen = false,
   isHovering = true
 }) {
+  const { t } = useTranslation('common');
+
   return (
     <Accordion allowToggle width="100%">
       <AccordionItem border="0px">
@@ -85,6 +88,7 @@ export function CheckboxFilterAccordion({
   canSearch = false,
   isLoading
 }) {
+  const { t } = useTranslation('common');
   const [options , setOptions] = useState([])
   const [search, setSearch] = useState("");
   const [inputFocus, setInputFocus] = useState(false)
@@ -130,7 +134,7 @@ export function CheckboxFilterAccordion({
                 onChange={setSearch}
                 inputFocus={inputFocus}
                 changeInputFocus={setInputFocus}
-                placeholder="Pesquisar"
+                placeholder={t('search')}
                 fill="#464A51"
                 icon={
                   <SearchIcon
@@ -211,6 +215,7 @@ export function RangeFilterAccordion({
   maxValue = null,
   minValue = null,
 }) {
+  const { t } = useTranslation('common');
   const [min, setMin] = useState();
   const [max, setMax] = useState();
   const [error, setError] = useState(false);
@@ -245,7 +250,7 @@ export function RangeFilterAccordion({
             value={min}
             onChange={setMin}
             width="100%"
-            placeholder="Min"
+            placeholder={t('min')}
             inputStyle={{
               height: "40px",
               fontSize: "14px",
@@ -258,7 +263,7 @@ export function RangeFilterAccordion({
             value={max}
             onChange={setMax}
             width="100%"
-            placeholder="Max"
+            placeholder={t('max')}
             inputStyle={{
               height: "40px",
               fontSize: "14px",
@@ -343,4 +348,4 @@ export function SimpleFilterAccordion({
       </AccordionItem>
     </Accordion>
   );
-}
+}
diff --git a/next/components/atoms/HelpWidget.js b/next/components/atoms/HelpWidget.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import {
   Menu,
   MenuButton,
@@ -11,26 +12,51 @@ import HelpIcon from "../../public/img/icons/helpIcon"
 export default function HelpWidget({options, tooltip}) {
   const optionsRender = (options) => {
     return options.map((option, i) => {
-      if(option.name){ return (
-        <MenuItem
-          key={i}
-          letterSpacing="0.1px"
-          lineHeight="18px"
-          fontWeight="400"
-          fontSize="12px"
-          fontFamily="Roboto"
-          color="#252A32"
-          backgroundColor="#FFF"
-          padding="0 16px 10px"
-          _focus={{backgroundColor: "transparent"}}
-          _hover={{backgroundColor: "transparent", opacity: "0.7"}}
-          onClick={() => window.open(option.url, "_blank")}
-        >
-          {option.name}
-        </MenuItem>)
-      } else { return <MenuDivider key={i} margin="0 0 14px"/> }
-    })
-  }
+      if(option.name){ 
+        const menuItemProps = {
+          key: i,
+          letterSpacing: "0.1px",
+          lineHeight: "18px",
+          fontWeight: "400",
+          fontSize: "12px",
+          fontFamily: "Roboto",
+          color: "#252A32",
+          backgroundColor: "#FFF",
+          padding: "0 16px 10px",
+          _focus: {backgroundColor: "transparent"},
+          _hover: {backgroundColor: "transparent", opacity: "0.7"},
+        };
+
+        if (option.url) {
+          return (
+            <MenuItem
+              {...menuItemProps}
+              onClick={() => window.open(option.url, "_blank")}
+            >
+              {option.name}
+            </MenuItem>
+          );
+        } else if (option.component) {
+          return (
+            <MenuItem {...menuItemProps} as="div">
+              {React.cloneElement(option.component, {
+                style: {
+                  letterSpacing: "0.1px",
+                  lineHeight: "18px",
+                  fontWeight: "400",
+                  fontSize: "12px",
+                  fontFamily: "Roboto",
+                  color: "#252A32",
+                }
+              })}
+            </MenuItem>
+          );
+        }
+      } else { 
+        return <MenuDivider key={i} margin="0 0 14px"/>; 
+      }
+    });
+  };
 
   return (
     <Menu>

diff --git a/next/components/atoms/Link.js b/next/components/atoms/Link.js
@@ -1,4 +1,6 @@
-import { Link as ChakraLink } from "@chakra-ui/react";
+import { Text } from "@chakra-ui/react";
+import NextLink from 'next/link';
+import { useRouter } from 'next/router';
 
 export default function Link({
   children,
@@ -8,19 +10,27 @@ export default function Link({
   fontWeight = "700",
   ...props
 }) {
+  const { locale } = useRouter();
+
   return (
-    <ChakraLink
-      target={target}
-      href={href}
-      fontFamily="Lato"
-      fontSize="14px"
-      letterSpacing="0.5px"
-      color={color}
-      _hover={{ textDecoration: "none", opacity:"0.6" }}
-      fontWeight={fontWeight}
-      {...props}
-    >
-      {children}
-    </ChakraLink>
+    <NextLink href={href || '#'} locale={locale} passHref legacyBehavior>
+      <Text
+        as="span"
+        display="flex"
+        flexDirection="row"
+        alignItems="center"
+        fontFamily="Roboto"
+        cursor="pointer"
+        fontSize="14px"
+        lineHeight="20px"
+        fontWeight={fontWeight}
+        color={color}
+        target={target}
+        {...props}
+      >
+        {children}
+      </Text>
+    </NextLink>
   );
 }
+
diff --git a/next/components/atoms/ObservationLevelTable.js b/next/components/atoms/ObservationLevelTable.js
@@ -7,9 +7,16 @@ import {
   Th,
   Td,
 } from "@chakra-ui/react";
+import { useTranslation } from 'next-i18next';
+import { useRouter } from 'next/router';
+import { capitalize } from "lodash";
 
 export default function ObservationLevel({ resource }) {
-  const headers = ["Entidade","Colunas Correspondentes"]
+  const { t } = useTranslation('dataset');
+  const router = useRouter();
+  const { locale } = router;
+
+  const headers = [t('observationLevelTable.entityHeader'), t('observationLevelTable.columnsHeader')];
 
   let array = []
   const keys = Object.keys(resource?.observationLevels)
@@ -18,8 +25,9 @@ export default function ObservationLevel({ resource }) {
     const value = resource?.observationLevels[elm]
 
     const valueEntity = () => {
+      if(value.entity[`name${capitalize(locale)}`]) return value.entity[`name${capitalize(locale)}`]
       if(value.entity.name) return value.entity.name
-      return "Não informado"
+      return t('observationLevelTable.notProvided')
     }
 
     const valueColumns = () => {
@@ -30,7 +38,7 @@ export default function ObservationLevel({ resource }) {
           columns.push(column?.name)
         })
       } else {
-        columns = ["Não informado"]
+        columns = [t('observationLevelTable.notProvided')]
       }
       return columns.join(", ")
     }

diff --git a/next/components/atoms/SectionLink.js b/next/components/atoms/SectionLink.js
@@ -1,36 +1,40 @@
 import { Link as ChakraLink } from "@chakra-ui/react";
+import NextLink from 'next/link';
 import { useEffect, useState } from "react";
 import { useCheckMobile } from "../../hooks/useCheckMobile.hook";
+import { useRouter } from 'next/router';
 
-export default function Link({
+export default function SectionLink({
   children,
   href,
   target,
   ...props
 }) {
   const [isMobileMod, setIsMobileMod] = useState(false)
   const isMobile = useCheckMobile();
+  const { locale } = useRouter();
 
   useEffect(() => {
     setIsMobileMod(isMobile)
   }, [isMobile])
 
   return (
-    <ChakraLink
-      width="fit-content"
-      target={target}
-      href={href}
-      fontFamily="Ubuntu"
-      fontSize={isMobileMod ? "12px" : "15px"}
-      letterSpacing={isMobileMod ? "0.2px" : "0.1px"}
-      fontWeight="700"
-      color="#42B0FF"
-      _hover={{ textDecoration: "none", opacity:"0.6" }}
-      paddingBottom="4px"
-      borderBottom="1px solid #42B0FF"
-      {...props}
-    >
-      {children}
-    </ChakraLink>
+    <NextLink href={href} locale={locale} passHref legacyBehavior>
+      <ChakraLink
+        width="fit-content"
+        target={target}
+        fontFamily="Ubuntu"
+        fontSize={isMobileMod ? "12px" : "15px"}
+        letterSpacing={isMobileMod ? "0.2px" : "0.1px"}
+        fontWeight="700"
+        color="#42B0FF"
+        _hover={{ textDecoration: "none", opacity:"0.6" }}
+        paddingBottom="4px"
+        borderBottom="1px solid #42B0FF"
+        {...props}
+      >
+        {children}
+      </ChakraLink>
+    </NextLink>
   );
 }
diff --git a/next/components/atoms/SimpleTable.js b/next/components/atoms/SimpleTable.js
@@ -23,8 +23,9 @@ export function SimpleTable({
     >
       <Table role="table">
         <Thead role="rowgroup">
-          {headers.map((h) => (
+          {headers.map((h, index) => (
             <Th
+              key={`header-${index}`}
               role="row"
               padding="8px 24px"
               fontSize="14px"
@@ -43,10 +44,11 @@ export function SimpleTable({
           ))}
         </Thead>
         <Tbody role="rowgroup">
-          {values.map((h) => (
-            <Tr role="row">
-              {h.map((r) => (
+          {values.map((h, rowIndex) => (
+            <Tr key={`row-${rowIndex}`} role="row">
+              {h.map((r, cellIndex) => (
                 <Td
+                  key={`cell-${rowIndex}-${cellIndex}`}
                   role="cell"
                   padding="10px 24px"
                   fontSize="14px"

diff --git a/next/components/atoms/ThemeTag.js b/next/components/atoms/ThemeTag.js
@@ -1,24 +1,28 @@
-import { Tag } from "@chakra-ui/react";
+import Link from '../atoms/Link';
+import { Tag } from '@chakra-ui/react';
 
-export function ThemeTag({ name, ...style }) {
+export function ThemeTag({ slug, locale, ...props }) {
   return (
     <Tag
-      position="relative"
-      fontSize="10px"
-      whiteSpace="nowrap"
       borderRadius="8px"
       padding="2px 8px"
-      color="#252A32"
       backgroundColor="#DEDFE0"
       cursor="pointer"
-      letterSpacing="0.2px"
-      fontWeight="300"
-      fontFamily="ubuntu"
-      {...style}
     >
-      <a href={`/dataset?tag=${name.toLowerCase()}`} target="_blank">
-        {name}
-      </a>
+      <Link
+        href={`/dataset?tag=${slug}`}
+        locale={locale}
+        fontWeight="300"
+        fontFamily="ubuntu"
+        fontSize="10px"
+        color="#252A32"
+        letterSpacing="0.2px"
+        position="relative"
+        whiteSpace="nowrap"
+        {...props}
+      >
+        {slug}
+      </Link>
     </Tag>
   );
 }