Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Publications start and end years filter [RES-15] #17

Open
wants to merge 18 commits into
base: develop
Choose a base branch
from
Open

Publications start and end years filter [RES-15] #17

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
5127094
<add> start and end years to publications filter
karensamara Mar 22, 2024
55d7678
<fix> styling in publications filter
karensamara Mar 22, 2024
cb1481a
<fix> api getPublications call url
karensamara Mar 22, 2024
50f0e81
<fix> at publications grouping and filter
karensamara Mar 22, 2024
102ad70
<add> debounce with setTimeOut
karensamara Mar 25, 2024
9b44934
<fix> debounce call only when startYear and endYear
karensamara Mar 25, 2024
c89a4ec
<fix> debounce code logic
karensamara Mar 26, 2024
cb79945
<add> start and end years filter to projects and changes to filters s…
karensamara Mar 26, 2024
4f63ac0
<update> projects endpoint call to filter by year
karensamara Mar 26, 2024
a39f4a2
<fix> publications page styling
karensamara Mar 26, 2024
3c1944a
<fix> cleaning code
karensamara Mar 26, 2024
71ed774
add filters by year for post-graduation orientation report
karensamara Apr 2, 2024
83ea83b
fix styling and alignment errors at publications, projects and post g…
karensamara Apr 3, 2024
06efaf5
<fix> spacing around tables filter
karensamara Apr 11, 2024
389e20c
<fix> styling in publications page
karensamara Apr 12, 2024
0d75762
<fix> styling for projects page
karensamara Apr 12, 2024
2ae3290
<fix> styling for orientações page
karensamara Apr 12, 2024
90d02e1
<add> new debouncing state to mitigate code duplication
karensamara Apr 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 80 additions & 4 deletions src/pages/Projects/Projects/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Divider, FormControlLabel, Grid } from '@mui/material';
import { Divider, FormControl, FormControlLabel, Grid, TextField } from '@mui/material';
import { GridColDef, ptBR } from '@mui/x-data-grid';
import { ChangeEvent, useEffect, useState } from 'react';
import { ChangeEvent, useEffect, useRef, useState } from 'react';
import { toast, useNavbar } from '@cincoders/cinnamon';
import { CustomToolbar } from '../../../components/CustomToolbar';
import { MainGrid, TableDiv, GridContainer, ProfessorsGrid } from '../../../components/TableStyles/styles';
Expand Down Expand Up @@ -129,13 +129,24 @@ function Table() {
const [loading, setLoading] = useState<boolean>(true);
const [checkedYear, setCheckedYear] = useState<boolean>(true);
const [checkedProfessor, setCheckedProfessor] = useState<boolean>(false);
const [startYear, setStartYear] = useState<number>();
const [debouncedStartYear, setDebouncedStartYear] = useState<number | null>(null);
const [debouncedEndYear, setDebouncedEndYear] = useState<number | null>(null);
const [endYear, setEndYear] = useState<number>();
const timeoutStartRef = useRef<number | null>(null);
const timeoutEndRef = useRef<number | null>(null);

useEffect(() => {
async function loadData() {
setRows([]);
setLoading(true);
try {
const response = await ProjectsService.getProjects(checkedYear, checkedProfessor);
const response = await ProjectsService.getProjects(
checkedYear,
checkedProfessor,
debouncedStartYear || 1950,
debouncedEndYear || new Date().getFullYear(),
);
if (response.status === 200) {
const { data } = response;

Expand Down Expand Up @@ -180,7 +191,7 @@ function Table() {
}
}
loadData();
}, [checkedYear, checkedProfessor]);
}, [checkedYear, checkedProfessor, debouncedEndYear, debouncedStartYear]);

const handleChangeYear = (event: ChangeEvent<HTMLInputElement>) => {
setCheckedYear(event.target.checked);
Expand All @@ -190,6 +201,32 @@ function Table() {
setCheckedProfessor(event.target.checked);
};

const handleStartYearChange = (event: ChangeEvent<HTMLInputElement>) => {
const newStartYear = Number(event.target.value);

setStartYear(newStartYear);

if (timeoutStartRef.current) {
clearTimeout(timeoutStartRef.current);
}
timeoutStartRef.current = window.setTimeout(() => {
setDebouncedStartYear(newStartYear);
}, 2000);
};

const handleEndYearChange = (event: ChangeEvent<HTMLInputElement>) => {
const newEndYear = Number(event.target.value);

setEndYear(newEndYear);

if (timeoutEndRef.current) {
clearTimeout(timeoutEndRef.current);
}

timeoutEndRef.current = window.setTimeout(() => {
setDebouncedEndYear(newEndYear);
}, 2000);
};
return (
<GridContainer>
<ButtonsGrid>
Expand All @@ -199,8 +236,47 @@ function Table() {
<FormControlLabel
control={<RedSwitch checked={checkedProfessor} onChange={handleChangeProfessor} />}
label='Professor'
sx={{ padding: '5px' }}
/>
</Grid>
<Grid sx={{ paddingX: '5%', display: 'inline-block' }}>
<Divider> Filtrar </Divider>
<Grid container spacing={1} sx={{ width: '100%', marginX: 0, marginBottom: '5px' }}>
<Grid item xs={12} md={6}>
<FormControl fullWidth>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<span style={{ display: 'block', width: '90px' }}>Ano Inicial:</span>
<TextField
id='start-year'
value={startYear}
onChange={handleStartYearChange}
variant='outlined'
type='number'
size='small'
inputProps={{ min: 1950, max: new Date().getFullYear() }}
sx={{ paddingBottom: '5px' }}
/>
</div>
</FormControl>
</Grid>
<Grid item xs={12} md={6}>
<FormControl fullWidth>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<span style={{ display: 'block', width: '90px' }}>Ano Final:</span>
<TextField
id='end-year'
value={endYear}
onChange={handleEndYearChange}
size='small'
variant='outlined'
type='number'
inputProps={{ min: 1950, max: new Date().getFullYear() }}
/>
</div>
</FormControl>
</Grid>
</Grid>
</Grid>
</ButtonsGrid>
<TableDiv>
<MainGrid
Expand Down
134 changes: 121 additions & 13 deletions src/pages/Publications/Publications/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { ChangeEvent, useEffect, useState } from 'react';
import { ChangeEvent, useEffect, useRef, useState } from 'react';
import { GridColDef, ptBR } from '@mui/x-data-grid';
import { Divider, FormControlLabel, Grid } from '@mui/material';
import { Divider, FormControl, FormControlLabel, Grid, TextField } from '@mui/material';
import { toast, useNavbar } from '@cincoders/cinnamon';
import { showErrorStatus } from '../../../utils/showErrorStatus';
import { CustomToolbar } from '../../../components/CustomToolbar';
Expand Down Expand Up @@ -178,6 +178,24 @@ function Table() {
const [checkedYear, setCheckedYear] = useState<boolean>(true);
const [checkedArticles, setCheckedArticles] = useState<boolean>(true);
const [checkedConferences, setCheckedConferences] = useState<boolean>(true);
const [startYear, setStartYear] = useState<number>();
const [debouncedStartYear, setDebouncedStartYear] = useState<number | null>(null);
const [debouncedEndYear, setDebouncedEndYear] = useState<number | null>(null);
const [endYear, setEndYear] = useState<number>();
const timeoutStartRef = useRef<number | null>(null);
const timeoutEndRef = useRef<number | null>(null);

useEffect(
() => () => {
if (timeoutStartRef.current) {
clearTimeout(timeoutStartRef.current);
}
if (timeoutEndRef.current) {
clearTimeout(timeoutEndRef.current);
}
},
[],
);

useEffect(() => {
async function loadData() {
Expand All @@ -189,6 +207,8 @@ function Table() {
checkedProfessor,
checkedArticles,
checkedConferences,
debouncedStartYear || 1950,
debouncedEndYear || new Date().getFullYear(),
);
if (response.status === 200) {
const { data } = response;
Expand Down Expand Up @@ -245,7 +265,7 @@ function Table() {
}
}
loadData();
}, [checkedYear, checkedProfessor, checkedArticles, checkedConferences]);
}, [checkedYear, checkedProfessor, checkedArticles, checkedConferences, debouncedEndYear, debouncedStartYear]);

const handleChangeYear = (event: ChangeEvent<HTMLInputElement>) => {
setCheckedYear(event.target.checked);
Expand All @@ -263,27 +283,115 @@ function Table() {
setCheckedConferences(event.target.checked);
};

const handleStartYearChange = (event: ChangeEvent<HTMLInputElement>) => {
const newStartYear = Number(event.target.value);

setStartYear(newStartYear);

if (timeoutStartRef.current) {
clearTimeout(timeoutStartRef.current);
}
timeoutStartRef.current = window.setTimeout(() => {
setDebouncedStartYear(newStartYear);
}, 2000);
};

const handleEndYearChange = (event: ChangeEvent<HTMLInputElement>) => {
const newEndYear = Number(event.target.value);

setEndYear(newEndYear);

if (timeoutEndRef.current) {
clearTimeout(timeoutEndRef.current);
}

timeoutEndRef.current = window.setTimeout(() => {
setDebouncedEndYear(newEndYear);
}, 2000);
};

return (
<GridContainer>
<ButtonsGrid>
<Grid>
<Divider> Agrupar </Divider>
<FormControlLabel control={<RedSwitch checked={checkedYear} onChange={handleChangeYear} />} label='Ano' />
<FormControlLabel
control={<RedSwitch checked={checkedYear} onChange={handleChangeYear} />}
label='Ano'
sx={{ padding: '5px' }}
/>
<FormControlLabel
control={<RedSwitch checked={checkedProfessor} onChange={handleChangeProfessor} />}
label='Professor'
sx={{ padding: '5px' }}
/>
</Grid>
<Grid sx={{ marginLeft: '5%' }}>
<Grid sx={{ paddingX: '5%', display: 'inline-block', marginBottom: '0.5rem' }}>
<Divider> Filtrar </Divider>
<FormControlLabel
control={<RedSwitch checked={checkedArticles} onChange={handleChangeArticles} />}
label='Periódicos'
/>
<FormControlLabel
control={<RedSwitch checked={checkedConferences} onChange={handleChangeConferences} />}
label='Conferências'
/>
<Grid container spacing={3} sx={{ width: '100%', marginX: 0 }}>
<Grid item xs={12} sm={6} lg={5} container>
<Grid item xs={12} lg={6}>
<FormControlLabel
control={<RedSwitch checked={checkedArticles} onChange={handleChangeArticles} />}
label='Periódicos'
sx={{ padding: '5px' }}
/>
</Grid>
<Grid item xs={12} lg={6}>
<FormControlLabel
control={<RedSwitch checked={checkedConferences} onChange={handleChangeConferences} />}
label='Conferências'
sx={{ padding: '5px' }}
/>
</Grid>
</Grid>
<Grid item container xs={12} sm={6} lg={7} spacing={1}>
<Grid item xs={12} lg={6}>
<FormControl fullWidth>
<div
style={{
display: 'flex',
alignItems: 'center',
}}
>
<span style={{ display: 'block', width: '90px' }}>Ano Inicial:</span>
<TextField
id='start-year'
value={startYear}
onChange={handleStartYearChange}
variant='outlined'
type='number'
size='small'
inputProps={{ min: 1950, max: new Date().getFullYear() }}
sx={{ paddingBottom: '5px' }}
/>
</div>
</FormControl>
</Grid>
<Grid item xs={12} lg={6}>
<FormControl fullWidth>
<div
style={{
display: 'flex',
alignItems: 'center',
}}
>
<span style={{ display: 'block', width: '90px' }}>Ano Final:</span>
<TextField
id='end-year'
value={endYear}
onChange={handleEndYearChange}
size='small'
variant='outlined'
type='number'
inputProps={{ min: 1950, max: new Date().getFullYear() }}
sx={{ paddingBottom: '5px' }}
/>
</div>
</FormControl>
</Grid>
</Grid>
</Grid>
</Grid>
</ButtonsGrid>
<TableDiv>
Expand Down
Loading