Merge branch 'main' of github.com:WBG-Coach/coach-admin-sl

WBG-Coach · Aug 2, 2023 · c6f3636 · c6f3636
2 parents 8ff6aa8 + 0c09a79
commit c6f3636
Show file tree

Hide file tree

Showing 26 changed files with 2,405 additions and 146 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,3 @@
+node_modules/
+dist/
+env.d.ts
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,32 @@
+{
+  "extends": [
+    "import",
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:import/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "eslint-config-prettier"
+  ],
+  "settings": {
+    "import/resolver": {
+      "typescript": {},
+      "alias": {
+        "map": [["@", "./src"]]
+      }
+    }
+  },
+  "rules": {
+    "no-unused-vars": [
+      "error",
+      {
+        "vars": "all",
+        "args": "after-used",
+        "ignoreRestSiblings": true,
+        "argsIgnorePattern": "^_"
+      }
+    ],
+    "react/react-in-jsx-scope": "off"
+  }
+}
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,2 @@
+node_modules/
+dist/
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,9 @@
+{
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 120,
+  "bracketSpacing": true,
+  "endOfLine": "lf"
+}
diff --git a/package.json b/package.json
@@ -8,7 +8,8 @@
     "build": "tsc --noEmit && vite build",
     "preview": "vite preview",
     "storybook": "storybook dev -p 3002",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "lint": "eslint . --ext .ts,.tsx"
   },
   "dependencies": {
     "@chakra-ui/icons": "^2.0.17",
@@ -19,6 +20,7 @@
     "@superset-ui/embedded-sdk": "^0.1.0-alpha.9",
     "@types/styled-system": "^5.1.16",
     "axios": "^1.3.4",
+    "date-fns": "^2.30.0",
     "framer-motion": "^10.2.3",
     "i18next": "^22.4.11",
     "react": "^18.2.0",
@@ -28,15 +30,26 @@
     "react-paginate": "^8.2.0",
     "react-router-dom": "6.4.3",
     "react-toastify": "^9.1.1",
-    "styled-system": "^5.1.5"
+    "styled-system": "^5.1.5",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@babel/core": "^7.21.0",
     "@types/node": "^18.14.6",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
+    "@typescript-eslint/eslint-plugin": "^6.2.1",
+    "@typescript-eslint/parser": "^6.2.1",
     "@vitejs/plugin-react-swc": "^3.0.0",
     "babel-loader": "^8.3.0",
+    "eslint": "^8.46.0",
+    "eslint-config-prettier": "^8.9.0",
+    "eslint-import-resolver-typescript": "^3.5.5",
+    "eslint-plugin-import": "^2.28.0",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.33.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "prettier": "^3.0.0",
     "typescript": "^4.9.3",
     "vite": "^4.1.0"
   }

diff --git a/src/common/date/index.ts b/src/common/date/index.ts
@@ -0,0 +1,13 @@
+import { format, isValid } from "date-fns";
+import { ptBR } from "date-fns/locale";
+
+const formatDate = (date: Date | undefined, customFormat?: string) => {
+  if (date && isValid(date)) {
+    return format(date, customFormat || "dd MMM yyyy", {
+      locale: ptBR,
+    });
+  }
+  return "";
+};
+
+export default formatDate;
diff --git a/src/common/download/index.ts b/src/common/download/index.ts
@@ -0,0 +1,11 @@
+import * as XLSX from "xlsx";
+import formatDate from "../date";
+
+const handleDownloadJSON = (data: any, name: string) => {
+  let wb = XLSX.utils.book_new();
+  XLSX.utils.book_append_sheet(wb, XLSX.utils.json_to_sheet(data), "Relatório");
+
+  XLSX.writeFile(wb, `${name} - ${formatDate(new Date(), "dd-MM-yyyy")}.xlsx`);
+};
+
+export default handleDownloadJSON;
diff --git a/src/components/HeaderPage/index.tsx b/src/components/HeaderPage/index.tsx
@@ -1,20 +1,25 @@
 import React from "react";
 import { Button, HStack, Text, VStack } from "@chakra-ui/react";
 import Icon from "../Base/Icon";
