diff --git a/src/Pages/Search.js b/src/Pages/Search.js
index 8a5da348411bf0244f42950134272fa694706060..ae2c068e3e2581f976641b00ed309115765d8ba5 100644
--- a/src/Pages/Search.js
+++ b/src/Pages/Search.js
@@ -53,7 +53,7 @@ export default function Search(props) {
const [isloading, setIsLoading] = useState(false);
const [loadingMoreData, setLoadingMoreData] = useState(false);
const [isFiltering, setIsFiltering] = useState(false);
- const [resultsPerPage, setResultsPerPage] = useState(6);
+ const [resultsPerPage, setResultsPerPage] = useState(12);
const [totalResults, setTotalResults] = useState(0);
const [options] = React.useState([
{ label: "Recursos", value: "LearningObject" },
@@ -147,195 +147,84 @@ export default function Search(props) {
<span>Busca</span>
</StyledBreadCrumbs>
</BreadCrumbsDiv>
- <HeaderFilters elevation={4} square>
- <Grid container spacing={0} style={{ height: "100%" }}>
- <Grid
- item
- xs={4}
- style={{
- display: "flex",
- flexDirection: "column",
- justifyContent: "center",
- paddingLeft: 20,
- }}
- >
- <div style={{ display: "flex", flexDirection: "row" }}>
- <span style={{ alignSelf: "center", marginRight: 10 }}>
- MOSTRAR:
- </span>
- <Dropdown
- options={options}
- value={optionResult}
- onChange={(e) => {
- setIsLoading(true);
- setOption(e.value);
- collectStuff(e.value, "");
- }}
- placeholder="Select an type"
- />
- </div>
- </Grid>
- <Grid
- item
- xs={4}
- style={{
- display: "flex",
- flexDirection: "column",
- justifyContent: "center",
- }}
- >
- <div>
- Resultados encontrados: {totalResults}
- </div>
- </Grid>
- {
- optionResult === "User" ? null :
- <Grid
- item
- xs={4}
- style={{
- display: "flex",
- flexDirection: "column",
- justifyContent: "center",
- paddingRight: 20,
- }}
- >
- <div
- style={{
- display: "flex",
- flexDirection: "row",
- justifyContent: "end",
- }}
- >
- <span
- style={{
- textAlign: "right",
- alignSelf: "center",
- marginRight: 10,
- }}
- >
- ORDENAR POR:
- </span>
- <Dropdown
- options={ordenar}
- value={currOrder}
- onChange={(e) => {
- order = e.value;
- setCurrOrder(e.label)
- collectStuff(optionResult, currFilter);
- }}
- placeholder="Select an order "
- />
- </div>
- </Grid>
- }
- </Grid>
- </HeaderFilters>
- {
- 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>
- <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={() => {
- setLoadingMoreData(true);
- setResultsPerPage(resultsPerPage + 12)
- // collectStuff("Collection", "");
- }}
- >
- {
- loadingMoreData ? <CircularProgress size={24} color="inherit" /> : "Carregar mais 12"
- }
- </button>
+ <div style={{margin:"15px 2%", }}>
+ <HeaderFilters elevation={4} square>
+ <Grid container spacing={0} style={{ height: "100%" }}>
+ <Grid item xs style={{display:"flex", flexDirection:"column", justifyContent:"center", paddingLeft:20}}>
+ <div style={{ marginRight:5 }}>
+ <div className="textInfo">
+ <span style={{ fontWeight:"bold" }}>
+ MOSTRAR
+ </span>
</div>
- </Grid>
- </GridBuscaCollection>
- ) :
+ <Dropdown options={options} value={optionResult} onChange={(e) => {
+ setIsLoading(true);
+ setOption(e.value);
+ collectStuff(e.value, "");
+ }}
+ placeholder="Selecione um tipo"
+ />
+ </div>
+ </Grid>
- optionResult === "LearningObject" ? (
- <GridBuscaResource container spacing={2}>
- <Grid item md={3} xs={12}>
- <Paper elevation={4} square>
- <SearchExpansionPanel onChange={collectStuff} onFiltering={isFiltering} />
- </Paper>
+ {
+ optionResult === "User" ? null :
+ <Grid item xs style={{display: "flex", flexDirection: "column", justifyContent: "center", paddingRight: 20,}}>
+ <div style={{marginLeft:5}}>
+ <div className="textInfo">
+ <span style={{ fontWeight:"bold" }}>
+ ORDENAR POR
+ </span>
+ </div>
+ <Dropdown options={ordenar} value={currOrder} onChange={(e) => {
+ order = e.value;
+ setCurrOrder(e.label)
+ collectStuff(optionResult, currFilter);
+ }}
+ placeholder="Selecione uma opção"
+ />
+ </div>
</Grid>
- <Grid item md={9} xs={12}>
+ }
+ </Grid>
+ </HeaderFilters>
+
+ <div style={{display: "flex", flexDirection: "column", justifyContent: "center" }}>
+ <div style={{textAlign: "center", paddingTop: 10, paddingBottom:30, fontWeight:"bolder"}}>
+ Exibindo {totalResults === 0 ? 0 : resultsPerPage} resultados de {totalResults} encontrados
+ </div>
+ </div>
+
+ {
+ isloading ? <LoadingSpinner text="Carregando..." /> :
+ optionResult === "Collection" ? (
+ <GridBuscaCollection container spacing={2}>
+ <Grid item xs>
<Grid container spacing={2}>
- {resultsResource.map((card) => (
- <Grid item md={4} xs={6} key={card.id}>
- <ResourceCardFunction
- avatar={card.publisher.avatar}
+ {resultsCollection.map((card) => (
+ <Grid item xs key={card.id}>
+ <CollectionCardFunction
+ name={card.name}
+ rating={card.score}
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}
+ author={card.owner.name}
+ description={card.description}
+ thumbnails={card.items_thumbnails}
+ avatar={card.owner.avatar}
/>
</Grid>
))}
</Grid>
- <div
- style={{
- display: "flex",
- flexDirection: "row",
- justifyContent: "center",
- }}
- >
+ <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",
+ style={{ height: 36, backgroundColor: "#ff7f00", marginBottom: 50, marginTop: 50, fontSize: 14,
+ color: "white", borderRadius: 4,border: "none",
}}
onClick={() => {
setLoadingMoreData(true);
setResultsPerPage(resultsPerPage + 12)
- // collectStuff("LearningObject", "");
+ // collectStuff("Collection", "");
}}
>
{
@@ -344,24 +233,34 @@ export default function Search(props) {
</button>
</div>
</Grid>
- </GridBuscaResource>
+ </GridBuscaCollection>
) :
- optionResult === "User" && (
- <GridBuscaUser container spacing={2}>
- <Grid item md={12} xs={12}>
+
+ optionResult === "LearningObject" ? (
+ <GridBuscaResource container spacing={2}>
+ <Grid item xs={12} md={3}>
+ <Paper elevation={4} square>
+ <SearchExpansionPanel onChange={collectStuff} onFiltering={isFiltering} />
+ </Paper>
+ </Grid>
+ <Grid item xs>
<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}
+ {resultsResource.map((card) => (
+ <Grid item xs 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>
))}
@@ -387,18 +286,71 @@ export default function Search(props) {
onClick={() => {
setLoadingMoreData(true);
setResultsPerPage(resultsPerPage + 12)
- // collectStuff("User", "");
+ // collectStuff("LearningObject", "");
}}
>
{
- loadingMoreData ? <CircularProgress color="inherit" size={24} /> : "Carregar mais 12"
+ loadingMoreData ? <CircularProgress size={24} color="inherit" /> : "Carregar mais 12"
}
</button>
</div>
</Grid>
- </GridBuscaUser>
- )
- }
+ </GridBuscaResource>
+ ) :
+ optionResult === "User" && (
+ <GridBuscaUser container spacing={2}>
+ <Grid item xs >
+ <Grid container spacing={2}>
+ {resultsUser.map((card) => (
+ <Grid item xs 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={() => {
+ setLoadingMoreData(true);
+ setResultsPerPage(resultsPerPage + 12)
+ // collectStuff("User", "");
+ }}
+ >
+ {
+ loadingMoreData ? <CircularProgress color="inherit" size={24} /> : "Carregar mais 12"
+ }
+ </button>
+ </div>
+ </Grid>
+ </GridBuscaUser>
+ )
+ }
+ </div>
</Principal>
</div>
);
@@ -439,11 +391,14 @@ const GridBuscaUser = styled(Grid)`
`;
const HeaderFilters = styled(Paper)`
- height: 60px;
+ height: 110px;
text-align: center;
background-color: #fff;
margin-bottom: 30px;
color: #666;
+ .textInfo{
+ text-align: start;
+ }
`;
const StyledBreadCrumbs = styled(Breadcrumbs)`
@@ -465,6 +420,5 @@ const BreadCrumbsDiv = styled.div`
`;
const Principal = styled.div`
- width: 1170px;
margin-inline: auto;
`;