Skip to content
Snippets Groups Projects
Commit fae1746a authored by Richard Fernando Heise Ferreira's avatar Richard Fernando Heise Ferreira
Browse files

Merge branch 'issue-302/ADD-button-remove-resources-on-profile-page' into 'develop' 

Issue #302: ADD button remove resources on profile page

See merge request !291
parents 693c4d16 03932ac7
No related branches found
No related tags found
1 merge request!291Issue #302: ADD button remove resources on profile page
Pipeline #42119 passed
Stage: test
Show whitespace changes
Inline Side-by-side
src/app/components/Cards.js
+ 106
− 30
View file @ fae1746a
......@@ -6,6 +6,13 @@ import Avatar from "@mui/material/Avatar";
import Typography from "@mui/material/Typography";
import Link from "next/link";
import { mecredURL } from "@/axiosConfig";
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
import { ImTelegram } from "react-icons/im";
import { isLoggedIn, useLoginBarrier } from "@/app/handlers/loginHandler";
import { useState, useEffect, useLayoutEffect } from "react";
import { getStoredValue } from "@/app/handlers/localStorageHandler";
import DeleteModal from "../recurso/[id]/components/deleteModal";
import { Button } from "@mui/material";
/**
......@@ -20,6 +27,29 @@ import { mecredURL } from "@/axiosConfig";
export default function Cards(props) {
const [deleteOpen, setDeleteOpen] = useState(false)
const [userData, setUserData] = useState([])
const [userProfile, setUserProfile] = useState(false)
useEffect(() => {
if (!isLoggedIn()) return;
const data = JSON.parse(getStoredValue("user_data"));
setUserData(data);
/*Verifica se o usuario está na sua própria pagina de perfil*/
const baseUrl = typeof window !== 'undefined' ? window.location.href : '';
const profilePage = /\/perfil\//.test(baseUrl)
const userId = baseUrl.match(/\/perfil\/(\d+)/);
if (userId && profilePage) {
const compare = String(userId[1]) === String(data?.id);
profilePage && compare ? setUserProfile(true) : null;
}
}, [])
/**
*
* @param {String} type tipo de recurso
......@@ -104,9 +134,27 @@ export default function Cards(props) {
return colors[id % colors.length];
}
let button = [
{
name: "Deletar",
icon: <DeleteOutlinedIcon />,
action: () => {
if (!isLoggedIn()) {
//setNeedLoginOpen(true);
return;
}
setDeleteOpen(true);
},
extraProps: {},
},
]
return (
<Card
className={`active:bg-ice-HC-dark active:rounded-3xl transition ease-in-out 2xl:w-[330px] xl:w-[290px] lg:w-[270px] max-lg:w-[290px] ${props.page !== "recurso" && "items-center"}`}
className={`active:bg-ice-HC-dark active:rounded-3xl transition ease-in-out 2xl:w-[330px] xl:w-[290px] lg:w-[270px] max-lg:w-[290px] outline outline-1 outline-lightGray-HC-white ${props.page !== "recurso" && "items-center"}`}
tabIndex="-1"
sx={{
display: "flex",
......@@ -115,19 +163,18 @@ export default function Cards(props) {
backgroundColor: "transparent",
boxShadow: "none",
}}
component={Link}
href={`/recurso/${props["id"]}` + (props.collectionSource ? `?collectionId=${props.collectionSource}` : "")}
>
<CardMedia
id="conteudo"
tabIndex="0"
className="hover:scale-[1.02] p-1 focus:border-turquoise-HC-white focus:border-4 border-gray-color transition-transform rounded-xl flex-shrink-0 aspect-video"
className="hover:scale-[1.02] p-1 focus:border-turquoise-HC-white focus:border-4 border-gray-color transition-transform rounded-xl flex-shrink-0 aspect-video justify-start"
sx={{
width: 327,
height: 181,
}}
component="img"
//component="img"
image={
props["image"] === null
? getDefaultThumbnail(props["type"])
......@@ -135,13 +182,18 @@ export default function Cards(props) {
}
alt="imagem"
title={props.title}
component={Link}
href={`/recurso/${props["id"]}` + (props.collectionSource ? `?collectionId=${props.collectionSource}` : "")}
/>
{
props.page === "recurso" ?
<>
<div className="flex flex-col ml-4 max-sm:ml-0 max-sm:justify-stretch">
<div className="line-clamp-2 text-lg font-bold text-darkGray-HC-white-underline min-h-4 max-sm:w-full"> {props["title"]} </div>
<div
href={`/recurso/${props["id"]}` + (props.collectionSource ? `?collectionId=${props.collectionSource}` : "")}
className="line-clamp-2 text-lg font-bold text-darkGray-HC-white-underline min-h-4 max-sm:w-full"> {props["title"]} </div>
<div className=" flex flex-row ">
<div className="flex flex-col ">
......@@ -158,20 +210,25 @@ export default function Cards(props) {
</>
:
<>
<div className="flex flex-row mt-4 mb-4 w-full justify-start ">
{props?.noAvatar || !props["avatar"] ? <div className={`flex items-center shrink-0 justify-center text-xl font-bold ml-1 text-ice-HC-dark rounded-full h-[33px] w-[33px] ${getRandomBg(props["id"])}`} >{props["author"][0]}</div>
:
<Link href={`/recurso/${props.id}${props.collectionSource ? `?collectionId=${props.collectionSource}` : ""}`} className="w-full">
<div className="flex flex-row mt-4 mb-3 w-full justify-start cursor-pointer">
{props?.noAvatar || !props["avatar"] ? (
<div className={`flex items-center shrink-0 justify-center text-xl font-bold ml-1 text-ice-HC-dark rounded-full h-[33px] w-[33px] ${getRandomBg(props["id"])}`}>
{props["author"][0]}
</div>
) : (
<img
src={mecredURL + props["avatar"]}
alt={props["author"]}
className="w-[33px] h-[33px] object-cover rounded-full"
/>
}
)}
<div className="mx-2">
<div className="line-clamp-1 text-sm font-bold text-darkGray-HC-white-underline mb- w-[100%] min-h-4"> {props["title"]} </div>
<div className="line-clamp-1 text-sm font-bold text-darkGray-HC-white-underline mb- w-[100%] min-h-4">
{props["title"]}
</div>
<div className="flex flex-row">
<div className="flex flex-col">
<div>
<div className="line-clamp-1 text-darkGray-HC-white text-sm font-light">
{props["author"]}
......@@ -182,16 +239,35 @@ export default function Cards(props) {
</div>
</div>
</div>
</div>
</div>
</Link>
{userProfile ?
<div className="flex justify-end w-full">
<DeleteModal setUniqueResources={props.setUniqueResources} userProfile open={deleteOpen} onClose={() => setDeleteOpen(false)} idLogin={userData["id"]} resourceId={props["id"]} />
{button.map((item, index) => (
<div key={index}>
<Button
onClick={item.action}
className="text-red-HC-white justify-end"
>
{item.icon}
</Button>
</div>
))}
</div>
: null
}
</>
}
{props?.homologa == "submitted" ?
<div className="text-ice-HC-dark text-xs p-1 bg-turquoise-HC-dark rounded-full flex justify-start">Em homologação</div>
<div className="text-xs p-1 bg-turquoise-HC-dark rounded-full flex justify-start text-ice-HC-dark">Em homologação</div>
:
null
}
</Card>
);
}
src/app/components/GroupCardsCollections.js
+ 1
− 1
View file @ fae1746a
......@@ -28,7 +28,7 @@ export default function GroupCardsCollections({ data, cardsPerRow, collectionId
<div className="flex flex-col">
<div className="mx-1 flex flex-col">
<div id="contentSize" className={`flex content flex-wrap max-sm:justify-center mb-4 max-sm:ml-0 md:ml-0 ${expanded ? "" : "overflow-y-hidden h-[270px]"}`}>
<div id="contentSize" className={`flex content flex-wrap max-sm:justify-center mb-4 max-sm:ml-0 gap-1 md:ml-0 gap-5 ${expanded ? "" : "overflow-y-hidden h-[270px]"}`}>
{data?.length !== 0 ? data?.sort((a,b) => a.position - b.position).map((item, index) => {
return (
......
src/app/perfil/[id]/components/ProfileResources.js
+ 16
− 2
View file @ fae1746a
......@@ -26,8 +26,10 @@ export default function ProfileResources({ id, idLogin }) {
const [numberCards, setNumberCards] = useState(0)
const [resourcesCount, setResourcesCount] = useState(0)
const [homologaCount, setHomologaCount] = useState(0)
const [uniqueCount, setuniqueCount] = useState(0)
const [totalCount, setTotalCount] = useState(0)
const [got, setGot] = useState(false)
const [idResources, setIdResources] = useState(null)
useEffect(() => {
const fetchLearningObjects = async (id) => {
......@@ -53,6 +55,16 @@ export default function ProfileResources({ id, idLogin }) {
};
// useEffect (()=>{
// const handlerResoureces = () => {
// setArrayResoureces (prev => {
// const newArray = [...prev]
// for (let i = 0; i < )
// })
// }
// })
const fetchSubmissions = async (id) => {
await mecredApi
.get(`/submissions/user_submissions/${id}`, {
......@@ -100,8 +112,9 @@ export default function ProfileResources({ id, idLogin }) {
// Atualiza o estado com os únicos
setUniqueResources(remove_duplicates);
setuniqueCount (resourcesCount + homologaCount)
}
}, [resources, homologaResources]);
}, [resources, homologaResources, uniqueCount]);
......@@ -131,7 +144,7 @@ export default function ProfileResources({ id, idLogin }) {
<NotFound name="recursos" />
) : (
<div className="p-3 my-5 mb-24 mx-5 rounded-md min-w-[200px] min-h-[180px] bg-white-HC-dark ">
<div className="flex flex-wrap justify-center">
<div className="flex flex-wrap justify-center gap-5">
{uniqueResources.map((resource, index) => (
<Cards
id={resource.learning_object?.id || resource?.id}
......@@ -142,6 +155,7 @@ export default function ProfileResources({ id, idLogin }) {
image={resource?.thumbnail || resource.learning_object?.thumbnail}
updated_at={resource?.updated_at || resource.learning_object?.updated_at}
homologa={resource?.status}
setUniqueResources={setUniqueResources}
/>
))}
</div>
......
src/app/recurso/[id]/components/deleteModal.js
+ 38
− 19
View file @ fae1746a
......@@ -2,7 +2,7 @@ import mecredApi from "@/axiosConfig"
import { Modal } from "@mui/material"
import { getStoredValue } from "@/app/handlers/localStorageHandler"
import { useRouter } from "next/navigation";
import { useState, useEffect, useLayoutEffect } from "react";
/**
*
* @param {Object} props
......@@ -11,32 +11,47 @@ import { useRouter } from "next/navigation";
* @param {Number} props.resourceId Id do recurso a ser guardado
* @returns Coleções que o usuário pode guardar tal recurso
*/
export default function DeleteModal({ open, onClose, resourceId }) {
export default function DeleteModal({ setUniqueResources, userProfile, open, onClose, resourceId }) {
const token = getStoredValue("access_token");
const client = getStoredValue("client");
const uid = getStoredValue("uid");
const router = useRouter()
const deleteResource = async () => {
const baseUrlProfile = typeof window !== 'undefined' ? window.location.href : '';
const url = `/learning_objects/${resourceId}`
const headers = {headers: {
const headers = {
headers: {
"access-token": token,
"token-type": "Bearer",
client: client,
uid: uid,
Expires: 0,
}}
}
}
await mecredApi.delete(url, headers)
.then(() => router.push("/busca?page=Collection"))
.catch((error) => console.error(error))
.then(() => {
if (userProfile) {
onClose()
} else {
router.push("/busca?page=Collection");
}
})
router.push("/busca?page=Collection")
setUniqueResources(old => {
console.log(old, "KLJLKJLKJL");
console.log(resourceId, "AAAAAAAAAAAAAAAAAAA")
return old.filter(resource => resource.learning_object.id !== resourceId);
})
//router.push("/busca?page=Collection")
}
return (
<Modal
open={open}
......@@ -57,7 +72,11 @@ export default function DeleteModal({ open, onClose, resourceId }) {
</div>
<p className="text-darkGray-HC-white-underline text-lg ">Tem certeza que deseja deletar esse recurso?</p>
<div className="flex justify-end mt-4">
{userProfile ?
<button onClick={onClose} className="rounded-lg p-3 bg-ice-HC-dark hover:bg-ice-HC-dark-hover text-darkGray-HC-white-underline mr-1">Voltar ao perfil</button>
:
<button onClick={onClose} className="rounded-lg p-3 bg-ice-HC-dark hover:bg-ice-HC-dark-hover text-darkGray-HC-white-underline mr-1">Voltar ao recurso</button>
}
<button onClick={() => deleteResource()} className="rounded-lg p-3 bg-turquoise hover:bg-turquoise-hover text-white-HC-dark-underline">Confirmar</button>
</div>
</div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment