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
Branches
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
...@@ -30,8 +30,8 @@ import { apiUrl } from "../env"; ...@@ -30,8 +30,8 @@ import { apiUrl } from "../env";
import "./Styles/Home.css"; import "./Styles/Home.css";
import { Store } from "../Store"; import { Store } from "../Store";
import { Grid } from "@material-ui/core"; import { Grid } from "@material-ui/core";
import Dropdown from 'react-dropdown' import Dropdown from "react-dropdown";
import 'react-dropdown/style.css' import "react-dropdown/style.css";
import SearchExpansionPanel from "../Components/SearchExpansionPanel/SearchExpansionPanel"; import SearchExpansionPanel from "../Components/SearchExpansionPanel/SearchExpansionPanel";
import ResourceCard from "../Components/ResourceCard"; import ResourceCard from "../Components/ResourceCard";
...@@ -42,11 +42,9 @@ export default function Search(props) { ...@@ -42,11 +42,9 @@ export default function Search(props) {
const [resultsPerPage, setResultsPerPage] = useState(12); const [resultsPerPage, setResultsPerPage] = useState(12);
const [order] = useState("score"); const [order] = useState("score");
const options = [ const options = [
{ value: "LearningObject", label: "Recursos" }, { value: "LearningObject", label: "Recursos" },
{ value: "Collection", label: "Coleções" }, { value: "Collection", label: "Coleções" },
{value:"User", label:"Usuários"} { value: "User", label: "Usuários" },
]; ];
const ordenar = [ const ordenar = [
{ label: "Mais Estrelas" }, { label: "Mais Estrelas" },
...@@ -61,34 +59,31 @@ export default function Search(props) { ...@@ -61,34 +59,31 @@ export default function Search(props) {
const [defaultOrder, setDefaultOrder] = useState(ordenar[0]); const [defaultOrder, setDefaultOrder] = useState(ordenar[0]);
const collectStuff = (tipoBusca = state.search.class, option = undefined) => { const collectStuff = (tipoBusca = state.search.class, option = undefined) => {
axios axios
.get( .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}&search_class=${tipoBusca}`
) )
.then(res => { .then((res) => {
setResults(res.data); setResults(res.data);
if (option != undefined) { if (option != undefined) {
let aux = undefined; let aux = undefined;
for (let i = 0; i < options.length; i = i + 1) { for (let i = 0; i < options.length; i = i + 1) {
console.log("Vamo dale0");
console.log("Vamo dale0")
if (options[i].label == option) { if (options[i].label == option) {
console.log("Vamo dale") console.log("Vamo dale");
setDefaultOption(options[i]); setDefaultOption(options[i]);
} }
} }
} }
console.log(res.data); console.log(res.data);
console.log(tipoBusca); console.log(tipoBusca);
})}; });
};
useEffect(() => { useEffect(() => {
dispatch({ dispatch({
type: "HANDLE_SEARCH_BAR", type: "HANDLE_SEARCH_BAR",
opened: false opened: false,
}); });
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
...@@ -100,26 +95,22 @@ export default function Search(props) { ...@@ -100,26 +95,22 @@ export default function Search(props) {
type: "SAVE_SEARCH", type: "SAVE_SEARCH",
newSearch: { newSearch: {
query: query, query: query,
class: searchClass class: searchClass,
} },
}); });
} }
return () => return () =>
dispatch({ dispatch({
type: "HANDLE_SEARCH_BAR", type: "HANDLE_SEARCH_BAR",
opened: false opened: false,
}); });
}, []); }, []);
useEffect(() => { useEffect(() => {
collectStuff(); collectStuff();
}, [state.search, resultsPerPage]); }, [state.search, resultsPerPage]);
return ( return (
<div style={{ backgroundColor: "#f4f4f4" }}> <div style={{ backgroundColor: "#f4f4f4" }}>
<React.Fragment> <React.Fragment>
...@@ -129,21 +120,21 @@ export default function Search(props) { ...@@ -129,21 +120,21 @@ export default function Search(props) {
</h1> </h1>
{state.search.class === "LearningObject" && ( {state.search.class === "LearningObject" && (
<ul> <ul>
{results.map(res => ( {results.map((res) => (
<li key={res.id}> {res.name} </li> <li key={res.id}> {res.name} </li>
))} ))}
</ul> </ul>
)} )}
{state.search.class === "Collection" && ( {state.search.class === "Collection" && (
<ul> <ul>
{results.map(res => ( {results.map((res) => (
<li key={res.id}> {res.name} </li> <li key={res.id}> {res.name} </li>
))} ))}
</ul> </ul>
)} )}
{state.search.class === "User" && ( {state.search.class === "User" && (
<ul> <ul>
{results.map(res => ( {results.map((res) => (
<li key={res.id}> {res.name} </li> <li key={res.id}> {res.name} </li>
))} ))}
</ul> </ul>
...@@ -165,13 +156,22 @@ export default function Search(props) { ...@@ -165,13 +156,22 @@ export default function Search(props) {
style={{ style={{
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
justifyContent: "center" justifyContent: "center",
paddingLeft: 20,
}} }}
> >
<div style={{ display: "flex", flexDirection: "row" }}> <div style={{ display: "flex", flexDirection: "row" }}>
<div style={{ textAlign: "left" }}>Mostrar</div> <span style={{ alignSelf: "center", marginRight: 10 }}>
<Dropdown options={options} onChange={()=>{collectStuff(options.value,options.label )}} value={defaultOption} placeholder="Select an option" /> MOSTRAR:{" "}
</span>
<Dropdown
options={options}
onChange={() => {
collectStuff(options.value, options.label);
}}
value={defaultOption}
placeholder="Select an option"
/>
</div> </div>
</Grid> </Grid>
<Grid <Grid
...@@ -180,10 +180,10 @@ export default function Search(props) { ...@@ -180,10 +180,10 @@ export default function Search(props) {
style={{ style={{
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
justifyContent: "center" justifyContent: "center",
}} }}
> >
<div>Numero</div> <div>Número</div>
</Grid> </Grid>
<Grid <Grid
item item
...@@ -191,11 +191,35 @@ export default function Search(props) { ...@@ -191,11 +191,35 @@ export default function Search(props) {
style={{ style={{
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
justifyContent: "center" justifyContent: "center",
paddingRight: 20,
}} }}
> >
<div style={{ textAlign: "right" }}>Ordenar por:</div> <div
<Dropdown options={ordenar} onChange={()=>{collectStuff(ordenar.label )}} value={defaultOrder} placeholder="Select an order "/> 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>
</Grid> </Grid>
</HeaderFilters> </HeaderFilters>
...@@ -207,7 +231,7 @@ export default function Search(props) { ...@@ -207,7 +231,7 @@ export default function Search(props) {
</Grid> </Grid>
<Grid item md={9} xs={12}> <Grid item md={9} xs={12}>
<Grid container spacing={2}> <Grid container spacing={2}>
{results.map(card => ( {results.map((card) => (
<Grid item md={4} xs={6} key={card.id}> <Grid item md={4} xs={6} key={card.id}>
<ResourceCard <ResourceCard
name={card.name} name={card.name}
...@@ -221,9 +245,23 @@ export default function Search(props) { ...@@ -221,9 +245,23 @@ export default function Search(props) {
</Grid> </Grid>
))} ))}
</Grid> </Grid>
<button onClick={() => setResultsPerPage(resultsPerPage + 12)}> <div style={{display:"flex", flexDirection:"row",justifyContent:"center"}}>
Número de recursos mostrados {resultsPerPage} <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> </button>
</div>
</Grid> </Grid>
</GridBusca> </GridBusca>
</Principal> </Principal>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment