From 3d0e9da3dbf7ad4f7d95ff282cbd7d1004292214 Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Wed, 9 Dec 2020 12:03:14 -0300
Subject: [PATCH] Trying to fix filters from the search page
---
.../SearchEPCompCurriculum.js | 11 +-
.../SearchExpansionPanel/SearchEPIdiomas.js | 11 +-
.../SearchExpansionPanel/SearchEPTiposRec.js | 11 +-
.../SearchExpansionPanel.js | 15 ++-
.../SearchExpansionPanel/SesrchEPEtapasEns.js | 11 +-
src/Pages/Search.js | 106 ++++++++++--------
6 files changed, 108 insertions(+), 57 deletions(-)
diff --git a/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js b/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js
index d55d6e63..fef89eec 100644
--- a/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js
+++ b/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js
@@ -17,7 +17,7 @@ const useStyles = makeStyles(theme => ({
}
}));
-export default function SearchEPCompCurriculum() {
+export default function SearchEPCompCurriculum(props) {
const classes = useStyles();
const [checked, setChecked] = React.useState([0]);
@@ -31,7 +31,16 @@ export default function SearchEPCompCurriculum() {
newChecked.splice(currentIndex, 1);
}
+ let filterString = "";
+
setChecked(newChecked);
+ for(let i = 0; i < newChecked.length; i++){
+ if(newChecked[i] != 0){
+ filterString = filterString + `&subjects[]=${newChecked[i]}`
+ console.log(filterString)
+ }
+ }
+ props.onChange("LearningObject", filterString)
};
const filtrosComponente = [
{ exemplo: "Arte", value: "3" },
diff --git a/src/Components/SearchExpansionPanel/SearchEPIdiomas.js b/src/Components/SearchExpansionPanel/SearchEPIdiomas.js
index a9426aec..73d04d57 100644
--- a/src/Components/SearchExpansionPanel/SearchEPIdiomas.js
+++ b/src/Components/SearchExpansionPanel/SearchEPIdiomas.js
@@ -17,7 +17,7 @@ const useStyles = makeStyles(theme => ({
}
}));
-export default function SearchEPIdiomas() {
+export default function SearchEPIdiomas(props) {
const classes = useStyles();
const [checked, setChecked] = React.useState([0]);
@@ -32,6 +32,15 @@ export default function SearchEPIdiomas() {
}
setChecked(newChecked);
+ let filterString = "";
+
+ for(let i = 0; i < newChecked.length; i++){
+ if(newChecked[i] != 0){
+ filterString = filterString + `&languages[]=${newChecked[i]}`
+ console.log(filterString)
+ }
+ }
+ props.onChange("LearningObject", filterString)
};
const filtrosIdiomas = [
{ value: "5", exemplo: "Alemão" },
diff --git a/src/Components/SearchExpansionPanel/SearchEPTiposRec.js b/src/Components/SearchExpansionPanel/SearchEPTiposRec.js
index 0d36afff..e1a3f999 100644
--- a/src/Components/SearchExpansionPanel/SearchEPTiposRec.js
+++ b/src/Components/SearchExpansionPanel/SearchEPTiposRec.js
@@ -17,7 +17,7 @@ const useStyles = makeStyles(theme => ({
}
}));
-export default function SearchEPTiposRec() {
+export default function SearchEPTiposRec(props) {
const classes = useStyles();
const [checked, setChecked] = React.useState([0]);
@@ -31,7 +31,16 @@ export default function SearchEPTiposRec() {
newChecked.splice(currentIndex, 1);
}
+ let filterString = "";
+
setChecked(newChecked);
+ for(let i = 0; i < newChecked.length; i++){
+ if(newChecked[i] != 0){
+ filterString = filterString + `&object_types[]=${newChecked[i]}`
+ console.log(filterString)
+ }
+ }
+ props.onChange("LearningObject", filterString)
};
const filtrosTipos = [
{ value: "5", exemplo: "Animação" },
diff --git a/src/Components/SearchExpansionPanel/SearchExpansionPanel.js b/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
index 32c9b72e..88288505 100644
--- a/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
+++ b/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
@@ -62,7 +62,7 @@ const ExpansionPanelDetails = withStyles(theme => ({
}
}))(MuiExpansionPanelDetails);
-export default function SearchExpansionPanel() {
+export default function SearchExpansionPanel(props) {
return (
<div>
<link
@@ -86,6 +86,7 @@ export default function SearchExpansionPanel() {
</Typography>
</ExpansionPanelSummary>
</ExpansionPanel>
+
<ExpansionPanel square>
<ExpansionPanelSummary
expandIcon ={<ExpandMoreIcon/>}
@@ -97,10 +98,11 @@ export default function SearchExpansionPanel() {
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Typography>
- <SearchEPCompCurriculum />
+ <SearchEPCompCurriculum onChange={props.onChange}/>
</Typography>
</ExpansionPanelDetails>
</ExpansionPanel>
+
<ExpansionPanel square>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
@@ -110,9 +112,10 @@ export default function SearchExpansionPanel() {
<Typography>Tipos de Recurso</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
- <SearchEPTiposRec />
+ <SearchEPTiposRec onChange={props.onChange}/>
</ExpansionPanelDetails>
</ExpansionPanel>
+
<ExpansionPanel square>
<ExpansionPanelSummary
aria-controls="panel4d-content"
@@ -122,9 +125,10 @@ export default function SearchExpansionPanel() {
<Typography>Etapas de Ensino</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
- <SearchEPEtapasEns />
+ <SearchEPEtapasEns onChange={props.onChange}/>
</ExpansionPanelDetails>
</ExpansionPanel>
+
<ExpansionPanel square>
<ExpansionPanelSummary
aria-controls="panel5d-content"
@@ -134,9 +138,10 @@ export default function SearchExpansionPanel() {
<Typography>Idiomas</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
- <SearchEPIdiomas />
+ <SearchEPIdiomas onChange={props.onChange}/>
</ExpansionPanelDetails>
</ExpansionPanel>
+
<ExpansionPanel square>
<ExpansionPanelSummary
aria-controls="panel6d-content"
diff --git a/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js b/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js
index b0241d32..022398b7 100644
--- a/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js
+++ b/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js
@@ -17,7 +17,7 @@ const useStyles = makeStyles(theme => ({
}
}));
-export default function SearchEPEtapasEns() {
+export default function SearchEPEtapasEns(props) {
const classes = useStyles();
const [checked, setChecked] = React.useState([0]);
@@ -32,6 +32,15 @@ export default function SearchEPEtapasEns() {
}
setChecked(newChecked);
+ let filterString = "";
+
+ for(let i = 0; i < newChecked.length; i++){
+ if(newChecked[i] != 0){
+ filterString = filterString + `&educational_stages[]=${newChecked[i]}`
+ console.log(filterString)
+ }
+ }
+ props.onChange("LearningObject", filterString)
};
const filtrosEtapas = [
{ value: "1", exemplo: "Educação Infantil" },
diff --git a/src/Pages/Search.js b/src/Pages/Search.js
index bdf155c2..2902b2b5 100644
--- a/src/Pages/Search.js
+++ b/src/Pages/Search.js
@@ -18,11 +18,11 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useEffect, useState, useContext } from "react";
import axios from "axios";
-import {apiDomain} from '../env';
+import { apiDomain } from '../env';
import { Link } from "react-router-dom";
import styled from "styled-components";
import Paper from "@material-ui/core/Paper";
-
+import LoadingSpinner from '../Components/LoadingSpinner';
// import ResourceCard from '../Components/ResourceCard'
// import CollectionCard from '../Components/CollectionCard'
// import UserCard from '../Components/UserCard'
@@ -39,26 +39,30 @@ import ResourceCardFunction from "../Components/ResourceCardFunction";
import CollectionCardFunction from "../Components/CollectionCardFunction";
import ContactCard from "../Components/ContactCard";
+let order = "review_average";
+let currFilter = "";
+
export default function Search(props) {
const { state, dispatch } = useContext(Store);
const [resultsResource, setResultsResource] = useState([]);
const [resultsCollection, setResultsCollection] = useState([]);
const [resultsUser, setResultsUser] = useState([]);
const [page] = useState(0);
+ const [isloading, setIsLoading] = useState(false);
const [resultsPerPage, setResultsPerPage] = useState(6);
- const [order] = useState("score");
+ const [totalResults, setTotalResults] = useState(0);
const [options] = React.useState([
{ label: "Recursos", value: "LearningObject" },
{ label: "Coleções", value: "Collection" },
{ label: "Usuários", value: "User" },
]);
const [ordenar] = useState([
- { label: "Mais Estrelas" },
- { label: "Mais Relevante" },
- { label: "Mais Baixados" },
- { label: "Mais Favoritados" },
- { label: "Mais Recentes" },
- { label: "Ordem Alfabética" },
+ { label: "Mais Estrelas", value: "review_average" },
+ { label: "Mais Relevante", value: "score" },
+ { label: "Mais Baixados", value: "downloads" },
+ { label: "Mais Favoritados", value: "likes" },
+ { label: "Mais Recentes", value: "publicationdesc" },
+ { label: "Ordem Alfabética", value: "title" },
]);
const [option, setOption] = useState(
@@ -68,20 +72,21 @@ export default function Search(props) {
console.log(option);
console.log(state.search.class);
- const collectStuff = (tipoBusca) => {
- console.log(tipoBusca);
-
+ const collectStuff = (tipoBusca, filtro) => {
+ setIsLoading(true);
+ if(filtro || filtro == "")
+ currFilter = filtro;
axios
.get(
- `${apiUrl}/search?page=${page}&results_per_page=${resultsPerPage}&order=${order}&query=${state.search.query}&search_class=${tipoBusca}`
+ `${apiUrl}/search?page=${page}&results_per_page=${resultsPerPage}&order=${order}&query=${state.search.query}${currFilter ? currFilter : ""}&search_class=${tipoBusca}`
)
.then((res) => {
if (tipoBusca === "LearningObject") setResultsResource(res.data);
else if (tipoBusca === "Collection") setResultsCollection(res.data);
else if (tipoBusca === "User") setResultsUser(res.data);
setOptionResult(tipoBusca);
- console.log(res.data);
- console.log(tipoBusca);
+ setTotalResults(res.headers["x-total-count"]);
+ setIsLoading(false);
});
};
@@ -169,21 +174,14 @@ export default function Search(props) {
<span style={{ alignSelf: "center", marginRight: 10 }}>
MOSTRAR:
</span>
- <Select
- style={{ backgroundColor: "transparent", border: "none" }}
- value={option}
+ <Dropdown
+ options={options}
onChange={(e) => {
- console.log(e.currentTarget.value);
- setOption(e.currentTarget.value);
- collectStuff(e.currentTarget.value);
+ setOption(e.value);
+ collectStuff(e.value, "");
}}
- >
- {options.map((item) => (
- <option key={item.value} value={item.value}>
- {item.label}
- </option>
- ))}
- </Select>
+ placeholder="Select an type"
+ />
</div>
</Grid>
<Grid
@@ -195,7 +193,9 @@ export default function Search(props) {
justifyContent: "center",
}}
>
- <div>Número</div>
+ <div>
+ Resultados encontrados: {totalResults}
+ </div>
</Grid>
<Grid
item
@@ -225,8 +225,9 @@ export default function Search(props) {
</span>
<Dropdown
options={ordenar}
- onChange={() => {
- collectStuff(ordenar.label);
+ onChange={(e) => {
+ order = e.value;
+ collectStuff(optionResult, currFilter);
}}
placeholder="Select an order "
/>
@@ -244,6 +245,7 @@ export default function Search(props) {
<CollectionCardFunction
name={card.name}
rating={card.score}
+ id={card.id}
author={card.owner.name}
description={card.description}
thumbnails={card.items_thumbnails}
@@ -278,11 +280,12 @@ export default function Search(props) {
</Grid>
</GridBuscaCollection>
)}
+
{optionResult === "LearningObject" && (
<GridBuscaResource container spacing={2}>
<Grid item md={3} xs={12}>
<Paper elevation={4} square>
- <SearchExpansionPanel />
+ <SearchExpansionPanel onChange={collectStuff}/>
</Paper>
</Grid>
<Grid item md={9} xs={12}>
@@ -290,13 +293,19 @@ export default function Search(props) {
{resultsResource.map((card) => (
<Grid item md={4} xs={6} key={card.id}>
<ResourceCardFunction
- name={card.name}
- rating={card.score}
- type={card.object_type}
- description={card.description}
+ avatar={card.publisher.avatar}
+ id={card.id}
thumbnail={card.thumbnail}
+ type={card.object_type ? card.object_type : "Outros"}
+ title={card.name}
+ published={card.state === "published" ? true : false}
+ likeCount={card.likes_count}
+ liked={card.liked}
+ rating={card.review_average}
author={card.author}
- avatar={card.publisher.avatar}
+ tags={card.educational_stages}
+ href={"/recurso/" + card.id}
+ downloadableLink={card.default_attachment_location}
/>
</Grid>
))}
@@ -327,6 +336,7 @@ export default function Search(props) {
</Grid>
</GridBuscaResource>
)}
+
{optionResult === "User" && (
<GridBuscaUser container spacing={2}>
<Grid item md={12} xs={12}>
@@ -334,16 +344,16 @@ export default function Search(props) {
{resultsUser.map((card) => (
<Grid item md={4} xs={6} key={card.id}>
<ContactCard
- name = {card.name}
- avatar = {card.avatar ? apiDomain + card.avatar : null}
- cover={card.cover ? apiDomain + card.cover : null}
- numCollections = {card.collections_count}
- numLearningObjects = {card.learning_objects_count}
- follow_count={card.follows_count}
- followed = {card.followed || null}
- followerID = {card.id}
- href={'/usuario-publico/' + card.id}
- />
+ name={card.name}
+ avatar={card.avatar ? apiDomain + card.avatar : null}
+ cover={card.cover ? apiDomain + card.cover : null}
+ numCollections={card.collections_count}
+ numLearningObjects={card.learning_objects_count}
+ follow_count={card.follows_count}
+ followed={card.followed || null}
+ followerID={card.id}
+ href={'/usuario-publico/' + card.id}
+ />
</Grid>
))}
</Grid>
@@ -391,7 +401,7 @@ const GridBuscaCollection = styled(Grid)`
`;
const GridBuscaResource = styled(Grid)`
color: #666;
- background-color: red;
+ background-color: red;
h4 {
padding: 0 15px;
--
GitLab