From bb4ff66889b0db0b267675b5928e3f3ee87faaa0 Mon Sep 17 00:00:00 2001
From: Guilherme Eduardo <gegs23@inf.ufpr.br>
Date: Tue, 1 Apr 2025 11:55:24 -0300
Subject: [PATCH] Issue #274: UPDATE filter on resources page
---
src/app/components/ButtonsPages.js | 2 +-
src/app/components/FiltersModal.js | 4 +-
src/app/components/FormFilters.js | 194 ++++++++++++++++-------------
3 files changed, 112 insertions(+), 88 deletions(-)
diff --git a/src/app/components/ButtonsPages.js b/src/app/components/ButtonsPages.js
index 68873491..1d55b204 100644
--- a/src/app/components/ButtonsPages.js
+++ b/src/app/components/ButtonsPages.js
@@ -39,7 +39,7 @@ export default function ButtonsPages({ searchPage, handlePageChange }) {
return (
<div key={index} onClick={() => { handlePageChange(item.title) }}
- className={` flex w-40 h-14 rounded-lg text-center items-center justify-center font-bold normal-case ${searchPage === item.title ? "bg-turquoise text-white-HC-dark-underline" : "bg-ice-HC-dark"} text-darkGray-HC-white`}
+ className={` flex w-40 h-14 rounded-lg text-center items-center justify-center font-bold normal-case outline outline-1 outline-ice-HC-white ${searchPage === item.title ? "bg-turquoise-HC-white hover:bg-darkTurquoise-HC-dark text-white-HC-dark-underline hover:text-white" : "bg-ice-HC-dark hover:bg-darkGray-HC-white hover:text-white-HC-dark-underline"} text-darkGray-HC-white`}
> {tradutor(item.title)} </div>
)
})
diff --git a/src/app/components/FiltersModal.js b/src/app/components/FiltersModal.js
index 6a6bbf24..c9d23a3f 100644
--- a/src/app/components/FiltersModal.js
+++ b/src/app/components/FiltersModal.js
@@ -42,9 +42,9 @@ export default function FiltersModal({
},
}}
>
- <div className='flex flex-col w-[60%] h-[80%] bg-white-HC-dark overflow-x-auto rounded-lg'>
+ <div className='flex flex-col w-[60%] h-[80%] bg-white-HC-dark overflow-x-auto rounded-lg outline outline-1 outline-ice-HC-white'>
<div>
- <div className='fixed z-20 w-[60%] '>
+ <div className='fixed z-20 w-[60%]'>
<div className='flex justify-between bg-white-HC-dark rounded-lg p-4'>
<p className=' text-2xl font-bold text-darkGray-HC-white '>
Filtros de Pesquisa
diff --git a/src/app/components/FormFilters.js b/src/app/components/FormFilters.js
index fb83d5f9..b6cead33 100644
--- a/src/app/components/FormFilters.js
+++ b/src/app/components/FormFilters.js
@@ -10,6 +10,9 @@ import FieldLabel from "../publicar/components/FieldLabel";
import { useRouter, useSearchParams } from "next/navigation";
import { Search } from "@mui/icons-material";
import LocalLibraryIcon from "@mui/icons-material/LocalLibrary";
+import CustomCheckbox from "../publicar/components/CustomCheckbox";
+import CloseIcon from '@mui/icons-material/Close';
+
export default function FormFilters({
@@ -157,92 +160,113 @@ export default function FormFilters({
};
return (
- <form className="mt-12" onSubmit={handleSubmit} onKeyDown={(e) => { if (e.key === "Enter") e.preventDefault() }}>
- <Divider />
- <ButtonsPages searchPage={filterStateDraft.searchClass} handlePageChange={handlePageChange} />
- <Divider />
-
- <p className="font-bold text-darkGray-HC-white text-xl py-2">
- Tipo de recurso
- </p>
- <div className="flex flex-wrap justify-start ml-8">
- {objectTypes.map((object, index) => {
- return (
- <div
- key={index}
- onClick={() => handleObjectType(object)}
- className={`bg-ice-HC-dark hover:bg-ice-HC-dark-hover ${filterStateDraft.objectTypes.some(obj => obj.id === object.id) ? "border-2 border-secondary bg-ice-HC-dark-hover" : "bg-ice-HC-dark"} hover:cursor-pointer h-20 w-20 max-lg:h-20 max-lg:w-20 flex flex-col m-3 items-center p-2 text-center justify-center rounded-lg `}
- >
+ <>
+ <form className="mt-12" onSubmit={handleSubmit} onKeyDown={(e) => { if (e.key === "Enter") e.preventDefault() }}>
+ <Divider />
+ <ButtonsPages searchPage={filterStateDraft.searchClass} handlePageChange={handlePageChange} />
+ <Divider />
+
+ <p className="font-bold text-darkGray-HC-white text-xl py-2">
+ Tipo de recurso
+ </p>
+ <div className="flex flex-wrap justify-start ml-8">
+ {objectTypes.map((object, index) => {
+ return (
<div
- alt={object.name}
- className="w-12 h-12 max-lg:w-8 max-sm:hidden max-lg:h-8 fill-current text-turquoise-HC-underline "
- dangerouslySetInnerHTML={{ __html: object.image }}
- ></div>
- {/* <Image alt={object.name} height={0} width={0} className="w-10 h-10 max-lg:w-8 max-lg:h-8" src={object.image} /> */}
- <span className="text-turquoise-HC-underline text-xs max-lg:text-xs">{object.name}</span>
- </div>
- )
- })}
- </div>
-
- <Divider />
-
- <FieldLabel
- name="Nível de ensino"
- description="(Selecione uma ou mais opções)"
- />
- <FormGroup className="flex flex-wrap mt-5 mb-10">
- {scholarityLevelsAvailable.map((sl, index) => (
- <FormControlLabel
- onChange={handleEducationalStage}
- key={index}
- control={<Checkbox checked={filterStateDraft.educationalStages.some(obj => sl.id === obj.id)} />}
- value={JSON.stringify(sl)}
- label={<span className="text-darkGray-HC-white-underline">{sl.name}</span>}
- />
- ))}
- </FormGroup>
-
- <Divider />
-
- <FieldLabel name="Idiomas do Recurso" />
- <FormGroup className="flex flex-wrap mb-5" row>
- {languagesAvailable?.map((language, index) => (
- <FormControlLabel
- className="w-64"
- onChange={handleLanguagesChange}
- key={index}
- control={<Checkbox checked={filterStateDraft.languages.some(l => l.name === language.name)} />}
- value={JSON.stringify(language)}
- label={<span className="text-darkGray-HC-white-underline">{language.name}</span>}
- />
- ))}
- </FormGroup>
-
- <Divider />
-
- <FieldLabel name="Grandes Áreas" />
-
- <FormGroup className="flex flex-wrap mb-5 " row >
- {subjectsAvailable?.map((subj, index) => (
- <FormControlLabel
- className="w-64"
- onChange={handleFilterSubject}
- key={index}
- control={<Checkbox checked={filterStateDraft.subjects.some(s => s.name === subj.name)} />}
- value={JSON.stringify(subj)}
- label={<span className="text-darkGray-HC-white-underline">{subj.name}</span>}
- />
- ))}
- </FormGroup>
-
-
- <div className="relative ">
- <div className="flex justify-end">
- <Button onClick={handleResetFilters} className="text-darkGray-HC-white normal-case font-semibold text-base hover:bg-ice-HC-dark cursor-pointer mx-2">Remover filtros</Button>
- <Button type="submit" className="bg-turquoise text-white-HC-dark-underline normal-case font-semibold text-base hover:bg-turquoise-hover cursor-pointer">Mostrar resultados</Button>
+ key={index}
+ onClick={() => handleObjectType(object)}
+ className={`
+ ${filterStateDraft.objectTypes.some(obj => obj.id === object.id)
+ ? "border-2 border-turquoise-HC-white bg-lightGray-HC-white text-turquoise-HC-dark-underline"
+ : "bg-ice-HC-dark text-turquoise-HC-white-underline"}
+
+ hover:bg-lightGray-HC-white
+ hover:text-turquoise-HC-dark
+ hover:cursor-pointer
+
+
+
+ h-20 w-20
+ max-lg:h-20 max-lg:w-20
+
+ flex flex-col items-center justify-center
+ m-3 p-2 text-center
+
+ rounded-lg
+ outline outline-1 outline-ice-HC-white
+ `}
+ >
+ <div
+ alt={object.name}
+ className="w-12 h-12 max-lg:w-8 max-sm:hidden max-lg:h-8 fill-current"
+ dangerouslySetInnerHTML={{ __html: object.image }}
+ ></div>
+ {/* <Image alt={object.name} height={0} width={0} className="w-10 h-10 max-lg:w-8 max-lg:h-8" src={object.image} /> */}
+ <span className="text-xs max-lg:text-xs">{object.name}</span>
+ </div>
+ )
+ })}
</div>
- </div>
- </form>
+
+ <Divider />
+
+ <FieldLabel
+ name="Nível de ensino"
+ description="(Selecione uma ou mais opções)"
+ />
+ <FormGroup className="flex flex-wrap mt-5 mb-10">
+ {scholarityLevelsAvailable.map((sl, index) => (
+ <FormControlLabel
+ onChange={handleEducationalStage}
+ key={index}
+ control={< CustomCheckbox checked={filterStateDraft.educationalStages.some(obj => sl.id === obj.id)} />}
+ value={JSON.stringify(sl)}
+ label={<span className="text-darkGray-HC-white">{sl.name}</span>}
+ />
+ ))}
+ </FormGroup>
+
+ <Divider />
+
+ <FieldLabel name="Idiomas do Recurso" />
+ <FormGroup className="flex flex-wrap mb-5" row>
+ {languagesAvailable?.map((language, index) => (
+ <FormControlLabel
+ className="w-64"
+ onChange={handleLanguagesChange}
+ key={index}
+ control={< CustomCheckbox checked={filterStateDraft.languages.some(l => l.name === language.name)} />}
+ value={JSON.stringify(language)}
+ label={<span className="text-darkGray-HC-white">{language.name}</span>}
+ />
+ ))}
+ </FormGroup>
+
+ <Divider />
+
+ <FieldLabel name="Grandes Áreas" />
+
+ <FormGroup className="flex flex-wrap mb-5 " row >
+ {subjectsAvailable?.map((subj, index) => (
+ <FormControlLabel
+ className="w-64"
+ onChange={handleFilterSubject}
+ key={index}
+ control={< CustomCheckbox checked={filterStateDraft.subjects.some(s => s.name === subj.name)} />}
+ value={JSON.stringify(subj)}
+ label={<span className="text-darkGray-HC-white">{subj.name}</span>}
+ />
+ ))}
+ </FormGroup>
+
+ <div className="fixed bottom-[10%] z-20 bg-white-HC-dark p-4 w-[56%] flex justify-end">
+ <div className="flex">
+ <Button onClick={handleResetFilters} className="text-darkGray-HC-white-underline normal-case font-semibold text-base hover:bg-ice-HC-dark cursor-pointer mx-2 outline outline-1 outline-ice-HC-white">Remover filtros</Button>
+ <Button type="submit" className="bg-turquoise-HC-white hover:bg-darkTurquoise-HC-dark text-white-HC-dark-underline hover:text-white normal-case font-semibold text-base hover:bg-turquoise-hover cursor-pointer outline outline-1 outline-ice-HC-white">Mostrar resultados</Button>
+ </div>
+ </div>
+ </form>
+
+ </>
)
}
\ No newline at end of file
--
GitLab