forked from fga-eps-mds/2024.1-CALCULUS-Frontend
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #25 from fga-eps-mds/qas
[FEAT] Adiciona lógica de disciplinas (fga-eps-mds/2024.2-ARANDU-DOC#71)
- Loading branch information
Showing
31 changed files
with
2,189 additions
and
57 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 |
|---|---|---|
| @@ -1,8 +1,11 @@ | ||
| # NEXT_PUBLIC_API_URL_USER=http://user-api:3000 | ||
| # NEXT_PUBLIC_API_URL_STUDIO=http://studio-api:3002 | ||
| # NEXTAUTH_URL=http://front-api:4000 | ||
| NEXT_PUBLIC_API_URL_USER= | ||
| NEXT_PUBLIC_API_URL_STUDIO= | ||
| NEXTAUTH_URL= | ||
| NEXTAUTH_SECRET= | ||
| JWT_SECRET= | ||
| GOOGLE_CLIENT_ID= | ||
| GOOGLE_CLIENT_SECRET= | ||
| PORT= | ||
| NODE_ENV= |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,159 @@ | ||
| 'use client'; | ||
|
|
||
| import React, { useState, useEffect } from 'react'; | ||
| import { useQuery } from '@tanstack/react-query'; | ||
| import { | ||
| Box, | ||
| Dialog, | ||
| DialogActions, | ||
| DialogContent, | ||
| DialogTitle, | ||
| Button, | ||
| Typography, | ||
| CircularProgress, | ||
| } from '@mui/material'; | ||
| import ButtonRed from '@/components/ui/buttons/red.button'; | ||
| import SearchBar from '@/components/admin/SearchBar'; | ||
| import SubjectTable from '@/components/tables/subject.table'; | ||
| import { Subject } from '@/lib/interfaces/subjetc.interface'; | ||
| import { | ||
| deleteSubjects, | ||
| GetSubjectsByUserId, | ||
| GetSubjects | ||
| } from '@/services/studioMaker.service'; | ||
| import Popup from '@/components/ui/popup'; | ||
| import { SubjectForm } from '@/components/forms/subject.form'; | ||
| import { toast } from 'sonner'; | ||
| import { updateSubject, addSubject, handleSubjectAction, handleRemoveSubject, handleMenuOpen, fetchSubjects, handleMenuClose } from './subject.functions'; | ||
|
|
||
| export default function SubjectPage({ | ||
| params, | ||
| }: { | ||
| readonly params: { pointId: string }; | ||
| }) { | ||
|
|
||
| const [listSubjects, setListSubjects] = useState<Subject[]>([]); | ||
| const [filteredSubjects, setFilteredSubjects] = useState<Subject[]>([]); | ||
|
|
||
| const { | ||
| data = [], | ||
| isLoading, | ||
| error, | ||
| } = useQuery<Subject[], Error>({ | ||
| queryKey: ['subjects', params.pointId], | ||
| queryFn: () => fetchSubjects(params, setListSubjects, setFilteredSubjects), // Corrigido: Chamando a função corretamente com uma função anônima | ||
| }); | ||
|
|
||
| const [searchQuery, setSearchQuery] = useState<string>(''); | ||
|
|
||
| const [selectedSubject, setSelectedSubject] = useState<Subject | null>(null); | ||
| const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null); | ||
| const [exclusionDialogOpen, setExclusionDialogOpen] = | ||
| useState<boolean>(false); | ||
| const [editionDialogOpen, setEditionDialogOpen] = useState<boolean>(false); | ||
| const [createDialogOpen, setCreateDialogOpen] = useState(false); | ||
|
|
||
| useEffect(() => { | ||
| if (searchQuery === '') { | ||
| setFilteredSubjects(listSubjects); | ||
| } else { | ||
| const lowercasedQuery = searchQuery.toLowerCase(); | ||
| const filtered = listSubjects.filter((subject) => { | ||
| return ( | ||
| subject.name.toLowerCase().includes(lowercasedQuery) || | ||
| subject.description.toLowerCase().includes(lowercasedQuery) | ||
| ); | ||
| }); | ||
|
|
||
| setFilteredSubjects(filtered); | ||
| } | ||
| }, [searchQuery, listSubjects]); | ||
|
|
||
| if (isLoading) { | ||
| return <CircularProgress />; | ||
| } | ||
|
|
||
| if (error) { | ||
| return <Typography>Error fetching subjects</Typography>; | ||
| } | ||
|
|
||
|
|
||
| const SubjectPage = ( | ||
| <Box | ||
| sx={{ | ||
| padding: 2, | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| alignItems: 'center', | ||
| }} | ||
| > | ||
| <Typography variant="h2">Disciplinas</Typography> | ||
| <Box sx={{ width: '100%', maxWidth: 800, marginBottom: 2 }}> | ||
| <SearchBar value={searchQuery} onChange={setSearchQuery} /> | ||
| </Box> | ||
| <Box sx={{ width: '100%', maxWidth: 800 }}><SubjectTable | ||
| subjects={filteredSubjects} | ||
| anchorEl={anchorEl} | ||
| onMenuClick={(event, subject) => handleMenuOpen(event, subject, setAnchorEl, setSelectedSubject)} | ||
| onMenuClose={() => handleMenuClose(setAnchorEl)} | ||
| onSubjectAction={(action) => handleSubjectAction(action, setEditionDialogOpen, setExclusionDialogOpen)} | ||
| /></Box> | ||
|
|
||
|
|
||
|
|
||
| <ButtonRed onClick={() => setCreateDialogOpen(true)}> | ||
| Nova Disciplina | ||
| </ButtonRed> | ||
|
|
||
| <Popup | ||
| openPopup={editionDialogOpen} | ||
| setPopup={setEditionDialogOpen} | ||
| title="Editar Disciplina" | ||
| > | ||
| <SubjectForm | ||
| callback={(subject: Subject) => updateSubject(subject, listSubjects, setListSubjects)} | ||
| subject={selectedSubject!} | ||
| setDialog={setEditionDialogOpen} | ||
| /> | ||
|
|
||
| </Popup> | ||
|
|
||
| <Popup | ||
| openPopup={createDialogOpen} | ||
| setPopup={setCreateDialogOpen} | ||
| title="Criar Nova Disciplina" | ||
| > | ||
| <SubjectForm | ||
| callback={(subject: Subject) => addSubject(subject, listSubjects, setListSubjects)} | ||
| setDialog={setCreateDialogOpen} | ||
| /> | ||
| </Popup> | ||
|
|
||
| <Dialog | ||
| open={exclusionDialogOpen} | ||
| onClose={() => setExclusionDialogOpen(false)} | ||
| > | ||
| <DialogTitle>Confirmar Exclusão de Disciplina</DialogTitle> | ||
| <DialogContent> | ||
| {selectedSubject && ( | ||
| <Typography variant="h6">{`Excluir ${selectedSubject.name}?`}</Typography> | ||
| )} | ||
| </DialogContent> | ||
| <DialogActions> | ||
| <Button onClick={() => setExclusionDialogOpen(false)} color="error"> | ||
| Cancelar | ||
| </Button> | ||
| <Button | ||
| onClick={() => handleRemoveSubject(selectedSubject!, listSubjects, setListSubjects, setExclusionDialogOpen)} | ||
| color="primary" | ||
| > | ||
| Confirmar | ||
| </Button> | ||
| </DialogActions> | ||
| </Dialog> | ||
| </Box > | ||
| ); | ||
|
|
||
| return SubjectPage | ||
|
|
||
| } |
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,96 @@ | ||
| // subjectFunctions.ts | ||
| import { Subject } from '@/lib/interfaces/subjetc.interface'; | ||
| import { deleteSubjects, GetSubjects, GetSubjectsByUserId } from '@/services/studioMaker.service'; | ||
| import { toast } from 'sonner'; | ||
|
|
||
| export const updateSubject = (subject: Subject, listSubjects: Subject[], setListSubjects: React.Dispatch<React.SetStateAction<Subject[]>>) => { | ||
| // Verificar se listSubjects não é undefined ou null | ||
| if (listSubjects && Array.isArray(listSubjects)) { | ||
| setListSubjects( | ||
| listSubjects.map((s) => (s._id === subject._id ? subject : s)), | ||
| ); | ||
| } | ||
| }; | ||
|
|
||
| export const addSubject = ( | ||
| subject: Subject, | ||
| listSubjects: Subject[], | ||
| setListSubjects: React.Dispatch<React.SetStateAction<Subject[]>> | ||
| ) => { | ||
| // Verificar se listSubjects não é undefined ou null | ||
| if (listSubjects && Array.isArray(listSubjects)) { | ||
| setListSubjects( | ||
| [...listSubjects, subject].sort((a, b) => a.order - b.order), | ||
| ); | ||
| } | ||
| }; | ||
|
|
||
| export const handleSubjectAction = ( | ||
| action: string, | ||
| setEditionDialogOpen: React.Dispatch<React.SetStateAction<boolean>>, | ||
| setExclusionDialogOpen: React.Dispatch<React.SetStateAction<boolean>> | ||
| ) => { | ||
| if (action === 'editar') { | ||
| setEditionDialogOpen(true); | ||
| } | ||
| if (action === 'excluir') { | ||
| setExclusionDialogOpen(true); | ||
| } | ||
| }; | ||
|
|
||
| export const handleRemoveSubject = async ( | ||
| subject: Subject, | ||
| listSubjects: Subject[], | ||
| setListSubjects: React.Dispatch<React.SetStateAction<Subject[]>>, | ||
| setExclusionDialogOpen: React.Dispatch<React.SetStateAction<boolean>> | ||
| ) => { | ||
| const response = await deleteSubjects({ | ||
| id: subject._id, | ||
| token: JSON.parse(localStorage.getItem('token')!), | ||
| }); | ||
| if (response.data) { | ||
| toast.success('Disciplina excluída com sucesso!'); | ||
| setListSubjects(listSubjects.filter((s) => s._id !== subject._id)); | ||
| setExclusionDialogOpen(false); | ||
| } else { | ||
| toast.error('Erro ao excluir disciplina. Tente novamente mais tarde!'); | ||
| } | ||
| }; | ||
|
|
||
| export const handleMenuOpen = ( | ||
| event: React.MouseEvent<HTMLButtonElement>, | ||
| subject: Subject, | ||
| setAnchorEl: React.Dispatch<React.SetStateAction<null | HTMLElement>>, | ||
| setSelectedSubject: React.Dispatch<React.SetStateAction<Subject | null>> | ||
| ) => { | ||
| setAnchorEl(event.currentTarget); | ||
| setSelectedSubject(subject); | ||
| }; | ||
|
|
||
| export const fetchSubjects = async ( | ||
| params: { pointId: string }, | ||
| setListSubjects: React.Dispatch<React.SetStateAction<Subject[]>>, | ||
| setFilteredSubjects: React.Dispatch<React.SetStateAction<Subject[]>> | ||
| ): Promise<Subject[]> => { | ||
| let subjects: Subject[]; | ||
|
|
||
| // Verifica qual função chamar baseado no pointId | ||
| if (params.pointId == "admin") { | ||
| subjects = await GetSubjects(); // Busca todas as disciplinas | ||
| } else { | ||
| subjects = await GetSubjectsByUserId(params.pointId); // Busca as disciplinas pelo userId | ||
| } | ||
|
|
||
| // Ordena os subjects pelo campo 'order' | ||
| subjects.sort((a, b) => a.order - b.order); | ||
|
|
||
| // Atualiza os estados com as disciplinas ordenadas | ||
| setListSubjects(subjects); | ||
| setFilteredSubjects(subjects); | ||
|
|
||
| return subjects; | ||
| }; | ||
|
|
||
| export const handleMenuClose = (setAnchorEl: React.Dispatch<React.SetStateAction<null | HTMLElement>>,) => { | ||
| setAnchorEl(null); | ||
| }; |
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
Oops, something went wrong.