From 4eb328e75560b21090ed6384464d190666216df6 Mon Sep 17 00:00:00 2001
From: Algusto-RC <algustorc@gmail.com>
Date: Mon, 11 Dec 2023 23:15:36 -0300
Subject: [PATCH] Front de listagem de disciplinas

Co-authored-by: luanasoares0901 <luana.soares0901@gmail.com>
---
 frontend/src/pages/Home/index.js            |  30 +--
 frontend/src/pages/Recommendations/index.js | 219 +++++++++-----------
 2 files changed, 115 insertions(+), 134 deletions(-)

diff --git a/frontend/src/pages/Home/index.js b/frontend/src/pages/Home/index.js
index 880825d4..f5ecc218 100644
--- a/frontend/src/pages/Home/index.js
+++ b/frontend/src/pages/Home/index.js
@@ -13,22 +13,22 @@ const Home = () => {
       <Header />
       <Container flex="1">
         <Center>
-        <Button colorScheme='blue' variant='ghost'>
-        <Link to='/criar-trilha'>Criar trilha</Link>
-        </Button>
-        <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>
+          <Button colorScheme='blue' variant='ghost'>
+          <Link to='/criar-trilha'>Criar trilha</Link>
+          </Button>
+          <Button colorScheme='blue' variant='ghost'>
+          <Link to='/criar-eletiva'>Criar Eletiva </Link>
+          </Button>
+          <Button colorScheme='blue' variant='ghost'>
+          <Link to='/excluir-trilha'>Excluir trilha</Link>
+          </Button>
+          <Button colorScheme='blue' variant='ghost'>
+          <Link to='/excluir-eletivas'>Excluir eletiva</Link>
+          </Button>
         </Center>
+          <Button colorScheme='blue' variant='ghost'>
+          <Link to='/recommendations'>Recomendações</Link>
+          </Button>
         <Center>
         </Center>
       </Container>
diff --git a/frontend/src/pages/Recommendations/index.js b/frontend/src/pages/Recommendations/index.js
index 87980007..54ffc2b9 100644
--- a/frontend/src/pages/Recommendations/index.js
+++ b/frontend/src/pages/Recommendations/index.js
@@ -11,12 +11,9 @@ import {
   Table,
   Thead,
   Tbody,
-  Tfoot,
   Tr,
   Th,
   Td,
-  Checkbox,
-  TableContainer,
   Button,
   AlertDialog,
   AlertDialogOverlay,
@@ -26,24 +23,33 @@ import {
   AlertDialogFooter,
   Container,
   Alert,
-  AlertIcon
+  AlertIcon,
+  Select
 } from "@chakra-ui/react"
 ;
 
 const Recommendations = () => {
   const [trilhas, setTrilhas] = useState([]);
-  const [trilhasSelecionadas, setTrilhasSelecionadas] = useState([]);
-  
-  const { isOpen, onOpen, onClose } = useDisclosure()
-  const cancelRef = React.useRef()
+  const [eletivasPorTrilha, setEletivasPorTrilha] = useState({});
+  const [descricaoTrilha, setDescricaoTrilha] = 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'
+        const response = await axios.get('http://localhost:3001/learningpath/learningpath');
+        setTrilhas(response.data);
+
+        // Mapear as eletivas por trilha para posterior uso
+        const eletivasMap = {};
+        response.data.forEach((trilha) => {
+          eletivasMap[trilha.id] = trilha.related_eletivas || [];
+        });
+        setEletivasPorTrilha(eletivasMap);
       } catch (error) {
         console.error('Erro ao buscar trilhas:', error);
       }
@@ -51,120 +57,95 @@ const Recommendations = () => {
     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 abrir o modal e exibir a descrição da trilha
+  const handleVerDescricaoClick = (descricao) => {
+    setDescricaoTrilha(descricao);
+    onOpen();
   };
 
-
-  // 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) => (
+      <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" marginBottom='35px'>
+              <Heading color="#243A69">Disciplinas disponíveis</Heading>
+            </Box>
+            <Table variant="simple">
+              <Thead>
                 <Tr>
-                  <Td>{linha.name}</Td>
-                  <Td>{linha.school_year}</Td>
-                  <Td><Checkbox colorScheme='red' onChange={() => handleCheckboxChange(linha.id)}></Checkbox></Td>
+                  <Th>Nome da trilha</Th>
+                  <Th>Descrição</Th>
+                  <Th>Eletivas relacionadas</Th>
                 </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>
-
+              </Thead>
+              <Tbody>
+                {trilhas.map((linha) => (
+                  <Tr key={linha.id}>
+                    <Td>{linha.name}</Td>
+                    <Td>
+                      <Button
+                        colorScheme="teal"
+                        backgroundColor='#243A69'
+                        size="sm"
+                        onClick={() => handleVerDescricaoClick(linha.description)}
+                      >
+                        Ver Descrição
+                      </Button>
+                    </Td>
+                    <Td>
+                      <Select>
+                        {eletivasPorTrilha[linha.id]?.map((eletiva) => (
+                          <option key={eletiva.id}>{eletiva.name}</option>
+                        ))}
+                      </Select>
+                    </Td>
+                  </Tr>
+                ))}
+              </Tbody>
+            </Table>
+            {/* Modal de Ver Descrição */}
+            <AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>
+              <AlertDialogOverlay>
+                <AlertDialogContent>
+                  <AlertDialogHeader fontSize="lg" fontWeight="bold">
+                    Descrição da Trilha
+                  </AlertDialogHeader>
+                  <AlertDialogBody>
+                    {descricaoTrilha}
+                  </AlertDialogBody>
+                  <AlertDialogFooter>
+                    <Button ref={cancelRef} onClick={onClose}>
+                      Fechar
+                    </Button>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialogOverlay>
+            </AlertDialog>
+          </Box>
+          {showAlert && (
+            <Box>
+              <Alert status="success" variant="subtle">
+                <AlertIcon />
+                Trilhas excluídas com sucesso!
+              </Alert>
+            </Box>
+          )}
+        </Container>
+        <Footer />
+      </Flex>
+    </ChakraProvider>
   );
 };