From b2925ba44d8a4b517a745d7e5b05670415755e01 Mon Sep 17 00:00:00 2001
From: mrp19 <mrp19@inf.ufpr.br>
Date: Fri, 8 May 2020 10:38:24 -0300
Subject: [PATCH] Riba
---
.../SearchEPCompCurriculum.js | 48 +++----
.../SearchExpansionPanel/SearchEPIdiomas.js | 22 ++--
.../SearchExpansionPanel/SearchEPTiposRec.js | 29 ++---
.../SearchExpansionPanel.js | 10 +-
.../SearchExpansionPanel/SesrchEPEtapasEns.js | 12 +-
src/Pages/Search.js | 75 ++++++++---
src/Pages/Teste.js | 118 ++++++++++++++++++
7 files changed, 240 insertions(+), 74 deletions(-)
diff --git a/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js b/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js
index bf9de267..d55d6e63 100644
--- a/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js
+++ b/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js
@@ -34,31 +34,31 @@ export default function SearchEPCompCurriculum() {
setChecked(newChecked);
};
const filtrosComponente = [
- { exemplo: "Arte", value: "0" },
- { exemplo: "Biologia", value: "1" },
- { exemplo: "Ciências da Natureza", value: "2" },
- { exemplo: "Direitos Humanos", value: "3" },
- { exemplo: "Educação Ambiental", value: "4" },
- { exemplo: "Educação do Campo", value: "5" },
- { exemplo: "Educação Especial", value: "6" },
+ { exemplo: "Arte", value: "3" },
+ { exemplo: "Biologia", value: "5" },
+ { exemplo: "Ciências da Natureza", value: "6" },
+ { exemplo: "Direitos Humanos", value: "20" },
+ { exemplo: "Educação Ambiental", value: "21" },
+ { exemplo: "Educação do Campo", value: "22" },
+ { exemplo: "Educação Especial", value: "23" },
{ exemplo: "Educação FÃsica", value: "7" },
- { exemplo: "Educação IndÃgena", value: "8" },
- { exemplo: "Educação Quilombola", value: "9" },
- { exemplo: "Educação Sexual", value: "10" },
- { exemplo: "Ensino Religioso", value: "11" },
- { exemplo: "Filosofia", value: "12" },
- { exemplo: "FÃsica", value: "13" },
- { exemplo: "Geografia", value: "14" },
- { exemplo: "História", value: "15" },
- { exemplo: "Informática", value: "16" },
- { exemplo: "LÃngua Espanhola", value: "17" },
- { exemplo: "LÃngua Inglesa", value: "18" },
- { exemplo: "LÃngua Portuguesa", value: "19" },
- { exemplo: "Matemática", value: "20" },
- { exemplo: "Outras LÃnguas", value: "21" },
- { exemplo: "Outros", value: "22" },
- { exemplo: "QuÃmica", value: "23" },
- { exemplo: "Sociologia", value: "24" }
+ { exemplo: "Educação IndÃgena", value: "24" },
+ { exemplo: "Educação Quilombola", value: "25" },
+ { exemplo: "Educação Sexual", value: "26" },
+ { exemplo: "Ensino Religioso", value: "16" },
+ { exemplo: "Filosofia", value: "8" },
+ { exemplo: "FÃsica", value: "9" },
+ { exemplo: "Geografia", value: "10" },
+ { exemplo: "História", value: "11" },
+ { exemplo: "Informática", value: "18" },
+ { exemplo: "LÃngua Espanhola", value: "1" },
+ { exemplo: "LÃngua Inglesa", value: "2" },
+ { exemplo: "LÃngua Portuguesa", value: "4" },
+ { exemplo: "Matemática", value: "12" },
+ { exemplo: "Outras LÃnguas", value: "15" },
+ { exemplo: "Outros", value: "17" },
+ { exemplo: "QuÃmica", value: "13" },
+ { exemplo: "Sociologia", value: "14" }
];
return (
diff --git a/src/Components/SearchExpansionPanel/SearchEPIdiomas.js b/src/Components/SearchExpansionPanel/SearchEPIdiomas.js
index 4b29aef8..a9426aec 100644
--- a/src/Components/SearchExpansionPanel/SearchEPIdiomas.js
+++ b/src/Components/SearchExpansionPanel/SearchEPIdiomas.js
@@ -34,18 +34,18 @@ export default function SearchEPIdiomas() {
setChecked(newChecked);
};
const filtrosIdiomas = [
- { value: "0", exemplo: "Alemão" },
- { value: "1", exemplo: "Espanhol" },
- { value: "2", exemplo: "Francês" },
- { value: "3", exemplo: "Inglês" },
- { value: "4", exemplo: "Italiano" },
- { value: "5", exemplo: "Japonês" },
- { value: "6", exemplo: "LIBRAS" },
+ { value: "5", exemplo: "Alemão" },
+ { value: "3", exemplo: "Espanhol" },
+ { value: "4", exemplo: "Francês" },
+ { value: "2", exemplo: "Inglês" },
+ { value: "6", exemplo: "Italiano" },
+ { value: "9", exemplo: "Japonês" },
+ { value: "19", exemplo: "LIBRAS" },
{ value: "7", exemplo: "Mandarim" },
- { value: "8", exemplo: "Nenhum" },
- { value: "9", exemplo: "Outro" },
- { value: "10", exemplo: "Português" },
- { value: "11", exemplo: "Russo" }
+ { value: "18", exemplo: "Nenhum" },
+ { value: "10", exemplo: "Outro" },
+ { value: "1", exemplo: "Português" },
+ { value: "8", exemplo: "Russo" }
];
return (
diff --git a/src/Components/SearchExpansionPanel/SearchEPTiposRec.js b/src/Components/SearchExpansionPanel/SearchEPTiposRec.js
index 063fa126..0d36afff 100644
--- a/src/Components/SearchExpansionPanel/SearchEPTiposRec.js
+++ b/src/Components/SearchExpansionPanel/SearchEPTiposRec.js
@@ -34,21 +34,22 @@ export default function SearchEPTiposRec() {
setChecked(newChecked);
};
const filtrosTipos = [
- { value: "0", exemplo: "Animação" },
- { value: "1", exemplo: "Aplicativo móvel" },
- { value: "2", exemplo: "Apresentação" },
- { value: "3", exemplo: "Ãudio" },
+ { value: "5", exemplo: "Animação" },
+ { value: "20", exemplo: "Aplicativo móvel" },
+ { value: "17", exemplo: "Apresentação" },
+ { value: "7", exemplo: "Ãudio" },
{ value: "4", exemplo: "Experimento prático" },
- { value: "5", exemplo: "Imagem" },
- { value: "6", exemplo: "Infográfico" },
- { value: "7", exemplo: "Jogo" },
- { value: "8", exemplo: "Livro digital" },
- { value: "9", exemplo: "Mapa" },
- { value: "10", exemplo: "Outros" },
- { value: "11", exemplo: "Software Educacional" },
- { value: "12", exemplo: "Texto" },
- { value: "13", exemplo: "VÃdeo" },
- { value: "14", exemplo: "Website externo" }
+ { value: "1", exemplo: "Imagem" },
+ { value: "18", exemplo: "Infográfico" },
+ { value: "19", exemplo: "Jogo" },
+ { value: "21", exemplo: "Livro digital" },
+ { value: "2", exemplo: "Mapa" },
+ { value: "15", exemplo: "Outros" },
+ { value: "3", exemplo: "Software Educacional" },
+ { value: "6", exemplo: "Texto" },
+ { value: "8", exemplo: "VÃdeo" },
+ { value: "13", exemplo: "Website externo" },
+ { value: "22", exemplo: "Plano de Aula" },
];
return (
diff --git a/src/Components/SearchExpansionPanel/SearchExpansionPanel.js b/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
index b72a0bf4..32c9b72e 100644
--- a/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
+++ b/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
@@ -13,6 +13,9 @@ const ExpansionPanel = withStyles({
root: {
border: "1px solid rgba(0, 0, 0, .125)",
boxShadow: "none",
+ '.MuiButtonBase-root' : {
+ paddingInline:"0 !important"
+ },
"&:not(:last-child)": {
borderBottom: 0
},
@@ -32,9 +35,7 @@ const ExpansionPanelSummary = withStyles({
marginBottom: -1,
minHeight: 56,
backgroundColor: "#fff",
- ".MuiButtonBase-root.MuiIconButton-root.MuiExpansionPanelSummary-expandIcon.MuiIconButton-edgeEnd": {
- paddingInline: "0"
- },
+
"&$expanded": {
minHeight: 56,
@@ -87,7 +88,8 @@ export default function SearchExpansionPanel() {
</ExpansionPanel>
<ExpansionPanel square>
<ExpansionPanelSummary
- expandIcon={<ExpandMoreIcon />}
+ expandIcon ={<ExpandMoreIcon/>}
+
aria-controls="panel2d-content"
id="panel2d-header"
>
diff --git a/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js b/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js
index db71afa9..b0241d32 100644
--- a/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js
+++ b/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js
@@ -34,12 +34,12 @@ export default function SearchEPEtapasEns() {
setChecked(newChecked);
};
const filtrosEtapas = [
- { value: "0", exemplo: "Educação Infantil" },
- { value: "1", exemplo: "Ensino Fundamental I (1º até o 5º ano )" },
- { value: "2", exemplo: "Ensino Fundamental II (do 6º até o 9º ano)" },
- { value: "3", exemplo: "Ensino Médio" },
- { value: "4", exemplo: "Ensino Superior" },
- { value: "5", exemplo: "Outros" }
+ { value: "1", exemplo: "Educação Infantil" },
+ { value: "2", exemplo: "Ensino Fundamental I (1º até o 5º ano )" },
+ { value: "3", exemplo: "Ensino Fundamental II (do 6º até o 9º ano)" },
+ { value: "4", exemplo: "Ensino Médio" },
+ { value: "5", exemplo: "Ensino Superior" },
+ { value: "6", exemplo: "Outros" }
];
return (
diff --git a/src/Pages/Search.js b/src/Pages/Search.js
index 70465b05..50234337 100644
--- a/src/Pages/Search.js
+++ b/src/Pages/Search.js
@@ -30,8 +30,8 @@ import { apiUrl } from "../env";
import "./Styles/Home.css";
import { Store } from "../Store";
import { Grid } from "@material-ui/core";
-import { Col, Row, Container, Hidden, Visible } from "react-grid-system";
-
+import Dropdown from 'react-dropdown'
+import 'react-dropdown/style.css'
import SearchExpansionPanel from "../Components/SearchExpansionPanel/SearchExpansionPanel";
import ResourceCard from "../Components/ResourceCard";
@@ -41,6 +41,49 @@ export default function Search(props) {
const [page] = useState(0);
const [resultsPerPage, setResultsPerPage] = useState(12);
const [order] = useState("score");
+ const options = [
+
+ {value:"LearningObject", label:"Recursos"},
+ {value:"Collection", label:"Coleções"},
+ {value:"User", label:"Usuários"}
+
+ ];
+ const ordenar = [
+ {label:"Mais Estrelas"},
+ {label:"Mais Relevante"},
+ {label:"Mais Baixados"},
+ {label:"Mais Favoritados"},
+ {label:"Mais Recentes"},
+ {label:"Ordem Alfabética"},
+ ];
+
+ const [defaultOption,setDefaultOption] =useState( options[0]);
+ const [defaultOrder,setDefaultOrder] =useState( ordenar[0]);
+
+ const collectStuff = (tipoBusca=state.search.class,option=undefined) => {
+
+ axios
+ .get(
+ `${apiUrl}/search?page=${page}&results_per_page=${resultsPerPage}&order=${order}&query=${state.search.query}&search_class=${tipoBusca}`
+ )
+ .then(res => {
+ setResults(res.data);
+ if (option != undefined) {
+ let aux = undefined;
+ for (let i=0; i < options.length;i=i+1){
+
+ console.log("Vamo dale0")
+ if (options[i].label==option){
+ console.log("Vamo dale")
+ setDefaultOption(options[i]);
+
+ }
+ }
+
+ }
+ console.log(res.data);
+ console.log(tipoBusca);
+ })};
useEffect(() => {
dispatch({
@@ -51,7 +94,7 @@ export default function Search(props) {
const urlParams = new URLSearchParams(window.location.search);
const query = urlParams.get("query");
const searchClass = urlParams.get("search_class");
-
+ console.log(searchClass);
if (state.search.query !== query || state.search.class !== searchClass) {
dispatch({
type: "SAVE_SEARCH",
@@ -68,18 +111,15 @@ export default function Search(props) {
opened: false
});
}, []);
+
useEffect(() => {
- axios
- .get(
- `${apiUrl}/search?page=${page}&results_per_page=${resultsPerPage}&order=${order}&query=${state.search.query}&search_class=${state.search.class}`
- )
- .then(res => {
- setResults(res.data);
- console.log(res.data);
- });
+ collectStuff();
}, [state.search, resultsPerPage]);
+
+
+
return (
<div style={{ backgroundColor: "#f4f4f4" }}>
<React.Fragment>
@@ -128,7 +168,11 @@ export default function Search(props) {
justifyContent: "center"
}}
>
- <div style={{ textAlign: "left" }}>Mostrar</div>
+ <div style={{display:"flex",flexDirection:"row"}}>
+ <div style={{ textAlign: "left" }}>Mostrar</div>
+ <Dropdown options={options} onChange={()=>{collectStuff(options.value,options.label )}} value={defaultOption} placeholder="Select an option" />
+
+ </div>
</Grid>
<Grid
item
@@ -151,19 +195,20 @@ export default function Search(props) {
}}
>
<div style={{ textAlign: "right" }}>Ordenar por:</div>
+ <Dropdown options={ordenar} onChange={()=>{collectStuff(ordenar.label )}} value={defaultOrder} placeholder="Select an order "/>
</Grid>
</Grid>
</HeaderFilters>
<GridBusca container spacing={2}>
- <Grid item xs={3}>
+ <Grid item md={3} xs={12}>
<Paper elevation={4} square>
<SearchExpansionPanel />
</Paper>
</Grid>
- <Grid item xs={9}>
+ <Grid item md={9} xs={12}>
<Grid container spacing={2}>
{results.map(card => (
- <Grid item md={4} sm={6} key={card.id}>
+ <Grid item md={4} xs={6} key={card.id}>
<ResourceCard
name={card.name}
rating={card.score}
diff --git a/src/Pages/Teste.js b/src/Pages/Teste.js
index ab1886ec..0652c42d 100644
--- a/src/Pages/Teste.js
+++ b/src/Pages/Teste.js
@@ -15,3 +15,121 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { Component } from 'react'
+import Dropdown from 'react-dropdown'
+
+class ObjectArrayExample extends Component {
+ constructor (props) {
+ super(props)
+ this.state = {
+ selected: { value: 'two', label: 'Two'}
+ }
+ this._onSelect = this._onSelect.bind(this)
+ }
+
+ _onSelect (option) {
+ console.log('You selected ', option.label)
+ this.setState({selected: option})
+ }
+
+ render () {
+ const { toggleClassName, togglePlaholderClassName, toggleMenuClassName, toggleOptionsClassName } = this.state
+
+ const options = [
+ { value: 'one', label: 'One' },
+ { value: 'two', label: 'Two', className: toggleOptionsClassName && 'my-custom-class' },
+ {
+ type: 'group', name: 'group1', items: [
+ { value: 'three', label: 'Three', className: toggleOptionsClassName && 'my-custom-class' },
+ { value: 'four', label: 'Four' }
+ ]
+ },
+ {
+ type: 'group', name: 'group2', items: [
+ { value: 'five', label: 'Five' },
+ { value: 'six', label: 'Six' }
+ ]
+ }
+ ]
+
+
+ const defaultOption = this.state.selected
+ const placeHolderValue = typeof this.state.selected === 'string' ? this.state.selected : this.state.selected.label
+
+ return (
+ <section>
+ <h3>Object Array and Custom ClassNames Example </h3>
+ <div className="buttons">
+ <button onClick={() => this.setState({ toggleClassName: !toggleClassName })}>
+ Toggle dropdown custom class
+ </button>
+ <button onClick={() => this.setState({ togglePlaholderClassName: !togglePlaholderClassName })}>
+ Toggle placeholder custom class
+ </button>
+ <button onClick={() => this.setState({ toggleMenuClassName: !toggleMenuClassName })}>
+ Toggle menu custom class
+ </button>
+ <button onClick={() => this.setState({ toggleOptionsClassName: !toggleOptionsClassName })}>
+ Toggle options custom class
+ </button>
+ </div>
+ <Dropdown
+ options={options}
+ onChange={this._onSelect}
+ value={defaultOption}
+ placeholder="Select an option"
+ className={ toggleClassName ? 'my-custom-class' : '' }
+ placeholderClassName={ togglePlaholderClassName ? 'my-custom-class' : '' }
+ menuClassName={ toggleMenuClassName ? 'my-custom-class' : '' }
+ />
+ <div className='result'>
+ You selected
+ <strong> {placeHolderValue} </strong>
+ </div>
+ <section>
+ <h4>Options: </h4>
+ <div className='code'>
+ <pre>
+ {`
+const options = [
+ { value: 'one', label: 'One' },
+ { value: 'two', label: 'Two'${toggleOptionsClassName ? ', classNames \'my-custom-class\'' : ''} },
+ {
+ type: 'group', name: 'group1', items: [
+ { value: 'three', label: 'Three' },
+ { value: 'four', label: 'Four'${toggleOptionsClassName ? ', className: \'my-custom-class\'' : ''} }
+ ]
+ },
+ {
+ type: 'group', name: 'group2', items: [
+ { value: 'five', label: 'Five' },
+ { value: 'six', label: 'Six' }
+ ]
+ }
+]
+`}
+ </pre>
+ </div>
+ <h4>Usage with custom classeNames: </h4>
+ <div className='code'>
+ <pre>{
+`
+<Dropdown
+ options={options}
+ value={defaultOption}
+ placeholder="Select an option"
+ className=${ toggleClassName ? '"my-custom-class"' : '""' }
+ placeholderClassName=${ togglePlaholderClassName ? '"my-custom-class"' : '""' }
+ menuClassName=${ toggleMenuClassName ? '"my-custom-class"' : '""' }
+/>
+`}
+ </pre>
+ </div>
+ </section>
+ </section>
+ )
+ }
+}
+
+export default ObjectArrayExample
\ No newline at end of file
--
GitLab