-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' of https://github.com/mdsreq-fga-unb/2023.2-Matri…
- Loading branch information
Showing
5 changed files
with
240 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,149 @@ | ||
| 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, | ||
| Tr, | ||
| Th, | ||
| Td, | ||
| Button, | ||
| AlertDialog, | ||
| AlertDialogOverlay, | ||
| AlertDialogContent, | ||
| AlertDialogHeader, | ||
| AlertDialogBody, | ||
| AlertDialogFooter, | ||
| Container, | ||
| Alert, | ||
| AlertIcon, | ||
| Select | ||
| } from "@chakra-ui/react"; | ||
|
|
||
| const EnrollmentRequest = () => { | ||
| const [eletivas, setEletivas] = useState([]); | ||
| const [eletivasPorTrilha, setEletivasPorTrilha] = useState({}); | ||
| const [descricaoEletiva, setDescricaoEletiva] = useState(''); | ||
| const { isOpen, onOpen, onClose } = useDisclosure(); | ||
| const cancelRef = React.useRef(); | ||
| const [showAlert, setShowAlert] = useState(false); | ||
|
|
||
| useEffect(() => { | ||
| async function fetchEletivas() { | ||
| try { | ||
| const response = await axios.get('http://localhost:3001/eletivas'); | ||
| setEletivas(response.data); | ||
|
|
||
| const eletivasMap = {}; | ||
| response.data.forEach((eletiva) => { | ||
| eletivasMap[eletiva.id] = eletiva.related_trilhas || []; | ||
| }); | ||
| setEletivasPorTrilha(eletivasMap); | ||
| } catch (error) { | ||
| console.error('Erro ao buscar eletivas:', error); | ||
| } | ||
| } | ||
| fetchEletivas(); | ||
| }, []); | ||
|
|
||
| const getStatus = (eletivaId) => { | ||
| return eletivaId % 2 === 0 ? 'Homologado' : 'Não homologado'; | ||
| }; | ||
|
|
||
| const handleVerDescricaoClick = (descricao) => { | ||
| setDescricaoEletiva(descricao); | ||
| onOpen(); | ||
| }; | ||
|
|
||
| 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">Eletivas Disponíveis</Heading> | ||
| </Box> | ||
| <Table variant="simple"> | ||
| <Thead> | ||
| <Tr> | ||
| <Th>Disciplina</Th> | ||
| <Th>Status</Th> | ||
| <Th>Eletivas relacionadas</Th> | ||
| </Tr> | ||
| </Thead> | ||
| <Tbody> | ||
| {eletivas.map((eletiva) => ( | ||
| <Tr key={eletiva.id}> | ||
| <Td>{eletiva.name}</Td> | ||
| <Td>{getStatus(eletiva.id)}</Td> | ||
| <Td> | ||
| <Select> | ||
| {eletivasPorTrilha[eletiva.id]?.map((trilha) => ( | ||
| <option key={trilha.id}>{trilha.name}</option> | ||
| ))} | ||
| </Select> | ||
| </Td> | ||
| </Tr> | ||
| ))} | ||
| </Tbody> | ||
| </Table> | ||
| <AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose} isCentered> | ||
| <AlertDialogOverlay | ||
| style={{ | ||
| backdropFilter: "blur(4px)", | ||
| backgroundColor: "rgba(0, 0, 0, 0.5)", | ||
| display: "flex", | ||
| justifyContent: "center", | ||
| alignItems: "center", | ||
| }} | ||
| > | ||
| <AlertDialogContent> | ||
| <AlertDialogHeader fontSize="lg" fontWeight="bold"> | ||
| Descrição da Eletiva | ||
| </AlertDialogHeader> | ||
| <AlertDialogBody> | ||
| {descricaoEletiva} | ||
| </AlertDialogBody> | ||
| <AlertDialogFooter> | ||
| <Button ref={cancelRef} onClick={onClose}> | ||
| Fechar | ||
| </Button> | ||
| </AlertDialogFooter> | ||
| </AlertDialogContent> | ||
| </AlertDialogOverlay> | ||
| </AlertDialog> | ||
| </Box> | ||
| {showAlert && ( | ||
| <Box> | ||
| <Alert status="success" variant="subtle"> | ||
| <AlertIcon /> | ||
| Eletivas carregadas com sucesso! | ||
| </Alert> | ||
| </Box> | ||
| )} | ||
| </Container> | ||
| <Footer /> | ||
| </Flex> | ||
| </ChakraProvider> | ||
| ); | ||
| }; | ||
|
|
||
| export default EnrollmentRequest; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
e9fe073There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
matriculai – ./frontend
matriculai.vercel.app
matriculai-matriculai.vercel.app
matriculai-git-main-matriculai.vercel.app