Publications start and end years filter [RES-15]

src/components/InputYear/styles.ts

@@ -0,0 +1,76 @@
+import styled from 'styled-components';
+
+export const TextInputWrapper = styled.div`
+ position: relative;
+ width: 90px;
+ // margin: 0.5rem;
+ --accent-color: red;
+
+ &:before,
+ &:after {
+ content: '';
+ left: 0;
+ right: 0;
+ position: absolute;
+ pointer-events: none;
+ bottom: -1px;
+ z-index: 4;
+ width: 100%;
+ transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+ transform 250ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+ }
+
+ &:before {
+ border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+ }
+
+ &:focus-within:before {
+ border-bottom: 1px solid var(--accent-color);
+ transform: scaleX(1);
+ }
+
+ &:focus-within:after {
+ border-bottom: 2px solid var(--accent-color);
+ transform: scaleX(1);
+ }
+
+ &:after {
+ transform: scaleX(0);
+ will-change: transform;
+ border-bottom: 2px solid var(--accent-color);
+ border-bottom-color: var(--accent-color);
+ }
+`;
+
+export const TextInput = styled.input`
+ border-radius: 5px 5px 0px 0px;
+ box-shadow: 0px 2px 5px rgb(35 35 35 / 30%);
+ max-height: 36px;
+ background-color: white;
+ transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
+ transition-duration: 200ms;
+ transition-property: background-color;
+ color: black;
+ font-size: 14px;
+ font-weight: 500;
+ padding: 12px;
+ width: 100%;
+ border-top: white;
+ border-left: none;
+ border-bottom: none;
+ border-right: none;
+ outline: none;
+
+ &:focus,
+ &:active {
+ outline: none;
+ }
+
+ ${TextInputWrapper}:focus-within & {
+ background-color: white;
+ }
+
+ ${TextInputWrapper}:focus-within &::placeholder {
+ opacity: 0;
+ }
+`;

src/pages/Projects/Projects/index.tsx

@@ -1,4 +1,4 @@
-import { Divider, FormControlLabel, Grid } from '@mui/material';
+import { Divider, FormControl, FormControlLabel, Grid } from '@mui/material';
 import { GridColDef, ptBR } from '@mui/x-data-grid';
 import { ChangeEvent, useEffect, useState } from 'react';
 import { toast, useNavbar } from '@cincoders/cinnamon';
@@ -12,6 +12,8 @@ import { Projects } from '../../../types/Projects.d';
 import { Links } from '../../../types/enums';
 import { ButtonsGrid } from '../../../components/ButtonsGrid/styles';
 import { showErrorStatus } from '../../../utils/showErrorStatus';
