Merge pull request #59 from mdsreq-fga-unb/recommendations-screen

Importar dados dos alunos
mdsreq-fga-unb · Dec 11, 2023 · 3d837ab · 3d837ab
2 parents 35eb228 + cabd557
commit 3d837ab
Show file tree

Hide file tree

Showing 6 changed files with 301 additions and 17 deletions.
diff --git a/frontend/src/pages/Home/index.js b/frontend/src/pages/Home/index.js
@@ -19,13 +19,15 @@ const Home = () => {
         <Button colorScheme='blue' variant='ghost'>
         <Link to='/criar-eletiva'>Criar Eletiva </Link>
         </Button>
-
         <Button colorScheme='blue' variant='ghost'>
         <Link to='/excluir-trilhas'>Excluir trilha</Link>
         </Button>
         <Button colorScheme='blue' variant='ghost'>
         <Link to='/excluir-eletivas'>Excluir eletiva</Link>
         </Button>
+        <Button colorScheme='blue' variant='ghost'>
+        <Link to='/recommendations'>Recomendações</Link>
+        </Button>
         </Center>
         <Center>
         </Center>

diff --git a/frontend/src/pages/Recommendations/index.js b/frontend/src/pages/Recommendations/index.js
@@ -0,0 +1,171 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { ChakraProvider, useDisclosure } from '@chakra-ui/react'
+import Header from "../../components/Header/index.js";
+import Footer from "../../components/Footer/index.js";
+
+import { 
+  Box,
+  Flex,
+  Heading,
+  Table,
+  Thead,
+  Tbody,
+  Tfoot,
+  Tr,
+  Th,
+  Td,
+  Checkbox,
+  TableContainer,
+  Button,
+  AlertDialog,
+  AlertDialogOverlay,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogBody,
+  AlertDialogFooter,
+  Container,
+  Alert,
+  AlertIcon
+} from "@chakra-ui/react"
+;
+
+const Recommendations = () => {
+  const [trilhas, setTrilhas] = useState([]);
+  const [trilhasSelecionadas, setTrilhasSelecionadas] = useState([]);
+
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const cancelRef = React.useRef()
+
+  const [showAlert, setShowAlert] = useState(false);
+  // Carregar trilhas do backend ao carregar o componente
+  useEffect(() => {
+    async function fetchTrilhas() {
+      try {
+        const response = await axios.get('http://localhost:3001/learningpath/learningpath'); // Endpoint para buscar trilhas
+        setTrilhas(response.data); // Define as trilhas na state 'trilhas'
+      } catch (error) {
+        console.error('Erro ao buscar trilhas:', error);
+      }
+    }
+    fetchTrilhas();
+  }, []);
+
+  // Função para marcar/desmarcar trilha selecionada
+  const handleCheckboxChange = (id) => {
+    const isSelected = trilhasSelecionadas.includes(id);
+
+    if (isSelected) {
+      // Se já estiver selecionado, remova da lista de selecionados
+      setTrilhasSelecionadas(trilhasSelecionadas.filter((eleId) => eleId !== id));
+    } else {
+      // Se não estiver selecionado, adicione à lista de selecionados
+      setTrilhasSelecionadas([...trilhasSelecionadas, id]);
+    }
+
+    console.log(trilhasSelecionadas)
+  };
+
+
+  // Função para excluir trilhas selecionadas
+  const handleExcluirClick = async () => {
+    try {
+      // Enviar uma solicitação para excluir as eletivas selecionadas
+      trilhasSelecionadas.map(async (eletiva)  => {
+        await axios.delete('http://localhost:3001/learningpath/deleteLearningPaths', {
+          data: { id: eletiva },
+        });
+      })
+
+      // Atualizar a lista de eletivas após a exclusão
+      const response = await axios.get('http://localhost:3001/learningpath/learningpath');
+      setTrilhas(response.data);
+
+      // Limpar a lista de eletivas selecionadas
+      setTrilhasSelecionadas([]);
+      onClose();
+      setTimeout(() => {
+        window.location.reload();;
+      }, 2000);
+      setShowAlert(true);
+    } catch (error) {
+      console.error('Erro ao excluir trilhas:', error);
+    }
+  };
+
+
+
+  return (
+    <ChakraProvider>
+    <Flex direction="column" minH="100vh">
+    <Header />
+    <Container flex="1">
+    <Box width="100%" marginTop="10vh" marginBottom="2vh" paddingLeft="2vh" paddingRight="2vh" paddingTop="2vh" borderWidth={1} borderRadius={8} boxShadow="lg">
+      <Box textAlign="center">
+        <Heading color= '#243A69'>Exclusão de Trilhas</Heading>
+      </Box>
+        <TableContainer>
+          <Table variant='simple'>
+            <Thead>
+              <Tr>
+                <Th>Nome da eletiva</Th>
+                <Th>Ano letivo</Th>
+                <Th></Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {trilhas.map((linha) => (
+                <Tr>
+                  <Td>{linha.name}</Td>
+                  <Td>{linha.school_year}</Td>
+                  <Td><Checkbox colorScheme='red' onChange={() => handleCheckboxChange(linha.id)}></Checkbox></Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        </TableContainer>
+        <Box display="flex" justifyContent="center">
+        <Button colorScheme='facebook' variant='solid' margin="2vh" onClick={onOpen} isDisabled={trilhasSelecionadas.length === 0}>Excluir trilhas selecionadas</Button>
+            <AlertDialog
+          isOpen={isOpen}
+          leastDestructiveRef={cancelRef}
+          onClose={onClose}
+        >
+          <AlertDialogOverlay>
+            <AlertDialogContent>
+              <AlertDialogHeader fontSize='lg' fontWeight='bold'>
+                Excluir Trilhas
+              </AlertDialogHeader>
+
+              <AlertDialogBody>
+                Você tem certeza? Essa ação não pode ser desfeita.
+              </AlertDialogBody>
+
+              <AlertDialogFooter>
+                <Button ref={cancelRef} onClick={onClose}>
+                  Cancelar
+                </Button>
+                <Button colorScheme='red' onClick={handleExcluirClick} ml={3}>
+                  Excluir
+                </Button>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialogOverlay>
+        </AlertDialog>
+        </Box>
+      </Box>
+      {showAlert && (<Box>
+        <Alert status='success' variant='subtle'>
+        <AlertIcon />
+        Trilhas excluídas com sucesso!
+        </Alert>
+      </Box>)}
+    </Container>
+    <Footer />
+  </Flex>
+  </ChakraProvider>
+
+  );
+};
+
+export default Recommendations;
diff --git a/frontend/src/pages/Recommendations/styles.js b/frontend/src/pages/Recommendations/styles.js
@@ -0,0 +1,68 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  //justify-content: center;
+   
+  flex-direction: column;
+  gap: 10px;
+  height: 100vh;
+  background-color: 'white';
+`;
+
+export const Content = styled.div`
+  gap: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  box-shadow: 0 1px 2px #0003;
+  background-color: #f4f4f2;
+  max-width: 650px;
+  max-height: 85%;
+  margin-top: 2%;
+  border-radius: 60px;
+`;
+
+export const Label = styled.label`
+  font-size: 18px;
+  font-weight: 600;
+  color: #676767;
+`;
+
+export const LabelSignup = styled.label`
+  font-size: 16px;
+  color: #676767;
+`;
+
+export const labelError = styled.label`
+  font-size: 14px;
+  color: red;
+`;
+
+export const Strong = styled.strong`
+  cursor: pointer;
+
+  a {
+    text-decoration: none;
+    color: #676767;
+  }
+`;
+export const titulo = styled.div`
+  font-size: 150%;
+  font-weight: 600;
+  color: #243A69;
+  margin-left: 20px;
+  margin-top: 20px;
+  align: center;
+`;
+export const box = styled.div`
+`;
+
+export const texto = styled.label`
+  color: #243A69;
+
+`;
diff --git a/frontend/src/pages/SendStudents/index.js b/frontend/src/pages/SendStudents/index.js
@@ -1,10 +1,9 @@
 import React, { useState } from 'react';
 import axios from 'axios';
-import { Container, Flex} from "@chakra-ui/react";
+import { Container, Flex, Box, Text, Button, Input, Center } from "@chakra-ui/react";
 import Header from "../../components/Header/index.js";
 import Footer from "../../components/Footer/index.js";
 import { ChakraProvider } from "@chakra-ui/react";
-
 import { Link } from "react-router-dom";
 
 const SendStudent = () => {
@@ -29,19 +28,60 @@ const SendStudent = () => {
     }
 
   return (
-
     <ChakraProvider>
       <Flex direction="column" minH="100vh">
-      <Header />
-      <Container flex="1">
-          <input type="file" onChange={handleFileChange} />
-          <button onClick={handleUpload}>Enviar Arquivo</button>
-      </Container>
-      <Footer />
-    </Flex>
+        <Header />
+        <Container flex="1">
+          <Center>
+          <Box
+            bg="#red"
+            borderRadius="30px"
+            p="4"
+            mt="8"
+            w="100%"
+            maxW="400px"
+            textAlign="center"
+          >
+            <Text color="#243A69" fontWeight="bold" fontSize="xl" mb="4">
+              Importar dados
+            </Text>
+            <Input
+              type="file"
+              onChange={handleFileChange}
+              display="none"
+              id="fileInput"
+            />
+            <label htmlFor="fileInput">
+              <Button
+                as="span"
+                bg="#D2D2D2"
+                color="#243A69"
+                borderRadius="6px"
+                p="2"
+                cursor="pointer"
+                _hover={{ bg: "#C4C4C4" }}
+              >
+                Selecionar arquivo
+              </Button>
+            </label>
+            <Button
+              onClick={handleUpload}
+              bg="#243A69"
+              color="#FFFFFF"
+              borderRadius="10px"
+              p="2"
+              mt="4"
+              _hover={{ bg: "#1B2D4A" }}
+            >
+              Enviar arquivo
+            </Button>
+          </Box>
+          </Center>
+        </Container>
+        <Footer />
+      </Flex>
     </ChakraProvider>
-
   );
 };
 
-export default SendStudent;
+export default SendStudent;
diff --git a/frontend/src/routes/index.js b/frontend/src/routes/index.js
@@ -4,12 +4,14 @@ import useAuth from "../hooks/useAuth";
 import Home from "../pages/Home";
 import Signin from "../pages/Signin";
 import Signup from "../pages/Signup";
-import ExclusionTrilhas from "../pages/ExclusionTrilhas";
-import ExclusionEletivas from "../pages/ExclusionEletivas"
+import ExclusionEletivas from "../pages/ExclusionEletivas";
 import CreateEletivas from "../pages/CreateEletivas";
 import CreateTrilhas from "../pages/CreateTrilhas";
+import ExclusionTrilhas from "../pages/ExclusionTrilhas";
+import Recommendations from "../pages/Recommendations";
 import SendStudent from "../pages/SendStudents"
 
+
 const Private = ({ Item }) => {
   const { signed } = useAuth();
 
@@ -27,7 +29,8 @@ const RoutesApp = () => {
           <Route path="/criar-eletiva" element={<CreateEletivas />} />
           <Route path="/excluir-eletivas" element={<ExclusionEletivas />} />
           <Route path="/criar-trilha" element={<CreateTrilhas />} />
-          <Route path="/excluir-trilhas" element={<ExclusionTrilhas />} />
+          <Route path="/excluir-trilha" element={<ExclusionTrilhas />} />
+          <Route path="/recommendations" element={<Recommendations />} />
           <Route path="/cadastrar-estudantes" element={<SendStudent />} />
         </Routes>
       </Fragment>

diff --git a/frontend/src/styles/global.js b/frontend/src/styles/global.js
@@ -6,7 +6,7 @@ const GlobalStyle = createGlobalStyle`
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    //border: 1px solid hotpink;
+    border: 1px solid hotpink;
   }
 
   body {