+import { useTranslation } from "react-i18next";
 
 type Props = {
   title: string;
   subtitle: string;
   newButtonValue?: string | null;
   onClickNew?: () => void;
+  onClickDownload?: () => void;
 };
 
 const HeaderPage: React.FC<Props> = ({
   title,
   subtitle,
   newButtonValue,
   onClickNew,
+  onClickDownload,
 }) => {
+  const { t } = useTranslation();
+
   return (
     <HStack flex={1}>
       <VStack flex={1} alignItems="start" mt="60px" mb="24px">
@@ -37,16 +42,29 @@ const HeaderPage: React.FC<Props> = ({
           {title}
         </Text>
       </VStack>
-      {newButtonValue && onClickNew && (
-        <Button
-          variant="solid"
-          colorScheme="blue"
-          onClick={onClickNew}
-          gap="8px"
-        >
-          <Icon name="plus" color="#fff" size={24} /> {newButtonValue}
-        </Button>
-      )}
+      <HStack>
+        {onClickDownload && (
+          <Button
+            variant="solid"
+            colorScheme="blue"
+            onClick={onClickDownload}
+            gap="8px"
+          >
+            {t("general.download-data")}
+          </Button>
+        )}
+
+        {newButtonValue && onClickNew && (
+          <Button
+            variant="solid"
+            colorScheme="blue"
+            onClick={onClickNew}
+            gap="8px"
+          >
+            <Icon name="plus" color="#fff" size={24} /> {newButtonValue}
+          </Button>
+        )}
+      </HStack>
     </HStack>
   );
 };

diff --git a/src/i18n/langs/en.ts b/src/i18n/langs/en.ts
@@ -32,6 +32,23 @@ const enTranslation = {
     view: "View",
     delete: "Delete",
   },
+  general: {
+    "download-data": "Download data",
+  },
+  settings: {
+    title: "Settings",
+    tabs: {
+      user: {
+        title: "General",
+      },
+      users: {
+        title: "Users",
+      },
+      "change-password": {
+        title: "Change password",
+      },
+    },
+  },
 };
 
 export default enTranslation;
diff --git a/src/pages/Coaches/CoachForm/index.tsx b/src/pages/Coaches/CoachForm/index.tsx
@@ -5,12 +5,13 @@ import {
   FormLabel,
   FormControl,
   FormErrorMessage,
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalCloseButton,
-  ModalBody,
+  Drawer,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerCloseButton,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter,
 } from "@chakra-ui/react";
 import { useForm } from "react-hook-form";
 
@@ -36,13 +37,20 @@ const CoachForm: React.FC<Props> = ({
   } = useForm();
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose}>
-      <ModalOverlay />
-      <ModalContent>
-        <ModalHeader>{coachToEdit ? "Edit" : "New"} Coach</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <form onSubmit={handleSubmit(onSubmit)}>
+    <Drawer isOpen={isOpen} placement="right" onClose={onClose} size="md">
+      <DrawerOverlay />
+      <DrawerContent roundedLeft={14}>
+        <form
+          onSubmit={handleSubmit(onSubmit)}
+          style={{ height: "100%", display: "flex", flexDirection: "column" }}
+        >
+          <DrawerCloseButton mt={2} color="Primary.$200" />
+
+          <DrawerHeader>
+            {coachToEdit ? "New Teacher" : "Update teacher"}
+          </DrawerHeader>
+
+          <DrawerBody>
             <FormControl isInvalid={!!errors.name}>
               <FormLabel htmlFor="name">Nome</FormLabel>
               <Input
@@ -56,18 +64,19 @@ const CoachForm: React.FC<Props> = ({
                   "Name is required"}
               </FormErrorMessage>
             </FormControl>
-            <Button
-              my="4"
-              colorScheme="teal"
-              isLoading={isSubmitting}
-              type="submit"
-            >
+          </DrawerBody>
+
+          <DrawerFooter mt="auto">
+            <Button colorScheme="blue" mr={3} type="submit">
               Save
             </Button>
-          </form>
-        </ModalBody>
-      </ModalContent>
-    </Modal>
+            <Button variant="outline" mr={"auto"} onClick={onClose}>
+              Cancel
+            </Button>
+          </DrawerFooter>
+        </form>
+      </DrawerContent>
+    </Drawer>
   );
 };
 

