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

fix estilização página de busca

parent fa689739
No related branches found
No related tags found
4 merge requests!57Merge of develop into master,!56Fixed buttons reportar, seguir, compartilhar, guardar and entrar (in comments...,!39Update admin system,!32Homologa
Hide whitespace changes
Inline Side-by-side
Showing
with 90 additions and 52 deletions
src/Pages/Search.js
+ 90
− 52
View file @ 4f02580d
......@@ -30,8 +30,8 @@ import { apiUrl } from "../env";
import "./Styles/Home.css";
import { Store } from "../Store";
import { Grid } from "@material-ui/core";
import Dropdown from 'react-dropdown'
import 'react-dropdown/style.css'
import Dropdown from "react-dropdown";
import "react-dropdown/style.css";
import SearchExpansionPanel from "../Components/SearchExpansionPanel/SearchExpansionPanel";
import ResourceCard from "../Components/ResourceCard";
......@@ -42,53 +42,48 @@ export default function Search(props) {
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"}
{ 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"},
{ 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 [defaultOption, setDefaultOption] = useState(options[0]);
const [defaultOrder, setDefaultOrder] = useState(ordenar[0]);
const collectStuff = (tipoBusca=state.search.class,option=undefined) => {
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 => {
.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")
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({
type: "HANDLE_SEARCH_BAR",
opened: false
opened: false,
});
const urlParams = new URLSearchParams(window.location.search);
......@@ -100,26 +95,22 @@ export default function Search(props) {
type: "SAVE_SEARCH",
newSearch: {
query: query,
class: searchClass
}
class: searchClass,
},
});
}
return () =>
dispatch({
type: "HANDLE_SEARCH_BAR",
opened: false
opened: false,
});
}, []);
useEffect(() => {
collectStuff();
}, [state.search, resultsPerPage]);
return (
<div style={{ backgroundColor: "#f4f4f4" }}>
<React.Fragment>
......@@ -129,21 +120,21 @@ export default function Search(props) {
</h1>
{state.search.class === "LearningObject" && (
<ul>
{results.map(res => (
{results.map((res) => (
<li key={res.id}> {res.name} </li>
))}
</ul>
)}
{state.search.class === "Collection" && (
<ul>
{results.map(res => (
{results.map((res) => (
<li key={res.id}> {res.name} </li>
))}
</ul>
)}
{state.search.class === "User" && (
<ul>
{results.map(res => (
{results.map((res) => (
<li key={res.id}> {res.name} </li>
))}
</ul>
......@@ -165,13 +156,22 @@ export default function Search(props) {
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center"
justifyContent: "center",
paddingLeft: 20,
}}
>
<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 style={{ display: "flex", flexDirection: "row" }}>
<span style={{ alignSelf: "center", marginRight: 10 }}>
MOSTRAR:{" "}
</span>
<Dropdown
options={options}
onChange={() => {
collectStuff(options.value, options.label);
}}
value={defaultOption}
placeholder="Select an option"
/>
</div>
</Grid>
<Grid
......@@ -180,10 +180,10 @@ export default function Search(props) {
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center"
justifyContent: "center",
}}
>
<div>Numero</div>
<div>Número</div>
</Grid>
<Grid
item
......@@ -191,11 +191,35 @@ export default function Search(props) {
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center"
justifyContent: "center",
paddingRight: 20,
}}
>
<div style={{ textAlign: "right" }}>Ordenar por:</div>
<Dropdown options={ordenar} onChange={()=>{collectStuff(ordenar.label )}} value={defaultOrder} placeholder="Select an order "/>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "end",
}}
>
<span
style={{
textAlign: "right",
alignSelf: "center",
marginRight: 10,
}}
>
ORDENAR POR:{" "}
</span>
<Dropdown
options={ordenar}
onChange={() => {
collectStuff(ordenar.label);
}}
value={defaultOrder}
placeholder="Select an order "
/>
</div>
</Grid>
</Grid>
</HeaderFilters>
......@@ -205,9 +229,9 @@ export default function Search(props) {
<SearchExpansionPanel />
</Paper>
</Grid>
<Grid item md={9} xs={12}>
<Grid item md={9} xs={12}>
<Grid container spacing={2}>
{results.map(card => (
{results.map((card) => (
<Grid item md={4} xs={6} key={card.id}>
<ResourceCard
name={card.name}
......@@ -221,9 +245,23 @@ export default function Search(props) {
</Grid>
))}
</Grid>
<button onClick={() => setResultsPerPage(resultsPerPage + 12)}>
Número de recursos mostrados {resultsPerPage}
</button>
<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>
</GridBusca>
</Principal>
......
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