diff --git a/src/app/components/Cards.js b/src/app/components/Cards.js
index 29fec7c0c4b8c95db30f29ca13029ef0991fc01a..9c94ae2f455cd4e9a97cecb4b81e468813296c80 100644
--- a/src/app/components/Cards.js
+++ b/src/app/components/Cards.js
@@ -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,40 +210,64 @@ 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>
- :
- <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="flex flex-row">
- <div>
- <div className="line-clamp-1 text-darkGray-HC-white text-sm font-light" >
- {props["author"]}
- </div>
- <div className="line-clamp-1 text-darkGray-HC-white text-sm font-light">
- {timeFunction(props.updated_at)}
+ <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="flex flex-row">
+ <div className="flex flex-col">
+ <div>
+ <div className="line-clamp-1 text-darkGray-HC-white text-sm font-light">
+ {props["author"]}
+ </div>
+ <div className="line-clamp-1 text-darkGray-HC-white text-sm font-light">
+ {timeFunction(props.updated_at)}
+ </div>
+ </div>
</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>
);
}
+
+
+
diff --git a/src/app/components/GroupCardsCollections.js b/src/app/components/GroupCardsCollections.js
index 8ee53539be1d992a5e7a3425333eb9d4e2551d7c..b1ddd308bd824020e1a6956e54361e476f6f76f6 100644
--- a/src/app/components/GroupCardsCollections.js
+++ b/src/app/components/GroupCardsCollections.js
@@ -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 (
diff --git a/src/app/perfil/[id]/components/ProfileResources.js b/src/app/perfil/[id]/components/ProfileResources.js
index 1450300d12340911792cdd095b9e30566c9246f0..6880c468cf6da3125517c2e9a0ac5c0fe2eff05a 100644
--- a/src/app/perfil/[id]/components/ProfileResources.js
+++ b/src/app/perfil/[id]/components/ProfileResources.js
@@ -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>
diff --git a/src/app/recurso/[id]/components/deleteModal.js b/src/app/recurso/[id]/components/deleteModal.js
index bb749f6474761b807340be6b3dde119fefc5ad70..edadbd028fea0f4ebedd5c91e1033c87b562cba7 100644
--- a/src/app/recurso/[id]/components/deleteModal.js
+++ b/src/app/recurso/[id]/components/deleteModal.js
@@ -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,31 +11,46 @@ 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: {
- "access-token": token,
- "token-type": "Bearer",
- client: client,
- uid: uid,
- Expires: 0,
- }}
+ 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
@@ -44,20 +59,24 @@ export default function DeleteModal({ open, onClose, resourceId }) {
className="grid place-items-center"
slotProps={{
backdrop: {
- sx: {
- backgroundColor: "rgba(0, 0, 0, 0.3)", // Ajuste a opacidade conforme necessário
- },
+ sx: {
+ backgroundColor: "rgba(0, 0, 0, 0.3)", // Ajuste a opacidade conforme necessário
+ },
},
- }}
+ }}
>
<div className="bg-ice-HC-dark p-6 rounded-lg">
<div className="flex justify-center mb-4">
- <p className="text-darkGray-HC-white-underline text-xl font-bold ">Deletar recurso</p>
+ <p className="text-darkGray-HC-white-underline text-xl font-bold ">Deletar recurso</p>
</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">
- <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>
+ {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>