diff --git a/src/pages/Coaches/CoachList/index.tsx b/src/pages/Coaches/CoachList/index.tsx
@@ -1,7 +1,8 @@
-import { Box, Flex, IconButton, Text } from "@chakra-ui/react";
-import { EditIcon, DeleteIcon } from "@chakra-ui/icons";
+import { Flex, Menu, MenuButton, MenuItem, MenuList } from "@chakra-ui/react";
 import { ICoach } from "@/types";
 import Table from "@/components/Table";
+import Icon from "@/components/Base/Icon";
+import { useTranslation } from "react-i18next";
 
 type Props = {
   coachs: ICoach[];
@@ -10,6 +11,8 @@ type Props = {
 };
 
 const CoachList: React.FC<Props> = ({ coachs, handleDelete, handleEdit }) => {
+  const { t } = useTranslation();
+
   return (
     <Table
       data={coachs}
@@ -18,6 +21,38 @@ const CoachList: React.FC<Props> = ({ coachs, handleDelete, handleEdit }) => {
           renderColumn: (item: ICoach) => item.name,
           title: "Name",
         },
+        {
+          renderColumn: (item: ICoach) => (
+            <Flex justifyContent="center">
+              <Menu>
+                <MenuButton p="8px">
+                  <Icon name="ellipsis-v" size={16} />
+                </MenuButton>
+                <MenuList>
+                  <MenuItem
+                    gap="8px"
+                    alignItems="center"
+                    onClick={() => handleEdit(item)}
+                  >
+                    <Icon name="pen" />
+                    {t("common.edit")}
+                  </MenuItem>
+                  <MenuItem
+                    gap="8px"
+                    alignItems="center"
+                    color="red"
+                    onClick={() => handleDelete(item)}
+                  >
+                    <Icon name="trash-alt" color="red" />
+                    {t("common.delete")}
+                  </MenuItem>
+                </MenuList>
+              </Menu>
+            </Flex>
+          ),
+          width: "85px",
+          title: "common.actions",
+        },
       ]}
     />
   );

diff --git a/src/pages/Coaches/index.tsx b/src/pages/Coaches/index.tsx
@@ -18,6 +18,7 @@ import CoachForm from "./CoachForm";
 import CoachList from "./CoachList";
 import HeaderPage from "@/components/HeaderPage";
 import { useTranslation } from "react-i18next";
+import handleDownloadJSON from "@/common/download";
 
 const CoachesPage: React.FC = () => {
   const { t } = useTranslation();
@@ -71,7 +72,16 @@ const CoachesPage: React.FC = () => {
 
   return (
     <Box p={4} minH="100vh" flex={1}>
-      <HeaderPage subtitle={t("Navbar.data")} title={t("Navbar.coaches")} />
+      <HeaderPage
+        subtitle={t("Navbar.data")}
+        title={t("Navbar.coaches")}
+        onClickDownload={() =>
+          handleDownloadJSON(
+            coaches,
+            t("Navbar.coaches").toLowerCase().replaceAll(" ", "-")
+          )
+        }
+      />
       <CoachForm
         onClose={closeForm}
         onSubmit={saveCoach}

diff --git a/src/pages/Competencies/index.tsx b/src/pages/Competencies/index.tsx
@@ -7,6 +7,7 @@ import CompetenceForm from "./CompetenceForm";
 import CompetenceList from "./CompetenceList";
 import HeaderPage from "@/components/HeaderPage";
 import { useTranslation } from "react-i18next";
+import handleDownloadJSON from "@/common/download";
 
 const CompetenciesPage: React.FC = () => {
   const { t } = useTranslation();
@@ -59,6 +60,12 @@ const CompetenciesPage: React.FC = () => {
         title={t("Navbar.teaching-practices")}
         newButtonValue={t("competence.new-competence")}
         onClickNew={() => setNewCompetence(true)}
+        onClickDownload={() =>
+          handleDownloadJSON(
+            competencies,
+            t("Navbar.teaching-practices").toLowerCase().replaceAll(" ", "-")
+          )
+        }
       />
 
       <CompetenceForm