Skip to content

Commit

Permalink
Front de listagem de disciplinas
Browse files Browse the repository at this point in the history 
Co-authored-by: luanasoares0901 <[email protected]>
  • Loading branch information
@Algusto-RC
Algusto-RC and luanasoares0901 committed Dec 12, 2023
1 parent ebefef2 commit 4eb328e
Show file tree
Hide file tree
Showing 2 changed files with 115 additions and 134 deletions.
30 changes: 15 additions & 15 deletions frontend/src/pages/Home/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
219 changes: 100 additions & 119 deletions frontend/src/pages/Recommendations/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,9 @@ import {
Table,
Thead,
Tbody,
Tfoot,
Tr,
Th,
Td,
Checkbox,
TableContainer,
Button,
AlertDialog,
AlertDialogOverlay,
Expand All @@ -26,145 +23,129 @@ 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);
}
}
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>
);
};

Expand Down

0 comments on commit 4eb328e

Please sign in to comment.