diff --git a/src/Components/SearchExpansionPanel/SearchExpansionPanel.js b/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
index 882885054592449f480c5336ee4673c7bb3fb890..d693ee7b7210c087558770ad7fbc73fe6b8495b8 100644
--- a/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
+++ b/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
import { withStyles } from "@material-ui/core/styles";
import MuiExpansionPanel from "@material-ui/core/ExpansionPanel";
import MuiExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
@@ -9,12 +9,13 @@ import SearchEPCompCurriculum from "./SearchEPCompCurriculum";
import SearchEPTiposRec from "./SearchEPTiposRec";
import SearchEPEtapasEns from "./SesrchEPEtapasEns";
import SearchEPIdiomas from "./SearchEPIdiomas";
+import { TextField } from "@material-ui/core";
const ExpansionPanel = withStyles({
root: {
border: "1px solid rgba(0, 0, 0, .125)",
boxShadow: "none",
- '.MuiButtonBase-root' : {
- paddingInline:"0 !important"
+ '.MuiButtonBase-root': {
+ paddingInline: "0 !important"
},
"&:not(:last-child)": {
borderBottom: 0
@@ -35,7 +36,7 @@ const ExpansionPanelSummary = withStyles({
marginBottom: -1,
minHeight: 56,
backgroundColor: "#fff",
-
+
"&$expanded": {
minHeight: 56,
@@ -63,6 +64,18 @@ const ExpansionPanelDetails = withStyles(theme => ({
}))(MuiExpansionPanelDetails);
export default function SearchExpansionPanel(props) {
+ const [keyWords, setKeyWords] = useState("");
+
+ const onKeyPressed = (e) => {
+ const filterString = "&tags[]=" + keyWords
+ if (e.key === "Enter")
+ props.onChange("LearningObject", filterString)
+ }
+
+ const HandleChangeText = (e) => {
+ setKeyWords(e.target.value);
+ }
+
return (
<div>
<link
@@ -89,8 +102,8 @@ export default function SearchExpansionPanel(props) {
<ExpansionPanel square>
<ExpansionPanelSummary
- expandIcon ={<ExpandMoreIcon/>}
-
+ expandIcon={<ExpandMoreIcon />}
+
aria-controls="panel2d-content"
id="panel2d-header"
>
@@ -98,7 +111,7 @@ export default function SearchExpansionPanel(props) {
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Typography>
- <SearchEPCompCurriculum onChange={props.onChange}/>
+ <SearchEPCompCurriculum onChange={props.onChange} />
</Typography>
</ExpansionPanelDetails>
</ExpansionPanel>
@@ -112,7 +125,7 @@ export default function SearchExpansionPanel(props) {
<Typography>Tipos de Recurso</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
- <SearchEPTiposRec onChange={props.onChange}/>
+ <SearchEPTiposRec onChange={props.onChange} />
</ExpansionPanelDetails>
</ExpansionPanel>
@@ -125,7 +138,7 @@ export default function SearchExpansionPanel(props) {
<Typography>Etapas de Ensino</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
- <SearchEPEtapasEns onChange={props.onChange}/>
+ <SearchEPEtapasEns onChange={props.onChange} />
</ExpansionPanelDetails>
</ExpansionPanel>
@@ -138,7 +151,7 @@ export default function SearchExpansionPanel(props) {
<Typography>Idiomas</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
- <SearchEPIdiomas onChange={props.onChange}/>
+ <SearchEPIdiomas onChange={props.onChange} />
</ExpansionPanelDetails>
</ExpansionPanel>
@@ -151,12 +164,14 @@ export default function SearchExpansionPanel(props) {
<Typography>Palavra-Chave</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
- <Typography>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
- malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum
- dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada
- lacus ex, sit amet blandit leo lobortis eget.
- </Typography>
+ <TextField
+ label="Palavra chave + ENTER"
+ id="outlined-margin-dense"
+ margin="dense"
+ variant="outlined"
+ onChange={e => HandleChangeText(e)}
+ onKeyDown={e => onKeyPressed(e)}
+ />
</ExpansionPanelDetails>
</ExpansionPanel>
</div>
diff --git a/src/Pages/Search.js b/src/Pages/Search.js
index 2902b2b51496b1ae179d3a668a21527a35eb1b62..c0ee400a3e024fb9163704fd8059cf7150ebe100 100644
--- a/src/Pages/Search.js
+++ b/src/Pages/Search.js
@@ -22,7 +22,7 @@ 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 LoadingSpinner from '../Components/LoadingSpinner';
// import ResourceCard from '../Components/ResourceCard'
// import CollectionCard from '../Components/CollectionCard'
// import UserCard from '../Components/UserCard'
@@ -39,7 +39,7 @@ import ResourceCardFunction from "../Components/ResourceCardFunction";
import CollectionCardFunction from "../Components/CollectionCardFunction";
import ContactCard from "../Components/ContactCard";
-let order = "review_average";
+let order = "review_average";
let currFilter = "";
export default function Search(props) {
@@ -47,8 +47,9 @@ export default function Search(props) {
const [resultsResource, setResultsResource] = useState([]);
const [resultsCollection, setResultsCollection] = useState([]);
const [resultsUser, setResultsUser] = useState([]);
+ const [currOrder, setCurrOrder] = useState(order);
const [page] = useState(0);
- const [isloading, setIsLoading] = useState(false);
+ const [isloading, setIsLoading] = useState(false);
const [resultsPerPage, setResultsPerPage] = useState(6);
const [totalResults, setTotalResults] = useState(0);
const [options] = React.useState([
@@ -57,12 +58,12 @@ export default function Search(props) {
{ label: "Usuários", value: "User" },
]);
const [ordenar] = useState([
- { 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" },
+ { 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(
@@ -70,12 +71,16 @@ export default function Search(props) {
);
const [optionResult, setOptionResult] = useState(option);
console.log(option);
- console.log(state.search.class);
+ console.log(state);
const collectStuff = (tipoBusca, filtro) => {
- setIsLoading(true);
- if(filtro || filtro == "")
+ if(filtro)
currFilter = filtro;
+ else if (filtro = "")
+ currFilter = filtro;
+ if(!filtro)
+ setIsLoading(true);
+
axios
.get(
`${apiUrl}/search?page=${page}&results_per_page=${resultsPerPage}&order=${order}&query=${state.search.query}${currFilter ? currFilter : ""}&search_class=${tipoBusca}`
@@ -85,6 +90,14 @@ export default function Search(props) {
else if (tipoBusca === "Collection") setResultsCollection(res.data);
else if (tipoBusca === "User") setResultsUser(res.data);
setOptionResult(tipoBusca);
+ dispatch({
+ type: "SAVE_SEARCH",
+ newSearch: {
+ query: "*",
+ class: tipoBusca,
+ },
+ });
+ setOption(new URLSearchParams(window.location.search).get("search_class"))
setTotalResults(res.headers["x-total-count"]);
setIsLoading(false);
});
@@ -176,6 +189,7 @@ export default function Search(props) {
</span>
<Dropdown
options={options}
+ value={optionResult}
onChange={(e) => {
setOption(e.value);
collectStuff(e.value, "");
@@ -225,8 +239,10 @@ export default function Search(props) {
</span>
<Dropdown
options={ordenar}
+ value={currOrder}
onChange={(e) => {
order = e.value;
+ setCurrOrder(e.label)
collectStuff(optionResult, currFilter);
}}
placeholder="Select an order "
@@ -236,153 +252,155 @@ export default function Search(props) {
</Grid>
</HeaderFilters>
- {optionResult === "Collection" && (
- <GridBuscaCollection container spacing={2}>
- <Grid item md={12} xs={12}>
- <Grid container spacing={2}>
- {resultsCollection.map((card) => (
- <Grid item md={4} xs={6} key={card.id}>
- <CollectionCardFunction
- name={card.name}
- rating={card.score}
- id={card.id}
- author={card.owner.name}
- description={card.description}
- thumbnails={card.items_thumbnails}
- avatar={card.owner.avatar}
- />
+ {
+ isloading ? <LoadingSpinner text="Carregando..." /> :
+ optionResult === "Collection" ? (
+ <GridBuscaCollection container spacing={2}>
+ <Grid item md={12} xs={12}>
+ <Grid container spacing={2}>
+ {resultsCollection.map((card) => (
+ <Grid item md={4} xs={6} key={card.id}>
+ <CollectionCardFunction
+ name={card.name}
+ rating={card.score}
+ id={card.id}
+ author={card.owner.name}
+ description={card.description}
+ thumbnails={card.items_thumbnails}
+ avatar={card.owner.avatar}
+ />
+ </Grid>
+ ))}
</Grid>
- ))}
- </Grid>
- <div
- style={{
- display: "flex",
- flexDirection: "row",
- justifyContent: "center",
- }}
- >
- <button
- style={{
- height: 36,
- backgroundColor: "#ff7f00",
- marginBottom: 50,
- marginTop: 50,
- fontSize: 14,
- color: "white",
- borderRadius: 4,
- border: "none",
- }}
- onClick={() => setResultsPerPage(resultsPerPage + 12)}
- >
- Carregar mais 12
+ <div
+ style={{
+ display: "flex",
+ flexDirection: "row",
+ justifyContent: "center",
+ }}
+ >
+ <button
+ style={{
+ height: 36,
+ backgroundColor: "#ff7f00",
+ marginBottom: 50,
+ marginTop: 50,
+ fontSize: 14,
+ color: "white",
+ borderRadius: 4,
+ border: "none",
+ }}
+ onClick={() => setResultsPerPage(resultsPerPage + 12)}
+ >
+ Carregar mais 12
</button>
- </div>
- </Grid>
- </GridBuscaCollection>
- )}
+ </div>
+ </Grid>
+ </GridBuscaCollection>
+ ) :
- {optionResult === "LearningObject" && (
- <GridBuscaResource container spacing={2}>
- <Grid item md={3} xs={12}>
- <Paper elevation={4} square>
- <SearchExpansionPanel onChange={collectStuff}/>
- </Paper>
- </Grid>
- <Grid item md={9} xs={12}>
- <Grid container spacing={2}>
- {resultsResource.map((card) => (
- <Grid item md={4} xs={6} key={card.id}>
- <ResourceCardFunction
- 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}
- tags={card.educational_stages}
- href={"/recurso/" + card.id}
- downloadableLink={card.default_attachment_location}
- />
+ optionResult === "LearningObject" ? (
+ <GridBuscaResource container spacing={2}>
+ <Grid item md={3} xs={12}>
+ <Paper elevation={4} square>
+ <SearchExpansionPanel onChange={collectStuff} />
+ </Paper>
</Grid>
- ))}
- </Grid>
- <div
- style={{
- display: "flex",
- flexDirection: "row",
- justifyContent: "center",
- }}
- >
- <button
- style={{
- height: 36,
- backgroundColor: "#ff7f00",
- marginBottom: 50,
- marginTop: 50,
- fontSize: 14,
- color: "white",
- borderRadius: 4,
- border: "none",
- }}
- onClick={() => setResultsPerPage(resultsPerPage + 12)}
- >
- Carregar mais 12
+ <Grid item md={9} xs={12}>
+ <Grid container spacing={2}>
+ {resultsResource.map((card) => (
+ <Grid item md={4} xs={6} key={card.id}>
+ <ResourceCardFunction
+ 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}
+ tags={card.educational_stages}
+ href={"/recurso/" + card.id}
+ downloadableLink={card.default_attachment_location}
+ />
+ </Grid>
+ ))}
+ </Grid>
+ <div
+ style={{
+ display: "flex",
+ flexDirection: "row",
+ justifyContent: "center",
+ }}
+ >
+ <button
+ style={{
+ height: 36,
+ backgroundColor: "#ff7f00",
+ marginBottom: 50,
+ marginTop: 50,
+ fontSize: 14,
+ color: "white",
+ borderRadius: 4,
+ border: "none",
+ }}
+ onClick={() => setResultsPerPage(resultsPerPage + 12)}
+ >
+ Carregar mais 12
</button>
- </div>
- </Grid>
- </GridBuscaResource>
- )}
-
- {optionResult === "User" && (
- <GridBuscaUser container spacing={2}>
- <Grid item md={12} xs={12}>
- <Grid container spacing={2}>
- {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}
- />
+ </div>
</Grid>
- ))}
- </Grid>
- <div
- style={{
- display: "flex",
- flexDirection: "row",
- justifyContent: "center",
- }}
- >
- <button
- style={{
- height: 36,
- backgroundColor: "#ff7f00",
- marginBottom: 50,
- marginTop: 50,
- fontSize: 14,
- color: "white",
- borderRadius: 4,
- border: "none",
- }}
- onClick={() => setResultsPerPage(resultsPerPage + 6)}
- >
- Carregar mais 6
- </button>
- </div>
- </Grid>
- </GridBuscaUser>
- )}
+ </GridBuscaResource>
+ ) :
+ optionResult === "User" && (
+ <GridBuscaUser container spacing={2}>
+ <Grid item md={12} xs={12}>
+ <Grid container spacing={2}>
+ {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}
+ />
+ </Grid>
+ ))}
+ </Grid>
+ <div
+ style={{
+ display: "flex",
+ flexDirection: "row",
+ justifyContent: "center",
+ }}
+ >
+ <button
+ style={{
+ height: 36,
+ backgroundColor: "#ff7f00",
+ marginBottom: 50,
+ marginTop: 50,
+ fontSize: 14,
+ color: "white",
+ borderRadius: 4,
+ border: "none",
+ }}
+ onClick={() => setResultsPerPage(resultsPerPage + 6)}
+ >
+ Carregar mais 6
+ </button>
+ </div>
+ </Grid>
+ </GridBuscaUser>
+ )
+ }
</Principal>
</div>
);
@@ -390,7 +408,7 @@ export default function Search(props) {
const GridBuscaCollection = styled(Grid)`
color: #666;
- background-color: green;
+ ${'' /* background-color: green; */}
h4 {
padding: 0 15px;
@@ -401,7 +419,7 @@ const GridBuscaCollection = styled(Grid)`
`;
const GridBuscaResource = styled(Grid)`
color: #666;
- background-color: red;
+ ${'' /* background-color: red; */}
h4 {
padding: 0 15px;
@@ -412,7 +430,7 @@ const GridBuscaResource = styled(Grid)`
`;
const GridBuscaUser = styled(Grid)`
color: #666;
- background-color: blue;
+ ${'' /* background-color: blue; */}
h4 {
padding: 0 15px;