+import { TextInput, TextInputWrapper } from '../../../components/InputYear/styles';
+import useDebouncedState from '../../../utils/useDebouncedState';
 
 const columns: GridColDef[] = [
  {
@@ -129,13 +131,20 @@ function Table() {
  const [loading, setLoading] = useState<boolean>(true);
  const [checkedYear, setCheckedYear] = useState<boolean>(true);
  const [checkedProfessor, setCheckedProfessor] = useState<boolean>(false);
+ const [startYear, debouncedStartYear, handleStartYearChange] = useDebouncedState();
+ const [endYear, debouncedEndYear, handleEndYearChange] = useDebouncedState();
 
  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;
 
@@ -180,7 +189,7 @@ function Table() {
  }
  }
  loadData();
- }, [checkedYear, checkedProfessor]);
+ }, [checkedYear, checkedProfessor, debouncedEndYear, debouncedStartYear]);
 
  const handleChangeYear = (event: ChangeEvent<HTMLInputElement>) => {
  setCheckedYear(event.target.checked);
@@ -192,14 +201,59 @@ function Table() {
 
  return (
  <GridContainer>
- <ButtonsGrid>
- <Grid>
+ <ButtonsGrid marginBottom={{ xs: '8px', sm: '0.5rem' }}>
+ <Grid sx={{ width: '260px' }}>
  <Divider> Agrupar </Divider>
- <FormControlLabel control={<RedSwitch checked={checkedYear} onChange={handleChangeYear} />} label='Ano' />
- <FormControlLabel
- control={<RedSwitch checked={checkedProfessor} onChange={handleChangeProfessor} />}
- label='Professor'
- />
+ <Grid container sx={{ width: '100%' }}>
+ <Grid item xs={12} lg={5} sx={{ paddingY: '' }}>
+ <FormControlLabel control={<RedSwitch checked={checkedYear} onChange={handleChangeYear} />} label='Ano' />
+ </Grid>
+ <Grid item xs={12} lg={5} paddingY={{ xs: '5px', md: '0' }}>
+ <FormControlLabel
+ control={<RedSwitch checked={checkedProfessor} onChange={handleChangeProfessor} />}
+ label='Professor'
+ />
+ </Grid>
+ </Grid>
+ </Grid>
+ <Grid sx={{ paddingX: '5%', display: 'inline-block' }}>
+ <Divider> Filtrar </Divider>
+ <Grid container columnSpacing={2} rowSpacing={1} sx={{ width: '100%', marginX: '-10px' }}>
+ <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>
+ <TextInputWrapper>
+ <TextInput
+ id='start-year'
+ value={startYear}
+ onChange={handleStartYearChange}
+ type='number'
+ min='1950'
+ max={new Date().getFullYear()}
+ />
+ </TextInputWrapper>
+ </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>
+ <TextInputWrapper>
+ <TextInput
+ id='end-year'
+ value={endYear}
+ onChange={handleEndYearChange}
+ type='number'
+ min='1950'
+ max={new Date().getFullYear()}
+ />
+ </TextInputWrapper>
+ </div>
+ </FormControl>
+ </Grid>
+ </Grid>
  </Grid>
  </ButtonsGrid>
  <TableDiv>

src/pages/Publications/Publications/index.tsx

@@ -1,6 +1,6 @@
 import { ChangeEvent, useEffect, useState } from 'react';
 import { GridColDef, ptBR } from '@mui/x-data-grid';
-import { Divider, FormControlLabel, Grid } from '@mui/material';
+import { Divider, FormControl, FormControlLabel, Grid } from '@mui/material';
 import { toast, useNavbar } from '@cincoders/cinnamon';
 import { showErrorStatus } from '../../../utils/showErrorStatus';
 import { CustomToolbar } from '../../../components/CustomToolbar';
@@ -12,6 +12,8 @@ import { RedSwitch } from '../../../components/RedSwitch';
 import { Publications } from '../../../types/Publications.d';
 import { ButtonsGrid } from '../../../components/ButtonsGrid/styles';
 import { Links } from '../../../types/enums';
+import { TextInput, TextInputWrapper } from '../../../components/InputYear/styles';
+import useDebouncedState from '../../../utils/useDebouncedState';
 
 const columns: GridColDef[] = [
  {
@@ -179,6 +181,9 @@ function Table() {
  const [checkedArticles, setCheckedArticles] = useState<boolean>(true);
  const [checkedConferences, setCheckedConferences] = useState<boolean>(true);
 
+ const [startYear, debouncedStartYear, handleStartYearChange] = useDebouncedState();
+ const [endYear, debouncedEndYear, handleEndYearChange] = useDebouncedState();
+
  useEffect(() => {
  async function loadData() {
  setRows([]);
@@ -189,6 +194,8 @@ function Table() {
  checkedProfessor,
  checkedArticles,
  checkedConferences,
+ debouncedStartYear || 1950,
+ debouncedEndYear || new Date().getFullYear(),
  );
  if (response.status === 200) {
  const { data } = response;
@@ -245,7 +252,7 @@ function Table() {
  }
  }
  loadData();
- }, [checkedYear, checkedProfessor, checkedArticles, checkedConferences]);
+ }, [checkedYear, checkedProfessor, checkedArticles, checkedConferences, debouncedEndYear, debouncedStartYear]);
 
  const handleChangeYear = (event: ChangeEvent<HTMLInputElement>) => {
  setCheckedYear(event.target.checked);
@@ -266,24 +273,89 @@ function Table() {
  return (
  <GridContainer>
  <ButtonsGrid>
- <Grid>
+ <Grid marginBottom={{ xs: '90px', sm: '0.5rem' }}>
  <Divider> Agrupar </Divider>
- <FormControlLabel control={<RedSwitch checked={checkedYear} onChange={handleChangeYear} />} label='Ano' />
- <FormControlLabel
- control={<RedSwitch checked={checkedProfessor} onChange={handleChangeProfessor} />}
- label='Professor'
- />
+ <Grid container sx={{ width: '100%' }}>
+ <Grid item xs={12} lg={5} padding={{ sm: '2px', md: '0' }}>
+ <FormControlLabel control={<RedSwitch checked={checkedYear} onChange={handleChangeYear} />} label='Ano' />
+ </Grid>
+ <Grid item xs={12} lg={7}>
+ <FormControlLabel
+ control={<RedSwitch checked={checkedProfessor} onChange={handleChangeProfessor} />}
+ label='Professor'
+ />
+ </Grid>
+ </Grid>
  </Grid>
- <Grid sx={{ marginLeft: '5%' }}>
+ <Grid sx={{ marginX: '5%' }}>
  <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 sx={{ width: '100%', marginX: 0 }}>
+ <Grid item container columnSpacing={1} xs={12} sm={6}>
+ <FormControlLabel
+ control={<RedSwitch checked={checkedArticles} onChange={handleChangeArticles} />}
+ label='Periódicos'
+ />
+ <FormControlLabel
+ control={<RedSwitch checked={checkedConferences} onChange={handleChangeConferences} />}
+ label='Conferências'
+ />
+ </Grid>
+ <Grid
+ rowSpacing={1}
+ item
+ container
+ columnSpacing={1}
+ alignItems='center'
+ justifyContent='center'
+ xs={12}
+ sm={6}
+ >
+ <Grid item xs={12} lg={6}>
+ <FormControl fullWidth>
+ <div
+ style={{
+ display: 'flex',
+ alignItems: 'center',
+ }}
+ >
+ <span style={{ display: 'block', width: '100px' }}>Ano Inicial:</span>
+ <TextInputWrapper>
+ <TextInput
+ id='start-year'
+ value={startYear}
+ onChange={handleStartYearChange}
+ type='number'
+ min='1950'
+ max={new Date().getFullYear()}
+ />
+ </TextInputWrapper>
+ </div>
+ </FormControl>
+ </Grid>
+ <Grid item xs={12} lg={6}>
+ <FormControl fullWidth>
+ <div
+ style={{
+ display: 'flex',
+ alignItems: 'center',
+ }}
+ >
+ <span style={{ display: 'block', width: '100px' }}>Ano Final:</span>
+ <TextInputWrapper>
+ <TextInput
+ id='end-year'
+ value={endYear}
+ onChange={handleEndYearChange}
+ type='number'
+ min='1950'
+ max={new Date().getFullYear()}
+ />
+ </TextInputWrapper>
+ </div>
+ </FormControl>
+ </Grid>
+ </Grid>
+ </Grid>
  </Grid>
  </ButtonsGrid>
  <TableDiv>