Skip to content
Snippets Groups Projects
Commit 94b35153 authored by mcs22's avatar mcs22
Browse files

ISSUE #53: ADD paper collections and CREATE url

parent 6d158aac
Branches
No related tags found
1 merge request!45ISSUE #53: ADD paper collections and CREATE url
Show whitespace changes
Inline Side-by-side
Showing
with 130 additions and 52 deletions
src/app/components/Content.js
+ 1
− 1
View file @ 94b35153
...@@ -36,7 +36,7 @@ export default function Content({ name }) { ...@@ -36,7 +36,7 @@ export default function Content({ name }) {
<> <>
<div> <div>
<h1 className="text-2xl ml-4 font-bold text-gray-600 mb-6 mt-4"> <h1 className="text-2xl ml-4 font-bold text-text-color mb-6 mt-4">
{name} {(titlePage === "Alfabética") ? "ordem Alfabética" : " mais " + titlePage} {name} {(titlePage === "Alfabética") ? "ordem Alfabética" : " mais " + titlePage}
</h1> </h1>
</div> </div>
......
src/app/components/DownloadButton.js
+ 1
− 1
View file @ 94b35153
...@@ -26,7 +26,7 @@ export default function DownloadButton({id, objects}) { ...@@ -26,7 +26,7 @@ export default function DownloadButton({id, objects}) {
<> <>
<Button <Button
className=" border-secondary w-32 rounded-xl hover:bg-secondary-hover bg-secondary text-white font-bold normal-case flex " className=" border-secondary w-32 rounded-xl hover:bg-secondary-hover bg-secondary text-white max-md:my-3 font-bold normal-case flex "
variant="outlined" variant="outlined"
onClick={handleDowloadCollection} onClick={handleDowloadCollection}
startIcon={<DownloadIcon className='text-white'/>}> startIcon={<DownloadIcon className='text-white'/>}>
......
src/app/components/GroupCardsCollections.js
+ 7
− 4
View file @ 94b35153
...@@ -54,20 +54,23 @@ export default function GroupCardsCollections({ data, cardsPerRow, boxShadow }) ...@@ -54,20 +54,23 @@ export default function GroupCardsCollections({ data, cardsPerRow, boxShadow })
})} })}
</div> </div>
</div> </div>
<Divider className="mr-8 max-md:mr-0 mb-8"> <>
{showButton ? {showButton ?
( (
<Button <Button
fullWidth fullWidth
disableElevation disableElevation
variant="outlined" variant="outlined"
className="mt-2 border-secondary rounded-xl hover:border-secondary-hover text-gray-700 normal-case flex gap-2" className="mb-2 border-hidden hover:bg-transparent rounded-xl normal-case flex "
onClick={toggleContent} onClick={toggleContent}
> >
{expanded ? "Fechar" : "Carregar mais"} <p className="hover:bg-main px-4 text-gray-600 text-lg rounded-md">
{expanded ? "Ver menos..." : "Ver mais..."}
</p>
</Button> </Button>
) : null} ) : null}
</Divider> </>
</div> </div>
); );
} }
src/app/components/Header.js
+ 1
− 1
View file @ 94b35153
...@@ -109,7 +109,7 @@ export default function Header({ setQuery, handleOpenMenu }) { ...@@ -109,7 +109,7 @@ export default function Header({ setQuery, handleOpenMenu }) {
className='left-2 ' className='left-2 '
> >
<Badge > <Badge >
<NotificationsActiveSharpIcon className='text-slate-600 text-3xl ' /> <NotificationsActiveSharpIcon className='text-slate-400 text-3xl ' />
</Badge> </Badge>
</IconButton> </IconButton>
......
src/app/components/InfiniteScrollCards.js
+ 19
− 14
View file @ 94b35153
...@@ -72,7 +72,8 @@ export default function InfiniteScrollCards({ data, type = "Collection", setNewS ...@@ -72,7 +72,8 @@ export default function InfiniteScrollCards({ data, type = "Collection", setNewS
<div className="flex flex-col"> <div className="flex flex-col">
{data.map((item, index) => ( {data.map((item, index) => (
<Fragment key={item['id']} > <Fragment key={item['id']} >
<p className="text-xl max-md:text-center font-bold mb-0 text-gray-600 mr-2 inline-block">{item['name']}</p> <div className="bg-white mb-10 pt-6 pl-4 mr-6 rounded-2xl">
<p className="text-2xl max-md:text-center font-bold mb-0 text-text-color mr-2 inline-block">{item['name']}</p>
<div className="flex flex-wrap justify-between mr-8 max-md:flex-col "> <div className="flex flex-wrap justify-between mr-8 max-md:flex-col ">
<p className=" ml-1 max-md:text-center text-gray-500 mb-0"> <p className=" ml-1 max-md:text-center text-gray-500 mb-0">
...@@ -83,6 +84,7 @@ export default function InfiniteScrollCards({ data, type = "Collection", setNewS ...@@ -83,6 +84,7 @@ export default function InfiniteScrollCards({ data, type = "Collection", setNewS
</div> </div>
</div> </div>
<GroupCardsCollections cardsPerRow={cardsPerRow} data={item['collection_items']} /> <GroupCardsCollections cardsPerRow={cardsPerRow} data={item['collection_items']} />
</div>
</Fragment> </Fragment>
))} ))}
</div> </div>
...@@ -113,7 +115,7 @@ export default function InfiniteScrollCards({ data, type = "Collection", setNewS ...@@ -113,7 +115,7 @@ export default function InfiniteScrollCards({ data, type = "Collection", setNewS
return ( return (
<div className="flex flex-col"> <div className="flex flex-col">
<p className="text-xl max-sm:text-center font-bold mb-0 text-gray-600 ml-4 inline-block">Coleções Oficiais do MEC</p> <p className="text-2xl max-sm:text-center font-bold mb-0 text-text-color ml-4 inline-block">Coleções Oficiais do MEC</p>
<Link href="/perfil/35342"> <Link href="/perfil/35342">
<p className=" ml-5 max-sm:text-center text-gray-500 mb-4" > por Ministério da Educação</p> <p className=" ml-5 max-sm:text-center text-gray-500 mb-4" > por Ministério da Educação</p>
</Link> </Link>
...@@ -121,11 +123,14 @@ export default function InfiniteScrollCards({ data, type = "Collection", setNewS ...@@ -121,11 +123,14 @@ export default function InfiniteScrollCards({ data, type = "Collection", setNewS
{mecCollection.map((item, index) => { {mecCollection.map((item, index) => {
return ( return (
<Fragment key={item['id']}> <Fragment key={item['id']}>
<div className="bg-white mb-10 pt-4 pl-4 mr-8 rounded-2xl">
<div className="flex flex-wrap justify-between mr-8 max-md:justify-center "> <div className="flex flex-wrap justify-between mr-8 max-md:justify-center ">
<p className="text-xl max-sm:text-center font-bold mb-1 text-gray-600 ml-6 inline-block">{item["name"]}</p> <p className="text-2xl max-sm:text-center font-bold mb-1 text-text-color ml-6 inline-block">{item["name"]}</p>
<DownloadButton id={item['id']} objects={item['collection_items']} /> <DownloadButton id={item['id']} objects={item['collection_items']} />
</div> </div>
<GroupCardsCollections cardsPerRow={cardsPerRow} data={item['collection_items']} /> <GroupCardsCollections cardsPerRow={cardsPerRow} data={item['collection_items']} />
</div>
</Fragment> </Fragment>
) )
})} })}
......
src/app/components/SearchComponent.js
+ 14
− 8
View file @ 94b35153
import { styled, alpha } from '@mui/material/styles'; import { styled, alpha } from '@mui/material/styles';
import InputBase from '@mui/material/InputBase'; import InputBase from '@mui/material/InputBase';
import SearchIcon from '@mui/icons-material/Search'; import SearchIcon from '@mui/icons-material/Search';
import { useRouter } from 'next/navigation'; import { useRouter, usePathname } from 'next/navigation';
import { useState } from 'react'; import { useState } from 'react';
import { Button } from '@mui/material'; import { Button } from '@mui/material';
...@@ -11,7 +11,7 @@ const Search = styled('div')(({ theme }) => ({ ...@@ -11,7 +11,7 @@ const Search = styled('div')(({ theme }) => ({
position: 'relative', position: 'relative',
borderRadius: theme.shape.borderRadius, borderRadius: theme.shape.borderRadius,
backgroundColor: alpha(theme.palette.common.white, 0.15), backgroundColor: alpha(theme.palette.common.white, 0.15),
nRight: theme.spacing(2), marginRight: theme.spacing(2),
marginLeft: 0, marginLeft: 0,
width: '100%', width: '100%',
[theme.breakpoints.up('sm')]: { [theme.breakpoints.up('sm')]: {
...@@ -47,16 +47,24 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({ ...@@ -47,16 +47,24 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({
export default function SearchComponent({ setQuery, sizeWindow }) { export default function SearchComponent({ setQuery, sizeWindow }) {
const pathname = usePathname();
const router = useRouter();
const [input, setInput] = useState("");
const { push } = useRouter();
const handleSubmit = (e) => { const handleSubmit = (e) => {
if (pathname !== "/collections" && pathname !== "/learningObjects") {
// NAO FUNCIONA ROUTER.PUSH
} else {
e.preventDefault(); e.preventDefault();
input === "" ? setQuery("*") : input === "" ? setQuery("*") :
setQuery(input); setQuery(input);
} }
}
const [input, setInput] = useState("");
return ( return (
sizeWindow ? sizeWindow ?
...@@ -69,8 +77,6 @@ export default function SearchComponent({ setQuery, sizeWindow }) { ...@@ -69,8 +77,6 @@ export default function SearchComponent({ setQuery, sizeWindow }) {
</Button> </Button>
<StyledInputBase <StyledInputBase
fullWidth="true"
placeholder="Pesquisar" placeholder="Pesquisar"
inputProps={{ 'aria-label': 'search', className: 'text-slate-400 ' }} inputProps={{ 'aria-label': 'search', className: 'text-slate-400 ' }}
onChange={(e) => { onChange={(e) => {
......
src/app/components/SideBar.js
+ 84
− 21
View file @ 94b35153
...@@ -9,7 +9,8 @@ import HelpIcon from '@mui/icons-material/Help'; ...@@ -9,7 +9,8 @@ import HelpIcon from '@mui/icons-material/Help';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import mecredApi from '@/axiosConfig'; import mecredApi from '@/axiosConfig';
import VerifiedIcon from '@mui/icons-material/Verified'; import VerifiedIcon from '@mui/icons-material/Verified';
import { usePathname } from 'next/navigation' import { usePathname, useSearchParams, useRouter } from 'next/navigation'
const acessoRapido = [ const acessoRapido = [
{ {
...@@ -29,11 +30,6 @@ const acessoRapido = [ ...@@ -29,11 +30,6 @@ const acessoRapido = [
icon: SubjectIcon, icon: SubjectIcon,
href: '/learningObjects' href: '/learningObjects'
}, },
{
title: 'Seguindo',
icon: PeopleAltIcon,
href: '/seguindo'
},
{ {
title: 'Sobre', title: 'Sobre',
icon: HelpIcon, icon: HelpIcon,
...@@ -81,16 +77,32 @@ function handleStringSubject(array) { ...@@ -81,16 +77,32 @@ function handleStringSubject(array) {
return string.substring(0, string.length - 1); return string.substring(0, string.length - 1);
} }
function handleTranslateTitle(title) {
switch (title) {
case "score":
return "Relevantes"
case "publicationdesc":
return "Recentes"
case "review_average":
return "Estrelas"
case "likes":
return "Favoritados"
case "downloads":
return "Baixados"
case "title":
return "Alfabética"
}
}
export default function SideBar({ filterSubject, setFilterSubject, openMenu, setSelectFilter, selectFilter, setTitlePage }) { export default function SideBar({ filterSubject, setFilterSubject, openMenu, setSelectFilter, selectFilter, setTitlePage }) {
const [subjects, setSubjects] = useState([]); const [subjects, setSubjects] = useState([]);
const [selectedSubject, setSelectedSubject] = useState([]); const [selectedSubject, setSelectedSubject] = useState([]);
const [selectedPage, setSelectedPage] = useState("");
let pathname = usePathname(); let pathname = usePathname();
console.log("aaaaaaaaaaa", pathname); const searchParams = useSearchParams();
//mudar para a pag padrao, NAO TA FUNCIONANDO const router = useRouter();
useEffect(() => { useEffect(() => {
...@@ -107,14 +119,49 @@ export default function SideBar({ filterSubject, setFilterSubject, openMenu, set ...@@ -107,14 +119,49 @@ export default function SideBar({ filterSubject, setFilterSubject, openMenu, set
const handleFilterSubject = (index) => { const handleFilterSubject = (index) => {
if (pathname === "/collections" || pathname === "/learningObjects") {
const copySelectSubject = [...selectedSubject]; const copySelectSubject = [...selectedSubject];
copySelectSubject[index] = !copySelectSubject[index]; copySelectSubject[index] = !copySelectSubject[index];
setSelectedSubject(copySelectSubject);
setFilterSubject(handleStringSubject(copySelectSubject)); setFilterSubject(handleStringSubject(copySelectSubject));
setSelectedSubject(copySelectSubject);
} else {
router.push("/collections");
} }
}
useEffect(() => {
if (pathname === "/collections" || pathname === "/learningObjects") {
//quando nao esta com o order na url
if(!searchParams.get("order")) {
const params = new URLSearchParams(searchParams)
params.set("order", selectFilter);
router.push("/collections?" + params.toString());}
const filter = searchParams.get("order") ?? "publicationdesc";
setSelectFilter(filter);
setTitlePage(handleTranslateTitle(filter));
// const subjects = searchParams.get("subjects") ?? " ";
// setFilterSubject(subjects)
}
}, [searchParams, setSelectFilter, setFilterSubject, pathname, setTitlePage]);
// ?query=*&order=publicationdesc&subjects=26,16,8
return ( return (
<> <>
<div className={`top-14 sm:top-[60px] start-0 overflow-y-auto pb-24 bg-main pl-8 w-64 text-white fixed h-full z-40 ease-in-out duration-300 ${!openMenu ? "-translate-x-full " : "translate-x-0" <div className={`top-14 sm:top-[60px] start-0 overflow-y-auto pb-24 bg-main pl-8 w-64 text-white fixed h-full z-40 ease-in-out duration-300 ${!openMenu ? "-translate-x-full " : "translate-x-0"
...@@ -125,8 +172,8 @@ export default function SideBar({ filterSubject, setFilterSubject, openMenu, set ...@@ -125,8 +172,8 @@ export default function SideBar({ filterSubject, setFilterSubject, openMenu, set
{acessoRapido.map((item, index) => { {acessoRapido.map((item, index) => {
return ( return (
<Link href={item.href} key={index} <Link href={item.href} key={index}
className={` pr-8 cursor-pointer rounded-xl pl-2 pb-1 pt-1 max-w-52 mb-1 `} > className={` pr-8 cursor-pointer rounded-xl pl-2 pb-1 pt-1 max-w-52 mb-1 ${pathname === item.href ? "bg-secondary text-white hover:bg-secondary-hover" : " hover:bg-slate-300"} `} >
<item.icon className={` text-secondary cursor-pointer `} /> {item.title} <item.icon className={` text-secondary cursor-pointer ${pathname === item.href ? " text-white hover:bg-secondary-hover" : "hover:bg-slate-300"}`} /> {item.title}
</Link> </Link>
) )
})} })}
...@@ -137,7 +184,19 @@ export default function SideBar({ filterSubject, setFilterSubject, openMenu, set ...@@ -137,7 +184,19 @@ export default function SideBar({ filterSubject, setFilterSubject, openMenu, set
<div className='flex flex-col text-gray-500 mt-2'> <div className='flex flex-col text-gray-500 mt-2'>
{atalhos.map((item, index) => { {atalhos.map((item, index) => {
return ( return (
<a className={`cursor-pointer normal-case pl-2 pr-8 py-[2px] rounded-xl mb-1 p-[1px] max-w-52 ${selectFilter === item.order ? "bg-secondary text-white hover:bg-secondary-hover" : " hover:bg-slate-300"}`} onClick={() => { setSelectFilter(item.order); setTitlePage(item.title) }} key={index} > <a className={`cursor-pointer normal-case pl-2 pr-8 py-[2px] rounded-xl mb-1 p-[1px] max-w-52 ${selectFilter === item.order ? "bg-secondary text-white hover:bg-secondary-hover" : " hover:bg-slate-300"}`}
onClick={() => {
if (pathname === "/collections" || pathname === "/learningObjects") {
setSelectFilter(item.order);
setTitlePage(item.title);
const params = new URLSearchParams(searchParams)
params.set("order", item.order);
router.push("/collections?" + params.toString());
} else {
router.push("/collections");
}
}} key={index} >
<LocalLibraryIcon className={` text-secondary cursor-pointer ${selectFilter === item.order ? " text-white hover:bg-secondary-hover" : " hover:bg-slate-300"}`} /> {item.title} <LocalLibraryIcon className={` text-secondary cursor-pointer ${selectFilter === item.order ? " text-white hover:bg-secondary-hover" : " hover:bg-slate-300"}`} /> {item.title}
</a> </a>
) )
...@@ -149,8 +208,12 @@ export default function SideBar({ filterSubject, setFilterSubject, openMenu, set ...@@ -149,8 +208,12 @@ export default function SideBar({ filterSubject, setFilterSubject, openMenu, set
<div className='flex flex-col text-gray-500 mt-2'> <div className='flex flex-col text-gray-500 mt-2'>
{subjects.map((item, index) => { {subjects.map((item, index) => {
return ( return (
// <Link href="/" key={index} className='cursor-pointer rounded hover:bg-slate-300 pr-8 pt-x pt-0 mb-2 max-w-max' > < LocalLibraryIcon className=' text-secondary cursor-pointer' /> {item.name} </Link> <a className={` cursor-pointer rounded-xl pl-2 mb-1 p-[1px] max-w-52 ${selectedSubject[index] ? "bg-secondary text-main hover:bg-secondary-hover" : " hover:bg-slate-300"}`} key={index}
<a className={` cursor-pointer rounded-xl pl-2 mb-1 p-[1px] max-w-52 ${selectedSubject[index] ? "bg-secondary text-main hover:bg-secondary-hover" : " hover:bg-slate-300"}`} key={index} onClick={() => { handleFilterSubject(index) }}> onClick={() => { handleFilterSubject(index);
// const params = new URLSearchParams(searchParams)
// params.set("subjects", filterSubject);
// router.push("/learningObjects?" + params.toString());
}}>
<LocalLibraryIcon className={` cursor-pointer mt-1 ${selectedSubject[index] ? " text-main" : " text-secondary "}`} /> {item.name} <LocalLibraryIcon className={` cursor-pointer mt-1 ${selectedSubject[index] ? " text-main" : " text-secondary "}`} /> {item.name}
</a> </a>
) )
...@@ -162,8 +225,8 @@ export default function SideBar({ filterSubject, setFilterSubject, openMenu, set ...@@ -162,8 +225,8 @@ export default function SideBar({ filterSubject, setFilterSubject, openMenu, set
<div className='flex flex-col pt-2 items-center pl-6 top-16 sm:top-[60px] start-0 overflow-y-auto pb-24 bg-main w-20 text-white fixed h-full z-40 ease-in-out duration-300 '> <div className='flex flex-col pt-2 items-center pl-6 top-16 sm:top-[60px] start-0 overflow-y-auto pb-24 bg-main w-20 text-white fixed h-full z-40 ease-in-out duration-300 '>
{acessoRapido.map((item, index) => { {acessoRapido.map((item, index) => {
return <Link href={item.href} key={index} return <Link href={item.href} key={index}
className={`cursor-pointer text-center text-secondary text-xs rounded p-1 mb-0 max-w-max `}> className={`cursor-pointer hover:bg-slate-300 text-center text-secondary text-xs rounded-lg p-1 mb-0 max-w-max ${pathname === item.href ? "bg-slate-200 " : ""}`}>
< item.icon className={`text-secondary text-3xl rounded-xl cursor-pointer `} /> </Link> < item.icon className={`text-secondary text-3xl rounded-xl cursor-pointer ${pathname === item.href ? "text-secondary-hover " : ""} `} /> </Link>
})} })}
</div> </div>
......
tailwind.config.js
+ 3
− 2
View file @ 94b35153
...@@ -9,7 +9,7 @@ module.exports = { ...@@ -9,7 +9,7 @@ module.exports = {
theme: { theme: {
extend: { extend: {
colors: { colors: {
"main": "#eaeded", "main": "#f5f9f9",
"secondary": "#00bacc", "secondary": "#00bacc",
"white": "#fff", "white": "#fff",
"orange": "#ED6F24", "orange": "#ED6F24",
...@@ -18,7 +18,8 @@ module.exports = { ...@@ -18,7 +18,8 @@ module.exports = {
"main-text": "#858585", "main-text": "#858585",
"black-hover": "#0001", "black-hover": "#0001",
"violet": "#56358C", "violet": "#56358C",
"pink": "#E62954" "pink": "#E62954",
"text-color": "#5e6b6b"
}, },
backgroundImage: { backgroundImage: {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))", "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment