Skip to content
Snippets Groups Projects
Commit b2925ba4 authored by mrp19's avatar mrp19
Browse files

Riba

parent d47d2fa6
No related branches found
No related tags found
2 merge requests!57Merge of develop into master,!56Fixed buttons reportar, seguir, compartilhar, guardar and entrar (in comments...
Hide whitespace changes
Inline Side-by-side
Showing
with 240 additions and 74 deletions
src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js
+ 24
− 24
View file @ b2925ba4
......@@ -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 (
......
src/Components/SearchExpansionPanel/SearchEPIdiomas.js
+ 11
− 11
View file @ b2925ba4
......@@ -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 (
......
src/Components/SearchExpansionPanel/SearchEPTiposRec.js
+ 15
− 14
View file @ b2925ba4
......@@ -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 (
......
src/Components/SearchExpansionPanel/SearchExpansionPanel.js
+ 6
− 4
View file @ b2925ba4
......@@ -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"
>
......
src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js
+ 6
− 6
View file @ b2925ba4
......@@ -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 (
......
src/Pages/Search.js
+ 60
− 15
View file @ b2925ba4
......@@ -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}
......
src/Pages/Teste.js
+ 118
− 0
View file @ b2925ba4
......@@ -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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment